/* ============================================================
   PulseWave homepage hero — "The Creator Network"
   Deep-blue / electric-cyan creator ocean.

   Layers, back to front:
     .pw-hero__bg    CSS ambient environment (gradients, grid, fallback wave)
     .pw-ocean       WebGL procedural ocean  (js/hero/ocean.js)
     .pw-canvas      2D particle field       (js/hero/particles.js)
     .pw-stage       creator frame + floating cards (CSS animated)
     .pw-hero__scrim readability scrim over the copy column
     .pw-caustics    faint underwater light
     .pw-hero__fx    vignette, grain, rare light sweep
     .hero-grid      copy + CTA

   Everything is scoped to .pw-hero so no other page is affected. Without JS
   (or without WebGL) the static SVG wave + CSS layers form the fallback, so
   the hero is never blank.
   ============================================================ */
.homepage .hero.pw-hero{
  --u:min(1vw,18px);
  /* Ocean palette */
  --pw-abyss:#020812; --pw-deep:#03101D; --pw-mid:#041827; --pw-shoal:#075B87;
  --pw-ocean:#008ECF; --pw-deep-ocean:#0568A8;
  --pw-cyan:#17D5FF; --pw-bright:#47E1FF; --pw-ice:#83EFFF; --pw-glacier:#C7F8FF;
  /* A whisper of violet, kept only for the LIVE badge so the brand's live
     signal still reads instantly. Roughly 5% of the hero's colour area. */
  --pw-signal:#ff2d78; --pw-signal-2:#e33bd6;
  position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:center;
  padding:0; min-height:clamp(720px,78vh,900px);
  color:var(--ink);
  /* Layered blue environment: near-black navy at the top, a cyan core glow
     behind the creator graphic, and a brighter ocean bloom at the base. */
  background:
    radial-gradient(58% 44% at 74% 34%,rgba(0,174,255,.17) 0%,rgba(0,142,220,.06) 46%,transparent 74%),
    radial-gradient(78% 52% at 52% 102%,rgba(0,204,255,.20) 0%,rgba(0,120,190,.07) 48%,transparent 78%),
    radial-gradient(42% 34% at 18% 16%,rgba(5,104,168,.22) 0%,transparent 70%),
    linear-gradient(168deg,#020812 0%,#03101D 38%,#041827 72%,#062338 100%);
}
/* the legacy photo/stripe layers of .hero are replaced by this scene */
.homepage .hero.pw-hero::before,.homepage .hero.pw-hero::after{content:none;display:none}
.pw-hero__bg,.pw-ocean,.pw-canvas,.pw-stage,.pw-hero__scrim,.pw-caustics,.pw-hero__fx{position:absolute;inset:0;pointer-events:none}
.pw-hero__bg{z-index:0}
.pw-ocean{z-index:1;width:100%;height:100%;opacity:0;transition:opacity 1.6s ease .2s}
.pw-canvas{z-index:2;width:100%;height:100%;opacity:0;transition:opacity 1.4s ease}
.pw-stage{z-index:3;left:44%}
.pw-hero__scrim{z-index:4}
.pw-caustics{z-index:5;overflow:hidden}
.pw-hero__fx{z-index:6}
.pw-hero__inner{position:relative;z-index:7;width:100%;max-width:1680px;margin-inline:auto;padding:48px clamp(24px,6.2vw,120px)}

/* ---------- ambient light: three slow, differently-timed ocean glows ---------- */
.pw-glow{position:absolute;border-radius:50%;will-change:transform}
.pw-glow--abyss{left:-14%;top:-30%;width:62%;height:120%;background:radial-gradient(closest-side,rgba(5,104,168,.34),rgba(3,32,56,.14) 55%,transparent);animation:pwDrift 34s ease-in-out infinite alternate}
.pw-glow--core{left:34%;top:18%;width:48%;height:78%;background:radial-gradient(closest-side,rgba(0,190,255,.20),rgba(0,142,220,.07) 58%,transparent);animation:pwDrift 27s ease-in-out -9s infinite alternate-reverse}
.pw-glow--surface{left:22%;bottom:-38%;width:66%;height:72%;background:radial-gradient(closest-side,rgba(0,204,255,.24),rgba(0,120,190,.07) 52%,transparent);animation:pwDrift 22s ease-in-out -5s infinite alternate}
/* Slow independent durations are what stop the background feeling looped. */
@keyframes pwDrift{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,4%,0) scale(1.08)}}

