/* ============================================================
   Sloyde loader — v6
   Key changes from v5:
   - Contour groove: highlight rim raised to 0.32 opacity + neon tint;
     neon ambient glow in channel base; cohesive with logo color
   - Exit: exitDurationMs 2200→1500ms (1050ms collapse + 450ms fade)
   ============================================================ */

:root {
  --neon: #2ff801;
  --neon-rgb: 47, 248, 1;
  --cyan: #00e5ff;
  --cyan-rgb: 0, 229, 255;
  --phosphor: #ff9a00;
  --phosphor-rgb: 255, 154, 0;

  /* Site base: #141A23 = rgb(20, 26, 35) */
  --site-bg: #141A23;
  --site-bg-rgb: 20, 26, 35;

  --loader-size: 0.75in;
  /* Set by JS. Fallback only. */
  --loader-exit-duration: 1500ms;

  /* --path-length is set per-element inline by JS (used in stroke-dasharray) */
  --path-length: 0;

  /* Collapse clip target: 88px box centered (44px from each edge) */
  --collapse-half: 44px;
  --collapse-radius: 14px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Prevents white body flash — always dark */
body {
  margin: 0;
  background: var(--site-bg);
}

/* ─── SVG filter defs (kept for reference; not used on glass panel) ── */
.liquid-filter-defs {
  position: fixed;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

/* ─── Loading screen overlay ─────────────────────────────────── */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  min-height: 100svh;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 45%, rgba(var(--neon-rgb), 0.028), transparent 36%),
    radial-gradient(circle at 22% 14%, rgba(var(--cyan-rgb), 0.034), transparent 32%),
    radial-gradient(circle at 78% 86%, rgba(var(--phosphor-rgb), 0.016), transparent 30%),
    var(--site-bg);
  opacity: 1;
  visibility: visible;
  /* Simple fade — JS adds .is-hidden after the collapse timer.
     450ms matches phase-2 (30% of exitDurationMs 1500ms) */
  transition: opacity 450ms ease;
}

/* ─── Background grid ────────────────────────────────────────── */
.background-grid {
  position: absolute;
  inset: -10%;
  z-index: -4;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(var(--neon-rgb), 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--cyan-rgb), 0.010) 1px, transparent 1px);
  background-size: 108px 108px;
  mask-image: radial-gradient(
    circle at 50% 48%,
    black 0 18%,
    rgba(0, 0, 0, 0.40) 42%,
    transparent 70%
  );
  transform: rotate(-7deg) scale(1.14);
  transition: opacity calc(var(--loader-exit-duration) * 0.50) ease;
}

/* ─── Background noise ───────────────────────────────────────── */
.background-noise {
  position: absolute;
  inset: 0;
  z-index: -3;
  opacity: 0.022;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.74'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  transition: opacity 280ms ease;
}

/* ─── Background orbs ────────────────────────────────────────── */
.background-orb {
  position: absolute;
  z-index: -5;
  width: min(50vw, 680px);
  aspect-ratio: 1;
  border-radius: 999px;
  filter: blur(80px);
  opacity: 0.36;
  pointer-events: none;
  transition:
    opacity calc(var(--loader-exit-duration) * 0.55) ease,
    transform calc(var(--loader-exit-duration) * 0.55) cubic-bezier(0.16, 1, 0.3, 1);
}

.background-orb--top-left {
  top: -28%;
  left: -18%;
  background: rgba(0, 180, 220, 0.09);
}

.background-orb--bottom-right {
  right: -20%;
  bottom: -32%;
  background: radial-gradient(
    circle,
    rgba(var(--phosphor-rgb), 0.055),
    rgba(var(--neon-rgb), 0.055) 45%,
    transparent 70%
  );
}

