/* DAB Cinematic - engine styles. Theme via the --cine-* tokens on the page.
   --cine-shade is the RGB triplet of the readability veil (dark by default; a light site sets a light one). */
.cine {
  position: relative;
  height: calc(var(--cine-length, 6) * 100svh);
  background: var(--cine-bg, #0d0b09);
}
.cine-sticky {
  position: sticky; top: 0;
  /* lvh: the largest viewport, so the picture always covers the screen and never changes size while the
     phone's address bar slides in and out (svh would leave a strip, dvh would resize mid-scroll). */
  height: 100vh; height: 100lvh; width: 100%;
  overflow: hidden;
}
.cine-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* With a fitted frame set (set.fit) the picture is shorter than a tall screen: its edges melt into the page colour. */
.cine-fitfade { position: absolute; inset: 0; pointer-events: none; display: none;
  background: linear-gradient(to bottom, var(--cine-bg) 0, var(--cine-bg) var(--t), transparent calc(var(--t) + 10%), transparent calc(var(--b) - 10%), var(--cine-bg) var(--b), var(--cine-bg) 100%); }
.cine-fitfade.on { display: block; }
.cine-shade {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to left, rgb(var(--cine-shade, 10 8 6) / .62) 0%, rgb(var(--cine-shade, 10 8 6) / .12) 40%, rgb(var(--cine-shade, 10 8 6) / .12) 60%, rgb(var(--cine-shade, 10 8 6) / .62) 100%),
    linear-gradient(to top, rgb(var(--cine-shade, 10 8 6) / .55) 0%, transparent 30%),
    linear-gradient(to bottom, rgb(var(--cine-shade, 10 8 6) / .45) 0%, transparent 18%);
}

