/* ==========================================================================
   MENTE VENTURES — MOTION LAYER
   All animation / interaction polish lives here (paired with js/motion.js).
   Everything is GPU-friendly (transform / opacity) and honours
   prefers-reduced-motion at the bottom of this file.
   ========================================================================== */

:root {
  --beat: 0.625s;               /* updated live from the playing track's BPM */
  --mv-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --mv-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --mv-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   05 · LENIS SMOOTH SCROLL (vendor base styles)
   -------------------------------------------------------------------------- */
html.lenis,
html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-scrolling iframe { pointer-events: none; }

/* --------------------------------------------------------------------------
   01 · BEAT-REACTIVE HERO (driven by the playing track's BPM)
   -------------------------------------------------------------------------- */
html.mv-playing .hero-wordmark.wm-done .wm-mente .wm-char {
  animation: mvCharBeat var(--beat) cubic-bezier(0.2, 0.8, 0.3, 1) infinite;
  animation-delay: calc(var(--i) * var(--beat) / 10);
}
html.mv-playing .wm-swash {
  transform-origin: 50% 60%;
  animation: mvSwashBeat var(--beat) var(--mv-ease-out) infinite;
}
html.mv-playing .eb-star {
  animation: mvStarBeat var(--beat) var(--mv-ease-out) infinite;
}
html.mv-playing #particle-canvas {
  animation: mvCanvasBeat var(--beat) ease-out infinite;
}
html.mv-playing .play-btn-main {
  animation: mvBtnBeat var(--beat) ease-out infinite;
}

@keyframes mvCharBeat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  14%      { transform: translate3d(0, -0.05em, 0) scale(1.02); }
}
@keyframes mvSwashBeat {
  0%   { transform: scaleY(2.1); }
  100% { transform: scaleY(1); }
}
@keyframes mvStarBeat {
  0%   { transform: scale(1.45) rotate(25deg); }
  100% { transform: scale(1) rotate(0deg); }
}
@keyframes mvCanvasBeat {
  0%   { opacity: 1; }
  100% { opacity: 0.45; }
}
@keyframes mvBtnBeat {
  0%   { box-shadow: 0 0 0 0 rgb(var(--accent) / 0.45); }
  100% { box-shadow: 0 0 0 16px rgb(var(--accent) / 0); }
}




/* --------------------------------------------------------------------------
   04 · MIXER-FADER EYEBROW LINES
   -------------------------------------------------------------------------- */
.sec-eyebrow .eb-line {
  position: relative;
  height: 2px;
  opacity: 1;
  overflow: visible;
  background: rgb(var(--teal) / 0.28);
  --lvl: 0.72;
}
.sec-eyebrow .eb-line:last-child { --lvl: 0.56; }
.sec-eyebrow .eb-line::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgb(var(--teal));
  transform-origin: left center;
  transform: scaleX(var(--lvl));
  transition: transform 1.2s var(--mv-ease-io) 0.25s;
}
.sec-eyebrow .eb-line::after {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(var(--lvl) * 100%);
  width: 5px;
  height: 11px;
  margin: -5.5px 0 0 -2.5px;
  border-radius: 1.5px;
  background: rgb(var(--accent));
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25), inset 0 -1px 0 rgb(0 0 0 / 0.15);
  transition: left 1.2s var(--mv-ease-io) 0.25s;
}
.sec-eyebrow .eb-line:last-child::before { transform-origin: right center; }
.sec-eyebrow .eb-line:last-child::after {
  left: auto;
  right: calc(var(--lvl) * 100%);
  margin: -5.5px -2.5px 0 0;
  transition-property: right;
}
/* Faders start at zero until their section is revealed */
.reveal:not(.visible) .sec-eyebrow .eb-line { --lvl: 0; }

html.mv-playing .reveal.visible .sec-eyebrow .eb-line::before {
  animation: mvFaderFill var(--beat) var(--mv-ease-out) infinite;
}
@keyframes mvFaderFill {
  0%   { transform: scaleX(min(1, calc(var(--lvl) + 0.25))); }
  100% { transform: scaleX(var(--lvl)); }
}

/* --------------------------------------------------------------------------
   06 · WORD-BY-WORD HEADING REVEAL
   -------------------------------------------------------------------------- */
