/* home.css — the landing page, and only the landing page.
   Loaded by index.html after style.css and site.css; no other page asks for it
   (tests/test_home.py holds both halves of that).

   The idea is the light table. A photographer culls by laying the contact
   sheet out on a lit table, marking the keeper and letting the rest drop away.
   The brand mark already makes that gesture — a cyan detection bracket closing
   on one frame, a gold dot at its centre — so the hero does it to six real
   frames from the demo set, and that is the one moment on the page that moves
   on its own. Everything else stays still until someone points at it.

   The palette, the typeface and the shared components (badges, buttons,
   bands) are site.css's: every site page is built from the same table, sheet
   and mount. What is here is only what this page has and the others do not.

   Every new class is prefixed hm-. The few unprefixed ones (.ha-checks, .ck,
   .ai-card, .ft-tile, .ft) are names the tests look for, and their rules moved
   here from site.css because nothing else uses them. */

/* ------------------------------------------------------------- the page -- */

.hm-band { padding: clamp(48px, 8vw, 96px) 0; --canvas-2: var(--sheet); }
/* Raised things take the opposite surface, as on .band and .band-dark. */
.hm-band-sheet {
  background: var(--sheet);
  border-block: 1px solid var(--line);
  --canvas-2: var(--table);
}

/* Type. Steps from the classic scale — 14, 18, 21, 36, and the display clamp. */
.hm-h1 {
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-size: clamp(40px, 8.4vw, 88px);
  font-stretch: 116%; font-weight: 760;
  line-height: .96; letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}
.hm-h2 {
  margin: 0 0 8px;
  font-size: clamp(28px, 4vw, 36px);
  font-stretch: 108%; font-weight: 700;
  line-height: 1.1; letter-spacing: -.01em;
  color: var(--ink);
}
.hm-lede {
  margin: 0 0 28px; max-width: 30ch;
  font-size: 21px; line-height: 1.4; font-weight: 450;
  color: var(--ink);
}
.hm-intro { max-width: 40rem; margin-bottom: clamp(24px, 3.4vw, 36px); }
.hm-intro p { margin: 0; color: var(--ink-dim); }
.hm-small {
  font-size: 14px; font-stretch: 82%; font-weight: 520;
  letter-spacing: .01em; color: var(--ink-dim);
}

/* -------------------------------------------------------------- the hero -- */

/* One column on a phone, in reading order: headline, lede, the sheet, what it
   does, where to get it. On a wide screen the headline runs across the top and
   the sheet takes the right-hand column beside the copy. */
.hm-hero {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "h1" "lede" "sheet" "checks" "get";
}
.hm-hero .hm-h1 { grid-area: h1; }
.hm-hero .hm-lede { grid-area: lede; }
.hm-hero .hm-sheet { grid-area: sheet; margin: 0 0 36px; }
.hm-hero .ha-checks { grid-area: checks; }
.hm-hero .ha-get { grid-area: get; }

@media (min-width: 960px) {
  .hm-hero {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "h1     h1"
      "lede   sheet"
      "checks sheet"
      "get    sheet";
    column-gap: clamp(40px, 5vw, 72px);
  }
  .hm-hero .hm-sheet { margin: 0; align-self: start; }
  .hm-hero .ha-get { align-self: start; }
}

/* What it does: four plain ticks. The boxes no longer draw themselves on load;
   the one moving thing in the hero is the bracket. */
.ha-checks {
  list-style: none; padding: 0; margin: 0 0 32px;
  display: grid; gap: 14px;
}
.ha-checks li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 17px; line-height: 1.5; color: var(--ink-dim);
}
.ha-checks b { color: var(--ink); font-weight: 650; }
.ck { flex: none; width: 22px; height: 22px; margin-top: 2px; }
.ck svg { display: block; width: 100%; height: 100%; overflow: visible; }
.ck .ck-box { fill: none; stroke: var(--edge); stroke-width: 1.6; }
.ck .ck-tick {
  fill: none; stroke: var(--ink); stroke-width: 2.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Where to get it. The badges ship as "Coming soon" with aria-disabled, and
   then they are outlines — a filled button would promise a download that is
   not there. apps.js lifts aria-disabled when a store is live, and the badge
   fills with ink. The yellow card sits under them, the page's one way to the
   enterprise work. */
.ha-get { display: grid; gap: 14px; justify-items: start; }
/* Gold with teal ink (9.2:1) and a deep-gold edge on the light table, where
   the fill alone is 1.5:1 and would fail 1.4.11 as a control boundary. */
.ai-card {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 16px 9px 9px; border-radius: 10px;
  text-decoration: none;
  background: var(--brand-gold); color: #072832;
  border: 1px solid var(--gold-edge);
}
.ai-card:hover { filter: brightness(1.05); }
.ai-card .ai-chip {
  flex: none; width: 28px; height: 28px; border-radius: 7px;
  display: grid; place-items: center; font-size: 16px;
  background: #072832; color: var(--brand-gold);
}
.ai-card .ai-text { font-size: 15px; font-weight: 650; line-height: 1.25; }

/* ---------------------------------------------------- the contact sheet -- */

/* Six frames from the demo set on a sheet of paper. Five are set aside, each
   with the reason underneath; the keeper sits on the dark mount with the
   bracket and the focus dot from the favicon. Every frame is labelled in
   text, so nothing here is carried by colour alone. */
.hm-sheet {
  background: var(--sheet);
  border: 1px solid var(--line); border-radius: 2px;
  padding: clamp(12px, 2.2vw, 24px) clamp(12px, 2.2vw, 24px) clamp(10px, 1.6vw, 16px);
}
.hm-frames {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.8vw, 18px) clamp(8px, 1.4vw, 14px);
}
.hm-frames li { margin: 0; }
.hm-mat { position: relative; padding: clamp(4px, .7vw, 8px); border-radius: 2px; }
.hm-mat img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 3;
  object-fit: cover; border-radius: 1px;
}
.hm-why {
  display: block; margin-top: 6px; padding: 0 clamp(4px, .7vw, 8px);
  font-size: 14px; font-stretch: 78%; font-weight: 540;
  line-height: 1.25; letter-spacing: .01em; color: var(--ink-dim);
}

