/* Coming soon page (soon.html), light. Loaded after styles.css. */
.shead{display:grid;gap:14px;max-width:58ch}
.shead .eyebrow{margin-bottom:0}
.shead p:not(.eyebrow){color:var(--text-2)}
.shero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px clamp(20px,4vw,56px);padding-top:clamp(40px,7vw,104px);padding-bottom:clamp(16px,3vw,40px)}
.shero h1{font-size:clamp(46px,7.6vw,108px);line-height:.98;letter-spacing:-.045em;max-width:none}
.shero__lead{margin-top:20px;font-size:clamp(18px,1.6vw,22px);line-height:1.45;color:var(--text-2);max-width:34ch}
.shero__note{margin-top:14px;font-size:14px;color:var(--text-3)}
/* The stamp (look and slam live in soon-concepts.css) */
.shero__stamp{width:clamp(112px,22vw,290px);color:#c3222b;align-self:center}
@media (max-width:640px){.shero__stamp{align-self:start;margin-top:30px}}

/* Cover Flow ring (ring.js). One composited layer per card; the reflection is the bottom third of the card, flipped. */
.sring{padding-top:clamp(48px,7vw,104px)}
.sring .shead{justify-items:center;text-align:center;margin-inline:auto}
.cf{--w:clamp(176px,56vw,300px);--h:calc(var(--w) * 1.25);--cf-light:rgba(255,255,255,.85);--cf-floor:rgba(40,34,28,.24);position:relative;height:calc(var(--h) * 1.36 + 28px);margin-top:clamp(14px,2.4vw,28px);overflow:hidden;overflow:clip;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.cf__light{position:absolute;left:50%;top:0;width:calc(var(--w) * 3.4);height:calc(var(--h) * 1.3);translate:-50% 0;background:radial-gradient(ellipse 40% 50% at 50% 46%,var(--cf-light),transparent 74%);pointer-events:none}
.cf::after{content:"";position:absolute;left:50%;top:calc(20px + var(--h) - 12px);width:calc(var(--w) * 1.6);height:40px;translate:-50% 0;border-radius:50%;background:radial-gradient(closest-side,var(--cf-floor),transparent);pointer-events:none}
.cf__stage{position:absolute;inset:0;perspective:calc(var(--w) * 4.2);perspective-origin:50% calc(20px + var(--h) * .5)}
.cf__item{position:absolute;left:50%;top:20px;width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cf__card{position:absolute;inset:0;border-radius:18px;overflow:hidden;background:#07090c;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.cf__item>.cf__card{box-shadow:inset 0 0 0 1px rgba(255,255,255,.06),0 22px 40px -22px rgba(22,25,29,.55)}
.cf__card--light{background:radial-gradient(120% 90% at 50% 34%,#fffdf8,#ece5da)}
.cf__item>.cf__card--light{box-shadow:inset 0 0 0 1px rgba(22,25,29,.06),0 22px 40px -22px rgba(22,25,29,.45)}
.cf__card img{position:absolute;inset:0;width:100%;height:100%;-webkit-user-drag:none;-webkit-user-select:none;user-select:none}
.cf__card--cut img{padding:7% 11%}
.cf__refl{position:absolute;left:0;right:0;top:calc(100% + 3px);height:34%;overflow:hidden;opacity:.26;-webkit-mask-image:linear-gradient(#000,transparent 92%);mask-image:linear-gradient(#000,transparent 92%);pointer-events:none}
.cf__refl .cf__card{inset:0 0 auto;height:calc(100% / .34);transform:scaleY(-1)}
.cf__zone{position:absolute;inset:0;z-index:200;cursor:grab;touch-action:pan-y;outline:none}
.cf__zone:active{cursor:grabbing}
.cf__zone:focus-visible::before{content:"";position:absolute;left:calc(50% - var(--w) / 2 - 8px);width:calc(var(--w) + 16px);top:12px;height:calc(var(--h) + 16px);border-radius:24px;outline:2px solid var(--focus)}
.cf:not(.is-live) .cf__item:not(:first-child){visibility:hidden}
.cf__ctl{display:grid;grid-template-columns:48px minmax(0,1fr) 48px;align-items:center;gap:8px;width:min(calc(100% - 32px),460px);margin:0 auto}
.cf__nav{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--bg-raise);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-strong);transition:background-color .2s,transform .14s var(--press)}
.cf__nav:hover{background:var(--control)}
.cf__nav:active{transform:scale(.94)}
.cf__read{margin:0;display:grid;justify-items:center;gap:3px;text-align:center;min-width:0}
.cf__read b{max-width:100%;font:600 clamp(18px,1.6vw,21px)/1.2 var(--brand);letter-spacing:-.01em;color:var(--text);text-wrap:balance}
.cf__read span{font-size:14px;line-height:1.35;color:var(--text-2);text-wrap:balance}
.cf__dots{display:flex;flex-wrap:wrap;justify-content:center;margin:8px auto 0;max-width:calc(100% - 24px)}
.cf__dot{display:grid;place-items:center;width:44px;height:44px;border-radius:50%}
.cf__dot i{width:8px;height:8px;border-radius:50%;background:var(--line-strong);transition:transform .25s var(--ease),background-color .25s}
.cf__dot[aria-pressed="true"] i{background:var(--text);transform:scale(1.4)}
.cf__dot:focus-visible{outline-offset:-4px}
@media (min-width:900px){.cf{--w:300px}}
@media (prefers-reduced-motion:reduce){.cf__nav,.cf__dot i{transition:none}}

/* Motion demos */
.smotion{padding-top:var(--section)}
.smotion__grid{display:grid;gap:clamp(16px,2.4vw,28px);margin-top:clamp(24px,3vw,40px)}
@media (min-width:900px){.smotion__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}}
.demo{margin:0;display:grid;grid-template-rows:1fr auto;min-width:0;border-radius:var(--radius);background:var(--bg-raise);box-shadow:0 0 0 1px var(--line);overflow:hidden}
.demo__stage{position:relative;display:grid;place-items:center;min-width:0;padding:clamp(24px,4vw,56px) 12px}
.demo__stage--fan{background:radial-gradient(70% 62% at 50% 42%,#fffdf8,#e9e3d8)}
.demo__stage .lfan{width:min(76%,440px)}
.demo__stage .lfan__case{cursor:pointer}
.demo__stage--anim{padding:0;background:#f3f1ec}
.demo__stage--anim img{width:100%;max-width:460px;height:auto}
.demo__cap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px 14px 20px;border-top:1px solid var(--line)}
.demo__cap span{display:grid;gap:3px;min-width:0;font-size:14px;line-height:1.4;color:var(--text-2)}
.demo__cap b{font:600 16px/1.3 var(--brand);color:var(--text)}
.demo__btn{flex:none;display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);font:600 14px/1 var(--brand);color:var(--text);transition:background-color .2s}
.demo__btn:hover{background:var(--control)}

/* Drag demo: one case on a warm stage; transform only. */
.demo--drag{grid-column:1/-1}
.demo__stage--drag{min-height:clamp(340px,50vw,430px);padding:0;overflow:hidden;background:radial-gradient(70% 70% at 50% 44%,#fffdf8,#e9e3d8)}
.drag{position:relative;height:clamp(270px,38vw,340px);aspect-ratio:540/949;cursor:grab;touch-action:pan-y;outline:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.drag:active{cursor:grabbing}
.drag__case{position:absolute;inset:0;will-change:transform;transform-origin:50% 55%;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.drag__case img{width:100%;height:100%;object-fit:contain;-webkit-user-drag:none;pointer-events:none}
.drag__shadow{position:absolute;left:8%;right:8%;bottom:1%;height:7%;border-radius:50%;background:radial-gradient(closest-side,rgba(40,34,28,.4),transparent);will-change:transform,opacity}
.drag:focus-visible::before{content:"";position:absolute;inset:-10px -22px;border-radius:26px;outline:2px solid var(--focus)}

/* Swappable backplates: cards come from soon-concepts.js */
.sconcepts{padding-top:var(--section)}
.sconcepts [data-concepts]{margin-top:14px}
.sc-card.reveal{transition-delay:calc(var(--i,0) * 70ms)}
.sback a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:600 15px/1 var(--brand);color:var(--text);text-underline-offset:4px}
.soon .site-footer .legal:first-of-type{margin-top:8px}