/* perspective floor grid, scrolling exactly one cell so the loop is invisible */
.pw-grid{position:absolute;right:-6%;bottom:-2%;width:72%;height:52%;perspective:520px;overflow:hidden;
  -webkit-mask-image:radial-gradient(70% 90% at 62% 100%,#000 10%,transparent 70%);mask-image:radial-gradient(70% 90% at 62% 100%,#000 10%,transparent 70%);opacity:.55}
.pw-grid::before{content:"";position:absolute;left:-40%;right:-40%;top:-60px;bottom:-60px;transform-origin:50% 100%;
  background-image:linear-gradient(rgba(71,225,255,.12) 1px,transparent 1px),linear-gradient(90deg,rgba(23,213,255,.10) 1px,transparent 1px);
  background-size:60px 60px;transform:rotateX(64deg) translate3d(0,0,0);animation:pwGrid 9s linear infinite}
@keyframes pwGrid{to{transform:rotateX(64deg) translate3d(0,60px,0)}}

/* static wave: the no-JS / pre-canvas / no-WebGL fallback */
.pw-wave-static{position:absolute;inset:0;width:100%;height:100%;transition:opacity 1.2s ease}
.pw-hero--ocean .pw-wave-static{opacity:0}
.pw-hero--ocean .pw-ocean{opacity:1}
.pw-hero--live .pw-canvas{opacity:1}

/* ---------- scrim: keeps the copy column dark and readable ---------- */
/* Deliberately asymmetric: heavy protection on the left where the headline
   lives, almost nothing on the right so the ocean stays visible. */
.pw-hero__scrim{background:
  radial-gradient(64% 82% at 18% 44%,rgba(2,8,18,.95) 0%,rgba(2,8,18,.80) 46%,rgba(2,8,18,0) 82%),
  linear-gradient(90deg,rgba(2,8,18,.78) 0%,rgba(2,8,18,.38) 34%,rgba(2,8,18,0) 56%),
  /* Bottom band: the water has to melt into the section that follows, so the
     scrim carries the page background colour down to the hero's edge — but
     only across the last 5%, otherwise it blacks out the foreground water. */
  linear-gradient(0deg,var(--bg) 0%,rgba(4,7,14,.35) 3%,rgba(2,8,18,0) 7%),
  linear-gradient(180deg,rgba(2,8,18,.7) 0%,rgba(2,8,18,0) 12%)}

/* ---------- caustics: reflected water light on the lower hero ----------
   Crossing repeating gradients give the light-net structure, but at this
   subtlety they must stay soft and irregular: large tiles, thin lines, very
   low alpha and a radial mask, so they read as moving light on water rather
   than as a visible graphic. The shader's own caustics carry most of the
   effect; these DOM sheets add a slower, larger-scale drift on top. */
.pw-caustics span{position:absolute;left:50%;bottom:-10%;border-radius:50%;
  mix-blend-mode:screen;will-change:transform,opacity;background-repeat:repeat;
  -webkit-mask-image:radial-gradient(closest-side,rgba(0,0,0,.55) 10%,transparent 76%);
  mask-image:radial-gradient(closest-side,rgba(0,0,0,.55) 10%,transparent 76%)}
.pw-caustics span:nth-child(1){width:150%;height:64%;margin-left:-75%;
  background-image:
    repeating-linear-gradient(72deg,rgba(0,190,255,.085) 0 1px,transparent 1px 74px),
    repeating-linear-gradient(-58deg,rgba(0,190,255,.06) 0 1px,transparent 1px 96px);
  background-size:420px 340px,540px 430px;
  animation:pwCaustic 21s ease-in-out infinite alternate}
.pw-caustics span:nth-child(2){width:118%;height:48%;margin-left:-59%;
  background-image:
    repeating-linear-gradient(56deg,rgba(71,225,255,.07) 0 1px,transparent 1px 58px),
    repeating-linear-gradient(-46deg,rgba(131,239,255,.05) 0 1px,transparent 1px 82px);
  background-size:360px 280px,470px 350px;
  animation:pwCaustic 28s ease-in-out -8s infinite alternate-reverse}
.pw-caustics span:nth-child(3){width:86%;height:34%;margin-left:-43%;left:32%;
  background-image:
    repeating-linear-gradient(94deg,rgba(131,239,255,.05) 0 1px,transparent 1px 46px),
    repeating-linear-gradient(-82deg,rgba(23,213,255,.045) 0 1px,transparent 1px 66px);
  background-size:300px 240px,390px 300px;
  animation:pwCaustic 36s ease-in-out -16s infinite alternate}
@keyframes pwCaustic{from{transform:translate3d(-4%,0,0) scale(1) rotate(-1.2deg);opacity:.45}to{transform:translate3d(5%,-3%,0) scale(1.14) rotate(1.6deg);opacity:1}}

/* ---------- vignette, film grain and the rare light sweep ---------- */
.pw-hero__fx{overflow:hidden;background:radial-gradient(140% 120% at 66% 52%,transparent 62%,rgba(0,4,12,.5) 100%)}
.pw-hero__fx::after{content:"";position:absolute;inset:0;opacity:.045;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.pw-sweep{position:absolute;top:-20%;bottom:-20%;left:0;width:22%;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(140,225,255,.06) 45%,rgba(199,248,255,.045) 55%,transparent);
  transform:translate3d(-30vw,0,0) skewX(-18deg);animation:pwSweep 18s ease-in-out 3s infinite}
@keyframes pwSweep{0%{transform:translate3d(-30vw,0,0) skewX(-18deg);opacity:0}4%{opacity:1}18%{opacity:1}24%,100%{transform:translate3d(120vw,0,0) skewX(-18deg);opacity:0}}

/* ---------- right-hand creator environment ---------- */
/* .pw-layer receives the small pointer-parallax translate from JS; the child
   owns its float animation, so the two transforms never fight. */
.pw-layer{position:absolute;will-change:transform}
.pw-ring{left:14%;top:2%;width:calc(40 * var(--u));height:calc(40 * var(--u))}
.pw-ring span{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0 62%,rgba(23,213,255,.30) 70%,transparent 76%,transparent 88%,rgba(71,225,255,.26) 94%,transparent 100%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px));
  animation:pwSpin 70s linear infinite}
