/* ===== Mello clone — custom styles on top of Tailwind ===== */

/* Lenis smooth-scroll requirements */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
html:not(.lenis) { scroll-behavior: smooth; }

body.no-scroll { overflow: hidden; }

/* Nav underline hover */
.navlink { position: relative; transition: color .2s ease; }
.navlink::after {
  content: ""; position: absolute; left: 0; bottom: -4px; height: 2px; width: 0;
  background: currentColor; transition: width .25s ease;
}
.navlink:hover::after { width: 100%; }

/* Sticky-nav shadow when scrolled */
#nav.scrolled { box-shadow: 0 6px 24px -12px rgba(0,0,0,.25); }

/* ===== Scroll-reveal ===== */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s cubic-bezier(.22,.61,.36,1),
              transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* Reveal direction variants */
.reveal[data-reveal="left"]  { transform: translateX(-48px); }
.reveal[data-reveal="right"] { transform: translateX(48px); }
.reveal[data-reveal="scale"] { transform: scale(.9); }
.reveal[data-reveal="left"].in,
.reveal[data-reveal="right"].in,
.reveal[data-reveal="scale"].in { transform: none; }

/* Parallax elements get GPU compositing */
[data-parallax] { backface-visibility: hidden; }

/* Scroll progress bar */
#scroll-progress { transition: width .08s linear; }

/* Hero wordmark → bottom-right watermark */
#hero-word-wrap { align-items: flex-start; }
#hero-word {
  margin-top: 11vh;
  font-size: 26vw;
  line-height: 0.8;
  letter-spacing: -0.02em;
  transform-origin: top left;
  text-shadow: 0 6px 40px rgba(0, 0, 0, .22);
  will-change: transform;
}

/* FAST bento — animated comparison bars */
.bar-fill { width: 0; transition: width 1.5s cubic-bezier(.22,.61,.36,1); }

/* FAST bento — "dial your dose" range slider */
.dial {
  -webkit-appearance: none; appearance: none;
  height: 8px; border-radius: 9999px; cursor: pointer;
  background: linear-gradient(to right, #cd6149 44%, rgba(28,27,25,.13) 44%);
}
.dial::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: 9999px;
  background: #cd6149; border: 3px solid #f4eee1;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
  transition: transform .15s ease;
}
.dial::-webkit-slider-thumb:hover { transform: scale(1.15); }
.dial::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 9999px;
  background: #cd6149; border: 3px solid #f4eee1; cursor: pointer;
  box-shadow: 0 3px 10px rgba(0,0,0,.25);
}

/* Announcement marquee */
.marquee { animation: marquee 24s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee { animation: none; }
  [data-parallax] { transform: none !important; }
}