/* Page photos and motion. Loaded only on pages that have a hero photo (not the homepage).
   Everything here is progressive: without JS the photo and text are simply shown; with
   prefers-reduced-motion nothing moves. */

:root { --gold: #b39855; --gold-2: #e6cf8f; --ease-out: cubic-bezier(.16, .84, .24, 1); --ease-io: cubic-bezier(.65, 0, .35, 1); }

/* ---------- hero band ---------- */
.page-hero {
  position: relative;
  height: clamp(240px, 54vh, 580px);
  overflow: hidden;
  background: var(--hero-bg, #1d3a5f);
  isolation: isolate;
}
.page-hero--short { height: clamp(170px, 30vh, 330px); }
.page-hero picture { position: absolute; inset: -6% 0 -6% 0; display: block; will-change: transform; }
.page-hero img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: var(--hero-pos, 50% 50%);
}
/* depth: dark at the top for the header, a soft vignette, and a wash into the page at the bottom */
.page-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(10, 22, 40, .38) 0%, rgba(10, 22, 40, 0) 26%, rgba(10, 22, 40, 0) 58%, rgba(10, 22, 40, .42) 100%),
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(10, 22, 40, .28) 100%);
}
/* a single band of light that crosses the photo once it has loaded */
.page-hero::before {
  content: ""; position: absolute; inset: -20% -60%; z-index: 2; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 244, 214, .22) 47%, rgba(255, 255, 255, .34) 50%, rgba(255, 244, 214, .18) 53%, transparent 62%);
  transform: translateX(-70%); opacity: 0; mix-blend-mode: soft-light;
}
.page-hero__credit {
  position: absolute; right: 14px; bottom: calc(clamp(52px, 9vh, 92px) + 10px); z-index: 3;
  font-size: .68rem; letter-spacing: .02em; color: rgba(255, 255, 255, .78);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

/* ---------- the page lifts over the photo like a sheet ---------- */
main.has-hero {
  position: relative; z-index: 4;
  margin-top: calc(-1 * clamp(52px, 9vh, 92px));
  background: var(--bg);
  border-radius: 24px 24px 0 0;
  padding-top: 10px;
  box-shadow: 0 -30px 60px -34px rgba(8, 18, 36, .55);
}
main.has-hero::before {   /* gold grabber line */
  content: ""; position: absolute; top: 0; left: 50%; width: 72px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--gold-2), var(--gold));
  transform: translate(-50%, -50%);
}
main.has-hero h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.35rem); line-height: 1.15; letter-spacing: -.01em; }

/* reading progress, gold, driven by the scroll position itself where supported */
@supports (animation-timeline: scroll()) {
  body:has(.page-hero)::after {
    content: ""; position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 50;
    background: linear-gradient(90deg, var(--gold), var(--gold-2));
    transform-origin: 0 50%; transform: scaleX(0);
    animation: mbl-progress linear both; animation-timeline: scroll(root);
  }
}

/* ---------- photo break inside long articles ---------- */
.photo-break {
  position: relative;
  width: min(1080px, calc(100vw - 32px));
  margin: 44px 0 40px 50%;
  transform: translateX(-50%);
}
.photo-break picture {
  display: block; height: clamp(220px, 42vw, 470px); overflow: hidden; border-radius: 20px;
  background: var(--hero-bg, #1d3a5f);
  box-shadow: 0 30px 60px -38px rgba(8, 18, 36, .6);
}
.photo-break img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 50%); display: block; }
.photo-break figcaption { margin-top: 8px; font-size: .72rem; color: var(--muted); text-align: right; }

