/* Inside the Nari 1 app (29 Oct): five live HTML screens of the app, shown as steps on /. Brand tokens from site.css only.
   Base = in flow and complete: each step beside its screen. No script, reduced motion and phones all get exactly this.
   .is-3d (inside.js adds it only at 1024 px and wider with motion allowed): one rigid CSS-3D phone, pinned while the
   steps scroll; it turns to a new pose for each step, and the cards float at real translateZ depths because they are
   part of the same rig (one object in perspective, not independent parallax layers). Nothing loops, only transform and
   opacity animate on the rig, and every motion rule lives inside prefers-reduced-motion: no-preference.
   Build note: the perspective sits on .inside-sway, which stays flat. Nesting a second preserve-3d level above the rig
   (perspective on the stage and a 3D sway wrapper) made Chromium miss clicks on the buttons whenever the phone was turned
   (measured 29 Oct: 7 of 15 reachable at the step 1 pose, 15 of 15 now). The page-scroll drift therefore runs on the
   rig's own `rotate` property, which composes with its pose `transform`. */

.inside { overflow-x: clip; }
.inside-grid { display: grid; gap: 20px; grid-auto-flow: row dense; counter-reset: inside; }

/* the stage chain and the phone's chrome exist only in the 3D layout; in flow the screens are grid items */
.inside-stage, .inside-sway, .inside-rig, .inside-phone, .inside-face, .inside-screens { display: contents; }
.inside .disc, .inside .slab, .inside .island, .inside .float { display: none; }

/* steps: a numbered sequence, same numerals as the care journey */
.inside-step { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; align-content: start; }
.inside-step::before {
  counter-increment: inside; content: counter(inside);
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  font-weight: 700; font-size: 16px; background: var(--indigo); color: var(--mineral); grid-row: 1 / 3;
}
.inside-step .h3 { padding-top: 7px; }
.inside-step p { grid-column: 2; font-size: 16px; line-height: 24px; max-width: 30em; }

/* the screen: the app's own look, on the mineral page, in a carbon bezel */
.screen {
  display: grid; gap: 10px; align-content: start; width: 100%; max-width: 340px; margin: 6px 6px 14px; justify-self: center;
  padding: 18px 16px 16px; border-radius: 32px; background: var(--mineral); color: var(--text);
  box-shadow: 0 0 0 6px var(--carbon), 0 28px 44px -32px color-mix(in srgb, var(--carbon) 55%, transparent);
  font-size: 13px; line-height: 18px;
}
.screen p { margin: 0; }
.s-top { display: flex; align-items: center; justify-content: space-between; }
.s-top .her { width: 14px; height: 24px; fill: var(--carbon); }
.s-pill { padding: 3px 10px; border-radius: 12px; background: var(--coral-tint); color: var(--carbon); font-size: 12px; line-height: 18px; font-weight: 600; }
.s-h { font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.s-q { font-size: 13px; line-height: 18px; font-weight: 700; }
.s-k { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-secondary); }
.s-b { font-size: 14px; line-height: 20px; font-weight: 700; }
.s-sm { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.s-n { font-size: 13px; line-height: 18px; }
.s-note { font-size: 12px; line-height: 16px; color: var(--text-secondary); }
.s-card { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--border-soft); }
.s-list { display: grid; gap: 4px; }
.s-list li { font-size: 13px; line-height: 18px; }
.s-list.is-ticks li, .s-list li { display: flex; gap: 8px; }
.s-list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 6px; border-radius: 50%; background: var(--indigo); }
.s-tile { padding: 14px; border-radius: 16px; background: var(--carbon); color: var(--text-on-dark); font-size: 14px; line-height: 20px; font-weight: 700; }

/* the app's bottom tab bar: a picture, not navigation (plain spans) */
.inside-defs { position: absolute; }
.s-tabs { display: flex; justify-content: space-around; margin-top: 2px; padding-top: 8px; border-top: 1px solid var(--border-soft); }
.s-tab { display: grid; justify-items: center; gap: 2px; font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-secondary); }
.s-tab svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.s-tab.is-active { color: var(--indigo-700); }

/* ring: an arc, never a number */
.s-ring { grid-template-columns: 56px 1fr; align-items: center; gap: 12px; background: var(--indigo-100); box-shadow: none; }
.ring { width: 56px; height: 56px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 7; }
.ring-track { stroke: var(--mineral); }
.ring-arc { stroke: var(--indigo); stroke-linecap: round; }

