/* herofilm.css — the frame, the camera, the drill-in screens, the pointer. */

.hero-shell {
  position: relative;
  width: 300px;
  transition: transform 700ms cubic-bezier(.22,.61,.36,1);
  transform-origin: 50% 40%;
}
/* The bloom behind the phone. Sits under everything and never moves with the
   camera — the light source is in the room, not on the lens. */
.hero-shell::before {
  content: ''; position: absolute; inset: -14% -12%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 42%, var(--brand-weak) 0%, transparent 70%);
  filter: blur(26px); opacity: .85;
}
.hero-frame {
  position: relative; z-index: 2;
  width: 300px; height: 560px;
  overflow: hidden;
  border-radius: 30px;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: 0 30px 70px -22px rgba(16,24,40,.30), 0 2px 6px rgba(16,24,40,.05);
  cursor: grab;
  isolation: isolate;
}
.hero-frame:active { cursor: grabbing; }
.hero-screen { position: relative; width: 100%; height: 100%; overflow: hidden; }

/* The camera. transform-origin at the centre so a push-in grows around the
   focal point rather than the top-left corner. */
.hero-stage {
  position: absolute; inset: 0;
  transform-origin: 50% 50%;
  transform: translate3d(0,0,0) scale(.98);
  backface-visibility: hidden;
}

.hero-topbar {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 14px 10px;
}
.hero-shop { font-family: var(--font-display, inherit); font-weight: 700; font-size: .95rem; letter-spacing: -.01em; white-space: nowrap; }
.hero-ai, .hero-edit {
  margin-left: auto; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text); border-radius: 999px; padding: 5px 11px;
  font: 600 .68rem/1 inherit; cursor: pointer; white-space: nowrap;
}
.hero-ai { margin-left: auto; background: var(--brand-weak); color: var(--brand); border-color: transparent; position: relative; overflow: hidden; }
.hero-edit { margin-left: 0; }
/* The only shimmering thing on the page. The film performs every gesture in
   the product except this one, so the call to action is an unfinished
   sentence rather than a caption. */
.hero-ai.shimmer::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,.75) 50%, transparent 80%);
  transform: translateX(-100%);
  animation: heroShim 2.4s ease-in-out infinite;
}
@keyframes heroShim { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(200%); } }

#heroBoard { padding: 0 12px 16px; }

/* The pointer sprite lives in FRAME coordinates, outside the transformed
   stage, so it stays one size however far the camera has pushed in. A finger
   does not get bigger when you lean closer. */
.hero-cursor {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none;
  width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%;
  background: rgba(23,26,31,.14); border: 1.5px solid rgba(23,26,31,.34);
  opacity: 0; transition: transform 420ms cubic-bezier(.65,0,.2,1), opacity 180ms linear;
}
.hero-cursor.down { background: var(--brand); border-color: var(--brand); transform-origin: 50% 50%; }
.hero-cursor::after {
  content: ''; position: absolute; inset: -10px; border-radius: 50%;
  border: 2px solid var(--brand); opacity: 0; transition: opacity .2s;
}
.hero-cursor.down::after { opacity: .35; animation: heroPing .5s ease-out; }
@keyframes heroPing { from { transform: scale(.55); opacity: .6; } to { transform: scale(1.15); opacity: 0; } }

/* Synthetic events do not fire :active. */
.film-tapped { transform: scale(.94); transition: transform 110ms; }

/* ── the drill-in layer ─────────────────────────────────────────────── */
.hero-app {
  position: absolute; inset: 0; z-index: 4;
  background: var(--bg);
  opacity: 0; transform: translateY(8px);
  transition: opacity 260ms cubic-bezier(.22,.61,.36,1), transform 260ms cubic-bezier(.22,.61,.36,1);
}
.hero-app.in { opacity: 1; transform: none; }
.ha-top { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px; border-bottom: 1px solid var(--border); }
.ha-back { border: 0; background: none; font-size: 1.2rem; color: var(--muted); cursor: pointer; padding: 0 2px; }
.ha-top b { font-size: .95rem; }
.ha-date { margin-left: auto; font-size: .7rem; color: var(--muted); }
.ha-list { padding: 6px 0; }
.ha-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 14px;
  border-bottom: 1px solid var(--border);
  animation: haIn .34s cubic-bezier(.22,.61,.36,1) both; animation-delay: calc(var(--i) * 34ms);
}
@keyframes haIn { from { opacity: 0; transform: translateY(7px); } }
.ha-t { font-size: .68rem; color: var(--muted); width: 58px; flex: none; font-variant-numeric: tabular-nums; }
.ha-w { display: flex; flex-direction: column; line-height: 1.25; }
.ha-w b { font-size: .8rem; font-weight: 600; }
.ha-w span { font-size: .66rem; color: var(--muted); }
.ha-owed { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--amber); }
.ha-ok { margin-left: auto; font-size: .68rem; color: var(--green); font-weight: 600; }
/* The appointment the film just made, arriving in its slot. */
.ha-row.fresh { background: var(--green-weak); }
.ha-row.fresh b::after { content: ' · new'; color: var(--green); font-weight: 700; font-size: .62rem; }

