/* ---------- Base + variables ---------- */
:root {
  --panel-bg: rgba(0, 0, 0, 0.60);  /* dark mode default */
}

/* Light-mode: reduce opacity a bit for brighter UIs */
@media (prefers-color-scheme: light) {
  :root { --panel-bg: rgba(0, 0, 0, 0.48); }
}

html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system,
               "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif;
}

/* ---------- Layout ---------- */
.hero { min-height: 100svh; position: relative; overflow: clip; }
.hero__inner {
  min-height: inherit;
  display: grid;
  align-items: center;
  justify-items: start;          /* text left */
  padding: clamp(16px, 4vw, 48px);
}

/* Panel (white text, auto-width cap) */
.panel {
  background: var(--panel-bg);
  color: #fff;
  padding: clamp(16px, 3vw, 32px);
  border-radius: 16px;
  max-width: min(64ch, 92vw);
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}

/* Quote typography */
.quote blockquote { margin: 0; font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.35; font-weight: 600; letter-spacing: .2px; }
.quote figcaption { margin-top: .75em; font-size: clamp(1rem, 1.8vw, 1.2rem); opacity: .9; }

/* ---------- Background layers ----------
   We stack two layers:
   - Base layer: LQIP data-URI (always paints immediately)
   - Hi-res layer: ::after (image-set) that fades in when ready
*/
.hero--bg {
  /* Base LQIP (paste your data URIs here) */
  --lqip-webp: url("images/doko_miyamoto-1920.webp");
  --lqip-jpg:  url("images/doko_miyamoto-1920.jpg"); /* fallback */

  background-image: var(--lqip-webp), var(--lqip-jpg);
  background-size: cover, cover;
  background-position: 84% 52%, 84% 52%;   /* tuned to keep the samurai visible */
  background-repeat: no-repeat, no-repeat;
}

/* Hi-res on a pseudo-element so we can animate opacity cleanly */
.hero--bg::after {
  content: "";
  position: absolute; inset: 0;
  /* Modern responsive sources (AVIF/WebP + fallback JPEG) */
  background-image: image-set(
    url(images/doko_miyamoto-3840.avif") type("image/avif") 2x,
    url("images/doko_miyamoto-1920.avif") type("image/avif") 1x,
    url("images/doko_miyamoto-3840.webp") type("image/webp") 2x,
    url("images/doko_miyamoto-1920.webp") type("image/webp") 1x,
    url("images/doko_miyamoto-1920.jpg")  type("image/jpeg") 1x
  );
  background-size: cover;
  background-position: 84% 52%;
  background-repeat: no-repeat;

  opacity: 0;                       /* start hidden for fade-in */
  transition: opacity 500ms ease;   /* smooth crossfade */
}

/* When the preload <img> fires 'load', JS adds .hero--ready */
.hero--bg.hero--ready::after { opacity: 1; }

/* Mobile tuning: bias focal point further right/up to keep the subject visible */
@media (max-width: 768px) {
  .hero--bg { background-position: 90% 56%, 90% 56%; }
  .hero--bg::after { background-position: 90% 56%; }
  .panel { background: rgba(0,0,0,.68); }  /* a touch stronger on small screens */
}

/* Hide the preloader image (we only use its load event) */
.hero-preload {
  position: absolute; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none;
}