.pw-ring::before,.pw-ring::after{content:"";position:absolute;border-radius:50%;inset:9%;border:1px dashed rgba(131,239,255,.08);animation:pwSpin 110s linear infinite reverse}
.pw-ring::after{inset:-9%;border:1px solid rgba(8,142,206,.09);animation:none}
@keyframes pwSpin{to{transform:rotate(1turn)}}

/* central "on air" creator frame — the hero's centrepiece */
.pw-frame-wrap{left:26%;top:12%;width:calc(22 * var(--u));height:calc(28 * var(--u))}
.pw-frame{position:relative;width:100%;height:100%;border-radius:calc(1.6 * var(--u));overflow:hidden;
  background:linear-gradient(165deg,rgba(12,62,104,.52),rgba(3,16,29,.78) 52%,rgba(5,40,68,.55));
  border:1px solid rgba(59,219,255,.22);
  box-shadow:0 34px 90px rgba(0,4,12,.62),inset 0 0 0 1px rgba(255,255,255,.03),inset 0 1px 40px rgba(0,142,220,.10),0 0 60px rgba(0,190,255,.16);
  animation:pwFloat 16s ease-in-out infinite;transition:box-shadow .6s ease,border-color .6s ease}
/* faint cyan inner glow behind the creator figure */
.pw-frame__halo{position:absolute;left:50%;top:44%;width:124%;height:92%;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side,rgba(0,190,255,.42),rgba(8,142,206,.16) 55%,transparent);animation:pwBreathe 9s ease-in-out infinite}
.pw-creator{position:absolute;left:4%;bottom:0;width:92%;height:auto}
.pw-creator__rim{filter:drop-shadow(0 0 6px #6ff2ff);opacity:.85}
.pw-frame__corner{position:absolute;width:18px;height:18px;border:0 solid rgba(131,239,255,.7)}
.pw-frame__corner--tl{left:12px;top:12px;border-left-width:2px;border-top-width:2px;border-top-left-radius:6px}
.pw-frame__corner--tr{right:12px;top:12px;border-right-width:2px;border-top-width:2px;border-top-right-radius:6px}
.pw-frame__corner--bl{left:12px;bottom:12px;border-left-width:2px;border-bottom-width:2px;border-bottom-left-radius:6px}
.pw-frame__corner--br{right:12px;bottom:12px;border-right-width:2px;border-bottom-width:2px;border-bottom-right-radius:6px}
.pw-frame__rec{position:absolute;left:38px;top:15px;display:flex;align-items:center;gap:6px;font:700 10px/1 var(--body,system-ui);letter-spacing:.2em;color:rgba(199,248,255,.72)}
.pw-frame__rec i{width:6px;height:6px;border-radius:50%;background:#17D5FF;box-shadow:0 0 8px rgba(23,213,255,.9);animation:pwBlink 2.4s ease-in-out infinite}
/* slow scan line = the "light pass" travelling across the glass */
.pw-frame__scan{position:absolute;left:0;right:0;top:0;height:30%;background:linear-gradient(180deg,transparent,rgba(71,225,255,.09),transparent);animation:pwScan 11s linear infinite}
.pw-eq{position:absolute;left:12%;right:12%;bottom:7%;height:13%;display:flex;align-items:flex-end;gap:4%}
/* cyan visualiser: bright at the base, fading to a pale highlight on top */
.pw-eq i{flex:1;height:100%;border-radius:3px;background:linear-gradient(0deg,var(--pw-shoal),var(--pw-cyan) 55%,var(--pw-ice));opacity:.7;transform-origin:50% 100%;transform:scaleY(.3);animation:pwEq 1.9s ease-in-out infinite alternate}
.pw-eq i:nth-child(3n){animation-duration:2.6s}.pw-eq i:nth-child(3n+1){animation-duration:1.5s}
.pw-eq i:nth-child(2n){animation-delay:-.7s}.pw-eq i:nth-child(5n){animation-delay:-1.3s}
.pw-frame.is-lit{border-color:rgba(131,239,255,.52);box-shadow:0 34px 90px rgba(0,4,12,.62),inset 0 0 0 1px rgba(255,255,255,.05),inset 0 1px 40px rgba(0,190,255,.16),0 0 84px rgba(0,190,255,.34)}

@keyframes pwScan{from{transform:translateY(-100%)}to{transform:translateY(440%)}}
@keyframes pwEq{0%{transform:scaleY(.18)}50%{transform:scaleY(.62)}100%{transform:scaleY(.34)}}
@keyframes pwFloat{0%,100%{transform:translate3d(0,0,0) rotate(var(--r,0deg))}50%{transform:translate3d(0,-10px,0) rotate(calc(var(--r,0deg) + .6deg))}}
@keyframes pwBreathe{0%,100%{opacity:.72}50%{opacity:1}}
@keyframes pwBlink{0%,100%{opacity:1}50%{opacity:.3}}
@keyframes pwPing{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}80%,100%{box-shadow:0 0 0 7px rgba(255,255,255,0)}}

/* LIVE status pill — the one place a hot signal colour survives, because
   "live" has to be instantly legible at a glance. */
.pw-live-wrap{left:50%;top:7%}
.pw-live{display:flex;align-items:center;gap:6px;padding:6px;border-radius:999px;
  background:linear-gradient(135deg,rgba(6,38,66,.82),rgba(3,16,29,.84));border:1px solid rgba(59,219,255,.28);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 14px 34px rgba(0,4,12,.5),0 0 26px rgba(0,190,255,.18);
  font:800 max(12px,calc(.95 * var(--u)))/1 var(--body,system-ui);letter-spacing:.14em;color:#fff;--r:-2deg;animation:pwFloat 13s ease-in-out -3s infinite}
.pw-live__tag{display:flex;align-items:center;gap:8px;padding:.62em 1em;border-radius:999px;background:linear-gradient(90deg,#ff2d78,#c02bd6)}
.pw-live__dot{width:.55em;height:.55em;border-radius:50%;background:#fff;animation:pwPing 2.2s ease-out infinite}
.pw-live__count{display:flex;align-items:center;gap:7px;padding:0 1em 0 .5em;color:#dffaff;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.pw-live__count svg{width:1.25em;height:1.25em;color:var(--pw-bright)}
.pw-live__count b{font-weight:800;min-width:3.6ch}


/* glass creator cards: dark navy glass with small cyan accents, not neon */
.pw-card-wrap{width:calc(10.6 * var(--u));height:calc(13.4 * var(--u))}
.pw-card-wrap--gaming{left:4%;top:50%}
.pw-card-wrap--music{right:7%;top:14%}
.pw-card-wrap--life{right:3%;top:55%}
.pw-card-wrap--community{left:50%;top:62%;width:calc(15 * var(--u));height:auto}
.pw-card{position:relative;height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:calc(1.1 * var(--u));
  background:linear-gradient(160deg,rgba(10,52,92,.46),rgba(3,14,26,.66));border:1px solid rgba(59,219,255,.25);
  -webkit-backdrop-filter:blur(12px) saturate(140%);backdrop-filter:blur(12px) saturate(140%);
  box-shadow:0 22px 50px rgba(0,4,12,.5),inset 0 1px 0 rgba(255,255,255,.07),0 0 40px rgba(0,190,255,.10);
  animation:pwFloat 12s ease-in-out infinite;transition:border-color .6s ease,box-shadow .6s ease}
.pw-card::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(125deg,rgba(199,248,255,.10),transparent 38%)}
.pw-card-wrap--gaming .pw-card{--r:-5deg;animation-duration:13s;animation-delay:-2s}
.pw-card-wrap--music .pw-card{--r:6deg;animation-duration:15s;animation-delay:-6s}
.pw-card-wrap--life .pw-card{--r:-3deg;animation-duration:12s;animation-delay:-4s}
.pw-card-wrap--community .pw-card{--r:3deg;animation-duration:16s;animation-delay:-9s}
.pw-card.is-lit{border-color:rgba(131,239,255,.58);box-shadow:0 22px 50px rgba(0,4,12,.5),inset 0 1px 0 rgba(255,255,255,.1),0 0 40px rgba(0,190,255,.30)}
.pw-card__head{display:flex;align-items:center;gap:.5em;padding:.85em .9em .7em;font:800 max(10px,calc(.78 * var(--u)))/1 var(--body,system-ui);letter-spacing:.16em;text-transform:uppercase;color:#e9f9ff}
.pw-card__head svg{width:1.35em;height:1.35em;color:var(--pw-cyan);flex:none}
/* each card keeps a distinct hue so they stay scannable, all within blue/cyan */
.pw-card-wrap--music .pw-card__head svg{color:var(--pw-glacier)}
.pw-card-wrap--life .pw-card__head svg{color:var(--pw-ocean)}
.pw-card__art{display:block;flex:1;width:calc(100% - 1.2em);margin:0 .6em .6em;border-radius:calc(.7 * var(--u));min-height:0}
.pw-card__art--music{position:relative;overflow:hidden;background:radial-gradient(80% 70% at 50% 30%,#0b4c7d,#04101d 70%)}
.pw-disc{position:absolute;left:50%;top:38%;width:58%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle,var(--pw-ice) 0 9%,#031322 10% 16%,transparent 17%),repeating-radial-gradient(circle,#0c3350 0 2px,#041726 2px 4px);
  box-shadow:0 0 26px rgba(23,213,255,.40);animation:pwSpin 9s linear infinite}
.pw-bars{position:absolute;left:10%;right:10%;bottom:9%;height:24%;display:flex;align-items:flex-end;gap:5%}
.pw-bars i{flex:1;height:100%;border-radius:2px;background:linear-gradient(0deg,var(--pw-shoal),var(--pw-cyan) 60%,var(--pw-ice));transform-origin:50% 100%;animation:pwEq 1.6s ease-in-out infinite alternate}
.pw-bars i:nth-child(2n){animation-duration:2.1s;animation-delay:-.5s}.pw-bars i:nth-child(3n){animation-duration:1.3s;animation-delay:-1s}
.pw-msgs{list-style:none;margin:0;padding:0 .9em .9em;display:grid;gap:.6em}
.pw-msgs li{display:flex;align-items:center;gap:.6em;animation:pwMsg 9s ease-in-out infinite}
.pw-msgs li:nth-child(2){animation-delay:-3s}.pw-msgs li:nth-child(3){animation-delay:-6s}
.pw-av{flex:none;width:max(16px,calc(1.35 * var(--u)));aspect-ratio:1;border-radius:50%}
.pw-av--1{background:linear-gradient(135deg,var(--pw-ice),var(--pw-cyan))}
.pw-av--2{background:linear-gradient(135deg,var(--pw-cyan),var(--pw-deep-ocean))}
.pw-av--3{background:linear-gradient(135deg,var(--pw-glacier),var(--pw-ocean))}
.pw-line{height:max(6px,calc(.5 * var(--u)));width:var(--w);border-radius:99px;background:linear-gradient(90deg,rgba(199,248,255,.5),rgba(199,248,255,.14))}
@keyframes pwMsg{0%,100%{opacity:.55}15%,40%{opacity:1}}

/* floating reactions (spawned by JS, removed on animationend) */
.pw-reactions{position:absolute;inset:0;overflow:hidden}
.pw-react{position:absolute;bottom:0;width:26px;height:26px;opacity:0;color:var(--c,var(--pw-cyan));filter:drop-shadow(0 0 8px currentColor);animation:pwReact var(--d,4.2s) cubic-bezier(.3,.6,.4,1) forwards}
.pw-react svg{width:100%;height:100%;display:block}
@keyframes pwReact{0%{opacity:0;transform:translate3d(0,0,0) scale(.5)}12%{opacity:.95;transform:translate3d(calc(var(--dx,0px) * .2),-40px,0) scale(1)}70%{opacity:.8}100%{opacity:0;transform:translate3d(var(--dx,0px),-240px,0) scale(.85)}}


/* ---------- copy layer (hero typography is reused unchanged from styles.css) ---------- */
.homepage .pw-hero>.hero-grid{position:relative;z-index:7;flex:1;min-height:0}
.homepage .pw-hero .hero-copy{max-width:100%}
/* The brush stroke becomes an ocean-energy sweep: a cyan core with a soft
   travelling highlight, so it reads as hand-painted rather than vector. */
.pw-hero .brush-stroke{fill:var(--pw-cyan);filter:drop-shadow(0 3px 12px rgba(23,213,255,.55))}
.pw-hero .brush-stroke path{animation:pwBrush 9s ease-in-out infinite}
@keyframes pwBrush{0%,100%{opacity:.9}50%{opacity:1}}

/* ---------- Apply to Join CTA ---------- */
/* Scoped to the hero only; the button markup and destination are unchanged. */
.pw-hero .hero-ctas .btn{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,#60E7FF 0%,#17CDF3 45%,#05AEDA 100%);
  color:#04121f;box-shadow:0 16px 40px rgba(0,120,190,.34),0 0 32px rgba(23,213,255,.26);
  transition:transform .28s cubic-bezier(.22,.9,.3,1),box-shadow .28s ease,filter .28s ease}
.pw-hero .hero-ctas .btn:hover{transform:translateY(-3px);filter:saturate(1.08) brightness(1.03);
  box-shadow:0 22px 52px rgba(0,120,190,.42),0 0 48px rgba(23,213,255,.38)}
.pw-hero .hero-ctas .btn:active{transform:translateY(-1px)}
.pw-hero .hero-ctas .btn:focus-visible{outline:2px solid var(--pw-glacier);outline-offset:4px}
/* arrow nudges forward on hover — the only moving part of the button */
.pw-hero .hero-ctas .btn .i{transition:transform .28s cubic-bezier(.22,.9,.3,1)}
.pw-hero .hero-ctas .btn:hover .i{transform:translateX(4px)}
/* one slow shine sweep, well spaced so it never feels busy */
.pw-hero .hero-ctas .btn::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.55) 50%,transparent 68%);transform:translateX(-120%);animation:pwCtaShine 9s ease-in-out 3s infinite}
@keyframes pwCtaShine{0%,86%{transform:translateX(-120%)}100%{transform:translateX(120%)}}

/* staggered entrance (~1.5s). Only runs once .pw-hero--intro is set by JS,
   so without JS (or with reduced motion) everything is simply visible. */
.pw-hero--intro .pw-stage>*,.pw-hero--intro .pw-hero__bg{opacity:0}
.pw-hero--in .pw-hero__bg{opacity:1;transition:opacity 1.1s ease}
.pw-hero--in .pw-stage>*{opacity:1;transition:opacity .9s ease}
.pw-hero--in .pw-ring{transition-delay:.2s}
.pw-hero--in .pw-frame-wrap{transition-delay:.35s}
.pw-hero--in .pw-card-wrap--gaming{transition-delay:.6s}
.pw-hero--in .pw-card-wrap--music{transition-delay:.75s}
.pw-hero--in .pw-card-wrap--life{transition-delay:.9s}
.pw-hero--in .pw-live-wrap{transition-delay:1.05s}
.pw-hero--in .pw-card-wrap--community{transition-delay:1.2s}

/* ---------- mid widths: scene shifts right, fewer overlaps ---------- */
@media (max-width:1100px) and (min-width:1025px){
  .homepage .hero.pw-hero{min-height:720px}
  .pw-stage{left:44%}
  .pw-hero{--u:1.25vw}
  .pw-card-wrap--gaming{left:4%;top:56%}
  .pw-card-wrap--community{display:none}
  .pw-live-wrap{left:52%}
}

/* ---------- tablet + mobile (matches home-hero.css single column):
   copy first, scene underneath. These are real behaviour changes, not a
   scaled-down desktop: fewer decorative cards, no cursor parallax (handled in
   JS), a lower canvas DPR and a reduced shader path (see js/hero/runtime.js). */
@media (max-width:1024px){
  .homepage .hero.pw-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:0 0 calc(clamp(400px,112vw,520px) + 28px)}
  .pw-hero{--u:min(2.9vw,15px)}
  /* Both canvases share the lower band so the ocean sits under the cards. */
  .pw-ocean,.pw-canvas{top:auto;height:clamp(460px,125vw,580px)}
  .pw-stage{left:0;top:auto;height:clamp(400px,112vw,520px)}
  /* Vertical scrim on mobile: the copy is above, so protect the top instead. */
  .pw-hero__scrim{background:
    linear-gradient(180deg,rgba(2,8,18,.97) 0%,rgba(2,8,18,.92) 34%,rgba(2,8,18,.34) 58%,rgba(2,8,18,0) 72%),
    linear-gradient(0deg,var(--bg) 0%,rgba(4,7,14,0) 10%)}
  .pw-glow--abyss{left:-40%;top:20%;width:130%;height:70%}
  .pw-glow--core{left:-10%;top:52%;width:100%;height:52%}
  .pw-glow--surface{left:-16%;bottom:-30%;width:132%;height:62%}
  .pw-grid{right:-30%;width:160%;height:30%}
  .pw-wave-static{top:auto;height:60%}
  .pw-caustics{top:auto;height:clamp(460px,125vw,580px)}
  .pw-ring{left:50%;top:4%;width:min(72vw,560px);height:min(72vw,560px);margin-left:max(-36vw,-280px)}
  .pw-frame-wrap{left:50%;top:10%;width:min(42vw,340px);height:min(54vw,430px);margin-left:max(-21vw,-170px)}
  .pw-live-wrap{left:auto;right:5%;top:3%}
  .pw-card-wrap{width:min(23vw,190px);height:min(30vw,245px)}
  .pw-card-wrap--gaming{left:3%;top:22%}
  .pw-card-wrap--music{right:3%;top:24%}
  .pw-card-wrap--life{right:6%;top:58%}
  .pw-card-wrap--community{left:4%;top:62%;width:min(36vw,280px)}
  .pw-card__head{padding:.7em .7em .55em;letter-spacing:.1em}
  .pw-frame__rec{display:none}
}
@media (max-width:1024px) and (min-width:761px){
  .pw-live-wrap{right:12%}
  .pw-card-wrap--gaming{left:8%}.pw-card-wrap--community{left:9%}
  .pw-card-wrap--music{right:8%}.pw-card-wrap--life{right:10%}
}
/* Phones: drop to the two cards that frame the creator graphic instead of
   letting four compete with the headline for space. */
@media (max-width:700px){
  .pw-card-wrap--life{display:none}
  .pw-card-wrap--community{display:none}
  .pw-caustics span:nth-child(3){display:none}
  .pw-hero .hero-ctas .btn{padding:1.05rem 1.5rem}
}
@media (max-width:380px){.pw-card-wrap--music{display:none}}

/* ---------- reduced motion: a composed still frame ---------- */
@media (prefers-reduced-motion:reduce){
  .pw-hero *,.pw-hero *::before,.pw-hero *::after{animation:none!important;transition:none!important}
  .pw-sweep,.pw-reactions,.pw-caustics{display:none}
  .pw-eq i,.pw-bars i{transform:scaleY(.45)}
}