/* ============================================================
   Instinto Capital · Intro de carga (cortinas)
   Overlay a pantalla completa. TODO scoped bajo #intro para no
   afectar el resto del sitio. Reemplaza al preloader viejo.
   ============================================================ */

/* Reset del mockup, confinado al overlay (nunca global) */
#intro, #intro *{ box-sizing:border-box; margin:0; padding:0; }

/* Bloqueo de scroll SOLO mientras corre el intro (lo pone/quita el JS) */
body.ic-intro-active{ overflow:hidden; }

/* ================= INTRO / CURTAIN ================= */
#intro{
  position:fixed; inset:0; z-index:100;
  font-family:'Inter', sans-serif; color:#f6f2e8;
  /* tokens del mockup, en el overlay (no en :root, para no filtrar --gold etc.) */
  --bg:#07070a;
  --gold:#d4af37;
  --gold-2:#f2cf6b;
  --gold-deep:#7a5f1a;
  --text:#f6f2e8;
  --faint:#6f6b74;
  /* Si el JS no corre, no dejamos el overlay bloqueando el sitio */
  animation: icIntroSafetyHide 0.01s linear 8s forwards;
}
@keyframes icIntroSafetyHide{
  to{ visibility:hidden; pointer-events:none; opacity:0; }
}
#intro.ic-done{ display:none; animation:none; }

.curtain{
  position:absolute; top:0; width:50%; height:100%; overflow:hidden;
}
.curtain.left{left:0;}
.curtain.right{right:0;}

/* premium fabric-like base: directional light + vignette + subtle vertical folds */
.curtain .base{
  position:absolute; inset:-2px;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(212,175,55,0.10), transparent 55%),
    radial-gradient(90% 60% at 50% 110%, rgba(0,0,0,0.55), transparent 60%),
    linear-gradient(180deg, #0d0d10 0%, #08080a 45%, #050506 100%);
}
.curtain .folds{
  position:absolute; inset:0;
  background:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,0.028) 0px,
    rgba(255,255,255,0.028) 1px,
    transparent 1px,
    transparent 34px,
    rgba(0,0,0,0.12) 34px,
    rgba(0,0,0,0.12) 36px,
    transparent 36px,
    transparent 68px
  );
  mix-blend-mode:overlay;
}
.curtain .grain{
  position:absolute; inset:0; opacity:0.05; mix-blend-mode:overlay;
}
.curtain .stars{position:absolute; inset:0; width:100%; height:100%;}
.curtain .vignette-edge{
  position:absolute; inset:0;
}
.curtain.left .vignette-edge{ background:linear-gradient(90deg, rgba(0,0,0,0.5), transparent 30%); }
.curtain.right .vignette-edge{ background:linear-gradient(-90deg, rgba(0,0,0,0.5), transparent 30%); }

/* gilded seam where the two panels meet */
.curtain.left .seam{ position:absolute; top:0; right:0; width:3px; height:100%;
  background:linear-gradient(180deg, transparent, rgba(212,175,55,0.75) 15%, rgba(242,207,107,0.95) 50%, rgba(212,175,55,0.75) 85%, transparent);
  box-shadow:0 0 18px 2px rgba(212,175,55,0.35);
}
.curtain.right .seam{ position:absolute; top:0; left:0; width:3px; height:100%;
  background:linear-gradient(180deg, transparent, rgba(212,175,55,0.75) 15%, rgba(242,207,107,0.95) 50%, rgba(212,175,55,0.75) 85%, transparent);
  box-shadow:0 0 18px 2px rgba(212,175,55,0.35);
}

.curtain.left{ box-shadow:20px 0 60px -20px rgba(0,0,0,0.8); }
#intro.play .curtain.left{ animation:icIntroOpenLeft .95s cubic-bezier(.62,0,.2,1) 2.65s forwards; }
.curtain.right{ box-shadow:-20px 0 60px -20px rgba(0,0,0,0.8); }
#intro.play .curtain.right{ animation:icIntroOpenRight .95s cubic-bezier(.62,0,.2,1) 2.65s forwards; }
@keyframes icIntroOpenLeft{ to{ transform:translateX(-100%); } }
@keyframes icIntroOpenRight{ to{ transform:translateX(100%); } }

