/* ==========================================================================
   KJ Print N' Go — hero.css
   The cinematic image hero, used only on the home page. Kept out of
   site.css so quote.html and 404.html do not download styles for a section
   they never render.
   Depends on the tokens in core.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */
.hero {
  --hero-inset: clamp(8px, 1vw, 16px);
  position: relative;
  isolation: isolate;
  margin: var(--hero-inset);
  border-radius: clamp(18px, 2.2vw, 30px);
  overflow: hidden;
  background: #07090c;          /* shows before the poster decodes */
  color: #fff;
  /* Tall enough to feel cinematic, capped so it never runs off a laptop.
     svh, not vh, so mobile browser chrome does not overshoot. */
  min-height: clamp(560px, 92svh, 900px);
  display: flex;
}

/* --- Background layer --- */
.hero__bg { position: absolute; inset: 0; z-index: 0; }

.hero__image {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  background: #e8cda4;
  /* A restrained push-in gives the still scene the same cinematic depth as
     the previous background without downloading or decoding video. */
  animation: hero-drift 38s var(--ease) infinite alternate;
  will-change: transform;
}
@keyframes hero-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.11) translate3d(-1.2%, -1.4%, 0); }
}

/* Two scrims: the linear one anchors the nav and the lower edge, the radial
   one sits under the headline so centred text always has contrast. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(78% 66% at 50% 46%, rgba(3,8,13,.58), rgba(3,8,13,.18) 78%),
    linear-gradient(180deg,
      rgba(4,6,9,.64) 0%,
      rgba(4,6,9,.28) 26%,
      rgba(4,6,9,.35) 58%,
      rgba(4,6,9,.78) 100%);
}

/* Fine grain over a large dark gradient field kills banding. */
.hero__grain {
  position: absolute; inset: 0;
  opacity: .05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Foreground --- */
.hero__inner {
  position: relative; z-index: 1;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: calc(var(--nav-h) + clamp(48px, 8vh, 96px)) var(--gutter)
           clamp(28px, 4.5vh, 48px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vh, 52px);
  text-align: center;
}
/* display:contents so the children participate in .hero__inner's flex
   column directly and the gap applies evenly to all of them. */
.hero__content { display: contents; }

.hero__badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 6px 15px 6px 7px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: 500; color: rgba(255,255,255,.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__badge img { width: 22px; height: 22px; border-radius: 50%; }
.hero__badge b { color: #fff; font-weight: 600; }

.hero__title {
  max-width: 16ch;
  font-size: clamp(2.5rem, 6.4vw, 4.75rem);
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.04;
  color: #fff;
  background-image: linear-gradient(105deg, #70dcff 0%, #ff71bd 52%, #ffe88a 100%);
  text-wrap: balance;
}

.hero__lead {
  max-width: 52ch;
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  line-height: 1.45;
  letter-spacing: -.012em;
  color: rgba(255,255,255,.74);
}

.hero__actions {
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 14px 26px;
}

.hero__link {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-body); color: #fff; opacity: .8;
  transition: opacity var(--dur) var(--ease);
}
.hero__link:hover { opacity: 1; text-decoration: none; color: #fff; }
.hero__link::after {
  content: "\203A"; font-size: 1.2em; line-height: 1;
  transform: translateY(-.06em);
  transition: transform var(--dur) var(--ease);
}
.hero__link:hover::after { transform: translate(4px, -.06em); }

/* The three ink dots that punctuate the headline. */
.ink-dot {
  display: inline-block; width: .28em; height: .28em;
  border-radius: 50%; vertical-align: baseline;
  margin-left: .05em;
}
.ink-dot--c { background: var(--c); }
.ink-dot--m { background: var(--m); }
.ink-dot--y { background: var(--y); }

.hero__hint { font-size: var(--fs-xs); color: rgba(255,255,255,.5); }
.hero__hint a { color: rgba(255,255,255,.8); }
.hero__hint a:hover { color: #fff; }

/* --- Entrance ---
   One idea, staggered: rise and fade. JS adds .is-ready once the poster or
   first frame can paint, so the animation never starts mid-load. */
[data-hero] { opacity: 0; transform: translateY(18px); }
.hero.is-ready [data-hero] { animation: hero-in .9s var(--ease-out) forwards; }
.hero.is-ready [data-hero="1"] { animation-delay: .05s; }
.hero.is-ready [data-hero="2"] { animation-delay: .14s; }
.hero.is-ready [data-hero="3"] { animation-delay: .23s; }
.hero.is-ready [data-hero="4"] { animation-delay: .32s; }
.hero.is-ready [data-hero="5"] { animation-delay: .42s; }

@keyframes hero-in { to { opacity: 1; transform: none; } }

/* No-JS: .is-ready never lands, so show everything immediately. */
.no-js [data-hero] { opacity: 1; transform: none; }

@media (max-width: 640px) {
  .hero { min-height: clamp(520px, 88svh, 760px); }
  .hero__inner { gap: clamp(22px, 4vh, 36px); }
}

/* Reduced motion: the push-in and staggered entrance both go away. */
@media (prefers-reduced-motion: reduce) {
  .hero__image { animation: none; transform: none; }
  [data-hero] { opacity: 1; transform: none; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Header over the hero
   The fixed header drops its plate and inverts to light text while it is
   over the slab. main.js toggles .is-over-hero on scroll.
   -------------------------------------------------------------------------- */
.header.is-over-hero {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom-color: transparent;
}

/* The header is anchored to the viewport, but while it is over the hero its
   visual container is the slab, which starts --hero-inset lower. Centring in
   the 64px bar therefore put the CTA slightly ABOVE the slab's top edge.
   Nudging the row down gives it room to breathe inside the panel, and it
   settles back up as the solid bar takes over. */
.header__inner { transition: transform .45s var(--ease); }
.header.is-over-hero .header__inner { transform: translateY(15px); }

@media (prefers-reduced-motion: reduce) {
  .header__inner { transition: none; }
}
.header.is-over-hero .brand,
.header.is-over-hero .brand:hover,
.header.is-over-hero .nav__link,
.header.is-over-hero .nav__link:hover { color: #fff; }
.header.is-over-hero .nav__link { opacity: .78; }
.header.is-over-hero .nav__link:hover { opacity: 1; }
.header.is-over-hero .nav-toggle__bars span { background: #fff; }
/* The CTA inverts to a light pill so it still reads as the primary action
   against the video. */
.header.is-over-hero .btn--primary { background: #fff; color: var(--ink); }
.header.is-over-hero .btn--primary:hover { background: #eef3f7; color: var(--ink); }
.header.is-over-hero .brand__mark { box-shadow: 0 0 0 1px rgba(255,255,255,.28); }

/* --------------------------------------------------------------------------
   Print
   A full-bleed dark slab is a page of wasted toner. Strip it back to text.
   -------------------------------------------------------------------------- */
@media print {
  .hero {
    min-height: 0; margin: 0; padding: 0;
    background: #fff; color: #000;
    border-radius: 0;
  }
  .hero__bg, .hero__actions { display: none !important; }
  .hero__inner { padding: 0; gap: 12px; }
  .hero__title, .hero__lead, .hero__hint { color: #000; }
  .hero__badge { color: #000; background: none; border-color: #999; }
  .hero__hint a { color: #000; }
}