/* ─── Glass panel ────────────────────────────────────────────── */
/*
  The glass must read as a physically distinct surface above #141A23.
  Two things create that distinction:

  1. backdrop-filter brightness(1.32): lifts whatever is behind the glass
     so the frosted surface appears noticeably lighter than the raw background.
     This is the "glass over dark surface" effect — the critical piece that
     makes the collapse look like a cover being pulled away rather than
     nothing moving.

  2. Frosted white tint (not dark-matching): a soft white-translucent
     gradient reads as the scattering layer in real frosted glass.

  Positioning: inset 0, never animated. clip-path handles the exit.
  Opacity: 0 on init; JS reveals it on the same RAF as is-loader-ready
  so backdrop-filter and tint paint together on the first visible frame.
*/
.glass-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  overflow: hidden;

  /*
    Frosted glass tint — white-translucent, not dark-matching.
    The brightness lift in backdrop-filter does the heavy lifting;
    this tint adds the scattering quality of real frosted glass.
  */
  background:
    radial-gradient(circle at 46% 42%, rgba(255, 255, 255, 0.052), transparent 44%),
    linear-gradient(
      148deg,
      rgba(255, 255, 255, 0.058) 0%,
      rgba(255, 255, 255, 0.022) 48%,
      rgba(255, 255, 255, 0.040) 100%
    );

  /*
    CRITICAL — brightness(1.32) makes the glass a distinct luminous layer.
    Previous version used brightness(0.88) which made it DARKER than the
    background — invisible as a separate surface during collapse.
    Saturate(1.10) adds a very slight chromatic richness to the frosted look.
  */
  -webkit-backdrop-filter: blur(28px) brightness(1.32) saturate(1.10);
  backdrop-filter: blur(28px) brightness(1.32) saturate(1.10);

  /* Inward depth shading — top highlight, bottom shadow */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08),
    inset 0 0 110px rgba(0, 0, 0, 0.10),
    inset 22px 22px 55px rgba(255, 255, 255, 0.020),
    inset -22px -22px 70px rgba(0, 0, 0, 0.14);

  opacity: 0;
  transition:
    opacity 200ms ease,
    clip-path 0ms linear;

  will-change: clip-path, opacity;
}

/* ─── Glass pseudo-elements ──────────────────────────────────── */
.glass-panel::before,
.glass-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

/* Specular surface highlights — stronger at top-left catch */
.glass-panel::before {
  z-index: 2;
  background:
    radial-gradient(circle at 26% 0%, rgba(255, 255, 255, 0.18), transparent 32%),
    radial-gradient(circle at 96% 94%, rgba(var(--phosphor-rgb), 0.022), transparent 26%),
    radial-gradient(circle at 96% 80%, rgba(var(--neon-rgb), 0.028), transparent 28%),
    linear-gradient(
      142deg,
      rgba(255, 255, 255, 0.085),
      transparent 36%,
      rgba(var(--cyan-rgb), 0.012) 70%,
      rgba(255, 255, 255, 0.048)
    );
  mix-blend-mode: screen;
  opacity: 0.60;
}

/* Inner border — hidden at full-screen, fades in as glass collapses */
.glass-panel::after {
  z-index: 2;
  inset: 1px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: calc(max(0px, var(--collapse-radius) - 1px));
  box-shadow:
    inset 0 16px 48px rgba(255, 255, 255, 0.028),
    inset 0 -28px 68px rgba(2, 6, 12, 0.24),
    inset 0 0 80px rgba(0, 0, 0, 0.10);
  opacity: 0;
  transition: opacity 300ms ease;
}

/* ─── Glass edge overlay ─────────────────────────────────────── */
/*
  Border + gradient overlay.
  Border is transparent at full-screen (viewport edge = no border needed).
  Both the border and the shimmer animation appear only during collapse.
*/
.glass-panel__edge {
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 1.5px solid transparent;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent),
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.12),
      transparent 22%,
      transparent 76%,
      rgba(255, 255, 255, 0.07)
    ),
    radial-gradient(circle at 0% 0%, rgba(var(--cyan-rgb), 0.07), transparent 20%),
    radial-gradient(circle at 100% 100%, rgba(var(--neon-rgb), 0.06), transparent 22%);
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.018),
    inset 0 0 80px rgba(3, 8, 16, 0.32);
  opacity: 0;
  /* Shimmer enabled after collapse reveals the border panel */
  animation: glassEdgeShimmer 4.6s ease-in-out infinite;
  animation-play-state: paused;
}

/* ─── Glass panel content ────────────────────────────────────── */
.glass-panel__content {
  position: absolute !important;
  z-index: 3 !important;
  display: block !important;
  width: 100%;
  height: 100%;
  inset: 0 !important;
}

/* ─── Loader stack ───────────────────────────────────────────── */
.loader-stack {
  position: absolute !important;
  width: var(--loader-size) !important;
  height: var(--loader-size) !important;
  display: grid !important;
  place-items: center !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  transform-origin: center center !important;
  margin: 0 !important;
}

/* ─── Loader groove well (contour SVG) ───────────────────────── */
/*
  On a dark glass surface, dark-on-dark is invisible.
  The groove is read by its HIGHLIGHT RIM — the bright catch where
  light hits the raised surface edge of the carved channel.
  
  v6 strategy:
  1. Neon ambient base (wide, blurred, neon-tinted): ties groove to logo color
  2. Shadow wall (offset down-right, dark, blurred): physical depth
  3. Channel floor (dark, tight blur): the depressed surface
  4. Highlight rim (offset up-left, white+neon, visible): the hero element —
     this is what makes the groove readable on a dark background
  The rim is at 0.32 opacity (was 0.11) with a slight neon tint.
*/
.loader-well-svg {
  position: absolute;
  width: var(--loader-size);
  height: var(--loader-size);
  overflow: visible;
  z-index: 0;
  pointer-events: none;
  opacity: 0.90;
  transition: opacity 380ms ease, filter 380ms ease;
}

