:root{--lime:#A3F7BF;--white:#ffffff;--silver:#B5B5FF;--panel:rgba(9,13,13,.82);--line:rgba(181,181,255,.28)}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:#030707;color:var(--white);font-family:Inter,Arial,sans-serif;overflow:hidden}
body{min-height:100vh;background-image:linear-gradient(90deg,rgba(1,5,5,.02),rgba(1,4,4,.12) 58%,rgba(1,5,5,.72) 100%),url('assets/cinematic-bg.png');background-size:cover;background-position:center}
.ambient{position:fixed;inset:-12%;pointer-events:none;background:radial-gradient(circle at 28% 26%,rgba(181,181,255,.18),transparent 24%),radial-gradient(circle at 48% 52%,rgba(181,231,255,.1),transparent 32%),linear-gradient(116deg,transparent 28%,rgba(181,181,255,.08) 46%,transparent 61%);mix-blend-mode:screen;animation:energySweep 12s ease-in-out infinite alternate}
.brandbar{height:12vh;min-height:92px;display:grid;grid-template-columns:auto 50px auto 1fr;align-items:center;gap:22px;padding:0 4vw;border-bottom:1px solid var(--line);background:linear-gradient(90deg,rgba(3,8,8,.94),rgba(8,14,14,.78));backdrop-filter:blur(18px);box-shadow:0 18px 42px rgba(0,0,0,.3)}
.double-up,.aero-fit{font-weight:900;letter-spacing:.13em;font-size:clamp(22px,2.1vw,42px)}
.aero-fit{color:var(--lime)}
.collab-mark{font-size:34px;color:var(--silver);text-align:center;font-weight:200}
.collab-copy{justify-self:end;padding:10px 16px;border:1px solid rgba(181,181,255,.45);border-radius:999px;color:var(--lime);font-size:clamp(12px,.9vw,18px);font-weight:700;letter-spacing:.17em}
.display-shell{height:78vh;display:grid;grid-template-columns:minmax(0,1fr) minmax(330px,29vw);gap:2.2vw;padding:3.1vh 3vw 2.4vh 4vw}
.product-stage{position:relative;border:1px solid rgba(255,255,255,.18);border-radius:34px;overflow:hidden;padding:4vh 4vw;background:linear-gradient(118deg,rgba(3,8,8,.82),rgba(5,12,12,.24) 56%,rgba(8,14,14,.52));box-shadow:0 30px 90px rgba(0,0,0,.42),inset 0 1px rgba(255,255,255,.1);backdrop-filter:blur(4px)}
.product-stage:after{content:"";position:absolute;inset:0;border-radius:34px;box-shadow:inset 0 0 80px rgba(181,181,255,.04);pointer-events:none}
.eyebrow{font-size:clamp(13px,1vw,20px);font-weight:700;letter-spacing:.28em;color:var(--silver)}
.product-copy{position:absolute;left:4vw;bottom:14vh;width:min(62%,760px);transition:opacity .45s ease,transform .45s ease}
.product-copy.switching{opacity:0;transform:translateY(12px)}
.brand{margin:0 0 1.2vh;color:var(--lime);font-weight:800;letter-spacing:.23em;font-size:clamp(15px,1.25vw,24px)}
h1{margin:0;max-width:850px;font-size:clamp(42px,5vw,96px);line-height:.95;letter-spacing:-.045em;text-wrap:balance;text-shadow:0 6px 26px rgba(0,0,0,.55)}
.details{display:flex;align-items:center;gap:20px;margin-top:2.4vh;font-size:clamp(16px,1.35vw,26px);color:#d7dddd}
.size{padding:8px 14px;border-radius:999px;background:rgba(181,181,255,.12);border:1px solid rgba(181,181,255,.4);color:var(--lime);font-weight:800;letter-spacing:.08em}
.price-row{display:flex;align-items:center;gap:18px;margin-top:2.7vh}.retail{font-size:clamp(22px,2vw,38px);color:#9ba5a4;text-decoration:line-through;text-decoration-thickness:2px}.our-price{font-size:clamp(44px,4vw,76px);color:var(--lime);line-height:1}.price-label{max-width:100px;font-size:12px;line-height:1.25;letter-spacing:.14em;color:#cbd3d2}
.availability{margin-top:1.5vh;font-size:clamp(14px,1vw,20px);color:#c7cfce}
.orbit{position:absolute;right:3vw;top:4vh;width:15vw;min-width:190px}.product-number{text-align:right;font:700 clamp(18px,1.4vw,28px)/1 monospace;letter-spacing:.12em}.orbit-line{height:1px;margin-top:13px;background:linear-gradient(90deg,transparent,var(--lime));box-shadow:0 0 18px var(--lime)}
.next-up{position:absolute;right:3vw;bottom:4vh;max-width:290px;text-align:right}.next-up span{display:block;color:var(--lime);font-size:12px;letter-spacing:.2em;margin-bottom:8px}.next-up strong{font-size:clamp(15px,1.1vw,22px);line-height:1.12}
.shop-panel{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3vh 2.3vw;border:1px solid rgba(255,255,255,.16);border-radius:34px;background:linear-gradient(150deg,rgba(12,18,18,.94),rgba(6,10,10,.86));box-shadow:0 30px 90px rgba(0,0,0,.52),inset 0 1px rgba(255,255,255,.08);backdrop-filter:blur(20px);text-align:center}
.panel-kicker{margin:0 0 1vh;color:var(--silver);font-size:clamp(11px,.8vw,15px);letter-spacing:.19em;font-weight:700}.shop-panel h2{margin:0 0 2vh;font-size:clamp(38px,3.3vw,65px);line-height:.84;letter-spacing:-.045em}.shop-panel h2 em{font-style:normal;color:var(--lime)}
.qr-frame{width:min(15vw,250px);aspect-ratio:1;background:#fff;border-radius:24px;padding:12px;box-shadow:0 0 0 7px rgba(181,181,255,.09),0 0 44px rgba(181,181,255,.16)}.qr-frame img{display:block;width:100%;height:100%;object-fit:contain}.scan{font-weight:900;letter-spacing:.22em;margin:1.7vh 0 1vh;color:var(--lime)}
.offer{display:grid;grid-template-columns:auto auto;align-items:end;gap:0 10px;padding:1.4vh 1.2vw;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.offer strong{font-size:clamp(25px,2.1vw,42px);color:var(--lime)}.offer span{font-size:clamp(13px,1vw,19px);font-weight:800}.offer small{grid-column:1/-1;margin-top:4px;letter-spacing:.14em;color:#cbd3d2}.store-url{margin-top:1.7vh;font-size:clamp(15px,1.1vw,21px);font-weight:900;letter-spacing:.12em}.purpose{margin:.8vh 0 0;font-size:12px;letter-spacing:.14em;color:#aeb8b7}.purpose span{letter-spacing:.03em;color:#788382}
footer{height:10vh;min-height:70px;display:flex;align-items:center;gap:16px;padding:0 4vw;border-top:1px solid var(--line);background:rgba(2,7,7,.84);font-weight:900;letter-spacing:.12em;font-size:clamp(14px,1vw,20px)}footer em{font-style:normal;color:var(--lime)}.cycle{margin-left:auto;font-size:12px;color:#aeb8b7}.cycle i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 14px var(--lime);margin-right:8px;animation:pulse 2s infinite}@keyframes pulse{50%{opacity:.35}}@keyframes energySweep{0%{transform:translate3d(-2%,1%,0) scale(1)}100%{transform:translate3d(3%,-1%,0) scale(1.04)}}
@media(max-width:800px){html,body{overflow:auto}.brandbar{height:auto;min-height:0;padding:22px;grid-template-columns:1fr auto 1fr}.collab-copy{grid-column:1/-1;justify-self:center}.display-shell{height:auto;min-height:100vh;grid-template-columns:1fr;padding:18px}.product-stage{min-height:720px;padding:34px}.product-copy{left:34px;right:34px;width:auto;bottom:140px}.orbit{right:28px}.shop-panel{padding:36px 24px}.qr-frame{width:220px}footer{padding:24px;height:auto}.cycle{display:none}}
@media(prefers-reduced-motion:reduce){.cycle i,.ambient{animation:none}.product-copy{transition:none}}

/* Regional artwork stays behind text, with an opaque, stationary QR surface. */
.brandbar,.product-stage,.shop-panel,footer{isolation:isolate}
.brandbar,footer{position:relative;overflow:hidden}
.brandbar{background:linear-gradient(90deg,rgba(3,8,8,.9),rgba(8,14,14,.55));backdrop-filter:blur(3px)}
.brandbar>.double-up,.brandbar>.aero-fit,.brandbar>.collab-mark,.brandbar>.collab-copy{position:relative;z-index:1;text-shadow:0 2px 12px #000}
.header-orbits{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.header-orbits i{position:absolute;width:64%;height:180%;left:20%;top:-120%;border:2px solid rgba(181,181,255,.58);border-radius:50%;transform:rotate(-8deg);box-shadow:0 0 18px rgba(181,181,255,.18);animation:headerDrift 24s ease-in-out infinite alternate}
.header-orbits i+ i{left:44%;top:-35%;width:50%;height:170%;border-color:rgba(193,222,243,.35);animation-direction:alternate-reverse}
.product-stage{background:linear-gradient(90deg,rgba(3,8,8,.82),rgba(5,12,12,.38) 64%,rgba(8,14,14,.12));backdrop-filter:none}
.stage-art{position:absolute;inset:0 0 0 66%;z-index:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(3,8,8,.8),transparent 45%),url('assets/cinematic-bg.png');background-size:100% 100%,auto 100%;background-position:center,left center;opacity:.76;mask-image:linear-gradient(180deg,transparent 5%,#000 25%,#000 78%,transparent)}
.stage-beam{position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(112deg,transparent 56%,rgba(181,181,255,.1) 66%,rgba(213,243,173,.21) 70%,transparent 79%);animation:beamDrift 18s ease-in-out infinite alternate}
.stage-particles{position:absolute;inset:13% 3% 18% 70%;pointer-events:none;z-index:0}
.stage-particles i{position:absolute;left:20%;top:75%;width:3px;height:3px;border-radius:50%;background:#d9ffc0;box-shadow:0 0 10px 2px rgba(181,181,255,.48);animation:particleRise 16s ease-in-out infinite}
.stage-particles i:nth-child(2){left:66%;top:45%;animation-delay:-4s}
.stage-particles i:nth-child(3){left:85%;top:86%;animation-delay:-9s}
.stage-particles i:nth-child(4){left:36%;top:35%;animation-delay:-12s}
.stage-particles i:nth-child(5){left:9%;top:60%;animation-delay:-7s}
.stage-particles i:nth-child(6){left:52%;top:88%;animation-delay:-2s}
.eyebrow,.product-copy,.orbit,.next-up{z-index:2}
.eyebrow{position:relative;max-width:65%}
.product-copy{text-shadow:0 2px 12px #000}
.product-copy:before{content:"";position:absolute;inset:-25px -30px;z-index:-1;border-radius:30px;background:radial-gradient(ellipse at 40% 55%,rgba(3,8,8,.76),rgba(3,8,8,.48) 65%,transparent 75%);pointer-events:none}
.shop-panel{overflow:hidden;background:linear-gradient(150deg,rgba(12,18,18,.78),rgba(6,10,10,.85));backdrop-filter:blur(3px)}
.shop-panel> :not(.panel-orbits){position:relative;z-index:1}
.panel-orbits{position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(ellipse at 100% 6%,rgba(181,181,255,.2),transparent 40%),radial-gradient(ellipse at 0 88%,rgba(146,207,233,.14),transparent 38%)}
.panel-orbits i{position:absolute;width:150%;height:65%;left:-80%;top:-28%;border:1px solid rgba(181,181,255,.52);border-radius:50%;transform:rotate(-28deg);box-shadow:0 0 20px rgba(181,181,255,.07)}
.panel-orbits i+i{left:48%;top:65%;border-color:rgba(188,225,242,.38);transform:rotate(24deg)}
.qr-frame{isolation:isolate;flex-shrink:0}
.scanner-ring{position:absolute;inset:-14px;border-radius:50%;border:2px solid rgba(181,181,255,.18);border-top-color:rgba(181,181,255,.85);border-bottom-color:rgba(192,224,244,.65);z-index:-1;pointer-events:none;animation:scannerOrbit 28s linear infinite;box-shadow:0 0 18px rgba(181,181,255,.12)}
.qr-frame img{position:relative;z-index:1;background:white;border-radius:4px}
.scan{margin-top:2.2vh}
footer{background:rgba(2,7,7,.67)}
footer>span,footer>em{position:relative;z-index:1;text-shadow:0 2px 8px #000}
.footer-atmosphere{position:absolute;inset:-40% -10%;pointer-events:none;background-image:linear-gradient(90deg,rgba(2,7,7,.7),rgba(2,7,7,.24),rgba(2,7,7,.76)),url('assets/cinematic-bg.png');background-size:100% 100%,100% auto;background-position:center,center 83%;opacity:.48;animation:footerDrift 32s ease-in-out infinite alternate}
.footer-atmosphere:after{content:"";position:absolute;top:35%;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(181,181,255,.65),transparent);box-shadow:0 0 20px 4px rgba(181,181,255,.13)}
@keyframes headerDrift{to{transform:translateX(4%) rotate(-3deg)}}
@keyframes beamDrift{to{transform:translateX(2%);opacity:.6}}
@keyframes particleRise{0%,100%{transform:translateY(0);opacity:.2}50%{transform:translateY(-50px);opacity:.85}}
@keyframes scannerOrbit{to{transform:rotate(360deg)}}
@keyframes footerDrift{to{transform:translateX(3%);opacity:.62}}
@media(max-width:800px){.brandbar{gap:12px}.double-up,.aero-fit{font-size:clamp(16px,3.8vw,26px);letter-spacing:.06em}.eyebrow{max-width:60%;font-size:12px}.orbit{min-width:0;width:24%}.stage-art{left:50%;opacity:.35}.product-copy{width:auto}.scanner-ring{inset:-14px}.collab-copy{font-size:12px;letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){.header-orbits i,.stage-beam,.stage-particles i,.scanner-ring,.footer-atmosphere{animation:none}.stage-particles i{opacity:.45}}

/* Cutout garments float in the saucer's light without a photo card. */
.product-copy{left:3vw;bottom:17%;width:43%}
h1{font-size:clamp(30px,3.2vw,64px);line-height:1.04}
.details{flex-wrap:wrap;gap:12px;font-size:clamp(16px,1.2vw,24px)}
.price-row{flex-wrap:wrap;gap:12px}
.price-label{font-size:11px}
.availability{font-size:clamp(13px,.9vw,18px);line-height:1.4;max-width:30ch}
.eyebrow{max-width:70%;font-size:clamp(11px,.85vw,17px);letter-spacing:.2em}
.orbit{width:18%;min-width:0}
.product-visual{position:absolute;z-index:1;right:1%;top:10%;bottom:12%;width:49%;margin:0;isolation:isolate;pointer-events:none}
.product-visual .tractor-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:.82;mask-image:linear-gradient(to bottom,#000 0%,#000 76%,transparent 100%)}
.product-float{position:absolute;left:14%;right:14%;top:27%;bottom:8%;transition:opacity .45s ease,transform .45s ease}
.product-float img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 9px rgba(209,255,148,.42)) drop-shadow(0 18px 22px rgba(0,0,0,.6));animation:garmentHover 6s ease-in-out infinite}
.product-float.switching{opacity:0;transform:translateY(-18px)}
@keyframes garmentHover{0%,100%{transform:translateY(5px) rotate(-1deg)}50%{transform:translateY(-8px) rotate(1deg)}}
.retail[hidden]{display:none}
@media(max-width:800px){
  .product-stage{display:flex;flex-direction:column;gap:24px;min-height:0;padding:28px 24px}
  .eyebrow{max-width:70%}
  .orbit{top:28px;right:24px}
  .product-visual{position:relative;inset:auto;width:100%;height:460px;flex:none;margin-top:8px}
  .product-copy{position:relative;inset:auto;width:100%}
  h1{font-size:clamp(32px,7vw,52px);max-width:18ch}
  .next-up{position:relative;inset:auto;align-self:flex-end}
}
@media(prefers-reduced-motion:reduce){.product-float{transition:none}.product-float img{animation:none}}

/* Opening scene and one soft beam pulse per scene change. */
.opening-scene{position:fixed;inset:0;z-index:20;background:#020605;overflow:hidden;opacity:1;visibility:visible;transition:opacity .6s ease,visibility .6s}
.opening-scene.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.opening-art{width:100%;height:100%;object-fit:cover;display:block;animation:openingApproach 10s ease-out both}
.opening-shop{position:absolute;right:3vw;bottom:9vh;display:flex;flex-direction:column;align-items:center;gap:10px;padding:14px;border:1px solid rgba(181,181,255,.5);border-radius:18px;background:rgba(3,9,7,.93);color:var(--lime);text-decoration:none;box-shadow:0 0 36px rgba(181,181,255,.16)}
.opening-shop img{width:clamp(135px,10vw,200px);aspect-ratio:1;display:block;background:#fff;border:8px solid #fff;border-radius:8px}
.opening-shop span{font-size:12px;font-weight:800;letter-spacing:.09em}
.scene-flash{position:fixed;inset:0;z-index:30;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 67% 15%,rgba(245,255,221,.85),rgba(181,181,255,.3) 28%,transparent 72%)}
.scene-flash.active{animation:abductionPulse 1s ease-in-out both}
.product-float.abducting{opacity:0;transform:translateY(-90px) scale(.65);transition:opacity .5s ease,transform .6s ease-in}
.product-float.arriving{animation:beamArrival .8s ease-out both}
@keyframes abductionPulse{0%,100%{opacity:0}45%{opacity:.68}}
@keyframes beamArrival{from{opacity:0;transform:translateY(-90px) scale(.65)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes openingApproach{from{transform:scale(1.025)}to{transform:scale(1)}}
@media(max-width:800px){.opening-art{object-fit:contain}.opening-shop{right:50%;transform:translateX(50%);bottom:3vh;padding:10px}.opening-shop img{width:130px}}
@media(prefers-reduced-motion:reduce){.opening-art,.scene-flash.active,.product-float.arriving{animation:none}.product-float.abducting{transform:none;transition:opacity .3s}.opening-scene{transition:opacity .3s}}

/* Readable across the gym; the opening changes through a single sustained beam sweep. */
.opening-shop{right:2.5vw;bottom:10vh;padding:20px;gap:14px;border:2px solid var(--lime);background:#050b08;box-shadow:0 0 65px rgba(181,181,255,.3)}
.opening-shop img{width:clamp(240px,21vw,420px);border:14px solid white;border-radius:8px}
.opening-shop span{font-size:clamp(16px,1.2vw,24px);letter-spacing:.08em}
.qr-frame{width:min(19vw,28vh,330px);padding:14px}
.scene-flash.cinematic{background:radial-gradient(ellipse at 76% 18%,#fff 0%,#f4ffd9 20%,rgba(211,255,118,.96) 48%,rgba(106,180,50,.9) 100%);transform-origin:76% 18%}
.scene-flash.cinematic.active{animation:fullBeamSweep 1.8s cubic-bezier(.3,0,.2,1) both}
.scene-abduction .opening-art{transform-origin:76% 18%;animation:sceneLift .9s ease-in both}
@keyframes sceneLift{0%{transform:scale(1);filter:brightness(1) blur(0)}100%{transform:scale(1.7) translateY(-9%);filter:brightness(1.7) blur(10px)}}
@keyframes fullBeamSweep{0%{opacity:0;clip-path:polygon(72% 0,80% 0,80% 100%,72% 100%)}35%{opacity:.8;clip-path:polygon(55% 0,95% 0,100% 100%,5% 100%)}48%,60%{opacity:1;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}100%{opacity:0;clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
@media(max-width:800px){.opening-shop{right:50%;bottom:3vh;padding:14px}.opening-shop img{width:clamp(180px,44vw,280px)}.opening-shop span{font-size:16px}.qr-frame{width:250px}}
@media(prefers-reduced-motion:reduce){.scene-abduction .opening-art{animation:none}.scene-flash.cinematic.active{animation:none;opacity:0}}

.retail-feature{position:absolute;left:37%;bottom:12%;width:33%;display:flex;flex-direction:column;gap:9px;padding:20px 24px;background:rgba(3,10,7,.92);border-left:4px solid var(--lime);box-shadow:0 16px 45px rgba(0,0,0,.4);border-radius:0 14px 14px 0}
.retail-kicker{font-size:clamp(12px,.9vw,18px);font-weight:800;letter-spacing:.2em;color:var(--lime)}
.retail-feature>strong{font-size:clamp(32px,3vw,60px);font-weight:800;line-height:1;letter-spacing:-.04em;color:#fff}
.retail-categories{font-size:clamp(12px,.95vw,18px);letter-spacing:.08em;font-weight:700}
.retail-curator{font-size:clamp(12px,.85vw,17px);color:#bdc9c2}
.product-brand{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin-bottom:2vh}
.product-brand strong{font-size:clamp(20px,1.7vw,34px);letter-spacing:.08em;line-height:1;color:var(--lime)}
.product-brand span{font-size:12px;font-weight:700;letter-spacing:.12em;color:var(--silver)}
.product-float{top:27%;bottom:5%}
@media(max-width:800px){.retail-feature{left:5%;top:3%;bottom:auto;width:90%;padding:14px 18px;gap:6px}.retail-feature>strong{font-size:32px}.retail-categories,.retail-curator{font-size:12px}}

/* Double Up store palette over the UFO layout. */
:root{--lime:#A3F7BF;--white:#fff;--silver:#B5B5FF;--line:rgba(181,181,255,.4)}
.brandbar{background:rgba(34,40,49,.95)}
.product-stage{background:linear-gradient(100deg,rgba(34,40,49,.94),rgba(34,40,49,.64) 62%,rgba(91,81,135,.25))}
.shop-panel{background:linear-gradient(155deg,rgba(181,181,255,.96),rgba(230,230,255,.97));color:#222831;border-color:#B5B5FF}
.shop-panel .panel-kicker,.shop-panel .scan,.shop-panel .store-url,.shop-panel .purpose,.shop-panel .purpose span,.shop-panel h2 em{color:#222831}
.shop-panel .offer{background:#A3F7BF;border:0;border-radius:16px;padding:16px}.shop-panel .offer strong,.shop-panel .offer small{color:#222831}
.qr-frame{box-shadow:0 0 0 7px rgba(181,181,255,.28),0 0 35px rgba(181,181,255,.24)}
.opening-shop{background:#B5B5FF;color:#222831;border-color:#A3F7BF}
.retail-feature{background:rgba(34,40,49,.96);border-left-color:#B5B5FF}.retail-kicker{color:#A3F7BF}
footer{background:rgba(34,40,49,.94)}
.scene-flash.cinematic{background:radial-gradient(ellipse at 76% 18%,#fff 0%,#ededff 20%,rgba(181,181,255,.96) 48%,rgba(163,247,191,.92) 100%)}
.tractor-art{filter:hue-rotate(35deg) saturate(.75)}