/* =========================================================
   OUTFIT CHECK — INTRO / PRE-ROLL
   ---------------------------------------------------------
   Scope: .oc-intro
   Se carga después de theme.css + deck.css.
   Sin fondo opaco: el degradado y las ondas del shell siguen visibles.
   Escenario fijo 1920×1080, sin media queries de layout.
   ========================================================= */

/* ---------- Tokens locales ---------- */
.oc-intro{
  --oi-ink:#0B2B2A;
  --oi-teal:#007782;
  --oi-mint:#00B3A6;
  --oi-coral:#FF6F5E;
  --oi-muted:rgba(11,43,42,.52);
  --oi-line:rgba(11,43,42,.12);
  color:var(--oi-ink);
  font-family:var(--font-ui);
}

/* Nada de fondo propio: el stage del deck ya pone el papel y las ondas. */
.oc-intro__inner{
  position:absolute;inset:0;z-index:3;
  padding:0;display:block;
}
.oc-intro__stage{
  position:absolute;inset:0;
  overflow:hidden;
}

/* ---------- Luz de porcelana tras la etiqueta ---------- */
.oc-intro__glow{
  position:absolute;left:calc(50% + 8px);top:540px;
  width:660px;height:660px;margin-left:-330px;margin-top:-330px;
  border-radius:50%;pointer-events:none;
  background:
    radial-gradient(circle at 50% 47%,
      rgba(255,255,255,.62) 0%,
      rgba(255,255,255,.3) 34%,
      rgba(221,244,239,.16) 58%,
      rgba(221,244,239,0) 72%);
  filter:blur(2px);
  animation:oc-intro-breathe 13s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.slide.visible .oc-intro__glow{animation-play-state:running;}

/* ---------- Hilo + etiqueta ---------- */
.oc-intro__swing{
  position:absolute;left:calc(50% + 8px);top:0;
  width:1px;height:660px;
  transform-origin:50% 0;
  animation:oc-intro-sway 11s ease-in-out infinite alternate;
  animation-play-state:paused;
}
.slide.visible .oc-intro__swing{animation-play-state:running;}

.oc-intro__thread{
  position:absolute;left:0;top:0;z-index:4;
  width:1px;height:446px;
  background:linear-gradient(180deg,
    rgba(11,43,42,0) 0%,
    rgba(11,43,42,.16) 9%,
    rgba(11,43,42,.34) 100%);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform 1.05s cubic-bezier(.22,1,.36,1) .1s;
}
.slide.visible .oc-intro__thread{transform:scaleY(1);}

.oc-intro__tag{
  position:absolute;left:-88px;top:422px;z-index:3;
  width:176px;height:236px;
  padding:56px 20px 18px;
  border:1px solid rgba(11,43,42,.1);
  border-radius:3px;
  background:
    linear-gradient(135deg,rgba(255,255,255,.7) 0%,rgba(255,255,255,0) 34%),
    radial-gradient(90% 70% at 18% 102%,rgba(0,119,130,.035),transparent 62%),
    linear-gradient(165deg,#FDFCF7 0%,#F8F5EC 66%,#F1EDE1 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -16px 28px -24px rgba(11,43,42,.3),
    0 34px 58px -26px rgba(11,43,42,.32),
    0 10px 22px -14px rgba(11,43,42,.18);
  opacity:0;
  transform:translateY(-9px) scale(.988);
  transition:
    opacity .75s ease .5s,
    transform 1.05s cubic-bezier(.22,1,.36,1) .5s;
}
.slide.visible .oc-intro__tag{opacity:1;transform:none;}

/* Agujero troquelado + refuerzo */
.oc-intro__hole{
  position:absolute;left:50%;top:18px;
  width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:#E9E5D8;
  box-shadow:
    inset 0 2px 3px rgba(11,43,42,.4),
    0 1px 0 rgba(255,255,255,.85),
    0 0 0 4px rgba(0,119,130,.05);
}
.oc-intro__hole::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(11,43,42,.12);
}
/* Nudo del hilo dentro del agujero */
.oc-intro__thread::after{
  content:"";position:absolute;left:50%;bottom:-1px;
  width:2px;height:2px;margin-left:-1px;border-radius:50%;
  background:rgba(11,43,42,.55);
}

/* Composición impresa de la etiqueta */
.oc-intro__tag-head{
  display:flex;flex-direction:column;align-items:flex-start;gap:10px;
}
.oc-intro__name{
  font-family:var(--font-mono);
  font-size:12px;font-weight:500;line-height:1;
  letter-spacing:.075em;color:rgba(11,43,42,.74);
}
.oc-intro__rule{
  width:22px;height:1px;
  background:rgba(0,119,130,.5);
}
.oc-intro__tag-foot{
  position:absolute;left:20px;right:20px;bottom:18px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}

/* Código de barras dibujado (sin texto) */
.oc-intro__barcode{
  width:36px;height:11px;flex:0 0 auto;
  opacity:.34;
  background:repeating-linear-gradient(90deg,
    rgba(11,43,42,.95) 0 1px,transparent 1px 3px,
    rgba(11,43,42,.95) 3px 5px,transparent 5px 6px,
    rgba(11,43,42,.95) 6px 7px,transparent 7px 10px,
    rgba(11,43,42,.95) 10px 12px,transparent 12px 14px);
}
.oc-intro__foot-label{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--font-mono);
  font-size:8px;font-weight:500;line-height:1;
  letter-spacing:.16em;text-transform:uppercase;
  color:rgba(11,43,42,.5);
  white-space:nowrap;
}
.oc-intro__dot{
  width:4px;height:4px;border-radius:50%;flex:0 0 auto;
  background:var(--oi-coral);
  box-shadow:0 0 0 2px rgba(255,111,94,.1);
}

