/* ============================================================
   BRAINSOIL IX — sections.css
   Per-section layout + responsive
   ============================================================ */

/* ---------- HERO ---------- */
#hero{
  position:relative;
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding-top:96px; max-width:none;
}
#hero .hero-mark{ width:min(680px,94vw); margin:0 auto 4px; }
#hero .hero-mark video, #hero .hero-mark img{
  width:100%; height:auto; mix-blend-mode:screen; filter:var(--logo-boost); opacity:.92;
}
/* transparent-poster fallback: hidden on desktop (the video animates there) */
#hero .hero-mark .hero-logo-img{ display:none; }
/* iOS Safari drops mix-blend-mode on <video>, so on mobile show the already-transparent
   poster image instead (no blend needed) and hide the black-framed video. */
@media (max-width:640px){
  #hero .hero-mark .hero-logo-vid{ display:none; }
  #hero .hero-mark .hero-logo-img{ display:block; mix-blend-mode:normal; opacity:1; }
}
#hero .eyebrow{ margin-bottom:20px; }
h1.title{
  font-family:var(--display); font-weight:900;
  font-size:clamp(56px,13vw,140px); letter-spacing:-.03em; line-height:.86;
  color:var(--white); text-shadow:0 0 3px rgba(255,255,255,.15), var(--glow);
}
h1.title b{ color:var(--accent); font-weight:900; }
#hero .numeral{
  font-family:var(--display); font-weight:900; letter-spacing:.015em;
  font-size:clamp(48px,10vw,100px); line-height:1; margin:14px 0 6px;
  background:linear-gradient(100deg, var(--white) 0%, var(--gold-lt) 45%, var(--accent) 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  filter:drop-shadow(0 0 26px rgba(57,255,20,.35)) drop-shadow(0 0 14px rgba(212,175,55,.3));
}
/* theme: "ENCORE" kicker stands apart from the serif "Seed & Cycle" */
#hero .theme{ margin-top:16px; }
#hero .theme .enc{
  display:block; font-family:var(--mono); font-style:normal; font-weight:700;
  font-size:clamp(11px,1.6vw,14px); letter-spacing:.55em; text-transform:uppercase;
  color:var(--accent); text-shadow:0 0 12px rgba(57,255,20,.5); margin-bottom:6px;
  padding-left:.55em; /* optically recenters the wide tracking */
}
#hero .theme .theme-name{
  font-family:var(--serif); font-style:italic; font-weight:500;
  font-size:clamp(22px,3.6vw,34px); color:var(--accent-3);
  text-shadow:var(--glow);
}
#hero .tagline{
  font-family:var(--serif); font-style:normal; font-weight:400;
  font-size:clamp(15px,2.2vw,20px); color:var(--champagne); opacity:.85; margin-top:12px;
}
#hero .hero-meta{ margin-top:34px; font-family:var(--sans); font-size:clamp(14px,2vw,18px); letter-spacing:.08em; color:#d8cfb4; }
/* keep the date and the time each on their own unbreakable chunk so
   "PM" never orphans onto its own line — the row wraps only between them */
#hero .hero-meta .when,
#hero .hero-meta .time{ white-space:nowrap; display:inline-block; }
#hero .hero-meta .time{ color:var(--accent); font-family:var(--mono); letter-spacing:.06em; }
#hero .hero-bday{
  margin-top:10px; font-family:var(--mono); font-size:clamp(11px,1.5vw,13px);
  letter-spacing:.24em; text-transform:uppercase; color:var(--gold-lt);
  text-shadow:0 0 14px rgba(212,175,55,.4);
}
#hero .hero-bday .sep{ color:var(--gold-dk); margin:0 8px; }
#hero .hero-where{ margin-top:8px; font-size:13px; letter-spacing:.12em; color:var(--mute); text-transform:uppercase; }
/* address segments wrap only at the separators, never mid-phrase */
#hero .hero-where span{ white-space:nowrap; display:inline-block; }
#hero .hero-where .sep{ color:var(--gold-dk); margin:0 6px; }
#hero .cosmic-strip{
  margin-top:26px; font-family:var(--mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); opacity:.85; display:flex; gap:14px; flex-wrap:wrap; justify-content:center;
}
#hero .cosmic-strip span{ white-space:nowrap; }
#hero .cosmic-strip .sep{ color:var(--gold-dk); }
.scroll-cue{ margin-top:52px; font-family:var(--mono); font-size:10px; letter-spacing:.4em; color:var(--gold-dk); animation:bob 2.4s ease-in-out infinite; }
@keyframes bob{ 0%,100%{transform:translateY(0);opacity:.6;} 50%{transform:translateY(8px);opacity:1;} }

