/* ==========================================================================
   pages/home.css — home page only. Translated from design/home-d.html:
   full-bleed hero, one band of live tiles, then page / image / page / image
   cuts. Motion states live at the bottom and apply only under html.motion,
   which motion.js adds on boot; with JavaScript off nothing is hidden.

   Colour (P4.5 §3): the photographs stay dark in both themes. Every element
   that sits over one is a "dark island": the shell tokens it reads are
   re-pointed at the on-image set from tokens.css, so buttons, badges, the
   nav and the timecode need no special casing. The bottom of each panel
   fades to --bg, the page colour of the current theme, so the cut meets the
   page cleanly instead of leaving a near-black band.
   ========================================================================== */

/* The hero sits under the fixed nav, so the shell's nav offset goes. With JavaScript
   on (html.js) the nav is transparent over the image and turns solid once app.js flags
   a scroll; without it the nav keeps the shell's solid bar so it stays legible. While
   the mobile menu is open the bar goes solid too, so the panel below it reads on the
   page colour rather than the photograph. */
body{ padding-top:0; }
.js .nav{ background:transparent; border-bottom-color:transparent; transition:background-color var(--duration) var(--ease), border-color var(--duration) var(--ease); }
.js .nav--scrolled{ background:var(--nav-glass); border-bottom-color:var(--border); -webkit-backdrop-filter:var(--nav-blur); backdrop-filter:var(--nav-blur); }
.js .nav--open{ background:var(--bg); border-bottom-color:var(--border); }

/* Dark islands: photo panels, the frames, the on-air tally, and the nav while it is transparent over the hero. */
.panel,.frame,.tally,.js .nav:not(.nav--scrolled):not(.nav--open){
  --text-1:var(--on-image); --text-2:var(--on-image-2); --text-3:var(--on-image-3); --text-strong:var(--on-image);
  --border:var(--on-image-line); --border-strong:var(--on-image-line);
  --surface:var(--on-image-fill); --elevated:var(--on-image-fill); --hover:var(--on-image-hover);
  --accent:var(--on-image-accent); --accent-hover:var(--on-image-accent-hover); --accent-on:var(--on-image-accent-on);
  --live:var(--on-image-live); --success:var(--on-image-success);
}

/* Block links on this page carry their own colour; no cyan text, no underline. */
.panel{ color:inherit; }
.panel:hover{ color:inherit; text-decoration:none; }

/* Buttons and badges used on the image panels and in the nav */
.btn--outline{ border-color:var(--border-strong); color:var(--text-1); }
.btn--outline:hover{ background:var(--hover); color:var(--text-1); }
.btn--lg{ height:52px; padding:0 22px; font-size:var(--text-md); }
.badge--onimage{ background:var(--on-image-scrim-soft); border-color:var(--on-image-fill); color:var(--text-1); }

/* Numbers that count up sit in a fixed-width box so the layout never shifts */
.num{ display:inline-block; font-variant-numeric:tabular-nums; text-align:left; }

/* Image panels: hero, tracks and church. The panel holds a dark base under the photograph, one
   bottom-up protection ramp for the text, and a short fade to the page colour at the very bottom. */
.panel{ position:relative; display:flex; align-items:flex-end; min-height:70vh; background:var(--on-image-bg); overflow:hidden; isolation:isolate; }
.panel__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; z-index:0; }
.panel::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, var(--bg) 0, transparent 28px), linear-gradient(to top, var(--on-image-scrim) 0%, transparent 60%);
}
.panel__body{ position:relative; z-index:2; display:block; width:100%; padding-bottom:var(--space-16); }
.panel__title{ font-weight:var(--weight-semibold); line-height:.98; letter-spacing:-.03em; color:var(--on-image); text-wrap:balance; text-shadow:var(--on-image-shadow-lg); }
.panel__line{ display:block; margin-top:var(--space-4); font-size:var(--text-lg); color:var(--on-image-2); max-width:40ch; text-shadow:var(--on-image-shadow); }
.panel__tag{ position:absolute; top:var(--space-5); left:0; right:0; z-index:2; font-size:var(--text-xs); color:var(--on-image-2); }
.panel__tag .container{ display:flex; justify-content:space-between; gap:var(--space-4); }

