/* Kinetic Photo Booth gallery: red velvet curtains, marquee bulbs, polaroids.
   Everything is CSS/inline SVG so the deploy only ships the four files. */

:root {
  --velvet-deep: #3f060f;
  --velvet: #8f1327;
  --velvet-lit: #c41d38;
  --gold: #f0c050;
  --gold-deep: #b98a24;
  --paper: #fbf5e8;
  --ink: #2a1a14;
  --night: #1a0b09;
  --glow: #ffd98a;
  --cw: clamp(26px, 9vw, 180px);        /* curtain width */
  --fold: clamp(22px, 3.2vw, 60px);     /* velvet fold period */
  --valance-h: clamp(48px, 5.2vw, 100px);
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: auto; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  color: var(--paper);
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(255, 190, 90, .30), transparent 70%),
    radial-gradient(ellipse 90% 40% at 50% 100%, rgba(255, 150, 60, .12), transparent 70%),
    var(--night);
  background-attachment: fixed;
}

/* ---------- Curtains and valance (fixed frame) ---------- */

.curtain {
  position: fixed;
  top: 0;
  bottom: 0;
  width: var(--cw);
  z-index: 5;
  pointer-events: none;
}

.curtain-left,
.curtain-right {
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent 18%, transparent 78%, rgba(0, 0, 0, .55)),
    repeating-linear-gradient(90deg,
      var(--velvet-deep) 0,
      var(--velvet) calc(var(--fold) * .35),
      var(--velvet-lit) calc(var(--fold) * .6),
      var(--velvet) calc(var(--fold) * .8),
      var(--velvet-deep) var(--fold));
}

.curtain-left {
  left: 0;
  box-shadow: 6px 0 28px rgba(0, 0, 0, .65), inset -3px 0 0 var(--gold-deep);
  border-radius: 0 0 40px 0 / 0 0 10vh 0;
}

.curtain-right {
  right: 0;
  box-shadow: -6px 0 28px rgba(0, 0, 0, .65), inset 3px 0 0 var(--gold-deep);
  border-radius: 0 0 0 40px / 0 0 10vh 0;
}

/* Gold tie-back rope pulling each curtain open. */
.curtain::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 64%;
  height: 14px;
  background: linear-gradient(to bottom, #fff0b8, var(--gold) 40%, var(--gold-deep));
  box-shadow: 0 3px 8px rgba(0, 0, 0, .6);
  border-radius: 7px;
}

.valance {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--valance-h);
  z-index: 6;
  pointer-events: none;
  filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .55));
  background-repeat: repeat-x;
  background-size: auto 100%;
  background-position: center top;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='84' viewBox='0 0 200 84'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%233a050d'/><stop offset='1' stop-color='%23b3122b'/></linearGradient></defs><path d='M0 0H200V30A50 36 0 0 1 100 30A50 36 0 0 1 0 30Z' fill='url(%23g)'/><path d='M50 0Q43 32 50 64M150 0Q143 32 150 64' stroke='%23000' stroke-opacity='.22' stroke-width='7' fill='none'/><path d='M200 30A50 36 0 0 1 100 30A50 36 0 0 1 0 30' fill='none' stroke='%23f0c050' stroke-width='3'/><path d='M100 30V52' stroke='%23f0c050' stroke-width='2'/><circle cx='100' cy='57' r='5.5' fill='%23f0c050'/><path d='M95 62L93 79M100 63V81M105 62L107 79' stroke='%23e0b040' stroke-width='2'/></svg>");
}

/* ---------- Stage ---------- */

.stage {
  position: relative;
  z-index: 1;
  padding: calc(var(--valance-h) + 12px) calc(var(--cw) + clamp(12px, 2.5vw, 48px)) 64px;
  max-width: 2600px;
  margin: 0 auto;
}

/* ---------- Marquee title ---------- */

