/* Seeking a Friend — structural CSS only. James owns the final design;
   this gives every surface a usable, honest skeleton (spec: out of scope §1). */

/* Brand (James, 2026-06-10): Ethnocentric, blue #1B75BB body copy,
   yellow radial #F5DA09 (centre) → #FAB520 (outer), blue buttons w/ bold yellow text. */
@font-face {
  font-family: "Ethnocentric";
  src: url("/fonts/ethnocentric.woff2") format("woff2"), url("/fonts/ethnocentric.woff") format("woff");
  font-display: swap;
}
/* Poppins (chat text) — self-hosted latin subset, OFL licensed. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("/fonts/poppins-400.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  src: url("/fonts/poppins-600.woff2") format("woff2");
  font-display: swap;
}
@font-face {
  font-family: "Poppins";
  font-style: italic;
  font-weight: 400;
  src: url("/fonts/poppins-400-italic.woff2") format("woff2");
  font-display: swap;
}

:root {
  --saf-blue: #1b75bb;
  --saf-yellow-centre: #f5da09;
  --saf-yellow-outer: #fab520;
  --saf-yellow-grad: radial-gradient(ellipse at 50% 42%, var(--saf-yellow-centre) 0%, var(--saf-yellow-outer) 100%);
  --kiosk-yellow: #fab520;
  --ink: #1b1b1f;
  --paper: #faf7f0;
  --workshop-dark: #0d0f14;
  --workshop-glow: #3a86ff;
}

* { box-sizing: border-box; }
/* display rules below must never defeat the hidden attribute */
[hidden] { display: none !important; }
body {
  margin: 0;
  font-family: "Ethnocentric", Helvetica, Arial, sans-serif;
  color: var(--saf-blue);
  background: var(--paper);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

button, .btn {
  font-family: inherit;
  font-weight: bold;
  font-size: 0.85rem;
  background: var(--saf-blue);
  color: var(--saf-yellow-centre);
  border: none;
  border-radius: 5px;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
}
button:hover, .btn:hover { filter: brightness(1.1); }

/* The O HORIZON ribbon: 45° blue strip cutting the top-right corner. */
.corner-ribbon {
  position: fixed;
  top: 2.4rem;
  right: -4.4rem;
  width: 16rem;
  transform: rotate(45deg);
  background: var(--saf-blue);
  color: var(--saf-yellow-centre);
  font-weight: bold;
  font-size: 0.85rem;
  letter-spacing: 0;
  text-align: center;
  text-decoration: none;
  padding: 0.5rem 0;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
  z-index: 40;
}
.corner-ribbon:hover { filter: brightness(1.1); }

/* ---------- friends dock: your made friends, bottom-left everywhere ---------- */
.friends-dock {
  position: fixed;
  left: 1rem; bottom: 1rem;
  display: flex;
  gap: 0.5rem;
  z-index: 35;
}
.friend-thumb {
  display: flex; align-items: center; justify-content: center;
  width: 54px;
  aspect-ratio: 2 / 3;
  border: 2px solid #fff;
  border-radius: 5px;
  overflow: hidden;
  background: var(--saf-blue);
  color: var(--saf-yellow-centre);
  font-weight: bold;
  font-size: 1.2rem;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease;
}
.friend-thumb:hover { transform: translateY(-3px) scale(1.05); }
.friend-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- fade-to-black for in-page scene changes ---------- */
.fade-overlay {
  position: fixed; inset: 0;
  background: #000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.85s ease;
  z-index: 90;
}
.fade-overlay.on { opacity: 1; pointer-events: auto; }

/* Hidden skip-to-workshop hotspot: invisible square, bottom-right corner. */
.skip-to-back {
  position: fixed;
  right: 0; bottom: 0;
  width: 56px; height: 56px;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 36;
}

/* The front→back walk video: covers everything (above the fade) while it plays. */
.scene-transition {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 95;
}

/* ---------- in-page modal (/movie, /privacy) ---------- */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.65);
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  z-index: 100;
}
.modal {
  position: relative;
  width: min(36rem, 100%);
  max-height: 85vh;
  overflow-y: auto;
}
.modal-close {
  position: absolute;
  top: 0.6rem; right: 0.6rem;
  padding: 0.1rem 0.55rem;
  font-size: 1.1rem;
  line-height: 1.4;
}

.site-footer {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  padding: 1rem;
  font-size: 0.8rem;
}
.site-footer a { 
  color: inherit; 
  opacity: 1; 
  text-decoration: none;
  text-transform: uppercase;
}
.movie-link { letter-spacing: 0.2em; }

