/* ==========================================================================
   Title-sequence layer
   Motion language borrowed from a spy-thriller title sequence, translated
   into Katherine's palette (ink #242220, red #b81d18, slate wash, peach wash).

   Beats, in the order a section plays:
     1. Map linework fades up behind the section and drifts slowly.
     2. Images are revealed by a dry-brush wipe, then hold with a slow drift.
     3. Ink splats bloom at the section's edges.
     4. The label lands on a painted strip, then the heading settles in
        (tracking tightens, blur clears), then the body copy follows.

   Everything is decorative and aria-hidden. With reduced motion turned on,
   the accents stay but nothing moves.
   ========================================================================== */

:root {
  --seq-ink: #242220;
  --seq-red: #b81d18;
  --seq-slate: #3f5868;
  --seq-strip: rgba(226, 182, 150, .55);   /* peach wash, the "credit strip" */
  --seq-ease: cubic-bezier(.65, 0, .35, 1);
  --seq-settle: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Accent: condensed caps labels ---------------------------------- */

.kd-seq-label {
  font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
  font-weight: 500 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--seq-ink) !important;
  position: relative;
  display: inline-block;
  padding: .28em .6em .22em;
  isolation: isolate;
}
.kd-seq-label::before {               /* the painted strip behind the label */
  content: "";
  position: absolute;
  inset: 0 -.2em;
  z-index: -1;
  background: var(--seq-strip);
  -webkit-mask: var(--seq-strip-mask) 0 0 / 100% 100% no-repeat;
          mask: var(--seq-strip-mask) 0 0 / 100% 100% no-repeat;
  transform-origin: 0 50%;
}

.kd-seq-meta {
  font-family: 'Oswald', 'Arial Narrow', sans-serif !important;
  font-weight: 400 !important;
  font-size: 12px !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
}

/* ---------- Accent: map linework ------------------------------------------ */

/* Sections whose children use blend modes are skipped by sequence.js,
   since isolating them would change how those blends render. */
.kd-seq-mapped { isolation: isolate; }
.kd-seq-map {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url(/images/map-lines.svg) 0 0 / 900px 900px repeat;
  opacity: .1;
  /* strongest at the edges, washed out behind the copy, like the sequence */
  -webkit-mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 30%, #000 100%);
          mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, transparent 30%, #000 100%);
}

/* ---------- Accent: ink splats -------------------------------------------- */

.kd-seq-splat {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  color: var(--seq-ink);
  opacity: .16;
}
.kd-seq-splat.is-red { color: var(--seq-red); opacity: .22; }
.kd-seq-splat svg { display: block; width: 100%; height: 100%; overflow: visible; }

@media (max-width: 640px) {
  .kd-seq-splat { display: none; }   /* 20px gutters: no room for ink beside the copy */
  .kd-seq-map { opacity: .07; }
  .kd-seq-label { letter-spacing: .1em !important; }
}

/* ==========================================================================
   Motion. Only for people who haven't asked their device to reduce it.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

  /* Hold the hero until the script choreographs it; a failsafe in
     sequence.js removes .kd-seq-on if anything goes wrong. */
  .kd-seq-on:not(.kd-seq-ready) main > section:first-child :is(h1, p, img) { opacity: 0; }

  /* 1. Map: fades up, then drifts forever (slowly) */
  .kd-seq-on .kd-seq-map {
    opacity: 0;
    transition: opacity 2.4s ease-out;
    animation: kd-seq-drift 120s linear infinite;
  }
  .kd-seq-on .kd-seq-map.kd-in { opacity: .1; }
  @keyframes kd-seq-drift { to { background-position: -900px 300px; } }

  /* 2. Images: dry-brush wipe (mask layers are set by the script) */
  .kd-seq-wipe { transition: -webkit-mask-position 1.7s var(--seq-ease), mask-position 1.7s var(--seq-ease); }

  /* Hero holds and drifts after its wipe, never fully still */
  .kd-seq-drift { animation: kd-seq-breathe 26s ease-in-out infinite alternate; transform-origin: 50% 100%; }
  @keyframes kd-seq-breathe { from { scale: 1; } to { scale: 1.035; } }

  /* 3. Splats bloom with a little overshoot */
  .kd-seq-on .kd-seq-splat svg { scale: .15; opacity: 0; rotate: -12deg; }
  .kd-seq-on .kd-seq-splat.kd-in svg {
    scale: 1; opacity: 1; rotate: 0deg;
    transition: scale 1.1s cubic-bezier(.2, 1.5, .35, 1), opacity .5s ease-out, rotate 1.1s var(--seq-settle);
  }

  /* 4. Credits: label strip paints in, then text, then heading, then copy */
  .kd-seq-on .kd-seq-label:not(.kd-in)::before { scale: 0 1; opacity: 0; }
  .kd-seq-on .kd-seq-label.kd-in::before { scale: 1 1; transition: scale .7s var(--seq-ease); }
  .kd-seq-on .kd-seq-label:not(.kd-in) { color: transparent !important; }
  .kd-seq-label.kd-in { transition: color .5s ease .35s; }

  .kd-seq-on .kd-seq-beat:not(.kd-in) { opacity: 0; translate: 0 14px; }
  .kd-seq-beat.kd-in { transition: opacity .9s ease-out, translate 1s var(--seq-settle); }

  .kd-seq-on .kd-seq-title:not(.kd-in) { opacity: 0; filter: blur(4px); }
  .kd-seq-title.kd-in {
    transition: opacity 1.1s ease-out, letter-spacing 1.6s var(--seq-settle), filter 1.1s ease-out;
    /* letter-spacing start/end values are set inline by sequence.js */
  }
}

/* Living washes: slow drift and breathe on background watercolors (uses translate/scale/rotate so it layers over the bloom-in transform) */
@keyframes kd-wash-drift-a { 0%,100% { translate: 0 0; scale: 1; rotate: 0deg; } 33% { translate: 2.5% -3% ; scale: 1.06; rotate: 2deg; } 66% { translate: -2% 2%; scale: .97; rotate: -1.5deg; } }
@keyframes kd-wash-drift-b { 0%,100% { translate: 0 0; scale: 1; rotate: 0deg; } 40% { translate: -3% 2.5%; scale: 1.08; rotate: -2.5deg; } 75% { translate: 2% -1.5%; scale: .96; rotate: 1deg; } }
@media (prefers-reduced-motion: no-preference) {
  [data-wash], .kd-block-3, .kd-block-4, .kd-span-3 { animation: kd-wash-drift-a 26s ease-in-out infinite; will-change: translate, scale, rotate; }
  section:nth-of-type(even) [data-wash], .kd-block-4 { animation-name: kd-wash-drift-b; animation-duration: 32s; animation-delay: -9s; }
  .kd-span-3 { animation-duration: 14s; }
}