#hero .leo-glyph{
  display:block; margin:44px auto 0;
  width:min(180px,26vw); height:auto;
  animation:leoGlow 3.8s ease-in-out infinite;
}
@keyframes leoGlow{
  0%,100%{
    opacity:.55; transform:scale(.94);
    filter:drop-shadow(0 0 10px rgba(212,175,55,.25)) drop-shadow(0 0 22px rgba(57,255,20,.1));
  }
  50%{
    opacity:1; transform:scale(1.16);
    filter:drop-shadow(0 0 30px rgba(212,175,55,.65)) drop-shadow(0 0 60px rgba(57,255,20,.3));
  }
}
@media (max-width:640px){ #hero .leo-glyph{ margin-top:30px; width:min(120px,32vw); } }

/* ---------- MANIFESTO ---------- */
#manifesto{ text-align:center; }
#manifesto p.lead{
  font-family:var(--serif); font-weight:400; font-size:clamp(22px,3.4vw,34px);
  color:var(--white); line-height:1.5; max-width:820px; margin:0 auto;
}
#manifesto p.lead b{ color:var(--accent); font-weight:600; }
#manifesto p.small{ font-family:var(--sans); font-size:15px; color:var(--mute); margin-top:26px; letter-spacing:.04em; max-width:640px; margin-left:auto; margin-right:auto; }

/* ---------- PROGRAM ---------- */
.program-row{
  display:grid; grid-template-columns:150px 1fr; gap:26px; align-items:baseline;
  padding:22px 0; border-bottom:1px solid var(--hairline);
}
.program-row .time{ font-family:var(--mono); color:var(--accent); font-size:16px; letter-spacing:.04em; }
.program-row .time small{ display:block; color:var(--gold-dk); font-size:10px; letter-spacing:.18em; margin-top:4px; text-transform:uppercase; }
.program-row .what{ font-family:var(--sans); font-size:17px; color:var(--champagne); font-weight:500; }
.program-row .what span{ display:block; font-size:13px; font-weight:400; color:var(--mute); margin-top:5px; }
.program-row .what .act{ color:var(--gold-lt); }

/* ---------- PARTICULARS (trio) ---------- */
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:44px; text-align:center; }
.trio .label{ font-family:var(--mono); font-size:11px; letter-spacing:.24em; color:var(--gold-dk); text-transform:uppercase; margin-bottom:14px; }
.trio .value{ font-family:var(--serif); font-size:clamp(20px,2.6vw,26px); color:var(--white); }
.trio .note{ font-family:var(--sans); font-size:13px; color:var(--mute); margin-top:10px; }
.swatches{ display:flex; gap:10px; justify-content:center; margin-top:16px; }
.swatch{ width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.2); box-shadow:var(--glow); }

/* ---------- COSMIC / ECLIPSE CORRIDOR ---------- */
#cosmos{ text-align:center; }
.cosmos-viz{ position:relative; width:min(620px,92vw); margin:0 auto; }
.cosmos-viz .zodiac{ width:100%; display:block; border-radius:14px; border:1px solid rgba(212,175,55,.28);
  box-shadow:0 0 50px rgba(212,175,55,.2), 0 22px 60px rgba(0,0,0,.55); animation:zpulse 6s ease-in-out infinite;
  cursor:zoom-in; transition:transform .3s ease; }
.cosmos-viz .zodiac:hover{ transform:scale(1.015); }
.cosmos-viz .sigil{ position:absolute; inset:0; width:100%; margin:0; mix-blend-mode:screen; opacity:.85; pointer-events:none; }
@keyframes zpulse{ 0%,100%{ box-shadow:0 0 44px rgba(212,175,55,.16), 0 22px 60px rgba(0,0,0,.55); } 50%{ box-shadow:0 0 72px rgba(212,175,55,.3), 0 22px 60px rgba(0,0,0,.55); } }