/* ---------- chat ---------- */
/* Conversational text reads in Poppins; everything else stays Ethnocentric. */
.chat-log, .chat-form textarea {
  font-family: "Poppins", Helvetica, Arial, sans-serif;
}
.chat-log {
  overflow-y: auto;
  max-height: 50vh;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.msg { display: flex; flex-direction: column; max-width: 85%; }
.msg-user { align-self: flex-end; text-align: right; }
.msg-bot { align-self: flex-start; }
.msg-speaker { font-size: 0.6rem; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.1em; }
.msg-text { white-space: pre-wrap; font-size: 0.82rem; line-height: 1.6; }
.msg.typing .msg-text { opacity: 0.4; }
.msg.refused .msg-text, .msg.stream-error .msg-text { opacity: 0.7; font-style: italic; }

.chat-form { display: flex; gap: 0.5rem; padding: 0.75rem 1rem; }
.chat-form textarea {
  flex: 1;
  font-family: "Poppins", Helvetica, Arial, sans-serif;
  font-size: 0.82rem;
  color: var(--saf-blue);
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid var(--saf-blue);
  border-radius: 5px;
  padding: 0.5rem;
  resize: none;
}
.chat-form textarea::placeholder { color: var(--saf-blue); opacity: 0.55; }
.chat-form button { padding: 0.5rem 1.25rem; }

.crisis-notice {
  margin: 0.75rem 1rem;
  padding: 0.75rem 1rem;
  border: 2px solid var(--ink);
  background: #fff;
  border-radius: 6px;
}

/* ---------- stage 1: shopfront scene ---------- */
.stage-shopfront { background: #0a0a0c; }
.stage-shopfront .site-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; }
.stage-shopfront .site-footer a { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

.shopfront-scene { position: fixed; inset: 0; overflow: hidden; }
.scene-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 35%;
  transition: opacity 1.4s ease;
}
.scene-wide { background-image: url("/img/front-wide.jpg"); }
.scene-open { background-image: url("/img/front-open.jpg"); opacity: 0; }
.shopfront-scene.at-counter .scene-open { opacity: 1; }
.shopfront-scene.no-anim .scene-bg, .shopfront-scene.no-anim .sam-panel { transition: none; }
.scene-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 5; }

/* After Sam takes you back: shopfront out, workshop loop in — same page. */
.shopfront-scene.in-workshop .scene-bg,
.shopfront-scene.in-workshop .scene-video,
.shopfront-scene.in-workshop .bell-hotspot { display: none; }
.shopfront-scene .workshop-bg { z-index: 2; }

/* The clickable hotspot sits over the real bell in front-open.jpg.
   Tune the two percentages if the crop shifts with James's final art. */
.bell-hotspot {
  position: absolute;
  left: 58.3%; top: 70%;
  transform: translate(-50%, -50%);
  width: 84px; height: 84px;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
}
.bell-pulse {
  position: absolute; inset: 18px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  animation: bell-pulse 2s ease-out infinite;
}
@keyframes bell-pulse {
  0% { transform: scale(0.55); opacity: 0.9; }
  70% { transform: scale(1.15); opacity: 0; }
  100% { transform: scale(1.15); opacity: 0; }
}
.bell-hint {
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #fff;
  font-size: 0.8rem;
  font-style: italic;
  letter-spacing: 0.08em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
  opacity: 0;
  transition: opacity 0.4s ease 1s;
}
.shopfront-scene.at-counter .bell-hint { opacity: 0.9; }
.bell-hotspot.rung .bell-pulse { animation: none; opacity: 0; }
.bell-hotspot.rung .bell-hint { opacity: 0; }

/* Sam's chat: the yellow kiosk box — centre third, near full height —
   slides up over the curtain once the bell is rung. */
.sam-panel {
  position: absolute;
  left: 50%; top: 4vh; bottom: 4vh;
  transform: translate(-50%, 28px);
  width: min(36rem, max(33vw, 24rem), calc(100% - 2rem));
  display: flex; flex-direction: column;
  background: var(--saf-yellow-grad);
  color: var(--saf-blue);
  border-radius: 12px;
  padding: 0.75rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  opacity: 0;
  transition: opacity 0.7s ease, transform 0.7s ease;
  z-index: 15;
}
.sam-panel.up { opacity: 1; transform: translate(-50%, 0); }

/* The white SAF logo, top-left. The chat window overlaps its lower half
   (the ray burst) per the lockup — negative margin pulls the window up;
   z-index keeps the window above so the logo bottom hides behind it. */
.panel-logo {
  display: block;
  align-self: flex-start;
  width: 58%;
  max-width: 15rem;
  margin: 0.25rem 0 -17% 0.25rem;
  position: relative;
  z-index: 0;
}

