/* ===== Madhu Dance Academy website UI kit — page styles, motion, ambience ===== */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--ink-900);
  color:var(--fg-1);
  font-family:var(--font-sans);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
button{font-family:inherit}

.wrap{max-width:1200px;margin:0 auto;padding:0 32px}
.section{position:relative;padding:120px 0}

/* responsive grids (classes so media queries can override) */
.hero-grid{max-width:1280px;display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:stretch}
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.about-grid{max-width:min(1400px,calc(100vw - 80px));grid-template-columns:minmax(0,2fr) minmax(240px,0.75fr);gap:56px;align-items:center}
.about-photo{width:100%;aspect-ratio:19/10;border-radius:24px;overflow:hidden}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.masonry-3{columns:3;column-gap:20px}
.masonry-3 > *{break-inside:avoid;display:inline-block;width:100%}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px}

/* hero photo — decorative stage rig: truss bar + fanned can fixtures hanging above the frame */
.stage-rig{position:absolute;left:6%;right:6%;top:-24px;height:58px;pointer-events:none;z-index:1;overflow:visible}
.stage-truss{position:absolute;top:0;left:-16px;right:-16px;height:6px;border-radius:3px;
  background:repeating-linear-gradient(90deg, var(--ink-500) 0 9px, var(--ink-900) 9px 11px);
  box-shadow:0 1px 0 rgba(216,178,90,.4), inset 0 1px 0 rgba(255,255,255,.06)}
.stage-fixture-mount{position:absolute;top:6px;width:1px;height:34px;transform-origin:top center}
.fixture-bracket{position:absolute;top:0;left:-1.5px;width:3px;height:9px;background:var(--ink-500)}
.stage-fixture-sway{position:absolute;top:9px;left:0;width:1px;height:100%;transform-origin:top center;animation:fixtureSway 5.5s ease-in-out infinite}
.fixture-can{position:absolute;top:0;left:-10px;width:20px;height:18px;
  clip-path:polygon(28% 0%, 72% 0%, 100% 100%, 0% 100%);
  background:linear-gradient(180deg, var(--ink-600), var(--ink-900));
  border-bottom:2px solid var(--gold-500)}
.fixture-glow{position:absolute;top:16px;left:-6px;width:12px;height:6px;border-radius:50%;
  background:radial-gradient(circle, #FFF7D6 0%, var(--gold-400) 60%, transparent 78%);
  box-shadow:0 0 14px 3px rgba(236,203,121,.6);animation:lampPulse 2.6s ease-in-out infinite}
.fixture-beam{position:absolute;top:18px;left:-42px;width:84px;height:78px;
  background:linear-gradient(180deg, rgba(255,246,214,.5) 0%, rgba(255,246,214,.15) 45%, transparent 85%);
  clip-path:polygon(40% 0%, 60% 0%, 100% 100%, 0% 100%); filter:blur(2px)}
@keyframes fixtureSway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes lampPulse{0%,100%{opacity:.85}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.stage-fixture-sway{animation:none}.fixture-glow{animation:none}}
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .split-grid{grid-template-columns:1fr}
  .about-photo{height:320px}
  .grid-3{grid-template-columns:1fr}
  .masonry-3{columns:1}
  .grid-4{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr}
}

/* ---- shared atoms ---- */
.eyebrow{
  font-family:var(--font-label);text-transform:uppercase;
  letter-spacing:.32em;font-size:14px;color:var(--gold-500);
  display:inline-flex;align-items:center;gap:14px;
}
.eyebrow::before{content:"";width:30px;height:1px;background:var(--gold-500);opacity:.7}