/* Hero */
.hero{ min-height:85vh; }
.hero__img{ object-position:50% 40%; transform-origin:50% 60%; }
.hero .panel__body{ padding-top:calc(var(--nav-height) + var(--space-16)); padding-bottom:calc(var(--space-16) + 72px); }
.hero__rule{ height:2px; width:72px; background:var(--accent); margin-bottom:var(--space-5); transform-origin:left; }
.hero__status{ display:flex; gap:var(--space-2); flex-wrap:wrap; margin-bottom:var(--space-5); }
.hero__status .badge{ background:var(--on-image-scrim-soft); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.hero__status .badge--success{ border-color:var(--success-line); }
.hero__title{ font-size:clamp(46px, 7.4vw, 112px); max-width:11.5ch; }
.hero__row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--space-8); align-items:end; margin-top:var(--space-6); }
.hero__lede{ font-size:18px; line-height:1.5; color:var(--on-image-2); max-width:44ch; text-shadow:var(--on-image-shadow); }
.hero__actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; }
.tally{
  position:absolute; z-index:3; top:calc(var(--nav-height) + var(--space-5));
  right:max(var(--gutter), calc((100vw - var(--content-max)) / 2 + var(--gutter)));
  display:inline-flex; align-items:center; gap:10px; padding:8px 12px 8px 10px;
  border-radius:var(--radius-pill); border:1px solid var(--live-line); background:var(--on-image-scrim-soft);
  color:var(--on-image); font-size:13px; font-weight:var(--weight-medium); white-space:nowrap;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
}
.tally__dot{ position:relative; width:8px; height:8px; border-radius:4px; background:var(--live); box-shadow:0 0 0 4px var(--live-soft); }
.tally__dot::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--live); animation:tally 1.8s ease-out infinite; }
.tally__meta{ color:var(--on-image-2); font-weight:var(--weight-regular); }
@keyframes tally{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(2.2); opacity:0; } }

/* Live band: the only monitor wall on the page, overlapping the hero's bottom edge by 72px */
.band{ position:relative; z-index:3; margin-top:-72px; }
.wall{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:2px; padding:2px; background:var(--border-strong); border:1px solid var(--border-strong); }
.tile{ position:relative; display:flex; flex-direction:column; min-width:0; min-height:168px; padding:36px 16px 14px; background:var(--surface); overflow:hidden; transition:box-shadow var(--duration) var(--ease); }
.tile:hover{ box-shadow:inset 0 0 0 1px var(--accent), 0 0 28px var(--accent-glow); z-index:1; }
.tile:hover .tile__tag{ color:var(--accent); }
.tile__tag{ position:absolute; top:10px; left:14px; right:14px; display:flex; justify-content:space-between; gap:8px; font-size:11px; line-height:1.4; color:var(--text-3); white-space:nowrap; transition:color var(--duration) var(--ease); }
.tile__tag span{ overflow:hidden; text-overflow:ellipsis; }
.tally-dot{ display:inline-flex; align-items:center; gap:5px; }
.tally-dot::before{ content:""; width:5px; height:5px; border-radius:3px; background:var(--text-3); }
.tally-dot--live::before{ background:var(--live); }
.tally-dot--open::before{ background:var(--success); }
.big{ font-size:clamp(22px, 3.6vw, var(--text-3xl)); line-height:1; letter-spacing:var(--tracking-heading); font-weight:var(--weight-semibold); color:var(--text-strong); font-variant-numeric:tabular-nums; white-space:nowrap; }
.big--countdown{ font-size:clamp(18px, 2.9vw, var(--text-3xl)); min-width:11ch; } /* room for "DD HH:MM:SS" */
.unit{ margin-top:6px; font-size:13px; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile__foot{ margin-top:auto; padding-top:14px; display:flex; justify-content:space-between; gap:8px; font-size:var(--text-xs); color:var(--text-3); white-space:nowrap; }
.tile__foot span{ overflow:hidden; text-overflow:ellipsis; }
.tile__foot b,.tile__foot .price{ font-weight:var(--weight-medium); color:var(--text-1); font-size:var(--text-xs); }

/* Page sections (named .black from the dark-only design; they take the theme's page colour) and their once-only rules */
.black{ background:var(--bg); padding-block:var(--space-24); }
.rule{ height:1px; background:var(--border-strong); transform-origin:left; }
.split{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-16); align-items:start; }
.split--ruled{ padding-top:var(--space-12); }
.kicker{ font-size:var(--text-lg); font-weight:var(--weight-medium); letter-spacing:0; line-height:var(--leading-body); color:var(--text-2); }
.statement{ font-size:clamp(26px, 2.6vw, 39px); line-height:1.2; letter-spacing:-.02em; font-weight:var(--weight-medium); color:var(--text-strong); max-width:26ch; text-wrap:pretty; }
.support{ margin-top:var(--space-6); font-size:var(--text-lg); color:var(--text-2); max-width:52ch; text-wrap:pretty; }
.frames{ display:grid; grid-template-columns:1fr 1fr; gap:2px; padding:2px; background:var(--border-strong); border:1px solid var(--border-strong); margin-top:var(--space-10); }
.frame{ position:relative; margin:0; aspect-ratio:16 / 9; overflow:hidden; background:var(--on-image-bg); isolation:isolate; }
.frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.frame::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, var(--on-image-scrim), transparent 60%); }
.frame__tag{ position:absolute; top:10px; left:14px; z-index:1; font-size:11px; color:var(--on-image-3); }
.frame__label{ position:absolute; left:14px; bottom:12px; z-index:1; font-size:var(--text-md); font-weight:var(--weight-semibold); color:var(--on-image); }
.frame__label small{ display:block; font-size:13px; font-weight:var(--weight-regular); color:var(--on-image-2); }

