/* Khal & Silvie · Gate «Las campanas». States come from gate-host.mjs (data-pc-gate: intro, hold, film, release).
   The core still owns the final fade: --kc-gate-duration is the Hero's paper taking over the gate's copy of it. */

#gate {
  --kc-gate-duration: 700ms;
  --pc-gate-night: #0E0B09;
  --pc-gate-ivory: #FBF6EC;
  --pc-gate-gold: #E8CF98;
  padding: 0;
  background: var(--pc-gate-night);
}
#gate::before { display: none; }

/* One 9:16 stage for the films and the still: cover on phones, a full-height column on wide screens.
   Percentages inside it are percentages of the film, so the clock's coordinates hold under any crop. */
#gate .pc-gate-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  height: max(100%, 177.78vw);
  aspect-ratio: 9 / 16;
  transform: translate(-50%, -50%);
  overflow: hidden;
}
@media (min-aspect-ratio: 3/4) {
  #gate .pc-gate-stage { height: 100%; box-shadow: 0 0 140px 60px rgba(0, 0, 0, .55); }
}
#gate .pc-gate-film,
#gate .pc-gate-hold {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#gate .pc-gate-film { opacity: 0; }
#gate[data-pc-gate='intro'] .pc-gate-film--intro,
#gate[data-pc-gate='hold'] .pc-gate-film--intro,
#gate[data-pc-gate='film'] .pc-gate-film--bells,
#gate[data-pc-gate='release'] .pc-gate-film--bells { opacity: 1; }

/* The still is the last frame of gate-1 (registered 1:1). It is hidden until the clock waits, so nothing flashes before the intro. */
#gate .pc-gate-hold { opacity: 0; transition: opacity 400ms ease; }
#gate[data-pc-gate='hold'] .pc-gate-hold { opacity: 1; transition-duration: 250ms; }
/* On the tap the still waits on top until the bridge really rolls: its first frame is this still, so the swap is a cut nobody sees. */
#gate[data-pc-gate='film'] .pc-gate-hold { opacity: 1; transition: none; }
#gate[data-pc-gate='film'][data-pc-rolled] .pc-gate-hold { opacity: 0; transition: opacity 160ms linear; }

/* Focal shadow: the night closes around the clock and anime.js breathes --r. On the tap it lifts while the camera moves in. */
#gate .pc-gate-focus {
  --cx: 46.4%;
  --cy: 44.4%;
  --r: 16;
  --mid: .56;
  --edge: .8;
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--cx) var(--cy), rgba(10, 7, 4, 0) calc(var(--r) * 1%), rgba(10, 7, 4, var(--mid)) calc(var(--r) * 1% + 20%), rgba(10, 7, 4, var(--edge)) calc(var(--r) * 1% + 50%));
  opacity: 0;
  transition: opacity 400ms ease;
  pointer-events: none;
}
#gate[data-pc-gate='hold'] .pc-gate-focus { opacity: 1; transition-duration: 1400ms; }
#gate[data-pc-gate='film'] .pc-gate-focus { transition-duration: 1100ms; }

/* Hold copy over a warm scrim; hidden while the films speak. Without the host the core gate stays usable. */
#gate .kc-gate__scene::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 50%;
  background: linear-gradient(to top, rgba(14, 10, 6, .82) 0%, rgba(14, 10, 6, .5) 42%, rgba(14, 10, 6, 0) 100%);
  opacity: 0;
  transition: opacity 350ms ease;
  pointer-events: none;
}
#gate .kc-gate__body {
  position: absolute;
  inset: auto 0 0 0;
  padding: 0 24px max(84px, calc(env(safe-area-inset-bottom) + 66px));
  gap: 10px;
  transition: opacity 350ms ease;
}
#gate[data-pc-gate='hold'] .kc-gate__scene::after { opacity: 1; transition-duration: 900ms; }
#gate[data-pc-gate]:not([data-pc-gate='hold']) .kc-gate__body { opacity: 0; pointer-events: none; }
/* On the tap the copy leaves by its own animation (gate-host.mjs); the body's fade only sweeps up after it. */
#gate[data-pc-gate='film'][data-pc-exit] .kc-gate__body { transition-delay: 560ms; }
/* Before the host runs the copy waits hidden (no flash over the black intro); if the host never runs, it shows itself at 4 s. */
#gate:not([data-pc-gate]) .kc-gate__body { opacity: 0; animation: pc-gate-fallback 1ms linear 4s forwards; }
@keyframes pc-gate-fallback { to { opacity: 1; } }

/* Short phones (SE class): the three-line name would climb onto the clock, so the copy sits lower and smaller. */
@media (max-height: 700px) {
  #gate .kc-gate__body { padding-bottom: max(48px, calc(env(safe-area-inset-bottom) + 36px)); }
  #gate .kc-gate__name { font-size: clamp(40px, 11.2vw, 56px); }
}