/* ---------- ZODIAC LIGHTBOX ---------- */
.zodiac-lightbox{
  position:fixed; inset:0; z-index:80; display:none; align-items:center; justify-content:center;
  background:rgba(4,3,2,.92); padding:4vh 4vw; cursor:zoom-out;
}
.zodiac-lightbox.open{ display:flex; }
.zodiac-lightbox img{
  max-width:94vw; max-height:92vh; border-radius:10px;
  box-shadow:0 0 80px rgba(212,175,55,.3), 0 30px 90px rgba(0,0,0,.7);
}
.zodiac-lightbox .lb-close{
  position:absolute; top:20px; right:26px; font-family:var(--mono); font-size:13px;
  letter-spacing:.2em; color:var(--gold-lt); background:none; border:1px solid var(--gold-dk);
  border-radius:2px; padding:8px 14px; cursor:pointer;
}
#cosmos .corridor{
  display:flex; justify-content:center; align-items:stretch; gap:0; flex-wrap:wrap;
  margin:40px auto 0; max-width:860px;
}
#cosmos .node{ flex:1 1 200px; padding:22px 18px; position:relative; }
#cosmos .node + .node{ border-left:1px solid var(--hairline); }
#cosmos .node .date{ font-family:var(--mono); font-size:13px; letter-spacing:.14em; color:var(--accent); }
#cosmos .node .evt{ font-family:var(--serif); font-size:18px; color:var(--white); margin-top:8px; }
#cosmos .node .sub{ font-family:var(--sans); font-size:12px; color:var(--mute); margin-top:6px; }
#cosmos .node.pin .evt{ color:var(--gold-lt); }
#cosmos .node.pin::after{ content:'✦'; position:absolute; top:-10px; left:50%; transform:translateX(-50%); color:var(--accent); font-size:12px; }
#cosmos .anchor-line{ margin-top:34px; font-family:var(--mono); font-size:12px; letter-spacing:.18em; color:var(--mute); text-transform:uppercase; }
#cosmos .anchor-line b{ color:var(--accent); }

/* ---------- TICKETS ---------- */
#tickets{ text-align:center; }
.price-row{ display:flex; justify-content:center; align-items:stretch; gap:34px; margin:38px 0 42px; flex-wrap:wrap; }
.price-box{
  min-width:170px; padding:26px 34px 22px; border-radius:12px;
  border:1px solid var(--hairline); background:rgba(255,255,255,.015);
}
.price-box .amt{ font-family:var(--serif); font-size:clamp(38px,6vw,52px); color:var(--gold-lt); text-shadow:var(--glow); }
.price-box .amt .cur{ font-size:.5em; vertical-align:super; opacity:.7; }
.price-box .lbl{ font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--mute); text-transform:uppercase; margin-top:8px; }
/* two tiers, two colors: gold = presale (the deal), green = at the door */
.price-box.presale{ border-color:rgba(212,175,55,.45); box-shadow:0 0 28px rgba(212,175,55,.14), inset 0 0 22px rgba(212,175,55,.05); }
.price-box.presale .lbl{ color:var(--gold-lt); }
.price-box.door{ border-color:rgba(57,255,20,.35); box-shadow:0 0 28px rgba(57,255,20,.1), inset 0 0 22px rgba(57,255,20,.04); }
.price-box.door .amt{ color:var(--accent); text-shadow:0 0 22px rgba(57,255,20,.45); }
.price-box.door .lbl{ color:var(--accent); }
/* vertical hairline between the tiers (hidden when the row wraps to a column) */
.price-row .vsep{ width:1px; align-self:stretch; background:linear-gradient(180deg,transparent,var(--gold-dk),transparent); opacity:.7; }
@media (max-width:480px){ .price-row .vsep{ display:none; } }
.release-note{ margin-top:22px; font-family:var(--mono); font-size:13px; color:var(--gold-lt); letter-spacing:.08em; }
.fineprint{ margin-top:10px; font-family:var(--sans); font-size:12px; color:var(--mute); letter-spacing:.06em; }
.tbd{
  display:inline-block; font-family:var(--mono); font-size:10px; letter-spacing:.14em;
  color:var(--uv-magenta); border:1px dashed rgba(255,43,214,.5); border-radius:3px;
  padding:1px 7px; margin-left:8px; text-transform:uppercase; vertical-align:middle;
}
:root[data-vibe="balanced"] .tbd{ color:var(--gold); border-color:rgba(212,175,55,.5); }

/* ---------- NAV LINKS ---------- */
.nav-links{ display:flex; align-items:center; gap:22px; }
.nav-link{ font-family:var(--sans); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--champagne); opacity:.85; transition:color .2s, opacity .2s; }
.nav-link:hover{ color:var(--accent); opacity:1; }

