/* CREATIK — cinematic scroll-scrub hero + landing intro.
   Tokens scoped to :root under a ck- prefix so they never collide with the
   existing site's tokens (--ink, --gold, --bone, etc). Note: background/color
   are applied per-section (.ck-hero-course, .ck-section) rather than on the
   #ckCine wrapper itself — this headless Chromium environment has been
   observed to silently fail to paint an entire subtree when non-trivial
   CSS (background/isolation/z-index) is applied directly to that outer
   wrapper node. Keep #ckCine bare (id-only, no styled class) and style its
   children directly instead. */
:root {
  --ck-black: #0a0705;
  --ck-cream: #f3ead9;
  --ck-orange: #ff5a1f;
  --ck-amber: #e8a33d;
  --ck-display: 'Archivo', 'Space Grotesk', sans-serif;
  --ck-mono: 'Space Mono', 'Space Grotesk', monospace;
}
[class^="ck-"], [class*=" ck-"] { box-sizing: border-box; }
.ck-container { max-width: 1400px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }

/* ===================== LOADER ===================== */
.ck-loader {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--ck-black);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px;
  transition: opacity .5s ease;
}
.ck-loader__word {
  font-family: var(--ck-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.01em; font-size: clamp(28px, 6vw, 56px); color: var(--ck-cream);
  position: relative;
}
.ck-loader__track {
  width: clamp(180px, 30vw, 320px); height: 1px; background: rgba(243,234,217,.18);
  position: relative; overflow: hidden;
}
.ck-loader__fill {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0%;
  background: var(--ck-orange);
  transition: width .12s linear;
}
.ck-loader__pct {
  font-family: var(--ck-mono); font-size: 11px; letter-spacing: .18em; color: rgba(243,234,217,.5);
}
.ck-loader.is-done .ck-loader__fill { width: 100% !important; }
.ck-loader__split { position: fixed; inset: 0; z-index: 99998; pointer-events: none; }
.ck-loader__split i {
  position: absolute; left: 0; right: 0; height: 50%; background: var(--ck-black);
  transform: translateY(0);
}
.ck-loader__split i:first-child { top: 0; }
.ck-loader__split i:last-child { bottom: 0; }
.ck-loader__split.is-leaving i:first-child { transform: translateY(-100%); transition: transform .85s cubic-bezier(0.7,0,0.84,0); }
.ck-loader__split.is-leaving i:last-child { transform: translateY(100%); transition: transform .85s cubic-bezier(0.7,0,0.84,0); }
.ck-loader__split.is-hidden { display: none; }
.ck-loader.is-leaving .ck-loader__word,
.ck-loader.is-leaving .ck-loader__track,
.ck-loader.is-leaving .ck-loader__pct { opacity: 0; transition: opacity .3s ease; }
.ck-loader.is-hidden { display: none; }

/* ===================== HERO SCRUB COURSE ===================== */
.ck-hero-course {
  position: relative;
  height: 640vh;
  z-index: 950; /* sits above the site's global nav (z-index:900) while pinned */
  color: var(--ck-cream);
  /* No interactive content anywhere in the hero — click-through for the whole
     course, not just the sticky stage, since the course's own (non-sticky)
     box still spans the viewport-covering region for a while after the scrub
     reaches p=1 (position:sticky release lag) and would otherwise swallow
     clicks meant for the nav that has just faded in above it. */
  pointer-events: none;
}
@media (max-width: 768px) {
  .ck-hero-course { height: 480vh; }
}
.ck-hero-stage {
  position: sticky; top: 0; left: 0;
  width: 100%; height: 100vh; height: 100dvh;
  overflow: hidden;
  background: var(--ck-black);
  /* No interactive content in here (canvas + text only) — click-through avoids
     the stage (still on-screen for a full viewport-height while position:sticky
     releases, after progress already reads 1 and the nav has faded in above it
     in document order but below it in z-index) from swallowing clicks on the
     nav/burger during that overlap. */
  pointer-events: none;
}
.ck-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.ck-noise {
  position: absolute; inset: -2px; pointer-events: none; opacity: .05; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}
.ck-vignette {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 55%, transparent 45%, rgba(10,7,5,.55) 100%),
    linear-gradient(180deg, rgba(10,7,5,.35) 0%, transparent 18%, transparent 78%, rgba(10,7,5,.5) 100%);
}
.ck-warm-wash {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light; opacity: .5;
  background: radial-gradient(80% 60% at 50% 40%, rgba(255,90,31,.25), transparent 70%);
}

