/* Amatorium v73 — anodize gradient theme (amber→magenta→purple→cyan), gold-accented pills/boxes */
/* Cache-busting: keep this vNN in sync with the ?v=NN query strings in index.html
   (css/styles.css?v=NN and js/app.js?v=NN). Bump all three after editing CSS or JS. */
:root{
  --bg:#2a2a3a;--accent:#a855f7;--accent-light:#c084fc;
  --gold:#ffd700;--ice:rgba(200,230,255,.9);
  --glow:rgba(168,85,247,0.2);--text:#f5f5f5;--muted:#d0d0dd;--border:#444;
  --font:'Inter',sans-serif;
  --pill:50px;--gap:30px;
  /* THE ORIGINAL anodize gradient (v18/v19): amber → magenta → purple → cyan */
  --grad:linear-gradient(90deg,#e8842c,#c94080,#6428dc,#00b4c8);
  /* Same palette, 270deg — used for hover/fill states on pills, rows, title */
  --grad-hover:linear-gradient(270deg,#e8842c,#c94080,#6428dc,#00b4c8);
  --grad-title:linear-gradient(90deg,#a855f7,#3b82f6,#06b6d4);
  /* Hero motion tokens — tunable swing/wave params (see html.motion-on section) */
  --swing-dur-title:9s;--swing-dur-tagline:11s;--swing-dur-menu:7s; /* ranges: title/tagline 2–15s, menu 2–12s */
  --wave-dur:18s; /* gradient-wave, range 8–30s */
  --swing-rot:2.5deg;--swing-skew:1.5deg;--swing-shift:6px; /* amplitude caps: rot ≤~3deg, skew ≤~2deg, shift ≤~8px */
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
img,iframe{max-width:100%;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}

body{
  /* Flat dark with subtle warmth */
  background:#2a2a3a;
  background-image:linear-gradient(160deg,#2a2a3a 0%,#30304a 50%,#2a2a3a 100%);
  background-attachment:fixed;
  color:var(--text);font-family:var(--font);font-size:1.05rem;line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-weight:900;font-style:italic;line-height:1.05}
a{color:var(--accent-light);text-decoration:none;transition:color .2s}a:hover{color:#fff}
:focus-visible{outline:2px solid var(--accent-light);outline-offset:2px}
.skip-link{position:fixed;top:-100%;left:1rem;z-index:999;padding:.75rem 1.25rem;background:var(--accent-light);color:var(--bg);font-weight:700;border-radius:var(--pill)}.skip-link:focus{top:1rem}
#main:focus{outline:none}

/* Fixed UI */
.lang-btn{position:fixed;top:1.5rem;left:1.5rem;z-index:200;width:50px;height:50px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:.7rem;letter-spacing:.05em;color:var(--text);background:rgba(26,26,46,.85);border:3px solid var(--border);border-radius:50%;backdrop-filter:blur(8px);transition:all .25s}
.lang-btn:hover,.lang-btn:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 30px var(--glow)}
.scroll-top{position:fixed;bottom:2rem;right:2rem;z-index:200;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(26,26,46,.85);border:3px solid var(--border);border-radius:50%;color:var(--text);opacity:0;pointer-events:none;backdrop-filter:blur(8px);transition:all .3s}
.scroll-top.visible{opacity:1;pointer-events:auto}
.scroll-top:hover,.scroll-top:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:0 0 30px var(--glow)}

/* HERO */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:var(--gap)}
.hero__panel{position:relative;width:100%;min-height:calc(100vh - var(--gap)*2);background:var(--grad);border:none;border-radius:var(--pill);display:flex;align-items:center;justify-content:center;overflow:visible;box-shadow:0 0 80px -15px var(--glow)}
.hero__center{text-align:center;padding:4rem 6rem;position:relative;z-index:2}
/* Instrument silhouette layer — above gradient, below text */
.hero__silhouette{position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:1;pointer-events:none}
/* Title — NO filter (was causing clip), use text-shadow instead */
.hero__title{font-size:clamp(3rem,11vw,9rem);letter-spacing:-.03em;line-height:.85;padding:.3em .5em;background:var(--grad-hover);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.hero__tagline{margin-top:1.5rem;font-family:'Space Grotesk',sans-serif;font-size:clamp(1.3rem,3vw,2rem);color:var(--gold);font-weight:700;font-style:normal;letter-spacing:.01em}
.hero__nav{position:absolute;bottom:2.5rem;left:2.5rem;z-index:2}
.hero__nav-btns{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.7rem}

/* ===== PILLS — grey bg + gold border default, gradient on hover ===== */
.btn-pill{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.7rem 1.6rem;font-size:.9rem;font-weight:700;font-style:normal;
  text-transform:uppercase;letter-spacing:.07em;color:var(--text);
  background:var(--bg);
  border:4px solid var(--gold);border-radius:var(--pill);
  transition:all .25s;min-height:44px;white-space:nowrap;
}
.btn-pill::before{content:'✱';color:var(--gold);font-size:.9em}
.btn-pill:hover,.btn-pill:focus-visible{
  background:var(--grad-hover);background-clip:padding-box;
  color:#fff;border-color:rgba(255,255,255,0.2);
  box-shadow:0 0 20px var(--glow);
}
.btn-pill:hover::before,.btn-pill:focus-visible::before{color:#fff}

.btn-pill--outline{
  display:inline-flex;align-items:center;
  padding:.75rem 1.7rem;font-size:1rem;font-weight:600;color:var(--text);
  background:var(--bg);
  border:4px solid var(--gold);border-radius:var(--pill);
  transition:all .25s;font-style:normal;
  word-break:break-word;white-space:normal;
}
.btn-pill--outline:hover{
  background:var(--grad-hover);background-clip:padding-box;
  color:#fff;border-color:rgba(255,255,255,0.2);
  box-shadow:0 0 20px var(--glow);
}

/* PLAYER */
.player{display:flex;align-items:center;gap:.5rem;padding:.5rem .9rem;background:var(--bg);border:4px solid var(--gold);border-radius:var(--pill);max-width:300px}
.player__btn{flex:0 0 auto;width:24px;height:24px;display:flex;align-items:center;justify-content:center;color:var(--text)}.player__btn:hover{color:var(--accent)}
.player__icon{width:14px;height:14px;fill:currentColor}
.player__icon-pause{display:none}.player--playing .player__icon-play{display:none}.player--playing .player__icon-pause{display:block}
.player__time,.player__duration{font-size:.65rem;color:var(--muted);min-width:2.5em;text-align:center;font-variant-numeric:tabular-nums}
.player__progress{flex:1 1 auto;height:3px;background:var(--border);border-radius:2px;cursor:pointer;overflow:hidden}
.player__progress-fill{height:100%;width:0;background:var(--accent);transition:width .15s linear}
.player__vol-btn{margin-left:.1rem}.player__vol-wave{opacity:.5}
.player__vol-slider{width:35px;height:3px;-webkit-appearance:none;appearance:none;background:var(--border);border-radius:2px;outline:none;cursor:pointer}
.player__vol-slider::-webkit-slider-thumb{-webkit-appearance:none;width:8px;height:8px;border-radius:50%;background:var(--text)}
.player__vol-slider::-moz-range-thumb{width:8px;height:8px;border-radius:50%;background:var(--text);border:none}

/* SECTIONS */
.section{padding:0 var(--gap);margin-bottom:var(--gap)}
/* Section titles — same gradient as title (violet→blue→cyan) */
.section__title{font-size:clamp(2.5rem,7vw,5rem);padding-left:.5rem;margin-bottom:1rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
#about,#members,#contact{scroll-margin-top:2rem}

/* BOXES */
.boxes{display:grid;gap:var(--gap)}
.boxes--2{grid-template-columns:1fr 1fr}
.boxes--3{grid-template-columns:1fr 1fr 1fr}
.box{border-radius:var(--pill);padding:clamp(2rem,4vw,3rem);position:relative;color:var(--text)}
.box__label{font-size:1.2rem;color:var(--gold);margin-bottom:1rem;font-style:italic}
.box__links{display:flex;flex-direction:column;gap:.5rem}

/* Boxes — gradient background, no border */
.box--anodize-1,.box--anodize-2,.box--anodize-3,.box--anodize-4,.box--anodize-5{
  position:relative;
  background:var(--grad);
  border:none;
  border-radius:var(--pill);
  box-shadow:0 0 40px -10px var(--glow);
  padding:clamp(2rem,4vw,3rem);
}
/* Remove broken pseudo-element */
.box--anodize-1::before,.box--anodize-2::before,.box--anodize-3::before,.box--anodize-4::before,.box--anodize-5::before{
  display:none;
}

/* About text — Space Grotesk, justified on desktop, left on mobile */
.box--anodize-1 p{font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:400;line-height:1.8;color:var(--text);text-align:justify}

/* Members — pill-shaped gradient rows, name in accent, role in lighter */
.members__list{display:flex;flex-direction:column;gap:.6rem}
.member-row{display:block;padding:1rem 2rem;background:var(--bg);border:4px solid var(--gold);border-radius:var(--pill);color:var(--text);transition:all .25s}
.member-row:hover{background:var(--grad-hover);background-clip:padding-box;color:#fff;border-color:rgba(255,255,255,0.2);transform:translateX(5px);box-shadow:0 4px 30px var(--glow)}
.member-row__name{display:block;font-size:1.2rem;font-weight:900;font-style:italic;text-transform:uppercase;letter-spacing:.02em;color:var(--gold)}
.member-row__role{display:block;font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ice);margin-top:.15rem}
.member-row:hover .member-row__name,.member-row:hover .member-row__role{color:#fff}

/* FOOTER — small, thin, ice blue */
.footer{padding:2rem var(--gap);text-align:center}
.footer__text{font-family:'Space Grotesk',sans-serif;font-size:.9rem;font-weight:400;letter-spacing:.02em;color:var(--ice)}

/* RESPONSIVE */
@media(max-width:768px){
  :root{--gap:12px}
  .hero__panel{border-radius:30px}
  .hero__nav{bottom:1.2rem;left:1.2rem;right:1.2rem}
  .hero__nav-btns{gap:.4rem}
  .btn-pill{font-size:.7rem;padding:.5rem 1rem;min-height:36px}
  .player{max-width:100%;padding:.4rem .7rem}
  .section__title{font-size:clamp(2rem,8vw,3rem);padding-left:0}
  .boxes--2,.boxes--3{grid-template-columns:1fr}
  .box{padding:1.5rem;border-radius:30px}
  .member-row{padding:.8rem 1.2rem;border-radius:30px}
  .box--anodize-1 p{text-align:left}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  /* Static safety net (defense-in-depth, also wins if app.js still set motion-on):
     kill all hero swing/wave animation and render at the resting transform/gradient (P4, Req 4.1/4.2/4.3).
     !important guarantees these beat the later html.motion-on rules regardless of scope/source order. */
  .hero__center,.hero__swing--title,.hero__swing--tagline,.hero__swing--menu,.hero__panel,.section__title,.box--anodize-1,.box--anodize-2,.box--anodize-3,.box--anodize-4,.box--anodize-5{animation:none!important;transform:none!important}
  .hero__panel{background:var(--grad)!important}
}

/* ===== HERO MOTION — gating convention =====================================
   ALL swing/wave animations MUST be declared only under the `html.motion-on`
   scope (e.g. `html.motion-on .hero__swing--title{…}`). The `motion-on` class
   is added by js/app.js ONLY when motion is allowed (no prefers-reduced-motion).
   Therefore the no-JS / reduced-motion default renders fully STATIC.
   - Swing @keyframes + per-wrapper animations: added by task 2.2
   - Gradient-wave @property/@keyframes on .hero__panel: added by task 2.3
   - prefers-reduced-motion safety net: handled in the @media block (task 2.4)
   Off-screen suspend (below): js toggles `.paused` on #hero via IntersectionObserver. */
.hero.paused .hero__center,.hero.paused .hero__swing--menu,.hero.paused .hero__panel{animation-play-state:paused}

/* Swing keyframes — composed rotate/translateX/skewX from the :root amplitude tokens.
   IDENTITY transform at both 0% and 100% (peak at 50%) => jump-free, seamless loop (P1).
   Amplitudes stay within the :root caps so wrappers never leave .hero__panel (P2).
   heroSwingAlt mirrors the lean so the three wrappers don't move in lockstep (organic). */
@keyframes heroSwing{
  0%,100%{transform:rotate(0) translateX(0) skewX(0)}
  50%{transform:rotate(var(--swing-rot)) translateX(var(--swing-shift)) skewX(var(--swing-skew))}
}
@keyframes heroSwingAlt{
  0%,100%{transform:rotate(0) translateX(0) skewX(0)}
  50%{transform:rotate(calc(var(--swing-rot)*-1)) translateX(calc(var(--swing-shift)*-1)) skewX(calc(var(--swing-skew)*-1))}
}
/* Apply ONLY to wrapper/group elements, NEVER to .hero__title itself, so the
   title's -webkit-background-clip:text paint stays intact (P3, Req 1.3).
   will-change:transform keeps the swing on the compositor path (Req 6.1).
   Title + tagline swing as ONE unit by animating their shared parent .hero__center,
   so they move together (in sync) rather than detached (Req 1.1/1.2). */
html.motion-on .hero__center{will-change:transform;transform-origin:50% 10%;animation:heroSwing var(--swing-dur-title) ease-in-out infinite}
html.motion-on .hero__swing--menu{will-change:transform;transform-origin:10% 0%;animation:heroSwing var(--swing-dur-menu) ease-in-out infinite;animation-delay:-2s}

/* Gradient-wave — back-and-forth flowing gradient (4-stop anodize palette, 300% wide).
   Covers the hero panel, section boxes, and section titles (titles reversed).
   Only under html.motion-on; the base rules keep static var(--grad) for no-JS / reduced-motion. */
html.motion-on .hero__panel,
html.motion-on .box--anodize-1,html.motion-on .box--anodize-2,html.motion-on .box--anodize-3,html.motion-on .box--anodize-4,html.motion-on .box--anodize-5{
  background:linear-gradient(90deg,#e8842c,#c94080,#6428dc,#00b4c8);
  background-size:300% 100%;
  animation:heroWave var(--wave-dur) ease-in-out infinite alternate;
}
html.motion-on .section__title{
  background:linear-gradient(90deg,#00b4c8,#6428dc,#c94080,#e8842c);
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:heroWave var(--wave-dur) ease-in-out infinite alternate;
}
@keyframes heroWave{
  0%{background-position:0% 50%}
  100%{background-position:100% 50%}
}

/* Reverse the wave direction on select boxes for visual variety — counterflow style (default).
   Uniform style omits this. Controlled via html.motion-counterflow class. */
html.motion-counterflow .box--anodize-2,html.motion-counterflow .box--anodize-4{animation-direction:alternate-reverse}