/* ==========================================================================
   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: -20%;  animation-delay: -1.2s; }
.device-note--br { bottom: 13%; right: -20%; animation-delay: -3.4s; }
.device-note--bl { bottom: 43%; left: -24%;  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: -14%; }
  .device-note--br { right: -14%; }
  .device-note--bl { left: -17%; }
}
@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; }
}