/* Home page: immersive, futuristic layer. Everything here is decoration on top of readable content;
   prefers-reduced-motion switches the motion off (see the end of this file and js/home.js). */
body.home{--accent2:#8fb4ff}
:root[data-mode="light"] body.home{--accent2:#3b5bd6}
body.home main,body.home .topbar{position:relative;z-index:2}
body.home .topbar{position:sticky;top:0;z-index:20;max-width:none;margin:0;padding:14px max(16px,calc((100% - 1100px)/2));backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);background:color-mix(in srgb,var(--ink) 86%,transparent);border-bottom:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
body.home .topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--signal),transparent);opacity:.55;transform-origin:center;animation:pulse-line 5s ease-in-out infinite}
@keyframes pulse-line{50%{opacity:.15;transform:scaleX(.6)}}

/* Hero */
.hero2{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:30px;align-items:center;min-height:calc(100svh - 70px);padding-top:4vh;padding-bottom:6vh;max-width:1160px}
.tag{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);padding:6px 12px;border-radius:99px;background:var(--card-on)}
.tag .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 var(--ok);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 9px transparent}100%{box-shadow:0 0 0 0 transparent}}
.hero2 h1{font-size:clamp(38px,7.4vw,84px);line-height:.98;margin:18px 0 16px}
@keyframes sheen{to{background-position:-200% 0}}
.hero2 .lede{font-size:clamp(16px,2vw,19px);max-width:52ch}
.cta{margin-top:26px}
.btn.glow{position:relative;box-shadow:0 0 0 1px color-mix(in srgb,var(--signal) 60%,transparent),0 10px 40px -8px var(--glow)}
.btn.glow::before{content:"";position:absolute;inset:-2px;border-radius:18px;background:conic-gradient(from var(--a,0deg),transparent 0 70%,var(--signal),transparent);-webkit-mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);padding:2px;animation:spin 3.2s linear infinite;pointer-events:none}
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes spin{to{--a:360deg}}
.pills{display:flex;gap:10px;flex-wrap:wrap;list-style:none;margin:26px 0 0;padding:0}
.pills li{font-size:13px;color:var(--muted);border:1px solid var(--line);border-radius:12px;padding:7px 12px;background:var(--card-on)}
.pills b{color:var(--fg);font-family:var(--mono);font-size:15px}

