/* Generated by Copilot */

:root {
  --curtain-red: #7a0f14;
  --curtain-red-dark: #4d0509;
  --curtain-photo: none; /* set this on .curtain-left/.curtain-right to swap in a real photo, e.g. url('assets/curtain.jpg') */
  --stage-bg: #1b1620;
  --wood: #6b4a34;
  --wood-dark: #4a3123;
  --gold: #d8b25c;
}

* { box-sizing: border-box; }

/* Scales all rem-based sizing up on larger viewports so text is comfortably
   readable on desktop instead of staying pinned to a small fixed size. The vh term
   means tall/narrow phones also get a boost from their abundant vertical space. */
html {
  font-size: clamp(0.8rem, 0.7vw + 0.5rem, 1rem);
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  font-family: system-ui, sans-serif;
  color: #f1e9dc;
  background: var(--stage-bg);
}

/* The whole show lives in this one element: ScrollTrigger pins THIS for the
   entire scroll journey, so the backdrop below never gets removed/replaced —
   only the curtains and prop-groups animate in front of it. */
.theater {
  position: relative;
  width: 100vw !important;
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
  max-width: none !important;
  min-width: 100vw !important;
}
/* Real mobile browsers resize 100vh as the address bar hides/shows, which can leave a
   gap (or crop) at the edge of a pinned full-height section. dvh tracks the ACTUAL
   visible area instead, so this only upgrades browsers that support it. */
@supports (height: 100dvh) {
  .theater { height: 100dvh; }
}