/* ---------- Línea que abre hacia la portada ---------- */
.oc-intro__guide{
  position:absolute;left:calc(50% + 56px);top:540px;z-index:1;
  width:0;height:1px;
  background:linear-gradient(90deg,
    rgba(0,119,130,.4) 0%,
    rgba(0,119,130,.2) 60%,
    rgba(0,119,130,0) 100%);
  transition:width 1.55s cubic-bezier(.22,1,.36,1) .8s;
}
.slide.visible .oc-intro__guide{width:458px;}

.oc-intro__guide-dot{
  position:absolute;right:-2px;top:50%;
  width:4px;height:4px;margin-top:-2px;border-radius:50%;
  background:var(--oi-coral);
  opacity:0;
  transition:opacity .6s ease 1.9s;
}
.slide.visible .oc-intro__guide-dot{opacity:.92;}
.oc-intro__guide-dot::after{
  content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1px solid rgba(255,111,94,.26);
  animation:oc-intro-ping 7s ease-out infinite;
}
.slide:not(.visible) .oc-intro__guide-dot::after{animation-play-state:paused;}

/* ---------- Movimiento lento ---------- */
@keyframes oc-intro-sway{
  from{transform:rotate(-1deg)}
  to{transform:rotate(-2.8deg)}
}
@keyframes oc-intro-breathe{
  from{transform:scale(.97);opacity:.72}
  to{transform:scale(1.04);opacity:1}
}
@keyframes oc-intro-ping{
  0%,64%,100%{transform:scale(1);opacity:.7}
  82%{transform:scale(2.7);opacity:0}
}

/* ---------- Sin movimiento: mismo encuadre, quieto ---------- */
@media (prefers-reduced-motion:reduce){
  .oc-intro__swing{animation:none;transform:rotate(-1.3deg);}
  .oc-intro__glow{animation:none;opacity:.9;}
  .oc-intro__guide-dot::after{animation:none;opacity:0;}
}

/* ---------- Impresión / PDF: estados finales ---------- */
@media print{
  .oc-intro__swing{animation:none;transform:rotate(-1.3deg);}
  .oc-intro__thread{transform:none;}
  .oc-intro__tag{opacity:1;transform:none;}
  .oc-intro__guide{width:458px;}
  .oc-intro__guide-dot{opacity:.85;}
  .oc-intro__glow{animation:none;opacity:.9;}
  .oc-intro__guide-dot::after{animation:none;opacity:0;}
}