/* ConneryFilm motion kit — extracted from the Ali Zand Vakili site, which
   Connery set as the bar ("AZV is the standard").

   The whole system rests on four numbers taken from that build:
     ease   cubic-bezier(0.22, 1, 0.36, 1)   a fast start that settles softly
     rise   22px                              default travel; 38px for headlines
     dur    700ms                             600-650ms for text, 500ms for small items
     stagger 60-80ms per sibling, capped by cycling the index

   Everything is CSS transitions driven by one .is-in class. No animation
   library, no rAF loops except the counter — that is why it never janks and
   why it degrades cleanly when JS fails.

   Motion is opt-IN via [data-reveal]. Elements are invisible until observed,
   so anything not wired up stays visible rather than disappearing. */

:root {
  --mk-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --mk-rise: 22px;
  --mk-rise-lg: 38px;
  --mk-dur: 700ms;
  --mk-dur-text: 620ms;
  --mk-dur-sm: 500ms;
  --mk-stagger: 70ms;
}

/* Nothing is hidden until motion.js confirms it is running, so a blocked or
   404ing script can never leave real content invisible to a visitor or to
   Google. This is why .mk-ready gates every rule below. */

/* ---- base reveal ---------------------------------------------------- */
.mk-ready [data-reveal] {
  opacity: 0;
  transform: translateY(var(--mk-rise));
  transition: opacity var(--mk-dur) var(--mk-ease),
              transform var(--mk-dur) var(--mk-ease);
}
.mk-ready [data-reveal].is-in { opacity: 1; transform: none; }

/* ---- masked headline rise -------------------------------------------
   The container is the trigger; children animate on their own beats, so a
   section head reads as one gesture: eyebrow, headline, lede, rule. */
[data-reveal-group] { opacity: 1; transform: none; }

.mk-ready [data-reveal-group] .mk-eyebrow {
  display: inline-block; opacity: 0; transform: translateY(14px);
  transition: opacity var(--mk-dur-sm) var(--mk-ease),
              transform var(--mk-dur-sm) var(--mk-ease);
}
.mk-ready [data-reveal-group] .mk-headline {
  opacity: 0; transform: translateY(var(--mk-rise-lg));
  clip-path: inset(0 0 100% 0);
  transition: opacity var(--mk-dur-text) var(--mk-ease) 120ms,
              transform var(--mk-dur-text) var(--mk-ease) 120ms,
              clip-path var(--mk-dur-text) var(--mk-ease) 120ms;
}
.mk-ready [data-reveal-group] .mk-lede {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--mk-dur-text) var(--mk-ease) 260ms,
              transform var(--mk-dur-text) var(--mk-ease) 260ms;
}
.mk-ready [data-reveal-group] .mk-rule {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 900ms var(--mk-ease) 340ms;
}
.mk-ready [data-reveal-group].is-in .mk-eyebrow,
.mk-ready [data-reveal-group].is-in .mk-lede { opacity: 1; transform: none; }
.mk-ready [data-reveal-group].is-in .mk-headline {
  opacity: 1; transform: none; clip-path: inset(0 0 0 0);
}
.mk-ready [data-reveal-group].is-in .mk-rule { transform: scaleX(1); }

/* ---- paragraph stagger ---------------------------------------------- */
[data-reveal-stagger] { opacity: 1; transform: none; }
.mk-ready [data-reveal-stagger] > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity var(--mk-dur-text) var(--mk-ease),
              transform var(--mk-dur-text) var(--mk-ease);
}
.mk-ready [data-reveal-stagger].is-in > * { opacity: 1; transform: none; }
[data-reveal-stagger] > *:nth-child(2) { transition-delay: 120ms; }
[data-reveal-stagger] > *:nth-child(3) { transition-delay: 240ms; }
[data-reveal-stagger] > *:nth-child(4) { transition-delay: 360ms; }
[data-reveal-stagger] > *:nth-child(5) { transition-delay: 480ms; }
[data-reveal-stagger] > *:nth-child(6) { transition-delay: 600ms; }

/* ---- sticky header --------------------------------------------------- */
[data-mk-nav] { transition: background-color 320ms var(--mk-ease),
                            box-shadow 320ms var(--mk-ease); }

/* ---- accessibility ---------------------------------------------------
   Not a nicety: without this the whole page animates for people who have
   asked their OS for stillness, and iOS Low Power Mode reports it too. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal-group] *, .mk-ready [data-reveal-stagger] > * {
    opacity: 1 !important; transform: none !important;
    clip-path: none !important; transition: none !important;
  }
}

/* ==========================================================================
   CBS extensions — the heavier scroll layer this site asks for.
   Everything below still hangs off .mk-ready, so a failed script leaves the
   page fully readable rather than blank.
   ========================================================================== */