/* --- Static stage: wooden floor + red drape backdrop, lit, never swapped out --- */
.stage-backdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../assets/stage-backdrop.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.stage-lights {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(ellipse at 50% 15%, rgba(255,235,190,.35) 0%, transparent 55%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* --- Curtains: each side is ONE full, unsliced image (curtainleft.png / curtainright.png).
   Height is a fixed 88vh (never over 100vh, regardless of orientation) so the bottom
   edge always sits just above the stage floor instead of being aspect-derived from width.
   Width is sized from whichever of vw/vh needs more coverage, so tall/narrow (mobile
   portrait) viewports still get full-width curtains. Panels bleed off the outer viewport
   edge and overlap slightly at center — only the bottom edges should read as seams. --- */
.curtain {
  --curtain-w: max(60vw, 70vh);
  --curtain-h: 88vh;
  position: absolute;
  top: 1vh;
  height: var(--curtain-h);
  width: var(--curtain-w);
  z-index: 4;
  background-repeat: no-repeat;
  background-size: var(--curtain-w) var(--curtain-h);
  will-change: transform;
}
@supports (height: 100dvh) {
  .curtain { --curtain-w: max(60vw, 70dvh); --curtain-h: 88dvh; top: 1dvh; }
}
.curtain-left {
  left: calc(var(--curtain-w) * -0.1333);
  background-image: url('../assets/curtainleft.png');
  background-position: top left;
  transform-origin: top left;
}
.curtain-right {
  right: calc(var(--curtain-w) * -0.1333);
  background-image: url('../assets/curtainright.png');
  background-position: top right;
  transform-origin: top right;
}


/* --- Logo --- */
/* Centering (xPercent/yPercent: -50) is applied once via gsap.set() in main.js so it
   composes correctly with the per-act xPercent/yPercent tweens instead of a frozen CSS matrix. */
.logo {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  text-align: center;
  color: var(--gold);
  will-change: transform;
}
.logo-mark {
  display: block;
  width: clamp(70px, 12vw, 120px);
  height: clamp(70px, 12vw, 120px);
  object-fit: cover;
  margin: 0 auto clamp(0.5rem, 1.5vw, 0.75rem);
  border-radius: 50%;
  border: 2px solid var(--gold);
  box-shadow: 0 4px 16px rgba(0,0,0,.65);
}
.logo span { display: block; font-size: clamp(2rem, 8vw, 4rem); font-weight: 800; letter-spacing: .12em; }
.logo small { display: block; font-size: clamp(0.75rem, 2vw, 1rem); opacity: .8; letter-spacing: .06em; }

/* --- Prop groups (one per act); autoAlpha (opacity+visibility) keeps hidden
   acts non-interactive automatically, so overlapping content can't be clicked. ---
   TOP-anchored (not vertically centered) so every act's title lands at the exact same
   height regardless of how much content follows it — GSAP only applies xPercent:-50
   (horizontal centering) here, no yPercent, see main.js. max-height + overflow:hidden
   (not auto — that would trap the scroll wheel) reserves the bottom of the stage as a
   "no text" floor zone; illusions/photos/props may sit there, body text may not. */
.prop-group {
  position: absolute;
  top: 15%;
  left: 50%;
  z-index: 2;
  width: 94vw;
  max-height: 70vh;
  overflow: visible;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  padding: 20px;
}
@supports (max-height: 64dvh) {
  .prop-group { max-height: 64dvh; }
}
/* Members' content (8 board cards + independently-scrolling roster) is unusually tall;
   its own roster already scrolls internally, so it gets a bit more room than the rest. */
#actMembers { max-height: 70vh; }
@supports (max-height: 70dvh) {
  #actMembers { max-height: 70dvh; }
}
.act-title { color: var(--gold); margin-top: 0; font-size: clamp(1.75rem, 3.2vw, 3rem); }
.act-button {
  display: inline-block;
  margin-top: clamp(0.5rem, 2vw, 1rem);
  padding: clamp(0.6rem, 1.5vw, 0.9rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: 8px;
  background: var(--gold);
  color: #201409;
  font-weight: 700;
  font-size: clamp(0.5rem, 0.7rem + 0.5vw, 1rem);
  text-decoration: none;
}
.prop-group p { font-size: clamp(0.8rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.45; background-color: rgba(0, 0, 0, 0.3); border-radius: 4px; padding: 4px; }

/* --- Act: news --- */
.act-columns { display: flex; gap: clamp(1.5rem, 4vw, 3rem); justify-content: center; align-items: center; text-align: left; flex-wrap: wrap; max-width: 700px; margin: 0 auto; }
.act-column { flex: 0 1 auto; min-width: 240px; }
.meeting-line { margin: clamp(0.35rem, 1vw, 0.5rem) 0; font-size: clamp(1.05rem, 1.3vw, 1.3rem); }

.prop { position: absolute; z-index: -1; opacity: .9; }
.prop-paperstack {
  width: clamp(60px, 12vw, 90px); height: clamp(40px, 8vw, 60px);
  background: repeating-linear-gradient(#e9dfc7 0 6px, #cfc4a4 6px 8px);
  border: 1px solid #8a7f63;
  border-radius: 3px;
}
.prop-paperstack--a { top: clamp(-3rem, -8vh, -6rem); left: clamp(-1rem, -4vw, -2rem); transform: rotate(-8deg); }
.prop-paperstack--b { top: clamp(-3rem, -8vh, -5.5rem); right: clamp(-1.5rem, -4vw, -3rem); transform: rotate(6deg); }

/* --- Act: archives --- */
.prop-cabinet {
  width: clamp(80px, 15vw, 120px); height: clamp(60px, 12vw, 90px);
  top: clamp(-3.5rem, -10vh, -7rem); left: clamp(-1.5rem, -4vw, -3rem);
  background: repeating-linear-gradient(180deg, var(--wood) 0 28px, var(--wood-dark) 28px 30px);
  border: 2px solid var(--wood-dark);
  border-radius: 4px;
}
.prop-tomes {
  width: clamp(70px, 13vw, 100px); height: clamp(35px, 7vw, 50px);
  top: clamp(-3rem, -8vh, -6rem); right: clamp(-1.5rem, -4vw, -3rem);
  background: repeating-linear-gradient(90deg, #4a3123 0 18px, #6b4a34 18px 20px);
  border-radius: 3px;
}

/* --- Act: members --- */
.board-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  max-width: 400px;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
}
.board-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: 0.6rem 0.4rem;
  background: rgba(20,14,24,.55);
  border: 1px solid rgba(216,178,92,.35);
  border-radius: 10px;
}
.board-card--featured {
  padding: 1.6rem 1rem;
  border-color: var(--gold);
  background: rgba(216,178,92,.14);
}
.board-card--featured .board-avatar { width: clamp(64px, 10vw, 88px); height: clamp(64px, 10vw, 88px); font-size: clamp(1.6rem, 4vw, 2.2rem); }
.board-card--featured .member-role { font-size: 1.15em; font-weight: 700; opacity: 1; color: var(--gold); }
.member-name { font-weight: 700; }
.member-role { opacity: .75; font-size: .9em; }

/* Avatar/photo placeholder buttons — board + roster; will hold real headshots later */
.avatar-trigger { all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .3rem; }
.board-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(216,178,92,.15);
  border: 1px solid rgba(216,178,92,.4);
  font-size: 1.1rem;
}

/* Independent scroll module: 30-60 members browse/scroll here without moving the page.
   This is the ONE deliberate exception to the "no scrollboxes" rule. */
.member-roster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: clamp(0.6rem, 1.5vw, 0.9rem);
  max-width: 760px;
  max-height: 20vh;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0 auto clamp(1rem, 2vw, 1.5rem);
  padding: clamp(0.6rem, 1.5vw, 0.9rem);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(216,178,92,.25);
  border-radius: 10px;
}
.roster-card { }
.roster-avatar {
  width: clamp(44px, 8vw, 60px);
  height: clamp(44px, 8vw, 60px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(216,178,92,.15);
  border: 1px solid rgba(216,178,92,.4);
  font-size: clamp(1.1rem, 2.5vw, 1.5rem);
}
.roster-name { font-size: .8em; opacity: .8; }

/* --- Act: show --- */
.prop-illusion-box {
  width: clamp(60px, 12vw, 90px); height: clamp(70px, 15vw, 110px);
  border-radius: 6px;
  background: linear-gradient(160deg, #3a2a44, #1b1420);
  border: 2px solid var(--gold);
}
.prop-illusion-box--a { top: clamp(-4rem, -10vh, -8rem); left: clamp(-2rem, -5vw, -4rem); transform: rotate(-6deg); }
.prop-illusion-box--b { top: clamp(-4rem, -10vh, -8rem); right: clamp(-2rem, -5vw, -4rem); transform: rotate(5deg); }

/* Placeholder event photos — real ones come later. Grid on wide screens; on narrow
   phones this becomes a horizontal swipe/scroll-snap strip (an intentional, explicitly
   requested exception, one photo at a time — not the vertical scroll-trap bug). */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15vw, 1fr));
  gap: clamp(0.5rem, 1.5vw, 0.75rem);
  max-width: 560px;
  margin: 0 auto clamp(0.75rem, 2vw, 1.25rem);
}
.photo-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: 8px;
  background: linear-gradient(135deg, rgba(216,178,92,.15), rgba(255,255,255,.04));
  border: 1px dashed rgba(216,178,92,.4);
}
@media (max-width: 600px) {
  .photo-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    max-width: 90vw;
  }
  .photo-placeholder { flex: 0 0 78%; scroll-snap-align: center; }
}

