@font-face {
  font-family:"Princess Frog";
  src:url("../../assets/font/princess-frog-latin.woff") format("woff");
  font-display:swap;unicode-range:U+0020-007E,U+00B7;
}
/* One continuous portrait plane. No independent stretching of either movie. */
#kc-gate {
  padding:0;overflow:hidden;isolation:isolate;
  background:radial-gradient(ellipse at 50% 42%,#1b3343 0%,#091520 75%);
  color:#fff4dc;
}
#kc-gate .kc-gate-video-stage {
  position:absolute;width:max(100vw,calc(100svh * 9 / 16));
  aspect-ratio:9/16;overflow:hidden;left:50%;top:50%;
  transform:translate(-50%,-50%) scale(1);transform-origin:50% 50%;background:#091520;
}
#kc-gate .kc-gate-video-stage::after {
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  background:radial-gradient(ellipse at 46% 38%,rgba(255,190,122,.42),transparent 62%),
    linear-gradient(120deg,rgba(255,163,91,.08),transparent 52%);
  mix-blend-mode:screen;
}
#kc-gate .kc-gate-video-poster,
#kc-gate [data-gate-hold],#kc-gate [data-gate-water] {
  position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
}
#kc-gate .kc-gate-video-poster {object-fit:cover;}
#kc-gate video {
  position:absolute;max-width:none;object-fit:fill;pointer-events:none;opacity:0;
}
#kc-gate [data-gate-hold] {opacity:0;transition:opacity 420ms cubic-bezier(.25,.1,.25,1);}
#kc-gate [data-gate-water] {opacity:0;pointer-events:none;}
#kc-gate[data-intro-presented="true"][data-gate-phase="intro"] [data-gate-one],
#kc-gate[data-intro-presented="true"][data-gate-phase="hold"] [data-gate-one],
#kc-gate[data-intro-presented="true"][data-gate-phase="arming"] [data-gate-one] {opacity:1;}
#kc-gate[data-gate-phase="hold"][data-hold-painted="true"] [data-gate-hold],
#kc-gate[data-gate-phase="arming"][data-hold-painted="true"] [data-gate-hold] {opacity:1;}
#kc-gate[data-gate-phase="hold"][data-hold-painted="true"] [data-gate-water] {opacity:.8;}
#kc-gate[data-gate-bridge="true"] .kc-gate-video-stage {
  will-change:transform;
  animation:kc-gate-wish-bridge var(--gate-bridge-duration,840ms) cubic-bezier(.45,.05,.2,1) both;
}
#kc-gate[data-gate-bridge="true"] .kc-gate-video-stage::after {
  animation:kc-gate-wish-bloom var(--gate-bridge-duration,840ms) ease-out both;
}
#kc-gate[data-gate-phase="arming"] [data-gate-two],
#kc-gate[data-gate-phase="exit"] [data-gate-two],
#kc-gate[data-gate-phase="complete"] [data-gate-two] {
  transform:translate3d(var(--gate-bridge-inverse-x,0%),var(--gate-bridge-inverse-y,0%),0)
    scale(var(--gate-bridge-inverse-scale,1));transform-origin:50% 50%;
  /* OP13: Gate 2 sits at its final (inverse) framing from the first frame — it is invisible until the push-in
     lands, so there is nothing to tween. A second, differently-eased transform here made the crossfade drift. */
  transition:opacity var(--gate-bridge-fade-duration,350ms) ease-out var(--gate-bridge-fade-delay,490ms);
}
#kc-gate[data-gate-phase="exit"] [data-gate-two],
#kc-gate[data-gate-phase="complete"] [data-gate-two] {opacity:1;}
#kc-gate[data-gate-limited="true"] [data-gate-water] {display:none;}
/* Canvas remains underneath the first presented exit frame, never a blank gap. */
#kc-gate[data-gate-phase="exit"][data-hold-painted="true"] [data-gate-hold],
#kc-gate[data-gate-phase="complete"][data-hold-painted="true"] [data-gate-hold] {opacity:1;}
#kc-gate .kc-gate-content {
  position:absolute;left:0;right:0;bottom:0;z-index:3;gap:.45rem;
  padding:5.2rem 1.25rem max(1.5rem,env(safe-area-inset-bottom));
  background:linear-gradient(180deg,transparent,rgba(5,16,25,.78) 36%,rgba(5,16,25,.95));
  text-shadow:0 1px 3px #08121c;
  opacity:0;pointer-events:none;transition:opacity 360ms ease;
}
#kc-gate[data-gate-phase="hold"] .kc-gate-content {
  opacity:1;pointer-events:auto;transition:opacity 700ms ease 300ms;
}
#kc-gate .kc-gate-content h2 {
  font-family:"Princess Frog",Georgia,serif;font-weight:400;line-height:1;
  color:#fff4dc;font-size:clamp(3.1rem,15vw,4.8rem);margin:0;
}
#kc-gate .kc-gate-label,#kc-gate .kc-gate-date,#kc-gate .kc-gate-credit {margin:0;color:#fff4dc;}
#kc-gate .kc-gate-label {font:.72rem Georgia,serif;letter-spacing:.21em;text-transform:uppercase;}
#kc-gate .kc-gate-date {font:1rem Georgia,serif;}
#kc-gate .kc-gate-credit {font: .62rem Georgia,serif;letter-spacing:.15em;margin-top:.7rem;opacity:.8;}
#kc-gate #kc-gate-cta {
  min-width:12.5rem;min-height:50px;margin:.55rem 0 0;padding:.75rem 1.2rem;
  border:0;border-bottom:1px solid rgba(255,244,220,.65);border-radius:0;
  background:transparent;color:#fff4dc;font:1.05rem Georgia,serif;
  text-transform:none;letter-spacing:.045em;
}
#kc-gate #kc-gate-cta:focus-visible {outline:2px solid #fff4dc;outline-offset:5px;}
#kc-gate #kc-gate-cta:active {background:rgba(255,244,220,.08);}
#kc-gate[data-gate-limited="true"] .kc-gate-content {transition:none;}
@media (min-aspect-ratio:3/4) {
  #kc-gate .kc-gate-video-stage {width:calc(100svh * 9 / 16);}
  #kc-gate .kc-gate-content {left:50%;right:auto;width:calc(100svh * 9 / 16);transform:translateX(-50%);}
}
@media (max-height:600px) {
  #kc-gate .kc-gate-content {padding:2rem .7rem max(.5rem,env(safe-area-inset-bottom));gap:.25rem;}
  #kc-gate .kc-gate-content h2 {font-size:2.45rem;}
  #kc-gate .kc-gate-label {font-size:.6rem;}
  #kc-gate .kc-gate-date {font-size:.8rem;}
  #kc-gate #kc-gate-cta {min-width:9rem;min-height:44px;margin:.15rem 0 0;font-size:.85rem;padding:.6rem;}
  #kc-gate .kc-gate-credit {display:none;}
}
@media (prefers-reduced-motion:reduce) {
  #kc-gate [data-gate-water] {display:none;}
  #kc-gate[data-gate-bridge="true"] .kc-gate-video-stage,
  #kc-gate[data-gate-bridge="true"] .kc-gate-video-stage::after {animation:none;}
  #kc-gate[data-gate-phase="arming"] [data-gate-two],
  #kc-gate[data-gate-phase="exit"] [data-gate-two],
  #kc-gate[data-gate-phase="complete"] [data-gate-two] {transform:none;transition:none;}
  #kc-gate .kc-gate-content,#kc-gate [data-gate-hold],#kc-gate [data-gate-two] {transition:none;}
}

@keyframes kc-gate-wish-bridge {
  0% {transform:translate(-50%,-50%) scale(1);}
  /* OP12: a camera push-in, not a snap — the zoom spans 74 % of the bridge. OP13: no filter, transform only. */
  74%,100% {
    transform:translate(calc(-50% + var(--gate-bridge-x,0%)),calc(-50% + var(--gate-bridge-y,0%)))
      scale(var(--gate-bridge-scale,1));
  }
}
@keyframes kc-gate-wish-bloom {
  0%,100% {opacity:0;}
  62% {opacity:var(--gate-bridge-bloom,.24);}
  86% {opacity:var(--gate-bridge-bloom-mid,.12);}
}