/* ============================================================
   KNOCK, case-study film (Apple-style product simulation)
   Scoped under #kfilm. A persistent iPhone on the right cycles
   through the real app screens while copy rises on the left,
   bookended by a branded intro and close.

   Same robustness principle as the Quantum film: every element
   rests in its final, fully-visible state; entrance motion is
   layered on with the Web Animations API, so a paused / captured
   / reduced-motion frame always shows complete content.
   Sizing uses container query units (cqw).
   ============================================================ */
#kfilm {
  --k: #3ddc6e;            /* Knock green */
  --k-deep: #16a34a;
  --ink: #f4f6f5;
  --faint: rgba(244,246,245,.55);
  --hair: rgba(244,246,245,.16);
  position: relative;
  background: #080a08;
}
#kfilm * { box-sizing: border-box; }

#kfilm .kf-stage {
  position: absolute; inset: 0; overflow: hidden;
  container-type: inline-size;
  background: radial-gradient(120% 130% at 16% -10%, #112310 0%, #0c130b 46%, #07080a 100%);
  color: var(--ink);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
#kfilm .kf-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(64% 84% at 84% 52%, color-mix(in srgb, var(--k) 16%, transparent), transparent 62%);
}

/* persistent chrome --------------------------------------- */
#kfilm .kf-kicker {
  position: absolute; top: 5.2cqw; left: 5.4cqw; z-index: 8;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.45cqw; letter-spacing: .42em; text-transform: uppercase;
  color: var(--faint); display: flex; align-items: center; gap: 1.3cqw;
}
#kfilm .kf-kicker b { width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 .55cqw color-mix(in srgb, var(--k) 28%, transparent); }
#kfilm .kf-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2.5px; background: rgba(255,255,255,.07); z-index: 8; }
#kfilm .kf-prog i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--k-deep), var(--k)); }

/* left copy column ---------------------------------------- */
#kfilm .kf-copy {
  position: absolute; left: 7cqw; top: 50%; transform: translateY(-50%);
  width: 44cqw; z-index: 4; opacity: 0; visibility: hidden;
}
#kfilm .kf-copy.show { opacity: 1; visibility: visible; }
#kfilm .kf-tag {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 1.45cqw; letter-spacing: .12em; text-transform: uppercase;
  color: var(--k); margin-bottom: 2.4cqw;
}
#kfilm .kf-h { font-size: 5.6cqw; line-height: .98; font-weight: 600; letter-spacing: -.04em; max-width: 15ch; text-wrap: balance; }
#kfilm .kf-sub { margin-top: 2.6cqw; font-size: 1.95cqw; line-height: 1.5; color: var(--faint); max-width: 34ch; text-wrap: pretty; }

/* persistent phone ---------------------------------------- */
#kfilm .kf-phone {
  position: absolute; top: 50%; right: 8.5cqw; transform: translateY(-50%);
  height: 50cqw; aspect-ratio: 1206 / 2622; z-index: 3;
  padding: 1cqw; border-radius: 5.6cqw;
  background: linear-gradient(150deg, #1b1d20, #0a0b0d);
  box-shadow: 0 6cqw 12cqw -3cqw rgba(0,0,0,.7), 0 0 0 .3cqw rgba(255,255,255,.06), inset 0 0 0 .15cqw rgba(255,255,255,.05);
  opacity: 0; visibility: hidden;
}
#kfilm .kf-phone.show { opacity: 1; visibility: visible; }
#kfilm .kf-screen { position: relative; width: 100%; height: 100%; border-radius: 4.6cqw; overflow: hidden; background: #f3f3f3; }
#kfilm .kf-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; opacity: 0; }
#kfilm .kf-screen img.on { opacity: 1; }
/* soft screen glare */
#kfilm .kf-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; box-shadow: inset 0 0 3cqw rgba(0,0,0,.12); }

/* brand intro + close ------------------------------------- */
#kfilm .kf-brand, #kfilm .kf-close {
  position: absolute; inset: 0; z-index: 6;
  display: grid; align-content: center; justify-items: center; text-align: center;
  padding: 6cqw; opacity: 0; visibility: hidden;
}
#kfilm .kf-brand.active, #kfilm .kf-close.active { opacity: 1; visibility: visible; }
#kfilm .kf-appicon {
  width: 12cqw; height: 12cqw; border-radius: 2.9cqw; margin-bottom: 3.4cqw;
  background: linear-gradient(158deg, #4cee7d, #15a047);
  display: grid; place-items: center;
  box-shadow: 0 3.4cqw 8cqw -2cqw color-mix(in srgb, var(--k) 55%, transparent), inset 0 0 0 .15cqw rgba(255,255,255,.25);
}
#kfilm .kf-appicon span { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; background: #fff; }
#kfilm .kf-word { font-size: 9cqw; font-weight: 600; letter-spacing: -.05em; }
#kfilm .kf-brand .kf-bsub { margin-top: 1.6cqw; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.7cqw; letter-spacing: .26em; text-transform: uppercase; color: var(--faint); }
#kfilm .kf-close .kf-csub { margin-top: 2.2cqw; font-size: 2.1cqw; color: var(--faint); letter-spacing: -.01em; max-width: 30ch; }

/* replay -------------------------------------------------- */
#kfilm .kf-replay {
  position: absolute; z-index: 9; right: 4.5cqw; bottom: 4.5cqw;
  display: none; align-items: center; gap: 1cqw;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 1.5cqw;
  color: var(--ink); background: rgba(255,255,255,.08); border: 1px solid var(--hair);
  padding: 1.2cqw 2cqw; border-radius: 3cqw; backdrop-filter: blur(6px);
}
#kfilm.kf-ended .kf-replay { display: inline-flex; }
#kfilm .kf-replay:hover { background: rgba(255,255,255,.16); }

/* narrow modal safety: stack copy above phone if very tight */
@container (max-width: 540px) {
  #kfilm .kf-copy { width: 50cqw; }
  #kfilm .kf-h { font-size: 6cqw; }
}