/* --- Clickable lightbox photos --- */
.photo-trigger { all: unset; cursor: pointer; display: contents; align-items: center; }
.act-photo {
  display: block;
  width: min(90vw, 480px);
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
  border: 1px solid rgba(216,178,92,.4);
  margin: 0 auto clamp(0.75rem, 2vw, 1.25rem);
}
.act-photo--pair { width: min(42vw, 320px); margin-bottom: 0; }
.about-photos { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-bottom: clamp(0.75rem, 2vw, 1.25rem); }
.about-text { padding-left: 20px; padding-right: 20px; }

/* --- Illusion-prop placeholders: direct children of .theater (NOT any act's prop-group),
   so each has its own independent enter/exit timing (see main.js addFloorProp) and never
   gets dragged around by an act's own animation. The outer .stage-prop is what GSAP
   animates (position/opacity only, no CSS transform of its own); the perspective tilt
   lives on the nested .stage-prop-inner so it never conflicts with GSAP's transform. --- */
.stage-prop {
  position: absolute;
  bottom: 3vh;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform;
}
.stage-prop-inner {
  position: relative;
  transform: perspective(500px) rotateX(58deg);
  transform-origin: bottom center;
}
.stage-prop-inner::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 130%;
  height: 16px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(0,0,0,.55) 0%, transparent 70%);
  filter: blur(2px);
}
#propCupsTable { left: 20%; }
#propSawbox { left: 6%; }
#propTomesLeft { left: 2%; }
#propTomesRight { right: 2%; }
#propLevitation { left: 46%; }
#propDoveCage { right: 16%; }
#propArtFrame { left: 14%; }