/* ─── Loader burst (ambient glow halo) ───────────────────────── */
.loader-burst {
  position: absolute;
  width: 185%;
  height: 185%;
  border-radius: 999px;
  background: radial-gradient(
    circle,
    rgba(var(--neon-rgb), 0.11) 0%,
    rgba(var(--neon-rgb), 0.038) 38%,
    transparent 72%
  );
  transform: scale(0.96);
  opacity: 0.30;
  filter: blur(7px);
  z-index: 1;
}

/* ─── Loader stage ───────────────────────────────────────────── */
.loader-stage {
  position: relative !important;
  z-index: 2;
  width: var(--loader-size) !important;
  height: var(--loader-size) !important;
  display: grid !important;
  place-items: center !important;
  transform: none !important;
  opacity: 1;
  overflow: visible !important;
}

/* ─── Loader SVG ─────────────────────────────────────────────── */
.loader-svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
  display: block !important;
  opacity: 1;
  shape-rendering: geometricPrecision;
  transition: opacity 90ms ease;
}

/* ─── Draw paths ─────────────────────────────────────────────── */
/*
  strokeDasharray uses --path-length (set inline by JS per element).
  strokeDashoffset is written directly by JS each frame via
  path.style.strokeDashoffset — cross-browser reliable, no CSS
  custom property inheritance required on SVG presentation attributes.
*/
.loader-draw-path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--path-length);
  /* Initial value; overwritten each frame by JS */
  stroke-dashoffset: var(--path-length);
}

.loader-line-glow-wide {
  stroke: rgba(var(--neon-rgb), 0.065) !important;
  stroke-width: 25.2 !important;
  filter: blur(0.9px) !important;
}

.loader-line-glow-tight {
  stroke: rgba(var(--neon-rgb), 0.16) !important;
  stroke-width: 24.4 !important;
  filter: blur(0.22px) !important;
}

.loader-line-core {
  stroke: var(--neon) !important;
  stroke-width: 23.4 !important;
}

/* ─── Jack pieces ────────────────────────────────────────────── */
.loader-jack-piece {
  fill: var(--neon);
  opacity: 1;
  transform-origin: center;
}

.loader-jack-glow-wide {
  fill: rgba(var(--neon-rgb), 0.065) !important;
  filter: blur(0.9px) !important;
}

.loader-jack-glow-tight {
  fill: rgba(var(--neon-rgb), 0.16) !important;
  filter: blur(0.22px) !important;
}

.loader-jack-core {
  fill: var(--neon) !important;
}