/* The standalone in-hero header was folded into the single site-wide #nav
   (styles.css) — see the "hidden during hero scrub" rules there. */

.ck-scrollmeter {
  position: absolute; left: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vw, 32px); z-index: 5;
  display: flex; align-items: center; gap: 12px;
}
.ck-scrollmeter__track { width: 88px; height: 1px; background: rgba(243,234,217,.25); position: relative; }
.ck-scrollmeter__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0%; background: var(--ck-orange); }
.ck-scrollmeter__label { font-family: var(--ck-mono); font-size: 10px; letter-spacing: .12em; color: rgba(243,234,217,.6); }

.ck-scrollhint {
  position: absolute; right: clamp(20px, 4vw, 48px); bottom: clamp(20px, 4vw, 32px); z-index: 5;
  font-family: var(--ck-mono); font-size: 10px; letter-spacing: .2em; color: rgba(243,234,217,.6);
  transition: opacity .5s ease;
  writing-mode: horizontal-tb;
}
.ck-scrollhint.is-hidden { opacity: 0; }

/* ===== hero text beats ===== */
.ck-beat {
  position: absolute; inset: 0; z-index: 4;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 20px;
  pointer-events: none;
  opacity: 0;
}
.ck-line-mask { overflow: hidden; display: block; }
.ck-line-inner {
  display: block;
  clip-path: inset(0 0 100% 0);
  transform: translateY(24px);
  will-change: transform, clip-path;
}

.ck-beat1__titlewrap { position: relative; }
.ck-beat1__title {
  font-family: var(--ck-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(52px, 13vw, 168px); line-height: .92; letter-spacing: -0.015em;
  display: flex; justify-content: center; flex-wrap: wrap;
}
span.ck-beat1__title.ck-split { position: absolute; inset: 0; margin: 0; }
.ck-letter-mask { overflow: hidden; display: inline-block; }
.ck-letter-inner {
  display: inline-block; position: relative;
  clip-path: inset(0 0 100% 0); transform: translateY(0.25em);
}
.ck-split { position: relative; }
.ck-split::before, .ck-split::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  pointer-events: none;
}
.ck-split::before { color: var(--ck-amber); transform: translate(1px, -1px); mix-blend-mode: screen; opacity: .6; }
.ck-split::after { color: var(--ck-orange); transform: translate(-1px, 1px); mix-blend-mode: screen; opacity: .55; }

.ck-beat1__sub {
  margin-top: clamp(16px, 3vw, 28px);
  font-family: var(--ck-mono); text-transform: uppercase; letter-spacing: .24em;
  font-size: clamp(10px, 1.4vw, 13px); color: rgba(243,234,217,.75);
}

