/* ============================================================
   Tone & Timber — scroll-driven showcase
   Warm rustic luthier aesthetic. Camera flies through a shop
   into an amplifier's glowing internals.
   Architecture: JS sets normalized progress vars per act on
   #stage; CSS maps them to transforms/opacity. Reduced-motion
   falls back to plain stacked sections.
   ============================================================ */
:root {
  --wood-dark: #2b1a10;
  --wood: #4a2f1d;
  --cream: #f2e4cf;
  --amber: #ff9e3d;
  --amber-soft: #ffd089;
  --brass: #c9a24b;
  --ember: #ff6b35;
  --ink: #1a0f08;
  /* per-act progress (0..1), set by JS */
  --p-shop: 0; --p-ampIn: 0; --p-ampReveal: 0; --p-ampOut: 0;
  --p-gtrIn: 0; --p-gtrReveal: 0; --p-end: 0;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }
body {
  font-family: "Nunito Sans", system-ui, sans-serif;
  background: #100a06; color: var(--cream);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}

/* the tall scroll track + pinned stage */
.journey { height: 760vh; position: relative; }
.stage {
  position: sticky; top: 0; height: 100vh; width: 100%;
  overflow: hidden; background: radial-gradient(120% 90% at 50% 15%, #3a2418 0%, #140c07 70%);
  perspective: 1200px;
}

/* ---- atmosphere ---- */
.vignette { position: absolute; inset: 0; pointer-events: none; z-index: 40;
  background: radial-gradient(75% 65% at 50% 42%, transparent 40%, #0a0603 100%); }
.grain { position: absolute; inset: -50%; pointer-events: none; z-index: 41; opacity: 0.06;
  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='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.scene { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform, opacity; }
.scene svg { display: block; }

/* ---- ACT 1: shop (recedes as we push in) ---- */
.scene--shop { z-index: 5; }
.shopart { width: 100%; height: 100%; }
.scene--shop {
  transform: scale(calc(1 + var(--p-ampIn) * 1.6));
  opacity: calc(1 - var(--p-ampIn) * 1.1);
}

/* ---- ACT 2: the amp ---- */
.scene--amp { z-index: 10; }
.amp-exterior, .amp-interior { position: absolute; width: min(62vw, 620px); height: auto; }

/* exterior pushes toward camera and fades through */
.amp-exterior {
  transform: scale(calc(0.9 + var(--p-ampIn) * 7));
  opacity: calc(1 - var(--p-ampReveal) * 1.15);
  filter: drop-shadow(0 30px 60px #000a);
}
/* interior grows from deep inside, glows up, then flies past + fades as we leave */
.amp-interior {
  transform: scale(calc(0.25 + var(--p-ampReveal) * 1.05 + var(--p-ampOut) * 1.9));
  opacity: calc(var(--p-ampReveal) * 1.1 * (1 - var(--p-ampOut) * 1.4));
  filter: drop-shadow(0 0 40px #ff9e3d33);
}

.pilot { animation: flicker 3.4s infinite; transform-origin: center; }
@keyframes flicker { 0%,100%{opacity:1} 45%{opacity:.7} 55%{opacity:.95} }
.tube { animation: tubePulse 3s ease-in-out infinite; animation-delay: calc(var(--i) * 0.4s); transform-origin: center; }
@keyframes tubePulse { 0%,100%{opacity:.82} 50%{opacity:1} }

/* ---- copy layers ---- */
.copy { position: absolute; z-index: 30; text-align: center; padding: 0 24px;
  max-width: 760px; left: 50%; top: 50%; transform: translate(-50%,-50%);
  pointer-events: none; }
.copy .kicker { font-family: "Fraunces", serif; font-style: italic; letter-spacing: 0.04em;
  color: var(--brass); font-size: 0.95rem; margin-bottom: 14px; }
.copy h1 { font-family: "Fraunces", serif; font-weight: 700; font-size: clamp(3rem, 11vw, 8rem);
  line-height: 0.95; color: var(--cream); text-shadow: 0 6px 40px #000a; }
.copy h1 span { color: var(--amber); font-style: italic; font-weight: 500; }
.copy h2 { font-family: "Fraunces", serif; font-weight: 600; font-size: clamp(2rem, 6vw, 3.6rem);
  line-height: 1.05; text-shadow: 0 4px 30px #000c; }
.copy .lede { font-size: clamp(1.05rem, 2.4vw, 1.4rem); color: #e6d3b6; margin-top: 18px; }

/* shop copy: present at start, lifts away as we dive */
.copy--shop { opacity: calc(1 - var(--p-ampIn) * 1.6);
  transform: translate(-50%, calc(-50% - var(--p-ampIn) * 80px)) scale(calc(1 - var(--p-ampIn) * 0.15)); }
.cue { margin-top: 40px; font-size: 0.8rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: #b79b74; display: inline-flex; align-items: center; gap: 12px; }
.cue span { width: 1px; height: 34px; background: linear-gradient(#b79b74, transparent);
  position: relative; overflow: hidden; }
.cue span::after { content:""; position:absolute; top:-34px; left:0; width:1px; height:34px;
  background: var(--amber); animation: cueDrop 1.8s ease-in-out infinite; }
@keyframes cueDrop { to { transform: translateY(68px); } }

/* amp copy: fades in during reveal, sits low so it doesn't cover the tubes,
   then fades out as we leave the amp */
.copy--amp { top: auto; bottom: 8vh; transform: translate(-50%, 0);
  opacity: calc((var(--p-ampReveal) - 0.15) * 1.6 * (1 - var(--p-ampOut) * 1.5)); }
.copy--amp .kicker { color: var(--amber); }

/* ---- ACT 3: the guitar ---- */
.scene--gtr { z-index: 12; }
.gtr-exterior, .gtr-interior { position: absolute; height: min(84vh, 620px); width: auto; }
/* soundboard flies toward us; the dark centered soundhole becomes the doorway */
.gtr-exterior {
  transform: scale(calc(0.55 + var(--p-gtrIn) * 3.6));
  opacity: calc(var(--p-gtrIn) * 1.5 * (1 - var(--p-gtrReveal) * 1.3));
  filter: drop-shadow(0 30px 60px #000a);
}
/* interior (bracing + label) grows from the hole, then fades at the finale */
.gtr-interior {
  transform: scale(calc(0.32 + var(--p-gtrReveal) * 1.0));
  opacity: calc(var(--p-gtrReveal) * 1.15 * (1 - var(--p-end) * 1.35));
  filter: drop-shadow(0 0 40px #ffb34722);
}
.copy--gtr { top: auto; bottom: 8vh; transform: translate(-50%, 0);
  opacity: calc((var(--p-gtrReveal) - 0.15) * 1.6 * (1 - var(--p-end) * 1.4)); }
.copy--gtr .kicker { color: var(--amber); }
.tags { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 22px; }
.tags li { font-family: "Fraunces", serif; font-size: 0.92rem; color: var(--cream);
  border: 1px solid #c9a24b55; background: #1a0f0899; border-radius: 999px; padding: 8px 18px;
  backdrop-filter: blur(4px); }

/* finale */
.copy--end { opacity: var(--p-end); transform: translate(-50%, calc(-50% + (1 - var(--p-end)) * 40px)); }
.repair-btn { pointer-events: auto; display: inline-block; margin-top: 26px; font-family: "Fraunces", serif;
  font-weight: 600; font-size: 1.05rem; color: var(--ink); background: linear-gradient(180deg, var(--amber-soft), var(--amber));
  padding: 14px 30px; border-radius: 12px; box-shadow: 0 12px 40px #ff9e3d40; }
.repair-btn:hover { transform: translateY(-2px); }
.disclaimer { font-size: 0.78rem; color: #8c765a; margin-top: 34px; max-width: 460px; margin-left: auto; margin-right: auto; }

/* scroll progress bar */
.progress { position: fixed; left: 0; bottom: 0; height: 3px; width: 0; z-index: 50;
  background: linear-gradient(90deg, var(--brass), var(--amber)); box-shadow: 0 0 14px #ff9e3d99; }

/* ---- reduced motion / no-JS fallback: plain stacked reveal ---- */
@media (prefers-reduced-motion: reduce) {
  .journey { height: auto; }
  .stage { position: static; height: auto; overflow: visible; }
  .scene { position: relative; inset: auto; min-height: 60vh; }
  .amp-exterior, .amp-interior, .gtr-exterior, .gtr-interior {
    position: relative; transform: none; opacity: 1; width: min(80vw, 460px); height: auto; }
  .amp-exterior, .gtr-exterior { display: none; }
  .copy { position: relative; transform: none; opacity: 1; left: auto; top: auto; margin: 40px auto; }
  .copy--amp, .copy--gtr { bottom: auto; }
  .scene--shop { transform: none; opacity: 1; }
}