/* Stage: tilting phone + orbiting chips */
.stage{position:relative;display:grid;place-items:center;height:min(76vw,560px);perspective:1100px}
.orbit{position:absolute;border:1px dashed color-mix(in srgb,var(--signal) 40%,transparent);border-radius:50%;animation:rot 30s linear infinite}
.orbit.o1{width:min(92%,470px);aspect-ratio:1}
.orbit.o2{width:min(72%,370px);aspect-ratio:1;animation-duration:22s;animation-direction:reverse}
.orbit.o3{width:min(112%,560px);aspect-ratio:1;animation-duration:44s;opacity:.6}
.sat{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font:600 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 11px;border-radius:99px;background:var(--ink);border:1px solid var(--signal);color:var(--fg);box-shadow:0 0 18px -2px var(--glow);animation:counter 30s linear infinite}
.o2 .sat{animation:counter-r 22s linear infinite}.o3 .sat{animation:counter 44s linear infinite}
@keyframes rot{to{transform:rotate(360deg)}}
@keyframes counter{to{transform:translateX(-50%) rotate(-360deg)}}
@keyframes counter-r{to{transform:translateX(-50%) rotate(360deg)}}
.phone{position:relative;width:min(58%,280px);aspect-ratio:9/17;border-radius:34px;padding:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--raise) 85%,#fff),var(--deep));border:1px solid var(--line);box-shadow:0 40px 90px -20px rgba(0,0,0,.55),0 0 60px -10px var(--glow),inset 0 0 0 1px rgba(255,255,255,.06);transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .15s ease-out;animation:bob 7s ease-in-out infinite;transform-style:preserve-3d}
@keyframes bob{50%{translate:0 -10px}}
.phone-in{height:100%;border-radius:26px;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--plum) 55%,var(--ink)),var(--ink));padding:16px 14px;display:flex;flex-direction:column;align-items:center;gap:10px;overflow:hidden}
.p-top{display:flex;justify-content:space-between;align-items:center;width:100%}
.live{font:700 10px var(--mono);letter-spacing:.14em;color:var(--ok);display:inline-flex;align-items:center;gap:5px}
.live i{width:6px;height:6px;border-radius:50%;background:var(--ok);animation:ping 1.4s infinite}
.p-name{font:700 14px var(--display);text-align:center}
.qrwrap{position:relative;width:78%;aspect-ratio:1;border-radius:14px;background:#fff;padding:7px;overflow:hidden;box-shadow:0 0 30px -6px var(--glow)}
.qrwrap canvas{width:100%;height:100%;display:block;image-rendering:pixelated}
.beam{position:absolute;left:0;right:0;height:34%;top:-34%;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--ok) 55%,transparent),transparent);border-bottom:2px solid var(--ok);animation:scan 3.4s ease-in-out infinite}
@keyframes scan{0%{top:-34%}60%,100%{top:100%}}
.p-code{font-size:10.5px;letter-spacing:.08em;color:var(--muted)}
.p-status{margin-top:auto;width:100%;text-align:center;font:700 13px var(--display);padding:10px;border-radius:14px;background:var(--card-on);border:1px solid var(--line);transition:background .3s,color .3s,border-color .3s}
.p-status.ok{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
.glare{position:absolute;inset:0;border-radius:34px;pointer-events:none;background:radial-gradient(60% 40% at var(--gx,30%) var(--gy,10%),rgba(255,255,255,.18),transparent 70%)}

/* Ticker */
.ticker{overflow:hidden;border-block:1px solid var(--line);background:color-mix(in srgb,var(--ink) 55%,transparent);backdrop-filter:blur(8px);margin:10px 0 0;mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ticker-in{display:flex;gap:46px;width:max-content;padding:14px 0;animation:marquee 38s linear infinite;font:700 13px var(--mono);letter-spacing:.3em;color:var(--muted)}
.ticker-in span:nth-child(3n+1){color:var(--signal)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* Sections, reveal, spotlight */
.sec{padding-top:clamp(54px,9vw,110px)}
.big{font-size:clamp(26px,4.6vw,46px);line-height:1.05;margin-top:8px}
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.in .card,.js .rv.in .steps li{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
.js .rv.in .card:nth-child(2),.js .rv.in .steps li:nth-child(2){animation-delay:.1s}
.js .rv.in .card:nth-child(3),.js .rv.in .steps li:nth-child(3){animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(22px)}}
.spot{position:relative;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.spot::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),var(--glow),transparent 60%)}
.spot:hover::before{opacity:1}
.spot:hover{border-color:var(--signal)}
.prod{display:flex;flex-direction:column;gap:8px;text-decoration:none;color:inherit;padding:22px}
.prod:hover{transform:translateY(-6px);box-shadow:0 24px 60px -24px var(--glow)}
.prod h3{font-size:22px}
.more{margin-top:auto;padding-top:12px;font-weight:700;color:var(--signal)}
.viz{margin-top:10px;min-height:74px;display:grid;align-content:center;gap:8px}
/* offices: working hours bar with a moving "now" marker */
.hours .bar{position:relative;height:14px;border-radius:99px;background:var(--card-on);border:1px solid var(--line);overflow:hidden}
.hours .win{position:absolute;left:25%;width:50%;top:0;bottom:0;background:linear-gradient(90deg,var(--signal),var(--accent2));border-radius:99px;opacity:.8}
.hours .now{position:absolute;top:-3px;bottom:-3px;width:3px;background:var(--ok);box-shadow:0 0 10px var(--ok);left:0;animation:now 9s linear infinite}
@keyframes now{to{left:100%}}
.hours .ticks{display:flex;justify-content:space-between;font:11px var(--mono);color:var(--muted)}
/* events: capacity meter */
.meter{height:14px;border-radius:99px;background:var(--card-on);border:1px solid var(--line);overflow:hidden}
.meter i{display:block;height:100%;width:6%;background:linear-gradient(90deg,var(--signal),var(--accent2));border-radius:99px;animation:fill 6s ease-in-out infinite}
@keyframes fill{0%{width:6%}55%,85%{width:96%}100%{width:6%}}
.cap-l{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}.cap-l b{color:var(--fg)}.cap-l em{font-style:normal}
/* payments: amount and paid tick */
.pay{grid-auto-flow:column;justify-content:space-between;align-items:center}
.pay .amt{font:800 30px var(--display)}
.paid{display:inline-flex;align-items:center;gap:7px;font-weight:700;color:var(--ok);padding:7px 12px;border-radius:99px;background:var(--ok-soft);animation:blink 4s ease-in-out infinite}
.paid i{width:14px;height:14px;border-radius:50%;background:var(--ok);display:inline-block;clip-path:polygon(14% 52%,0 66%,38% 100%,100% 22%,84% 8%,38% 70%)}
@keyframes blink{0%,45%{opacity:.25;transform:scale(.94)}60%,100%{opacity:1;transform:none}}

/* How it works */
.steps{list-style:none;margin:30px 0 0;padding:0 0 0 28px;position:relative;display:grid;gap:26px;max-width:760px}
.steps::before,.steps::after{content:"";position:absolute;left:0;top:6px;bottom:6px;width:2px;background:var(--line)}
.steps::after{background:linear-gradient(var(--signal),var(--accent2));height:var(--p,0%);bottom:auto;box-shadow:0 0 14px var(--signal);transition:height .15s}
.steps li{display:flex;gap:18px;align-items:flex-start;position:relative;opacity:.45;transition:opacity .4s}
.steps li.on{opacity:1}
.steps li::before{content:"";position:absolute;left:-33px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--ink);border:2px solid var(--line);transition:.3s}
.steps li.on::before{border-color:var(--signal);background:var(--signal);box-shadow:0 0 14px var(--signal)}
.steps .n{font:700 34px var(--mono);color:var(--signal);line-height:1}
.steps h3{font-size:20px;margin-bottom:4px}