.mv-split .mv-w {
  display: inline-block;
  /* clip-path (not overflow) keeps the baseline intact across mixed fonts */
  clip-path: inset(-0.45em -0.35em -0.24em -0.35em);
}
.mv-split .mv-wi {
  display: inline-block;
  transform: translate3d(0, 115%, 0) rotate(5deg);
  transform-origin: 0% 100%;
  transition: transform 1.05s var(--mv-ease-out);
  transition-delay: calc(var(--wi) * 60ms + 80ms);
}
.mv-split.mv-in .mv-wi { transform: none; }

/* --------------------------------------------------------------------------
   07 · 3D TILT CARDS + GLARE
   -------------------------------------------------------------------------- */
.mv-tilt.mv-tilting {
  transition: transform 0.14s ease-out, background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
  transition-delay: 0s !important;
  box-shadow: 0 30px 60px -30px rgb(var(--espresso) / 0.35) !important;
}
.mv-glare {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  border-radius: inherit;
  opacity: 0;
  mix-blend-mode: overlay;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.55), transparent 55%);
  transition: opacity 0.45s ease;
}
.mv-tilting > .mv-glare { opacity: 0.75; }



/* --------------------------------------------------------------------------
   09 · INSTANT PAGE NAVIGATION (index ⇄ showcase)
   -------------------------------------------------------------------------- */
/* Clean, instant page transitions without layout shift or stutter */

/* --------------------------------------------------------------------------
   10 · ABOUT PARALLAX PHOTO STACK
   -------------------------------------------------------------------------- */
img.mv-px { scale: 1.2; will-change: translate; }
img.mv-px-stack {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s ease, transform 0.5s ease;
}
img.mv-px-stack.is-on { opacity: 1; }

/* --------------------------------------------------------------------------
   11 · SCROLL-VELOCITY MARQUEE BANDS
   -------------------------------------------------------------------------- */
.mv-marquee {
  position: relative;
  overflow: hidden;
  padding: clamp(1rem, 2.4vw, 1.85rem) 0;
  background: rgb(var(--surface-900));
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  --spin: 0deg;
}
.mv-marquee__row {
  display: flex;
  width: max-content;
  will-change: transform;
}
.mv-marquee__item {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  gap: clamp(0.75rem, 2vw, 1.8rem);
  padding-right: clamp(0.75rem, 2vw, 1.8rem);
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 600;
  font-variation-settings: 'opsz' 144;
  font-size: clamp(1.95rem, 5.6vw, 4.88rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  white-space: nowrap;
  color: rgb(var(--espresso));
}
.mv-marquee__item .is-outline {
  color: transparent;
  -webkit-text-stroke: 1.1px rgb(var(--espresso) / 0.55);
}
.mv-marquee__item .is-accent { color: rgb(var(--accent)); }
.mv-marquee__item .is-sans {
  font-family: 'Unbounded', 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 0.82em;
  letter-spacing: -0.04em;
}
.mv-star {
  display: inline-block;
  flex-shrink: 0;
  width: 0.36em;
  height: 0.36em;
  background: rgb(var(--teal));
  transform: rotate(var(--spin));
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0c.6 6.4 5.6 11.4 12 12-6.4.6-11.4 5.6-12 12-.6-6.4-5.6-11.4-12-12C6.4 11.4 11.4 6.4 12 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.mv-marquee__row--sub { margin-top: clamp(0.35rem, 0.9vw, 0.65rem); }
.mv-marquee__row--sub .mv-marquee__item {
  font-family: 'Unbounded', 'Montserrat', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: clamp(0.48rem, 0.9vw, 0.62rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgb(var(--gray-500));
  gap: 1.2rem;
  padding-right: 1.2rem;
}
.mv-marquee__row--sub .mv-star { width: 0.9em; height: 0.9em; background: rgb(var(--accent)); }

/* --------------------------------------------------------------------------
   12 · DRIFTING GRADIENT BLOBS (section ambience)
   -------------------------------------------------------------------------- */
.mv-blob-host {
  isolation: isolate;
  position: relative;
}
/* Deep gradient feathering on top & bottom boundaries to dissolve glow seamlessly */
.mv-blob-host::before,
.mv-blob-host::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: clamp(90px, 16vh, 180px);
  pointer-events: none;
  z-index: 1;
}
.mv-blob-host::before {
  top: 0;
  background: linear-gradient(to bottom, rgb(var(--surface-900)) 0%, transparent 100%);
}
.mv-blob-host::after {
  bottom: 0;
  background: linear-gradient(to top, rgb(var(--surface-900)) 0%, transparent 100%);
}

#about > .absolute.inset-0.bg-surface-900 { display: none; }

.mv-blobs {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  /* Radial feather mask prevents glow from ever hitting outer rectangular boundaries */
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 82%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 25%, transparent 82%);
}
.mv-blobs i {
  position: absolute;
  width: 42vmax;
  height: 42vmax;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.7;
  will-change: transform;
}
.mv-blobs i:nth-child(1) {
  top: 6%;
  left: 6%;
  background: radial-gradient(circle at 50% 50%, rgb(var(--accent) / 0.15) 0%, rgb(var(--accent) / 0.04) 45%, transparent 68%);
  animation: mvBlobA 28s ease-in-out infinite alternate;
}
.mv-blobs i:nth-child(2) {
  bottom: 6%;
  right: 8%;
  background: radial-gradient(circle at 50% 50%, rgb(var(--teal) / 0.16) 0%, rgb(var(--teal) / 0.04) 45%, transparent 68%);
  animation: mvBlobB 34s ease-in-out infinite alternate;
}
.mv-blobs i:nth-child(3) {
  top: 30%;
  left: 38%;
  width: 28vmax;
  height: 28vmax;
  background: radial-gradient(circle at 50% 50%, rgb(var(--accent-light) / 0.09) 0%, transparent 65%);
  animation: mvBlobC 40s ease-in-out infinite alternate;
}
.mv-blobs:not(.is-live) i { animation-play-state: paused; }
.dark .mv-blobs i { opacity: 0.95; }

@keyframes mvBlobA {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(6vw, 4vh, 0) scale(1.08); }
  100% { transform: translate3d(3vw, 8vh, 0) scale(0.95); }
}
@keyframes mvBlobB {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(-5vw, -5vh, 0) scale(1.06); }
  100% { transform: translate3d(-8vw, -2vh, 0) scale(1.1); }
}
@keyframes mvBlobC {
  0%   { transform: translate3d(0, 0, 0) scale(0.95); }
  50%  { transform: translate3d(-6vw, 4vh, 0) scale(1.06); }
  100% { transform: translate3d(4vw, -5vh, 0) scale(1); }
}



