/* motion.css — promo video blocks, the home reel, and the animated app icons.
   Loaded after app.css; everything here is additive so the existing layout is untouched. */

/* ---------- the promo block on an app page ---------- */
.promo__grid{
  display:grid; gap:clamp(24px,5vw,56px); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,320px);
}
@media (max-width:820px){ .promo__grid{ grid-template-columns:minmax(0,1fr); } }

.promo__device{
  position:relative; margin:0; width:100%; max-width:300px; justify-self:center;
  aspect-ratio:9/16; border-radius:24px; overflow:hidden;
  background:#0b0d12;
  box-shadow:0 26px 60px -22px rgba(12,18,34,.45), 0 2px 0 0 rgba(255,255,255,.5) inset;
}
.promo__device video{ width:100%; height:100%; object-fit:cover; display:block; }

.promo__sound{
  position:absolute; right:10px; bottom:10px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  border:0; cursor:pointer; padding:7px 12px; border-radius:999px;
  font:600 12px/1 inherit; letter-spacing:.01em;
  color:#0b0d12; background:rgba(255,255,255,.88);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:background .18s ease, transform .18s ease;
}
.promo__sound:hover{ background:#fff; transform:translateY(-1px); }
.promo__sound::before{ content:"🔇"; font-size:13px; }
.promo__sound[aria-pressed="true"]::before{ content:"🔊"; }

/* ---------- the reel of all nine promos, on the home page ---------- */
.reel{ margin:34px 0 8px; }
.reel__track{
  display:grid; grid-auto-flow:column; grid-auto-columns:168px; gap:14px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  padding:4px 2px 16px; margin:0 -2px;
  scrollbar-width:thin;
}
.reel__track::-webkit-scrollbar{ height:6px; }
.reel__track::-webkit-scrollbar-thumb{ background:rgba(20,28,48,.22); border-radius:99px; }

.reel__item{
  position:relative; scroll-snap-align:start;
  padding:0; border:0; background:#0b0d12; cursor:pointer;
  border-radius:16px; overflow:hidden; aspect-ratio:9/16;
  box-shadow:0 14px 32px -16px rgba(12,18,34,.45);
  transition:transform .22s ease, box-shadow .22s ease;
}
.reel__item:hover, .reel__item:focus-visible{
  transform:translateY(-3px); box-shadow:0 20px 40px -16px rgba(12,18,34,.5);
}
.reel__item img, .reel__item video{ width:100%; height:100%; object-fit:cover; display:block; }
.reel__name{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:22px 10px 9px; text-align:left;
  font:600 12px/1.25 inherit; color:#fff;
  background:linear-gradient(to top, rgba(6,9,16,.86), rgba(6,9,16,0));
}
.reel__play{
  position:absolute; inset:0; z-index:2; display:grid; place-items:center;
  color:#fff; opacity:.92; transition:opacity .2s ease, transform .2s ease;
}
.reel__play svg{ filter:drop-shadow(0 3px 10px rgba(0,0,0,.45)); }
.reel__item:hover .reel__play{ transform:scale(1.07); }
.reel__item.playing .reel__play, .reel__item.playing .reel__name{ opacity:0; pointer-events:none; }

/* ---------- animated app icons ---------- */
.app__icon img, .hero__icon, .more img{ transition:transform .25s cubic-bezier(.2,.7,.3,1); }
.app:hover .app__icon img{ transform:translateY(-2px) scale(1.04); }
[data-anim]{ will-change:contents; }

@media (prefers-reduced-motion:reduce){
  .reel__item, .app__icon img, .hero__icon, .more img, .promo__sound{ transition:none; }
  .reel__item:hover{ transform:none; }
}

/* ---------- the hero stage (home page) ----------
   Loaded after the inline <style> block, so these three rules intentionally
   override the hero layout defined there: the CTA row used to be pushed to the
   far right of a space-between flex row, which orphaned the buttons ~350px away
   from the sentence they belong to on wide screens and left the whole right
   half of the fold empty. */
.hero{ padding:clamp(92px,12vh,132px) 0 26px; }
.hero__row{
  display:grid; gap:clamp(28px,5vw,64px); align-items:start;
  grid-template-columns:minmax(0,1fr) minmax(0,268px);
}
.hero__copy{ display:flex; flex-direction:column; align-items:flex-start; gap:26px; }
.hero p.sub{ max-width:50ch; }
.hero__cta{ display:flex; gap:12px; flex-wrap:wrap; flex-shrink:1; }

.hero__stage{
  position:relative; margin:0; padding:0; border:0; display:block;
  width:100%; max-width:268px; justify-self:end; cursor:pointer;
  margin-top:clamp(-150px,-9vw,-40px);
  aspect-ratio:9/16; border-radius:26px; overflow:hidden; background:#0b0d12;
  box-shadow:0 30px 70px -24px rgba(12,18,34,.5), 0 2px 0 0 rgba(255,255,255,.5) inset;
}
.hero__stage img, .hero__stage video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.hero__stage img{ opacity:0; transition:opacity .9s var(--ease,cubic-bezier(.2,.7,.3,1)); }
.hero__stage img.on{ opacity:1; }
.hero__stage video{ z-index:2; }
/* The posters carry their own headline text, so the play affordance sits in the
   corner rather than centred on top of it. */
.hero__stage__name{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; align-items:center; gap:10px;
  padding:38px 12px 12px; text-align:left;
  font:600 13px/1.3 inherit; color:#fff; letter-spacing:.01em;
  background:linear-gradient(to top, rgba(6,9,16,.9), rgba(6,9,16,0));
  transition:opacity .3s ease;
}
.hero__stage__play{
  position:absolute; right:12px; bottom:10px; z-index:4;
  display:grid; place-items:center; color:#fff; opacity:.95; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.hero__stage__play svg{ filter:drop-shadow(0 3px 12px rgba(0,0,0,.55)); }
.hero__stage:hover .hero__stage__play{ transform:scale(1.09); }
.hero__stage.playing .hero__stage__play,
.hero__stage.playing .hero__stage__name{ opacity:0; }

/* Below 900px the bento directly underneath already carries the product imagery,
   so the stage is hidden rather than stacked — and its posters never download. */
@media (max-width:900px){
  .hero__row{ grid-template-columns:minmax(0,1fr); }
  .hero__stage{ display:none; }
}

/* The reel scrolls the page fine on a real trackpad (confirmed 13 Sep) — the
   frozen-page symptom was an artefact of synthetic wheel events during browser
   automation, so the mandatory x-snapping stays. overflow-y:hidden is kept
   purely because the track only ever scrolls horizontally. */
.reel__track{ overflow-y:hidden; overscroll-behavior-y:auto; }

@media (prefers-reduced-motion:reduce){
  .hero__stage img{ transition:none; }
  .hero__stage:hover .hero__stage__play{ transform:none; }
}

/* Section rules like .hero{padding:120px 0 26px} use the padding shorthand, which zeroes
   the .wrap side gutter on the same element — text ran edge to edge on phones and on any
   window narrower than the max width. Double class so the gutter always wins. */
.wrap.wrap{padding-left:var(--pad);padding-right:var(--pad)}