/* Simulated gate */
.gatebox{border:1px solid var(--line);border-radius:26px;padding:clamp(18px,3vw,30px);background:var(--card);backdrop-filter:blur(10px)}
.gate-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.gate-grid{display:grid;grid-template-columns:200px 1fr;gap:22px;margin-top:20px;align-items:start}
.counts{display:grid;gap:12px}
.counts div{border:1px solid var(--line);border-radius:18px;padding:14px;background:var(--card-on)}
.counts b{display:block;font:800 40px var(--display);font-variant-numeric:tabular-nums}
.counts div:first-child b{color:var(--ok)}.counts div:last-child b{color:var(--bad)}
.counts span{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.feed{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-height:268px;align-content:start}
.feed li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:11px 14px;border:1px solid var(--line);border-radius:14px;background:var(--card-on);animation:slidein .45s cubic-bezier(.2,.7,.2,1)}
.feed li small{display:block;color:var(--muted);font:11px var(--mono)}
.feed li.no{border-color:var(--bad);background:var(--bad-soft)}
@keyframes slidein{from{opacity:0;transform:translateX(-24px) scale(.97)}}

@media(max-width:860px){
  .hero2{grid-template-columns:1fr;min-height:0}
  .stage{height:min(76vw,330px);order:-1;margin-top:-6px}
  .hero2{padding-top:0;gap:6px}
  .phone{width:min(50%,190px)}
  .hero2 h1{font-size:clamp(34px,10.4vw,52px);margin:12px 0 10px}
  .hero2 .lede{font-size:15px}
  .pills{display:none}
  .hero-copy{padding-top:30px}
  .gate-grid{grid-template-columns:1fr}
  .counts{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){
  .orbit,.sat,.phone,.beam,.ticker-in,.btn.glow::before,.topbar::after,.hours .now,.meter i,.paid,.tag .dot,.live i{animation:none!important}
  .js .rv{opacity:1;transform:none;transition:none}
  .js .rv.in .card,.js .rv.in .steps li{animation:none}
  .steps li{opacity:1}
  .ticker-in{flex-wrap:wrap;width:auto;justify-content:center}
}

/* ===== More immersive layer ===== */
.progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;pointer-events:none}
.progress i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--signal),var(--accent2),var(--ok));box-shadow:0 0 14px var(--signal)}
.cursor-light{position:fixed;left:0;top:0;width:620px;height:620px;margin:-310px 0 0 -310px;border-radius:50%;pointer-events:none;z-index:-1;opacity:0;transition:opacity .5s;background:radial-gradient(closest-side,color-mix(in srgb,var(--signal) 26%,transparent),transparent);mix-blend-mode:screen;will-change:transform}
.cursor-light.on{opacity:1}
:root[data-mode="light"] .cursor-light{mix-blend-mode:multiply;background:radial-gradient(closest-side,color-mix(in srgb,var(--signal) 18%,transparent),transparent)}
body.home .fx-aurora{filter:hue-rotate(var(--hue,0deg));transition:filter 1.2s}

/* cinematic entrance: the hero builds itself in, one piece at a time */
.js .hero-copy>*{animation:introin .95s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*.09s + .15s)}
.js .hero-copy>*:nth-child(1){--i:0}.js .hero-copy>*:nth-child(2){--i:1}.js .hero-copy>*:nth-child(3){--i:3}.js .hero-copy>*:nth-child(4){--i:4}.js .hero-copy>*:nth-child(5){--i:5}
.js .stage{animation:stagein 1.4s cubic-bezier(.2,.7,.2,1) .2s both}
@keyframes introin{from{opacity:0;transform:translateY(34px);filter:blur(10px)}}
@keyframes stagein{from{opacity:0;transform:scale(.72) rotateX(18deg);filter:blur(8px)}}

