/* ==========================================================================
   hero.css: the shared hero system for every aczen.live page.
   Owns the breadcrumb, the proof row, the right-hand "proof panel", the
   one-time entrance sequence and the cross-page view transition.
   Layout of .page-hero itself (padding, grid, title, lede, CTA row) lives in
   pages.css; tokens come from styles.css. Class names here are a contract
   other pages are written against, so rename nothing without a sweep.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Breadcrumb above the h1
   -------------------------------------------------------------------------- */

/* The nav landmark: sits directly above the h1, so it reads as the title's address */
.page-crumbs {
  margin-bottom: 20px; /* clear step before the heavy headline block */
  font-size: 14px; /* small: it orients, it doesn't compete with the title */
  line-height: 1.4; /* compact single line, still comfortable if it wraps on phones */
  color: var(--ink-soft); /* secondary text, 7.6:1 on white */
}

/* The ordered list reset into an inline trail */
.page-crumbs ol {
  display: flex; /* crumbs flow in one row */
  flex-wrap: wrap; /* a long trail wraps on a 360px phone instead of overflowing */
  gap: 4px 8px; /* row gap when wrapped, space around each separator otherwise */
  margin: 0; /* list default margin would push the title down */
  padding: 0; /* list default indent would break alignment with the h1 */
  list-style: none; /* the slash separators replace list numbers */
}

/* Each crumb lays out its separator and text side by side */
.page-crumbs li {
  display: inline-flex; /* keeps the slash and its label on the same line */
  align-items: baseline; /* the slash sits on the text baseline, not centred on the box */
  gap: 8px; /* same spacing as between items, so the rhythm is even */
  min-width: 0; /* lets a long current-page name shrink rather than force overflow */
}

/* Separator drawn in CSS so the markup stays a clean list for screen readers */
.page-crumbs li + li::before {
  content: "/"; /* fallback for engines without CSS alt text: the slash still draws */
  content: "/" / ""; /* empty alt text keeps the slash out of the accessibility tree */
  color: var(--rule); /* quieter than the text: gray-200 is decorative, the words carry meaning */
  color: color-mix(in srgb, var(--ink-soft) 45%, transparent); /* visible but receding where color-mix is supported */
}

/* Crumb links: muted until hovered, so the trail doesn't compete with the page's real links */
.page-crumbs a {
  color: var(--ink-soft); /* same tone as the rest of the trail */
  text-decoration: none; /* a row of underlines above a headline is noise */
  border-radius: 4px; /* rounds the focus ring so it hugs the word */
}

/* Hover restores the underline as the non-colour cue that this is a link */
.page-crumbs a:hover {
  color: var(--ink); /* darkens toward full ink on hover */
  text-decoration-line: underline; /* the underline is the real affordance */
}

/* The current page: plain text, marked by weight and ink, not by colour alone */
.page-crumbs [aria-current="page"] {
  color: var(--ink); /* full ink says "you are here" */
  font-weight: 500; /* a notch firmer than the links before it */
  overflow-wrap: anywhere; /* a very long page name breaks instead of widening the page */
}

/* --------------------------------------------------------------------------
   2. Proof row under the CTAs
   -------------------------------------------------------------------------- */

/* Up to three real facts from the page, as a wrapping row of ticked items */
.page-proof {
  display: flex; /* one row on wide screens */
  flex-wrap: wrap; /* wraps on phones instead of overflowing */
  gap: 8px 20px; /* row gap when wrapped, space between items otherwise */
  margin: 20px 0 0; /* gap under the CTA row; list default margins removed */
  padding: 0; /* list default indent removed */
  list-style: none; /* the tick replaces the bullet */
  font-size: 14px; /* small: supporting evidence, not a headline */
  line-height: 1.4; /* compact when an item wraps to two lines */
  color: var(--ink-soft); /* secondary, 7.6:1 on white */
}

/* Each fact reserves room for its tick */
.page-proof li {
  position: relative; /* anchor for the absolutely placed tick */
  padding-left: 20px; /* space for the tick so wrapped lines align with the first */
}

/* Done-green tick, the same mark the homepage promises use */
.page-proof li::before {
  content: "✓"; /* fallback for engines without CSS alt text: the tick still draws */
  content: "✓" / ""; /* decorative: screen readers skip it instead of saying "check mark" each time */
  position: absolute; /* sits in the left padding, out of the text flow */
  left: 0; /* flush with the item's left edge */
  top: 0; /* aligned with the first line of text */
  color: var(--done); /* done green, 5.3:1 on white */
  font-weight: 700; /* a thin tick is easy to miss at 14px */
}

/* --------------------------------------------------------------------------
   3. Proof panel: the right-hand product surface
   -------------------------------------------------------------------------- */

