/* ============================================================================
   DoReDog — Cinematic Letter Notes
   Design system + components. Pure CSS, no build step.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ---------- Tokens ---------- */
:root{
  --bg:            #06060b;
  --bg-2:          #0a0a13;
  --bg-3:          #101020;
  --surface:       rgba(255,255,255,.035);
  --surface-2:     rgba(255,255,255,.055);
  --surface-3:     rgba(255,255,255,.08);
  --border:        rgba(255,255,255,.09);
  --border-2:      rgba(255,255,255,.16);

  --text:          #f5f4fc;
  --text-dim:      #b3b1c7;
  --text-mute:     #75738c;

  --gold:          #f4c15d;
  --gold-2:        #ffdf9e;
  --violet:        #8b6bff;
  --violet-2:      #b7a3ff;
  --cyan:          #4dd0ff;
  --rose:          #ff5d8f;

  /* Octave spectrum — the functional colour code from the reading guide */
  --o2:            #ff54b2;  /* magenta */
  --o3:            #35e08c;  /* green   */
  --o4:            #ff5f64;  /* red     */
  --o5:            #f6b73f;  /* gold    */
  --o6:            #4fa3ff;  /* blue    */

  --font-display:  'Fraunces', 'Times New Roman', serif;
  --font-body:     'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --font-mono:     'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius:        18px;
  --radius-lg:     28px;
  --radius-sm:     10px;

  --shadow:        0 24px 60px -20px rgba(0,0,0,.7);
  --shadow-glow:   0 0 0 1px var(--border), 0 30px 80px -30px rgba(139,107,255,.4);

  --container:     1200px;
  --ease:          cubic-bezier(.16,1,.3,1);
  --ease-out:      cubic-bezier(.22,1,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; scrollbar-width:none; }
/* Hide the page scrollbar (still fully scrollable). It was showing up beside the player's keyboard and
   broke the cinematic look; scrolling with wheel/trackpad/keys still works everywhere. */
html::-webkit-scrollbar, body::-webkit-scrollbar{ width:0; height:0; display:none; }
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  font-weight:400;
  letter-spacing:.005em;
  overflow-x:hidden;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input,textarea,select{ font-family:inherit; }
/* iOS Safari auto-zooms into any focused input whose font-size is < 16px and never zooms back out — the
   "tapping search zooms the page and stays zoomed" bug. Force 16px on touch devices so no field triggers it. */
@media (pointer:coarse), (max-width:820px){ input:not([type=range]), select, textarea{ font-size:16px !important; } }
ul{ list-style:none; }
::selection{ background:rgba(139,107,255,.35); color:#fff; }

/* ---------- Ambient cinematic background ---------- */
.bg-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none; }
.bg-aurora{
  position:fixed; inset:-20% -10% auto -10%; height:140vh; z-index:-2; pointer-events:none;
  background:
    radial-gradient(45% 40% at 18% 12%, rgba(139,107,255,.28), transparent 60%),
    radial-gradient(40% 35% at 82% 8%,  rgba(77,208,255,.20), transparent 60%),
    radial-gradient(50% 45% at 60% 70%, rgba(244,193,93,.14), transparent 62%),
    radial-gradient(45% 40% at 10% 80%, rgba(255,93,143,.14), transparent 60%);
  filter:blur(30px);
  animation:auroraShift 24s ease-in-out infinite alternate;
}
@keyframes auroraShift{
  0%{ transform:translate3d(0,0,0) scale(1); }
  100%{ transform:translate3d(0,-3%,0) scale(1.08); }
}
.bg-grid{
  position:fixed; inset:0; z-index:-2; pointer-events:none; opacity:.5;
  background:
    linear-gradient(to bottom, transparent, var(--bg) 78%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,.025) 0 1px, transparent 1px 64px);
  mask-image:radial-gradient(120% 80% at 50% 0%, #000 30%, transparent 75%);
}
/* film grain */
.bg-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* cursor spotlight */
.spotlight{
  position:fixed; width:640px; height:640px; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(circle, rgba(139,107,255,.10), transparent 60%);
  transform:translate(-50%,-50%); left:-999px; top:-999px;
  transition:opacity .4s; opacity:0;
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; position:relative; z-index:2; }
.container-wide{ max-width:1400px; }
section{ position:relative; z-index:2; }
.section{ padding-block:clamp(64px,10vw,140px); }
.section-sm{ padding-block:clamp(48px,7vw,90px); }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:500; line-height:1.05; letter-spacing:-.02em; }
.display{ font-size:clamp(2.8rem,7vw,5.6rem); font-weight:500; line-height:.98; letter-spacing:-.035em; }
h2.title{ font-size:clamp(2rem,4.2vw,3.4rem); }
h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); }
.eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--text-mute); display:inline-flex; align-items:center; gap:.7em;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:linear-gradient(90deg,var(--gold),transparent); }
.lead{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--text-dim); max-width:60ch; }
.text-grad{
  background:linear-gradient(100deg,var(--gold-2) 0%, var(--gold) 30%, var(--violet-2) 70%, var(--cyan) 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent;
}
.text-dim{ color:var(--text-dim); }
.text-mute{ color:var(--text-mute); }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:.9em 1.6em; border-radius:100px; font-weight:500; font-size:.95rem;
  letter-spacing:.01em; transition:transform .3s var(--ease), box-shadow .3s, background .3s, border-color .3s;
  position:relative; white-space:nowrap;
}
.btn svg{ width:1.1em; height:1.1em; }
.btn-primary{
  color:#120c02; background:linear-gradient(100deg,var(--gold-2),var(--gold));
  box-shadow:0 10px 30px -8px rgba(244,193,93,.5), inset 0 1px 0 rgba(255,255,255,.5);
}
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 18px 40px -10px rgba(244,193,93,.65); }
.btn-ghost{ border:1px solid var(--border-2); background:var(--surface); color:var(--text); backdrop-filter:blur(10px); }
.btn-ghost:hover{ transform:translateY(-2px); border-color:var(--border-2); background:var(--surface-2); }
.btn-lg{ padding:1.05em 2em; font-size:1rem; }
.btn:active{ transform:translateY(0) scale(.98); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  transition:background .4s, backdrop-filter .4s, border-color .4s, box-shadow .4s; border-bottom:1px solid transparent;
}
.site-header.scrolled{
  background:rgba(8,8,14,.72); backdrop-filter:blur(18px) saturate(1.4);
  border-bottom-color:var(--border); box-shadow:0 10px 30px -20px rgba(0,0,0,.9);
}
.nav{ display:flex; align-items:center; justify-content:space-between; height:74px; }
.brand{ display:flex; align-items:center; gap:.65rem; font-family:var(--font-display); font-weight:600; font-size:1.32rem; letter-spacing:-.02em; }
.brand .mark{ width:34px; height:34px; flex:none; }
.brand b{ color:var(--gold); font-weight:600; }
.nav-links{ display:flex; align-items:center; gap:2rem; }
.nav-links a{ font-size:.92rem; color:var(--text-dim); font-weight:450; position:relative; transition:color .25s; }
.nav-links a::after{ content:""; position:absolute; left:0; bottom:-6px; height:1.5px; width:0; background:var(--gold); transition:width .3s var(--ease); }
.nav-links a:hover,.nav-links a.active{ color:var(--text); }
.nav-links a:hover::after,.nav-links a.active::after{ width:100%; }
.nav-cta{ display:flex; align-items:center; gap:.8rem; }
.nav-toggle{ display:none; width:44px; height:44px; border-radius:12px; border:1px solid var(--border); align-items:center; justify-content:center; }
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--text); position:relative; transition:.3s; }
.nav-toggle span::before,.nav-toggle span::after{ content:""; position:absolute; left:0; width:20px; height:2px; background:var(--text); transition:.3s; }
.nav-toggle span::before{ top:-6px; } .nav-toggle span::after{ top:6px; }