#gate .kc-eyebrow {
  margin-right: -.36em;
  font-family: 'PC Cormorant', 'Cormorant Garamond', Garamond, Georgia, serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .36em;
  color: var(--pc-gate-gold);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .5);
}
/* --ink writes the script from left to right (anime.js); at its default the name is simply there. The padding keeps swashes inside the mask. */
#gate .kc-gate__name {
  --ink: 115;
  margin: -.12em -.4em;
  padding: .12em .4em;
  font-family: 'PC Script', 'Snell Roundhand', cursive;
  font-size: clamp(44px, 12.6vw, 66px);
  line-height: 1.06;
  color: var(--pc-gate-ivory);
  text-shadow: 0 2px 14px rgba(0, 0, 0, .45);
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--ink) * 1% - 16%), transparent calc(var(--ink) * 1%));
  mask-image: linear-gradient(100deg, #000 calc(var(--ink) * 1% - 16%), transparent calc(var(--ink) * 1%));
}
#gate .pc-gate-name { display: block; }
#gate .pc-gate-amp { display: block; margin: -.05em 0; font-size: .74em; line-height: 1; color: var(--pc-gate-gold); }
#gate .pc-gate-rule { display: flex; align-items: center; gap: 10px; width: 150px; }
#gate .pc-gate-rule b { flex: 1; height: 1px; background: linear-gradient(to right, rgba(232, 207, 152, 0), var(--pc-gate-gold)); }
#gate .pc-gate-rule b:last-child { background: linear-gradient(to left, rgba(232, 207, 152, 0), var(--pc-gate-gold)); }
#gate .pc-gate-rule i { width: 6px; height: 6px; background: var(--pc-gate-gold); transform: rotate(45deg); }

/* Button «linea» (Uiverse · Cornerstone-04): two corner strokes draw the frame. Phones have no hover, so the
   host draws it as an entrance (.is-drawn) and the press answers with a soft gold fill. */
#gate .pc-gate-tap {
  position: relative;
  min-width: 44px;
  min-height: 50px;
  margin-top: 8px;
  padding: 0 30px;
  overflow: hidden;
  border: 0;
  background: transparent;
  color: var(--pc-gate-ivory);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 200ms ease, transform 150ms ease;
}
#gate .pc-gate-tap::before,
#gate .pc-gate-tap::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  width: 100%;
  height: 1.5px;
  border: 0 solid var(--pc-gate-gold);
  pointer-events: none;
}
#gate .pc-gate-tap::before { left: 0; bottom: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; transform: translateX(100%); }
#gate .pc-gate-tap::after { left: 0; top: 0; border-top-width: 1.5px; border-right-width: 1.5px; transform: translateX(-100%); }
#gate .pc-gate-tap.is-drawn::before { height: 100%; transform: none; transition: transform 300ms linear, height 300ms linear 300ms; }
#gate .pc-gate-tap.is-drawn::after { height: 100%; transform: none; transition: transform 300ms linear, height 300ms linear 500ms; }
#gate .pc-gate-tap:not(.is-ready) { pointer-events: none; }
#gate .pc-gate-tap__label {
  display: block;
  margin-right: -.26em;
  font-family: 'PC Cormorant', 'Cormorant Garamond', Garamond, Georgia, serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .26em;
  text-transform: uppercase;
}
#gate .pc-gate-tap:active { background: rgba(232, 207, 152, .14); transform: scale(.97); }
#gate .pc-gate-tap.is-pressed { background: rgba(232, 207, 152, .3); box-shadow: 0 0 26px 4px rgba(232, 207, 152, .35); transform: scale(.95); animation: none; transition: background-color 120ms ease, box-shadow 160ms ease, transform 160ms ease; }
#gate .pc-gate-tap:focus-visible { outline: 2px solid var(--pc-gate-gold); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  #gate .pc-gate-tap:hover { background: rgba(232, 207, 152, .1); }
}

/* Release: the film shrinks into the envelope's photo. Behind it the gate builds a copy of the open Hero (its paper,
   the envelope's back, flap and tulips; the photo mat; then the front and the seal over the print), every piece on the
   Hero's own box, so the core fade only swaps the church for the portrait and adds the Hero's copy. */
#gate .pc-gate-paint { position: absolute; pointer-events: none; }
#gate .pc-gate-paper,
#gate .pc-gate-clone { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; pointer-events: none; background-repeat: no-repeat; }
#gate[data-pc-gate='release'] .pc-gate-paper,
#gate[data-pc-gate='release'] .pc-gate-clone { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  #gate[data-pc-gate='release'] .pc-gate-paper,
  #gate[data-pc-gate='release'] .pc-gate-clone--under { transition: opacity 500ms ease; }
  #gate[data-pc-gate='release'] .pc-gate-clone--mat { transition: opacity 300ms ease 650ms; }
  #gate[data-pc-gate='release'] .pc-gate-clone--over { transition: opacity 350ms ease 750ms; }
  #gate[data-pc-gate='hold'] .pc-gate-tap.is-drawn { animation: pc-gate-call 2.8s ease-in-out 1.4s infinite; }
}
@media (prefers-reduced-motion: reduce) {
  #gate .pc-gate-tap::before,
  #gate .pc-gate-tap::after { height: 100%; transform: none; }
}
@keyframes pc-gate-call {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 207, 152, 0); }
  50% { box-shadow: 0 0 22px 2px rgba(232, 207, 152, .2); }
}