/* ============================================================================
   Tendril — "Greenhouse at night" exploration pass
   ----------------------------------------------------------------------------
   Layered ON TOP of style.css. Only overrides mood: color, depth, typography,
   section framing, and motion. The interactive pedal emulator's own geometry
   (.pedal and children) is left almost entirely alone — it already looks like
   a lit object; we just change the room it sits in.

   Revert = delete this file's <link> and js/ambient.js's <script> in index.html.
   ========================================================================== */

:root {
  --night:        #030d08;   /* near-black green base — lets surfaces float  */
  --surface:      #10291b;   /* card face: a clear step up from --night      */
  --surface-2:    #163523;   /* card face, hover / emphasis                 */
  --raise-edge:   inset 0 1px 0 rgba(180, 255, 224, 0.10); /* top highlight  */
  --moss:         #1c6636;
  --moss-deep:    #123c22;
  --phosphor:     #7dffd8;   /* the OLED screen's light — the glow accent   */
  --phosphor-dim: #3f9e86;
  --cream:        #f4ecd8;
  --cream-dim:    #cdbf9f;
  --amber:        #e6b877;   /* the one warm light source (wood plinth)     */
  --blossom:      #f3c6c9;   /* apple blossom — a single whisper of it      */

  --edge:         rgba(125, 255, 216, 0.14);
  --edge-soft:    rgba(244, 236, 216, 0.08);

  --display: "Fraunces", Georgia, serif;
}

/* ---------- base / ambient room ---------- */

body {
  /* beat wood.js's inline light-maple background; paint a dark botanical room
     with two faint light sources instead (cool phosphor top, warm amber pool) */
  background-image:
    radial-gradient(120% 70% at 50% -15%, rgba(28, 102, 54, 0.18), transparent 55%),
    radial-gradient(90% 55% at 50% 110%, rgba(230, 184, 119, 0.06), transparent 70%) !important;
  background-color: var(--night) !important;
  background-attachment: fixed !important;
  background-size: auto !important;
  color: var(--cream);
}

/* the ambient LFO canvas painted by js/ambient.js — sits behind everything,
   above the flat background */
#ambientWave {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* lift all real content above the ambient layer */
body > header,
body > main,
body > footer,
.success-banner { position: relative; z-index: 1; }
.site-header { z-index: 20; }

/* ---------- header ---------- */

.site-header {
  background: rgba(8, 26, 16, 0.62) !important;
  border-bottom: 1px solid var(--edge);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.brand { color: var(--cream); }
.brand-mark .apple-mark { color: var(--phosphor); }
.site-nav a { opacity: 0.7; color: var(--cream); }
.site-nav a:hover { opacity: 1; color: var(--phosphor); }

.nav-cta {
  background: var(--phosphor);
  color: var(--night);
  box-shadow: 0 0 0 1px rgba(125, 255, 216, 0.4), 0 6px 18px rgba(125, 255, 216, 0.22);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.nav-cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--phosphor), 0 10px 26px rgba(125, 255, 216, 0.35); }

/* ---------- hero ---------- */

.hero { max-width: 820px; }

.eyebrow {
  color: var(--phosphor-dim);
  letter-spacing: 0.32em;
}

.wordmark {
  color: var(--cream);
  /* the wordmark is the wordmark — let it glow like the screen does */
  text-shadow:
    0 0 22px rgba(125, 255, 216, 0.35),
    0 0 60px rgba(125, 255, 216, 0.14);
}

.hero-tendril {
  display: block;
  width: min(320px, 70%);
  height: auto;
  margin: 2px auto 6px;
  color: var(--phosphor);
  filter: drop-shadow(0 0 6px rgba(125, 255, 216, 0.45));
  overflow: visible;
}

.tagline {
  color: var(--cream-dim);
  max-width: 600px;
  font-size: clamp(1.02rem, 2vw, 1.24rem);
}
/* a hair of editorial contrast — italic Fraunces lead-in feel via first line
   handled in markup elsewhere; keep tagline plain but roomy */

/* buttons */
.btn-primary {
  background: var(--phosphor);
  color: var(--night);
  font-weight: 600;
  box-shadow: 0 0 0 1px rgba(125, 255, 216, 0.35), 0 10px 26px rgba(125, 255, 216, 0.18);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--phosphor), 0 14px 32px rgba(125, 255, 216, 0.4); }

.btn-ghost {
  background: rgba(244, 236, 216, 0.04);
  color: var(--cream);
  border-color: var(--edge);
  backdrop-filter: blur(4px);
}
.btn-ghost:hover { border-color: var(--phosphor); background: rgba(125, 255, 216, 0.06); color: var(--cream); }

/* ---------- section headings: Fraunces display ---------- */