/* Call for Entry — call it out from the rest of the nav */
.nav-link[href="enter.html"],
.nav-panel a[href="enter.html"],
.footer-nav a[href="enter.html"]{
  color:var(--gold-lt); opacity:1; font-weight:600; text-shadow:0 0 12px rgba(243,214,122,.45);
}
.nav-link[href="enter.html"]:hover{ color:var(--accent); }

/* ---------- MOBILE NAV (burger + dropdown panel) ---------- */
.nav-burger{
  display:none; position:relative; width:40px; height:34px; margin-left:4px;
  background:none; border:1px solid var(--hairline); border-radius:2px; cursor:pointer; padding:0;
}
.nav-burger span{
  position:absolute; left:9px; right:9px; height:2px; background:var(--accent);
  border-radius:1px; transition:transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-burger span:nth-child(1){ top:9px; }
.nav-burger span:nth-child(2){ top:15px; }
.nav-burger span:nth-child(3){ top:21px; }
.nav-burger[aria-expanded="true"] span:nth-child(1){ top:15px; transform:rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ top:15px; transform:rotate(-45deg); }
.nav-panel{
  position:fixed; top:64px; right:5%; z-index:59; min-width:210px;
  display:flex; flex-direction:column; gap:2px; padding:14px;
  background:rgba(10,9,6,.96); border:1px solid var(--hairline); border-radius:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.6), var(--glow);
  backdrop-filter:blur(10px);
}
.nav-panel[hidden]{ display:none; }
.nav-panel a{
  font-family:var(--mono); font-size:13px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--champagne); padding:12px 14px; border-radius:3px;
}
.nav-panel a:hover{ color:var(--accent); background:rgba(57,255,20,.06); }
.nav-panel a + a{ border-top:1px solid rgba(255,255,255,.05); }

/* ---------- ELIXIRS ---------- */
.menu-list{ display:grid; gap:0; max-width:760px; margin:0 auto; }
.menu-item{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; padding:22px 0; border-bottom:1px solid var(--hairline); }
.menu-item .name{ font-family:var(--serif); font-size:clamp(18px,2.4vw,22px); color:var(--white); }
.menu-item .desc{ font-family:var(--sans); font-size:13px; color:var(--mute); margin-top:5px; max-width:440px; }
.menu-item .tag{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--accent); text-transform:uppercase; white-space:nowrap; padding-top:6px; }

/* ---------- CHRONICLE TEASER ---------- */
#chronicle-teaser{ text-align:center; }
.teaser-lead{ font-family:var(--sans); font-size:15px; color:var(--mute); max-width:640px; margin:0 auto 34px; }
.teaser-strip{ display:flex; gap:10px; max-width:920px; margin:0 auto 30px; }
.teaser-strip img{ flex:1 1 0; width:0; aspect-ratio:16/9; object-fit:cover; border:1px solid var(--hairline); border-radius:3px; filter:grayscale(.4) brightness(.7); transition:filter .35s ease, transform .35s ease, box-shadow .35s ease; }
.teaser-strip:hover img{ filter:grayscale(0) brightness(1); }
.teaser-strip img:hover{ transform:translateY(-4px); box-shadow:var(--glow); filter:grayscale(0) brightness(1.05); }

/* ---------- RESPONSIVE ---------- */
@media (max-width:760px){
  :root{ --pad:7%; }
  .trio{ grid-template-columns:1fr; gap:40px; }
  .program-row{ grid-template-columns:110px 1fr; gap:16px; }
  #cosmos .node + .node{ border-left:none; border-top:1px solid var(--hairline); }
  nav .brand .ix{ display:none; }
  .price-row{ gap:40px; }
  .menu-item{ flex-direction:column; gap:6px; }
  .teaser-strip img:nth-child(n+4){ display:none; }   /* show 3 on small screens */
  .nav-links{ gap:14px; }
  /* top-nav links collapse below tablet into the burger dropdown */
  .nav-link{ display:none; }
  .nav-burger{ display:block; }
}
@media (max-width:480px){
  .teaser-strip img:nth-child(n+3){ display:none; }
}
@media (max-width:420px){
  .program-row{ grid-template-columns:1fr; gap:4px; }
  .program-row .time{ font-size:14px; }
}