/* Track panels: hover or keyboard focus brightens 8% and shows a 2px cyan left edge */
.track{ min-height:70vh; }
.track .panel__img{ transition:filter var(--duration) var(--ease); }
.track::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:2px; background:var(--accent); z-index:2; opacity:0; transition:opacity var(--duration) var(--ease); }
.track:hover .panel__img,.track:focus-visible .panel__img{ filter:brightness(1.08); }
.track:hover::before,.track:focus-visible::before{ opacity:1; }
.track:focus-visible{ border-radius:0; box-shadow:inset 0 0 0 2px var(--accent); }
.track__title{ font-size:clamp(38px, 5.2vw, 80px); }
.track--a .panel__img{ object-position:60% 40%; }
.track--b .panel__img{ object-position:50% 30%; }

/* Church */
.church{ min-height:70vh; }
.church .panel__img{ object-position:50% 45%; }
.church__title{ font-size:clamp(36px, 4.6vw, 72px); max-width:14ch; }
.church__actions{ display:flex; gap:var(--space-3); flex-wrap:wrap; margin-top:var(--space-6); }
.church .panel__line .price{ color:inherit; }

/* ── Motion pass. Hidden states exist only under html.motion (added by motion.js
   when JavaScript runs and the viewer has not asked for reduced motion), so the
   page is complete without JavaScript. Every entrance fires once; .is-instant
   is the no-animation reveal for anything already scrolled past on load. ── */
@keyframes drift{ from{ transform:scale(1); } to{ transform:scale(1.06); } }
@keyframes lt-rule{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@keyframes lt-in{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:none; } }

.motion [data-motion="hero"] .hero__rule{ transform:scaleX(0); }
.motion [data-motion="hero"] .hero__block{ opacity:0; }
.motion [data-motion="hero"].is-on .hero__rule{ animation:lt-rule 200ms var(--ease) both; }
.motion [data-motion="hero"].is-on .hero__block{ animation:lt-in 280ms var(--ease) 200ms both; }
.motion [data-motion="hero"].is-on .hero__img{ animation:drift 20s linear both; }
.motion [data-motion="hero"].is-instant .hero__rule{ transform:none; }
.motion [data-motion="hero"].is-instant .hero__block{ opacity:1; }

.motion [data-motion="cut"] .panel__img{ opacity:0; }
.motion [data-motion="cut"].is-on .panel__img,.motion [data-motion="cut"].is-instant .panel__img{ opacity:1; }

.motion [data-motion="rule"]{ transform:scaleX(0); }
.motion [data-motion="rule"].is-on{ transform:scaleX(1); transition:transform 140ms var(--ease); }
.motion [data-motion="rule"].is-instant{ transform:none; transition:none; }


@media (max-width:900px){
  .split{ grid-template-columns:minmax(0,1fr); gap:var(--space-6); }
  .black{ padding-block:var(--space-16); }
}
@media (max-width:759px){
  .hero{ min-height:60vh; }
  .hero__img{ object-position:62% 40%; }
  .hero__title{ font-size:clamp(46px, 13vw, 60px); max-width:none; }
  .hero__row{ grid-template-columns:minmax(0,1fr); gap:var(--space-5); }
  .hero__lede{ font-size:15px; max-width:38ch; }
  .hero .panel__body{ padding-top:calc(var(--nav-height) + 64px); padding-bottom:calc(var(--space-8) + 48px); }
  .hero__status .badge--onimage{ display:none; }
  .tally{ top:calc(var(--nav-height) + var(--space-3)); }
  .band{ margin-top:-48px; }
  .wall{ grid-template-columns:1fr 1fr; border-left:0; border-right:0; }
  .tile{ min-height:150px; padding:34px 14px 12px; }
  .big{ font-size:var(--text-2xl); }
  .big--countdown{ font-size:clamp(18px, 5.6vw, var(--text-2xl)); }
  .panel,.track,.church{ min-height:60vh; }
  .panel__body{ padding-bottom:var(--space-10); }
  .track__title{ font-size:clamp(36px, 10.5vw, 48px); }
  .panel__line{ font-size:var(--text-md); }
  .church__title{ font-size:clamp(32px, 9.5vw, 44px); }
  .frames{ grid-template-columns:1fr; }
  .btn--lg{ height:48px; padding:0 18px; font-size:15px; }
}