/* seven days, sample: heights are classes (the policy forbids style attributes) */
.bars { display: flex; align-items: flex-end; gap: 4px; height: 30px; }
.bars i { flex: 1; border-radius: 3px 3px 0 0; background: var(--indigo); }
.bars.is-energy i { background: var(--coral); }
.bars .b1 { height: 20%; } .bars .b2 { height: 40%; } .bars .b3 { height: 60%; } .bars .b4 { height: 80%; }

/* plan rows */
.s-plan { display: grid; gap: 8px; }
.s-plan li { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; font-size: 13px; line-height: 18px; padding-bottom: 8px; border-bottom: 1px dashed var(--border-strong); }
.s-plan li:last-child { border-bottom: 0; padding-bottom: 0; }
.s-plan b { flex: none; padding: 1px 8px; border-radius: 10px; background: var(--surface-subtle); font-size: 12px; line-height: 18px; }
.s-plan .is-done b { background: var(--indigo-100); color: var(--indigo-700); }
.s-plan .is-next b { background: var(--indigo); color: var(--mineral); }

/* check-in: the app's five-word answers as real buttons */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.chip {
  display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0 12px; border: 0; border-radius: 18px;
  background: var(--surface); box-shadow: inset 0 0 0 1.5px var(--border-strong); color: var(--text);
  font: 600 13px/18px var(--font); cursor: pointer;
}
.chip:hover { background: var(--indigo-100); }
.chip:active { transform: scale(0.98); background: var(--indigo-tint); }
.chip[aria-pressed="true"] { background: var(--indigo); color: var(--mineral); box-shadow: none; }
.chip[aria-pressed="true"]:hover { background: var(--indigo-700); }
.chip[aria-pressed="true"]:active { background: var(--indigo-700); }
.chip[disabled] { cursor: default; }
.s-reply { display: grid; gap: 4px; padding: 12px 14px; border-radius: 16px; background: var(--coral-tint); }
.s-reply .s-k { display: flex; align-items: center; gap: 8px; color: var(--carbon); }
.s-reply .s-k::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.s-reply-t { font-size: 13px; line-height: 18px; }
.s-reply-t[hidden] { display: none; }

/* in flow, two columns from 768 px: the step, then its screen */
@media (min-width: 768px) {
  .inside-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); column-gap: 48px; row-gap: 40px; }
  .inside-step { grid-column: 1; align-self: center; }
  .screen { grid-column: 2; justify-self: start; }
}
/* phones: step, then its screen, one after the other */
@media (max-width: 767.98px) {
  .inside-step:nth-child(1) { order: 1; } .screen:nth-child(1) { order: 2; }
  .inside-step:nth-child(2) { order: 3; } .screen:nth-child(2) { order: 4; }
  .inside-step:nth-child(3) { order: 5; } .screen:nth-child(3) { order: 6; }
  .inside-step:nth-child(4) { order: 7; } .screen:nth-child(4) { order: 8; }
  .inside-step:nth-child(5) { order: 9; } .screen:nth-child(5) { order: 10; }
  .inside-grid { gap: 20px; }
  .screen { margin-bottom: 28px; }
}