.features h2,
.story h2,
.buy h2 {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--cream);
  font-size: clamp(2rem, 4.5vw, 3.1rem);
}

.features-subhead { color: var(--phosphor-dim); }

/* a thin phosphor waveform rule at the top of the major sections — the LFO,
   used as structure. Drawn from an inline SVG stroke, tinted via mask. */
.features::before,
.story::before,
.buy::before {
  content: "";
  display: block;
  height: 16px;
  width: min(240px, 60%);
  margin: 0 auto clamp(24px, 5vw, 44px);
  background: var(--phosphor);
  opacity: 0.55;
  /* one full seamless wavelength (120px) tiled across the divider, then the
     mask position is slid by exactly one wavelength on a loop — the crests
     travel sideways so the wave gently undulates */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M0 8 C 15 8 15 2 30 2 C 45 2 45 8 60 8 C 75 8 75 14 90 14 C 105 14 105 8 120 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'%3E%3Cpath d='M0 8 C 15 8 15 2 30 2 C 45 2 45 8 60 8 C 75 8 75 14 90 14 C 105 14 105 8 120 8' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x center;
  -webkit-mask-size: 120px 16px;
          mask-size: 120px 16px;
  filter: drop-shadow(0 0 5px rgba(125, 255, 216, 0.5));
  animation: dividerWave 7s linear infinite;
}

@keyframes dividerWave {
  from { -webkit-mask-position: 0 center;     mask-position: 0 center; }
  to   { -webkit-mask-position: 120px center; mask-position: 120px center; }
}

/* ---------- the pedal on a lit plinth ---------- */

/* warm pool of light under the pedal — the one warm thing in a cool room */
.wood-stage::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 44%;
  width: min(560px, 88%);
  height: 78%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(230, 184, 119, 0.20), transparent 72%);
  pointer-events: none;
  z-index: 0;
}
.wood-stage > * { position: relative; z-index: 1; }

/* Darker, less diffuse enclosure. The base .pedal background had a concentric-
   ring texture and a strong top sheen — drop the rings, cut the sheen, deepen
   the green, and lay the procedural grain (js/ambient.js) over it so the
   surface reads dark and textured rather than flatly lit. */
.pedal {
  background:
    radial-gradient(130% 150% at 20% -12%, rgba(255, 255, 255, 0.10), transparent 42%),
    radial-gradient(120% 140% at 88% 122%, rgba(0, 0, 0, 0.55), transparent 58%),
    var(--pedal-grain, none),
    linear-gradient(158deg, #145229 0%, #0e3f20 48%, #072414 100%);
  background-size: cover, cover, 100% 100%, cover;
  background-repeat: no-repeat;
  box-shadow:
    0 42px 72px rgba(0, 0, 0, 0.72),     /* big soft drop                     */
    0 0 46px 8px rgba(0, 0, 0, 0.5),      /* dark halo — lifts it off the room */
    0 4px 0 rgba(0, 0, 0, 0.35),
    inset 0 0 0 2px rgba(0, 0, 0, 0.4),
    inset 0 2px 5px rgba(255, 255, 255, 0.08),
    0 0 55px rgba(125, 255, 216, 0.08);
}

/* ---- metal-flake glitter finish -------------------------------------------
   Two fine fleck fields twinkle out of phase so individual specks flare and
   fade like real glitter catching the light, rather than the whole surface
   pulsing. Field A (::before) sits behind the controls; field B (::after,
   overriding the base speckle) sits in front, kept fainter so the dust on the
   knobs/enclosure stays subtle. The OLED is lifted above both (below) so no
   glitter ever falls across the screen. Both layers are non-interactive. */

.pedal::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  background-image: var(--glitter-a, none);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.85;
  animation: glitterA 2.8s ease-in-out infinite;
}

/* field B is a second, offset fleck set (js/ambient.js) that cross-fades
   against field A so the twinkle never lands on both at once. It replaces the
   base speckle's dot background. */
.pedal::after {
  background-image: var(--glitter-b, none);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.7;
  animation: glitterB 2.3s ease-in-out infinite;
}

@keyframes glitterA {
  0%, 100% { opacity: 0.45; }
  50%      { opacity: 0.9;  }
}
@keyframes glitterB {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 0.35; }
}

/* keep the OLED (and its bezel) clear of the front glitter field */
.p-screen { z-index: 3; }

/* white silkscreen — matches the finish planned for the first production run
   (the base look's cream/gold labels become white here) */