.btn{
  font-family:var(--font-sans);font-weight:500;font-size:15px;letter-spacing:.01em;
  border-radius:999px;padding:14px 28px;border:1px solid transparent;cursor:pointer;
  display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
  transition:transform var(--dur-fast) var(--ease-soft),box-shadow var(--dur-med) var(--ease-soft),background var(--dur-fast);
}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(180deg,var(--gold-400),var(--gold-500));color:var(--fg-on-gold)}
.btn-primary:hover{box-shadow:var(--glow-gold)}
.btn-secondary{background:transparent;color:var(--fg-1);border-color:rgba(236,203,121,.5)}
.btn-secondary:hover{background:var(--surface-1);border-color:var(--gold-400)}
.btn-ghost{background:var(--surface-1);color:var(--fg-1)}
.btn-ghost:hover{background:var(--surface-2)}

/* ---- scroll reveal ----
   Resting state is VISIBLE. Entrance is played via the Web Animations API
   (fill:none) so content is never stuck-hidden if the animation is paused. */
.reveal{} /* marker only */

/* ---- ambience: gold particles + feather trail ---- */
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.particle{position:absolute;border-radius:50%;background:radial-gradient(circle,var(--gold-300),transparent 70%);opacity:.0;animation:drift linear infinite}
@keyframes drift{
  0%{transform:translateY(20px);opacity:0}
  15%{opacity:.7}
  85%{opacity:.5}
  100%{transform:translateY(-120px);opacity:0}
}
.feather-trail{
  position:absolute;border-radius:50%;
  background:var(--grad-peacock);
  filter:blur(70px);opacity:.22;pointer-events:none;z-index:0;
}


/* card hover */
.lift{transition:transform var(--dur-med) var(--ease-stage),box-shadow var(--dur-med) var(--ease-stage),border-color var(--dur-med)}
.lift:hover{transform:translateY(-6px);box-shadow:var(--glow-gold);border-color:rgba(236,203,121,.4)}

