/* gate.css — the showroom front. Geometry is in % of the facade render
   (1200x1607, see tools/prepare_assets.py): doors 38.303/66.096/23.394/28.425,
   sign 20.6–79.1 x 9.4–21.0, sconce flames at 15%/85% x 61% y. */

.gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3svh, 28px);
  padding: max(22px, env(safe-area-inset-top)) 0 max(18px, env(safe-area-inset-bottom));
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(120% 70% at 50% 62%, #e7bfb3 0%, var(--rose) 45%, var(--rose-2) 78%, var(--rose-deep) 100%);
  touch-action: none;           /* the swipe is the gesture; nothing scrolls under the gate */
  user-select: none;
  -webkit-user-select: none;
}
.gate.is-gone { display: none; }

.gate__head { text-align: center; position: relative; z-index: 3; }
.gate__kicker { opacity: 0.9; }
.gate__title {
  margin-top: 6px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(30px, 8.6vw, 44px);
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(142, 90, 85, 0.35);
}

/* ---- the facade stage -------------------------------------------------------------- */
.stage {
  --w: min(94vw, calc((100svh - 290px) / 1.339), 500px);
  position: relative;
  width: var(--w);
  aspect-ratio: 1200 / 1607;
  flex: none;
  transform-origin: 50% 80%;
}

.stage__facade,
.stage__sign,
.stage__doors,
.stage__doorway { position: absolute; }

.stage__facade { inset: 0; width: 100%; height: 100%; z-index: 2; }

.stage__sign {
  z-index: 3;
  left: 26%;
  width: 48%;
  top: 11.4%;
  filter: drop-shadow(0 0 10px rgba(255, 240, 210, 0.35));
}

/* the doorway: rose glass, a warm light behind it, and the showroom beyond */
.stage__doorway {
  left: 38.303%;
  top: 66.096%;
  width: 23.394%;
  height: 28.425%;
  z-index: 1;
  overflow: hidden;
  background: #c88e83;
}
.stage__inside {
  position: absolute;
  inset: 0;
  background: url("../assets/img/interior.webp") 50% 40% / cover no-repeat;
  opacity: 0;
}
.stage__light {
  position: absolute;
  inset: -10%;
  background: radial-gradient(60% 55% at 50% 55%, rgba(255, 244, 214, 0.95), rgba(255, 214, 160, 0.45) 45%, rgba(255, 200, 150, 0) 75%);
  opacity: 0.35;
  animation: breathe 3.2s ease-in-out infinite;
}

.stage__doors {
  left: 38.303%;
  top: 66.096%;
  width: 23.394%;
  height: 28.425%;
  z-index: 2;
  perspective: 900px;
}
.door {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  backface-visibility: visible;
}
.door--l { left: 0; transform-origin: 0 50%; }
.door--r { right: 0; transform-origin: 100% 50%; }

/* candle sconces: a flickering warm glow over each flame cluster */
.stage__sconce {
  position: absolute;
  z-index: 3;
  top: 61%;
  width: 16%;
  aspect-ratio: 1;
  margin: -8% 0 0 -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 180, 0.95) 0%, rgba(255, 210, 130, 0.45) 30%, rgba(255, 200, 120, 0) 68%);
  pointer-events: none;
  animation: flicker 2.4s steps(1, end) infinite;
}
.stage__sconce--l { left: 15%; }
.stage__sconce--r { left: 85%; animation-delay: -1.1s; }

