/* ===================================================================
   Infinite Photobooth — shared spine styles
   Every booth page and the homepage load this file. Do not put
   booth-specific effect styling in here — that belongs in the
   booth's own <style> block.
=================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Space+Mono:wght@400;700&family=Work+Sans:wght@400;500;600&display=swap');

:root{
  --ink:        #16140f;   /* near-black, warm charcoal */
  --paper:      #f3ede1;   /* warm paper */
  --safelight:  #c8432b;   /* darkroom red — primary accent, used sparingly */
  --developer:  #3ea8a0;   /* chemical teal — secondary accent */
  --line:       rgba(243,237,225,0.14);
  --line-strong:rgba(243,237,225,0.28);

  --font-display: 'Anton', sans-serif;
  --font-body:    'Work Sans', sans-serif;
  --font-mono:    'Space Mono', monospace;
}

*{ box-sizing: border-box; }

html,body{
  margin:0;
  padding:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; }

/* ---- brand header/footer, shared across every page ---- */

.ff-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
}

.ff-wordmark{
  font-family:var(--font-display);
  font-size:22px;
  letter-spacing:0.02em;
  text-decoration:none;
  color:var(--paper);
  text-transform:uppercase;
}

.ff-wordmark span{ color:var(--safelight); }

.ff-header-meta{
  font-family:var(--font-mono);
  font-size:11px;
  color:rgba(243,237,225,0.55);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.ff-footer{
  padding:28px 20px 40px;
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-size:11px;
  color:rgba(243,237,225,0.45);
  text-align:center;
  letter-spacing:0.04em;
}

/* ---- shared buttons ---- */

.ff-btn{
  font-family:var(--font-body);
  font-weight:600;
  font-size:15px;
  padding:14px 22px;
  border-radius:3px;
  border:1px solid var(--line-strong);
  background:transparent;
  color:var(--paper);
  cursor:pointer;
  transition:background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.ff-btn:active{ transform:scale(0.98); }

.ff-btn:hover{ border-color:var(--paper); }

.ff-btn-primary{
  background:var(--safelight);
  border-color:var(--safelight);
  color:var(--paper);
}

.ff-btn-primary:hover{ background:#a8341f; border-color:#a8341f; }

.ff-btn-ghost{
  border-color:transparent;
  color:rgba(243,237,225,0.6);
  font-size:13px;
  padding:8px 10px;
}

/* ---- shared gate / status screens ---- */

.ff-center-screen{
  min-height:70vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:32px 24px;
  gap:18px;
}

.ff-center-screen h1{
  font-family:var(--font-display);
  font-size:clamp(28px,6vw,42px);
  text-transform:uppercase;
  letter-spacing:0.01em;
  margin:0;
}

.ff-center-screen p{
  max-width:420px;
  color:rgba(243,237,225,0.7);
  line-height:1.5;
  margin:0;
}

.ff-tag{
  font-family:var(--font-mono);
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--developer);
}

.ff-spinner{
  width:22px;
  height:22px;
  border-radius:50%;
  border:2px solid var(--line-strong);
  border-top-color:var(--safelight);
  animation:ff-spin 0.8s linear infinite;
}

@keyframes ff-spin{ to{ transform:rotate(360deg); } }

/* ---- capture flow shared across booths ---- */

.ff-frame{
  width:100%;
  max-width:420px;
  margin:0 auto;
  aspect-ratio:3/4;
  border-radius:4px;
  overflow:hidden;
  position:relative;
  background:#000;
  border:1px solid var(--line-strong);
}

.ff-frame video,
.ff-frame canvas,
.ff-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Selfie cameras read as a mirror to the person using them — flip the
   live video preview so what they see matches how they're posing.
   Booths that capture straight from <video> must also mirror at
   capture time (see each booth's capture handler) so the saved
   photo matches what was shown live. Booths that render their own
   live canvas (split, dual) mirror once at the source-sampling step
   instead, since this CSS rule only affects <video> elements. */
.ff-frame video{
  transform:scaleX(-1);
}

.ff-frame-sprocket{
  position:absolute;
  top:0; bottom:0;
  width:14px;
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  align-items:center;
  pointer-events:none;
  opacity:0.5;
}
.ff-frame-sprocket.left{ left:0; }
.ff-frame-sprocket.right{ right:0; }
.ff-frame-sprocket i{
  width:5px; height:5px;
  background:var(--ink);
  border-radius:1px;
}

.ff-controls{
  display:flex;
  gap:12px;
  justify-content:center;
  margin-top:20px;
  flex-wrap:wrap;
}

.ff-flash{
  position:fixed;
  inset:0;
  background:#fff;
  opacity:0;
  pointer-events:none;
  z-index:999;
}
.ff-flash.go{
  animation:ff-flash-pop 0.35s ease-out;
}
@keyframes ff-flash-pop{
  0%{ opacity:0.95; }
  100%{ opacity:0; }
}