/* Maude House — marketing site UI kit layout */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--cream);color:var(--ink);font-family:var(--font-sans);font-size:var(--t-body);line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
button{font-family:inherit}
a{color:inherit;text-decoration:none}

.mh-container{max-width:1240px;margin:0 auto;padding:0 40px}
.mh-section{padding:var(--sp-10) 0}

/* buttons */
.mh-btn{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;font-weight:500;font-size:16px;border-radius:var(--r-pill);padding:15px 30px;border:none;cursor:pointer;letter-spacing:.01em;transition:transform var(--dur) var(--ease),background var(--dur) var(--ease),color var(--dur) var(--ease)}
.mh-btn--primary{background:var(--orange);color:var(--cream)}
.mh-btn--primary:hover{background:var(--accent-press)}
.mh-btn--primary:active{transform:scale(.98)}
.mh-btn--outline{background:transparent;color:var(--ink);border:1.5px solid var(--ink)}
.mh-btn--outline:hover{background:var(--ink);color:var(--cream)}
.mh-btn--ghost{background:transparent;padding:6px 2px;border-radius:0;text-decoration:none}
.mh-btn--ghost span{border-bottom:1.5px solid currentColor;padding-bottom:2px;text-decoration:none}
.mh-btn--ghost:hover{color:var(--accent)}
.mh-btn--light{background:var(--cream);color:var(--ink)}
.mh-btn--light:hover{background:var(--white)}

/* eyebrow */
.mh-eyebrow{font-size:var(--t-eyebrow);font-weight:500;letter-spacing:normal;text-transform:none;color:var(--accent)}
.mh-eyebrow--muted{color:var(--fg-muted)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}

::selection{background:var(--orange);color:var(--cream)}

/* ---- Animated Highlight (Tonic “Spicy Animations” signature) ----
   A colored bar that wipes in left→right BEHIND the words as it scrolls
   into view. Uses a keyframe animation on a pseudo-element bar (animations
   interpolate reliably); text stays readable the whole time. */
.mh-highlight{
  position:relative;
  isolation:isolate;
  padding:0 0.12em;
}
.mh-highlight::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--lime);
  transform:scaleX(0);
  transform-origin:left center;
  z-index:-1;
}
.mh-highlight.hl-in::before{
  animation:mhWipe 0.9s cubic-bezier(0.45,0.03,0.52,0.96) forwards;
}
@keyframes mhWipe{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  .mh-highlight::before{transform:scaleX(1)}
  .mh-highlight.hl-in::before{animation:none}
}

/* ---- Crossed diagonal marquee (the signature section) ---- */
.mh-xmarquee{position:relative;height:300px;overflow:hidden;margin:8px 0}
.mh-band{position:absolute;left:-14%;width:128%;overflow:hidden;padding:14px 0}
.mh-band--a{top:96px;transform:rotate(-9deg);background:var(--lilac)}
.mh-band--b{top:96px;transform:rotate(9deg);background:var(--blue)}
.mh-mrow{display:flex;width:max-content;white-space:nowrap}
.mh-mrow span{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,4.4vw,3.4rem);line-height:1;text-transform:uppercase;display:inline-flex;align-items:center;color:var(--ink)}
.mh-mrow .sl{margin:0 clamp(20px,3vw,42px);font-size:0.7em;color:var(--ink)}
.mh-mrow--a{animation:mhSlideA 22s linear infinite}
.mh-mrow--b{animation:mhSlideB 22s linear infinite}
@keyframes mhSlideA{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mhSlideB{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---- Scroll spinner (circular text) ---- */
.mh-spin{animation:mhSpin 11s linear infinite}
@keyframes mhSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.mh-spin text{font-family:var(--font-sans);font-weight:500;letter-spacing:.1em;text-transform:uppercase;fill:var(--ink)}
@media (prefers-reduced-motion:reduce){.mh-spin{animation:none}}

/* ---- Text reveal (words fade up one at a time) ---- */
.tonic-reveal-word{display:inline-block;opacity:0;transform:translateY(8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.tonic-reveal-word.in{opacity:1;transform:none}