/* ============================================================
   TrackMix — "Warm Pop" design system
   Warm Analog soul (cream/walnut/amber, tactile) + Tape Pop friendliness
   (rounded shapes, coral/teal accents, bouncy micro-interactions)
   ============================================================ */
/* Self-hosted fonts (no third-party requests) */
@import url('../fonts/fonts.css');

:root{
  /* palette */
  --paper:#e9dec9; --paper-2:#e0d3b9; --panel:#f4ecdc;
  --ink:#2a2018; --ink-soft:#5b4d3e;
  --walnut:#6a4527; --walnut-dk:#4d3119;
  --amber:#e08a2b; --amber-2:#f3a83f; --amber-glow:#ffb24d;
  --coral:#ff6b5e; --coral-dk:#d8473b;   /* Tape-Pop accent */
  --teal:#23c5b5; --teal-dk:#1b9e90;      /* secondary pop */
  --metal-1:#dcd7cc; --metal-2:#bcb4a4;
  --vu-green:#7fae54;
  --line:rgba(42,32,24,.14);
  --shadow-soft:0 10px 24px rgba(80,56,28,.12);
  --shadow-pop:0 9px 0 rgba(50,44,78,.10);
  --radius:16px;
  --max:1180px;
  --font-display:'Bricolage Grotesque',sans-serif;
  --font-body:'Hanken Grotesk',sans-serif;
  --font-mono:'Space Mono',monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-body); color:var(--ink); line-height:1.5;
  min-height:100vh; position:relative; overflow-x:hidden;
  background:
    radial-gradient(1200px 600px at 78% -10%, rgba(240,168,63,.16), transparent 60%),
    radial-gradient(900px 700px at 8% 110%, rgba(35,197,181,.10), transparent 55%),
    linear-gradient(160deg,#ece2cf 0%, #e3d6bd 100%);
}
/* film-grain atmosphere */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:9999; 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='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mono{font-family:var(--font-mono);letter-spacing:.04em}
.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
a{color:var(--walnut)}

