/* Static opening and two opaque scenes. No root/background scroll transforms. */
body.home {
  position: relative;
  background-image: url('/assets/paper-texture.webp');
  background-size: 700px 700px;
  background-repeat: repeat;
  background-blend-mode: multiply;
}
.home .home-hero { z-index: 1; overflow: visible; }
/* Intro copy stays in normal document painting, without a forced GPU layer. */
.home .hero-copy { isolation: auto; transform: none; z-index: auto; }
.home .hero-copy h1, .home .hero-copy .intro { opacity: 1; visibility: visible; }
.home .home-guides, .home .site-footer { position: relative; z-index: 1; }

.home .scroll-story {
  --story-travel: max(660px, 110svh);
  --frame-width: 100%;
  --concert-zoom: 1;
  --paper-y: 102%;
  --scene-light: .7;
  position: relative;
  z-index: 2;
  display: block;
  min-height: 0;
  height: auto;
  margin: 0;
  background: var(--paper) url('/assets/paper-texture.webp') center/700px;
  background-blend-mode: multiply;
}
.home .scroll-story::before { content: none; }
.story-viewport { position: relative; height: clamp(360px, 65svh, 680px); }
.story-frame {
  position: relative;
  width: var(--frame-width);
  height: 100%;
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
  background: #171918;
}
.story-frame::before, .story-frame::after {
  content: '';
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  height: 11px;
  pointer-events: none;
  background: var(--paper) url('/assets/paper-texture.webp') center/700px;
  background-blend-mode: multiply;
  clip-path: polygon(0 0,100% 0,100% 45%,96% 70%,92% 50%,88% 85%,84% 58%,80% 88%,76% 61%,72% 53%,68% 80%,64% 53%,60% 94%,56% 65%,52% 91%,48% 61%,44% 78%,40% 53%,36% 91%,32% 61%,28% 89%,24% 66%,20% 79%,16% 84%,12% 57%,8% 86%,4% 58%,0 73%);
}
.story-frame::before { top: -1px; }
.story-frame::after { bottom: -1px; transform: rotate(180deg); }
.story-concert, .story-concert-visual, .story-pcb { position: absolute; inset: 0; }
.story-concert-visual {
  pointer-events: none;
  transform: scale(var(--concert-zoom));
  transform-origin: 79% 50%;
}
.story-concert-image { width: 100%; height: 100%; object-fit: cover; object-position: right 60%; }
.story-concert-visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #10161380, transparent 78%);
}
.story-concert .concert-motion { opacity: 0; }
.concert-motion-ready .story-concert .concert-motion { opacity: var(--scene-light); }
.story-concert .stage-beam { animation-duration: 4.8s; }
.story-concert .stage-beam:nth-of-type(even) { animation-duration: 6.2s; }
.story-concert .stage-haze { animation-duration: 8s; }
.story-concert .stage-glow, .story-concert .stage-flare { animation-duration: 4.5s; }
.story-concert .stage-wash { animation-duration: 9s; }
.story-pcb {
  z-index: 2;
  background: var(--paper);
  transform: translateY(var(--paper-y));
  box-shadow: 0 -12px 24px #10161330;
}
.story-pcb::before {
  content: '';
  position: absolute;
  inset: -8px 0 auto;
  height: 9px;
  background: var(--paper);
  clip-path: polygon(0 70%,4% 30%,8% 50%,12% 20%,16% 65%,20% 25%,24% 60%,28% 20%,32% 65%,36% 35%,40% 70%,44% 25%,48% 65%,52% 40%,56% 75%,60% 30%,64% 65%,68% 30%,72% 80%,76% 35%,80% 70%,84% 25%,88% 60%,92% 30%,96% 65%,100% 40%,100% 100%,0 100%);
}
.story-pcb > img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.home .story-copy {
  position: absolute;
  z-index: 1;
  left: 9%; right: 9%; top: 50%;
  transform: translateY(-50%);
}
.home .story-copy h2 {
  max-width: 9em;
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.2;
  margin-bottom: 18px;
  text-wrap: balance;
}
.home .story-copy-concert h2 { text-shadow: 0 2px 18px #0008; }
.home .story-copy a { font-size: 17px; gap: 20px; }
.home .story-copy a:focus-visible { outline-color: #ffe0a0; }
.home .story-copy-pcb { color: var(--ink); text-align: center; }
.home .story-copy-pcb h2 { max-width: none; font-size: clamp(26px, 3.5vw, 46px); line-height: 1.2; }
.story-topics .story-topic { display:block; text-wrap:balance; }
.story-topics .story-topic-ai { color:#435740; }
.story-topics .story-topic-join { display:block; font-size:.6em; line-height:1; margin:.3em 0 .4em; color:#72765e; }
.story-topics .story-topic-stop { color:var(--brick); }
.home .story-copy-pcb a { color: #414b3e; }
.home .story-copy-pcb a:hover { color: #76281e; }
.home .story-copy-pcb a:focus-visible { outline-color: #1551b5; }
.story-frame [inert] a { pointer-events: none; }
.home .scroll-story + .home-guides::before { background: var(--paper); }

@media (prefers-reduced-motion: no-preference) {
  .home.home-scroll-ready .scroll-story {
    --frame-width: 64%;
    height: calc(clamp(360px, 65svh, 680px) + var(--story-travel));
  }
  .home-scroll-ready .story-viewport { position: sticky; top: 10svh; }
}
@media (max-width: 760px) {
  .story-viewport { height: clamp(340px, 62svh, 520px); }
  .home .scroll-story { --story-travel: max(620px, 105svh); }
  .home .story-copy { left: 8%; right: 8%; }
  .home .story-copy-concert { top: 64%; }
  .home .story-copy h2 { font-size: clamp(30px, 7.5vw, 40px); max-width: 8em; }
  .home .story-copy-pcb h2 { font-size: clamp(25px, 6.1vw, 36px); max-width: none; }
  .story-concert-visual { transform-origin: 86% 50%; }
  .story-concert-visual::after { background: linear-gradient(0deg, #101613dc, #10161340 65%, transparent); }
  .story-pcb > img { object-position: 42% center; }
}
@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .home.home-scroll-ready .scroll-story {
    --frame-width: 80%;
    height: calc(clamp(340px, 62svh, 520px) + var(--story-travel));
  }
  .home-scroll-ready .story-viewport { top: 8svh; }
}
/* A tall layout viewport also occurs with Android's "desktop site" setting.
   Keep a real screen-sized scene and enough travel in that mode. */
@media (min-width: 761px) and (max-aspect-ratio: 3/4) {
  .story-viewport { height: 68svh; }
  .home .story-copy h2 { font-size: clamp(36px, 6vw, 72px); }
}
@media (min-width: 761px) and (max-aspect-ratio: 3/4) and (prefers-reduced-motion: no-preference) {
  .home.home-scroll-ready .scroll-story { height: calc(68svh + var(--story-travel)); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .story-pcb { display: none; }
  .story-viewport { height: 340px; }
}
@media print {
  .home.home-scroll-ready .scroll-story { height: auto; }
  .home-scroll-ready .story-viewport { position: relative; top: auto; height: 300px; }
  .story-frame { width: 100%; }
  .story-concert-visual { transform: none; }
  .story-pcb { display: none; }
}