.prop-sawbox {
  width: clamp(90px, 14vw, 130px); height: clamp(50px, 8vw, 70px);
  background: linear-gradient(160deg, #3a2a44, #1b1420);
  border: 2px solid var(--gold);
  border-radius: 4px;
}
.prop-sawbox::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 50%;
  width: 4px;
  background: var(--gold);
  transform: translateX(-50%);
}
.prop-cupstable {
  width: clamp(70px, 11vw, 100px); height: clamp(70px, 11vw, 100px);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, var(--wood) 0%, var(--wood-dark) 80%);
  border: 2px solid var(--wood-dark);
}
.prop-levitation {
  width: clamp(100px, 15vw, 140px); height: clamp(30px, 5vw, 40px);
  border-radius: 50%;
  background: linear-gradient(160deg, #3a2a44, #1b1420);
  border: 2px solid var(--gold);
}
.prop-dovecage {
  width: clamp(60px, 9vw, 85px); height: clamp(85px, 13vw, 120px);
  border-radius: 50% 50% 20% 20%;
  background: repeating-linear-gradient(90deg, rgba(216,178,92,.3) 0 3px, transparent 3px 10px);
  border: 2px solid var(--gold);
}
.prop-artframe {
  width: clamp(70px, 11vw, 100px); height: clamp(90px, 14vw, 130px);
  background: linear-gradient(150deg, #4a3123, #6b4a34);
  border: 6px solid var(--gold);
  border-radius: 2px;
}
.prop-tomestack {
  width: clamp(70px, 10vw, 100px); height: clamp(90px, 13vw, 130px);
  background: repeating-linear-gradient(180deg, var(--wood) 0 20px, var(--wood-dark) 20px 22px);
  border: 2px solid var(--wood-dark);
  border-radius: 4px;
}
.prop-tomestack--b {
  background: repeating-linear-gradient(180deg, #6b4a34 0 16px, #4a3123 16px 18px);
}
@media (max-width: 600px) {
  #propTomesLeft { left: 0.5%; }
  #propTomesRight { right: 0.5%; }
}

/* --- Act: social --- */
.social-links { display: flex; gap: clamp(0.5rem, 2vw, 1rem); justify-content: center; flex-wrap: wrap; }
.social-badge {
  width: clamp(40px, 10vw, 56px); height: clamp(40px, 10vw, 56px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(216,178,92,.15);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  text-decoration: none;
  font-size: clamp(0.7rem, 2vw, 0.875rem);
}

/* --- Act: contact --- */
.contact-form { display: flex; flex-direction: column; gap: 1rem; text-align: left; max-width: 420px; margin: 0 auto; }
.contact-form label { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; }
.contact-form input, .contact-form textarea {
  font: inherit;
  padding: .6rem .75rem;
  border-radius: 6px;
  border: 1px solid rgba(216,178,92,.4);
  background: rgba(255,255,255,.05);
  color: inherit;
}
.contact-form button { align-self: flex-start; border: none; cursor: pointer; }

/* --- Dim overlay for closing: real theater lights never go fully dark, so this caps
   at 90% opacity (see main.js) rather than a solid blackout --- */
.dim-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: black;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* --- Footer --- */
.site-footer {
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0c090e;
}
.site-footer h2 { color: var(--gold); }

/* --- Lightbox (independent of scroll state) --- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.85);
}
.lightbox-panel {
  position: relative;
  z-index: 1;
  max-width: min(92vw, 640px);
  max-height: 88vh;
  overflow-y: auto;
  background: var(--stage-bg);
  border: 1px solid rgba(216,178,92,.4);
  border-radius: 12px;
  padding: 2rem;
  text-align: center;
}
.lightbox-img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  border-radius: 8px;
  margin: 0 auto 1rem;
}
.lightbox-close {
  all: unset;
  cursor: pointer;
  position: absolute;
  top: .5rem;
  right: 1rem;
  font-size: 1.5rem;
  color: var(--gold);
}

/* --- Narrow Phone Landscape fix --- */
@media (max-height: 700px) and (orientation: landscape) {
  .act-title { font-size: clamp(1.4rem, 4vw, 2rem); margin: clamp(0.25rem, 1vh, 0.5rem) 0; }
  .logo span { font-size: clamp(1.5rem, 6vw, 2.5rem); }
  .act-columns { gap: clamp(1rem, 2vw, 1.5rem); }
  .board-grid { gap: clamp(0.5rem, 1vw, 0.75rem); }
  .board-card { padding: 0.75rem 0.5rem; }
  .member-roster { max-height: 26vh; }
}

/* --- Everything Bigger than a Phone start here --- */
@media (min-width: 480px) {
  .prop-group { width: min(92vw, 1170px); max-height: 64vh; }
  .act-photo--pair { width: 44vw; }
  .about-photos { gap: clamp(0.75rem, 2vw, 1.25rem); }
  .member-roster { max-height: 26vh; }
  .prop-group p { font-size: clamp(0.7rem, 0.8rem + 0.5vw, 1rem); line-height: 1.55; }

  /* Members is by far the tallest act (8 board cards + scrollable roster) — compact the
     board grid to 3 columns and shrink avatars so it fits the safe text zone on phones. */
  #actMembers .board-grid { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: clamp(0.75rem, 2vw, 1.25rem); }
  #actMembers .board-avatar { width: clamp(52px, 8vw, 72px);
  height: clamp(52px, 8vw, 72px); font-size: clamp(1.3rem, 3vw, 1.75rem); }
  #actMembers .board-card {  padding: 1.25rem 1rem; }
  #actMembers .member-roster { max-height: 24vh; }
  #actMembers .board-grid { max-width: 600px; }
  .photo-grid.column { width: 100%; }
}

/* Override: Tablet and larger */
@media (min-width: 768px) and (max-width: 1023px) {
  .prop-group { width: 94vw; height: 70vh;max-height: 70vh; }
  .act-photo--pair { width: 30vw; }
  .about-photos { gap: 0.75rem; }
  .member-roster { max-height: 24vh; }
  .prop-group p { font-size: clamp(0.8rem, 0.9rem + 0.5vw, 1.25rem); line-height: 1.45; }
}

/* Override: Desktop and larger */
@media (min-width: 1024px) {
  #actMembers .board-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: clamp(0.75rem, 2vw, 1rem); max-width: 800px; min-height: 50vh; display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
  .prop-group { padding-left: clamp(1rem, 0.9rem + 5vw, 3rem); padding-right: clamp(1rem, 0.9rem + 5vw, 3rem); }
  .act-photo--pair { width: 30vw; }
  .about-photos { gap: 0.75rem; }
  .member-roster { max-height: 24vh; }
  #actMembers .board-card { display: flex; flex: 1 1 132px; max-width: 1fr; }
}

/* --- Reduced motion: keep pin/layout, drop non-essential embellishment --- */
@media (prefers-reduced-motion: reduce) {
  .lightbox { transition: none; }
}