/* ---------- motion, only where motion is allowed ---------- */
@media (prefers-reduced-motion: no-preference) {
  .chip { transition: background-color var(--t-fast) var(--ease), transform var(--t-instant) var(--ease); }
  .s-reply.is-swapped .s-reply-t:not([hidden]) { animation: reply-in var(--t-base) var(--ease) both; }
  @keyframes reply-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

  /* phones: each screen turns up into place as it scrolls in (visible and still where scroll timelines are missing) */
  @keyframes screen-turn {
    from { transform: perspective(900px) rotateX(14deg) rotateY(-8deg) translateY(28px); }
    to { transform: none; }
  }
  @supports (animation-timeline: view()) {
    .inside:not(.is-3d) .screen { animation: screen-turn linear both; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}

/* ---------- the 3D layout ---------- */
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .inside.is-3d .inside-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; row-gap: 0; align-items: start; grid-template-rows: repeat(5, auto) 45vh; }
  .inside.is-3d .inside-step { grid-column: 1; min-height: 72vh; align-content: center; align-self: stretch; }
  .inside.is-3d .inside-step::before { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 2px var(--border-strong); }
  .inside.is-3d.is-ready .inside-step::before { transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); }
  .inside.is-3d .inside-step.is-here::before { background: var(--indigo); color: var(--mineral); box-shadow: none; }

  .inside.is-3d .inside-stage {
    display: grid; place-items: center; grid-column: 2; grid-row: 1 / span 6; align-self: start;
    position: sticky; top: calc(var(--header-h) + 12px); height: calc(100vh - var(--header-h) - 24px); min-height: 560px;
  }
  .inside.is-3d .inside-sway, .inside.is-3d .inside-rig, .inside.is-3d .inside-phone { display: block; }
  .inside.is-3d .inside-rig, .inside.is-3d .inside-phone { transform-style: preserve-3d; }
  .inside.is-3d .inside-sway { width: 300px; height: 616px; scale: var(--fit, 1); perspective: 1500px; perspective-origin: 50% 45%; }
  .inside.is-3d .inside-rig {
    position: relative; width: 100%; height: 100%; will-change: transform;
    --rx0: 12deg; --ry0: -42deg;
    transform: rotateX(calc(var(--rx0) + var(--ptx, 0deg))) rotateY(calc(var(--ry0) + var(--pty, 0deg)));
  }
  .inside.is-3d.is-ready .inside-rig { transition: transform var(--t-narrative) var(--ease); }
  .inside.is-3d.is-ready .inside-rig.is-tilting { transition: transform var(--t-instant) linear; }
  .inside.is-3d[data-step="1"] .inside-rig { --rx0: 6deg; --ry0: -22deg; }
  .inside.is-3d[data-step="2"] .inside-rig { --rx0: 4deg; --ry0: 18deg; }
  .inside.is-3d[data-step="3"] .inside-rig { --rx0: 2deg; --ry0: -16deg; }
  .inside.is-3d[data-step="4"] .inside-rig { --rx0: 4deg; --ry0: 20deg; }
  .inside.is-3d[data-step="5"] .inside-rig { --rx0: 6deg; --ry0: -8deg; }

  /* one calm flat disc behind the phone, 150 px back */
  .inside.is-3d .disc {
    display: block; position: absolute; left: 50%; top: 50%; width: 520px; height: 520px; margin: -260px 0 0 -260px;
    border-radius: 50%; background: var(--indigo-tint); transform: translateZ(-150px);
  }

  /* the phone: nine plates make the thickness, the front plate is the bezel */
  .inside.is-3d .inside-phone { position: absolute; inset: 0; }
  .inside.is-3d .slab { display: block; position: absolute; inset: 0; border-radius: 46px; background: var(--carbon-raised); }
  .inside.is-3d .slab:nth-child(1) { transform: translateZ(-8px); }
  .inside.is-3d .slab:nth-child(2) { transform: translateZ(-6px); }
  .inside.is-3d .slab:nth-child(3) { transform: translateZ(-4px); }
  .inside.is-3d .slab:nth-child(4) { transform: translateZ(-2px); }
  .inside.is-3d .slab:nth-child(5) { transform: translateZ(0); }
  .inside.is-3d .slab:nth-child(6) { transform: translateZ(2px); }
  .inside.is-3d .slab:nth-child(7) { transform: translateZ(4px); }
  .inside.is-3d .slab:nth-child(8) { transform: translateZ(6px); }
  .inside.is-3d .slab:nth-child(9) { transform: translateZ(8px); }
  .inside.is-3d .inside-face {
    display: block; position: absolute; inset: 0; padding: 10px; border-radius: 46px; background: var(--carbon);
    transform: translateZ(10px); box-shadow: 0 40px 60px -40px color-mix(in srgb, var(--carbon) 60%, transparent);
  }
  .inside.is-3d .inside-screens { display: block; position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: var(--mineral); }
  .inside.is-3d .island { display: block; position: absolute; top: 20px; left: 50%; width: 84px; height: 24px; margin-left: -42px; border-radius: 12px; background: var(--carbon); }

  /* the screens are stacked; the one for this step is on */
  .inside.is-3d .screen {
    position: absolute; inset: 0; width: auto; max-width: none; margin: 0; padding: 44px 16px 8px; border-radius: 0; box-shadow: none; gap: 5px; align-content: space-between;
    opacity: 0; visibility: hidden; transform: translateY(8px); pointer-events: none;
  }
  .inside.is-3d .screen.is-on { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .inside.is-3d.is-ready .screen { transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s linear var(--t-base); }
  .inside.is-3d.is-ready .screen.is-on { transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease), visibility 0s; }
  .inside.is-3d .chip { min-height: 30px; padding: 0 10px; font-size: 12px; line-height: 16px; border-radius: 15px; }
  .inside.is-3d .chips { gap: 5px; margin-top: 2px; }
  .inside.is-3d .s-h { font-size: 20px; line-height: 24px; }

  /* the floating cards: part of the rig, each at its own depth, in and out with the step */
  .inside.is-3d .float {
    display: block; position: absolute; width: 176px; padding: 10px 12px; border-radius: 14px; background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--border-soft), 0 28px 40px -28px color-mix(in srgb, var(--carbon) 50%, transparent);
    pointer-events: none; opacity: 0; transform: translateZ(calc(var(--z) - 28px));
  }
  .inside.is-3d.is-ready .float { transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease); }
  .inside.is-3d .float .f-k { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--text-secondary); }
  .inside.is-3d .float .f-v { font-size: 14px; line-height: 20px; font-weight: 700; }
  .inside.is-3d .f-a { --z: 140px; left: -190px; top: 120px; }
  .inside.is-3d .f-a[data-for="2"], .inside.is-3d .f-a[data-for="4"] { left: -242px; }
  .inside.is-3d .f-b { --z: 70px; left: 350px; top: 430px; width: 148px; }
  .inside.is-3d .f-a[data-for="2"] { top: 90px; }
  .inside.is-3d .f-a[data-for="3"] { top: 150px; }
  .inside.is-3d .f-b[data-for="3"] { top: 400px; }
  .inside.is-3d .f-a[data-for="4"] { top: 110px; }
  .inside.is-3d .f-b[data-for="4"] { top: 330px; }
  .inside.is-3d .f-a[data-for="5"] { top: 170px; }
  .inside.is-3d .f-b[data-for="5"] { top: 440px; }
  .inside.is-3d[data-step="1"] .float[data-for="1"], .inside.is-3d[data-step="0"] .float[data-for="1"],
  .inside.is-3d[data-step="2"] .float[data-for="2"], .inside.is-3d[data-step="3"] .float[data-for="3"],
  .inside.is-3d[data-step="4"] .float[data-for="4"], .inside.is-3d[data-step="5"] .float[data-for="5"] { opacity: 1; transform: translateZ(var(--z)); }
  .inside.is-3d.is-ready .f-b { transition-delay: 60ms; }

  /* a slow drift of the whole phone with the page's scroll (the rig's rotate property, composed with its pose), where scroll timelines exist */
  @keyframes inside-sway { from { rotate: y -6deg; } to { rotate: y 6deg; } }
  @supports (animation-timeline: view()) {
    .inside { view-timeline: --inside block; }
    .inside.is-3d .inside-rig { animation: inside-sway linear both; animation-timeline: --inside; animation-range: cover 0% cover 100%; }
  }
}