/* A white surface styled like an Aczen screen, so the hero shows the product instead of describing it */
.hero-panel {
  margin: 0; /* the panel is often a <figure>, whose default side margins would push it off-grid */
  background: var(--paper); /* white surface, like the dashboard itself */
  border: 1px solid var(--rule); /* hairline edge carries the panel on a white page */
  border-radius: var(--radius-lg); /* top tier of the radius hierarchy: product panels */
  box-shadow: 0 1px 0 var(--rule), 0 24px 48px -24px rgb(4 33 88 / 0.18); /* a hard page-edge line plus a soft lift tinted with brand-deep navy, never generic grey */
  overflow: hidden; /* clips the tinted head band to the rounded corners */
  min-width: 0; /* as a grid item it may shrink below its content instead of causing horizontal scroll */
}

/* Head band: the panel's title bar, tinted like aczen.in's smebank-50 surfaces */
.hero-panel-head {
  display: flex; /* title and chip side by side */
  align-items: center; /* chip centres against the title line */
  justify-content: space-between; /* title left, status chip right, like a dashboard card header */
  gap: 12px; /* keeps a long title from touching the chip */
  padding: 16px 20px; /* per the contract: a comfortable header bar */
  border-bottom: 1px solid var(--rule); /* separates the header from the data below */
  background: var(--paper-deep); /* smebank-50 band reads as panel chrome, not content */
  font-size: 15px; /* small-UI size used for panel titles */
  font-weight: 600; /* semibold: a label, not a heading shout */
  line-height: 1.3; /* compact if the title wraps */
  color: var(--ink); /* full ink on the tint, 16:1 */
}

/* Any heading element used as the panel title inherits the head's type instead of the global h-scale */
.hero-panel-head :is(h2, h3, p) {
  margin: 0; /* heading resets elsewhere may not cover p */
  font: inherit; /* takes 15px/600 from the head band */
  color: inherit; /* stays ink */
}

/* Panel body: holds rows, stats or a feature list */
.hero-panel-body {
  padding: 8px 20px 16px; /* tight top because the first row brings its own 12px */
}

/* One label/value row, like a line in a ledger */
.hero-panel-row {
  display: flex; /* label and value on one line */
  align-items: baseline; /* label and value share a baseline even at different weights */
  justify-content: space-between; /* label left, value right, like a statement */
  gap: 16px; /* keeps a long label from running into its value */
  padding: 12px 0; /* per the contract: breathing room between ledger lines */
  border-bottom: 1px dashed var(--rule); /* dashed like a ruled ledger line, lighter than a solid divider */
  font-size: 15px; /* the panel's reading size */
}

/* The last row sits on the body's padding, so it needs no rule of its own */
.hero-panel-row:last-child {
  border-bottom: 0; /* avoids a dangling dashed line at the bottom of the panel */
}

/* Row label: the first child, whatever element it is */
.hero-panel-row > :first-child {
  color: var(--ink-soft); /* secondary: the value is what the eye should land on */
  min-width: 0; /* lets the label wrap instead of pushing the value off the panel */
}

/* Row value: the last child */
.hero-panel-row > :last-child:not(:first-child) {
  color: var(--ink); /* full ink so the value leads */
  font-weight: 600; /* firmer than the label */
  font-variant-numeric: proportional-nums; /* proportional, not tabular: Inter's tabular set gives hyphens a digit-wide box, so "13-week" read as "13 - week"; right-alignment already lines values up */
  text-align: right; /* right-aligned like figures in a statement */
  flex-shrink: 0; /* the value never wraps; the label gives way instead */
}

/* Stat grid: two or three headline numbers side by side */
.hero-panel-stats {
  display: grid; /* equal columns without per-item widths */
  grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); /* two or three columns as space allows; min() stops overflow on tiny screens */
  gap: 16px; /* even separation between numbers */
  margin: 0; /* in case it's a <dl> or <ul> */
  padding: 12px 0; /* aligns with the row rhythm above and below */
  list-style: none; /* if authored as a list, no bullets */
}

/* One stat: number above its label */
.hero-panel-stat {
  display: flex; /* stacks value and label */
  flex-direction: column; /* value on top */
  gap: 4px; /* tight pairing between a number and what it counts */
  min-width: 0; /* lets long labels wrap inside their column */
}

/* The number itself: heavy display cut */
.hero-panel-stat-value {
  margin: 0; /* in case it's a <dd> or <p> */
  font-size: 1.75rem; /* large enough to lead, small enough for three in a row */
  font-variation-settings: "opsz" 32; /* Inter's display cut, matching the headline family */
  font-weight: 800; /* heavy, like the page title */
  line-height: 1.05; /* no extra space around the number */
  letter-spacing: -0.02em; /* display-size digits need tightening */
  font-variant-numeric: proportional-nums; /* stats stand alone (no column to align), and tabular spacing widened hyphens in values like "13-week" */
  color: var(--ink); /* primary text */
}

