/* =========================================================
   poster-home.css — iteration C: the poster as the home page
   Loads after v6.css and lineup.css. See js/poster-home.js.
   ========================================================= */

:root {
  --stage-h: calc(100vh - var(--header-h));
  --pad-x: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
}
@supports (height: 100svh) { :root { --stage-h: calc(100svh - var(--header-h)); } }
html, body { overflow-x: clip; }
body { background: var(--white); }

/* ---------- the fixed stage behind the page ---------- */
.pc-stage {
  --dark: 0;
  position: fixed; left: 0; right: 0; top: var(--header-h); height: var(--stage-h);
  z-index: 0; overflow: hidden; pointer-events: none;
  background: var(--white);
}
.pc-stage.is-covered { visibility: hidden; transform: translate3d(0, -300vh, 0); }
.pc-stage.is-covered .city-map { animation-play-state: paused; }
.pc-shade {
  position: absolute; inset: 0; background: var(--black);
  transform: translate3d(0, var(--edge, 100%), 0); will-change: transform;
}
/* the flower's glow on black, as in the teaser's act 2 (fixed to the stage,
   so it counter-moves against the rising panel) */
.pc-glow {
  position: absolute; inset: 0;
  transform: translate3d(0, calc(var(--edge, 100%) * -1), 0);
  background: radial-gradient(ellipse 36% 62% at 75% 52%, rgba(255,255,255,0.2), rgba(255,255,255,0.07) 45%, rgba(255,255,255,0) 100%);
}
[data-tree="behind"] .pc-glow {
  background: radial-gradient(ellipse 46% 60% at 50% 50%, rgba(255,255,255,0.14), rgba(255,255,255,0.05) 45%, rgba(255,255,255,0) 100%);
}

/* map: full strength on white; on black the grid drops to a whisper and the
   red route keeps reading */