/* Set aside: drained of colour and stepped back. Pointing at one brings it
   back, so you can see what was let go. */
.hm-cut img {
  filter: grayscale(1) contrast(.9); opacity: .62;
  transition: filter .25s ease, opacity .25s ease;
}
.hm-cut:hover img { filter: none; opacity: 1; }

/* The keeper. */
.hm-kept .hm-mat { background: var(--mount); }
.hm-kept .hm-why { color: var(--ink); font-weight: 700; }
.hm-bracket { position: absolute; inset: 0; pointer-events: none; }
.hm-bracket i {
  position: absolute; width: 22%; height: 22%;
  border: 0 solid var(--brand-cyan);
}
.hm-bracket i:nth-child(1) { top: 0; left: 0;     border-top-width: 3px; border-left-width: 3px;  border-top-left-radius: 6px; }
.hm-bracket i:nth-child(2) { top: 0; right: 0;    border-top-width: 3px; border-right-width: 3px; border-top-right-radius: 6px; }
.hm-bracket i:nth-child(3) { bottom: 0; left: 0;  border-bottom-width: 3px; border-left-width: 3px;  border-bottom-left-radius: 6px; }
.hm-bracket i:nth-child(4) { bottom: 0; right: 0; border-bottom-width: 3px; border-right-width: 3px; border-bottom-right-radius: 6px; }
.hm-dot {
  position: absolute; left: 50%; top: 50%;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--brand-gold);
  box-shadow: 0 0 0 2px var(--mount);
}
.hm-sheet figcaption { margin-top: clamp(12px, 1.8vw, 18px); }

/* The page's one moment: the five step back, the bracket closes on the
   keeper, the dot lands. Every resting style above is the finished frame, so
   without animation — reduced motion, or a browser that skips it — the page
   shows exactly where this ends. */
@media (prefers-reduced-motion: no-preference) {
  .hm-cut img { animation: hmSetAside .6s ease-out backwards; animation-delay: calc(.25s + var(--n, 0) * .08s); }
  .hm-bracket { animation: hmClose .7s cubic-bezier(.3, .7, .2, 1) .75s backwards; }
  .hm-dot { animation: hmLand .3s cubic-bezier(.3, 1.6, .5, 1) 1.35s backwards; }
}
@keyframes hmSetAside { from { filter: none; opacity: 1; } }
@keyframes hmClose { from { transform: scale(1.3); opacity: 0; } }
@keyframes hmLand { from { transform: scale(0); } }

/* ------------------------------------------------- what it looks for ----- */

/* Six drawings, each on the table colour like a print laid on the sheet band.
   No card, no shadow, no lift. Each drawing rests on its finished frame and
   plays its little routine only while it is pointed at. */