/* What the number counts */
.hero-panel-stat-label {
  margin: 0; /* in case it's a <dt> or <p> */
  font-size: 13px; /* smaller than body: it qualifies the number */
  line-height: 1.35; /* readable when it wraps to two lines */
  color: var(--ink-soft); /* secondary, 7.6:1 on white */
}

/* Feature lines: a plain list with small brand squares, like checklist rows in the app */
.hero-panel-list {
  margin: 0; /* list default margin removed */
  padding: 4px 0; /* small cushion so the first and last lines don't touch the body edge */
  list-style: none; /* the square bullet replaces the disc */
}

/* One feature line */
.hero-panel-list li {
  position: relative; /* anchor for the square bullet */
  padding: 8px 0 8px 18px; /* vertical rhythm between lines; left room for the bullet */
  font-size: 15px; /* the panel's reading size */
  line-height: 1.45; /* comfortable when a line wraps */
  color: var(--ink); /* full ink: these are the facts being shown */
}

/* The square bullet: brand blue, echoing the calendar's square day cells */
.hero-panel-list li::before {
  content: ""; /* purely decorative, so nothing for screen readers to read */
  position: absolute; /* placed in the left padding */
  left: 0; /* flush with the list's edge */
  top: calc(8px + 0.725em - 3px); /* top padding plus half the line box, minus half the square: centres it on the first line */
  width: 6px; /* small enough to be a bullet, not an icon */
  height: 6px; /* square */
  border-radius: 1px; /* barely softened, like a printed key */
  background: var(--brand); /* brand blue marks each line as an Aczen feature */
}

/* Status chip: a small pill in the head band or inside a row */
.hero-chip {
  display: inline-flex; /* lets the pill hug its text and sit inline in a row */
  align-items: center; /* centres text vertically in the pill */
  flex-shrink: 0; /* never squashed by a long panel title */
  padding: 3px 10px; /* per the contract: compact pill */
  border-radius: 999px; /* full capsule, distinct from the card and button radius tiers */
  background: var(--paper-deep); /* contract default: ink-soft on paper-deep, a neutral status */
  color: var(--ink-soft); /* neutral status, 6.8:1 on smebank-50 */
  font-size: 12px; /* small label */
  font-weight: 600; /* legible at 12px */
  line-height: 1.4; /* keeps the pill a consistent height */
  white-space: nowrap; /* a two-word status must not break inside the pill */
}

/* A neutral chip inside the tinted head would vanish into it, so give it a white fill there */
.hero-panel-head .hero-chip:not(.is-done, .is-due, .is-info) {
  background: var(--paper); /* white pill on the smebank-50 band stays visible */
  box-shadow: inset 0 0 0 1px var(--rule); /* hairline edge so the white pill has a shape */
}

/* Done: filed, paid, matched */
.hero-chip.is-done {
  background: var(--done-tint); /* light green */
  color: var(--done); /* done green, 4.7:1 on its tint */
}

/* Due: the only orange chip, reserved for "needs action" */
.hero-chip.is-due {
  background: var(--deadline-tint); /* smeorange-100 */
  color: var(--deadline-text); /* dark orange text, 4.5:1 on its tint; raw smeorange would fail */
}

/* Info: available, informational, nothing due */
.hero-chip.is-info {
  background: var(--info-tint); /* smebank-100 */
  color: var(--brand-hover); /* smebank-700 keeps small text above AA on the blue tint (brand-600 is borderline) */
}

/* Panel footer: a source line or small print */
.hero-panel-foot {
  padding: 12px 20px; /* per the contract */
  border-top: 1px solid var(--rule); /* separates the footnote from the data */
  font-size: 13px; /* small print */
  line-height: 1.45; /* readable at small size */
  color: var(--ink-soft); /* secondary, 7.6:1 on white */
}

/* --------------------------------------------------------------------------
   4. Entrance: one orchestrated load moment
   Content is visible by default. It only starts hidden once hero.js has
   indexed it and added html.hero-ready, and only for people who allow
   motion, so a failed or blocked script can never leave the hero blank.
   -------------------------------------------------------------------------- */