.marquee {
  position: relative;
  margin: 12px auto 24px;
  max-width: 900px;
  padding: clamp(16px, 2.6vw, 36px) clamp(18px, 4vw, 56px);
  text-align: center;
  background: linear-gradient(#32080f, #1d0508);
  border: 3px solid var(--gold);
  border-radius: 10px;
  box-shadow: 0 0 40px rgba(255, 190, 90, .35), inset 0 0 30px rgba(0, 0, 0, .6);
}

.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  left: 10px;
  right: 10px;
  height: 14px;
  background: radial-gradient(circle at 50% 50%, #fff6d0 0 2.5px, var(--glow) 3px, rgba(255, 190, 80, .0) 7px) 0 0 / 22px 14px repeat-x;
  filter: drop-shadow(0 0 4px rgba(255, 200, 100, .9));
}
.marquee::before { top: 6px; }
.marquee::after { bottom: 6px; animation: chase 1.6s steps(2, jump-none) infinite; }

@keyframes chase {
  0% { opacity: 1; }
  100% { opacity: .55; }
}

.marquee h1 {
  margin: 0;
  font-family: "Limelight", "Playfair Display", Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.9rem, 5.2vw, 4.4rem);
  line-height: 1.05;
  letter-spacing: .02em;
  color: var(--glow);
  text-shadow: 0 0 18px rgba(255, 190, 90, .7), 0 2px 0 #7a4d0c;
}

.tagline {
  margin: .5em 0 0;
  font-size: clamp(.9rem, 1.5vw, 1.4rem);
  font-weight: 700;
  color: #f1d9ae;
  letter-spacing: .04em;
}

/* ---------- Login ---------- */

#login-view { display: flex; justify-content: center; padding-top: 4vh; }