/* ---------- Footer ---------- */
.site-footer{ position:relative; z-index:2; border-top:1px solid var(--border); margin-top:60px; background:linear-gradient(to bottom, transparent, rgba(139,107,255,.04)); }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px; padding-block:70px 40px; }
.footer-col h4{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--text-mute); margin-bottom:1.2rem; font-weight:500; }
.footer-col a{ display:block; color:var(--text-dim); font-size:.92rem; padding:.32rem 0; transition:color .2s, transform .2s; }
.footer-col a:hover{ color:var(--gold); transform:translateX(3px); }
.footer-about p{ color:var(--text-dim); font-size:.92rem; max-width:34ch; margin-top:1rem; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding:26px 0; border-top:1px solid var(--border); color:var(--text-mute); font-size:.84rem; }
.spectrum-bar{ display:flex; height:3px; border-radius:3px; overflow:hidden; width:120px; }
.spectrum-bar i{ flex:1; }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:28px; position:relative; overflow:hidden; backdrop-filter:blur(8px);
  transition:transform .5s var(--ease), border-color .4s, box-shadow .5s;
}
.card:hover{ transform:translateY(-5px); border-color:var(--border-2); box-shadow:var(--shadow); }

/* ---------- Song / product cards ---------- */
.song-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:26px; }
.song-card{ display:flex; flex-direction:column; cursor:pointer; padding:0; }
.song-card .cover{ aspect-ratio:16/10; position:relative; overflow:hidden; }
.song-card .cover-art{ position:absolute; inset:0; transition:transform .8s var(--ease); }
.song-card:hover .cover-art{ transform:scale(1.07); }
/* dark bottom scrim only over photo covers (legibility); generative covers stay clean */
.song-card .cover.img-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(to top, rgba(6,6,11,.9), transparent 55%); }
/* generative melody fingerprint — octave-coloured bars, glowing against the composer gradient */
.cover-fp{ position:absolute; left:0; right:0; bottom:0; width:100%; height:70%; opacity:.92; mix-blend-mode:screen; transition:transform .8s var(--ease); }
.song-card:hover .cover-fp{ transform:scaleY(1.08); transform-origin:bottom; }
.cover-glyph{ position:absolute; right:15px; top:11px; font-size:2.1rem; line-height:1; opacity:.4; color:#fff; z-index:1; }
/* mood atlas: one generated 4x3 sheet (assets/covers/_mood-atlas.webp) sliced per piece; overlays the
   composer gradient for photographic depth, then re-tinted to the composer colour. 404 → invisible (graceful). */
.cover-mood{ position:absolute; inset:0; background-image:url(../assets/covers/_mood-atlas.webp); background-repeat:no-repeat; background-size:400% 300%; opacity:.7; mix-blend-mode:overlay; }
.cover-mood::after{ content:""; position:absolute; inset:0; background:var(--tint,#8b6bff); opacity:.13; mix-blend-mode:color; }
.cover-mood.m0{ background-position:0% 0%; }      .cover-mood.m1{ background-position:33.333% 0%; }
.cover-mood.m2{ background-position:66.667% 0%; } .cover-mood.m3{ background-position:100% 0%; }
.cover-mood.m4{ background-position:0% 50%; }      .cover-mood.m5{ background-position:33.333% 50%; }
.cover-mood.m6{ background-position:66.667% 50%; } .cover-mood.m7{ background-position:100% 50%; }
.cover-mood.m8{ background-position:0% 100%; }     .cover-mood.m9{ background-position:33.333% 100%; }
.cover-mood.m10{ background-position:66.667% 100%; } .cover-mood.m11{ background-position:100% 100%; }
.song-card .play-badge{
  position:absolute; z-index:2; bottom:16px; left:16px; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; background:rgba(10,10,18,.6);
  border:1px solid var(--border-2); backdrop-filter:blur(10px); transition:.4s; transform:translateY(6px); opacity:0;
}
.song-card:hover .play-badge{ transform:translateY(0); opacity:1; background:var(--gold); color:#100b02; border-color:transparent; }
/* favourite heart + duration badge on covers */
.fav-btn{ position:absolute; z-index:3; top:12px; right:12px; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:rgba(10,10,18,.55); border:1px solid var(--border-2); color:#fff; cursor:pointer; backdrop-filter:blur(8px); transition:transform .15s, background .2s, color .2s, opacity .2s; opacity:0; }
.song-card:hover .fav-btn, .fav-btn.on{ opacity:1; }
.fav-btn:hover{ transform:scale(1.12); border-color:var(--pink, #ff54b2); }
.fav-btn.on{ color:var(--pink, #ff54b2); }
.fav-btn.on svg{ fill:var(--pink, #ff54b2); }
.dur-badge{ position:absolute; z-index:2; bottom:14px; right:14px; font-family:var(--font-mono); font-size:.7rem; color:#fff; background:rgba(10,10,18,.6); border:1px solid var(--border-2); border-radius:20px; padding:.16em .6em; backdrop-filter:blur(8px); }
.fav-btn.song-fav-btn{ position:static; opacity:1; width:36px; height:36px; }
.lib-chips .chip.fav-filter.active{ background:rgba(255,84,178,.16); color:var(--pink); border-color:var(--pink); }
/* composer page hero */
.composer-hero{ display:grid; grid-template-columns:154px 1fr; gap:30px; align-items:center; margin-bottom:8px; }
#composer-cover{ aspect-ratio:1; border-radius:var(--radius-lg); box-shadow:var(--elev-2); overflow:hidden; display:flex; align-items:center; justify-content:center; }
.composer-genres{ display:flex; gap:8px; flex-wrap:wrap; }
@media (max-width:560px){ .composer-hero{ grid-template-columns:92px 1fr; gap:18px; } }
/* timeline — era bands */
.era-bands{ display:flex; flex-direction:column; gap:18px; }
.era-band{ border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:var(--radius-lg); background:var(--surface); padding:22px 24px; }
.era-head{ display:flex; align-items:center; gap:16px; }
.era-glyph{ font-size:1.8rem; color:var(--accent); line-height:1; }
.era-titles{ flex:1; min-width:0; }
.era-name{ font-size:1.4rem; margin:0; }
.era-range{ font-family:var(--font-mono); font-size:.76rem; color:var(--text-mute); letter-spacing:.05em; }
.era-explore{ flex:none; }
.era-bar{ height:8px; border-radius:20px; background:var(--surface-3, #1a1a26); margin:16px 0 14px; overflow:hidden; }
.era-bar span{ display:block; height:100%; border-radius:20px; background:linear-gradient(90deg, var(--accent), rgba(255,255,255,.05)); }
.era-composers{ display:flex; gap:8px; flex-wrap:wrap; }
.era-composers .chip{ text-decoration:none; transition:border-color .15s, color .15s; }
.era-composers .chip:hover{ border-color:var(--accent); color:var(--text); }

/* learn — 5-step roadmap */
.learn-steps{ display:flex; flex-direction:column; gap:30px; max-width:940px; }
.learn-step{ border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:24px 26px; }
.step-head{ display:flex; gap:16px; align-items:flex-start; margin-bottom:18px; }
.step-num{ flex:none; width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display,serif); font-size:1.2rem; font-weight:700; color:#06060b;
  background:linear-gradient(135deg, var(--gold), #f0a94e); box-shadow:0 4px 16px rgba(244,193,93,.3); }
.step-head h2{ font-size:1.4rem; margin:0 0 .25rem; }
.step-head p{ color:var(--text-mute); font-size:.95rem; line-height:1.55; margin:0; }
.step-head b{ color:var(--text); }
.learn-done{ text-align:center; padding:36px 20px 8px; }
.learn-done h2{ font-size:1.7rem; margin:0 0 .5rem; }
.learn-done p{ color:var(--text-mute); margin:0 0 22px; }
.learn-cta{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
@media (max-width:560px){ .step-head{ gap:12px; } .learn-step{ padding:18px 16px; } }

/* online piano page */
.piano-hero{ padding-top:128px; padding-bottom:6px; text-align:center; }
.piano-hero .lead{ max-width:60ch; }
.piano-studio{ max-width:1220px; margin:0 auto; padding:8px 20px 60px; }
.piano-toolbar{ display:flex; align-items:center; justify-content:center; gap:26px; flex-wrap:wrap; margin:8px 0 20px;
  padding:14px 22px; border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.piano-toolbar .voice-sel{ font:inherit; font-size:.85rem; padding:7px 12px; border-radius:10px; background:var(--surface-2,#14141f);
  color:var(--text); border:1px solid var(--border); cursor:pointer; }
.piano-toolbar input[type=range]{ width:120px; accent-color:var(--gold); }
.metro-ctrl input[type=range]{ width:84px; }
.metro-btn.on{ border-color:var(--gold); color:var(--gold); }
.metro-bpm-val{ font-family:var(--font-mono); font-size:.8rem; color:var(--gold); min-width:2.2em; text-align:right; }
.oct-stepper{ display:inline-flex; align-items:center; gap:12px; }
.oct-stepper button{ display:inline-flex; flex-direction:column; align-items:center; gap:2px; padding:5px 7px 4px;
  border-radius:9px; border:1px solid var(--border); background:var(--surface-2,#14141f);
  color:var(--text); line-height:1; cursor:pointer; transition:border-color .15s, background .15s; }
.oct-stepper button:hover{ border-color:var(--gold); }
.oct-stepper .oct-glyph{ font-size:1.1rem; }
.oct-stepper kbd{ font-family:var(--font-mono); font-size:.56rem; font-weight:700; letter-spacing:.04em; color:var(--text-mute);
  background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:4px; padding:1px 4px; line-height:1.3; }
.oct-stepper > span#oct-label{ font-family:var(--font-mono); font-size:1rem; min-width:1.2em; text-align:center; color:var(--gold); }
.piano-stage{ min-height:46vh; display:flex; align-items:center; }
.piano-legend{ display:flex; gap:8px 14px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:18px; }
.piano-legend .li{ display:flex; align-items:center; gap:.4rem; font-family:var(--font-mono); font-size:.68rem; color:var(--text-dim); }
.piano-legend .dot{ width:10px; height:10px; border-radius:50%; box-shadow:0 0 8px currentColor; }
.piano-hint{ text-align:center; margin:2px auto 14px; max-width:60ch; font-size:.9rem; color:var(--gold);
  background:color-mix(in srgb, var(--gold) 8%, var(--surface)); border:1px solid color-mix(in srgb, var(--gold) 30%, var(--border));
  border-radius:40px; padding:9px 18px; }

/* melody recorder controls */
.rec-ctrl{ gap:8px; }
.rec-btn{ display:inline-flex; align-items:center; gap:8px; }
.rec-dot{ width:9px; height:9px; border-radius:50%; background:#ff5f64; flex:none; }
.rec-btn.recording{ border-color:#ff5f64; color:#ff8a8d; }
.rec-btn.recording .rec-dot{ animation:recpulse 1s infinite; }
@keyframes recpulse{ 0%{ box-shadow:0 0 0 0 rgba(255,95,100,.6); } 70%{ box-shadow:0 0 0 7px rgba(255,95,100,0); } 100%{ box-shadow:0 0 0 0 rgba(255,95,100,0); } }

/* computer-key hint badge on each mapped piano key (top of the key; note letter stays at the bottom) */
.key .kbd-hint{ position:absolute; top:6px; left:50%; transform:translateX(-50%); font-family:var(--font-mono); font-weight:700;
  font-size:.6rem; line-height:1; padding:3px 4px; min-width:1.1em; text-align:center; border-radius:5px;
  background:rgba(12,12,22,.9); color:#fff; border:1px solid rgba(255,255,255,.14); pointer-events:none; letter-spacing:.02em; }
.key.black .kbd-hint{ top:5px; font-size:.54rem; padding:2px 3px; background:rgba(255,255,255,.16); }
.piano.compact .key .kbd-hint{ font-size:.5rem; padding:2px 3px; }

/* export bar (song page) */
.export-bar{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; margin-top:22px; padding:20px 26px;
  border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); }
.export-copy{ flex:1; min-width:240px; }
.export-copy h3{ font-family:var(--font-body); font-weight:600; font-size:1.05rem; margin:0 0 .35rem; }
.export-copy p{ font-size:.92rem; margin:0; }
.export-btns{ display:flex; gap:10px; flex-wrap:wrap; }
.export-btns .btn{ font-family:var(--font-mono); font-size:.82rem; letter-spacing:.02em; }

/* collections — curated discovery cards */
.collection-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:22px; }
.collection-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; border:1px solid var(--border);
  border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); box-shadow:var(--elev-1);
  transition:transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s, border-color .25s; }
.collection-card:hover{ transform:translateY(-5px); box-shadow:var(--elev-2); border-color:color-mix(in srgb, var(--accent) 55%, var(--border)); }
.coll-mosaic{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:2px; aspect-ratio:16/10; background:#05050b; }
.coll-tile{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center; }
.coll-tile .cover-glyph{ font-size:1.1rem; }
.coll-tile .cover-fp{ opacity:.9; }
.coll-body{ position:relative; padding:20px 22px 22px; flex:1; display:flex; flex-direction:column; gap:.45rem; }
.coll-glyph{ position:absolute; top:-26px; right:20px; width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  font-size:1.4rem; border-radius:13px; background:var(--surface-2, #14141f); border:1px solid var(--border); box-shadow:var(--elev-1); }
.coll-body h3{ font-size:1.3rem; margin:0; }
.coll-body p{ color:var(--text-mute); font-size:.9rem; line-height:1.5; margin:0; flex:1; }
.coll-count{ font-family:var(--font-mono); font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); }

/* collection detail — mosaic hero */
#collection-cover{ position:relative; aspect-ratio:1; border-radius:var(--radius-lg); box-shadow:var(--elev-2); overflow:hidden; }
#collection-cover .coll-mosaic{ aspect-ratio:1; height:100%; }
.coll-cover-glyph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.6rem;
  text-shadow:0 2px 18px rgba(0,0,0,.6); pointer-events:none; }

/* atmospheres — mood browse chips */
.atmosphere-strip{ display:flex; flex-wrap:wrap; gap:12px; }
.atmo-chip{ display:inline-flex; align-items:center; gap:9px; text-decoration:none; color:var(--text); font-size:.92rem;
  padding:9px 15px; border:1px solid var(--border); border-radius:40px; background:var(--surface);
  transition:border-color .18s, transform .18s, background .18s; }
.atmo-chip:hover{ border-color:var(--accent); transform:translateY(-2px); background:color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.atmo-dot{ width:11px; height:11px; border-radius:50%; box-shadow:0 0 10px currentColor; }
.atmo-n{ font-family:var(--font-mono); font-size:.72rem; color:var(--text-mute); }
.song-card .meta{ padding:20px 22px 24px; display:flex; flex-direction:column; gap:.5rem; flex:1; }
.song-card h3{ font-size:1.22rem; }
.song-card .sub{ color:var(--text-mute); font-size:.85rem; }
.song-card .tags{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:auto; padding-top:.6rem; }
.chip{ font-size:.7rem; font-family:var(--font-mono); letter-spacing:.06em; padding:.35em .7em; border-radius:100px; border:1px solid var(--border); color:var(--text-dim); background:var(--surface); }
.chip.diff-easy{ color:var(--o3); border-color:rgba(53,224,140,.3); }
.chip.diff-medium{ color:var(--o5); border-color:rgba(246,183,63,.3); }
.chip.diff-hard{ color:var(--o4); border-color:rgba(255,95,100,.3); }

/* ---------- Library toolbar ---------- */
.lib-toolbar{ padding:18px; display:grid; grid-template-columns:1fr auto auto auto; gap:14px 16px; align-items:center; margin-bottom:30px; }
.lib-search-wrap{ position:relative; }
.lib-search-wrap input#lib-search{
  margin:0; width:100%; padding:.82em 1em .82em 42px; color:var(--text);
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px; transition:border-color .25s, background .25s;
}
.lib-search-wrap input#lib-search:focus{ outline:none; border-color:var(--violet); background:var(--surface-3); }
.lib-search-wrap input#lib-search::placeholder{ color:var(--text-mute); }
.lib-composer-wrap{ position:relative; min-width:210px; }
select.lib-composer{
  -webkit-appearance:none; appearance:none; margin:0; width:100%;
  padding:.82em 34px .82em 36px; color:var(--text); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  font-size:.9rem; transition:border-color .25s, background .25s;
}
select.lib-composer:focus{ outline:none; border-color:var(--violet); background:var(--surface-3); }
select.lib-composer option{ background:#0f0f1c; color:var(--text); }
.lib-tier{ grid-column:1 / -1; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lib-tier-label{ font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--text-mute); margin-right:2px; }
.tier-btn{ cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
.tier-btn:hover{ border-color:var(--border-2); background:var(--surface-2); }
.tier-btn.active{ color:var(--text); background:var(--surface-3); border-color:var(--violet); }
.lib-chips{ grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap; }
.lib-chips .chip{ cursor:pointer; transition:border-color .2s, background .2s, color .2s, transform .15s; }
.lib-chips .chip:hover{ border-color:var(--border-2); background:var(--surface-2); }
.lib-chips .chip.active{ color:var(--text); background:var(--surface-3); border-color:var(--border-2); }
.lib-chips .chip.diff-easy.active{ background:rgba(53,224,140,.16); }
.lib-chips .chip.diff-medium.active{ background:rgba(246,183,63,.16); }
.lib-chips .chip.diff-hard.active{ background:rgba(255,95,100,.16); }
.lib-composer-wrap{ min-width:200px; }
@media (max-width:860px){ .lib-toolbar{ grid-template-columns:1fr 1fr; } .lib-search-wrap{ grid-column:1 / -1; } }
@media (max-width:520px){ .lib-toolbar{ grid-template-columns:1fr; } }

/* ---------- Archive depth showcase (home) ---------- */
.archive-stats{ display:flex; justify-content:center; gap:clamp(2rem,6vw,4.5rem); flex-wrap:wrap; margin:44px 0 40px; }
.archive-stats .stat{ text-align:center; }
.archive-stats .stat b{ font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.4rem); display:block; line-height:1; }
.archive-stats .stat span{ font-size:.82rem; color:var(--text-mute); letter-spacing:.04em; margin-top:.4rem; display:block; }
.composer-cloud{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; max-width:960px; margin:0 auto; }
.composer-link{
  display:inline-flex; align-items:center; gap:.6em; padding:.6em 1.1em; border-radius:100px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-dim);
  font-size:.92rem; transition:transform .2s var(--ease), border-color .2s, background .2s, color .2s;
}
.composer-link:hover{ transform:translateY(-3px); border-color:var(--border-2); background:var(--surface-2); color:var(--text); }
.composer-link .dot{ width:9px; height:9px; border-radius:50%; flex:none; box-shadow:0 0 10px 1px currentColor; }
.composer-link .n{ font-family:var(--font-mono); font-size:.74rem; color:var(--text-mute); }

/* ---------- Hero ---------- */
.hero{ min-height:100vh; display:flex; align-items:center; padding-top:74px; position:relative; }
.hero-inner{ display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center; width:100%; }
.hero-copy{ max-width:640px; }
.hero .display{ margin:1.2rem 0 1.5rem; }
.hero-actions{ display:flex; gap:1rem; flex-wrap:wrap; margin-top:2rem; }
.hero-stats{ display:flex; gap:2.4rem; margin-top:3rem; flex-wrap:wrap; }
.hero-stats .stat b{ font-family:var(--font-display); font-size:1.9rem; display:block; line-height:1; }
.hero-stats .stat span{ font-size:.8rem; color:var(--text-mute); letter-spacing:.03em; }
.hero-visual{ position:relative; }

/* floating notes */
.float-notes{ position:absolute; inset:-10%; pointer-events:none; z-index:0; }
.float-notes span{ position:absolute; color:var(--violet-2); opacity:.5; font-size:1.4rem; animation:floaty 9s ease-in-out infinite; }
@keyframes floaty{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-22px) rotate(8deg); } }

/* ---------- Feature blocks ---------- */
.feature-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.feature{ padding:30px; }
.feature .ic{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  background:linear-gradient(135deg, rgba(139,107,255,.25), rgba(77,208,255,.12)); border:1px solid var(--border-2); color:var(--violet-2); }
.feature h3{ font-size:1.25rem; margin-bottom:.6rem; }
.feature p{ color:var(--text-dim); font-size:.95rem; }

/* ---------- Section heading ---------- */
.section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:44px; flex-wrap:wrap; }
.section-head .lead{ margin-top:1rem; }

/* ---------- Ads ---------- */
.ad-slot{
  border:1px dashed var(--border-2); border-radius:var(--radius); background:var(--surface);
  display:flex; align-items:center; justify-content:center; color:var(--text-mute);
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; min-height:110px; text-align:center;
}
.ad-leaderboard{ min-height:120px; margin-block:40px; }
.ad-label{ font-family:var(--font-mono); font-size:.62rem; letter-spacing:.24em; text-transform:uppercase; color:var(--text-mute); text-align:center; margin-bottom:8px; }

/* ---------- Prose (legal / about) ---------- */
.prose{ max-width:760px; margin-inline:auto; }
.prose h1{ font-size:clamp(2.2rem,5vw,3.4rem); margin-bottom:1rem; }
.prose h2{ font-family:var(--font-display); font-size:1.6rem; margin:2.6rem 0 .8rem; }
.prose h3{ font-size:1.15rem; margin:1.6rem 0 .5rem; font-family:var(--font-body); font-weight:600; }
.prose p,.prose li{ color:var(--text-dim); margin-bottom:1rem; }
.prose ul{ padding-left:1.2rem; list-style:disc; }
.prose li{ margin-bottom:.5rem; }
.prose a{ color:var(--gold); border-bottom:1px solid rgba(244,193,93,.3); }
.prose strong{ color:var(--text); }
.prose .updated{ color:var(--text-mute); font-size:.85rem; font-family:var(--font-mono); }
.page-hero{ padding-top:150px; padding-bottom:20px; text-align:center; }
.page-hero .lead{ margin-inline:auto; }

/* ---------- Forms ---------- */
.field{ margin-bottom:1.2rem; }
.field label{ display:block; font-size:.85rem; color:var(--text-dim); margin-bottom:.5rem; font-weight:500; }
.field input,.field textarea{
  width:100%; padding:.9em 1.1em; border-radius:12px; background:var(--surface-2);
  border:1px solid var(--border); color:var(--text); font-size:.95rem; transition:border-color .25s, background .25s;
}
.field input:focus,.field textarea:focus{ outline:none; border-color:var(--violet); background:var(--surface-3); }
.field textarea{ min-height:150px; resize:vertical; }

/* ---------- Reveal animation ---------- */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .9s var(--ease-out), transform .9s var(--ease-out); }
[data-reveal].in{ opacity:1; transform:none; }
[data-reveal][data-delay="1"]{ transition-delay:.08s; }
[data-reveal][data-delay="2"]{ transition-delay:.16s; }
[data-reveal][data-delay="3"]{ transition-delay:.24s; }
[data-reveal][data-delay="4"]{ transition-delay:.32s; }

/* ---------- Responsive ---------- */
@media (max-width:960px){
  .hero-inner{ grid-template-columns:1fr; gap:40px; }
  .hero-visual{ order:-1; }
  .feature-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; gap:30px; }
  .nav-links,.nav-cta .btn{ display:none; }
  .nav-toggle{ display:flex; }
  .site-header.nav-open .nav-links{
    display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column; gap:0;
    background:rgba(8,8,14,.96); backdrop-filter:blur(18px); border-bottom:1px solid var(--border); padding:12px 24px 24px;
  }
  .site-header.nav-open .nav-links a{ padding:14px 0; border-bottom:1px solid var(--border); }
}
@media (max-width:560px){
  .footer-grid{ grid-template-columns:1fr; }
  .hero-stats{ gap:1.6rem; }
  .container{ padding-inline:18px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto; }
  [data-reveal]{ opacity:1; transform:none; }
}
/* ---------- Mobile performance ----------
   Phones have weak GPUs and the audio scheduler shares the main thread with all rendering.
   Animated blur() filters re-rasterise a large area every frame, and backdrop-filter repaints
   on every scroll frame — both starve audio and cause the stutter/choppiness on touch devices.
   Freeze the animations and drop the live blurs; on a small screen the look is nearly identical.
   (Matches the JS `MOBILE` check in player.js: coarse pointer OR narrow viewport.) */
@media (pointer:coarse), (max-width:820px){
  .bg-aurora{ animation:none; }
  .bg-rays{ animation:none; }
  .scene-orb{ animation:none; }
  .site-header.scrolled{ background:rgba(8,8,14,.95); backdrop-filter:none; -webkit-backdrop-filter:none; }
  .card, .btn-ghost, .dur-badge, .play-badge, .fav-btn{ backdrop-filter:none; -webkit-backdrop-filter:none; }
}

/* ============================================================================
   CINEMATIC 3D LAYER — depth engine, parallax, tilt. Pointer parallax writes
   --mx / --my (range -1..1) on :root (js/site.js). Everything below is
   transform/opacity only (GPU-cheap) and disabled under reduced-motion.
   ========================================================================== */
:root{
  --mx:0; --my:0;                                  /* pointer parallax, set by JS */
  --elev-1:0 12px 30px -14px rgba(0,0,0,.6);
  --elev-2:0 26px 60px -22px rgba(0,0,0,.72);
  --elev-3:0 44px 100px -34px rgba(0,0,0,.82), 0 0 0 1px var(--border-2);
  --ez:cubic-bezier(.16,1,.3,1);
}

/* --- parallaxed ambient background --- */
.bg-aurora{ transform:translate3d(calc(var(--mx)*-20px), calc(var(--my)*-15px), 0); transition:transform .6s var(--ez); }
.bg-rays{
  position:fixed; inset:-25% -10% auto -10%; height:120vh; z-index:-2; pointer-events:none; opacity:.55;
  background:
    conic-gradient(from 205deg at 62% -8%, transparent 0deg, rgba(139,107,255,.12) 16deg, transparent 34deg,
      transparent 120deg, rgba(77,208,255,.09) 148deg, transparent 172deg,
      transparent 250deg, rgba(244,193,93,.07) 278deg, transparent 300deg);
  -webkit-mask-image:linear-gradient(to bottom, #000, transparent 72%); mask-image:linear-gradient(to bottom, #000, transparent 72%);
  transform:translate3d(calc(var(--mx)*14px), calc(var(--my)*10px), 0);
  transition:transform .7s var(--ez); animation:raysBreathe 26s ease-in-out infinite alternate;
}
@keyframes raysBreathe{ 0%{ filter:hue-rotate(0deg); opacity:.42; } 100%{ filter:hue-rotate(24deg); opacity:.7; } }
.bg-vignette{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 38%, transparent 52%, rgba(2,2,6,.55) 100%); }

/* --- reusable 3D tilt (cards) with light glare --- */
.tilt{ position:relative;
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d; transition:transform .32s var(--ez), box-shadow .4s, border-color .4s; will-change:transform; }
.tilt::after{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:6; pointer-events:none; opacity:0; transition:opacity .3s;
  background:radial-gradient(240px 240px at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.16), transparent 60%); mix-blend-mode:overlay; }
.tilt:hover::after{ opacity:1; }
.card.tilt:hover, .song-card.tilt:hover, .feature.tilt:hover{
  transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); box-shadow:var(--elev-3); }
.song-card.tilt:hover .cover-art{ transform:scale(1.09); }

/* --- hero cinematic scene --- */
.hero-scene{ position:relative; min-height:460px; perspective:1300px; transform-style:preserve-3d; }
.scene-orb{ position:absolute; inset:2% -4% 12% 2%; z-index:0; border-radius:50%;
  background:radial-gradient(closest-side, rgba(139,107,255,.28), rgba(77,208,255,.10) 55%, transparent 75%);
  filter:blur(34px); transform:translate3d(calc(var(--mx)*-14px), calc(var(--my)*-10px), 0); transition:transform .7s var(--ez);
  animation:orbPulse 7s ease-in-out infinite alternate; }
@keyframes orbPulse{ 0%{ opacity:.7; transform:translate3d(calc(var(--mx)*-14px), calc(var(--my)*-10px),0) scale(1); }
  100%{ opacity:1; transform:translate3d(calc(var(--mx)*-14px), calc(var(--my)*-10px),0) scale(1.07); } }
.scene-notes .pn{ position:absolute; z-index:3; will-change:transform;
  transform:translate3d(calc(var(--mx)*var(--px,20)*1px), calc(var(--my)*var(--px,20)*1px), var(--tz,0)); transition:transform .5s var(--ez); }
.scene-notes .pn i{ display:block; font-style:normal; font-size:1.5rem; color:var(--violet-2); opacity:.55; animation:floaty 9s ease-in-out infinite; }
.scene-card{ position:relative; z-index:2;
  transform:translate3d(calc(var(--mx)*var(--px,14)*1px), calc(var(--my)*var(--px,14)*1px), var(--tz,0)); transition:transform .5s var(--ez); }

@media (prefers-reduced-motion:reduce){
  .bg-aurora,.bg-rays,.scene-orb,.scene-notes .pn,.scene-card{ transform:none !important; }
  .tilt{ transform:none !important; }
}
@media (max-width:960px){ .hero-scene{ min-height:380px; } }

/* --- Doré, the mascot --- */
.mascot-svg{ display:block; width:100%; height:auto; overflow:visible; }
.mascot-bob{ animation:mascotBob 5.5s ease-in-out infinite; transform-origin:50% 90%; }
@keyframes mascotBob{ 0%,100%{ transform:translateY(0) rotate(-2.5deg); } 50%{ transform:translateY(-9px) rotate(2.5deg); } }
.scene-mascot{ position:absolute; top:-7%; right:-3%; width:116px; z-index:4;
  transform:translate3d(calc(var(--mx)*var(--px,30)*1px), calc(var(--my)*var(--px,30)*1px), var(--tz,40px));
  transition:transform .5s var(--ez); filter:drop-shadow(0 18px 28px rgba(0,0,0,.55)); }
.mascot-frame{ width:clamp(150px,20vw,220px); flex:none; border-radius:var(--radius-lg); padding:22px;
  background:radial-gradient(120% 120% at 50% 10%, rgba(139,107,255,.18), transparent 65%), var(--surface);
  border:1px solid var(--border); box-shadow:var(--elev-2); }
.mascot-inline{ width:1.6em; height:1.6em; display:inline-block; vertical-align:middle; }
@media (max-width:560px){ .scene-mascot{ width:88px; top:-4%; } }

/* buttons inside .prose must keep their own contrast (`.prose a{color:gold}` would wash them out) */
.prose .btn{ border-bottom:none; }
.prose .btn-primary{ color:#120c02; }
.prose .btn-ghost{ color:var(--text); }
.prose .btn-primary:hover{ color:#120c02; }

/* ============================================================================
   PHASE E — real mascot art, hero photography, page transitions, final polish
   ========================================================================== */
.mascot-img{ display:block; width:100%; height:auto; }
.scene-mascot{ width:clamp(140px, 16vw, 210px); top:-10%; right:-4%; }

/* cinematic hero photograph, faded in from the left so the copy stays crisp */
.hero::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:url(../assets/hero.webp) center / cover no-repeat; opacity:.42;
  -webkit-mask-image:linear-gradient(90deg, transparent 6%, #000 62%);
  mask-image:linear-gradient(90deg, transparent 6%, #000 62%); }
.hero .container{ position:relative; z-index:2; }

/* real cover art on song cards + song page (falls back to the gradient) */
.song-card .cover-art.has-img, #song-cover.has-img{ background-size:cover !important; background-position:center !important; }
#song-cover.has-img span{ display:none; }

/* gentle page-load entrance */
@keyframes pageIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }
body{ animation:pageIn .5s var(--ez) both; }
@media (prefers-reduced-motion:reduce){ body{ animation:none; } }

/* Doré-at-piano beside the "Try it live" heading (its own column — never over text) */
.try-head{ display:flex; align-items:center; gap:clamp(20px, 3vw, 46px); margin-bottom:44px; }
.try-mascot{ flex:none; width:clamp(150px, 19vw, 290px); height:auto; align-self:center;
  filter:drop-shadow(0 24px 34px rgba(0,0,0,.5)); animation:mascotBob 6s ease-in-out infinite; transform-origin:60% 100%; }
.try-copy{ min-width:0; }
.try-copy .lead{ margin-top:1rem; }
@media (max-width:760px){
  .try-head{ flex-direction:column; text-align:center; gap:16px; }
  .try-mascot{ width:clamp(160px, 46vw, 230px); }
}

/* cinematic cover-art marquee (decorative) */
.art-marquee{ overflow:hidden; padding:6px 0; position:relative; z-index:2;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.art-track{ display:flex; gap:22px; width:max-content; animation:artScroll 52s linear infinite; }
.art-marquee:hover .art-track{ animation-play-state:paused; }
.art-item{ position:relative; flex:none; display:block; border-radius:16px; overflow:hidden;
  border:1px solid var(--border); box-shadow:var(--elev-2); transition:transform .4s var(--ez), box-shadow .4s; }
.art-item:hover{ transform:translateY(-6px); box-shadow:var(--elev-3); }
.art-item img{ display:block; height:200px; width:auto; object-fit:cover; }
.art-title{ position:absolute; left:0; right:0; bottom:0; z-index:2; padding:30px 16px 14px; text-align:left;
  background:linear-gradient(to top, rgba(6,6,11,.95), rgba(6,6,11,.45) 55%, transparent);
  color:#fff; font-family:var(--font-display); font-size:1.05rem; line-height:1.2;
  opacity:0; transform:translateY(10px); transition:opacity .3s var(--ez), transform .3s var(--ez); }
.art-title i{ display:block; font-family:var(--font-mono); font-style:normal; font-size:.64rem; letter-spacing:.1em; color:var(--text-dim); margin-top:3px; }
.art-item:hover .art-title{ opacity:1; transform:none; }
@keyframes artScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@media (max-width:560px){ .art-item img{ height:150px; } }

/* individual Doré stickers, sliced from the 3×2 sheet as a sprite */
.dsticker{ display:inline-block; aspect-ratio:1/1; background:url(../assets/mascot/dore-stickers.webp) no-repeat; background-size:300% 200%;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.4)); }
.dsticker.s1{ background-position:0% 0%; } .dsticker.s2{ background-position:50% 0%; } .dsticker.s3{ background-position:100% 0%; }
.dsticker.s4{ background-position:0% 100%; } .dsticker.s5{ background-position:50% 100%; } .dsticker.s6{ background-position:100% 100%; }
/* s6 sits beside the wide sleeping-pup (s5) on the sheet, whose paw bleeds a thin sliver
   into s6's left edge. Zoom the sheet a touch so the crop lands in the clear gap (2.5–5%)
   between that sliver and the cheering pup — kills the artifact, clips none of the dog. */
.dsticker.s6{ background-size:312.5% 200%; }
.dsticker.bob{ animation:mascotBob 6s ease-in-out infinite; transform-origin:50% 90%; }
@media (prefers-reduced-motion:reduce){ .dsticker.bob{ animation:none; } }

@media (prefers-reduced-motion:reduce){ .art-track{ animation:none; } .try-mascot{ animation:none; } }