.cine-chapters { position: absolute; inset: 0; pointer-events: none; }
.cine-chapter {
  position: absolute; top: 50%; translate: 0 -50%;
  inset-inline-start: clamp(20px, 7vw, 120px);
  width: min(640px, calc(100% - 40px));
  color: var(--cine-ink, #f5efe6);
  /* Read at a glance while the film moves: a heavy title, a soft shade in the page's own colour behind the words. */
  text-shadow: 0 2px 28px rgb(var(--cine-shade, 10 8 6) / .7), 0 1px 4px rgb(var(--cine-shade, 10 8 6) / .5);
  isolation: isolate;
  opacity: 0; visibility: hidden; will-change: opacity, transform;
}
.cine-end { inset-inline-start: auto; inset-inline-end: clamp(20px, 7vw, 120px); text-align: end; }
.cine-center { inset-inline: 0; margin-inline: auto; text-align: center; width: min(960px, calc(100% - 40px)); }
.cine-chapter::before {
  content: ""; position: absolute; z-index: -1; inset: -70px -110px; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--cine-shade, 10 8 6) / .5), rgb(var(--cine-shade, 10 8 6) / .22) 60%, transparent);
}
.cine-eyebrow {
  font: 800 clamp(17px, 1.45vw, 22px)/1 var(--cine-sans, system-ui);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--cine-accent, #c8a27a);
  margin: 0 0 20px;
  display: flex; align-items: center; gap: 14px;
}
.cine-center .cine-eyebrow { justify-content: center; }
.cine-end .cine-eyebrow { justify-content: flex-end; }
.cine-eyebrow::before { content: ""; width: 52px; height: 3px; border-radius: 2px; background: currentColor; }
.cine-title {
  font: 800 clamp(50px, 7.4vw, 116px)/.98 var(--cine-serif, Georgia, serif);
  letter-spacing: -.01em;
  margin: 0 0 22px;
  text-wrap: balance;
}
.cine-title em { font-style: normal; color: var(--cine-accent, #c8a27a); }
.cine-body {
  font: 600 clamp(22px, 2vw, 30px)/1.45 var(--cine-sans, system-ui);
  color: color-mix(in srgb, var(--cine-ink, #f5efe6) 96%, transparent);
  margin: 0; max-width: 580px;
}
.cine-end .cine-body { margin-inline-start: auto; }
.cine-cta { pointer-events: auto; display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding: 17px 30px;
  border-radius: 999px; background: var(--cine-accent, #c8a27a); color: var(--cine-bg, #0d0b09); text-shadow: none;
  font: 800 clamp(16px, 1.25vw, 19px)/1 var(--cine-sans, system-ui); text-decoration: none;
  box-shadow: 0 14px 34px -12px rgb(0 0 0 / .6); transition: transform .3s cubic-bezier(.22,1,.36,1), filter .3s; }
.cine-cta:hover { transform: translateY(-2px); filter: brightness(1.08); }
.cine-cta svg { width: 18px; height: 18px; flex: none; }
.cine-chapter:not(.is-active) .cine-cta { pointer-events: none; }
.cine-center .cine-body { margin-inline: auto; }

.cine-rail {
  position: absolute; inset-inline-end: clamp(16px, 2.4vw, 36px); top: 50%;
  width: 1px; height: 30vh; translate: 0 -50%;
  background: color-mix(in srgb, var(--cine-ink, #f5efe6) 16%, transparent);
}
.cine-rail span {
  position: absolute; inset: 0; background: var(--cine-accent, #c8a27a);
  transform-origin: top; transform: scaleY(0);
}
.cine-hint {
  position: absolute; bottom: 34px; left: 50%; translate: -50% 0;
  display: grid; justify-items: center; gap: 10px;
  font: 400 12px/1 var(--cine-sans, system-ui); letter-spacing: .1em;
  color: color-mix(in srgb, var(--cine-ink, #f5efe6) 70%, transparent);
}
.cine-hint i {
  width: 1px; height: 46px; background: linear-gradient(currentColor, transparent);
  animation: cine-drip 2.2s cubic-bezier(.6, 0, .2, 1) infinite; transform-origin: top;
}
@keyframes cine-drip { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.cine-loader {
  position: absolute; inset: 0; display: grid; place-content: center; grid-auto-flow: column; align-items: baseline;
  background: var(--cine-bg, #0d0b09); color: var(--cine-ink, #f5efe6);
  font: 300 64px/1 var(--cine-serif, Georgia, serif); gap: 4px;
  transition: opacity .9s ease, visibility .9s;
}
.cine-loader small { font-size: 20px; color: var(--cine-accent, #c8a27a); }
.cine-loader.is-done { opacity: 0; visibility: hidden; }
/* Loader with the site's logo: a light veil over the first frame, the mark drawing itself as the film loads. */
.cine-loader.has-mark { background: radial-gradient(circle at 50% 50%, rgb(6 5 4 / .86) 0, rgb(6 5 4 / .7) 22%, rgb(6 5 4 / .55) 60%); z-index: 5; }
.cine-mark { position: relative; width: clamp(120px, 13vw, 180px); color: var(--cine-accent, #c8a27a); transition: transform 1.1s cubic-bezier(.22, 1, .36, 1); }
.cine-mark .ink { position: absolute; inset: 0; }
.cine-mark .ghost { opacity: .2; }
.cine-mark .ghost svg { filter: none; animation: none; }
.cine-mark .ghost [data-draw] { stroke-dasharray: none; stroke-dashoffset: 0; }
.cine-mark svg { display: block; width: 100%; height: auto; overflow: visible; fill: none; stroke: currentColor;
  filter: drop-shadow(0 0 14px color-mix(in srgb, currentColor 45%, transparent)); animation: cine-breathe 2.4s ease-in-out infinite; }
.cine-mark svg * { vector-effect: non-scaling-stroke; }
.cine-mark mask * { stroke: none; }
.cine-mark [data-draw] { stroke-dasharray: 1; transition: stroke-dashoffset .6s cubic-bezier(.22, 1, .36, 1);
  stroke-dashoffset: calc(1 - clamp(0, (var(--p, 0) - var(--from, 0)) / (var(--to, 1) - var(--from, 0)), 1)); }
.cine-mark [data-fade] { transition: opacity .6s ease; opacity: clamp(0, (var(--p, 0) - var(--from, 0)) / (var(--to, 1) - var(--from, 0)), 1); }
.cine-mark .ghost [data-fade] { opacity: 1; }
.cine-loader.has-mark.is-done .cine-mark { transform: scale(1.12); }
/* While the logo loads, the opening's words wait; they rise in once the film is ready. */
.cine-sticky .cine-chapters, .cine-sticky .cine-hint { transition: opacity .9s ease .25s; }
.cine-sticky:has(.cine-loader.has-mark:not(.is-done)) .cine-chapters,
.cine-sticky:has(.cine-loader.has-mark:not(.is-done)) .cine-hint { opacity: 0; transition: none; }
@keyframes cine-breathe { 50% { filter: drop-shadow(0 0 24px color-mix(in srgb, currentColor 70%, transparent)); } }
@media (prefers-reduced-motion: reduce) { .cine-mark, .cine-mark svg, .cine-mark [data-draw] { animation: none; transition: none; } }

@media (max-width: 767px) {
  .cine-shade {
    background:
      linear-gradient(to top, rgb(var(--cine-shade, 10 8 6) / .82) 0%, rgb(var(--cine-shade, 10 8 6) / .35) 45%, transparent 70%),
      linear-gradient(to bottom, rgb(var(--cine-shade, 10 8 6) / .5) 0%, transparent 20%);
  }
  /* The stage is 100lvh tall; while the browser bars are showing, the bottom (100lvh − 100svh) of it is under
     the toolbar - so bottom-anchored text sits that much higher to stay in view. */
  .cine-chapter, .cine-end, .cine-center {
    top: auto; bottom: calc(124px + 100lvh - 100svh); translate: none;
    inset-inline: 20px; width: auto; text-align: start;
  }
  .cine-end .cine-body { margin-inline-start: 0; }
  .cine-end .cine-eyebrow { justify-content: flex-start; }
  .cine-chapter::before { display: none; }
  .cine-eyebrow { font-size: 16px; margin-bottom: 14px; }
  .cine-title { font-size: clamp(44px, 13vw, 56px); margin-bottom: 14px; }
  .cine-body { font-size: 21px; }
  .cine-cta { margin-top: 18px; padding: 14px 24px; font-size: 16px; }
  .cine-rail { display: none; }
  .cine-hint { bottom: calc(22px + 100lvh - 100svh); }
}

/* Phone chapter stops (see mobileStops in cinematic.js). */
html.cine-snap { scroll-snap-type: y mandatory; }
.cine-stop { position: absolute; inset-inline: 0; height: 1px; pointer-events: none; scroll-snap-align: start; scroll-snap-stop: always; }

/* Text for screen readers only. Lives in the engine (not only in a11y.js) so it is hidden in every mode. */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }