/* Homepage entry overlay — before/after slider splash, dismissed by the
   Enter button (see homepage-intro.js). Everything is scoped under
   #ef-intro-overlay so nothing bleeds into the rest of the site (theme.css
   already owns a global --line design token and a global @property --angle
   — this file deliberately avoids both, see homepage-intro.js docblock and
   the .ef-enter rule below which reuses the theme's shared btn-spin
   keyframe instead of redefining --angle). */

/* Lock page scroll purely via CSS (not JS) for as long as the overlay is in
   the DOM — this fires at first paint, before homepage-intro.js has even
   run, so there's no flash of the homepage's own scrollbars while JS is
   still loading/executing. Self-clears the instant JS removes the overlay
   on dismiss (see closeOverlay() in homepage-intro.js), no unlock call
   needed. homepage-intro.js still toggles the same overflow inline as a
   fallback for browsers without :has() support. */
html:has(#ef-intro-overlay){ overflow:hidden; }

#ef-intro-overlay{
  --ef-ease:cubic-bezier(.22,.61,.36,1);
  --ef-line:rgba(255,255,255,.95);
  position:fixed; inset:0; z-index:2147483647;
  box-sizing:border-box;
  font-family:"Outfit",system-ui,sans-serif;
  background:radial-gradient(120% 120% at 50% 0%, #12161c 0%, #070809 70%);
  color:#fff; height:100dvh; min-height:100dvh;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(8px,1.5vw,20px); overflow:hidden;
  opacity:1; transition:opacity .5s var(--ef-ease);
}
#ef-intro-overlay *{ box-sizing:border-box; }
#ef-intro-overlay.ef-intro-closing{ opacity:0; pointer-events:none; }
#ef-intro-overlay[hidden]{ display:none; }

#ef-intro-overlay .ef-stage{
  width:min(1200px,100%,calc((100dvh - 190px) * 1372 / 768));
  max-height:calc(100dvh - 16px);
}

#ef-intro-overlay .ef-meta{
  display:flex; align-items:flex-end; justify-content:space-between; gap:18px;
  margin:0 4px clamp(10px,1.35vw,16px);
}
#ef-intro-overlay .ef-brand{
  display:flex; align-items:baseline; gap:.6em; margin:0;
  opacity:0; transform:translateY(8px);
}
#ef-intro-overlay .ef-logo-btn{ display:block; line-height:0; padding:0; margin:0; border:none; background:transparent; cursor:pointer; }
#ef-intro-overlay .ef-logo-btn:focus,
#ef-intro-overlay .ef-logo-btn:focus-visible{ outline:none; }
#ef-intro-overlay .ef-brand .ef-logo{ display:block; height:clamp(18px,2.4vw,24px); width:auto; }

#ef-intro-overlay .ef-slider{
  position:relative; width:100%; aspect-ratio:1372/768;
  overflow:hidden; border-radius:14px;
  /* Kept tight (was 0 40px 100px -35px) — at the original size this drop
     shadow's blur reached well past the ~8-12px gap into the terminal-log
     row below, reading as an unwanted dark smudge behind that text. */
  box-shadow:0 14px 28px -16px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.05) inset;
  user-select:none; touch-action:pan-y; cursor:ew-resize; background:#0a0a0a;
  opacity:0; transform:scale(1.06);
}
#ef-intro-overlay .ef-stage.present .ef-slider{ animation:efPresent 1.2s var(--ef-ease) forwards; }
@keyframes efPresent{ to{ opacity:1; transform:scale(1); } }

#ef-intro-overlay .ef-layer{ position:absolute; inset:0; }
#ef-intro-overlay .ef-layer img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
#ef-intro-overlay .ef-layer--top{ clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); }

#ef-intro-overlay .ef-sun-motes{ position:absolute; inset:0; z-index:2; pointer-events:none;
  clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); }
#ef-intro-overlay .ef-ai-net{ position:absolute; inset:0; z-index:2; pointer-events:none;
  clip-path:inset(0 0 0 var(--pos,50%)); }

#ef-intro-overlay .ef-vignette{ position:absolute; inset:0; z-index:2; pointer-events:none;
  box-shadow:0 0 140px 20px rgba(0,0,0,.35) inset; }

#ef-intro-overlay .ef-tag{ position:absolute; bottom:12%; z-index:3; pointer-events:none;
  text-shadow:0 2px 24px rgba(0,0,0,.6); }
#ef-intro-overlay .ef-tag--left{ right:50%; text-align:right; padding-right:clamp(8px,1.1vw,16px); }
#ef-intro-overlay .ef-tag--right{ left:50%; text-align:left; padding-left:clamp(8px,1.1vw,16px); }
#ef-intro-overlay .ef-tag h2{ font-size:clamp(15px,2.7vw,32px); font-weight:600; line-height:1;
  letter-spacing:-.01em; white-space:nowrap; color:#fff; }