/* floating glass fragments at different depths around the phone */
.frag{position:absolute;z-index:3;display:flex;align-items:center;gap:7px;font:600 12px var(--mono);letter-spacing:.04em;padding:10px 14px;border-radius:14px;color:var(--muted);background:color-mix(in srgb,var(--raise) 55%,transparent);border:1px solid color-mix(in srgb,var(--signal) 45%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 20px 40px -20px rgba(0,0,0,.6),0 0 24px -8px var(--glow);transform:translate3d(var(--tx,0px),var(--ty,0px),0);will-change:transform;white-space:nowrap}
.frag b{color:var(--fg);font-family:var(--display)}
.frag em{font-style:normal;color:var(--ok)}
.ok-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 10px var(--ok)}
.f1{left:-2%;top:16%;animation:fbob 6s ease-in-out infinite}
.f2{right:-4%;top:30%;animation:fbob 7.5s ease-in-out -2s infinite}
.f3{left:2%;bottom:20%;animation:fbob 8s ease-in-out -4s infinite}
.f4{right:2%;bottom:12%;animation:fbob 6.5s ease-in-out -1s infinite}
@keyframes fbob{50%{translate:0 -12px}}

/* huge outlined type that slides sideways as you scroll */
.bigtext{overflow:hidden;margin-top:clamp(40px,8vw,90px);pointer-events:none;user-select:none}
.bigtext span{display:block;white-space:nowrap;font:800 clamp(64px,13vw,190px)/1 var(--display);letter-spacing:-.03em;color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--signal) 55%,transparent);transform:translateX(var(--bx,0px));will-change:transform;opacity:.7}