#theme-toggle svg:not(.hidden) { animation: mvIconIn 0.6s var(--mv-spring); }
@keyframes mvIconIn {
  from { transform: rotate(-120deg) scale(0.4); opacity: 0; }
}

/* --------------------------------------------------------------------------
   14 · MICRO-INTERACTIONS
   -------------------------------------------------------------------------- */
/* Nav underline: draws in from the left, exits to the right */
#navbar a.group > span.absolute {
  width: 100% !important;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.45s var(--mv-ease-io) !important;
}
#navbar a.group:hover > span.absolute {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Footer links: hand-drawn underline */
footer ul a {
  background: linear-gradient(rgb(var(--accent)), rgb(var(--accent))) 0 100% / 0 1px no-repeat;
  transition: background-size 0.45s var(--mv-ease-io), color 0.2s ease;
}
footer ul a:hover { background-size: 100% 1px; }

/* Copy-to-clipboard toast */
.mv-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 10002;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.75rem 1.15rem;
  border-radius: 999px;
  background: rgb(var(--espresso));
  color: rgb(var(--surface-900));
  font: 600 0.8rem/1 'Outfit', sans-serif;
  letter-spacing: 0.02em;
  box-shadow: 0 14px 34px -12px rgba(0, 0, 0, 0.45);
  transform: translate3d(-50%, 24px, 0) scale(0.9);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s var(--mv-spring), opacity 0.3s ease;
}
.mv-toast.is-on { transform: translate3d(-50%, 0, 0) scale(1); opacity: 1; }
.mv-toast i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgb(var(--accent));
  color: #fff;
  font-style: normal;
  font-size: 0.65rem;
}
.select-all[data-cursor] { transition: color 0.2s ease; }
.select-all[data-cursor]:hover { color: rgb(var(--accent)); }

/* --------------------------------------------------------------------------
   REDUCED MOTION — keep everything readable and static
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html.mv-playing *,
  .mv-blobs i,
  #theme-toggle svg { animation: none !important; }
  .mv-split .mv-wi { transform: none !important; transition: none !important; }
  .sec-eyebrow .eb-line::before,
  .sec-eyebrow .eb-line::after { transition: none !important; }
}