/* ════════════ Artistar Music Academy — Shared Styles ════════════ */
:root {
  --navy:#0B2E59; --navy-deep:#071d3a; --navy-light:#0e3a6e; --cream:#F8F4EE;
  /* fonts (overridden by [data-fonth]/[data-fontb]) */
  --font-display:'Forum'; --font-body:'Jost';
  /* accent system (overridden by [data-accent]) */
  --accent:#ffffff; --accent-2:#ffffff; --accent-ink:#0B2E59; --accent-rgb:255 255 255;
  /* primary button contexts */
  --btn-dark-bg:#ffffff; --btn-dark-ink:#0B2E59;       /* buttons on dark sections */
  --btn-light-bg:#0B2E59; --btn-light-ink:#ffffff;     /* buttons on cream/white sections */
}
/* ── Accent themes ── */
[data-accent="white"] { --accent:#ffffff; --accent-2:#ffffff; --accent-ink:#0B2E59; --accent-rgb:255 255 255;
  --btn-dark-bg:#ffffff; --btn-dark-ink:#0B2E59; --btn-light-bg:#0B2E59; --btn-light-ink:#ffffff; }
[data-accent="gold"] { --accent:#C9A84C; --accent-2:#e0c06e; --accent-ink:#071d3a; --accent-rgb:201 168 76;
  --btn-dark-bg:linear-gradient(135deg,#C9A84C,#e0c06e,#C9A84C); --btn-dark-ink:#071d3a;
  --btn-light-bg:linear-gradient(135deg,#C9A84C,#e0c06e,#C9A84C); --btn-light-ink:#071d3a; }
[data-accent="navy"] { --accent:#0B2E59; --accent-2:#0e3a6e; --accent-ink:#ffffff; --accent-rgb:11 46 89;
  --btn-dark-bg:#ffffff; --btn-dark-ink:#0B2E59; --btn-light-bg:#0B2E59; --btn-light-ink:#ffffff; }

/* ── Font themes ── */
[data-fonth="forum"]    { --font-display:'Forum'; }
[data-fonth="spartan"]  { --font-display:'League Spartan'; }
[data-fonth="fraunces"] { --font-display:'Fraunces'; }
[data-fontb="jost"]     { --font-body:'Jost'; }
[data-fontb="spartan"]  { --font-body:'League Spartan'; }
[data-fontb="hanken"]   { --font-body:'Hanken Grotesk'; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; width: 100%; }
body { overflow-x: hidden; width: 100%; max-width: 100vw; background: var(--navy); font-family:var(--font-body),'Hanken Grotesk',sans-serif; -webkit-font-smoothing:antialiased; letter-spacing:-0.01em; }
.font-serif { font-family:var(--font-display),'Fraunces',serif!important; font-optical-sizing:auto; }
[data-fonth="spartan"] h1.font-serif, [data-fonth="spartan"] h2.font-serif { letter-spacing:-0.01em; }

/* ── Scroll progress bar ── */
#scroll-progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:10001; background:linear-gradient(90deg, rgba(255,255,255,.55), #ffffff); box-shadow:0 0 8px rgba(255,255,255,.4); transition:width .08s linear; pointer-events:none; }

/* ── Accessibility: visible focus + skip link ── */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, .gal-filter:focus-visible, .team-card:focus-visible {
  outline:2px solid currentColor; outline-offset:3px; border-radius:6px;
}
.skip-link { position:fixed; left:12px; top:-60px; z-index:10002; background:#0B2E59; color:#fff; padding:10px 18px; border-radius:0 0 10px 10px; font-size:14px; font-weight:600; transition:top .25s ease; }
.skip-link:focus { top:0; outline:2px solid #fff; }

/* ── Preloader / page-transition veil ── */
#page-veil { position:fixed; inset:0; z-index:10000; background:#050f1f; display:flex; align-items:center; justify-content:center; transition:opacity .5s ease, visibility .5s ease; }
#page-veil img { width:130px; height:auto; will-change:opacity, transform; animation:veilPulse 1.5s ease-in-out infinite; }
#page-veil.hide { opacity:0; visibility:hidden; pointer-events:none; }
@keyframes veilPulse { 0%,100% { opacity:.4; transform:scale(.97); } 50% { opacity:1; transform:scale(1.02); } }
@media (prefers-reduced-motion: reduce) { #page-veil img { animation:none; } #page-veil { transition:opacity .25s ease; } }

/* ── Film grain (the quiet luxury tell) ── */
body::after { content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.04; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) { body::after { display:none; } }

/* ── Oversized editorial watermark ── */
.watermark { position:absolute; font-family:'Fraunces',serif; font-weight:600; pointer-events:none; user-select:none; line-height:.8; white-space:nowrap; }
.watermark-dark { color:rgb(var(--accent-rgb) / .04); }
.watermark-light { color:rgba(11,46,89,.035); }

/* ── Refined section backgrounds ── */
.sec-cream { background:radial-gradient(120% 80% at 20% 0%, #fbf8f2 0%, #F8F4EE 45%, #f1ebe0 100%); position:relative; }
.sec-navy { background:radial-gradient(120% 90% at 80% 0%, #0e3a6e 0%, #0B2E59 40%, #071d3a 100%); position:relative; }
.sec-grid-soft::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgb(var(--accent-rgb) / .035) 1px,transparent 1px); background-size:100% 7px; mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent); }
.seam { height:1px; background:linear-gradient(90deg,transparent,rgb(var(--accent-rgb) / .35),transparent); }

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: #071d3a; }
::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }

/* Reveal animations */
.reveal { opacity:0; transform:translateY(40px); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-left { opacity:0; transform:translateX(-50px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.reveal-left.visible { opacity:1; transform:translateX(0); }
.reveal-right { opacity:0; transform:translateX(50px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.reveal-right.visible { opacity:1; transform:translateX(0); }
.reveal-scale { opacity:0; transform:scale(.92); transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1); }
.reveal-scale.visible { opacity:1; transform:scale(1); }
.delay-1{transition-delay:.08s!important}.delay-2{transition-delay:.16s!important}.delay-3{transition-delay:.24s!important}
.delay-4{transition-delay:.32s!important}.delay-5{transition-delay:.4s!important}.delay-6{transition-delay:.48s!important}

/* Navbar */
#navbar { transition: all .4s ease; }
#navbar.scrolled { background: rgba(7,29,58,.97)!important; backdrop-filter: blur(20px); box-shadow: 0 2px 40px rgba(0,0,0,.4); }
.nav-link.active { color:var(--accent)!important; }

/* Hero shared */
.page-hero { background:linear-gradient(135deg,#071d3a 0%,#0B2E59 45%,#0e3a6e 75%,#071d3a 100%); position:relative; overflow:hidden; }
.page-hero > .max-w-7xl, .page-hero > .max-w-6xl, .page-hero > .max-w-5xl, .page-hero > .max-w-2xl { position:relative; z-index:10; }
.hero-grid { position:absolute; inset:0; background-image:linear-gradient(rgb(var(--accent-rgb) / .06) 1px,transparent 1px),linear-gradient(90deg,rgb(var(--accent-rgb) / .06) 1px,transparent 1px); background-size:80px 80px; }
.hero-glow { position:absolute; border-radius:50%; filter:blur(120px); pointer-events:none; }
.glow-1 { width:600px; height:600px; background:radial-gradient(circle,rgb(var(--accent-rgb) / .12) 0%,transparent 70%); top:-100px; right:-100px; }
.glow-2 { width:400px; height:400px; background:radial-gradient(circle,rgba(14,58,110,.8) 0%,transparent 70%); bottom:100px; left:-50px; }

/* Centered hero variant (toggle in Design picker) */
[data-hero="centered"] #hero .grid { display:flex!important; flex-direction:column; align-items:center; text-align:center; }
[data-hero="centered"] #hero .reveal-right { display:none!important; }
[data-hero="centered"] #hero .grid > div:first-child { max-width:820px; }
[data-hero="centered"] #hero .grid > div:first-child > div { justify-content:center; }
[data-hero="centered"] #hero .max-w-md { max-width:46rem; margin-left:auto; margin-right:auto; }

/* Video band */
.band-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; }

/* Full-bleed photo band (parallax on desktop) */
.photo-band { position:relative; background-size:cover; background-position:center 35%; }
@media (min-width:1024px) and (prefers-reduced-motion: no-preference) { .photo-band { background-attachment:fixed; } }
.photo-band .band-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,15,31,.82) 0%, rgba(11,46,89,.62) 50%, rgba(5,15,31,.85) 100%); }

/* Photo-backed CTA section */
.photo-cta { position:relative; background-size:cover; background-position:center 30%; }
.photo-cta .band-overlay { position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,15,31,.88) 0%, rgba(7,29,58,.78) 100%); }

/* Hero video background */
.hero-video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 40%; transform-origin:center center; will-change:transform; }
.hero-darken { position:absolute; inset:0; background:#040a16; opacity:0; pointer-events:none; }
.hero-overlay--video { position:absolute; inset:0; pointer-events:none; background:
  linear-gradient(90deg, rgba(4,10,22,.93) 0%, rgba(5,15,31,.74) 30%, rgba(5,15,31,.34) 60%, rgba(5,15,31,.12) 100%),
  linear-gradient(0deg, rgba(4,10,22,.8) 0%, rgba(4,10,22,0) 32%, rgba(4,10,22,0) 68%, rgba(4,10,22,.45) 100%); }
@media (max-width:1023px){ .hero-overlay--video { background:linear-gradient(0deg, rgba(4,10,22,.92) 0%, rgba(5,15,31,.6) 55%, rgba(5,15,31,.45) 100%); } }
.hero-overlay--center { position:absolute; inset:0; pointer-events:none; background:
  radial-gradient(120% 100% at 50% 48%, rgba(5,15,31,.5) 0%, rgba(5,15,31,.74) 68%, rgba(4,10,22,.9) 100%),
  linear-gradient(0deg, rgba(4,10,22,.82) 0%, rgba(4,10,22,.15) 45%, rgba(4,10,22,.55) 100%); }

/* Piano hero background */
.hero-bg { position:absolute; inset:0; background-size:cover; background-position:center 30%; transform:scale(1.05); animation:kenburns 22s ease-in-out infinite alternate; will-change:transform; }
@keyframes kenburns { from{transform:scale(1.05)} to{transform:scale(1.16) translateY(-1.5%)} }
.hero-overlay { position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(5,15,31,.96) 0%, rgba(7,29,58,.86) 38%, rgba(11,46,89,.55) 75%, rgba(14,58,110,.45) 100%),
  linear-gradient(0deg, rgba(5,15,31,.95) 0%, rgba(5,15,31,0) 35%, rgba(5,15,31,0) 70%, rgba(5,15,31,.55) 100%); }
.hero-vignette { position:absolute; inset:0; box-shadow:inset 0 0 200px 40px rgba(5,15,31,.7); pointer-events:none; }

.music-note { position:absolute; opacity:0; color:rgb(var(--accent-rgb) / .25); animation:floatNote linear infinite; pointer-events:none; user-select:none; }
@keyframes floatNote { 0%{opacity:0;transform:translateY(0) rotate(0)} 10%{opacity:1} 90%{opacity:.3} 100%{opacity:0;transform:translateY(-100vh) rotate(20deg)} }

.gold-shimmer { background:linear-gradient(90deg,var(--accent) 0%,var(--accent-2) 40%,var(--accent) 60%,var(--accent) 100%); background-size:200% auto; -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; animation:shimmer 4s linear infinite; }
@keyframes shimmer { to { background-position:200% center; } }

/* Marquee */
.marquee-track { display:flex; width:max-content; animation:marquee 28s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* Cards */
.lift-card { transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease; }
.lift-card:hover { transform:translateY(-8px); box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 0 1px rgb(var(--accent-rgb) / .3); }

.program-card { position:relative; overflow:hidden; cursor:pointer; transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s ease; }
.program-card:hover { transform:translateY(-8px); box-shadow:0 30px 60px rgba(0,0,0,.4),0 0 0 1px rgb(var(--accent-rgb) / .3); }
.program-card::before { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgb(var(--accent-rgb) / .08) 0%,transparent 60%); opacity:0; transition:opacity .4s; z-index:1; }
.program-card:hover::before { opacity:1; }
.program-icon-wrap { width:64px; height:64px; border-radius:16px; display:flex; align-items:center; justify-content:center; background:rgb(var(--accent-rgb) / .1); border:1px solid rgb(var(--accent-rgb) / .2); transition:all .4s ease; }
.program-card:hover .program-icon-wrap { background:rgb(var(--accent-rgb) / .2); border-color:rgb(var(--accent-rgb) / .5); transform:scale(1.1); }

/* Team cards */
.team-card { position:relative; overflow:hidden; border-radius:18px; transition:transform .4s cubic-bezier(.16,1,.3,1); background:#071d3a; }
.team-card:hover { transform:translateY(-6px); }
.team-card img { transition:transform .6s cubic-bezier(.16,1,.3,1); }
.team-card:hover img { transform:scale(1.06); }
.team-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(7,29,58,.96) 0%,rgba(7,29,58,.35) 55%,transparent 100%); }

/* ══ Floating WhatsApp widget (multi-number) ══ */
#wa-fab { position:fixed; right:18px; bottom:18px; z-index:8990; width:54px; height:54px; border-radius:50%; background:#25D366; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; box-shadow:0 8px 30px rgba(37,211,102,.45); transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
#wa-fab:hover { transform:translateY(-3px) scale(1.05); box-shadow:0 12px 36px rgba(37,211,102,.55); }
#wa-panel { position:fixed; right:18px; bottom:84px; z-index:8990; width:300px; background:#fff; border-radius:18px; overflow:hidden; box-shadow:0 25px 60px rgba(7,29,58,.35); transform:translateY(12px) scale(.97); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1); }
#wa-panel.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
#wa-panel .wa-head { background:#075E54; padding:16px 18px; color:#fff; }
.wa-opt { display:flex; align-items:center; gap:12px; padding:13px 18px; border-bottom:1px solid #eef1f4; cursor:pointer; transition:background .2s ease; text-decoration:none; }
.wa-opt:last-child { border-bottom:none; }
.wa-opt:hover { background:#f2faf5; }
.wa-opt .wa-ico { width:38px; height:38px; border-radius:50%; background:rgba(37,211,102,.12); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.wa-opt .wa-name { color:#0B2E59; font-size:14px; font-weight:600; line-height:1.2; }
.wa-opt .wa-sub { color:#64748b; font-size:12px; margin-top:2px; }
@media (max-width:480px){ #wa-panel{ right:12px; left:12px; width:auto; } }

/* FAQ accordion */
.faq-item { background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:14px; transition:border-color .3s ease, background .3s ease; }
.faq-item[open] { border-color:rgba(var(--accent-rgb)/.35); background:rgba(255,255,255,.06); }
.faq-item summary { list-style:none; cursor:pointer; padding:18px 22px; color:rgba(255,255,255,.85); font-weight:500; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; font-size:22px; line-height:1; color:var(--accent); flex-shrink:0; transition:transform .3s ease; }
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item summary:hover { color:#fff; }
.faq-item p { padding:0 22px 18px; color:rgba(255,255,255,.55); font-size:14px; line-height:1.7; margin:0; }

/* Instructor bio overlay (hover on desktop, tap on touch) */
.bio-overlay { background:linear-gradient(to top, rgba(5,15,31,.97) 0%, rgba(7,29,58,.92) 70%, rgba(7,29,58,.75) 100%); opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .35s cubic-bezier(.16,1,.3,1); pointer-events:none; }
@media (hover:hover) { .team-card:hover .bio-overlay, .team-card:focus-visible .bio-overlay { opacity:1; transform:translateY(0); } }
.team-card.bio-open .bio-overlay { opacity:1; transform:translateY(0); }

/* Testimonial */
.testimonial-card { background:white; border-radius:20px; position:relative; transition:transform .4s ease,box-shadow .4s ease; }
.testimonial-card:hover { transform:translateY(-6px); box-shadow:0 30px 60px rgba(11,46,89,.15); }
.testimonial-card::before { content:'\201C'; position:absolute; top:20px; left:24px; font-family:'Fraunces',serif; font-size:80px; color:rgb(var(--accent-rgb) / .15); line-height:1; pointer-events:none; }

/* Buttons */
.btn-gold { background:var(--btn-dark-bg); background-size:200% auto; color:var(--btn-dark-ink); font-weight:600; transition:background-position .4s ease,transform .2s ease,box-shadow .3s ease,filter .2s ease; }
.btn-gold:hover { background-position:right center; transform:translateY(-2px); filter:brightness(.97); box-shadow:0 10px 30px rgba(var(--accent-rgb)/.35); }
.sec-cream .btn-gold, .bg-cream .btn-gold, .bg-white .btn-gold, [style*="F8F4EE"] .btn-gold { background:var(--btn-light-bg); color:var(--btn-light-ink); }
.btn-outline-gold { border:1.5px solid var(--accent); color:var(--accent); transition:all .3s ease; }
.btn-outline-gold:hover { background:var(--accent); color:var(--accent-ink); transform:translateY(-2px); }
.btn-outline-navy { border:1.5px solid #0B2E59; color:#0B2E59; transition:all .3s ease; }
.btn-outline-navy:hover { background:#0B2E59; color:#fff; transform:translateY(-2px); }

.stat-number { font-variant-numeric:tabular-nums; }

/* Gallery / images */
.gallery-img { overflow:hidden; border-radius:16px; }
.gallery-img img { transition:transform .6s cubic-bezier(.16,1,.3,1); width:100%; height:100%; object-fit:cover; }
.gallery-img:hover img { transform:scale(1.06); }

.gold-line { width:60px; height:2px; background:linear-gradient(90deg,transparent,var(--accent),transparent); }

/* Gallery filter active state */
.gal-filter.is-active { background:#0B2E59; border-color:#0B2E59; color:#fff!important; }

/* ══ Design Options picker ══ */
#designer-toggle { position:fixed; left:18px; bottom:18px; z-index:9000; display:flex; align-items:center; gap:8px; background:#0B2E59; color:#fff; border:1px solid rgba(255,255,255,.18); border-radius:999px; padding:10px 16px; font-size:13px; font-weight:500; cursor:pointer; box-shadow:0 8px 30px rgba(0,0,0,.35); transition:transform .25s ease,background .25s ease; }
#designer-toggle:hover { transform:translateY(-2px); background:#0e3a6e; }
#designer-panel { position:fixed; left:18px; bottom:74px; z-index:9000; width:280px; background:rgba(7,21,40,.97); backdrop-filter:blur(20px); border:1px solid rgba(255,255,255,.14); border-radius:18px; padding:20px; box-shadow:0 25px 60px rgba(0,0,0,.5); transform:translateY(12px) scale(.97); opacity:0; pointer-events:none; transition:opacity .3s ease,transform .3s cubic-bezier(.16,1,.3,1); }
#designer-panel.open { opacity:1; transform:translateY(0) scale(1); pointer-events:auto; }
.dz-group { margin-bottom:16px; }
.dz-label { color:rgba(255,255,255,.45); font-size:10px; letter-spacing:.22em; text-transform:uppercase; margin-bottom:9px; }
.dz-opts { display:flex; gap:6px; flex-wrap:wrap; }
.dz-opt { flex:1; min-width:0; text-align:center; padding:8px 6px; border-radius:10px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04); color:rgba(255,255,255,.7); font-size:12px; cursor:pointer; transition:all .2s ease; white-space:nowrap; }
.dz-opt:hover { border-color:rgba(255,255,255,.4); color:#fff; }
.dz-opt.active { background:#fff; border-color:#fff; color:#0B2E59; font-weight:600; }
.dz-swatch { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:5px; vertical-align:middle; }
/* Keep accents legible on light sections when accent is white */
[data-accent="white"] .sec-cream .text-gold, [data-accent="white"] .bg-cream .text-gold, [data-accent="white"] .bg-white .text-gold,
[data-accent="white"] .sec-cream .gold-shimmer, [data-accent="white"] .bg-cream .gold-shimmer { color:#0B2E59!important; -webkit-text-fill-color:#0B2E59!important; }
[data-accent="white"] .sec-cream .gold-line, [data-accent="white"] .bg-cream .gold-line, [data-accent="white"] .bg-white .gold-line { background:linear-gradient(90deg,transparent,#0B2E59,transparent); }
[data-accent="navy"] .sec-cream .text-gold, [data-accent="navy"] .bg-cream .text-gold, [data-accent="navy"] .bg-white .text-gold { color:#0B2E59!important; }

.countdown-box { background:rgba(255,255,255,.05); border:1px solid rgb(var(--accent-rgb) / .3); border-radius:12px; backdrop-filter:blur(10px); transition:all .3s ease; }
.countdown-box:hover { background:rgb(var(--accent-rgb) / .08); border-color:rgb(var(--accent-rgb) / .5); }

/* Timeline */
.timeline-item { position:relative; padding-left:2.5rem; }
.timeline-item::before { content:''; position:absolute; left:0; top:6px; width:14px; height:14px; border-radius:50%; background:var(--navy); box-shadow:0 0 0 4px rgba(11,46,89,.15); }
.timeline-item::after { content:''; position:absolute; left:6px; top:20px; bottom:-24px; width:2px; background:linear-gradient(to bottom,rgba(11,46,89,.3),rgba(11,46,89,.05)); }
.timeline-item:last-child::after { display:none; }

/* ════════ Handcrafted micro-interactions ════════ */
/* Heading mask reveal — text rises out of its own line */
.mask-reveal { overflow:hidden; }
.mask-reveal .mask-inner { display:inline-block; transform:translateY(115%) rotate(2deg); opacity:0; transition:transform 1s cubic-bezier(.16,1,.3,1), opacity 1s ease; }
.mask-reveal.visible .mask-inner { transform:translateY(0) rotate(0); opacity:1; }

/* Magnetic CTA */
.magnetic { transition:transform .35s cubic-bezier(.16,1,.3,1); will-change:transform; }

/* Cursor-follow spotlight on cards */
.spotlight::after { content:''; position:absolute; inset:0; border-radius:inherit; opacity:0; transition:opacity .45s ease; pointer-events:none; z-index:2;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgb(var(--accent-rgb) / .14), transparent 62%); }
.spotlight:hover::after { opacity:1; }

/* Link underline that draws */
.ulink { position:relative; }
.ulink::after { content:''; position:absolute; left:0; bottom:-3px; width:100%; height:1px; background:currentColor; transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.16,1,.3,1); opacity:.7; }
.ulink:hover::after { transform:scaleX(1); transform-origin:left; }

/* Image curtain reveal */
.img-curtain { clip-path:inset(0 0 100% 0); transition:clip-path 1.15s cubic-bezier(.16,1,.3,1); }
.img-curtain.visible { clip-path:inset(0 0 0 0); }

/* Gold line that draws on reveal */
.line-draw { width:0; transition:width 1s cubic-bezier(.16,1,.3,1) .2s; }
.line-draw.visible { width:60px; }

/* Button arrow nudge */
.btn-arrow svg { transition:transform .35s cubic-bezier(.16,1,.3,1); }
.btn-arrow:hover svg { transform:translateX(5px); }

@media (prefers-reduced-motion: reduce) {
  .mask-reveal .mask-inner { transform:none!important; opacity:1!important; }
  .img-curtain { clip-path:none!important; }
  .line-draw { width:60px!important; }
  .magnetic { transform:none!important; }
  .reveal,.reveal-left,.reveal-right,.reveal-scale { opacity:1!important; transform:none!important; transition:none!important; }
  .music-note { display:none!important; }
  .gold-shimmer { animation:none!important; }
  * { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}

/* ════════ Mobile optimization ════════ */
@media (max-width: 640px) {
  .scroll-cue { display: none; }
  .reveal-left, .reveal-right { transform: translateY(24px) !important; }
  .reveal-left.visible, .reveal-right.visible { transform: translateY(0) !important; }
  .hero-glow { transform: scale(0.6); }
  .watermark { display: none; }
}