/* ==========================================================================
   LAYOUT — the stage (camera canvases), top bar, bottom area, blink lids.
   Layer order (z-index):
     0 stage · 5 blink · 10 split · 15 pressure marker · 25 cards · 30 bars
     45 shutter flash · 50 share sheet · 100 intro
   ========================================================================== */

.app { position: fixed; inset: 0; overflow: hidden; }

/* ---------- Stage ---------- */
.stage { position: absolute; inset: 0; z-index: 0; background: #000; }
.stage canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}
#fx-canvas { pointer-events: none; }

/* ---------- Blink (plays when switching animals) ---------- */
.blink { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.lid {
  position: absolute; left: -10%; right: -10%;
  height: 56%;
  background: #000;
  will-change: transform;
}
.lid--top    { top: 0;    border-radius: 0 0 50% 50% / 0 0 26% 26%; transform: translateY(-102%); }
.lid--bottom { bottom: 0; border-radius: 50% 50% 0 0 / 26% 26% 0 0; transform: translateY(102%); }
.blink.is-blinking .lid--top    { animation: lid-top 0.44s var(--ease-in-out); }
.blink.is-blinking .lid--bottom { animation: lid-bottom 0.44s var(--ease-in-out); }
@keyframes lid-top    { 0%, 100% { transform: translateY(-102%); } 42%, 58% { transform: translateY(0); } }
@keyframes lid-bottom { 0%, 100% { transform: translateY(102%); }  42%, 58% { transform: translateY(0); } }

/* ---------- Top bar ---------- */
.topbar {
  position: absolute; z-index: 30;
  top: 0; left: 0; right: 0;
  padding: calc(var(--safe-top) + 12px) var(--gutter) 0;
  display: grid;
  grid-template-columns: var(--btn) 1fr var(--btn);
  align-items: center;
  gap: 12px;
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.topbar::before {
  content: "";
  position: absolute; inset: 0 0 -48px;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55), transparent);
  z-index: -1;
  pointer-events: none;
}

.brand {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  pointer-events: none;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.brand__mark {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.52em;
  padding-left: 0.52em;
}
.brand__url {
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.22em;
  padding-left: 0.22em;
  color: var(--ink-faint);
}

/* ---------- Bottom area ---------- */
.bottom {
  position: absolute; z-index: 30;
  left: 0; right: 0; bottom: 0;
  padding-bottom: calc(var(--safe-bottom) + 10px);
  display: flex; flex-direction: column; gap: 12px;
  pointer-events: none;
}
.bottom > * { pointer-events: auto; }
.bottom::before {
  content: "";
  position: absolute; inset: -70px 0 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);
  z-index: -1;
  pointer-events: none;
}

/* Hide the live UI until the intro is gone */
body:not(.is-live) .topbar,
body:not(.is-live) .bottom,
body:not(.is-live) .split { opacity: 0; }
.topbar, .bottom, .split { transition: opacity 0.9s var(--ease-out) 0.3s; }