.ft-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 32px) clamp(14px, 2vw, 22px);
}
@media (max-width: 900px) { .ft-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ft-tile { margin: 0; }
.ft-tile figcaption {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 17px; font-stretch: 92%; font-weight: 600; line-height: 1.3;
  color: var(--ink);
}
.ft-tile figcaption i { color: var(--hue-fg); font-size: 19px; }

.ft {
  display: block; width: 100%; height: auto; aspect-ratio: 5 / 3;
  background: var(--table); border: 1px solid var(--line); border-radius: 2px;
}
.ft .ft-n { fill: color-mix(in srgb, var(--hue-fg) 28%, transparent); }
.ft .ft-n2 { fill: color-mix(in srgb, var(--hue-fg) 55%, transparent); }
.ft .ft-t { font-size: 8.5px; fill: var(--hue-fg); font-weight: 600; font-family: inherit; font-stretch: 85%; }
.ft .ft-frame { fill: var(--sheet);
  stroke: color-mix(in srgb, var(--hue-fg) 45%, transparent); stroke-width: 1.2; }
.ft .ft-card { fill: var(--sheet); stroke: color-mix(in srgb, var(--hue-fg) 55%, transparent); stroke-width: 1.2; }
.ft .ft-tag rect, .ft .ft-tick circle { fill: var(--hue-fg); }
.ft .ft-tag text { fill: var(--sheet); font-size: 9px; font-weight: 700; font-family: inherit; }
.ft .ft-tick path { fill: none; stroke: var(--sheet); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ft g, .ft circle, .ft path { transform-box: fill-box; }
.ft .ft-tag, .ft .ft-tick { transform-origin: center; }
.ft .ft-draw { fill: none; stroke: var(--hue-fg); stroke-width: 1.6; stroke-dasharray: 1; stroke-linecap: round; }
.ft .ft-ring { fill: none; stroke-width: 2.2; }
.ft .ft-ring.ft-a { stroke: var(--hue-fg); }
.ft .ft-ring.ft-b { stroke: color-mix(in srgb, var(--hue-fg) 30%, transparent); }
.ft .ft-sun { fill: var(--hue-fg); }
.ft .ft-burst { transform-origin: 50% 100%; }
.ft .ft-ghost { opacity: 0; }
.ft .ft-brackets path { fill: none; stroke: var(--hue-fg); stroke-width: 2.4; stroke-linecap: round; }
.ft .ft-brackets { transform-origin: center; }
.ft .ft-thirds { fill: none; stroke: color-mix(in srgb, var(--hue-fg) 45%, transparent); stroke-width: 1; stroke-dasharray: 3 3; }
.ft .ft-dot { fill: var(--hue-fg); transform-origin: center; }

/* The routines: on a 5s loop while hovered, gone the moment the pointer
   leaves, which lands every drawing back on the frame above. */
@media (prefers-reduced-motion: no-preference) {
  .ft-tile:hover .ft-late,
  .ft-tile:hover .ft-tag:not(.ft-late) { animation: ftLate 5s ease-in-out infinite; }
  .ft-tile:hover .ft-draw { animation: ftDraw 5s ease-in-out infinite; }
  .ft-tile:hover .ft-ring.ft-a { animation: ftRingA 5s ease-in-out infinite; }
  .ft-tile:hover .ft-ring.ft-b { animation: ftRingB 5s ease-in-out infinite; }
  .ft-tile:hover .ft-sun { animation: ftSun 5s ease-out infinite; }
  .ft-tile:hover .ft-b1 { animation: ftFanL 5s ease-in-out infinite; }
  .ft-tile:hover .ft-b2 { animation: ftFanR 5s ease-in-out infinite; }
  .ft-tile:hover .ft-ghost { animation: ftGhost 5s ease-in-out infinite; }
  .ft-tile:hover .ft-shake { animation: ftShake 5s linear infinite, ftBlur 5s linear infinite; }
  .ft-tile:hover .ft-brackets { animation: ftFocus 5s cubic-bezier(.3, .7, .2, 1) infinite; }
  .ft-tile:hover .ft-thirds { animation: ftThirds 5s ease-in-out infinite; }
  .ft-tile:hover .ft-subject { animation: ftSubject 5s cubic-bezier(.3, .7, .2, 1) infinite; }
}
@keyframes ftLate { 0%, 45% { opacity: 0; transform: scale(.6); } 58%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes ftDraw { 0%, 40% { stroke-dashoffset: 1; } 60%, 92% { stroke-dashoffset: 0; opacity: 1; } 100% { opacity: 0; } }
@keyframes ftRingA { 0%, 12% { opacity: 0; } 25%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ftRingB { 0%, 22% { opacity: 0; } 34%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ftSun { 0% { transform: translateY(34px); opacity: 0; } 15% { opacity: 1; } 45%, 100% { transform: none; } }
@keyframes ftFanL { 0%, 8% { transform: none; } 22%, 34% { transform: rotate(-14deg) translateX(-10px); } 48%, 100% { transform: none; } }
@keyframes ftFanR { 0%, 8% { transform: none; } 22%, 34% { transform: rotate(14deg) translateX(10px); } 48%, 100% { transform: none; } }
@keyframes ftGhost { 0%, 35% { opacity: .55; transform: translate(4px, 2px); } 45%, 100% { opacity: 0; transform: none; } }
@keyframes ftShake {
  0% { transform: translate(0, 0); } 4% { transform: translate(-3px, 1px); } 8% { transform: translate(3px, -1px); }
  12% { transform: translate(-2px, -1px); } 16% { transform: translate(3px, 1px); } 20% { transform: translate(-3px, 0); }
  24% { transform: translate(2px, 1px); } 28% { transform: translate(-2px, -1px); } 32% { transform: translate(1px, 0); }
  40%, 100% { transform: none; }
}
@keyframes ftBlur { 0%, 34% { filter: blur(1.4px); } 42%, 100% { filter: none; } }
@keyframes ftFocus { 0%, 8% { transform: scale(1.45); opacity: .3; } 40%, 100% { transform: none; opacity: 1; } }
@keyframes ftThirds { 0%, 10% { opacity: 0; } 25%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ftSubject { 0%, 25% { transform: translate(-20px, 14px); } 50%, 100% { transform: none; } }

/* -------------------------------------------------------- the funnel ----- */

.hm-run .funnel { margin-top: 8px; }