/* ============================================================
   Soonix — style.css
   Brand gradient: #634aec  ->  #564aff
   ============================================================ */

:root {
  --bg: #06060a;
  --brand-a: #634aec;          /* 99, 74, 236 */
  --brand-b: #564aff;          /* 86, 74, 255 */
  --brand-a-rgb: 99, 74, 236;
  --brand-b-rgb: 86, 74, 255;
  --brand-mid-rgb: 92, 74, 246;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  cursor: default;
}

/* Every full-screen background element shares this */
.layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

#grid-canvas     { z-index: 1; }
#aurora          { z-index: 2; }
#particle-canvas { z-index: 3; pointer-events: none; }
#vignette        { z-index: 4; pointer-events: none; }
#scanlines       { z-index: 5; pointer-events: none; }

/* ------------------------------------------------------------
   Aurora — soft drifting plasma glow behind the logo
   ------------------------------------------------------------ */
#aurora {
  pointer-events: none;
  filter: blur(64px) saturate(135%);
  opacity: 0.85;
  background:
    radial-gradient(closest-side at 38% 42%, rgba(var(--brand-a-rgb), 0.50), transparent 70%),
    radial-gradient(closest-side at 64% 58%, rgba(var(--brand-b-rgb), 0.45), transparent 70%),
    radial-gradient(closest-side at 52% 50%, rgba(var(--brand-mid-rgb), 0.30), transparent 72%);
  background-repeat: no-repeat;
  background-size: 65% 65%, 70% 70%, 82% 82%;
  mix-blend-mode: screen;
  animation: aurora-drift 28s ease-in-out infinite;
}

@keyframes aurora-drift {
  0%   { background-position: 28% 38%, 70% 60%, 50% 50%; transform: scale(1); }
  33%  { background-position: 42% 30%, 56% 70%, 60% 44%; transform: scale(1.06); }
  66%  { background-position: 34% 50%, 64% 48%, 44% 58%; transform: scale(1.03); }
  100% { background-position: 28% 38%, 70% 60%, 50% 50%; transform: scale(1); }
}

/* ------------------------------------------------------------
   Vignette — gentle corner framing.
   Many closely-spaced stops on an eased curve so there's no
   visible banding ring; only the outer edges darken.
   ------------------------------------------------------------ */
#vignette {
  background: radial-gradient(
    ellipse 140% 140% at 50% 50%,
    rgba(6, 6, 10, 0)     0%,
    rgba(6, 6, 10, 0)     40%,
    rgba(6, 6, 10, 0.02)  52%,
    rgba(6, 6, 10, 0.05)  62%,
    rgba(6, 6, 10, 0.09)  70%,
    rgba(6, 6, 10, 0.15)  78%,
    rgba(6, 6, 10, 0.22)  85%,
    rgba(6, 6, 10, 0.31)  92%,
    rgba(6, 6, 10, 0.42) 100%
  );
}

/* ------------------------------------------------------------
   Scanlines — calm static lines + one slow soft CRT band.
   No opacity flicker anywhere (that was the old glitch).
   ------------------------------------------------------------ */
#scanlines {
  opacity: 0.30;
  background-image: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0)            0px,
    rgba(0, 0, 0, 0)            2px,
    rgba(var(--brand-mid-rgb), 0.05) 3px,
    rgba(0, 0, 0, 0.07)        4px
  );
  background-size: 100% 4px;
  animation: scan-scroll 16s linear infinite;
}

#scanlines::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 42%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(var(--brand-mid-rgb), 0.045) 50%,
    transparent 100%
  );
  mix-blend-mode: screen;
  animation: crt-band 11s linear infinite;
}

@keyframes scan-scroll {
  from { background-position: 0 0; }
  to   { background-position: 0 200px; }
}

@keyframes crt-band {
  from { transform: translateY(-100%); }
  to   { transform: translateY(340%); }
}

/* ------------------------------------------------------------
   Logo
   Each transform lives on its own element so they never overwrite
   one another:
     #stage         -> centering + perspective
     #logo-entrance -> load fade + zoom-in (JS adds .in)
     #logo-float    -> ambient bob + drift (CSS, decoupled periods)
     #logo-hover    -> hover scale
     #logo          -> image + glow pulse
     #sheen         -> light-sweep on hover, masked to logo shape
   ------------------------------------------------------------ */
#stage {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: 24px;
  pointer-events: none;
  perspective: 1100px;
}

/* Entrance: starts hidden + slightly small, JS adds .in on load */
#logo-entrance {
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transform: scale(0.86);
  transition: opacity 1.1s ease, transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
#logo-entrance.in {
  opacity: 1;
  transform: scale(1);
}

/* Ambient motion: bob and horizontal drift on different periods so
   the loop never reads as a single repeating wobble. */
#logo-float {
  animation:
    logo-bob 6.5s ease-in-out infinite,
    logo-drift 9s ease-in-out infinite;
  will-change: transform;
}

#logo-hover {
  position: relative;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

#logo {
  display: block;
  width: min(55vw, 55vh);
  max-width: 700px;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 26px rgba(var(--brand-mid-rgb), 0.30));
  animation: logo-glow 4.5s ease-in-out infinite;
}

/* Light sweep clipped to the exact logo silhouette */
#sheen {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  -webkit-mask: url("Soonix.png") center / contain no-repeat;
          mask: url("Soonix.png") center / contain no-repeat;
}

#sheen::before {
  content: "";
  position: absolute;
  top: -20%;
  left: -65%;
  width: 45%;
  height: 140%;
  transform: skewX(-18deg);
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 40%,
    rgba(210, 203, 255, 0.85) 50%,
    rgba(255, 255, 255, 0.10) 60%,
    transparent 100%
  );
}

/* Hover state */
#logo-entrance:hover #logo-hover {
  transform: scale(1.07);
}

#logo-entrance:hover #logo {
  animation: none;
  filter: drop-shadow(0 0 44px rgba(var(--brand-a-rgb), 0.60));
}

#logo-entrance:hover #sheen {
  animation: sheen-fade 0.95s ease-out;
}

#logo-entrance:hover #sheen::before {
  animation: sheen-move 0.95s ease-out;
}

/* Ambient bob — vertical only, viewport-relative so zoom stays proportional */
@keyframes logo-bob {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-1.6vmin); }
  100% { transform: translateY(0); }
}

/* Ambient drift — subtle horizontal sway, different period from bob */
@keyframes logo-drift {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(1.1vmin); }
  100% { transform: translateX(0); }
}

/* Idle glow pulse — breathes even when the logo is still */
@keyframes logo-glow {
  0%   { filter: drop-shadow(0 0 22px rgba(var(--brand-mid-rgb), 0.24)); }
  50%  { filter: drop-shadow(0 0 40px rgba(var(--brand-a-rgb), 0.48)); }
  100% { filter: drop-shadow(0 0 22px rgba(var(--brand-mid-rgb), 0.24)); }
}

@keyframes sheen-fade {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sheen-move {
  0%   { left: -65%; }
  100% { left: 135%; }
}

/* ------------------------------------------------------------
   Responsive + reduced motion
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  #logo { width: min(82vw, 82vh); }
}

@media (prefers-reduced-motion: reduce) {
  #aurora,
  #scanlines,
  #scanlines::after,
  #logo-float,
  #logo {
    animation: none;
  }
  #logo-entrance {
    opacity: 1;
    transform: none;
    transition: none;
  }
}