/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:80;transition:background var(--dur-med),backdrop-filter var(--dur-med),border-color var(--dur-med)}
.nav.scrolled{background:rgba(8,9,13,.72);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.nav-link{font-size:15px;color:var(--fg-2);transition:color var(--dur-fast)}
.nav-link:hover{color:var(--gold-400)}

/* gallery horizontal scroll */
.h-scroll{display:flex;gap:20px;overflow-x:auto;padding:6px 32px 24px;scrollbar-width:thin;scrollbar-color:var(--gold-600) transparent}
.h-scroll.snapping{scroll-snap-type:x mandatory}
.h-scroll>*{scroll-snap-align:center;flex:0 0 auto}
.h-scroll::-webkit-scrollbar{height:8px}
.h-scroll::-webkit-scrollbar-thumb{background:var(--gold-600);border-radius:999px}

image-slot{--placeholder-color:var(--fg-3)}

.lic svg{display:block;width:100%;height:100%;stroke-width:inherit}

/* ============================================================
   MOTION ART — flowing liquid-gradient field (animated blurred blobs)
   GPU-cheap: transforms only. Reduced-motion → static gradient.
   ============================================================ */
.motion-art{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.motion-art .ma-inner{position:absolute;inset:-12%;filter:blur(64px) saturate(1.15)}
.ma-blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform;opacity:.55}
@keyframes maA{0%{transform:translate(0,0) scale(1)}50%{transform:translate(14%,-10%) scale(1.28)}100%{transform:translate(-8%,12%) scale(.92)}}
@keyframes maB{0%{transform:translate(0,0) scale(1.1)}50%{transform:translate(-16%,8%) scale(.9)}100%{transform:translate(10%,-12%) scale(1.2)}}
@keyframes maC{0%{transform:translate(-6%,6%) scale(.95)}50%{transform:translate(12%,12%) scale(1.22)}100%{transform:translate(-4%,-10%) scale(1)}}
@keyframes maD{0%{transform:translate(8%,-6%) scale(1.05)}50%{transform:translate(-12%,-12%) scale(1.3)}100%{transform:translate(6%,10%) scale(.95)}}
.ma-a{animation:maA 19s var(--ease-soft) infinite alternate}
.ma-b{animation:maB 24s var(--ease-soft) infinite alternate}
.ma-c{animation:maC 21s var(--ease-soft) infinite alternate}
.ma-d{animation:maD 27s var(--ease-soft) infinite alternate}
@media (prefers-reduced-motion: reduce){
  .ma-blob{animation:none!important}
}

/* ============================================================
   BACKGROUND MOOD SYSTEM  (set via html[data-mood])
   "midnight" = all dark (default).  "jewel" = dark base with deep
   peacock/royal/magenta section washes.  "vibrant" = stronger.
   Color is treated as STAGE LIGHTING on a dark stage, not flat fill.
   ============================================================ */
#programs, #instructor { background: var(--grad-stage); transition: background 600ms var(--ease-soft); }
.section, header#top { transition: background 600ms var(--ease-soft); }

/* ---- JEWEL ---- */
html[data-mood="jewel"] header#top{
  background:
    radial-gradient(70% 60% at 88% 12%, rgba(196,46,132,.16), transparent 60%),
    radial-gradient(60% 55% at 8% 90%, rgba(44,75,212,.18), transparent 60%);
}
#about{padding-top:60px}
html[data-mood="jewel"] #about{
  background: radial-gradient(90% 80% at 0% 25%, rgba(44,75,212,.14), transparent 58%), var(--ink-900);
}
html[data-mood="jewel"] #programs{
  background:
    radial-gradient(130% 95% at 50% 0%, rgba(15,166,160,.20), transparent 58%),
    radial-gradient(90% 80% at 100% 100%, rgba(20,148,106,.14), transparent 60%),
    var(--ink-900);
}
html[data-mood="jewel"] .sec-why{
  background: radial-gradient(120% 90% at 50% 100%, rgba(216,178,90,.07), transparent 60%), var(--ink-900);
}
html[data-mood="jewel"] #instructor{
  background:
    radial-gradient(120% 110% at 78% 12%, rgba(44,75,212,.26), transparent 60%),
    radial-gradient(90% 90% at 0% 100%, rgba(124,90,224,.16), transparent 60%),
    var(--ink-900);
}
html[data-mood="jewel"] .sec-testimonials{
  background:
    radial-gradient(120% 100% at 18% 0%, rgba(196,46,132,.20), transparent 60%),
    radial-gradient(90% 90% at 100% 100%, rgba(44,75,212,.12), transparent 60%),
    var(--ink-900);
}
html[data-mood="jewel"] #contact{
  background:
    radial-gradient(100% 120% at 50% 50%, rgba(15,166,160,.16), transparent 55%),
    radial-gradient(120% 120% at 85% 10%, rgba(196,46,132,.16), transparent 60%),
    radial-gradient(120% 120% at 12% 90%, rgba(44,75,212,.16), transparent 60%),
    var(--ink-900);
}