.ck-beat2__line, .ck-beat3__line {
  font-family: var(--ck-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(34px, 7vw, 92px); line-height: 1.02; letter-spacing: -0.01em;
}
.ck-beat2__line--orange, .ck-beat3__line--orange { color: var(--ck-orange); }

/* ===================== AFTER-HERO SECTIONS ===================== */
.ck-section { position: relative; padding: clamp(90px, 14vw, 180px) 0; background: var(--ck-black); color: var(--ck-cream); }
.ck-eyebrow {
  font-family: var(--ck-mono); text-transform: uppercase; letter-spacing: .28em; font-size: 11px;
  color: var(--ck-orange); margin: 0 0 18px;
}
.ck-heading {
  font-family: var(--ck-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(36px, 6vw, 78px); line-height: .98; letter-spacing: -0.01em; margin: 0 0 clamp(50px, 8vw, 96px);
}
.ck-heading em { font-style: normal; color: var(--ck-orange); }

/* --- proof of work cards --- */
.ck-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgba(243,234,217,.14); border: 1px solid rgba(243,234,217,.14); }
@media (max-width: 860px) { .ck-cards { grid-template-columns: 1fr; } }
.ck-card { background: var(--ck-black); padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 18px; transition: transform .4s cubic-bezier(0.16,1,0.3,1), background .4s; }
@media (hover: hover) and (pointer: fine) {
  .ck-card:hover { transform: translateY(-6px); background: #120d09; }
}
.ck-card__index { font-family: var(--ck-mono); font-size: 12px; letter-spacing: .1em; color: rgba(243,234,217,.4); }
.ck-card__title { font-family: var(--ck-display); font-weight: 900; text-transform: uppercase; font-size: clamp(17px, 1.9vw, 21px); letter-spacing: -.005em; line-height: 1.15; }
.ck-card__desc { font-family: var(--ck-mono); font-size: 12.5px; line-height: 1.7; color: rgba(243,234,217,.6); letter-spacing: .01em; }
.ck-card__placeholder { display: inline-block; font-family: var(--ck-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ck-orange); border: 1px solid rgba(255,90,31,.4); padding: 4px 10px; align-self: flex-start; }
.ck-card__cta { margin-top: auto; font-family: var(--ck-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ck-orange); text-decoration: none; }

/* --- specs (count-up numbers, no cards) --- */
.ck-specs { display: flex; flex-wrap: wrap; gap: clamp(40px, 8vw, 100px); }
.ck-spec__num { font-family: var(--ck-display); font-weight: 900; font-size: clamp(48px, 9vw, 120px); line-height: 1; letter-spacing: -0.02em; color: var(--ck-cream); }
.ck-spec__num span { color: var(--ck-orange); }
.ck-spec__label { margin-top: 10px; font-family: var(--ck-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(243,234,217,.55); }

/* --- finale --- */
.ck-finale { text-align: center; }
.ck-finale__heading {
  font-family: var(--ck-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(52px, 13vw, 160px); line-height: .9; letter-spacing: -0.015em; margin: 0 0 clamp(36px, 6vw, 60px);
}
.ck-finale__heading em { font-style: normal; color: var(--ck-orange); }
.ck-btn-magnetic {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--ck-mono); text-transform: uppercase; letter-spacing: .14em; font-size: 13px;
  color: var(--ck-black); background: var(--ck-orange);
  padding: 18px 34px; border-radius: 999px; text-decoration: none;
  border: none; cursor: pointer;
}
.ck-finale__phone { margin: 18px 0 0; font-family: var(--ck-mono); font-size: 12px; letter-spacing: .1em; color: rgba(243,234,217,.55); }
.ck-finale__secondary { display: block; margin-top: 14px; font-family: var(--ck-mono); font-size: 12px; letter-spacing: .06em; color: rgba(243,234,217,.6); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.ck-finale__secondary:hover { color: var(--ck-cream); border-color: rgba(243,234,217,.4); }

.ck-footer-main { background: var(--ck-black); color: var(--ck-cream); padding-bottom: clamp(40px, 6vw, 64px); }
.ck-footer { padding-top: 28px; border-top: 1px solid rgba(243,234,217,.14); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; }
.ck-footer__brand { font-family: var(--ck-display); font-weight: 900; text-transform: uppercase; font-size: 13px; letter-spacing: -0.005em; }
.ck-footer__meta { font-family: var(--ck-mono); font-size: 11px; letter-spacing: .04em; color: rgba(243,234,217,.5); }

@media (prefers-reduced-motion: reduce) {
  .ck-line-inner, .ck-letter-inner { clip-path: none !important; transform: none !important; }
}