/* =========================================================
   Motion (only when motion.js has armed the page)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  html.js-motion .page-hero img { transform: scale(1.12); filter: saturate(.55) blur(10px); opacity: .25; }
  html.js-motion .page-hero.is-loaded img { animation: mbl-hero 2.2s var(--ease-out) forwards; }
  html.js-motion .page-hero.is-loaded::before { animation: mbl-sheen 2.6s .55s var(--ease-io) forwards; }

  html.js-motion main.has-hero { animation: mbl-sheet 1.15s .1s var(--ease-out) both; }
  html.js-motion main.has-hero::before { transform: translate(-50%, -50%) scaleX(0); animation: mbl-line .9s .75s var(--ease-out) forwards; }
  html.js-motion main.has-hero > .breadcrumb { animation: mbl-fade .8s .45s var(--ease-out) both; }
  html.js-motion main.has-hero > h1 { animation: mbl-title 1.25s .32s var(--ease-out) both; }
  html.js-motion main.has-hero > .lede,
  html.js-motion main.has-hero > h1 + p { animation: mbl-rise 1s .62s var(--ease-out) both; }

  /* parallax: the photo drifts slower than the page */
  @supports (animation-timeline: scroll()) {
    html.js-motion .page-hero picture { animation: mbl-parallax linear both; animation-timeline: scroll(root); animation-range: 0 85vh; }
    html.js-motion .photo-break.is-in img { animation: mbl-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }

  /* scroll reveals */
  html.js-motion .rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease-out) var(--d, 0ms), transform .9s var(--ease-out) var(--d, 0ms); }
  html.js-motion .rv.is-in { opacity: 1; transform: none; }
  html.js-motion main.has-hero > h2.rv::after {
    content: ""; display: block; width: 46px; height: 3px; margin-top: 10px; border-radius: 3px;
    background: linear-gradient(90deg, var(--gold), var(--gold-2));
    transform: scaleX(0); transform-origin: 0 50%;
    transition: transform 1s var(--ease-out) calc(var(--d, 0ms) + 250ms);
  }
  html.js-motion main.has-hero > h2.rv.is-in::after { transform: scaleX(1); }
  html.js-motion main.has-hero > :is(table, .tbl, .calc-result).rv tr { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }

  /* photo break: an iris that opens from the centre while the photo settles */
  html.js-motion .photo-break.pb-armed picture { clip-path: inset(18% 34% 18% 34% round 26px); transition: clip-path 1.5s var(--ease-io); }
  html.js-motion .photo-break.pb-armed img { transform: scale(1.32); filter: saturate(.4); transition: transform 2s var(--ease-out), filter 1.6s var(--ease-out); }
  html.js-motion .photo-break.pb-armed figcaption { opacity: 0; transition: opacity .8s .9s; }
  html.js-motion .photo-break.is-in picture { clip-path: inset(0 0 0 0 round 20px); }
  html.js-motion .photo-break.is-in img { transform: scale(1.06); filter: none; }
  html.js-motion .photo-break.is-in figcaption { opacity: 1; }
}

@keyframes mbl-hero { to { transform: scale(1.02); filter: none; opacity: 1; } }
@keyframes mbl-sheen { 0% { opacity: 0; transform: translateX(-70%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(70%); } }
@keyframes mbl-sheet { from { transform: translateY(56px); box-shadow: 0 -10px 40px -34px rgba(8, 18, 36, 0); } }
@keyframes mbl-line { to { transform: translate(-50%, -50%) scaleX(1); } }
@keyframes mbl-fade { from { opacity: 0; } }
@keyframes mbl-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes mbl-title {
  from { opacity: 0; transform: translateY(.55em); clip-path: inset(0 0 100% 0); letter-spacing: .03em; filter: blur(4px); }
  60% { filter: blur(0); }
  to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); letter-spacing: -.01em; filter: none; }
}
@keyframes mbl-parallax { to { transform: translateY(14%) scale(1.04); } }
@keyframes mbl-drift { from { transform: scale(1.12) translateY(-4%); } to { transform: scale(1.06) translateY(4%); } }
@keyframes mbl-progress { to { transform: scaleX(1); } }

@media (max-width: 640px) {
  .page-hero { height: clamp(210px, 40vh, 360px); }
  .page-hero--short { height: clamp(150px, 26vh, 240px); }
  main.has-hero { border-radius: 18px 18px 0 0; margin-top: -40px; }
  .page-hero__credit { bottom: 50px; font-size: .62rem; }
  .photo-break { width: calc(100vw - 24px); margin: 32px 0 30px 50%; }
}
@media (prefers-color-scheme: dark) {
  main.has-hero { box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .8); }
}