.kc-gate.has-scene {
  --kc-night: #1b2419;
  --kc-cream: #f5ead0;
  display: block;
  padding: 0;
  overflow: hidden;
  background: var(--kc-night);
  transition: none;
}
.kc-gate.has-scene[data-gate-state="opening"] {
  opacity: 1;
  pointer-events: none;
}

.kc-scene { position: absolute; inset: 0; overflow: hidden; opacity: 0; transition: opacity 500ms ease; }
.kc-gate.is-ready .kc-scene { opacity: 1; }
.kc-gate.is-fallback .kc-scene { opacity: 1; }
.kc-gate.is-fallback .kc-stage:not(.kc-stage--hit) { visibility: hidden; }
/* portrait stage hangs from the top: on tablets the crop falls on the tail, never on the spire */
.kc-stage {
  --kc-stage-t: translateX(-50%);
  position: absolute;
  left: 50%;
  top: 0;
  width: max(100%, 56.25vh);
  width: max(100%, 56.25dvh);
  aspect-ratio: 9 / 16;
  transform: var(--kc-stage-t);
}
.kc-stage--hit { z-index: 11; pointer-events: none; }
.kc-cam { position: absolute; inset: 0; transform-origin: 0 0; }
.kc-cam--mid { z-index: 3; }
.kc-cam--meadow { z-index: 3; }
.kc-cam--curtain { z-index: 5; }
.kc-cam--near { z-index: 6; }
.kc-scene__layer { position: absolute; display: block; margin: 0; }
/* boxes come from gate-layers.css; only an <img> inside a <picture> fills its box (no img.layer rule: it would outrank those boxes) */
.kc-scene__layer > img { display: block; width: 100%; height: 100%; }
.kc-scene__rig { position: absolute; inset: 0; }
.kc-scene__mid-l, .kc-scene__mid-r { z-index: 3; }
.kc-scene__light {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: .6;
  background: linear-gradient(200deg, rgba(255,226,160,0) 30%, rgba(255,226,160,.22) 45%, rgba(255,226,160,0) 60%);
}
.kc-scene__curt-a, .kc-scene__curt-b, .kc-scene__curt-c { z-index: 5; }
.kc-scene__curt-a { transform-origin: 0% 30%; }
.kc-scene__curt-b { transform-origin: 100% 25%; }
.kc-scene__curt-c { transform-origin: 50% 0%; }
.kc-scene__rig { z-index: 6; transform-origin: 20% 96%; }
.kc-scene__rig .kc-scene__guide { z-index: 0; }
.kc-scene__eyes-look, .kc-scene__eyes-blink, .kc-scene__branch-l { z-index: 1; }
.kc-scene__eyes-blink { z-index: 2; opacity: 0; }
.kc-scene__branch-l { z-index: 3; display: none; }
.kc-scene__eyes-look { opacity: 1; }
.kc-scene__vignette {
  position: absolute;
  inset: 0;
  z-index: 9;
  background: radial-gradient(ellipse at 50% 55%, rgba(0,0,0,0) 55%, rgba(12,14,10,.55) 100%);
  pointer-events: none;
}
.kc-gate.has-scene .kc-gate__content {
  position: absolute;
  inset: max(1rem, env(safe-area-inset-top)) 1rem max(1.25rem, env(safe-area-inset-bottom));
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  color: var(--kc-cream);
  text-shadow: 0 1px 10px rgba(0,0,0,.65);
  pointer-events: none;
}
.kc-gate.has-scene #gate-title {
  margin: 0;
  color: var(--kc-cream);
  font-size: .78rem;
  letter-spacing: .32em;
  text-transform: uppercase;
}
.kc-gate.has-scene .kc-gate__legend {
  position: absolute;
  left: 50%;
  top: 30%; /* above the guide's head, over the leaves: dark, quiet, and clear of his tail */
  margin: 0;
  translate: -50% 0;
  white-space: nowrap;
  font-family: "Cormorant Garamond", ui-serif, Georgia, serif;
  font-style: italic;
  font-size: clamp(1.15rem, 5vw, 1.45rem);
  letter-spacing: .06em;
  color: var(--kc-cream);
  text-shadow: 0 1px 14px rgba(10,16,8,1), 0 0 4px rgba(10,16,8,.9), 0 0 2px rgba(10,16,8,.9);
  opacity: 0;
  animation: kc-legend-in 900ms ease-out 1300ms forwards, kc-legend-breathe 3.2s ease-in-out 2200ms infinite alternate;
}
/* the hint is spent with the tap: the guide hops, the words step aside */
.kc-gate.has-scene[data-gate-state="opening"] .kc-gate__legend { animation: kc-legend-out 300ms ease-in forwards; }
@keyframes kc-legend-in { from { opacity: 0; transform: translateY(6px); } to { opacity: .92; transform: none; } }
@keyframes kc-legend-breathe { from { opacity: .92; } to { opacity: .6; } }
@keyframes kc-legend-out { from { opacity: .8; } to { opacity: 0; } }
.kc-gate.has-scene .kc-credit {
  margin: 0;
  color: rgba(245,234,208,.8);
  font-size: .7rem;
  letter-spacing: .18em;
}
.kc-gate__guide {
  position: absolute;
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 42%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
}
.kc-gate__guide:focus-visible {
  outline: 3px solid #f6e7b8;
  outline-offset: 6px;
  box-shadow: 0 0 0 7px rgba(18,20,12,.55);
}