.logo-stage{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(42vw, 220px); height:min(42vw, 220px); z-index:2;
}
.glow{
  position:absolute; inset:-70px; border-radius:50%;
  background:radial-gradient(circle, rgba(242,207,107,0.4), transparent 65%);
  opacity:0; filter:blur(8px);
}
#intro.play .glow{ animation:icIntroGlowPulse 1s ease 1.75s forwards; }
@keyframes icIntroGlowPulse{
  0%{opacity:0; transform:scale(0.7);}
  45%{opacity:1; transform:scale(1.15);}
  100%{opacity:0; transform:scale(1.5);}
}

.logo-half{position:absolute; top:0; width:50%; height:100%; opacity:0; overflow:hidden;}
.logo-half img{width:100%; height:100%; object-fit:cover; display:block;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,0.5));}
.logo-half.l{left:0;}
#intro.play .logo-half.l{ animation:icIntroHalfL 1.9s cubic-bezier(.22,.85,.25,1) .25s forwards;}
.logo-half.r{right:0;}
#intro.play .logo-half.r{ animation:icIntroHalfR 1.9s cubic-bezier(.22,.85,.25,1) .25s forwards;}
@keyframes icIntroHalfL{
  0%{opacity:0; transform:translateX(-74px);}
  28%{opacity:1; transform:translateX(-74px);}
  75%{opacity:1; transform:translateX(0);}
  100%{opacity:1; transform:translateX(0);}
}
@keyframes icIntroHalfR{
  0%{opacity:0; transform:translateX(74px);}
  28%{opacity:1; transform:translateX(74px);}
  75%{opacity:1; transform:translateX(0);}
  100%{opacity:1; transform:translateX(0);}
}

#intro.play .logo-stage{ animation:icIntroStageFade .5s ease 2.55s forwards; }
@keyframes icIntroStageFade{ to{opacity:0; transform:translate(-50%,-50%) scale(0.92);} }
@keyframes icIntroFadeOut{ to{opacity:0;} }

.tagline{
  position:absolute; top:calc(50% + min(28vw, 150px)); left:50%; transform:translateX(-50%);
  font-family:'JetBrains Mono', monospace; font-size:clamp(9px, 2.4vw, 11px); letter-spacing:0.24em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; opacity:0; z-index:2;
  max-width:90vw; overflow:hidden; text-overflow:ellipsis;
}
#intro.play .tagline{ animation:icIntroTagIn .8s ease 1.9s forwards, icIntroFadeOut .5s ease 2.55s forwards; }
@keyframes icIntroTagIn{ to{opacity:1;} }

@media (max-width:767px){
  .logo-stage{ width:min(48vw, 200px); height:min(48vw, 200px); }
  .tagline{
    top: calc(50% + min(30vw, 130px));
    font-size: clamp(9px, 2.6vw, 11px);
    letter-spacing: 0.18em;
    padding: 0 16px;
    text-align: center;
    white-space: normal;
    max-width: 88vw;
  }
}
@media (max-width:480px){
  .logo-stage{ width:min(56vw, 168px); height:min(56vw, 168px); }
}
@media (max-height:500px){
  .logo-stage{ width:min(28vh, 160px); height:min(28vh, 160px); }
  .tagline{ top:calc(50% + min(18vh, 100px)); }
}

@media (prefers-reduced-motion: reduce){
  #intro.play .curtain.left, #intro.play .curtain.right,
  #intro.play .glow, #intro.play .logo-half.l, #intro.play .logo-half.r,
  #intro.play .logo-stage, #intro.play .tagline{ animation:none !important; }
}