.ha-scrim { position: absolute; inset: 0; background: rgba(16,24,40,.34); animation: haFade .18s both; }
@keyframes haFade { from { opacity: 0; } }
.ha-sheet {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: var(--surface); border-radius: 18px 18px 0 0;
  padding: 16px 14px 18px; border-top: 1px solid var(--border);
  animation: haUp .26s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes haUp { from { transform: translateY(102%); } }
.ha-sheet h3 { margin: 0 0 2px; font-size: .95rem; }
.ha-sub { font-size: .68rem; color: var(--muted); margin-bottom: 12px; }
.ha-f { margin-bottom: 11px; }
.ha-f label { display: block; font-size: .62rem; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 4px; font-weight: 600; }
.ha-in { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: .8rem; background: var(--surface-2); }
.ha-in.ha-dim { color: var(--muted); }
.ha-chips { display: flex; gap: 6px; }
.ha-chips.wrap { flex-wrap: wrap; margin-bottom: 12px; }
.ha-chip {
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 999px; padding: 6px 11px; font: 600 .7rem/1 inherit; cursor: pointer;
}
.ha-chip.on { background: var(--brand-weak); color: var(--brand); border-color: transparent; }
.ha-amt { font-family: var(--font-display, inherit); font-size: 2.1rem; font-weight: 700; letter-spacing: -.02em; margin: 2px 0 12px; font-variant-numeric: tabular-nums; }
.ha-go {
  width: 100%; border: 0; border-radius: 12px; background: var(--brand); color: var(--on-brand);
  padding: 11px; font: 700 .82rem/1 inherit; cursor: pointer;
}
.ha-ans { min-height: 84px; }
.ha-ans .ha-n { font-family: var(--font-display, inherit); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.ha-ans .ha-t { font-size: .76rem; line-height: 1.45; margin: 4px 0 8px; min-height: 2.2em; }
.ha-ans .ha-s { font-size: .62rem; color: var(--faint); border-top: 1px solid var(--border); padding-top: 6px; }

/* ── the invitation ─────────────────────────────────────────────────── */
/* `display` on a class beats the UA sheet's `[hidden] { display: none }`, so
   this pill painted through every beat of the film — the invitation that is
   supposed to ARRIVE in the stillness of B11 was simply always there, which
   spends the one moment the whole sequence is built to earn. */
.hero-cta[hidden], .hero-app[hidden] { display: none !important; }
.hero-cta {
  position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 7;
  display: flex; justify-content: center;
  animation: haIn .34s cubic-bezier(.22,.61,.36,1) both;
}
.hero-cta button {
  border: 1px solid var(--border); background: rgba(255,255,255,.82);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  color: var(--text); border-radius: 999px; padding: 9px 16px;
  font: 700 .76rem/1 inherit; cursor: pointer;
  box-shadow: 0 8px 22px -8px rgba(16,24,40,.3);
}
.hero-yours {
  position: absolute; left: 12px; bottom: 14px; z-index: 7;
  background: var(--text); color: var(--bg); border-radius: 999px;
  padding: 7px 13px; font: 700 .72rem/1 inherit;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.hero-yours.show { opacity: 1; transform: none; }

.hero-microline { margin: 26px 0 0; text-align: center; font-size: .68rem; color: var(--faint); }

/* Containment. The engine's gallery is position:fixed; belt and braces so it
   can never darken the whole landing page. */
#heroScreen .saka-sheet { position: absolute; }
#heroScreen .saka-card { max-width: none; border-radius: 18px 18px 0 0; }

/* The still fallback, if the engine never mounts. Never a blank rectangle. */
.hero-frame.is-still { display: grid; place-items: start center; }
.hero-frame.is-still img { width: 100%; height: auto; display: block; }

@media (max-width: 899px) {
  .hero-shell, .hero-frame { width: min(300px, 78vw); }
  .hero-frame { height: 480px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-shell, .hero-stage { transition: none !important; }
  .hero-stage { transform: translate3d(0,0,0) scale(1) !important; }
  .hero-app, .ha-row, .ha-sheet, .ha-scrim, .hero-cta { animation: none !important; transition: none !important; }
  .hero-ai.shimmer::after { animation: none !important; opacity: 0; }
  .hero-cursor { display: none; }
}


/* ── the film's own restraint ──────────────────────────────────────────
   In the app these are 22px controls you aim at. Here a whole board sits
   inside 300px, so a red minus and a blue arrow on all thirteen tiles read
   as confetti — the loudest thing in a frame whose subject is the numbers.
   They stay (they are the evidence the board is editable) but they stop
   competing: smaller, softer, and desaturated toward the surface. */
#heroBoard .saka-rm, #heroBoard .saka-rsz {
  width: 15px; height: 15px; font-size: 9px; border-width: 1.5px;
  opacity: .5;
}
#heroBoard .saka-rm { background: var(--muted); }
#heroBoard .saka-rsz { background: var(--faint); }

/* The gallery is taller than the phone, and it was anchoring so its head —
   the line that says what the shelf IS — sat above the frame and got cut,
   leaving a stray "it." at the top edge. Pin it to the bottom and cap it to
   the frame so it opens like a sheet instead of a clipped page. */
#heroBoard .saka-sheet { align-items: flex-end; }
#heroBoard .saka-card {
  max-height: 82%; border-radius: 18px 18px 0 0;
  /* The sheet is full-bleed in the app, where the phone IS the frame. Here the
     camera can be pushed in when it opens — the beat that taps the shelf holds
     1.1 — and a 298px card in a 300px frame crops its own heading to "your
     command centre". Inset it so it survives the film's widest push, and it
     reads more like a sheet for the same reason. */
  width: 86%; margin-inline: auto;
}


/* The topbar's three children wanted 320px inside a 300px phone, and the AI
   pill was the one that yielded — clipped to "Ask your bool", a half-drawn k
   in the hero of the page. The pill is the invitation; the shop name is
   chrome. So the pill never compresses and the name gives way instead. */
.hero-ai { flex: none; }
.hero-shop { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* When the layer is carrying a sheet it must not paint its own ground — the
   scrim is there to dim the board the sheet rose from, and an opaque layer
   under it turns that into a grey void with a card at the bottom. */
.hero-app.is-sheet { background: transparent; }