/* ---------- the hero phone (30 Oct): "the actual 3D app, playing". The 15-second film is a screen-only cut, so it plays on
   the screen of the same phone as the 3D section below: nine plates for the thickness, the carbon bezel, the calm disc
   behind it. Base = flat and complete: the phone faces you, the poster shows, nothing moves (no script, reduced motion).
   Motion allowed: the phone stands in a fixed 3D pose and turns into it once with the hero load. Motion allowed and a fine
   pointer: it floats while the film plays (one 15-second pass, then it rests) and leans a few degrees toward the pointer
   (motion.js, --ptx / --pty). Touch gets the pose only: no float, no lean. The crisis page has no hero. ---------- */
.hero { overflow-x: clip; }
.hero .demo { display: grid; gap: 14px; justify-items: center; align-content: start; width: 100%; }
.hero-stage { display: grid; place-items: center; width: 100%; padding: 16px 0 8px; }
.hero-float, .hero-rig { position: relative; }
.hero-rig { width: 264px; }
.hero-disc { position: absolute; left: 50%; top: 50%; width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%; background: var(--indigo-tint); }
.demo .slab { display: none; }
.demo-frame {
  position: relative; padding: 10px; border-radius: 46px; background: var(--carbon);
  box-shadow: 0 40px 60px -40px color-mix(in srgb, var(--carbon) 60%, transparent);
}
.demo-screen { position: relative; overflow: hidden; border-radius: 36px; aspect-ratio: 886 / 1920; background: var(--mineral); }
.demo-poster, .demo-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.demo-video { opacity: 0; }
.demo.is-playing .demo-video, .demo.has-played .demo-video { opacity: 1; }