/* ─── Emboss layers ──────────────────────────────────────────── */
.loader-emboss { pointer-events: none; }
.loader-emboss-line { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.loader-emboss-shadow { transform: translate(3.4px, 3.8px); opacity: 0.98; }
.loader-emboss-shadow .loader-emboss-line {
  stroke: rgba(2, 6, 11, 0.68); stroke-width: 30px; filter: blur(3.2px);
}
.loader-emboss-shadow .loader-emboss-jack * { fill: rgba(2, 6, 11, 0.68); filter: blur(3.2px); }

.loader-emboss-highlight { transform: translate(-2px, -2.2px); opacity: 0.9; }
.loader-emboss-highlight .loader-emboss-line {
  stroke: rgba(255, 255, 255, 0.12); stroke-width: 25.8px; filter: blur(0.9px);
}
.loader-emboss-highlight .loader-emboss-jack * { fill: rgba(255, 255, 255, 0.12); filter: blur(0.9px); }

.loader-emboss-groove { opacity: 0.94; }
.loader-emboss-groove .loader-emboss-line {
  stroke: rgba(9, 16, 24, 0.78); stroke-width: 24.8px;
}
.loader-emboss-groove .loader-emboss-jack * { fill: rgba(9, 16, 24, 0.78); }

.loader-draw-path,
.loader-jack-piece,
.loader-line-core,
.loader-jack-core {
  shape-rendering: geometricPrecision;
}

/* ─── Loader note ────────────────────────────────────────────── */
.loader-note {
  position: fixed;
  left: 50%;
  bottom: 2rem;
  z-index: 3;
  transform: translateX(-50%);
  color: rgba(237, 247, 232, 0.36);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  transition: opacity calc(var(--loader-exit-duration) * 0.36) ease;
}

/* ─── Screen states ──────────────────────────────────────────── */

/* JS adds .is-hidden after collapse timer fires */
.loading-screen.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.loading-screen.is-gone {
  visibility: hidden;
  pointer-events: none;
}

body.is-loaded { overflow: auto; }

/* ─── Center lock ────────────────────────────────────────────── */
.loading-screen .loader-stack,
.loading-screen.is-exiting .loader-stack,
.loading-screen.is-hidden .loader-stack {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

.loading-screen .loader-stage,
.loading-screen.is-exiting .loader-stage,
.loading-screen.is-hidden .loader-stage,
.loading-screen .loader-svg,
.loading-screen.is-exiting .loader-svg,
.loading-screen.is-hidden .loader-svg {
  transform: none !important;
}

/* ─── Initial draw guard ─────────────────────────────────────── */
.loading-screen:not(.is-loader-ready) .loader-svg {
  opacity: 0 !important;
}
.loading-screen.is-loader-ready .loader-svg {
  opacity: 1;
}


.loading-screen.is-exiting .background-orb{opacity:0;transform:scale(1.22)}.loading-screen.is-exiting .background-grid{opacity:0}.loading-screen.is-exiting .background-noise{opacity:0}.loading-screen.is-exiting .loader-note{opacity:0}
@keyframes crtVerticalSqueeze{0%{clip-path:inset(0 0 0 0);filter:brightness(1)}70%{clip-path:inset(calc(50% - 2px) 0 calc(50% - 2px) 0);filter:brightness(1.8)}100%{clip-path:inset(calc(50% - 1px) 0 calc(50% - 1px) 0);filter:brightness(2.5)}}
.loading-screen.is-exiting .glass-panel{animation:crtVerticalSqueeze calc(var(--loader-exit-duration)*0.55) cubic-bezier(0.4,0,0.2,1) forwards}
@keyframes crtLineShrink{0%{clip-path:inset(calc(50% - 1px) 0 calc(50% - 1px) 0);filter:brightness(2.5);opacity:1}60%{clip-path:inset(calc(50% - 1px) 40% calc(50% - 1px) 40%);filter:brightness(3);opacity:0.9}100%{clip-path:inset(calc(50% - 1px) 50% calc(50% - 1px) 50%);filter:brightness(4);opacity:0}}
.loading-screen.is-crt-line .glass-panel{animation:crtLineShrink calc(var(--loader-exit-duration)*0.45) cubic-bezier(0.4,0,0.6,1) forwards}
.loading-screen.is-crt-line::after{content:'';position:fixed;left:50%;top:50%;width:6px;height:3px;transform:translate(-50%,-50%);background:#fff;border-radius:50%;z-index:9999;box-shadow:0 0 15px 4px rgba(255,255,255,0.8),0 0 40px 8px rgba(200,255,220,0.4),0 0 80px 16px rgba(47,248,1,0.15);animation:phosphorFade calc(var(--loader-exit-duration)*0.5) ease-out forwards;animation-delay:calc(var(--loader-exit-duration)*0.2)}
@keyframes phosphorFade{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}40%{opacity:0.7;transform:translate(-50%,-50%) scale(0.6)}100%{opacity:0;transform:translate(-50%,-50%) scale(0)}}
.loading-screen.is-hidden{opacity:0;pointer-events:none;transition:opacity 150ms ease}.loading-screen.is-gone{visibility:hidden;pointer-events:none}body.is-loaded{overflow:auto}
@keyframes logoPreExitFlash{0%{filter:none}28%{filter:drop-shadow(0 0 7px rgba(var(--neon-rgb),0.95)) drop-shadow(0 0 20px rgba(var(--neon-rgb),0.50)) drop-shadow(0 0 42px rgba(var(--neon-rgb),0.20))}65%{filter:drop-shadow(0 0 3px rgba(var(--neon-rgb),0.38))}100%{filter:none}}
.loading-screen.is-logo-complete .loader-svg{animation:logoPreExitFlash 280ms ease-out forwards}
@keyframes wellFlashSvg{0%{filter:none;opacity:0.90}28%{filter:drop-shadow(0 0 5px rgba(var(--neon-rgb),0.24)) drop-shadow(0 0 12px rgba(var(--neon-rgb),0.10));opacity:1.0}100%{filter:none;opacity:0.90}}
.loading-screen.is-logo-complete .loader-well-svg{animation:wellFlashSvg 280ms ease-out forwards}
@keyframes glassEdgeShimmer{0%,100%{opacity:0.64}50%{opacity:0.88}}
@media(prefers-reduced-motion:reduce){.loading-screen{transition:none}.loader-svg{transition:none}.glass-panel__edge,.loader-burst{animation:none;transition:none}}
@media(prefers-reduced-transparency:reduce){.glass-panel{background:rgba(20,26,35,0.92);backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(max-width:720px){.glass-panel{-webkit-backdrop-filter:blur(18px) saturate(1.06) brightness(0.88);backdrop-filter:blur(18px) saturate(1.06) brightness(0.88)}}