/* ==========================================================================
   栢僻 BAIPI — cinematic layer v2
   CSS transitions only: no scroll hijack, no rAF loops, no GSAP.
   Restores the linkage: scene grading, wipes, chapter numerals, marquee.
   ========================================================================== */

.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(90% 70% at 70% 0%, rgba(30, 68, 44, .55), transparent 62%),
    linear-gradient(180deg, #0b1410 0%, #0a120e 100%);
  transition: background 1.1s cubic-bezier(.22, 1, .36, 1);
}
body[data-scene="paper"] .scene {
  background:
    radial-gradient(90% 70% at 20% 0%, rgba(198, 226, 122, .16), transparent 60%),
    linear-gradient(180deg, #f2efe4 0%, #e9e4d4 100%);
}
body[data-scene="cellar"] .scene {
  background:
    radial-gradient(80% 60% at 50% 10%, rgba(22, 54, 36, .7), transparent 65%),
    linear-gradient(180deg, #0a110d 0%, #060c09 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero-bars span {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  background: #050b08;
  z-index: 3;
  transition: height 1.6s cubic-bezier(.22, 1, .36, 1) .2s;
}
.hero-bars .top { top: 0; }
.hero-bars .bottom { bottom: 0; }
body.is-ready .hero-bars span { height: 5.2vh; }
.hero-video, .hero-poster { animation: push 26s ease-in-out infinite alternate; }
@keyframes push {
  from { transform: scale(1.02); }
  to { transform: scale(1.1); }
}

.section-head .num {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.section-head .h2 {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s var(--ease) .08s, transform .8s var(--ease) .08s;
}
.section-head .note { opacity: 0; transition: opacity 1s var(--ease) .2s; }
.section-head { position: relative; border-bottom-color: transparent !important; }
.section-head::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 100%;
  background: var(--moss);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) .1s;
}
body[data-scene="paper"] .section-head::before { background: var(--moss-2); }
.section-head.is-in .num,
.section-head.is-in .h2 { opacity: 1; transform: none; }
.section-head.is-in .note { opacity: 1; }
.section-head.is-in::before { transform: scaleX(1); }

.tile-media, .rail-media, .bili-shot, .portrait img, .work-plate {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.1s cubic-bezier(.22, 1, .36, 1);
}
.is-in .tile-media, .tile-media.is-in,
.is-in .rail-media, .rail-media.is-in,
.is-in .bili-shot, .bili-shot.is-in,
.is-in .portrait img, .portrait img.is-in,
.work-plate.is-in {
  clip-path: inset(0 0 0 0);
}

.chapter {
  position: absolute;
  right: var(--pad);
  bottom: clamp(14px, 2.6vh, 34px);
  font-family: var(--latin);
  font-weight: 500;
  font-size: clamp(5rem, 13vw, 12rem);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239, 236, 224, .14);
  pointer-events: none;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s var(--ease), transform 1.2s var(--ease);
}
body[data-scene="paper"] .chapter { -webkit-text-stroke-color: rgba(11, 20, 16, .16); }
@media (max-width: 900px) { .chapter { display: none; } }
.chapter.is-in { opacity: 1; transform: none; }

.marquee {
  overflow: hidden;
  padding-block: clamp(12px, 2vh, 22px);
  border-block: 1px solid var(--line);
}
.marquee-track { display: flex; width: max-content; animation: slide 46s linear infinite; }
.marquee-track span {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2.4vw, 2rem);
  color: rgba(239, 236, 224, .22);
  white-space: nowrap;
  padding-right: 1.6em;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }

.widget-rope { transition: height .5s cubic-bezier(.34, 1.56, .64, 1); }
.widget.is-dragging .widget-rope { transition: none; }
.widget.is-returning { transition: transform .62s cubic-bezier(.34, 1.56, .64, 1); }
.widget.is-wobble .widget-art { animation: wobble .7s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes wobble {
  0% { transform: rotate(0); }
  30% { transform: rotate(7deg); }
  60% { transform: rotate(-5deg); }
  100% { transform: rotate(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-bars span { height: 0 !important; }
  .hero-video, .hero-poster { animation: none; }
  .section-head .num, .section-head .h2, .section-head .note, .chapter { opacity: 1; transform: none; }
  .section-head::before { transform: scaleX(1); }
  .tile-media, .rail-media, .bili-shot, .portrait img, .work-plate { clip-path: none; }
  .marquee-track { animation: none; }
  .grain { display: none; }
}