/* ==========================================================================
   Move My Way — device showcase
   Real screenshots of the shipping Android build. Each PNG already contains the
   handset bezel, so there is no CSS phone frame here: the image *is* the device,
   and everything below is presentation, motion and layout around it.
   ========================================================================== */

.device {
  --device-w: 300px;
  position: relative;
  width: var(--device-w);
  /* Locked to the source screenshots (1482 x 3072) so nothing ever reflows
     while the image loads. */
  aspect-ratio: 1482 / 3072;
  flex: none;
}
.device--sm { --device-w: 224px; }
.device--lg { --device-w: 330px; }

.device__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  /* The bezel is rounded with transparent corners, so a box-shadow would draw a
     rectangle behind it. A matching drop-shadow follows the alpha instead. */
  filter: drop-shadow(16px 24px 34px rgba(96, 88, 72, .42));
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025) translateY(10px);
  transition: opacity .55s var(--ease-soft), transform .7s var(--ease), visibility .7s;
}
.device__img.is-active { opacity: 1; visibility: visible; transform: none; }

/* Soft ambient wash behind the handset. */
.device-stage { position: relative; display: grid; place-items: center; }
.device-stage::before {
  content: ''; position: absolute; z-index: -1;
  width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 103, 75, .26), rgba(200, 234, 248, .24) 45%, transparent 70%);
  filter: blur(48px);
  animation: float-y 7s var(--ease-soft) infinite;
}

/* --- Caption chips floating beside a device ------------------------------ */
.device-note {
  position: absolute; z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 17px; border-radius: 17px;
  background: var(--surface); box-shadow: var(--nm-raised);
  font-size: .82rem; font-weight: 700; color: var(--ink);
  white-space: nowrap;
  animation: float-y 6s var(--ease-soft) infinite;
}
.device-note i {
  width: 32px; height: 32px; border-radius: 11px; flex: none;
  display: grid; place-items: center;
  background: var(--surface); box-shadow: var(--nm-inset-sm);
  color: var(--coral-dark);
}
.device-note i svg { width: 16px; height: 16px; }
.device-note small { display: block; font-size: .7rem; font-weight: 600; color: var(--muted); }
.device-note--green i { color: var(--green); }
.device-note--blue i { color: var(--blue-deep); }

/* Offsets keep each note clear of the handset. The screenshots are edge-to-edge
   product UI, so a note sitting on top of one hides real content. */
.device-note--tl { top: 7%;    left: -4%;   animation-delay: -1.2s; }
.device-note--br { bottom: 13%; right: -10%; animation-delay: -3.4s; }
.device-note--bl { bottom: 43%; left: -6%;   animation-delay: -2.2s; }

@media (max-width: 1320px) {
  .device-note { padding: 10px 13px; font-size: .74rem; }
  .device-note i { width: 28px; height: 28px; }
  .device-note--tl { left: -1%; }
  .device-note--br { right: -6%; }
  .device-note--bl { left: -3%; }
}
@media (max-width: 720px) {
  .device-note { display: none; }
  .device { --device-w: min(280px, 74vw); }
}

/* --- Screen switcher (dots under a rotating device) ---------------------- */
.device-caption {
  margin-top: 22px; text-align: center;
  font-size: .89rem; color: var(--muted); font-weight: 500;
  min-height: 2.6em;   /* reserved so swapping screens never nudges the layout */
  transition: opacity .3s var(--ease-soft);
}

.device-nav {
  display: flex; gap: 9px; justify-content: center; margin-top: 14px;
  padding: 9px 13px; border-radius: 999px;
  background: var(--surface-sunken); box-shadow: var(--nm-inset-sm);
  width: max-content; margin-inline: auto;
}
.device-nav button {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 999px;
  background: var(--nm-dark); cursor: pointer;
  transition: width .45s var(--ease), background-color .3s;
}
.device-nav button:hover { background: var(--muted); }
.device-nav button.is-active { width: 32px; background: var(--coral); }