/* White border around the whole chat window (per the logo lockup's frame). */
.panel-window {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border: 2px solid #fff;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
  z-index: 1;
  background: var(--saf-yellow-grad);
}
.sam-panel .chat-log {
  flex: 1;
  max-height: none;
  background: transparent;
}
/* Sam's invitation: a button that pops in when he says come on back. */
.come-on-back {
  width: fit-content;
  margin: 0 auto 0.75rem;
  text-align: center;
}
.come-on-back.revealed { animation: invite-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes invite-pop {
  0% { transform: scale(0.3); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------- transition + stage 2: workshop ---------- */
.transition-overlay {
  position: fixed; inset: 0; z-index: 50;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.transition-overlay video { width: 100%; height: 100%; object-fit: cover; }
.skip-transition { position: absolute; bottom: 2rem; right: 2rem; font: inherit; padding: 0.4rem 1rem; }

.stage-workshop { background: var(--workshop-dark); }
.workshop-bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.workshop { display: flex; justify-content: center; padding: 4vh 1rem; position: relative; z-index: 1; min-height: 92vh; }
.bench {
  width: min(36rem, max(33vw, 24rem), calc(100% - 2rem));
  display: flex; flex-direction: column;
  background: var(--saf-yellow-grad);
  color: var(--saf-blue);
  border: 2px solid #fff;
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}
.bench .chat-log { flex: 1; max-height: 62vh; }
.building-state { padding: 0.5rem 1rem; font-style: italic; animation: pulse 1.2s infinite alternate; }
@keyframes pulse { from { opacity: 0.4; } to { opacity: 1; } }
.stage-workshop .site-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; }
.stage-workshop .site-footer a { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

/* ---------- friend page ---------- */
.stage-friend { background: #14121a; color: #efeae2; }
.friend-page {
  display: grid;
  grid-template-columns: minmax(320px, 500px) 1fr;
  gap: 2rem;
  max-width: 74rem;
  margin: 0 auto;
  padding: 2rem 1rem;
}
@media (max-width: 800px) {
  .friend-page { grid-template-columns: 1fr; }
}

.poster-card {
  background: #0c0b10;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}
.poster-card { position: relative; }
.poster-art { aspect-ratio: 2 / 3; background: #1d1a26; }
.poster-art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poster-placeholder, .poster-fallback {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-style: italic; opacity: 0.6;
}
.poster-placeholder p { animation: pulse 1.2s infinite alternate; }
/* Typography lives ON the poster (spec §5.5 — CSS over the art, never baked
   in): anchored to the bottom third behind a scrim so the image stays clear. */
.poster-type {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 5.5rem 1.25rem 1.1rem;
  text-align: center;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(8, 7, 12, 0.62) 42%, rgba(8, 7, 12, 0.92) 100%);
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
}
.poster-title {
  margin: 0;
  font-size: clamp(1.1rem, 2.1vw, 1.65rem);
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.poster-tagline { font-style: italic; opacity: 0.9; margin: 0.5rem 0; font-size: 0.85rem; }
.poster-starring { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; margin: 0.4rem 0; }
.billing-block { font-size: 0.55rem; letter-spacing: 0.08em; opacity: 0.65; line-height: 1.7; margin: 0.4rem 0 0; }
.billing-block a { color: inherit; }

.friend-chat {
  background: #1c1924;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}
.friend-chat .chat-log { flex: 1; max-height: 60vh; }
.friend-actions { display: flex; gap: 0.75rem; padding: 0.5rem 1rem 1rem; flex-wrap: wrap; }
.friend-actions button { font: inherit; font-size: 0.8rem; cursor: pointer; padding: 0.3rem 0.8rem; }

/* ---------- blue pages (/movie, /privacy): inside video bg + blue box ---------- */
.stage-blue { background: #0a0a0c; }
.page-bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.blue-page {
  position: relative; z-index: 1;
  display: flex; justify-content: center; align-items: center;
  padding: 5vh 1rem;
  min-height: 90vh;
}
.blue-box {
  width: min(36rem, calc(100% - 2rem));
  background: var(--saf-blue);
  color: var(--saf-yellow-centre);
  border: 2px solid #fff;
  border-radius: 12px;
  padding: 1.5rem 1.75rem;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
  font-size: 0.85rem;
  line-height: 1.7;
}
.blue-box a { color: var(--saf-yellow-centre); }
.blue-box h1 { margin-top: 0; }
.blue-box .btn, .blue-box button {
  background: var(--saf-yellow-grad);
  color: var(--saf-blue);
}
.stage-blue .site-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 20; }
.stage-blue .site-footer a { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8); }

/* ---------- transcript, misc pages ---------- */
.transcript, .forget-page, .error-page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 2.5rem 1.25rem;
}
.retired-notice { font-style: italic; opacity: 0.7; }
.sam-says { font-size: 1.05rem; line-height: 1.7; font-style: italic; margin: 0 0 1rem; }
.error-page h1 { font-size: 3rem; margin-bottom: 0.25rem; }