/* ---------- NAV ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;padding:20px 0;position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink)}
.brand .reel{width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 50% 50%,#2a2018 0 17%,transparent 18%),
    conic-gradient(from 0deg,#3a2c1f,#5b4633,#3a2c1f,#5b4633,#3a2c1f);
  box-shadow:inset 0 0 0 3px #d8cbb0, 0 2px 4px rgba(0,0,0,.3);position:relative;animation:spin 6s linear infinite}
.brand .reel::before,.brand .reel::after{content:"";position:absolute;inset:0;margin:auto;width:5px;height:5px;border-radius:50%;background:#d8cbb0}
.brand .reel::before{transform:translate(8px,0)} .brand .reel::after{transform:translate(-8px,0)}
@keyframes spin{to{transform:rotate(360deg)}}
.brand b{font-family:var(--font-display);font-weight:800;font-size:1.3rem;letter-spacing:-.02em}
.brand b span{color:var(--coral)}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.94rem;opacity:.78}
.nav-links a:hover{opacity:1;color:var(--coral)}

.badge{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:700;
  background:rgba(35,197,181,.15);color:var(--teal-dk);border:1.5px solid rgba(35,197,181,.4);
  padding:7px 12px;border-radius:30px}
.badge .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal)}

/* ---------- BUTTONS ---------- */
.btn{font-family:var(--font-body);font-weight:600;font-size:1rem;border:none;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:14px 26px;border-radius:40px;transition:.12s;white-space:nowrap}
.btn-primary{background:var(--coral);color:#fff;box-shadow:0 6px 0 var(--coral-dk)}
.btn-primary:active{transform:translateY(4px);box-shadow:0 2px 0 var(--coral-dk)}
.btn-amber{background:linear-gradient(180deg,var(--amber-2),var(--amber));color:#2a1c08;box-shadow:0 6px 0 #b96d18}
.btn-amber:active{transform:translateY(4px);box-shadow:0 2px 0 #b96d18}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:0 6px 0 rgba(50,44,78,.12)}
.btn-ghost:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(50,44,78,.12)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- CARDS / PANELS ---------- */
.panel{background:linear-gradient(180deg,var(--panel),#e7dbc4);border:1px solid rgba(255,255,255,.6);
  border-radius:var(--radius);box-shadow:var(--shadow-soft)}
.kicker{font-family:var(--font-mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);font-weight:700}

/* ---------- AD SLOTS ---------- */
.ad{border:1.5px dashed rgba(106,69,39,.32);border-radius:14px;background:rgba(255,255,255,.28);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--ink-soft)}
.ad .lbl{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7}
.ad .sub{font-size:.76rem;opacity:.6}

/* ---------- FOOTER ---------- */
.footer{margin-top:60px;border-top:1px solid var(--line);padding:30px 0 50px;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;color:var(--ink-soft);font-size:.86rem}
.footer a{color:var(--ink-soft);text-decoration:none;margin-right:16px}
.footer a:hover{color:var(--coral)}
.footer .mono{font-size:.72rem;letter-spacing:.08em;color:var(--walnut);font-weight:700}

/* ---------- TYPE HELPERS ---------- */
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.04}
.lede{font-size:1.1rem;line-height:1.55;color:var(--ink-soft)}

/* ---------- CONTENT PAGES (legal/about) ---------- */
.doc{max-width:760px;margin:0 auto;padding:40px 26px 20px}
.doc h1{font-size:2.2rem;margin-bottom:8px}
.doc h2{font-size:1.25rem;margin:28px 0 10px;color:var(--walnut)}
.doc p,.doc li{color:var(--ink-soft);margin-bottom:12px}
.doc ul{padding-left:22px}
.doc .meta{font-family:var(--font-mono);font-size:.78rem;color:var(--ink-soft);opacity:.7;margin-bottom:24px}

/* reveal-on-load */
@keyframes rise{to{opacity:1;transform:translateY(0)}}
.rise{opacity:0;transform:translateY(18px);animation:rise .7s forwards}
.d1{animation-delay:.05s}.d2{animation-delay:.15s}.d3{animation-delay:.27s}.d4{animation-delay:.39s}.d5{animation-delay:.5s}

@media(max-width:760px){
  .nav-links .hide-sm{display:none}
}

/* ============================================================
   SIGNATURE ANIMATIONS (a distinct motif per page)
   ============================================================ */
@keyframes eqbar{0%,100%{transform:scaleY(.26)}50%{transform:scaleY(1)}}
@keyframes pulsering{0%{transform:scale(.4);opacity:.55}100%{transform:scale(1.9);opacity:0}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes spin-slow{to{transform:rotate(360deg)}}

/* equalizer bars */
.eq{display:flex;align-items:flex-end;justify-content:center;gap:5px}
.eq i{display:block;width:7px;height:46px;border-radius:4px;transform-origin:bottom;
  background:linear-gradient(180deg,var(--amber-glow),var(--amber));animation:eqbar 1.1s ease-in-out infinite}
.eq i:nth-child(1){animation-delay:-.20s}
.eq i:nth-child(2){animation-delay:-.55s}
.eq i:nth-child(3){animation-delay:-.05s}
.eq i:nth-child(4){animation-delay:-.78s}
.eq i:nth-child(5){animation-delay:-.35s}
.eq i:nth-child(6){animation-delay:-.62s}
.eq i:nth-child(7){animation-delay:-.14s}

/* expanding sound rings (reused by several motifs) */
.pulse-rings{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.pulse-rings span{position:absolute;width:88px;height:88px;border-radius:50%;border:2px solid var(--coral);opacity:0;animation:pulsering 2.6s ease-out infinite}
.pulse-rings span:nth-child(2){animation-delay:.85s}
.pulse-rings span:nth-child(3){animation-delay:1.7s}

/* page-top motif wrapper */
.motif{position:relative;width:120px;height:110px;margin:0 auto 10px;display:grid;place-items:center}

/* vinyl record (About) */
.vinyl{width:92px;height:92px;border-radius:50%;animation:spin-slow 7s linear infinite;
  background:radial-gradient(circle at 50% 50%,var(--coral) 0 12%,#2a2018 13% 16%,#3a2c1f 17%,#241a12 18%);
  box-shadow:0 6px 14px rgba(0,0,0,.25),inset 0 0 0 1px rgba(255,255,255,.06)}
.vinyl::after{content:"";position:absolute;inset:0;margin:auto;width:8px;height:8px;border-radius:50%;background:#e9dec9}
.vinyl-grooves{position:absolute;inset:0;margin:auto;width:92px;height:92px;border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 3px,rgba(0,0,0,.18) 3px 4px);pointer-events:none}

/* shield (Privacy) */
.shield svg{width:64px;height:64px;animation:floaty 3.4s ease-in-out infinite}

/* signal dot (Contact) */
.signal .dot{width:18px;height:18px;border-radius:50%;background:var(--coral);box-shadow:0 0 14px var(--coral)}

/* per-tool animated icon badge (same icon as the homepage card, in motion) */
.tool-badge{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;margin-bottom:14px;
  background:linear-gradient(180deg,#fff7e6,#efe2c6);box-shadow:inset 0 1px 2px #fff,0 3px 6px rgba(0,0,0,.12)}
.tool-badge svg{width:30px;height:30px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes icon-pulse{0%,100%{transform:scaleY(.6)}50%{transform:scaleY(1.12)}}
@keyframes icon-swap-a{0%,100%{transform:translateX(0)}50%{transform:translateX(2.4px)}}
@keyframes icon-swap-b{0%,100%{transform:translateX(0)}50%{transform:translateX(-2.4px)}}
.badge-wave path{transform-box:fill-box;transform-origin:center;animation:icon-pulse 1.5s ease-in-out infinite}
.badge-swap .a{transform-box:fill-box;animation:icon-swap-a 1.7s ease-in-out infinite}
.badge-swap .b{transform-box:fill-box;animation:icon-swap-b 1.7s ease-in-out infinite}
@keyframes icon-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}}
.badge-extract .note{transform-box:fill-box;transform-origin:center;animation:icon-bob 1.6s ease-in-out infinite}
@keyframes icon-join-l{0%,100%{transform:translateX(0)}50%{transform:translateX(1.7px)}}
@keyframes icon-join-r{0%,100%{transform:translateX(0)}50%{transform:translateX(-1.7px)}}
.badge-join .jl{transform-box:fill-box;animation:icon-join-l 1.7s ease-in-out infinite}
.badge-join .jr{transform-box:fill-box;animation:icon-join-r 1.7s ease-in-out infinite}
@keyframes icon-mic{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.86)}}
.badge-mic .cap{transform-box:fill-box;transform-origin:center;animation:icon-mic 1.4s ease-in-out infinite}

/* cross-tool "more tools" strip — internal linking (D32/P2) */
.more-tools{margin:30px 0 8px;padding-top:22px;border-top:1px solid var(--line)}
.more-tools h2{font-family:var(--font-display);font-weight:700;font-size:1.1rem;text-align:center;margin-bottom:14px}
.more-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.more-grid a{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);background:linear-gradient(180deg,var(--panel),#e7dbc4);border:1px solid rgba(255,255,255,.6);border-radius:14px;padding:12px;box-shadow:var(--shadow-soft);transition:.14s}
.more-grid a:hover{transform:translateY(-3px);box-shadow:0 12px 22px rgba(80,56,28,.16)}
.more-grid .mi{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:linear-gradient(180deg,#fff7e6,#efe2c6);box-shadow:inset 0 1px 2px #fff,0 2px 5px rgba(0,0,0,.1)}
.more-grid .mi svg{width:22px;height:22px;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.more-grid b{font-family:var(--font-display);font-size:.9rem;display:block;line-height:1.1}
.more-grid small{font-size:.72rem;color:var(--ink-soft)}
@media(max-width:900px){.more-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.more-grid{grid-template-columns:1fr}}

/* tool how-to + FAQ content (on-page SEO — D32/P1) */
.tool-info{margin:28px 0 4px}
.tool-info .block{background:linear-gradient(180deg,var(--panel),#e7dbc4);border:1px solid rgba(255,255,255,.6);border-radius:16px;padding:22px 24px;box-shadow:var(--shadow-soft);margin-bottom:16px}
.tool-info h2{font-family:var(--font-display);font-weight:700;font-size:1.15rem;margin-bottom:12px}
.tool-info ol{margin:0;padding-left:1.15rem;display:flex;flex-direction:column;gap:9px}
.tool-info ol li{padding-left:3px;line-height:1.5}
.tool-info .faq>div+div{margin-top:13px}
.tool-info .faq h3{font-family:var(--font-display);font-weight:700;font-size:.96rem;margin-bottom:3px}
.tool-info .faq p{color:var(--ink-soft);font-size:.9rem;margin:0;line-height:1.55}

/* button click delight — pop + sparkle burst (spark.js; reduced-motion no-op in JS) */
@keyframes tm-pop{0%{transform:scale(1)}30%{transform:scale(.95)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
.tm-pop{animation:tm-pop .32s ease}
.tm-spark{position:fixed;width:7px;height:7px;border-radius:50%;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);animation:tm-spark .52s ease-out forwards}
@keyframes tm-spark{0%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.3)}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}