/* the caption carries the film's one control: play, pause, play again. Its column is kept while the script has not shown
   it yet, so the caption never moves when the button appears (no layout shift). */
.demo-caption { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; column-gap: 12px; max-width: 320px; color: var(--text-secondary); font-size: 14px; line-height: 20px; }
.demo-caption > span { grid-column: 2; }
.demo-toggle {
  flex: none; width: 44px; height: 44px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%;
  cursor: pointer; background: var(--carbon); color: var(--mineral);
}
.demo-toggle:hover { background: var(--carbon-raised); }
.demo-toggle:active { transform: scale(0.98); }
.demo-toggle svg { width: 18px; height: 18px; }
.demo-toggle .icon-pause, .demo-toggle .icon-replay { display: none; }
.demo.is-playing .demo-toggle .icon-play { display: none; }
.demo.is-playing .demo-toggle .icon-pause { display: block; }
.demo.has-ended .demo-toggle .icon-play { display: none; }
.demo.has-ended .demo-toggle .icon-replay { display: block; }

@media (min-width: 1024px) {
  .hero-rig { width: 300px; }
  .hero-disc { width: 420px; height: 420px; margin: -210px 0 0 -210px; }
}

@media (prefers-reduced-motion: no-preference) {
  .demo-video { transition: opacity var(--t-base) var(--ease); }
  .demo-toggle { transition: transform var(--t-instant) var(--ease), background-color var(--t-fast) var(--ease); }

  /* the pose: perspective on the flat float wrapper, preserve-3d only on the rig (as the 3D section's chain) */
  .hero-float { perspective: 1500px; perspective-origin: 50% 40%; }
  .hero-rig {
    transform-style: preserve-3d; --rx0: 4deg; --ry0: -12deg;
    transform: rotateX(calc(var(--rx0) + var(--ptx, 0deg))) rotateY(calc(var(--ry0) + var(--pty, 0deg)));
    transition: transform var(--t-slow) var(--ease);
    animation: hero-turn var(--t-narrative) var(--ease) 200ms backwards;
  }
  .hero-rig.is-tilting { transition: transform var(--t-instant) linear; }
  .hero-disc { transform: translateZ(-150px); }
  .demo .slab { display: block; position: absolute; inset: 0; border-radius: 46px; background: var(--carbon-raised); }
  .demo .slab:nth-child(2) { transform: translateZ(-8px); }
  .demo .slab:nth-child(3) { transform: translateZ(-6px); }
  .demo .slab:nth-child(4) { transform: translateZ(-4px); }
  .demo .slab:nth-child(5) { transform: translateZ(-2px); }
  .demo .slab:nth-child(6) { transform: translateZ(0); }
  .demo .slab:nth-child(7) { transform: translateZ(2px); }
  .demo .slab:nth-child(8) { transform: translateZ(4px); }
  .demo .slab:nth-child(9) { transform: translateZ(6px); }
  .demo .slab:nth-child(10) { transform: translateZ(8px); }
  .demo-frame { transform: translateZ(10px); }
  /* the hero load turns the phone into its pose (the rotate and translate properties, so its pose and lean stay free) */
  @keyframes hero-turn { from { rotate: y 26deg; translate: 0 14px; } to { rotate: y 0deg; translate: 0 0; } }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 1024px) {
  .hero-rig { --rx0: 6deg; --ry0: -20deg; }
}
/* the float: one gentle 15-second pass while the film plays, paused with it; it never repeats by itself */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .hero-float { animation: hero-float 15s ease-in-out both paused; }
  .demo.is-playing .hero-float { animation-play-state: running; }
  @keyframes hero-float {
    0% { translate: 0 0; } 18% { translate: 0 -7px; } 36% { translate: 0 0; }
    54% { translate: 0 -7px; } 72% { translate: 0 0; } 86% { translate: 0 -4px; } 100% { translate: 0 0; }
  }
}