.kc-gate.is-ready[data-gate-state="locked"] .kc-scene__eyes-look { animation: kc-eyes-look 4s infinite; }
.kc-gate.is-ready[data-gate-state="locked"] .kc-scene__eyes-blink { animation: kc-eyes-blink 4s infinite; }
.kc-gate.is-ready[data-gate-state="locked"] .kc-scene__rig { animation: kc-rig-idle 4s ease-in-out infinite; }
.kc-gate.is-ready[data-gate-state="locked"] .kc-scene__curt-a { animation: kc-curtain-a 5.5s ease-in-out infinite alternate; }
.kc-gate.is-ready[data-gate-state="locked"] .kc-scene__curt-b { animation: kc-curtain-b 6.2s ease-in-out infinite alternate; }
.kc-gate.is-ready[data-gate-state="locked"] .kc-scene__curt-c { animation: kc-curtain-c 5s ease-in-out infinite alternate; }
.kc-gate.is-ready[data-gate-state="locked"] .kc-scene__light { animation: kc-light-idle 6s ease-in-out infinite alternate; }
@keyframes kc-eyes-look {
  0%, 22.4% { opacity: 1; }
  22.5%, 44.9% { opacity: 0; }
  45%, 69.9% { opacity: 1; }
  70%, 100% { opacity: 0; }
}
@keyframes kc-eyes-blink {
  0%, 22.4% { opacity: 0; }
  22.5%, 25.5% { opacity: 1; }
  25.6%, 84.9% { opacity: 0; }
  85%, 88% { opacity: 1; }
  88.1%, 100% { opacity: 0; }
}
@keyframes kc-rig-idle {
  0% { transform: translateY(0) scale(1); }
  23.75% { transform: translateY(-.6%) scale(1); }
  40% { transform: translateY(0) scale(1); }
  75% { transform: translateY(0) scale(1.008); }
  100% { transform: translateY(0) scale(1); }
}
@keyframes kc-curtain-a { to { transform: rotate(-.8deg); } }
@keyframes kc-curtain-b { to { transform: rotate(.7deg); } }
@keyframes kc-curtain-c { to { transform: translateY(.6%); } }
@keyframes kc-light-idle { from { opacity: .5; } to { opacity: .75; } }

