/* BL-04 · one 1080×2340 engraving stage, centered inside the text-safe band. */
.kc-gate { background-color: #0A0A0B; background-image: none; }
.kc-gate__scene { z-index: 0; isolation: isolate; }
.kc-gate__scene::before,
.kc-gate__scene::after { z-index: 0; }
.kc-gate__scene::before { content: none; }
.kc-gate__scene::after {
  background: radial-gradient(ellipse 94% 88% at 50% 51%, transparent 48%, rgba(10, 10, 11, .34) 78%, #0A0A0B 112%);
}
.kc-gate__body { z-index: 1; }
.kc-gate__body > :is(.kc-eyebrow, .kc-gate__name, .kc-gate__date, .kc-gate__open) { opacity: 0; }

.bl-gate-stage {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(calc(100vw - 48px), max(0px, calc(77.36svh - 232px)));
  aspect-ratio: 1080 / 2340;
  transform: translate(-50%, -57.18%);
  pointer-events: none;
}
.bl-gate-stage canvas,
.bl-gate-stage img {
  position: absolute;
  display: block;
  max-width: none;
  margin: 0;
}
.bl-gate-arch,
.bl-gate-ink { inset: 0; width: 100%; height: 100%; }
.bl-gate-arch { z-index: 1; }
.bl-gate-couple {
  z-index: 2;
  opacity: 0;
  object-fit: fill;
  transition: opacity 700ms ease-out;
}
.bl-gate-couple.is-visible { opacity: 1; }
.bl-gate-ink { z-index: 3; }

.kc-gate__body > .kc-eyebrow { visibility: visible; }
.kc-gate.is-bl-gate-intro .kc-gate__body > .kc-eyebrow {
  animation: bl-gate-arrive 600ms cubic-bezier(.2, .72, .25, 1) both;
}
.kc-gate__name {
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 56%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 50%, transparent 56%, transparent 100%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat; /* repeat (the default) tiled the mask: names showed whole before the pen moved */
  -webkit-mask-position: 200% 0;
  mask-position: 200% 0;
}
.kc-gate.is-bl-gate-writing .kc-gate__name {
  opacity: 1;
  animation: bl-gate-write 1400ms cubic-bezier(.32, 0, .2, 1) both;
}
.kc-gate__date,
.kc-gate__open { visibility: hidden; }
.kc-gate__open { pointer-events: none; }
.kc-gate.is-bl-gate-armed .kc-gate__date {
  visibility: visible;
  animation: bl-gate-arrive 700ms cubic-bezier(.2, .72, .25, 1) both;
}
.kc-gate.is-bl-gate-armed .kc-gate__open {
  position: relative;
  isolation: isolate;
  visibility: visible;
  pointer-events: auto;
  animation: bl-gate-arrive 700ms cubic-bezier(.2, .72, .25, 1) both;
}

@keyframes bl-gate-arrive {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes bl-gate-write {
  from { -webkit-mask-position: 200% 0; mask-position: 200% 0; }
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* BL-04 · fit the engraved arch between the two text bands. */
.kc-gate__body { padding-top: calc(env(safe-area-inset-top) + clamp(3.4rem, 11svh, 6.2rem)); }
@media (min-width: 700px) {
  .kc-gate__body { padding-top: calc(env(safe-area-inset-top) + clamp(2.5rem, 6svh, 3.5rem)); }
  .kc-gate__name { font-size: clamp(2.9rem, 5vw, 4.6rem); }
}

/* Short phones (iPhone 13 Safari ≈ 664px tall): the cornice touched the names; a smaller stage keeps the gap. */
/* Phones: a 14px drop keeps the wall off the names (Pixel 7 had 6px) with room left above the date. */
@media (max-width: 699px) { .bl-gate-stage { top: calc(50% + 14px); } }
@media (max-height: 720px) and (max-width: 699px) {
  .bl-gate-stage { width: min(calc(100vw - 48px), max(0px, calc(70svh - 220px))); }
}

@media (max-width: 340px) and (max-height: 600px) {
  .kc-gate__body {
    padding-top: calc(env(safe-area-inset-top) + 1.5rem);
    padding-bottom: calc(env(safe-area-inset-bottom) + .875rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kc-gate.is-bl-gate-intro .kc-gate__body > .kc-eyebrow,
  .kc-gate.is-bl-gate-writing .kc-gate__name,
  .kc-gate.is-bl-gate-armed .kc-gate__date,
  .kc-gate.is-bl-gate-armed .kc-gate__open {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
  .kc-gate__name { -webkit-mask: none; mask: none; }
  .bl-gate-couple { transition: none; }
}