/* pinned story: the phone stays, the world changes around it */
.story{margin-top:clamp(10px,3vw,40px)}
.story-track{height:340vh;position:relative}
.story-pin{position:sticky;top:0;height:100vh;height:100svh;display:grid;align-items:center;overflow:hidden}
.story-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,5vw,70px);align-items:center;width:100%;max-width:1100px}
.story-steps{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:16px}
.story-steps li{display:flex;gap:16px;align-items:flex-start;padding:16px 18px;border-radius:18px;border:1px solid transparent;opacity:.62;transform:scale(.97);transform-origin:left;transition:opacity .5s,transform .5s,border-color .5s,background .5s}
.story-steps li.on{opacity:1;transform:none;border-color:var(--line);background:color-mix(in srgb,var(--card) 80%,transparent);box-shadow:0 0 40px -16px var(--glow)}
.story-steps h3{font-size:20px;margin-bottom:4px}
.clock{font:700 15px var(--mono);color:var(--signal);padding-top:3px;min-width:54px}
.story-prog{margin-top:18px;height:3px;border-radius:9px;background:var(--line);overflow:hidden;max-width:340px}
.story-prog i{display:block;height:100%;width:100%;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--signal),var(--ok))}
.story-stage{position:relative;display:grid;place-items:center;perspective:1200px;min-height:min(70vh,560px)}
.story-phone{position:relative;width:min(70%,300px);aspect-ratio:9/17;border-radius:36px;padding:10px;background:linear-gradient(160deg,color-mix(in srgb,var(--raise) 85%,#fff),var(--deep));border:1px solid var(--line);box-shadow:0 50px 100px -30px rgba(0,0,0,.65),0 0 80px -10px var(--glow);transform:rotateY(var(--sry,-10deg)) rotateX(var(--srx,4deg)) scale(var(--ss,1));transition:transform .2s linear;z-index:2}
.sp-in{position:relative;height:100%;border-radius:28px;overflow:hidden;background:radial-gradient(120% 80% at 50% 0%,color-mix(in srgb,var(--plum) 55%,var(--ink)),var(--ink))}
.screen{position:absolute;inset:0;padding:22px 16px;display:flex;flex-direction:column;align-items:center;gap:14px;opacity:0;transform:translateY(24px) scale(.96);filter:blur(6px);transition:opacity .55s,transform .55s,filter .55s}
.screen.on{opacity:1;transform:none;filter:none}
.sp-eyebrow{font:600 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center}
.sp-ok{margin-top:auto;width:100%;text-align:center;font:700 13px var(--display);padding:11px;border-radius:14px;background:var(--ok-soft);color:var(--ok);border:1px solid var(--ok)}
.sp-hours{display:flex;justify-content:space-between;width:100%;font:12px var(--mono);color:var(--muted)}.sp-hours b{color:var(--fg)}
.sp-code{font-size:11px;letter-spacing:.08em;color:var(--muted)}
#storyQr{width:70%;aspect-ratio:1;border-radius:14px;background:#fff;padding:7px;image-rendering:pixelated;box-shadow:0 0 30px -6px var(--glow)}
.sp-amt{font:800 40px var(--display);margin-top:6px}
/* the door swings open when the screen is shown */
.door{position:relative;width:62%;aspect-ratio:3/4;display:flex;border-radius:14px 14px 0 0;overflow:hidden;background:linear-gradient(180deg,var(--ink),var(--deep));perspective:600px;margin-top:6px;box-shadow:0 0 0 2px var(--signal)}
.door .glow{position:absolute;inset:0;background:radial-gradient(70% 90% at 50% 100%,color-mix(in srgb,var(--ok) 70%,#fff),transparent 70%);opacity:.9}
.door .leaf{position:relative;z-index:1;flex:1;background:linear-gradient(180deg,var(--deep),var(--raise));border:1px solid var(--line);transition:transform 1.1s cubic-bezier(.3,.8,.2,1) .35s}
.door .leaf.l{transform-origin:0 50%}.door .leaf.r{transform-origin:100% 50%}
.screen.s0:not(.on) .leaf.l{transform:none}.screen.s0.on .leaf.l{transform:rotateY(-78deg)}
.screen.s0.on .leaf.r{transform:rotateY(78deg)}
.tick{width:92px;height:92px;margin:8px 0}
.tick svg{width:100%;height:100%;fill:none;stroke:var(--ok);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.tick circle{stroke-dasharray:145;stroke-dashoffset:145}.tick path{stroke-dasharray:44;stroke-dashoffset:44}
.screen.s2.on .tick circle{animation:draw .8s ease .3s forwards}.screen.s2.on .tick path{animation:draw .5s ease 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.story-ring{position:absolute;border-radius:50%;border:1px dashed color-mix(in srgb,var(--signal) 45%,transparent);animation:rot 28s linear infinite;pointer-events:none}
.story-ring.r1{width:min(96%,480px);aspect-ratio:1}.story-ring.r2{width:min(74%,380px);aspect-ratio:1;animation-direction:reverse;animation-duration:40s}

/* products: tilt toward the pointer */
.prod{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transform-style:preserve-3d;transition:transform .15s ease-out,border-color .25s,box-shadow .25s}
.prod:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px)}

@media(max-width:860px){
  .story-grid{grid-template-columns:1fr;gap:10px}
  .story-pin{align-items:start;padding-top:70px}
  .story-stage{order:-1;min-height:300px}
  .story-phone{width:min(46%,200px)}
  .story-steps{gap:8px;margin-top:12px}.story-steps li{padding:10px 12px}.story-steps li:not(.on) p{display:none}
  .story-steps h3{font-size:17px}
  .frag.f1,.frag.f4{display:none}
}
@media(prefers-reduced-motion:reduce){
  .js .hero-copy>*,.js .stage,.frag,.story-ring,.screen.s2.on .tick circle,.screen.s2.on .tick path{animation:none!important}
  .tick circle,.tick path{stroke-dashoffset:0}
  .cursor-light,  .story-track{height:auto}.story-pin{position:static;height:auto;padding:30px 0}
  .story-steps li{opacity:1;transform:none}.screen{transition:none}
  .bigtext span{transform:none}
}

/* WebGL liquid background (js/liquid.js). The CSS aurora is only the fallback. */

/* ===== Intro: the logo, then tap to enter. The liquid background shows through the whole time. ===== */
.intro{display:none;position:fixed;inset:0;z-index:100;overflow:hidden}
html.intro-lock .intro,.intro.go{display:block}
html.intro-lock{overflow:hidden}
/* the page waits behind the intro: nothing of it shows, and its entrance animations start only when it opens */
html.intro-lock main,html.intro-lock .topbar,html.intro-lock .progress{opacity:0}
.topbar{transition:opacity .9s ease .2s}
html.intro-lock .hero-copy>*,html.intro-lock .stage{animation-play-state:paused!important}
/* a soft dark edge so the logo stays legible; it opens up like an iris when you tap */
.intro .veil{position:absolute;inset:0;background:radial-gradient(90% 75% at 50% 48%,transparent 30%,color-mix(in srgb,var(--ink) 62%,transparent) 100%);transition:transform 1.5s cubic-bezier(.6,0,.2,1) .15s,opacity 1.2s ease .3s}
.intro .spill{position:absolute;left:50%;top:50%;width:0;height:0;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,#fff,color-mix(in srgb,var(--signal) 65%,transparent) 45%,transparent);opacity:0;pointer-events:none}
.intro-center{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;text-align:center;gap:clamp(14px,3vh,28px);padding:24px;z-index:2;transition:opacity .9s ease .1s,transform 1.2s cubic-bezier(.5,0,.2,1),filter 1s ease}
.intro-logo{margin:0;width:min(88vw,900px);line-height:0;font-size:0;color:#fff;filter:drop-shadow(0 0 34px color-mix(in srgb,var(--signal) 55%,transparent)) drop-shadow(0 6px 30px rgba(0,0,0,.35))}
.intro-logo .logo-big{width:100%;height:auto;display:block;overflow:visible}
.intro-logo .in{color:var(--signal)}
:root[data-mode="light"] .intro-logo{color:#2B1B2D;filter:drop-shadow(0 0 30px color-mix(in srgb,var(--signal) 40%,transparent))}
:root[data-mode="light"] .intro-logo .in{color:var(--primary)}
.intro-tag{font:600 12px var(--mono);letter-spacing:.34em;text-transform:uppercase;color:var(--muted);margin-top:-6px}
.tapbtn{position:relative;margin-top:clamp(4px,2vh,18px);display:grid;justify-items:center;gap:20px;background:none;border:0;color:var(--fg);cursor:pointer;padding:10px 16px}
.tapbtn .tapdot{position:relative;width:84px;height:84px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--signal) 55%,var(--primary));box-shadow:0 0 0 1px color-mix(in srgb,var(--signal) 60%,transparent),0 0 50px 6px var(--glow);transition:transform .2s}
.tapbtn:hover .tapdot{transform:scale(1.08)}
.tapbtn:active .tapdot{transform:scale(.94)}
.tapbtn .rings{position:absolute;left:50%;top:10px;width:84px;height:84px;margin-left:-42px;pointer-events:none}
.tapbtn .rings i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--signal);opacity:0;animation:tapring 2.8s ease-out infinite}
.tapbtn .rings i:nth-child(2){animation-delay:.9s}.tapbtn .rings i:nth-child(3){animation-delay:1.8s}
@keyframes tapring{0%{transform:scale(1);opacity:.7}100%{transform:scale(3.4);opacity:0}}
/* "TAP TO ENTER" is drawn in the logo's own lettering */
.tapbtn .lbl{display:block;width:clamp(210px,34vw,300px);color:var(--fg);line-height:0}
.tapbtn .lbl .lw{width:100%;height:auto;display:block;overflow:visible}
.intro-skip{position:absolute;right:max(18px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));z-index:3;background:none;border:1px solid var(--line);color:var(--muted);border-radius:99px;padding:8px 16px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:color .2s,border-color .2s}
.intro-skip:hover{color:var(--fg);border-color:var(--signal)}

/* opening: the logo flies through you, the edge opens like an iris, light spills, the page pushes in */
.intro.go .intro-center{opacity:0;transform:scale(2.4);filter:blur(14px);pointer-events:none}
.intro.go .intro-skip{opacity:0;pointer-events:none}
.intro.go .veil{transform:scale(2.6);opacity:0}
.intro.go .spill{animation:spill 1.4s ease-out .25s both}
@keyframes spill{0%{width:0;height:0;opacity:0}20%{opacity:.95}100%{width:230vmax;height:230vmax;opacity:0}}
.intro.out{opacity:0;transition:opacity .5s;pointer-events:none}
body.entered .photo-hero{animation:push 1.7s cubic-bezier(.2,.7,.2,1) both}
@keyframes push{from{transform:scale(1.12);filter:blur(7px)}}

/* film grain, very light, over the whole home page */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-size:160px 160px;animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:50px -70px}60%{background-position:-80px -30px}80%{background-position:60px 60px}100%{background-position:0 0}}
:root[data-mode="light"] .grain{opacity:.1}
@media(prefers-reduced-motion:reduce){html:not(.intro-lock) .intro{display:none!important}.grain{animation:none}.tapbtn .rings i{animation:none}body.entered .photo-hero{animation:none}}

/* keyboard focus on the Tap button: a glow around the round button, not a rectangle */
.tapbtn:focus{outline:none}
.tapbtn:focus-visible .tapdot{box-shadow:0 0 0 4px color-mix(in srgb,var(--signal) 55%,transparent),0 0 60px 8px var(--glow);transform:scale(1.08)}
.intro-skip:focus-visible{outline:none;border-color:var(--signal);color:var(--fg);box-shadow:0 0 0 3px color-mix(in srgb,var(--signal) 40%,transparent)}


/* small phones: the floating chips and satellites crowd the mockup and fall off the edge */
@media(max-width:600px){.frag,.sat{display:none}}

/* ===== Organiser-first homepage ===== */
.hero2 h1 .hl{background:linear-gradient(100deg,var(--signal),var(--accent2) 45%,var(--signal));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;white-space:nowrap}
.pains .card h3{margin-top:6px}
.pains .card .eyebrow{color:var(--bad,#e5484d);letter-spacing:.12em}
.grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.sp-cap{width:82%;margin:6px auto 0}
.screen.s0 .sp-amt{margin-top:18px}
.sitefoot{padding:32px 16px 60px;font-size:13px;display:grid;gap:14px}
.sitefoot nav{gap:18px}
.sitefoot nav a{color:var(--fg);font-weight:600;text-decoration:none}
.sitefoot nav a:hover{text-decoration:underline}
/* the organiser headline is two sentences: a smaller size keeps the buttons on the first screen */
@media(min-width:861px){.hero2 h1{font-size:clamp(40px,5vw,68px);line-height:1.02}}
.grid.three.pains{grid-template-columns:repeat(3,1fr)}
@media(max-width:960px){.grid.three.pains{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.grid.three.pains{grid-template-columns:1fr}}

/* ===== The rave behind the page: sweeping beams and a pulse on the beat ===== */
.rave{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;--beat:.968s}
.rave .stagebeam{position:absolute;top:-14vh;left:var(--x);width:40vmax;height:130vh;margin-left:-20vmax;transform-origin:50% 0;clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 85%,transparent),transparent 72%);filter:blur(9px);opacity:.3;mix-blend-mode:screen;animation:sweep var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
.rave .b1{--x:6%;--c:#a855f7;--a:24deg;--d:7.5s;--dl:-1s}
.rave .b2{--x:30%;--c:#ff4fd8;--a:30deg;--d:9s;--dl:-4s}
.rave .b3{--x:52%;--c:#5b8cff;--a:22deg;--d:6.5s;--dl:-2s}
.rave .b4{--x:75%;--c:#2dd4bf;--a:28deg;--d:8.5s;--dl:-6s}
.rave .b5{--x:96%;--c:#ffb347;--a:26deg;--d:7s;--dl:-3s}
@keyframes sweep{from{transform:rotate(calc(var(--a)*-1))}to{transform:rotate(var(--a))}}
:root[data-mode="light"] .rave .stagebeam{mix-blend-mode:multiply;opacity:.16}
/* a soft glow that breathes about once a second: gentle on purpose, never a strobe */
.rave .pulse{position:absolute;inset:auto 0 0 0;height:60vh;background:radial-gradient(70% 90% at 50% 100%,color-mix(in srgb,var(--signal) 55%,transparent),transparent 70%);opacity:0;animation:beat var(--beat) ease-out infinite}
@keyframes beat{0%{opacity:.34}100%{opacity:.04}}
.rave.cheer .stagebeam{opacity:.55;animation-duration:2.4s}
.rave.cheer .pulse{animation-duration:.48s}
.sparks{position:fixed;inset:0;width:100%;height:100%;z-index:101;pointer-events:none}
@media(max-width:700px){.rave .b4,.rave .b5{display:none}}
@media(prefers-reduced-motion:reduce){.rave .stagebeam,.rave .pulse{animation:none!important}.rave .pulse{opacity:.1}.sparks{display:none}}

/* ===== Live photos: the lights sit behind, the dark hands and crowd are a second layer that sways in front ===== */
.lp{position:relative;overflow:hidden;isolation:isolate;background:#120912;color:#fff}
.lp-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.lp.lp-on .lp-stage,.lp.lp-on .lp-beam,.lp.lp-on .lp-pulse{display:none}
.lp-stage{position:absolute;inset:-3%;animation:lpdrift 26s ease-in-out infinite alternate}
.lp-stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 40%);display:block;-webkit-user-drag:none;user-select:none}
.lp-stage .bg{animation:lpbeatscale .968s ease-in-out infinite alternate}
.lp-stage .fg{transform-origin:50% 100%;animation:lpwave 3.8s ease-in-out infinite alternate}
@keyframes lpdrift{from{transform:scale(1)}to{transform:scale(1.05) translateY(-1%)}}
@keyframes lpbeatscale{from{transform:scale(1)}to{transform:scale(1.014)}}
@keyframes lpwave{0%{transform:rotate(-1.4deg) translate3d(-.5%,0,0)}50%{transform:rotate(.3deg) translate3d(0,-.7%,0)}100%{transform:rotate(1.5deg) translate3d(.5%,.2%,0)}}
.lp-beam{position:absolute;top:-14%;left:var(--x);width:46%;height:130%;margin-left:-23%;transform-origin:50% 0;clip-path:polygon(48% 0,52% 0,100% 100%,0 100%);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 80%,transparent),transparent 75%);filter:blur(8px);opacity:.34;mix-blend-mode:screen;pointer-events:none;animation:sweep var(--d) ease-in-out infinite alternate;animation-delay:var(--dl)}
.lp-beam.b1{--x:18%;--c:#a855f7;--a:22deg;--d:6.8s;--dl:-1s}
.lp-beam.b2{--x:52%;--c:#5b8cff;--a:26deg;--d:8.4s;--dl:-4s}
.lp-beam.b3{--x:86%;--c:#ff4fd8;--a:20deg;--d:7.4s;--dl:-2s}
.lp-pulse{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 70% at 50% 35%,color-mix(in srgb,#b5a0cc 55%,transparent),transparent 70%);mix-blend-mode:screen;opacity:0;animation:lpbeat 1.936s ease-in-out infinite}
@keyframes lpbeat{0%,100%{opacity:.04}12%{opacity:.3}40%{opacity:.08}}
.lp::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,.7),rgba(0,0,0,.12) 58%,transparent),linear-gradient(0deg,rgba(0,0,0,.68),transparent 48%)}
.lp.tall::after{background:linear-gradient(0deg,rgba(0,0,0,.45),transparent 40%)}
.lp-copy{position:absolute;left:0;right:0;bottom:0;z-index:2;padding-block:clamp(26px,6vh,72px);display:grid;gap:clamp(14px,2.6vh,26px)}
.lp-copy h1,.lp-copy h2{margin:0;color:#fff;text-wrap:balance;text-shadow:0 2px 30px rgba(13,7,15,.55)}
.lp-copy h1{font-size:clamp(40px,7.4vw,104px);line-height:.96}
.lp-copy h1.steps{display:block;font-size:clamp(30px,5.6vw,84px);line-height:1.04}
.lp-copy h1.steps .ln{display:block;white-space:nowrap}
.lp-copy .hl{background:linear-gradient(90deg,#e0d4f5,#9db8ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
.lp-copy .lede{color:#e4d9ee;font-size:clamp(17px,2.2vw,22px);margin:0}
.lp-copy .btn.ghost{color:#fff;border-color:rgba(255,255,255,.42);background:rgba(18,9,18,.36);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.photo-hero{height:clamp(540px,calc(100svh - 64px),920px)}
.band{height:clamp(380px,66svh,720px)}
.words{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:clamp(12px,4vw,56px)}
.words li{display:grid;gap:6px}
.words b{font:800 clamp(26px,5vw,72px)/.92 var(--display);white-space:nowrap;text-shadow:0 2px 30px rgba(13,7,15,.5)}
.words li:last-child b{background:linear-gradient(90deg,#e0d4f5,#9db8ff);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none}
.words span{font:600 clamp(10px,1.4vw,15px) var(--mono);letter-spacing:.2em;text-transform:uppercase;color:#e4d9ee}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(20px,5vw,64px);align-items:center}
.lp.tall{aspect-ratio:3/4;border-radius:30px;border:1px solid var(--line)}
.lines{list-style:none;margin:0;padding:0;display:grid;gap:clamp(14px,3vw,30px)}
.lines li{font:800 clamp(26px,4.4vw,52px)/1.04 var(--display);padding-bottom:clamp(14px,3vw,30px);border-bottom:1px solid var(--line);text-wrap:balance}
.lines li:last-child{border-bottom:0;padding-bottom:0}
.lines em{font-style:normal;color:var(--signal)}
.portals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.portal{display:flex;flex-direction:column;gap:4px;padding:18px 20px;border:1px solid var(--line);border-radius:22px;background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);text-decoration:none;color:inherit}
.portal h3{font-size:20px;margin:0}.portal .more{padding-top:10px}
.portal:hover{transform:translateY(-4px);box-shadow:0 24px 60px -26px var(--glow)}
/* organisers: short tiles, chips, one honest note */
.six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mini{border:1px solid var(--line);border-radius:20px;padding:18px 20px;background:var(--card);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mini h3{font-size:18px;margin:0 0 4px}.mini p{margin:0;font-size:14.5px}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.chips li{border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-weight:600;font-size:14px;background:var(--card-on)}
.chips li.next{border-style:dashed;opacity:.75}
.fine{font-size:13px;color:var(--muted);max-width:72ch;margin:12px 0 0}
@media(max-width:760px){.split,.six,.portals{grid-template-columns:1fr}.lp.tall{aspect-ratio:4/5}.photo-hero{height:clamp(520px,calc(100svh - 64px),760px)}.lp-stage img{object-position:var(--pos-m,var(--pos,50% 40%))}.sec{padding-top:36px}}
@media(max-width:560px){.words.long b{font-size:5.5vw}}
.words.kinds b{font-size:clamp(22px,3vw,46px)}.words.kinds span{white-space:nowrap}
@media(max-width:760px){.words.kinds{grid-template-columns:1fr;gap:14px}.words.kinds b{font-size:clamp(22px,6.2vw,34px)}.words.kinds li{grid-template-columns:auto auto;justify-content:start;align-items:baseline;gap:10px}}
@media(prefers-reduced-motion:reduce){.lp-stage,.lp-stage .bg,.lp-stage .fg,.lp-beam,.lp-pulse{animation:none!important}.lp-pulse{opacity:.06}}

/* photos show as shot: no coloured beams or glow laid over them */
.lp-beam,.lp-pulse{display:none!important}