.stage__glints { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.glint {
  position: absolute;
  width: 18px; height: 18px;
  margin: -9px 0 0 -9px;
  background:
    linear-gradient(90deg, transparent 46%, #fff 50%, transparent 54%),
    linear-gradient(0deg, transparent 46%, #fff 50%, transparent 54%);
  border-radius: 50%;
  opacity: 0;
  animation: glint 1.4s var(--ease-out) forwards;
}

/* ---- ribbon: one image twice, each clipped to its side of the cut ------------------- */
.ribbon {
  --cut: 50%;
  position: absolute;
  z-index: 5;
  left: -10%;
  width: 120%;
  top: 73%;
  aspect-ratio: 1600 / 646;
  pointer-events: none;
  animation: flutter 4.5s ease-in-out infinite;
}
.ribbon__half { position: absolute; inset: 0; }
.ribbon__half img { width: 100%; height: 100%; }
.ribbon__half--l { clip-path: inset(0 calc(100% - var(--cut)) 0 -100vw); transform-origin: 0% 26%; }
.ribbon__half--r { clip-path: inset(0 -100vw 0 var(--cut)); transform-origin: 100% 26%; }
/* on wide screens the band carries on to the screen edges (tiled strip of the same satin) */
.ribbon__half::before {
  content: "";
  position: absolute;
  top: 17.69%;
  height: 17.2%;
  width: 100vw;
  background: url("../assets/img/ribbon-band.webp") repeat-x 0 0 / auto 100%;
}
.ribbon__half--l::before { right: calc(100% - 1px); }
.ribbon__half--r::before { left: calc(100% - 1px); }

.scissors {
  position: absolute;
  z-index: 6;
  left: 0;
  top: 0;
  width: 19%;
  height: auto;
  pointer-events: none;
  opacity: 0;
  transform-origin: 50% 50%;
  filter: drop-shadow(0 6px 10px rgba(90, 50, 40, 0.35));
}
.scissors.is-demo { animation: scissors-demo 3.4s var(--ease-in-out) 1.4s infinite; }

/* ---- footer ------------------------------------------------------------------------ */
.gate__foot {
  position: relative;
  z-index: 3;
  display: grid;
  justify-items: center;
  gap: 8px;
  margin-top: min(6vw, 30px);
  padding: 0 var(--gutter);
  text-align: center;
}
.gate__hint {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-style: italic;
  font-size: 19px;
}
.gate__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold-4);
  box-shadow: 0 0 0 0 rgba(255, 243, 207, 0.7);
  animation: ping 1.8s ease-out infinite;
}
.gate__btn {
  border: 0;
  background: none;
  padding: 6px 10px;
  font-family: var(--f-ui);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* the white-gold light the doors open into: frame-sized, opacity only */
.gate__flood {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: radial-gradient(90% 70% at 50% 72%, #fffaf0 0%, #fbe8cf 40%, #f1cdb8 75%, #e5b6a6 100%);
  opacity: 0;
}

/* ---- entrance: the facade sketches itself in, then the sign catches the light -------- */
.gate .stage__facade { clip-path: inset(100% 0 0 0); }
.gate.is-ready .stage__facade { animation: sketch-in 1.8s var(--ease-in-out) 0.15s forwards; }
.gate .stage__sign,
.gate .stage__doorway,
.gate .ribbon,
.gate .door,
.gate .stage__sconce,
.gate__head,
.gate__foot { opacity: 0; }
.gate.is-ready .door,
.gate.is-ready .stage__doorway { animation: fade-in 0.9s ease 1.1s forwards; }
.gate.is-ready .stage__sign { animation: sign-in 1.2s var(--ease-out) 1.5s forwards; }
.gate.is-ready .stage__sconce { animation: fade-in 0.6s ease 1.6s forwards, flicker 2.4s steps(1, end) 2.2s infinite; }
.gate.is-ready .stage__sconce--r { animation: fade-in 0.6s ease 1.7s forwards, flicker 2.4s steps(1, end) 1.4s infinite; }
.gate.is-ready .ribbon { animation: ribbon-in 1.1s var(--ease-out) 1.9s forwards, flutter 4.5s ease-in-out 3s infinite; }
.gate.is-ready .gate__head { animation: rise-in 1s var(--ease-out) 0.4s forwards; }
.gate.is-ready .gate__foot { animation: rise-in 1s var(--ease-out) 2.5s forwards; }

/* once cut, nothing idles */
.gate.is-cut .ribbon { animation: none; opacity: 1; }
.gate.is-cut .scissors { animation: none; }
.gate.is-cut .gate__foot { animation: none; opacity: 0; transition: opacity 0.4s; }