:root { --p: #6d64ff; --y: #fcc339; --void: #0a0c12; }
body { background-color: var(--void); color: #fff; overscroll-behavior: none; }

/* Prevent horizontal scroll from decorative off-screen glows/blurs.
   clip (not hidden) keeps position:sticky working. */
html, body { overflow-x: hidden; overflow-x: clip; }

html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }

/* ─── CINEMATIC BACKGROUND SYSTEM (From index9) ─── */
.master-bg {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; background: var(--void);
  overflow: hidden; /* clip the oversized 200vw ambient-mesh so it can't trigger horizontal scroll on mobile */
}

/* Closed mobile-menu drawer sits off-screen (translate-x-full); clip it so the
   fixed subtree can't extend the scrollable width on mobile. */
#mobile-menu { overflow-x: clip; }
.master-bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; filter: blur(40px) saturate(1.3); transition: opacity 2s ease, filter 2s ease;
}
.master-bg img.active { opacity: 0.45; filter: blur(15px) saturate(1.3); z-index: 10; }

.ambient-mesh {
  position: fixed; top: -50%; left: -50%; width: 200vw; height: 200vh;
  background: 
    radial-gradient(circle at 30% 50%, rgba(109,100,255,0.3) 0%, transparent 50%),
    radial-gradient(circle at 70% 50%, rgba(252,195,57,0.2) 0%, transparent 50%);
  filter: blur(100px); z-index: -1; animation: meshFlow 20s infinite alternate ease-in-out; pointer-events: none;
  mix-blend-mode: screen;
}
@keyframes meshFlow { 0% { transform: rotate(0deg) scale(1); } 100% { transform: rotate(30deg) scale(1.1); } }

/* ─── GLASSMORPHIC PANELS (From index9) ─── */
.glass-panel {
  background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0.01) 100%);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.1);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 20px 40px rgba(0,0,0,0.4);
  border-radius: 24px; transition: transform 0.5s ease, border-color 0.5s ease;
  position: relative; overflow: hidden;
}
.glass-panel:hover { border-color: rgba(255,255,255,0.25); box-shadow: 0 30px 60px rgba(0,0,0,0.6); }

.glass-glow {
  position: absolute; width: 300px; height: 300px; border-radius: 50%; filter: blur(60px); opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease; pointer-events: none; mix-blend-mode: screen; z-index: 0;
}
.glass-panel:hover .glass-glow { opacity: 0.8; transform: scale(1.2); }
.glass-content { position: relative; z-index: 10; }

/* ─── THE FLAWLESS SKEW BUTTON ─── */
.btn-skew {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 40px; background: transparent; color: #fff; font-weight: 700; 
  text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem;
  border: 1px solid rgba(109,100,255,0.4); overflow: hidden; transition: all 0.4s; cursor: pointer;
  border-radius: 999px; backdrop-filter: blur(10px);
}
.btn-skew .bg-skew {
  position: absolute; top: -10%; left: -20%; width: 140%; height: 120%; 
  background: linear-gradient(90deg, var(--p), var(--y));
  transform: translateX(-100%) skewX(-15deg); 
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1); z-index: -1;
}
.btn-skew:hover .bg-skew { transform: translateX(0) skewX(-15deg); }
.btn-skew:hover { border-color: transparent; box-shadow: 0 0 40px rgba(109,100,255,0.4); transform: translateY(-2px); }

.btn-skew-ghost {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  padding: 18px 40px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; font-size: 0.75rem;
  border: 1px solid rgba(255,255,255,0.2); transition: all 0.4s; cursor: pointer; overflow: hidden;
  border-radius: 999px; color: rgba(255,255,255,0.7); backdrop-filter: blur(10px); background: rgba(255,255,255,0.03);
}
.btn-skew-ghost::after {
  content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 100%;
  background: rgba(255,255,255,0.1); transition: width 0.4s cubic-bezier(0.16,1,0.3,1); z-index: -1;
}
.btn-skew-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.4); box-shadow: 0 10px 30px rgba(255,255,255,0.1); transform: translateY(-2px); }
.btn-skew-ghost:hover::after { width: 100%; }

/* ─── REVEALS ─── */
.reveal-host { opacity: 0; transition: opacity 0.1s; } 
.reveal-host.in { opacity: 1; }

.reveal-mask {
  /* overflow:hidden clips the inner while it slides up from translateY(110%).
     The mask must be tall enough that the pre-reveal inner (displaced ~110% downward)
     doesn't peek through the bottom padding — opacity:0 + blur makes the tiny
     sub-pixel overlap invisible in practice. */
  overflow: hidden;
  display: inline-block;
  vertical-align: top;
  padding-top: 0.08em;
  padding-bottom: 0.14em;
}
.reveal-mask-inner {
  display: inline-block; transform: translateY(110%);
  filter: blur(10px) brightness(2); opacity: 0;
  /* padding-bottom extends the element box below the tight line-height so that
     bg-clip-text gradients cover glyph descenders (g, y, p, etc.).
     Without this, text-transparent + bg-clip-text leaves descenders invisible
     because background-image only paints inside the element box, which at
     line-height:1 ends above where the ink actually reaches. */
  padding-bottom: 0.22em;
  transition: transform 1.4s cubic-bezier(0.16,1,0.3,1), filter 1.4s cubic-bezier(0.16,1,0.3,1), opacity 1.4s cubic-bezier(0.16,1,0.3,1);
  will-change: transform, filter, opacity;
}
.reveal-mask-inner.text-transparent,
.reveal-mask-inner.gradient-shimmer {
  line-height: 1.18;
  padding-bottom: 0.32em;
}
.in .reveal-mask-inner { transform: translateY(0); filter: blur(0) brightness(1); opacity: 1; text-shadow: none; }