/* --- Horizontal screen gallery ------------------------------------------ */
.screens {
  display: flex; gap: 30px; align-items: flex-start;
  overflow-x: auto; padding: 10px 4px 28px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.screens > figure {
  scroll-snap-align: center;
  display: grid; gap: 16px; justify-items: center;
  flex: none; width: 224px;
}
.screens figcaption { text-align: center; }
.screens figcaption b { display: block; font-size: .95rem; font-weight: 800; letter-spacing: -.01em; }
.screens figcaption span { display: block; margin-top: 4px; font-size: .82rem; color: var(--muted); line-height: 1.5; }
.screens .device { transition: transform .5s var(--ease); }
.screens > figure:hover .device { transform: translateY(-10px); }
.screens::-webkit-scrollbar { height: 8px; }
.screens::-webkit-scrollbar-thumb { background: var(--nm-dark); border-radius: 8px; }
.screens::-webkit-scrollbar-track { background: transparent; }

/* --- Annotated callouts under a screenshot ------------------------------- */
.callouts { display: grid; gap: 12px; margin-top: 22px; }
.callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start;
  padding: 16px 18px; border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--nm-flat);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.callout:hover { transform: translateX(4px); box-shadow: var(--nm-raised); }
.callout__num {
  width: 28px; height: 28px; border-radius: 9px; flex: none;
  display: grid; place-items: center;
  background: var(--surface-sunken); box-shadow: var(--nm-inset-sm);
  font-size: .74rem; font-weight: 800; color: var(--coral-deep);
}
.callout b { display: block; font-size: .93rem; font-weight: 800; }
.callout span { display: block; margin-top: 3px; font-size: .87rem; color: var(--muted); line-height: 1.55; }

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .device__img { transition-duration: .001ms; }
  .device-note, .device-stage::before { animation: none; }
}

/* ==========================================================================
   Compass characters
   ========================================================================== */

/* The large assistant character beside a feature explanation. It reacts to the
   pointer: leans toward it, lifts, and its glow brightens. */
.mascot {
  position: relative;
  display: grid; place-items: center;
  padding: 12px;
  perspective: 900px;
}
.mascot__img {
  width: min(430px, 92%); height: auto;
  filter: drop-shadow(0 22px 34px rgba(180, 70, 40, .32));
  transform-style: preserve-3d;
  transition: transform .45s var(--ease), filter .45s var(--ease);
  animation: mascot-idle 5.5s var(--ease-soft) infinite;
  cursor: pointer;
}
.mascot:hover .mascot__img {
  filter: drop-shadow(0 30px 44px rgba(180, 70, 40, .42));
  animation-play-state: paused;
}
@keyframes mascot-idle {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-14px) rotate(-2deg); }
}

/* Soft halo so the character sits on the page rather than floating on nothing. */
.mascot::before {
  content: ''; position: absolute; z-index: 0;
  width: 74%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 122, 92, .38), rgba(255, 196, 150, .26) 46%, transparent 72%);
  filter: blur(44px);
  animation: mascot-halo 6s var(--ease-soft) infinite;
}
.mascot__img { position: relative; z-index: 1; }
@keyframes mascot-halo {
  0%, 100% { transform: scale(1); opacity: .9; }
  50%      { transform: scale(1.12); opacity: 1; }
}

/* Speech bubble that appears on hover, so the character explains itself. */
.mascot__say {
  position: absolute; top: 4%; right: 0; z-index: 2;
  padding: 12px 18px; border-radius: 18px 18px 18px 6px;
  background: var(--surface); box-shadow: var(--nm-raised);
  font-size: .88rem; font-weight: 700; color: var(--ink);
  white-space: nowrap;
  opacity: 0; transform: translateY(10px) scale(.9);
  transform-origin: bottom left;
  transition: opacity .35s var(--ease-soft), transform .45s var(--ease-spring);
  pointer-events: none;
}
.mascot:hover .mascot__say { opacity: 1; transform: translateY(0) scale(1); }

@media (max-width: 620px) {
  .mascot__img { width: min(300px, 82%); }
  .mascot__say { display: none; }
}

/* --- Illustrated people -------------------------------------------------- */
/* Supplied 3D renders. Sized by height, not width: the two have different
   aspect ratios, so matching widths would leave one figure visibly smaller.
   They hold still on purpose, a floating animation made them read as stickers
   rather than as people standing in the scene. */
.figure-art {
  height: clamp(230px, 27vw, 350px); width: auto;
  filter: drop-shadow(0 18px 26px rgba(150, 90, 60, .3));
}

/* The man is mirrored so he faces the wheelchair user beside him. The render
   has him turned to his own left; on the left of the pair that pointed him
   away from her and out of the layout. */
.figure-art--face-right { transform: scaleX(-1); }

@media (max-width: 560px) {
  .figure-art { height: clamp(170px, 42vw, 230px); }
  .art-row { gap: 14px; }
}

.art-row {
  display: flex; align-items: flex-end; justify-content: center;
  gap: clamp(20px, 5vw, 60px);
  margin-top: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .mascot__img, .mascot::before { animation: none; }
  .mascot__say { transition: none; }
}