.ticket {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(100%, 420px);
  padding: 28px 28px 30px;
  color: var(--ink);
  background: var(--paper);
  border-radius: 8px;
  /* ticket-stub notches */
  -webkit-mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 11px at 0 50%, #0000 98%, #000) left / 51% 100% no-repeat,
        radial-gradient(circle 11px at 100% 50%, #0000 98%, #000) right / 51% 100% no-repeat;
  filter: drop-shadow(0 12px 22px rgba(0, 0, 0, .6));
}

.ticket label { font-weight: 800; font-size: 1.05rem; }

.ticket input {
  font: inherit;
  padding: 12px 14px;
  border: 2px solid #cdb68e;
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}

.ticket button,
.download-link {
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.ticket button {
  padding: 13px 16px;
  color: #fff;
  background: var(--velvet);
  border: 2px solid var(--gold-deep);
  border-radius: 6px;
  font-size: 1.05rem;
}
.ticket button:hover { background: var(--velvet-lit); }

.error { color: #ffb4bd; margin: 0; font-weight: 700; }
.ticket .error { color: #a3122b; }

/* ---------- Tabs ---------- */

.tabs {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 26px;
  max-width: 1400px;
}

.tabs button {
  font: inherit;
  font-weight: 800;
  font-size: clamp(.95rem, 1.4vw, 1.3rem);
  padding: .55em 1.5em;
  cursor: pointer;
  color: #f1d9ae;
  background: rgba(0, 0, 0, .35);
  border: 2px solid var(--gold-deep);
  border-radius: 999px;
}
.tabs button[aria-selected="true"] {
  color: #2b1304;
  background: linear-gradient(#ffe39a, var(--gold));
  box-shadow: 0 0 18px rgba(255, 200, 100, .5);
}

.live-status {
  margin-left: auto;
  font-size: .85rem;
  color: #d9bb8a;
  white-space: nowrap;
}
.live-status::before {
  content: "";
  display: inline-block;
  width: .6em;
  height: .6em;
  margin-right: .5em;
  border-radius: 50%;
  background: #6fdc8c;
  box-shadow: 0 0 8px #6fdc8c;
}
.live-status.stale::before { background: #ff9a5c; box-shadow: 0 0 8px #ff9a5c; }

:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* ---------- Polaroid grid ---------- */

#photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 21vw, 440px), 1fr));
  gap: clamp(20px, 2.4vw, 44px);
  max-width: 2200px;
  margin: 0 auto;
  align-items: start;
}

.photo-tile {
  position: relative;
  padding: 12px 12px 14px;
  color: var(--ink);
  background: linear-gradient(#fffaf0, var(--paper));
  border-radius: 3px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .15) inset;
  transform: rotate(var(--tilt, 0deg));
}
.photo-tile:nth-child(4n + 1) { --tilt: -1.4deg; }
.photo-tile:nth-child(4n + 2) { --tilt: .9deg; }
.photo-tile:nth-child(4n + 3) { --tilt: -.5deg; }
.photo-tile:nth-child(4n + 4) { --tilt: 1.6deg; }

/* Tape holding the photo to the board. */
.photo-tile::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 84px;
  height: 22px;
  transform: translateX(-50%) rotate(-2deg);
  background: rgba(240, 200, 110, .75);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}

.photo-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  background: #2b1d17;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }

.badge-new {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: .15em .7em;
  font-weight: 800;
  font-size: .8rem;
  letter-spacing: .08em;
  color: #fff;
  background: var(--velvet);
  border: 2px solid var(--gold);
  border-radius: 999px;
}

.photo-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.photo-meta { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.photo-time { font-weight: 800; font-size: clamp(.95rem, 1.2vw, 1.2rem); }
.photo-ago { font-weight: 600; font-size: .85rem; color: #7a6350; }
.scan-hint { font-weight: 700; font-size: .85rem; color: #7a6350; }

.download-link {
  align-self: flex-start;
  padding: .45em 1em;
  color: #fff;
  background: var(--velvet);
  border: 2px solid var(--gold-deep);
  border-radius: 999px;
  text-decoration: none;
  font-size: .9rem;
}
.download-link:hover { background: var(--velvet-lit); }

.qr-code {
  flex: 0 0 clamp(92px, 38%, 170px);
  padding: 5px;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 6px;
}
.qr-code svg { display: block; width: 100%; height: auto; }

/* The one orchestrated moment: a fresh photo drops onto the board. */
.photo-tile.arrive { animation: drop .8s cubic-bezier(.2, 1.3, .4, 1) both; }
@keyframes drop {
  from { opacity: 0; transform: translateY(-40px) rotate(calc(var(--tilt, 0deg) - 6deg)) scale(.92); }
  to { opacity: 1; transform: translateY(0) rotate(var(--tilt, 0deg)) scale(1); }
}

.empty {
  text-align: center;
  font-size: clamp(1.05rem, 2vw, 1.8rem);
  line-height: 1.5;
  color: #f1d9ae;
  margin: 8vh auto;
  max-width: 28em;
}

/* ---------- Metrics ---------- */

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(18px, 2.4vw, 40px);
  max-width: 1400px;
  margin: 0 auto;
}

.metric {
  padding: clamp(22px, 3vw, 48px) 20px;
  text-align: center;
  color: var(--ink);
  background: var(--paper);
  border: 4px double var(--gold-deep);
  border-radius: 10px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, .55);
}
.metric-value {
  font-family: "Limelight", Georgia, serif;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 1;
  color: var(--velvet);
  text-shadow: 0 2px 0 rgba(0, 0, 0, .15);
}
.metric-label { margin-top: .6em; font-weight: 800; font-size: clamp(1rem, 1.7vw, 1.6rem); }

/* ---------- Phones ---------- */

@media (max-width: 640px) {
  :root { --cw: 22px; --fold: 14px; --valance-h: 48px; }
  .curtain::after { height: 10px; }
  .stage { padding-left: 34px; padding-right: 34px; }
  .valance { background-size: auto 100%; }
  #photo-grid { grid-template-columns: 1fr; }
  .tabs { flex-wrap: wrap; }
  .live-status { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .marquee::after, .photo-tile.arrive { animation: none; }
}