/* Everything animated sits behind the reduced-motion query */
@media (prefers-reduced-motion: no-preference) {
  /* Each revealed element rises 14px and fades in, staggered by its document-order index */
  html.hero-ready :is(.page-hero, .hero) [data-reveal] {
    animation: hero-reveal 560ms var(--ease-out) both; /* "both" holds the start frame during the delay, then keeps the end frame */
    animation-delay: calc(var(--reveal-i, 0) * 70ms); /* 70ms steps: fast enough to feel like one gesture, slow enough to read as a sequence */
  }

  /* The panel also settles from 98% scale, so it lands like a surface rather than sliding like text */
  html.hero-ready :is(.page-hero, .hero) .hero-panel[data-reveal] {
    animation-name: hero-reveal-panel; /* same timing as the text, different keyframes */
    transform-origin: 50% 100%; /* grows up from its base, as if placed on the page */
  }

  /* Inside a revealed panel, the data lines tick in one after another, 40ms apart, just after the panel lands */
  html.hero-ready :is(.page-hero, .hero) [data-reveal] :is(.hero-panel-row, .hero-panel-stat, .hero-panel-list li) {
    animation: hero-reveal-row 420ms var(--ease-out) both; /* shorter than the panel so the rows finish close behind it */
    animation-delay: calc(var(--reveal-i, 0) * 70ms + 180ms + var(--row-i, 0) * 40ms); /* panel's own delay, a beat for it to settle, then 40ms per line (--row-i set by hero.js) */
  }
}

/* Text and blocks: fade up 14px */
@keyframes hero-reveal {
  /* Start: transparent and slightly low */
  from {
    opacity: 0; /* invisible */
    transform: translateY(14px); /* a short rise, not a fly-in */
  }
  /* End: resting position */
  to {
    opacity: 1; /* fully visible */
    transform: none; /* no leftover transform, so no new stacking or blur on text */
  }
}

/* Panel: fade up and settle from 98% scale */
@keyframes hero-reveal-panel {
  /* Start: transparent, low and a touch small */
  from {
    opacity: 0; /* invisible */
    transform: translateY(14px) scale(0.98); /* same rise as the text plus a subtle settle */
  }
  /* End: resting position */
  to {
    opacity: 1; /* fully visible */
    transform: none; /* clears the transform so the panel's text renders crisply */
  }
}

/* Panel rows: a shorter 6px rise so they read as data filling in, not as separate cards */
@keyframes hero-reveal-row {
  /* Start: transparent and a hair low */
  from {
    opacity: 0; /* invisible */
    transform: translateY(6px); /* smaller than the page-level rise, per the hierarchy */
  }
  /* End: resting position */
  to {
    opacity: 1; /* fully visible */
    transform: none; /* no leftover transform */
  }
}

/* --------------------------------------------------------------------------
   5. Cross-page view transitions (same-origin navigations, Chromium 126+)
   Browsers without support ignore these rules and navigate normally.
   -------------------------------------------------------------------------- */

/* Only opt in when motion is welcome; reduced-motion users get instant page swaps */
@media (prefers-reduced-motion: no-preference) {
  /* Opts every same-origin link click into a view transition, no JS needed */
  @view-transition {
    navigation: auto; /* "auto" means ordinary link navigations animate */
  }
}

/* The header is identical on every page, so it gets its own snapshot and holds still while the page changes under it */
.site-header {
  view-transition-name: site-header; /* a named group is matched old-to-new and, being identical, shows no visible change */
}

/* The h1 morphs from one page's title position to the next, the one moment that ties pages together */
.page-title,
.hero .display {
  view-transition-name: page-title; /* one h1 per page, so the name is always unique as the spec requires */
}

/* Outgoing page: a quick fade with a small upward drift */
::view-transition-old(root) {
  animation: hero-vt-out 180ms var(--ease-out) both; /* 180ms keeps navigation feeling instant */
}

/* Incoming page: fades in from 8px below */
::view-transition-new(root) {
  animation: hero-vt-in 180ms var(--ease-out) both; /* same duration so the cross-fade is symmetric */
}

/* The title's position and size morph over a longer 320ms, so it reads as the thread between pages */
::view-transition-group(page-title) {
  animation-duration: 320ms; /* longer than the root fade: the title is the moment worth watching */
  animation-timing-function: var(--ease-out); /* the site's shared deceleration curve */
}

/* Old page leaves */
@keyframes hero-vt-out {
  /* Fully visible at the start */
  from {
    opacity: 1; /* starts as it was */
  }
  /* Faded and nudged up at the end */
  to {
    opacity: 0; /* gone */
    transform: translateY(-8px); /* drifts the way a page turns up */
  }
}

/* New page arrives */
@keyframes hero-vt-in {
  /* Transparent and 8px low at the start */
  from {
    opacity: 0; /* invisible */
    transform: translateY(8px); /* rises into place */
  }
  /* Resting at the end */
  to {
    opacity: 1; /* visible */
    transform: none; /* in place */
  }
}