/* ==========================================================================
   Succession reveal
   The Canva-style entrance: each piece rises out from behind a mask, one after
   the next. The mask is what separates it from a plain fade, the element is
   clipped by its own line box, so it looks like it is sliding up into view
   rather than simply appearing.
   ========================================================================== */

.succession {
  display: grid; justify-items: center; gap: 18px;
  margin-bottom: clamp(34px, 5vw, 54px);
}

/* Each line is the mask. overflow:hidden clips whatever sits inside it. */
.succession__line {
  display: block;
  overflow: hidden;
  padding: 2px 0;          /* room for descenders and the icon's soft shadow */
  line-height: 1.1;
}

/* The moving part. It starts below its own mask and rises into place.
   The hidden start state is gated on body.is-ready, which main.js sets once it
   has booted. Without that gate a visitor with JavaScript disabled would get a
   permanently invisible logo, and this is the brand mark. */
.succession__item {
  display: inline-block;
  will-change: transform, opacity;
}
.is-ready .succession__item {
  transform: translateY(115%);
  opacity: 0;
}

.is-ready .succession.is-playing .succession__item {
  animation: succession-rise .82s cubic-bezier(.16, 1, .3, 1) forwards;
  /* --i is set per item in the markup, so the pieces follow one another. */
  animation-delay: calc(var(--i, 0) * 110ms);
}

@keyframes succession-rise {
  from { transform: translateY(115%); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translateY(0);    opacity: 1; }
}

/* The icon gets the same timing plus a touch of scale, so it lands rather than
   just slides. */
.succession__icon {
  width: clamp(92px, 12vw, 126px); height: auto;
}
.is-ready .succession.is-playing .succession__icon {
  animation: succession-drop .9s cubic-bezier(.16, 1, .3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 110ms);
}
@keyframes succession-drop {
  from { transform: translateY(115%) scale(.86); opacity: 0; }
  55%  { opacity: 1; }
  to   { transform: translateY(0) scale(1);      opacity: 1; }
}

.succession__word {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ink);
}
.succession__words { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 .32em; }
.succession__tag {
  font-size: clamp(.92rem, 1.3vw, 1.06rem);
  font-weight: 600;
  color: var(--muted);
}

/* Someone who asked for reduced motion gets the finished state, immediately. */
@media (prefers-reduced-motion: reduce) {
  .is-ready .succession__item { transform: none; opacity: 1; }
  .succession.is-playing .succession__item,
  .succession.is-playing .succession__icon { animation: none; }
}

/* Measured fixes, 18 Sep 2026 (headless probe at 320-1920px).

   1. The floating notes are positioned outside the phone (left: -14%), which
      only has room on a wide screen. Between 720 and 1100px they hung past the
      left edge of the viewport and got clipped mid-word, so they now stay
      hidden until 1320px, the width at which the surrounding layout finally
      has room for them (at 1120px the bottom-right note pushed the page 28px
      wide and produced a horizontal scrollbar).
   2. Two figures at clamp(170px, 42vw, 230px) plus their gap came to 332px,
      which does not fit a 320px phone. Below 400px they scale with the
      viewport instead of holding a fixed floor. */
@media (max-width: 1320px) {
  .device-note { display: none; }
}

@media (max-width: 400px) {
  .art-row { gap: clamp(12px, 4vw, 20px); }
}

/* 3. On the home page the pair sits in one column of a two-column split, so
      its natural size outgrew that column between roughly 900 and 1300px and
      the right-hand figure was clipped by the viewport edge. Capping each
      figure against its own row, rather than against the viewport, keeps the
      size identical wherever it already fitted and shrinks it only where it
      did not. Height follows the width so the render never distorts. */
.art-row { max-width: 100%; }
.figure-art {
  /* Height, not width, is what makes the pair read as the same scale: the two
     renders have different aspect ratios, so an equal width cap made the man
     noticeably shorter than the woman. */
  height: clamp(250px, 29vw, 380px);
  width: auto;
  max-height: none;
}
/* No max-width here: the two renders have different aspect ratios, so a shared
   width cap squashed both to an identical box and distorted them. The row
   below keeps the pair inside its column instead. */
.art-row { flex-wrap: nowrap; }
.art-row .figure-art { min-width: 0; object-fit: contain; }
@media (max-width: 560px) { .figure-art { max-height: clamp(170px, 42vw, 230px); } }
@media (max-width: 400px) { .figure-art { max-height: min(170px, 38vw); } }