/* Slurx cosmos: deep-space backdrop, champagne metal for primary actions, platinum glass panels.
   Loaded after polish.css; owns the latest visual layer. Gold is reserved for the purchase path. */
:root{--void:#04060d;--indigo:#0d1030;--violet:#2a1d5c;--champagne:#e9d3a1;--platinum:#d7e1ee;--starlight:#f6f3ff;--bg:var(--void);--accent:var(--platinum);--ease-cosmos:cubic-bezier(.16,1,.3,1);--glass-cosmos:linear-gradient(150deg,#1b1d3f5c,#0a0c1d8c);--glass-line:#d7e1ee1c}
html{scroll-padding-top:130px;scrollbar-color:#3a3466 var(--void)}
@media(prefers-reduced-motion:no-preference){html:not(.no-effects){scroll-behavior:smooth}}
body{background:var(--void)!important;isolation:isolate}
::selection{background:#e9d3a14d;color:#fff}

/* Backdrop layers created by cosmos.js */
.cosmos-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none}
.cosmos-planet{position:absolute;left:0;right:0;top:var(--planet-top,640px);height:1000px;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask:linear-gradient(#000 0,#000 45%,transparent 100%);mask:linear-gradient(#000 0,#000 45%,transparent 100%)}
.cosmos-planet::before{content:'';position:absolute;left:50%;top:160px;width:max(2400px,240vw);aspect-ratio:1;border-radius:50%;translate:-50% var(--planet-shift,0px);background:radial-gradient(ellipse 60% 8% at 50% 0%,#2b2a5a 0%,#10122a 45%,transparent 100%),radial-gradient(circle at 50% 50%,#05070f 0 60%,#04060d 100%);box-shadow:0 -1px 0 #f3e2b866,0 -6px 24px #e9d3a130,0 -40px 120px #6b52d038,0 -120px 260px #2a1d5c55}
.cosmos-planet::after{content:'';position:absolute;left:50%;top:40px;width:min(1400px,120vw);height:260px;translate:-50% var(--planet-shift,0px);background:radial-gradient(ellipse 50% 50% at 50% 70%,#e9d3a11c,#6b52d014 45%,transparent 72%);filter:blur(6px)}
.cosmos-progress{position:fixed;top:0;left:0;height:2px;width:calc(var(--progress,0) * 100%);z-index:1000;pointer-events:none;background:linear-gradient(90deg,transparent,#a88a55 30%,#f3e2b8);box-shadow:0 0 12px #e9d3a180}
.cosmos-progress::after{content:'';position:absolute;right:-3px;top:-2px;width:6px;height:6px;border-radius:50%;background:#fff6df;box-shadow:0 0 10px 2px #f3e2b8}
.no-effects .cosmos-canvas{opacity:.55}
.no-effects .cosmos-progress::after{display:none}

/* Header: glass that firms up once the page moves */
.header{background:linear-gradient(125deg,#1c1d3e8c,#0d0f22a6);border-color:var(--glass-line);backdrop-filter:blur(18px) saturate(130%);-webkit-backdrop-filter:blur(18px) saturate(130%);transition:background .5s var(--ease-cosmos),border-color .5s,box-shadow .5s}
.header.is-scrolled{background:linear-gradient(125deg,#17183aeb,#0a0c1df0);border-color:#e9d3a129;box-shadow:inset 0 1px 0 #ffffff0d,0 18px 50px #0007}

/* Hero: one metallic headline with a single sheen pass on load */
.hero h1{background:linear-gradient(100deg,#f6f3ff 0%,#d7e1ee 34%,#f3e2b8 48%,#d7e1ee 62%,#f6f3ff 100%);background-size:260% 100%;background-position:0 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.hero h1>span{color:transparent;-webkit-text-fill-color:transparent;background:none}
@media(prefers-reduced-motion:no-preference){html:not(.no-effects) .hero h1{animation:cosmos-sheen 3.4s var(--ease-cosmos) .25s both}}
@keyframes cosmos-sheen{from{background-position:100% 0}to{background-position:0 0}}
.hero .intro{color:#b9c2d6}
.hero-showroom{background:radial-gradient(ellipse at 50% 18%,#4b3a9a1f,transparent 62%),var(--glass-cosmos);border-color:var(--glass-line);box-shadow:inset 0 1px 0 #ffffff0b,0 30px 90px #0006}
.hero-orbit{border-color:#d7e1ee10;box-shadow:0 0 0 40px #8f7fff04,0 0 120px #6b52d012 inset}
.hero-orbit::after{content:'';position:absolute;inset:-1px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 80%,#e9d3a1b3 89%,#fff6df 90%,transparent 91%);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));animation:cosmos-orbit 28s linear infinite}
@keyframes cosmos-orbit{to{rotate:360deg}}
.no-effects .hero-orbit::after,.tab-asleep .hero-orbit::after{animation-play-state:paused}

/* Headings and panels */
h2{background:linear-gradient(180deg,#f6f3ff 30%,#b9c4d9);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
dialog h2{-webkit-text-fill-color:currentColor;background:none;color:inherit}
.feature,.setup-grid article,.try-controls,.collection-tools,.faq details{background:var(--glass-cosmos);border-color:var(--glass-line)!important;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.faq details.is-expanded{background:linear-gradient(150deg,#26245066,#0d0f22a0);border-color:#d7e1ee2e!important}
.experience,.collection,.try-on,.setup,.pricing,.faq{border-top-color:#d7e1ee10}

/* Pointer spotlight (positions set by cosmos.js and studio.js) */
.setup-grid article,.try-controls{position:relative}
.feature::before,.price-card::before,.design-tile::before,.setup-grid article::before,.try-controls::before{content:'';display:block;position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;background:radial-gradient(260px circle at var(--mx,-400px) var(--my,-400px),#e9d3a112,transparent 70%)}
.no-effects .feature::before,.no-effects .price-card::before,.no-effects .design-tile::before,.no-effects .setup-grid article::before,.no-effects .try-controls::before{display:none}

/* Champagne metal: primary actions and the price card only */
.button.primary,.header .nav-buy{color:#fbf3df!important;background:linear-gradient(125deg,#2a2546eb,#14122af2) padding-box,linear-gradient(110deg,#7a6540,#f3e2b8,#a88a55,#7a6540,#fff1cf,#7a6540) border-box!important;background-size:100% 100%,250% 100%!important;background-position:0 0,0% 50%!important}
@media(hover:hover){.button.primary:hover,.header .nav-buy:hover{background-position:0 0,100% 50%!important;box-shadow:inset 0 1px 0 #fff4d826,0 10px 34px #e9d3a124!important}}
.button.primary:focus-visible,.header .nav-buy:focus-visible{outline-color:var(--champagne)}
.price-card{background:radial-gradient(ellipse at 100% 0%,#e9d3a114,transparent 55%),radial-gradient(ellipse at 0% 100%,#4b3a9a24,transparent 60%),linear-gradient(145deg,#16173ae0,#0a0c1df0);border-color:#e9d3a12e;box-shadow:inset 0 1px 0 #fff4d80f,0 30px 80px #0007,0 0 0 1px #00000040}
.price-title .tag{color:var(--champagne);border-color:#e9d3a140;background:#e9d3a10d}
.price{background:linear-gradient(100deg,#fff6df,#e9d3a1 55%,#d7e1ee);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.status-dot{background:var(--champagne);box-shadow:0 0 10px #e9d3a1aa}

/* Reveals: content arrives out of focus, like a star resolving through a lens */
.motion-ready{transition:opacity .9s var(--ease-cosmos) var(--reveal-delay,0ms),transform 1s var(--ease-cosmos) var(--reveal-delay,0ms),filter .9s var(--ease-cosmos) var(--reveal-delay,0ms)}
.motion-pending{filter:blur(10px)}
.motion-ready.in-view{filter:none}
.no-effects .motion-pending{filter:none}
@media(prefers-reduced-motion:reduce){.motion-pending{filter:none}}

/* Dialogs over deep space */
dialog::backdrop{background:#02030acc;backdrop-filter:blur(10px)}
dialog{background:linear-gradient(150deg,#1b1c3f,#0b0d20)!important;border-color:#d7e1ee24!important}

.footer{border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,#e9d3a133,transparent) 1}

/* Cross-page transitions between storefront, /login and /profile */
@view-transition{navigation:auto}
::view-transition-old(root){animation:cosmos-vt-out .32s ease both}
::view-transition-new(root){animation:cosmos-vt-in .5s var(--ease-cosmos) both}
@keyframes cosmos-vt-out{to{opacity:0;filter:blur(6px)}}
@keyframes cosmos-vt-in{from{opacity:0;filter:blur(8px);transform:scale(1.01)}}

@media(max-width:760px){.cosmos-planet::before{top:120px}.cosmos-planet::after{height:180px}}
@media(prefers-reduced-motion:reduce){.hero-orbit::after{animation:none}::view-transition-old(root),::view-transition-new(root){animation:none}}

/* ---- Micro-interactions (fx.js). Ideas from React Bits and Uiverse, rebuilt for Slurx. ---- */

/* Holo Card: rainbow foil and glitter that follow the pointer across the hero card */
.holo-foil{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;opacity:0;mix-blend-mode:color-dodge;transition:opacity .45s var(--ease-cosmos);background:radial-gradient(circle at var(--hx,50%) var(--hy,50%),#fff6df66 0,transparent 38%),repeating-linear-gradient(115deg,#ff7ac620 0%,#ffe78a26 7%,#7dffd620 14%,#7aa8ff26 21%,#c78bff20 28%,#ff7ac620 35%),radial-gradient(circle at 20% 30%,#fff 0 .6px,transparent 1.2px),radial-gradient(circle at 70% 60%,#fff 0 .5px,transparent 1px),radial-gradient(circle at 45% 85%,#fff 0 .6px,transparent 1.2px);background-size:100% 100%,240% 240%,23px 19px,31px 27px,17px 23px;background-position:center,var(--hx,50%) var(--hy,50%),0 0,0 0,0 0}
.holo-active .holo-foil{opacity:calc(.55 + var(--hd,0) * .9)}
.no-effects .holo-foil{display:none}

/* Star Border: a star with a short tail travels the outline of the primary actions */
@property --star-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
.button.primary,.header .nav-buy{position:relative;isolation:isolate}
.button.primary::before,.header .nav-buy::before{content:'';position:absolute;inset:-1px;border-radius:inherit;padding:1.5px;pointer-events:none;background:conic-gradient(from var(--star-angle),transparent 0 76%,#e9d3a166 86%,#fff6df 90%,transparent 91%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);animation:star-orbit 4.2s linear infinite}
@keyframes star-orbit{to{--star-angle:360deg}}
.no-effects .button.primary::before,.no-effects .header .nav-buy::before,.tab-asleep .button.primary::before{animation-play-state:paused;opacity:0}

/* Magnet: translate is set by fx.js and eased here */
.button.primary,.header .nav-buy{transition:translate .35s var(--ease-cosmos),background-position 1s ease,box-shadow .4s,transform .25s}

/* Launch: the arrow takes off up-right and lands back from the bottom-left */
@media(hover:hover){html:not(.no-effects) .button:hover .arrow-ne,html:not(.no-effects) .nav-buy:hover .ui-arrow{animation:arrow-launch .6s var(--ease-cosmos)}}
@keyframes arrow-launch{0%{translate:0 0;opacity:1}45%{translate:14px -14px;opacity:0}46%{translate:-12px 12px;opacity:0}100%{translate:0 0;opacity:1}}
.nav-buy .ui-arrow{--arrow-angle:-45deg}

/* Click Spark */
.fx-spark{position:fixed;width:9px;height:2px;margin:-1px 0 0;border-radius:2px;pointer-events:none;z-index:2000;transform-origin:0 50%;background:linear-gradient(90deg,#fff6df,#e9d3a1)}

@media(prefers-reduced-motion:reduce){.holo-foil,.fx-spark{display:none}.button.primary::before,.header .nav-buy::before{animation:none;opacity:0}.button .arrow-ne,.nav-buy .ui-arrow{animation:none!important}}

/* Scroll Reveal: each word carries its own gradient so it can fade independently (--w set by fx.js) */
h2.scroll-reveal{background:none;-webkit-text-fill-color:currentColor;color:#f6f3ff}
.reveal-word{display:inline-block;background:linear-gradient(180deg,#f6f3ff 30%,#b9c4d9);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;opacity:calc(.12 + var(--w,1) * .88);filter:blur(calc((1 - var(--w,1)) * 6px));translate:0 calc((1 - var(--w,1)) * 10px)}

/* Count Up: tabular digits keep the price from jittering; a brief glint when it lands */
.price{font-variant-numeric:tabular-nums}
.price-landed{animation:price-land .9s var(--ease-cosmos)}
@keyframes price-land{0%{filter:drop-shadow(0 0 0 #e9d3a100)}35%{filter:drop-shadow(0 0 14px #e9d3a199)}100%{filter:drop-shadow(0 0 0 #e9d3a100)}}

/* Cosmic effects switch: a night-sky track with an orbiting planet knob */
.effects-toggle.cosmic-switch{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;font-size:12px;color:#d7e1ee;border-radius:999px;border:1px solid #d7e1ee24;background:linear-gradient(125deg,#17183aeb,#0a0c1df0)!important;box-shadow:inset 0 1px 0 #ffffff0d,0 10px 30px #0006}
.cosmic-switch::before{content:'';flex:0 0 42px;height:22px;border-radius:999px;border:1px solid #d7e1ee26;background:radial-gradient(circle at 18% 30%,#fff 0 .8px,transparent 1.3px),radial-gradient(circle at 40% 72%,#fff 0 .6px,transparent 1.1px),radial-gradient(circle at 62% 28%,#f3e2b8 0 .7px,transparent 1.2px),radial-gradient(circle at 82% 66%,#fff 0 .5px,transparent 1px),linear-gradient(120deg,#2a1d5c,#0d1030);background-size:21px 22px,21px 22px,21px 22px,21px 22px,100% 100%;transition:filter .4s,opacity .4s}
.cosmic-switch::after{content:'';position:absolute;left:14px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff6df,#e9d3a1 45%,#8a6a3a);box-shadow:0 0 10px #e9d3a199,0 0 0 2.5px #e9d3a12e;translate:20px 0;transition:translate .45s var(--ease-cosmos),background .4s,box-shadow .4s}
.cosmic-switch[aria-pressed=true]::before{animation:switch-stars 6s linear infinite}
@keyframes switch-stars{to{background-position:-21px 0,-21px 0,-21px 0,-21px 0,0 0}}
.cosmic-switch[aria-pressed=false]{color:#9aa6bb}
.cosmic-switch[aria-pressed=false]::before{filter:grayscale(1) brightness(.6)}
.cosmic-switch[aria-pressed=false]::after{translate:0 0;background:radial-gradient(circle at 35% 30%,#e6ebf3,#9aa6bb 50%,#4a5468);box-shadow:inset -3px -2px 0 #0004,0 0 0 2.5px #d7e1ee14}
.cosmic-switch:focus-visible{outline:2px solid var(--champagne);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.reveal-word{opacity:1;filter:none;translate:none}.price-landed,.cosmic-switch::before{animation:none}.cosmic-switch::after{transition:none}}

/* ---- Icons on controls (icons.css provides .ico) ---- */
.header .nav-buy .ico{margin-right:.45em}
.design-search>.ico{width:17px;height:17px;margin:0 2px 0 4px;color:#a7b2c6}
#clear-search .ico,.close .ico{margin:0}
#clear-search .ico{width:18px;height:18px}
.close .ico{width:20px;height:20px}
.filter-tabs .ico-heart{width:14px;height:14px;margin-right:.4em}
.upload-zone .upload-icon{width:38px;height:38px;margin:0 0 10px;color:#d7e1ee}
.photo-actions .ico{width:15px;height:15px}
/* Preview tools are rendered by studio.js; icons are attached by id */
#preview-fullscreen::before,#share-design::before,#open-desktop::before{content:'';display:inline-block;width:15px;height:15px;margin-right:.5em;vertical-align:-.15em;background:currentColor;-webkit-mask:var(--ico) center/contain no-repeat;mask:var(--ico) center/contain no-repeat}
#preview-fullscreen::before{--ico:url("/assets/icons/expand.svg")}
#share-design::before{--ico:url("/assets/icons/share.svg")}
#open-desktop::before{--ico:url("/assets/icons/computer.svg")}

/* ---- Site footer: brand, legal navigation, meta ---- */
.site-footer{display:grid;gap:26px;padding-top:44px;padding-bottom:28px;border-top:1px solid transparent;border-image:linear-gradient(90deg,transparent,#e9d3a133,transparent) 1}
.site-footer .footer-top{display:flex;align-items:baseline;gap:22px;flex-wrap:wrap}
.footer-tagline{margin:0;color:#a7b2c6;font-size:14px;max-width:52ch}
.footer-legal{display:flex;flex-wrap:wrap;gap:10px}
.footer-legal a{display:inline-flex;align-items:center;padding:10px 16px;border-radius:999px;border:1px solid #d7e1ee1c;background:linear-gradient(150deg,#1b1d3f5c,#0a0c1d8c);color:#d7e1ee;font-size:14px;text-decoration:none;transition:border-color .3s,color .3s,background .3s}
.footer-legal a:hover{border-color:#e9d3a14d;color:#fff6df}
.footer-legal a[href^="mailto"]{border-color:#e9d3a133;color:#f3e2b8}
.footer-legal .ico{width:15px;height:15px}
.footer-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;color:#8f9bb0;font-size:13px}
.footer-meta button{display:inline-flex;align-items:center;padding:0;border:0;background:none;color:#a7b2c6;font:inherit;cursor:pointer}
.footer-meta button:hover,.footer-meta a:hover{color:#fff}
.footer-meta a{color:#8f9bb0}
.footer-meta .ico{width:14px;height:14px}
@media(max-width:600px){.footer-legal a{flex:1 1 calc(50% - 10px);justify-content:center}.footer-legal a[href^="mailto"]{flex-basis:100%}}

/* Phone colour swatches (moved out of inline styles so the CSP can forbid them) */
[data-phone-color=titanium]{--swatch:#89939d}[data-phone-color=black]{--swatch:#34373e}[data-phone-color=silver]{--swatch:#cfd5dc}[data-phone-color=rose]{--swatch:#bc999f}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}

/* Launch price: crossed-out regular price stacked above "/ one-time" */
.price{display:flex;align-items:flex-end}
.price-side{display:inline-flex;flex-direction:column;align-items:flex-start;gap:2px;margin-left:10px;padding-bottom:.55em}
.price-old{font-size:17px;line-height:1;font-weight:500;letter-spacing:0;font-family:"Segoe UI",system-ui,sans-serif;color:#a7b2c6;-webkit-text-fill-color:#a7b2c6;text-decoration:line-through;text-decoration-color:#e9a1a1;text-decoration-thickness:2px}
.price-side .once{margin:0}
.offer-future{color:#f3e2b8!important;font-weight:500}

/* Arrival highlight when "Buy" brings the visitor here */
.price-card.is-target{animation:card-arrive 1.6s var(--ease-cosmos)}
@keyframes card-arrive{0%{box-shadow:inset 0 1px 0 #fff4d80f,0 30px 80px #0007,0 0 0 0 #e9d3a100}30%{box-shadow:inset 0 1px 0 #fff4d80f,0 30px 80px #0007,0 0 0 3px #e9d3a199,0 0 60px #e9d3a140}100%{box-shadow:inset 0 1px 0 #fff4d80f,0 30px 80px #0007,0 0 0 0 #e9d3a100}}
#buy-now[aria-busy=true]{cursor:progress;opacity:.8}
#signin-required .dialog-mark .ico{width:22px;height:22px;margin:0;color:var(--champagne)}
#signin-required .button{justify-content:center}
#signin-required .button+.button{margin-top:10px}

/* Odometer digits (counter.js) */
.odo{position:relative;display:inline-flex;align-items:baseline;line-height:1;white-space:nowrap;font-variant-numeric:tabular-nums}
.odo__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.odo__row{display:inline-flex;user-select:none;-webkit-user-select:none}
.odo__digit{position:relative;display:inline-block;line-height:1.35}
.odo__sizer{visibility:hidden}
.odo__window{position:absolute;inset:-.16em 0;overflow:hidden;pointer-events:none;-webkit-mask:linear-gradient(#0000 0,#000 .16em,#000 calc(100% - .16em),#0000 100%);mask:linear-gradient(#0000 0,#000 .16em,#000 calc(100% - .16em),#0000 100%)}
.odo__strip{position:absolute;inset:.16em 0}
.odo__numeral{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform}
.odo__blur{position:absolute;width:0;height:0;overflow:hidden}
.offer-clock b.odo{display:flex;justify-content:center;font-size:28px;font-weight:600}
@media(prefers-reduced-motion:reduce){.price-card.is-target{animation:none}}

/* ---- Seams: no background may stop at a box edge ---- */
.try-on{background:none!important}
.phone-stage{position:relative}
.try-on .phone-stage::before{content:'';position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;z-index:-2;pointer-events:none;background:radial-gradient(closest-side,#1d4fd026,#2a1d5c14 55%,transparent)}
/* Section dividers fade out at both ends instead of stopping abruptly */
.experience,.collection,.try-on,.setup,.pricing,.faq{border-top:1px solid transparent!important;border-image:linear-gradient(90deg,transparent,#d7e1ee1f 20%,#d7e1ee1f 80%,transparent) 1 0 0 0}

/* ---- Bigger phone in the live try-on (fullscreen preview keeps its own sizing) ---- */
.try-on .phone-stage{min-height:760px}
.try-on .device-model{width:350px;height:690px}
.try-on .stage-ring{width:600px}
@media(max-width:1100px){.try-on .phone-stage{min-height:700px}.try-on .device-model{width:320px;height:630px}.try-on .stage-ring{width:520px}}
@media(max-width:760px){.try-on .phone-stage{min-height:600px}.try-on .device-model{width:min(290px,78vw);height:min(570px,153vw)}.try-on .stage-ring{width:min(400px,90vw)}}

/* ---- Deep-space extras (cosmos-deep.js) ---- */
.cosmos-aurora{position:fixed;inset:0;width:100%;height:100%;z-index:-2;pointer-events:none;mix-blend-mode:screen;opacity:.9}
.cosmos-rays{position:fixed;left:50%;top:-30vh;width:160vmax;height:120vh;translate:-50% 0;z-index:-2;pointer-events:none;opacity:.5;mix-blend-mode:screen;background:repeating-conic-gradient(from 168deg at 50% 0%,#f3e2b800 0deg,#f3e2b812 2.2deg,#f3e2b800 5deg,#9d8cff00 8deg,#9d8cff0d 10deg,#9d8cff00 13deg);-webkit-mask:radial-gradient(ellipse 45% 70% at 50% 0%,#000 0,#0008 40%,#0000 75%);mask:radial-gradient(ellipse 45% 70% at 50% 0%,#000 0,#0008 40%,#0000 75%);transform-origin:50% 0;animation:rays-sway 22s ease-in-out infinite alternate}
@keyframes rays-sway{from{rotate:-4deg;opacity:.38}to{rotate:4deg;opacity:.55}}


.cosmos-still .cosmos-rays{animation-play-state:paused}
@media(max-width:760px){.cosmos-rays{opacity:.35}}
@media(prefers-reduced-motion:reduce){.cosmos-rays{animation:none}}

/* Next-purchase discount note on the price card */
.next-discount{display:flex;align-items:flex-start;gap:10px;margin:22px 0 14px;padding:13px 15px;border-radius:14px;border:1px dashed #e9d3a14d;background:#e9d3a10a;color:#e8edf6;font-size:14px;line-height:1.5}
.next-discount .ico{width:18px;height:18px;margin:2px 0 0;color:var(--champagne)}
.next-discount strong{color:#f3e2b8}
.next-discount[hidden]{display:none}

/* ---- Volumetric iPhone (phone3d.js builds .device-frame: side strips + faceted corners) ---- */
@property --device-sway{syntax:'<angle>';inherits:false;initial-value:-18deg}
.device-model.volumetric .phone{transform:translateZ(17px)!important}
.device-model.volumetric .device-back{transform:rotateY(180deg) translateZ(17px)}
/* The old flat side planes would sit inside the new frame and flicker; keep only their buttons. */
.device-model.volumetric .device-edge{width:0;background:none!important;box-shadow:none}
.device-model.volumetric .edge-left{left:0}
.device-model.volumetric .edge-right{right:0}
.device-model.volumetric .edge-right i{left:-3px;transform:translateZ(2px);background:linear-gradient(90deg,#0004,var(--phone-metal,#89939d) 40%,#fff8 60%,var(--phone-metal,#89939d))}
.device-model.volumetric .edge-left i{left:-3px;transform:translateZ(-2px);background:linear-gradient(90deg,var(--phone-metal,#89939d),#fff8 40%,var(--phone-metal,#89939d) 60%,#0004)}
.device-frame{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;pointer-events:none}
.device-frame i{position:absolute;display:block;transform-origin:50% 50%;backface-visibility:visible;background:linear-gradient(0deg,color-mix(in srgb,var(--phone-metal,#89939d) 70%,#000) 0%,var(--phone-metal,#89939d) 22%,color-mix(in srgb,var(--phone-metal,#89939d) 55%,#fff) 50%,var(--phone-metal,#89939d) 78%,color-mix(in srgb,var(--phone-metal,#89939d) 70%,#000) 100%);filter:brightness(var(--shade,1))}
.try-on .device-model{--device-y:0deg;transform:rotateX(var(--device-x)) rotateY(calc(var(--device-turn) + var(--device-y) + var(--device-sway)));animation:device-sway 11s ease-in-out infinite alternate}
@keyframes device-sway{from{--device-sway:-36deg}to{--device-sway:-18deg}}
.no-effects .try-on .device-model,.tab-asleep .try-on .device-model{animation-play-state:paused}
/* Soft floor shadow under the floating phone */
.try-on .phone-stage::after{content:'';position:absolute;left:50%;bottom:24px;width:62%;height:44px;translate:-50% 0;z-index:-1;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,#000a,#0000);filter:blur(6px)}
@media(prefers-reduced-motion:reduce){.try-on .device-model{animation:none}}

/* =====================================================================================
   4K + smoothness pass (2026-10-27). Everything below wins over the rules above.
   ===================================================================================== */

/* Nebula: a GPU-composited layer moved by cosmos.js with transform; never redrawn per frame */
.cosmos-nebula{position:fixed;left:-20px;right:-20px;top:0;height:calc(var(--nebula-period,200vh) + 100vh);z-index:-3;pointer-events:none;background-repeat:repeat-y;background-size:100% var(--nebula-period,200vh);will-change:transform;contain:strict}
.cosmos-canvas{z-index:-2}

/* One progress bar: the gold one, animated by transform. The old blue one from studio.js is retired. */
.reading-progress{display:none!important}
.cosmos-progress{width:100%;transform-origin:0 50%;transform:scaleX(0);will-change:transform}
.cosmos-progress::after{display:none}

/* Reveals: CSS scroll-driven animations instead of IntersectionObserver + blur.
   Content is always visible by default; browsers with view timelines get a smooth rise.
   Only opacity and transform animate, so nothing can get stuck blurred or hidden. */
.motion-ready,.motion-pending,.motion-ready.in-view{opacity:1!important;transform:none!important;filter:none!important;translate:none!important}
.reveal-word{opacity:1;filter:none;translate:none}
@keyframes cosmos-rise{from{opacity:0;transform:translateY(36px) scale(.985)}to{opacity:1;transform:none}}
@keyframes cosmos-word{from{opacity:.08;transform:translateY(.35em)}to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    html:not(.no-effects) :is(.section-heading,.feature,.setup-grid article,.pricing-copy,.price-card,.faq>div,.faq-list details,.try-controls,.phone-stage,.collection-tools,.site-footer){animation:cosmos-rise linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
    html:not(.no-effects) .reveal-word{animation:cosmos-word linear both;animation-timeline:view();animation-range:entry calc(5% + var(--i,0) * 6%) entry calc(60% + var(--i,0) * 6%)}
  }
}

/* Glass without the per-frame cost: backdrop blur over an animated background re-blurs every frame,
   which is what made scrolling stutter on 4K. Large panels get a richer opaque gradient instead. */
.feature,.setup-grid article,.try-controls,.collection-tools,.faq details,.price-card,.hero-showroom,.design-tile,.filter-tabs button,.catalog-pages button,.button,.footer-legal a,.effects-toggle{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
.feature,.setup-grid article,.try-controls,.collection-tools,.faq details{background:linear-gradient(150deg,#1a1c3df2,#0b0d20f5)!important}
.hero-showroom{background:radial-gradient(ellipse at 50% 18%,#4b3a9a2e,transparent 62%),linear-gradient(150deg,#17193af0,#0a0c1df5)!important}
.header{backdrop-filter:blur(12px) saturate(125%)!important;-webkit-backdrop-filter:blur(12px) saturate(125%)!important}

/* Blend modes over a full 4K viewport are expensive; on a near-black background normal blending looks the same */
.cosmos-aurora,.cosmos-rays{mix-blend-mode:normal!important}
.cosmos-rays{opacity:.42}

/* Composite the always-moving pieces on their own layers */
.hero-orbit::after,.button.primary::before,.header .nav-buy::before{will-change:transform}
.ribbon-track{will-change:transform}

/* Large screens: scale the whole interface instead of leaving a narrow column on 2560–3840 px wide viewports
   (4K at 150% / 100%). Background layers stay full-bleed because they are outside these containers. */
@media (min-width:2200px){.header,main,.site-footer,.footer-disclaimer,body>dialog{zoom:1.25}}
@media (min-width:2800px){.header,main,.site-footer,.footer-disclaimer,body>dialog{zoom:1.55}}
@media (min-width:3400px){.header,main,.site-footer,.footer-disclaimer,body>dialog{zoom:1.85}}