/* ---- headline that rises line-by-line out of a mask ---------------------- */
.mk-ready [data-mk-lines] .line { overflow: hidden; }
.mk-ready [data-mk-lines] .line > span {
  display: block; transform: translateY(105%);
  transition: transform 1000ms var(--mk-ease);
}
.mk-ready [data-mk-lines].is-in .line > span { transform: none; }
.mk-ready [data-mk-lines] .line:nth-child(2) > span { transition-delay: 110ms; }
.mk-ready [data-mk-lines] .line:nth-child(3) > span { transition-delay: 220ms; }
.mk-ready [data-mk-lines] .line:nth-child(4) > span { transition-delay: 330ms; }

/* ---- word-by-word paragraph ------------------------------------------- */
.mk-ready [data-mk-words] .w {
  display: inline-block; opacity: 0; transform: translateY(14px);
  transition: opacity 620ms var(--mk-ease), transform 620ms var(--mk-ease);
  transition-delay: calc(var(--i) * 26ms);
}
.mk-ready [data-mk-words].is-in .w { opacity: 1; transform: none; }

/* ---- image curtain: a gold panel wipes off the picture ------------------ */
.mk-ready [data-mk-curtain] { position: relative; overflow: hidden; }
.mk-ready [data-mk-curtain] > img,
.mk-ready [data-mk-curtain] > picture > img {
  transform: scale(1.18); transition: transform 1500ms var(--mk-ease);
}
.mk-ready [data-mk-curtain]::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(115deg, #C6912A, #F7E9A8 46%, #A97C1E);
  transform-origin: left center;
  transition: transform 1050ms var(--mk-ease);
}
.mk-ready [data-mk-curtain].is-in > img,
.mk-ready [data-mk-curtain].is-in > picture > img { transform: none; }
.mk-ready [data-mk-curtain].is-in::after { transform: scaleX(0); transform-origin: right center; }

/* ---- clip reveal from the bottom --------------------------------------- */
.mk-ready [data-mk-clip] {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1150ms var(--mk-ease);
}
.mk-ready [data-mk-clip].is-in { clip-path: inset(0 0 0 0); }

/* ---- a hairline that draws across ------------------------------------- */
.mk-ready [data-mk-draw] {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1100ms var(--mk-ease);
}
.mk-ready [data-mk-draw].is-in { transform: scaleX(1); }

/* ---- scale-in for figures --------------------------------------------- */
.mk-ready [data-mk-zoom] {
  opacity: 0; transform: scale(.94);
  transition: opacity 900ms var(--mk-ease), transform 1100ms var(--mk-ease);
}
.mk-ready [data-mk-zoom].is-in { opacity: 1; transform: none; }

/* ---- gold sweep across a headline once it lands ------------------------ */
.mk-ready [data-mk-sheen] { position: relative; overflow: hidden; }
.mk-ready [data-mk-sheen]::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 45%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(247,233,168,.24), transparent);
  pointer-events: none;
}
.mk-ready [data-mk-sheen].is-in::after { animation: mk-sheen 1500ms var(--mk-ease) 520ms 1; }
@keyframes mk-sheen { to { left: 115%; } }

/* ---- page-load curtain -------------------------------------------------- */
.mk-boot {
  position: fixed; inset: 0; z-index: 200; background: var(--ink, #06070A);
  display: grid; place-items: center;
  transition: opacity 620ms var(--mk-ease), visibility 620ms;
  /* Safety net. If motion.js or site.js never runs — blocked script, network
     stall, a syntax error in a future edit — a JS-driven curtain would sit over
     the whole site forever. A CSS animation needs no JavaScript at all, so the
     page always uncovers itself even when everything else has failed. */
  animation: mk-boot-out 500ms var(--mk-ease) 2200ms forwards;
}
@keyframes mk-boot-out { to { opacity: 0; visibility: hidden; } }
.mk-boot.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.mk-boot__bar {
  width: min(240px, 46vw); height: 1px; background: rgba(255,255,255,.1); overflow: hidden;
}
.mk-boot__bar i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, #C6912A, #F7E9A8, #A97C1E);
  transform-origin: left center; transform: scaleX(0);
  animation: mk-boot-fill 900ms var(--mk-ease) forwards;
}
@keyframes mk-boot-fill { to { transform: scaleX(1); } }

/* ---- reduced motion: everything above collapses to "just show it" ------- */
@media (prefers-reduced-motion: reduce) {
  [data-mk-lines] .line > span,
  [data-mk-words] .w,
  [data-mk-curtain] > img,
  [data-mk-curtain] > picture > img,
  [data-mk-clip], [data-mk-draw], [data-mk-zoom] {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
    transition: none !important;
  }
  [data-mk-curtain]::after, [data-mk-sheen]::after { display: none !important; }
  .mk-boot { display: none !important; }
}