#ef-intro-overlay .ef-tag h2 b{ font-weight:600; }

#ef-intro-overlay .ef-ai-word{ position:relative; display:inline-block; padding-right:.18em; }
#ef-intro-overlay .ef-ai-word .ef-tm{
  position:absolute; left:100%; top:-.42em;
  font-size:.34em; line-height:1; font-weight:500; letter-spacing:0;
}
#ef-intro-overlay .ef-ai-sparkle{
  position:absolute; display:block; width:.28em; height:.28em;
  pointer-events:none; filter:drop-shadow(0 0 .18em rgba(210,240,255,.95));
  animation:efAiTwinkle 1.8s ease-in-out infinite;
}
#ef-intro-overlay .ef-ai-sparkle::before,
#ef-intro-overlay .ef-ai-sparkle::after{
  content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#fff; border-radius:999px;
}
#ef-intro-overlay .ef-ai-sparkle::before{ width:100%; height:18%; }
#ef-intro-overlay .ef-ai-sparkle::after{ width:18%; height:100%; }
#ef-intro-overlay .ef-ai-sparkle--one{ left:-.48em; top:-.18em; animation-delay:0s; }
#ef-intro-overlay .ef-ai-sparkle--two{ right:-.22em; bottom:-.34em; width:.20em; height:.20em; animation-delay:.55s; }
#ef-intro-overlay .ef-ai-sparkle--three{ left:.35em; bottom:-.48em; width:.16em; height:.16em; animation-delay:1.05s; }
@keyframes efAiTwinkle{
  0%,100%{ opacity:.18; transform:scale(.45) rotate(0deg); }
  45%{ opacity:1; transform:scale(1.15) rotate(45deg); }
  70%{ opacity:.45; transform:scale(.7) rotate(70deg); }
}

#ef-intro-overlay .ef-partner{ position:absolute; top:clamp(14px,2.2vw,26px); left:50%; transform:translateX(-50%);
  z-index:5; pointer-events:none; text-align:center; white-space:nowrap;
  font-size:clamp(9px,1.05vw,12px); font-weight:600; letter-spacing:.28em;
  text-transform:uppercase; color:#fff; opacity:0; text-shadow:0 2px 20px rgba(0,0,0,.65); }

#ef-intro-overlay .ef-divider{ position:absolute; top:0; bottom:0; left:var(--pos,50%);
  width:2px; margin-left:-1px; background:var(--ef-line); z-index:4; pointer-events:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.12), 0 0 5px rgba(0,0,0,.2); opacity:var(--ui,0); }

#ef-intro-overlay .ef-handle{ position:absolute; top:50%; left:var(--pos,50%);
  transform:translate(-50%,-50%) scale(var(--hs,1));
  width:clamp(42px,4.4vw,56px); height:clamp(42px,4.4vw,56px);
  border-radius:50%; background:rgba(255,255,255,.10);
  border:2px solid var(--ef-line); z-index:6;
  display:flex; align-items:center; justify-content:center; cursor:ew-resize;
  box-shadow:0 6px 30px -6px rgba(0,0,0,.65); opacity:var(--ui,0); }
#ef-intro-overlay .ef-handle::before{ content:""; position:absolute; inset:-8px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); opacity:0; }
#ef-intro-overlay .ef-stage.live .ef-handle::before{ animation:efRing 2.4s ease-out 2; }
@keyframes efRing{ 0%{ transform:scale(.8); opacity:.6; } 70%{ opacity:0; } 100%{ transform:scale(1.9); opacity:0; } }
#ef-intro-overlay .ef-handle:active{ cursor:grabbing; }
#ef-intro-overlay .ef-handle:focus-visible{ outline:3px solid #7cc7ff; outline-offset:4px; }
#ef-intro-overlay .ef-handle svg{ width:56%; height:56%; fill:none; stroke:#fff; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }

#ef-intro-overlay .ef-hint{ position:absolute; top:calc(50% + clamp(34px,3.6vw,42px)); left:var(--pos,50%);
  transform:translateX(-50%); z-index:6; pointer-events:none;
  display:flex; align-items:center; gap:.5em;
  font-size:clamp(10px,1.2vw,13px); font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:#fff; white-space:nowrap;
  background:rgba(10,12,16,.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:.5em .85em; border-radius:100px; border:1px solid rgba(255,255,255,.18);
  opacity:0; transition:opacity .5s var(--ef-ease); }