.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__eyes-look { animation: none; opacity: 1; }
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__eyes-blink { animation: none; opacity: 0; }
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__rig { animation: kc-guide-hop 1900ms linear 0ms both; }
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__curt-a { animation: kc-curt-a 1300ms cubic-bezier(.55,.06,.68,.19) 200ms both; }
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__curt-b { animation: kc-curt-b 1300ms cubic-bezier(.55,.06,.68,.19) 260ms both; }
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__curt-c { animation: kc-curt-c 1200ms cubic-bezier(.55,.06,.68,.19) 180ms both; }
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__mid-l { animation: kc-mid-l 1600ms ease-out 400ms both; }
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__mid-r { animation: kc-mid-r 1600ms ease-out 400ms both; }
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__meadow-l { animation: kc-meadow-out 1200ms cubic-bezier(.55,.06,.68,.19) 300ms both; }
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__meadow-r { animation: kc-meadow-out 1200ms cubic-bezier(.55,.06,.68,.19) 380ms both; }
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__light { animation: kc-light-reveal 1200ms ease-out 1200ms both; }
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__rig,
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__curt-a,
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__curt-b,
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__curt-c,
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__mid-l,
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__mid-r,
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__meadow-l,
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__meadow-r,
.kc-gate.has-scene[data-gate-state="opening"] .kc-scene__light { will-change: transform, opacity; }
/* The guide crouches, springs up and hops out past the camera: he leaves by motion, he never fades */
@keyframes kc-guide-hop {
  0% { transform: none; animation-timing-function: ease-out; }
  10% { transform: translateY(1.5%) scale(1.03, .93); animation-timing-function: cubic-bezier(.2,.8,.3,1); }
  28% { transform: translate(2%, -16%) scale(.98, 1.04) rotate(-4deg); animation-timing-function: ease-in-out; }
  42% { transform: translate(-3%, -19%) rotate(-8deg); animation-timing-function: cubic-bezier(.5,0,.8,.4); }
  100% { transform: translate(var(--hop-x, -70%), var(--hop-y, 85%)) scale(1.5) rotate(-22deg); }
}
@keyframes kc-curt-a { from { transform: translate(0, 0) rotate(0); } to { transform: translate(-120%, -14%) rotate(-9deg); } }
@keyframes kc-curt-b { from { transform: translate(0, 0) rotate(0); } to { transform: translate(120%, -10%) rotate(9deg); } }
@keyframes kc-curt-c { from { transform: translateY(0); } to { transform: translateY(-110%); } }
@keyframes kc-mid-l { from { transform: translateX(0); } to { transform: translateX(-110%); } }
@keyframes kc-mid-r { from { transform: translateX(0); } to { transform: translateX(110%); } }
@keyframes kc-meadow-out { from { transform: translateY(0); } to { transform: translateY(110%); } }
@keyframes kc-light-reveal { from { opacity: .6; } to { opacity: 1; } }

.kc-gate.has-scene .kc-scene__meadow-l,
.kc-gate.has-scene .kc-scene__meadow-r { transform-origin: 50% 100%; }
.kc-gate.has-scene .kc-scene__meadow-l { animation: kc-meadow-sway 5.8s ease-in-out infinite alternate; }
.kc-gate.has-scene .kc-scene__meadow-r { animation: kc-meadow-sway 6.4s ease-in-out infinite alternate; }
@keyframes kc-meadow-sway { from { transform: rotate(-.8deg); } to { transform: rotate(.6deg); } }

@media (min-aspect-ratio: 1/1) {
  .kc-stage { --kc-stage-t: translate(-50%, -50%); top: 50%; width: max(100%, 160vh); width: max(100%, 160dvh); aspect-ratio: 16 / 10; }
  .kc-scene__branch-l { display: block; }
  .kc-scene__rig { transform-origin: 55% 100%; --hop-x: -135%; --hop-y: 110%; }
}

/* landscape: the guide sits on the right half, so the hint steps to his left, level with his head */
@media (min-aspect-ratio: 1/1) {
  .kc-gate.has-scene .kc-gate__legend { left: auto; right: 34%; top: 24%; translate: 0 0; font-size: clamp(1.2rem, 2.2vw, 1.6rem); }
}

@media (min-aspect-ratio: 19/10) {
  .kc-stage { top: 0; --kc-stage-t: translate(-50%, calc(25dvh - 25%)); }
}

@media (prefers-reduced-motion: reduce) {
  .kc-gate.has-scene *, .kc-gate.has-scene { animation: none !important; transition: none !important; }
  .kc-gate.has-scene .kc-scene { opacity: 1; }
  .kc-scene__eyes-look { opacity: 1; }
  .kc-scene__eyes-blink { opacity: 0; }
  .kc-gate__legend { opacity: .92; }
}