.reveal-fade { 
  opacity: 0; transform: translateY(40px) scale(0.95); filter: blur(15px);
  transition: all 1.4s cubic-bezier(0.16,1,0.3,1); will-change: transform,opacity,filter; 
}
.reveal-fade.in { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }

.d-1 { transition-delay: 200ms; } .d-2 { transition-delay: 400ms; } .d-3 { transition-delay: 600ms; }

/* ─── GRADIENT SHIMMER ─── */
.gradient-shimmer {
  background-size: 200% auto;
  animation: colorSweep 8s ease-in-out infinite;
  animation-delay: 2s; /* Wait for initial reveal to finish */
}
@keyframes colorSweep {
  0%, 80% { 
    background-position: 0% 50%; 
  }
  90% { 
    background-position: 100% 50%;
  }
  100% { 
    background-position: 0% 50%; 
  }
}

/* ─── MASSIVE EDITORIAL NUMBERS (From index6) ─── */
.massive-number {
  position: absolute; right: 2rem; top: 50%; transform: translateY(-50%);
  font-size: clamp(8rem, 15vw, 16rem); font-weight: 800; line-height: 0.8; letter-spacing: -0.05em;
  color: rgba(255,255,255,0.03); pointer-events: none; z-index: 0; transition: color 0.5s; mix-blend-mode: overlay;
}
.glass-panel:hover .massive-number { color: rgba(255,255,255,0.1); }

/* ─── FRAMEWORK ABSTRACT GRIDS ─── */
.bg-grid-p {
  background-image: 
    linear-gradient(to right, rgba(109, 100, 255, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(109, 100, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}
.bg-grid-y {
  background-image: 
    linear-gradient(to right, rgba(252, 195, 57, 0.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(252, 195, 57, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
}

.kicker { font-family:'Space Mono', monospace; font-size:0.75rem; font-weight:700; letter-spacing:0.3em; text-transform:uppercase; color:var(--p); }

/* ─── HERO LOGO: gradient shimmer via mask ─── */
.hero-logo-wrap {
  position: relative;
}

.hero-pretitle {
  position: absolute;
  top: -9rem;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  text-align: center;
  pointer-events: none;
  z-index: 30;
}

.hero-logo-gradient {
  width: 320px;
  aspect-ratio: 1080 / 535; /* ajuste se precisar */
  opacity: 0.96;

  background:
    linear-gradient(
      90deg,
      #7c73ff 0%,
      #f3f4ff 18%,
      #ffffff 34%,
      #b9b4ff 52%,
      #ffffff 68%,
      #8a82ff 82%,
      #ffffff 100%
    );
  background-size: 220% 100%;
  background-position: 0% 50%;

  -webkit-mask-image: url("assets/logos/acquiris_marca1080.png");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url("assets/logos/acquiris_marca1080.png");
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;

  filter:
    drop-shadow(0 0 22px rgba(255,255,255,0.10))
    drop-shadow(0 0 42px rgba(109,100,255,0.10));

  animation:
    heroLogoReveal 1.15s cubic-bezier(0.16,1,0.3,1) forwards,
    heroLogoSweep 8s ease-in-out infinite 1.4s;
}

@media (min-width: 768px) {
  .hero-logo-gradient { width: 430px; }
}

@media (min-width: 1024px) {
  .hero-logo-gradient { width: 580px; }
}

@media (min-width: 1280px) {
  .hero-logo-gradient { width: 680px; }
}

/* reveal curto e elegante */
.hero-logo-reveal {
  opacity: 0;
  transform: translateY(16px) scale(0.98);
  filter: blur(10px);
  animation:
    heroLogoReveal 1.15s cubic-bezier(0.16,1,0.3,1) forwards,
    heroLogoGlow 6s ease-in-out infinite 1.2s;
}

@keyframes heroLogoReveal {
  0% {
    opacity: 0;
    transform: translateY(16px) scale(0.98);
    filter: blur(10px);
  }
  100% {
    opacity: 0.96;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* shimmer parecido com o do texto */
@keyframes heroLogoSweep {
  0%, 80%, 100% {
    background-position: 0% 50%;
  }
  90% {
    background-position: 100% 50%;
  }
}

@keyframes heroLogoGlow {
  0%, 100% {
    filter:
      blur(0)
      brightness(1)
      drop-shadow(0 0 22px rgba(255,255,255,0.10))
      drop-shadow(0 0 42px rgba(109,100,255,0.10));
  }

  50% {
    filter:
      blur(0)
      brightness(1.08)
      drop-shadow(0 0 28px rgba(255,255,255,0.18))
      drop-shadow(0 0 60px rgba(109,100,255,0.25));
  }
}


.hero-pretitle-text {
  display: inline-block;
  font-family: 'Space Mono', monospace;
  font-size: 15px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.42);
  text-align: center;
  text-shadow: 0 0 10px rgba(255,255,255,0.10);
  opacity: 0;
  transform: translateY(8px);
  filter: blur(4px);
  animation: pretitleReveal 1s ease forwards;
  animation-delay: 0.2s;
}

@keyframes pretitleReveal {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}