#ef-intro-overlay .ef-stage.live .ef-hint{ opacity:1; }
#ef-intro-overlay .ef-stage.touched .ef-hint{ opacity:0 !important; }
#ef-intro-overlay .ef-hint .ef-arrows{ display:inline-flex; }
#ef-intro-overlay .ef-hint .ef-arrows span{ animation:efNudge 1.6s ease-in-out infinite; }
#ef-intro-overlay .ef-hint .ef-arrows span:last-child{ animation-delay:.15s; }
@keyframes efNudge{ 0%,100%{ transform:translateX(0); opacity:.5; } 50%{ transform:translateX(2px); opacity:1; } }

/* Enter button — reuses the theme's shared --angle custom property +
   btn-spin keyframe (registered once in theme.css, same trick the
   Outcome-Assurance donut hub uses) instead of redeclaring @property
   --angle here, which the CSS spec disallows redefining. */
#ef-intro-overlay .ef-enter-wrap{ display:flex; justify-content:center; margin-top:clamp(10px,1.5vh,18px);
  opacity:0; transform:translateY(8px); transition:opacity .6s var(--ef-ease), transform .6s var(--ef-ease); }
#ef-intro-overlay .ef-stage.live .ef-enter-wrap,
#ef-intro-overlay .ef-stage.touched .ef-enter-wrap{ opacity:1; transform:translateY(0); }
/* Matches the hero block's .btn-stroke exactly (blocks/hero/render.php +
   theme.css) — same padding/font/radius/transition/hover so this button
   reads as the same component, not a lookalike. */
#ef-intro-overlay .ef-enter{ --angle:0deg; position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 24px; border-radius:0;
  font-family:inherit; font-weight:600; font-size:15px; color:#fff;
  background:transparent; border:none;
  transition:transform 150ms; cursor:pointer; }
#ef-intro-overlay .ef-enter::before{ content:""; position:absolute; inset:0; padding:2px;
  border-radius:inherit;
  background:conic-gradient(from var(--angle), #e87825, #D946EF, #8B5CF6, #e87825);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude; animation:btn-spin 4s linear infinite; pointer-events:none; }
#ef-intro-overlay .ef-enter:hover{ transform:translateY(-2px); }
#ef-intro-overlay .ef-enter:focus,
#ef-intro-overlay .ef-enter:focus-visible{ outline:none; }

#ef-intro-overlay .ef-terminal-clock,
#ef-intro-overlay .ef-terminal-log{
  font-family:"Courier New",Courier,monospace;
  color:#72ff8f;
  text-shadow:0 0 5px rgba(77,255,120,.9),0 0 14px rgba(45,255,98,.45);
  letter-spacing:.035em;
}
#ef-intro-overlay .ef-terminal-clock{
  font-size:clamp(10px,1.2vw,13px); font-weight:700;
  white-space:nowrap; text-align:right; opacity:0;
  transform:translateY(8px);
}
#ef-intro-overlay .ef-stage.present .ef-terminal-clock{ animation:efTerminalReveal .75s var(--ef-ease) .7s forwards; }
#ef-intro-overlay .ef-terminal-log{
  /* 2 lines at line-height:1.45 = 2.9em of actual content height — was
     2.7em, just short enough that the 2nd typed line grew the box and
     shifted the whole (flex-centered) stage upward. */
  min-height:2.9em; margin:clamp(8px,1.2vh,12px) 4px 0;
  font-size:clamp(10px,1.2vw,13px); line-height:1.45;
  text-align:left; white-space:pre-wrap;
}
#ef-intro-overlay .ef-terminal-line{ display:block; }
#ef-intro-overlay .ef-terminal-cursor{
  display:inline-block; width:.62em; height:1.08em; margin-left:.14em;
  vertical-align:-.18em; background:#72ff8f;
  box-shadow:0 0 7px rgba(77,255,120,.95),0 0 15px rgba(45,255,98,.5);
  animation:efTerminalBlink .85s steps(1,end) infinite;
}
@keyframes efTerminalBlink{ 0%,48%{opacity:1} 49%,100%{opacity:0} }
@keyframes efTerminalReveal{ to{opacity:1;transform:translateY(0)} }

@media (prefers-reduced-motion:reduce){
  #ef-intro-overlay .ef-enter::before{ animation:none; }
  #ef-intro-overlay .ef-slider{ opacity:1; transform:none; }
  #ef-intro-overlay .ef-stage.present .ef-slider{ animation:none; }
  #ef-intro-overlay .ef-stage.live .ef-handle::before{ animation:none; }
  #ef-intro-overlay .ef-hint .ef-arrows span{ animation:none; }
  #ef-intro-overlay .ef-ai-sparkle{ animation:none; opacity:.75; }
  #ef-intro-overlay{ transition:none; }
}

@media (max-height:700px){
  #ef-intro-overlay .ef-brand{ margin-bottom:8px; }
  #ef-intro-overlay .ef-enter-wrap{ margin-top:8px; }
}