.city { position: absolute; inset: -6%; }
.city-map {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none;
  animation: city-drift 48s ease-in-out infinite alternate;
}
@keyframes city-drift {
  from { transform: translate3d(-1.8%, 1.2%, 0); }
  to   { transform: translate3d(1.8%, -1.2%, 0); }
}
/* the route marks sit where the lineup's names land, so they recede on black */
.city-marks { opacity: calc(1 - var(--dark) * 0.72); }
.city-map .city-frame { transform: translate(30px, -190px); }
@media (min-width: 861px) and (max-width: 1100px) {
  .city-map .city-frame { transform: translate(30px, -215px); }
}
.city-grid {
  --mask: radial-gradient(ellipse 25% 46% at 72.5% 50%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.3) 50%, #000 100%);
  -webkit-mask-image: var(--mask); mask-image: var(--mask);
}
.city-map .blk-n { stroke: #f0f0f0; stroke-width: 1.4; fill: none; }
.city-map .blk-s { stroke: #f2f2f2; stroke-width: 1.4; fill: none; }
.city-map .st { stroke: #ececec; stroke-width: 7; fill: none; stroke-linecap: square; }
.city-map .market { stroke: #f0f0f0; stroke-width: 30; fill: none; }
.city-map .market-edge { stroke: #e2e2e2; stroke-width: 1.2; fill: none; }
.city-map text { font-family: var(--font); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; fill: #bdbdbd; }
.city-map .fest-label, .city-map .store { fill: var(--red); }
.city-map .fest-street { fill: #b3b3b3; }
.city-map .a-end { text-anchor: end; }
.city-map .a-mid { text-anchor: middle; }
/* on black, the grey labels would glow; they step down with the grid */
.pc-stage.is-dark .city-marks .fest-street { fill: #555; }

/* the flower's carrier: scaled and moved into the art intro as it scrolls in
   (js/poster-home.js writes the transform); --land is 0 until then */
.pc-fly { position: absolute; inset: 0; transform-origin: 0 0; }

/* the flower: right half in the hero (the teaser's act 1 framing) */
.pc-tree {
  position: absolute; left: 50%; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  transform-origin: 50% 60%;
}
.pc-tree > canvas { display: block; width: 100%; height: 100%; }
/* behind: drifts to centre, grows and fades into the back of the poster */
[data-tree="behind"] .pc-tree {
  transform: translate3d(calc(var(--dark) * -25vw), 0, 0) scale(calc(1 + var(--dark) * 0.28));
  opacity: calc(1 - var(--dark) * 0.72 * (1 - var(--land, 0)));
}
/* beside: stays put at full strength, as in act 2; the names keep left */
[data-tree="beside"] .pc-tree { opacity: 1; }

/* ---------- page content scrolls over the stage ---------- */
/* the review bar is static, so the fixed stage would paint over it */
.lu-review { position: relative; z-index: 2; }
.pc-page { position: relative; z-index: 1; }
/* only the lineup is see-through; every later section is solid */
.pc-lineup { background: transparent; }

/* hero: the teaser's act 1 copy, bottom-left */
.pc-hero {
  min-height: var(--stage-h);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 0 var(--pad-x) clamp(28px, 5.5vh, 52px);
}
.pc-hero h1 {
  font-size: clamp(3rem, 7vw, 7.25rem); line-height: 0.92; letter-spacing: -0.035em; font-weight: 700;
  max-width: 7em;
}
.pc-when {
  margin-top: clamp(28px, 4vh, 44px);
  font-size: clamp(1.25rem, 1.9vw, 1.75rem); font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; line-height: 1.3;
}
.pc-when b { font-weight: inherit; white-space: nowrap; }
.pc-when span { margin: 0 0.35em; opacity: 0.55; }
.pc-when .pc-drop { display: block; color: var(--red); }
.pc-hero .btn { margin-top: 14px; align-self: flex-start; }
.pc-hero .btn:not(.btn-sm) { font-size: 1.1875rem; }

/* beside: the poster keeps to the copy half so the flower stays clear */
@media (min-width: 861px) {
  [data-tree="beside"] .pc-lineup .container { padding-right: calc(50% + 24px - var(--gutter)); max-width: none; padding-left: var(--pad-x); }
  [data-tree="beside"] .pc-lineup .la-names { font-size: clamp(2rem, 3.8vw, 3.75rem); }
  [data-tree="beside"] .pc-lineup .display { font-size: clamp(2.5rem, 5vw, 5rem); }
  [data-tree="beside"] .pc-lineup .sec-sub { grid-template-columns: 1fr; }
}
/* behind: names sit over the ghosted flower; a soft shadow keeps them crisp */
[data-tree="behind"] .pc-lineup .la-names { text-shadow: 0 2px 24px rgba(0, 0, 0, 0.55); }

/* the partners and footer are solid and cover the stage */
.pc-page > .blk-red { position: relative; }
.pc-page + .footer, .footer { position: relative; z-index: 1; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  :root { --header-h: 80px; }
  .header .logo { flex: 0 1 auto; min-width: 0; }
  .header .logo img { width: min(100%, 300px); height: auto; }
  .city-map .city-frame { transform: translate(190px, -343px); }
  .city-map .vert { display: none; }
  .city-grid { --mask: radial-gradient(ellipse 44% 26% at 50% 30%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.3) 50%, #000 100%); }
  /* flower band across the top, as on the teaser's phones */
  .pc-tree { left: 0; right: 0; top: 19.5%; bottom: 42%; }
  [data-tree] .pc-tree {
    transform: translate3d(0, calc(var(--dark) * 18%), 0) scale(calc(1 + var(--dark) * 0.35));
    opacity: calc(1 - var(--dark) * 0.7 * (1 - var(--land, 0)));
  }
  .pc-glow { background: radial-gradient(ellipse 62% 30% at 50% 36%, rgba(255,255,255,0.18), rgba(255,255,255,0) 100%); }
  .pc-hero h1 { font-size: clamp(2.5rem, 12vw, 3.75rem); }
  .pc-when { font-size: 1.1875rem; letter-spacing: 0.04em; }
}

@media (prefers-reduced-motion: reduce) {
  .city-map { animation: none; }
}