/* MuseMall teaser : scroll-driven storybook page, warm parchment */

:root {
  --parchment: #f3e9d2;
  --parchment-deep: #e9d9b8;
  --ink: #3a2e1e;
  --ink-soft: #6b5a40;
  --gold: #a5762a;
  --black: #0d0b08;
  --black-ink: #e9ddc0;
  --black-soft: #9c8c6a;
  --black-gold: #c9a24d;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: auto; }

body {
  background: var(--parchment);
  color: var(--ink);
  font-family: "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- 1. Video scene : torn parchment window, pinned ---------- */

.scene-video {
  position: relative;
  height: 380vh;
  height: 380svh;
}

.pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  background: var(--parchment);
  overflow: hidden;
}

.videoband {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 32vh;
  height: 32svh;
  background: #1a140c; /* behind the tear, before frames load */
}

#scrub {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Parchment mat with a torn hole revealing the video beneath.
   The mat is a parchment SVG (opaque everywhere except the torn hole);
   drop-shadow traces the torn edge for depth. */
.torn-mat {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%20100%2032'%20preserveAspectRatio%3D'none'%3E%3Cpath%20fill%3D'%23f3e9d2'%20fill-rule%3D'evenodd'%20d%3D'M0,0H100V32H0ZM3.0,3.41L5.04,4.26L7.09,3.51L9.13,2.93L11.17,3.73L13.22,2.77L15.26,2.76L17.3,4.34L19.35,4.37L21.39,3.78L23.43,2.02L25.48,3.62L27.52,2.94L29.57,2.65L31.61,3.39L33.65,3.53L35.7,3.5L37.74,3.42L39.78,4.4L41.83,4.11L43.87,3.17L45.91,2.59L47.96,3.98L50.0,4.12L52.04,4.32L54.09,2.6L56.13,4.24L58.17,4.36L60.22,2.73L62.26,4.0L64.3,2.76L66.35,4.34L68.39,2.81L70.43,1.78L72.48,4.03L74.52,3.61L76.57,2.94L78.61,2.84L80.65,2.81L82.7,2.98L84.74,4.35L86.78,3.15L88.83,2.98L90.87,4.14L92.91,2.78L94.96,2.98L97.0,3.99L96.26,4.89L96.54,6.28L96.77,7.67L97.83,9.06L97.13,10.44L96.43,11.83L97.74,13.22L96.55,14.61L97.43,16.0L96.45,17.39L97.69,18.78L96.66,20.17L96.17,21.56L96.53,22.94L96.56,24.33L97.17,25.72L96.42,27.11L96.22,28.5L94.96,28.71L92.91,29.25L90.87,27.63L88.83,28.27L86.78,27.92L84.74,28.81L82.7,28.25L80.65,29.36L78.61,28.84L76.57,26.95L74.52,27.63L72.48,28.86L70.43,27.64L68.39,28.47L66.35,28.17L64.3,27.74L62.26,28.93L60.22,28.93L58.17,29.03L56.13,28.23L54.09,29.22L52.04,28.35L50.0,29.15L47.96,28.72L45.91,28.65L43.87,27.74L41.83,29.39L39.78,28.91L37.74,28.92L35.7,28.39L33.65,27.75L31.61,27.65L29.57,28.47L27.52,28.86L25.48,28.71L23.43,27.45L21.39,28.14L19.35,27.96L17.3,29.23L15.26,28.4L13.22,28.19L11.17,27.96L9.13,29.05L7.09,29.18L5.04,28.65L3.0,27.85L3.38,27.11L2.6,25.72L2.91,24.33L2.49,22.94L3.23,21.56L2.67,20.17L3.87,18.78L1.16,17.39L4.61,16.0L3.38,14.61L2.66,13.22L0.92,11.83L2.8,10.44L3.59,9.06L1.45,7.67L3.23,6.28L3.23,4.89L3.55,3.5Z'%2F%3E%3C%2Fsvg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  filter: drop-shadow(0 12px 16px rgba(74, 55, 28, 0.42));
}

.scroll-hint {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 7vh;
  bottom: 7svh;
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-left: 0.34em;
}

.scroll-hint span {
  display: inline-block;
  animation: hint-bob 2.4s ease-in-out infinite;
}

.scroll-hint::after {
  content: "";
  display: block;
  width: 1px;
  height: 34px;
  margin: 10px auto 0;
  background: linear-gradient(var(--ink-soft), transparent);
  animation: hint-bob 2.4s ease-in-out infinite;
}

@keyframes hint-bob {
  0%, 100% { transform: translateY(0); opacity: 0.65; }
  50% { transform: translateY(7px); opacity: 1; }
}

/* ---------- 2 + 3. Roll zone : parchment rolls up, black revealed ---------- */

.roll-zone {
  position: relative;
  height: 320vh;
  height: 320svh;
}

.roll-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.black-pane {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(120% 90% at 50% 0%, #171208 0%, var(--black) 60%);
  color: var(--black-ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.black-kicker {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(26px, 5.4vw, 44px);
  color: var(--black-gold);
  margin-bottom: 18px;
  max-width: 20em;
}

.black-body {
  font-size: clamp(15px, 2.6vw, 18px);
  line-height: 1.75;
  color: var(--black-soft);
  max-width: 34em;
}

.parchment-pane {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(120% 90% at 50% 8%, #f8f0dd 0%, var(--parchment) 45%, var(--parchment-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  will-change: transform;
}

.parchment-copy {
  padding: 32px 24px 90px;
  max-width: 720px;
}

/* The rolled edge of the scroll, riding the bottom of the parchment */
.curl {
  position: absolute;
  left: -4%;
  right: -4%;
  bottom: 0;
  height: 92px;
  transform: translateY(44%);
  background: radial-gradient(115% 135% at 50% 0%,
    #fdf6e3 0%, #eedcae 30%, #a37f45 58%, #5d4222 82%, #2b1f0e 100%);
  border-radius: 50%;
  box-shadow: 0 34px 48px rgba(0, 0, 0, 0.5);
}

.eyebrow {
  font-size: 12px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  margin-bottom: 18px;
  padding-left: 0.32em;
}

.wordmark {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 700;
  font-size: clamp(44px, 9vw, 76px);
  letter-spacing: 0.01em;
  line-height: 1;
  margin-bottom: 10px;
}

.tagline {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(17px, 3.4vw, 22px);
  color: var(--ink-soft);
  margin-bottom: 26px;
}

.seed-line {
  font-size: 13px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  padding-left: 0.28em;
  margin-bottom: 30px;
}

.body-copy {
  font-size: clamp(15px, 2.6vw, 18px);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 34em;
  margin: 0 auto;
}

/* ---------- 4. Black tail + footer ---------- */

.black-tail {
  background: var(--black);
  color: var(--black-soft);
  min-height: 54vh;
  min-height: 54svh;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

footer {
  text-align: center;
  padding: 40px 16px 34px;
  font-size: 12px;
  color: var(--black-soft);
}

footer .footer-sub { margin-top: 2px; opacity: 0.75; }

/* ---------- Reduced motion : everything stacks, no scrub, no roll ---------- */

body.reduced .scene-video { height: auto; }
body.reduced .pin { position: static; height: 74vh; height: 74svh; }
body.reduced .scroll-hint { display: none; }
body.reduced .roll-zone { height: auto; }
body.reduced .roll-stage { position: static; height: auto; overflow: visible; }
body.reduced .black-pane,
body.reduced .parchment-pane { position: static; }
body.reduced .parchment-pane { min-height: 100vh; min-height: 100svh; }
body.reduced .black-pane { min-height: 92vh; min-height: 92svh; }
body.reduced .curl { display: none; }
body.reduced .scroll-hint span,
body.reduced .scroll-hint::after { animation: none; }

@media (prefers-reduced-motion: reduce) {
  .scroll-hint span,
  .scroll-hint::after { animation: none; }
}