/* ===========================================================================
   Caro Comunicando — Intro "telón" (solo home)
   Timeline 100% en CSS (el JS solo gestiona scroll/sesión/accesibilidad).
   Si el JS falla, la animación igual se completa y deja de bloquear.
   =========================================================================== */

#intro{
  position:fixed;inset:0;z-index:9999;
  overflow:hidden;pointer-events:none;
  /* fallback: si por alguna razón nada anima, se oculta a los 5s */
  animation:intro-failsafe 0s linear 5s forwards;
}
@keyframes intro-failsafe{ to{ visibility:hidden; } }

/* Paneles del telón */
#intro .intro-panel{
  position:absolute;top:0;bottom:0;width:50.5%;
  background:var(--teal-deep,#143432);
  will-change:transform;
}
#intro .intro-left{ left:0;  transform:translateX(0); animation:intro-part-left  .9s cubic-bezier(.76,0,.24,1) 1.9s forwards; }
#intro .intro-right{ right:0; transform:translateX(0); animation:intro-part-right .9s cubic-bezier(.76,0,.24,1) 1.9s forwards; }
/* costura dorada central */
#intro .intro-left::after,
#intro .intro-right::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;
  background:linear-gradient(to bottom,transparent,rgba(200,154,74,.5),transparent);
}
#intro .intro-left::after{ right:0; }
#intro .intro-right::after{ left:0; }

@keyframes intro-part-left{  to{ transform:translateX(-101%); } }
@keyframes intro-part-right{ to{ transform:translateX(101%); } }

/* Núcleo: isotipo + palabra */
#intro .intro-core{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:30px;
  opacity:1;
  animation:intro-core-out .55s cubic-bezier(.4,0,.2,1) 1.7s forwards;
}
@keyframes intro-core-out{ to{ opacity:0; transform:scale(1.04); } }

#intro .intro-mark{ width:clamp(116px,20vw,210px);height:auto; }
#intro .intro-mark path{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:intro-draw 1.15s cubic-bezier(.65,0,.35,1) .15s forwards;
}
#intro .intro-mark .m2{ animation-delay:.45s; }
#intro .intro-mark .m3{ animation-delay:.70s; }
@keyframes intro-draw{ to{ stroke-dashoffset:0; } }

/* leve pulso del trazo dorado al terminar de dibujarse */
#intro .intro-mark .m3{ transform-box:fill-box;transform-origin:center; }

#intro .intro-word{
  display:flex;align-items:baseline;gap:16px;
  opacity:0;transform:translateY(10px);
  animation:intro-word-in .9s ease .7s forwards;
}
@keyframes intro-word-in{ to{ opacity:1;transform:none; } }
#intro .intro-word .iw-caro{
  font-family:'Cormorant Garamond',serif;font-weight:500;
  font-size:clamp(34px,5vw,52px);color:var(--gold-soft,#d9b87a);
  letter-spacing:-.005em;line-height:1;
}
#intro .intro-word .iw-sur{
  font-family:'Inter',sans-serif;font-weight:500;
  font-size:clamp(11px,1.4vw,14px);letter-spacing:.34em;
  text-transform:uppercase;color:rgba(245,241,234,.55);
}

/* Mientras corre el intro: bloquear scroll y pausar la entrada del hero
   para que la animación del héroe se sienta "fresca" tras abrir el telón. */
html.intro-lock{ overflow:hidden; }
html.intro-playing .hero h1 .l1,
html.intro-playing .hero h1 .it,
html.intro-playing .hero-label,
html.intro-playing .hero .sub,
html.intro-playing .hero-ctas,
html.intro-playing .hero-photo{
  animation-play-state:paused !important;
}

/* Estado final controlado por JS (o por failsafe): fuera de la vista */
#intro.intro-done{ visibility:hidden;pointer-events:none; }

/* Accesibilidad: sin animación, no hay telón */
@media (prefers-reduced-motion: reduce){
  #intro{ display:none !important; }
  html.intro-lock{ overflow:auto; }
}