/* ============================================================
   CMF Evolution — Intro / Preloader (producción)
   Overlay cinematográfico sobre el sitio. Una vez por sesión.
   Paleta del programa: naranja #f36a2d · ink #14110f · cream #eae5de
   ============================================================ */

/* Fuentes para los labels del globo (Sora ya viene de Google Fonts) */
@font-face{font-family:"Host Grotesk";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/HostGrotesk-Regular.woff2") format("woff2");}
@font-face{font-family:"Host Grotesk";font-weight:700;font-style:normal;font-display:swap;src:url("../assets/fonts/HostGrotesk-Bold.woff2") format("woff2");}
@font-face{font-family:"Roboto Slab";font-weight:400;font-style:normal;font-display:swap;src:url("../assets/fonts/RobotoSlab-Regular.woff2") format("woff2");}

/* Scroll-lock mientras la intro está activa (no afecta al sitio una vez terminada) */
body.intro-active{ overflow:hidden !important; height:100vh; }

/* Si ya se vio en esta sesión, ocultar desde el primer paint (anti-flash) */
html.intro-seen .preloader{ display:none !important; }

/* ============================================================
   Preloader overlay
   ============================================================ */
.preloader{position:fixed;inset:0;z-index:9999;overflow:hidden;
  --orange:#f36a2d; --orange-soft:#f7b66d; --cream:#eae5de; --sand:#ddd3c2; --ink-deep:#0a0807;
  font-family:"Sora",system-ui,sans-serif;color:var(--cream);
  background:
    radial-gradient(108% 88% at 50% 44%, rgba(74,58,44,.46) 0%, rgba(28,21,16,.88) 44%, var(--ink-deep) 78%),
    var(--ink-deep);
  transition:opacity .9s cubic-bezier(.2,.8,.2,1), visibility .9s cubic-bezier(.2,.8,.2,1);}
.preloader.is-done{opacity:0;visibility:hidden;pointer-events:none;}

/* faint concentric arcs motif */
.preloader__rings{position:absolute;inset:0;pointer-events:none;opacity:.55;z-index:1;
  background:
    radial-gradient(closest-side circle at 50% 44%, transparent 0 39%, rgba(243,106,45,.08) 39% 39.4%, transparent 40%),
    radial-gradient(closest-side circle at 50% 44%, transparent 0 49%, rgba(243,106,45,.055) 49% 49.3%, transparent 50%),
    radial-gradient(closest-side circle at 50% 44%, transparent 0 60%, rgba(247,182,109,.05) 60% 60.25%, transparent 61%);}

.preloader canvas#globe{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:2;}
.preloader canvas#nebula{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;}
.preloader .layer{z-index:3;}
.preloader .controls{z-index:60;}

/* ---- text layers ---- */
.preloader .layer{position:absolute;left:0;right:0;display:flex;justify-content:center;pointer-events:none;padding:0 24px;text-align:center;}

.preloader .eyebrow{top:clamp(22px,5vh,48px);}
.preloader .eyebrow span{font-family:"Sora",sans-serif;font-weight:700;font-size:clamp(10px,1.5vw,12px);
  letter-spacing:.34em;text-transform:uppercase;color:var(--orange);
  opacity:0;transform:translateY(-8px);will-change:opacity,transform;
  display:inline-flex;align-items:center;gap:.85em;}
.preloader .eyebrow span::before,.preloader .eyebrow span::after{content:"";width:clamp(18px,4vw,46px);height:1px;background:linear-gradient(90deg,transparent,rgba(243,106,45,.65));}
.preloader .eyebrow span::after{background:linear-gradient(90deg,rgba(243,106,45,.65),transparent);}

/* impactful statements */
.preloader .statements{top:0;bottom:0;align-items:center;}
.preloader .statement{position:absolute;font-family:"Sora",sans-serif;font-weight:300;
  font-size:clamp(30px,6.2vw,80px);line-height:1.06;letter-spacing:-.022em;color:var(--cream);
  max-width:18ch;text-wrap:balance;opacity:0;transform:scale(.86);filter:blur(14px);
  text-shadow:0 6px 60px rgba(0,0,0,.7),0 2px 16px rgba(0,0,0,.6);
  will-change:opacity,transform,filter;}
.preloader .statement em{font-style:normal;font-weight:700;color:var(--orange);}
.preloader .statement br{display:block;}

/* final reveal card */
.preloader .finale{inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;
  opacity:0;transform:translateY(12px);will-change:opacity,transform;}
.preloader .finale__logo{width:clamp(260px,52vw,720px);height:auto;display:block;
  filter:drop-shadow(0 6px 40px rgba(243,106,45,.35));}
.preloader .finale__rule{display:flex;align-items:center;gap:14px;margin:clamp(14px,3vh,26px) 0 clamp(12px,2.4vh,20px);color:var(--orange);}
.preloader .finale__rule span{height:1px;width:clamp(40px,9vw,120px);background:linear-gradient(90deg,transparent,rgba(243,106,45,.75));}
.preloader .finale__rule span:last-child{background:linear-gradient(90deg,rgba(243,106,45,.75),transparent);}
.preloader .finale__ast{width:14px;height:14px;}
.preloader .finale__date{font-family:"Roboto Slab",Georgia,serif;font-size:clamp(16px,2.6vw,26px);letter-spacing:.02em;color:var(--cream);
  font-variant-numeric:tabular-nums;}
.preloader .finale__venue{margin-top:10px;font-family:"Sora",sans-serif;font-weight:500;
  font-size:clamp(12px,1.7vw,15px);letter-spacing:.16em;text-transform:uppercase;color:var(--orange-soft);}

/* ---- controls ---- */
.preloader .controls{position:absolute;bottom:clamp(18px,4vh,30px);right:clamp(18px,4vw,30px);z-index:60;
  display:flex;gap:10px;align-items:center;}
.preloader .ctrl{pointer-events:auto;cursor:pointer;border:1px solid rgba(234,229,222,.22);
  background:rgba(234,229,222,.05);color:var(--sand);font-family:"Sora",sans-serif;font-weight:500;
  font-size:12px;letter-spacing:.04em;padding:9px 16px;border-radius:999px;
  backdrop-filter:blur(8px);transition:all .16s cubic-bezier(.2,.8,.2,1);display:inline-flex;align-items:center;gap:7px;}
.preloader .ctrl:hover{background:rgba(234,229,222,.12);color:var(--cream);border-color:rgba(234,229,222,.36);}

@media (prefers-reduced-motion: reduce){
  .preloader{transition:none;}
}