.p-label            { color: rgba(255, 255, 255, 0.82); }
.p-wordmark         { color: rgba(255, 255, 255, 0.92); }
.p-mode-label:hover,
.p-mode-label:focus-visible { color: #fff; }
.p-logo,
.p-logo .apple-mark { color: rgba(255, 255, 255, 0.9); }
.p-wave-face .p-knob-tick { background: #fff; }
.wave-tag           { color: rgba(255, 255, 255, 0.5); }
.wave-tag.active    { color: #fff; }
.wave-tag-mode      { color: rgba(255, 255, 255, 0.5); }
.wave-tag-mode.active { color: #fff; }

.play-intro { color: var(--cream-dim); }
.play-intro strong, .stage-hint strong { color: var(--cream); }

/* keep the warm-paper cards (they read like the pedal's cream silkscreen) but
   let them sit convincingly in the dark with a warm rim + drop */
.stage-hint,
.control-card {
  box-shadow:
    0 24px 44px rgba(0, 0, 0, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    0 0 0 1px rgba(0, 0, 0, 0.3);
}

.scale-caption { color: var(--cream-dim); }
.zoom-btn {
  background: rgba(244, 236, 216, 0.06);
  color: var(--cream);
  border-color: var(--edge);
}
.zoom-btn:hover { border-color: var(--phosphor); background: rgba(125, 255, 216, 0.08); }
.zoom-btn[aria-pressed="true"] .zoom-btn-dot { background: var(--phosphor); box-shadow: 0 0 6px var(--phosphor); }

.midi-status { color: var(--phosphor-dim); background: rgba(125, 255, 216, 0.10); }

/* ---------- feature cards: little lit panels ---------- */

.feature {
  background: linear-gradient(165deg, var(--surface), #0b2015);
  border: 1px solid var(--edge);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.55), var(--raise-edge);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  backdrop-filter: none;
}
.feature:hover {
  transform: translateY(-3px);
  border-color: var(--phosphor-dim);
  background: linear-gradient(165deg, var(--surface-2), #0d2418);
  box-shadow: 0 26px 54px rgba(0, 0, 0, 0.6), var(--raise-edge), 0 0 34px rgba(125, 255, 216, 0.12);
}
.feature h3 { color: var(--cream); font-size: 1.08rem; }
.feature p { color: var(--cream-dim); }

.feature-icon { background: rgba(125, 255, 216, 0.10); }
.feature-icon::before { background: var(--phosphor); }

.why-copy p { color: var(--cream-dim); }
.why-copy strong { color: var(--cream); }

/* ---------- story ---------- */

.story p { color: var(--cream-dim); }
.story strong { color: var(--cream); }
.story-badge {
  background: linear-gradient(165deg, var(--surface), #0b2015);
  border: 1px solid var(--edge);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.5), var(--raise-edge);
}
.story-badge-num { color: var(--phosphor); font-family: var(--display); font-style: italic; }

/* ---------- capture blocks ---------- */

.capture {
  background: linear-gradient(165deg, var(--surface), #0a1e13);
  border: 1px solid var(--edge);
  box-shadow: 0 22px 46px rgba(0, 0, 0, 0.6), var(--raise-edge), 0 0 40px rgba(125, 255, 216, 0.06);
  backdrop-filter: none;
}
.capture-title { color: var(--cream); font-family: var(--display); font-style: italic; font-weight: 500; font-size: 1.4rem; }
.capture-body { color: var(--cream-dim); }

/* ---------- buy card ---------- */

.buy-card {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(28, 102, 54, 0.55), transparent 60%),
    linear-gradient(165deg, #123c22 0%, #06180e 100%);
  border: 1px solid var(--edge);
  box-shadow: 0 30px 64px rgba(0, 0, 0, 0.5), 0 0 60px rgba(125, 255, 216, 0.08);
}
.buy-eyebrow { color: var(--phosphor); letter-spacing: 0.2em; }
.buy-price { color: var(--cream); }
.buy-price span { color: var(--cream-dim); }
.buy-list { color: var(--cream-dim); }
.buy-list li::before { background: var(--phosphor); box-shadow: 0 0 6px rgba(125, 255, 216, 0.6); }
.buy-note { color: var(--cream-dim); }

/* ---------- footer ---------- */

.site-footer { color: var(--cream-dim); border-top: 1px solid var(--edge-soft); }
.footer-mark { color: var(--cream); }
.footer-mark .apple-mark { color: var(--phosphor); }
.site-footer a { color: var(--phosphor-dim); }
.site-footer a:hover { color: var(--phosphor); }

/* ---------- success banner ---------- */

.success-banner { background: var(--moss); }

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .btn-primary:hover, .nav-cta:hover, .feature:hover { transform: none; }
  /* hold the glitter and divider waves still, at a mid state */
  .pedal::before { animation: none; opacity: 0.85; }
  .pedal::after  { animation: none; opacity: 0.6; }
  .features::before, .story::before, .buy::before { animation: none; }
}