/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}

/* 1) Fade-up on scroll — matches .anim-fadeup + .anim-inview */
.anim-fadeup { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
.anim-fadeup.anim-inview { opacity: 1; transform: translateY(0); }
/* Allow global toggle via data-anim-fadeup="off" */
:root[data-anim-fadeup="off"] .anim-fadeup { opacity: 1; transform: none; }

/* 2) Heading shimmer (applies to all h1 when enabled) */
h1{ position:relative; overflow:hidden; isolation:isolate; }
:root[data-anim-shimmer="on"] h1::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.25) 50%, transparent 100%);
  transform: translateX(-120%);
  animation: shimmer 3.5s ease-in-out infinite;
  pointer-events:none;
}
@keyframes shimmer{
  0%{ transform: translateX(-120%); }
  60%,100%{ transform: translateX(120%); }
}

/* 3) Chip hover lift/glow */
.chip{
  transition: transform .14s ease, box-shadow .2s ease, background .2s ease;
}
:root[data-anim-chipglow="on"] .chip:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 0 0 2px rgba(47,111,90,.22);
  background:#E1D4C6;
}

/* 4) CTA ripple on click */
.cta{ position:relative; overflow:hidden; }
:root[data-anim-cta-ripple="on"] .cta:active::after{
  content:"";
  position:absolute; left:50%; top:50%;
  width:0; height:0; border-radius:50%;
  background: rgba(255,255,255,.35);
  transform: translate(-50%,-50%);
  animation: ripple .5s ease;
}
@keyframes ripple{
  0%   { width:0; height:0; opacity:.5; }
  100% { width:240%; height:240%; opacity:0; }
}

/* 5) Accordion smooth height (no display:none here) */
.acc-panel{
  overflow:hidden; max-height:0; transition:max-height .28s ease, padding .28s ease;
  padding: 0 18px; background:rgba(255,255,255,.4);
}
/* Class-based accordion state — add AFTER existing .acc-panel rule */
.acc-item .acc-panel{
  max-height:0; overflow:hidden;
  padding-top:0; padding-bottom:0;
  transition:max-height .28s ease, padding .28s ease;
}
.acc-item.open .acc-panel{
  max-height:1200px;              /* big enough for your tallest panel */
  padding-top:18px; padding-bottom:18px;
}

:root[data-anim-accordion="off"] .acc-panel{ transition:none; }

/* 6) Tabs sliding underline (needs JS to set CSS vars) */
#modules .tabbar{ position:relative; }
#modules .tabbar::after{
  content:""; position:absolute; height:3px; width:var(--ind-width, 0); bottom:0; left:0;
  background: var(--accent); border-radius:999px;
  transition: transform .18s ease, width .18s ease;
  transform: translateX(var(--ind-left, 0));
}
:root[data-anim-tabs-underline="off"] #modules .tabbar::after{ display:none; }

/* 7) Copy button pulse when copied */
.copy-btn.copied{
  background:#2F6F5A; border-color:#2F6F5A; color:#fff;
}
:root[data-anim-copy-pulse="on"] .copy-btn.copied{
  animation: pulse .6s ease;
}
@keyframes pulse{
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47,111,90,.4); }
  70%{ transform: scale(1.04); box-shadow: 0 0 0 10px rgba(47,111,90,0); }
  100%{ transform: scale(1); box-shadow: none; }
}

/* 8) Parallax drift on doc chips */
:root[data-anim-parallax="off"] .strip h2{ transform:none !important; transition:none !important; }
.strip h2{ will-change: transform; transition: transform .1s linear; }

/* Only the big NOODL heading uses MuseoModerno */
.software-title{
  font-family: "MuseoModerno", sans-serif !important;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 4rem;
}

/* animatable custom property for weight */
@property --title-wght {
  syntax: "<number>";
  inherits: true;
  initial-value: 700;
}

.software-title{
  font-family: "MuseoModerno", sans-serif;
  font-optical-sizing: auto;
  /* Use the custom property to drive the axis */
  font-variation-settings: "wght" var(--title-wght);
  /* Good fallback weight */
  font-weight: 700;
  /* Animate the custom property itself */
  transition: --title-wght .35s ease;
}

/* On hover bump the weight */
.software-title:hover{
  --title-wght: 850;
}