/* ---- VIBRANT (same zones, hotter + more lit) ---- */
html[data-mood="vibrant"] header#top{
  background:
    radial-gradient(75% 65% at 90% 8%, rgba(196,46,132,.12), transparent 60%),
    radial-gradient(70% 60% at 6% 92%, rgba(44,75,212,.12), transparent 60%);
}
html[data-mood="vibrant"] #about{
  background:
    radial-gradient(110% 95% at 0% 25%, rgba(44,75,212,.34), transparent 60%),
    radial-gradient(90% 80% at 100% 90%, rgba(196,46,132,.24), transparent 62%),
    var(--ink-900);
}
html[data-mood="vibrant"] #programs{
  background:
    radial-gradient(130% 100% at 50% 0%, rgba(15,166,160,.42), transparent 60%),
    radial-gradient(100% 95% at 100% 100%, rgba(20,148,106,.32), transparent 64%),
    radial-gradient(90% 90% at 0% 80%, rgba(44,75,212,.18), transparent 62%),
    var(--ink-900);
}
html[data-mood="vibrant"] .sec-why{
  background:
    radial-gradient(110% 95% at 100% 0%, rgba(196,46,132,.30), transparent 60%),
    radial-gradient(100% 90% at 0% 100%, rgba(124,90,224,.26), transparent 62%),
    radial-gradient(80% 70% at 50% 50%, rgba(216,178,90,.10), transparent 60%),
    var(--ink-900);
}
html[data-mood="vibrant"] #gallery{
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(15,166,160,.30), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(196,46,132,.26), transparent 62%),
    radial-gradient(80% 70% at 50% 50%, rgba(44,75,212,.16), transparent 60%),
    var(--ink-900);
}
html[data-mood="vibrant"] #instructor{
  background:
    radial-gradient(120% 110% at 78% 12%, rgba(44,75,212,.48), transparent 62%),
    radial-gradient(100% 100% at 0% 100%, rgba(124,90,224,.36), transparent 64%),
    var(--ink-900);
}
html[data-mood="vibrant"] .sec-testimonials{
  background:
    radial-gradient(120% 100% at 18% 0%, rgba(196,46,132,.42), transparent 62%),
    radial-gradient(100% 100% at 100% 100%, rgba(44,75,212,.30), transparent 64%),
    var(--ink-900);
}
html[data-mood="vibrant"] #contact{
  background:
    radial-gradient(100% 120% at 50% 40%, rgba(15,166,160,.34), transparent 58%),
    radial-gradient(120% 120% at 85% 10%, rgba(196,46,132,.40), transparent 62%),
    radial-gradient(120% 120% at 12% 95%, rgba(44,75,212,.34), transparent 62%),
    var(--ink-900);
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .particle,.feather-trail{animation:none}
  .cursor-eye{display:none}
}
@media (max-width:1000px){
  .hero-aside{display:none!important}
}
@media (max-width:760px){
  .section{padding:80px 0}
  .wrap{padding:0 22px}
  .hide-sm{display:none!important}
}

/* ---- FAQ chat widget ---- */
.faq-widget{position:fixed;bottom:28px;right:28px;z-index:200;display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.faq-trigger{width:54px;height:54px;border-radius:50%;background:linear-gradient(180deg,var(--gold-400),var(--gold-600));border:none;color:var(--ink-900);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(216,178,90,.45);transition:transform .2s,box-shadow .2s;flex-shrink:0}
.faq-trigger:hover{transform:scale(1.08);box-shadow:0 6px 28px rgba(216,178,90,.6)}
.faq-panel{width:320px;max-height:480px;display:flex;flex-direction:column;border-radius:20px;overflow:hidden;background:#1a1c2e;border:1px solid rgba(255,255,255,.1);box-shadow:0 16px 48px rgba(0,0,0,.7);animation:faq-in .22s var(--ease-stage) both;-webkit-font-smoothing:antialiased;transform:translateZ(0)}
@keyframes faq-in{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.faq-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.08);background:#14152a;flex-shrink:0}
.faq-close{background:none;border:none;color:rgba(255,255,255,.5);cursor:pointer;padding:4px;border-radius:6px;display:flex;align-items:center;justify-content:center;transition:color .15s}
.faq-close:hover{color:#fff}
.faq-body{overflow-y:auto;padding:14px 14px 18px;display:flex;flex-direction:column;gap:8px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.faq-bot-bubble{background:#232540;border:1px solid rgba(255,255,255,.08);border-radius:14px 14px 14px 4px;padding:11px 14px;font-size:13.5px;line-height:1.55;color:rgba(255,255,255,.85)}
.faq-item{display:flex;flex-direction:column;gap:6px}
.faq-q{background:#252742;border:1px solid rgba(216,178,90,.35);border-radius:20px;padding:9px 14px;font-size:13px;color:var(--gold-400);cursor:pointer;text-align:left;line-height:1.4;transition:background .15s,border-color .15s;font-family:var(--font-sans)}
.faq-q:hover,.faq-q.active{background:#2e3054;border-color:var(--gold-400)}
.faq-a{background:#232540;border:1px solid rgba(255,255,255,.08);border-radius:4px 14px 14px 14px;padding:11px 14px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.8);animation:faq-in .18s ease both}