/* Hero: título gigante com glitch, fumaça (canvas), público-alvo e indicação de rolagem. */
.hero {
  text-align: center;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100svh;
  padding: 120px 20px 80px;
  display: flex;
  position: relative;
  overflow: hidden;
}
.hero:before {
  content: "";
  z-index: 0;
  background: radial-gradient(120% 80% at 50% 18%, #d81f2c1a, #0000 55%),
    radial-gradient(80% 60%, #ffffff0a, #0000 70%);
  position: absolute;
  inset: 0;
}
#smoke {
  z-index: 1;
  pointer-events: none;
  position: absolute;
  inset: 0;
}
.hero-inner {
  z-index: 3;
  flex-direction: column;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}
.hero .eyebrow {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.2s forwards;
  margin-bottom: 26px;
}
.hero-kicker {
  font-family: var(--tech);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--white);
  text-shadow:
    0 0 18px #d81f2c4d,
    0 0 4px #ffffff40;
  opacity: 0;
  will-change: transform, opacity, clip-path, filter;
  margin-bottom: 34px;
  padding-left: 0.24em;
  font-size: clamp(1rem, 2.4vw, 1.55rem);
  font-weight: 600;
  animation:
    2s linear forwards powerOn,
    3.4s step-end 2.2s infinite glitchSkew;
  display: inline-block;
  position: relative;
}
.hero-kicker:before,
.hero-kicker:after {
  content: attr(data-text);
  opacity: 0;
  pointer-events: none;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0.42em;
}
.hero-kicker:before {
  color: var(--accent);
  text-shadow: 0 0 8px #d81f2c99;
  animation: 3.4s step-end 2.2s infinite glitchR;
}
.hero-kicker:after {
  color: #1fd6ff;
  text-shadow: 0 0 8px #1fd6ff80;
  animation: 3.4s step-end 2.2s infinite glitchC;
}
@keyframes powerOn {
  0% {
    opacity: 0;
    clip-path: inset(50% 0);
    filter: brightness(4) blur(1.2px);
  }
  5% {
    opacity: 1;
    clip-path: inset(49.3% 0);
    filter: brightness(6) blur(0.6px);
  }
  8% {
    opacity: 0.12;
    clip-path: inset(49.3% 0);
    filter: brightness(3);
  }
  12% {
    opacity: 1;
    clip-path: inset(46% 0);
    filter: brightness(3.4);
  }
  16% {
    opacity: 0.1;
  }
  23% {
    opacity: 1;
    clip-path: inset(30% 0);
    filter: brightness(2.2);
  }
  29% {
    opacity: 0.3;
  }
  37% {
    opacity: 1;
    clip-path: inset(9% 0);
    filter: brightness(1.5);
  }
  45% {
    opacity: 1;
    clip-path: inset(0);
    filter: brightness(1.25);
  }
  51% {
    opacity: 0.5;
    filter: brightness(0.8);
  }
  58% {
    opacity: 1;
    filter: brightness(1.25);
  }
  65% {
    opacity: 0.8;
  }
  73% {
    opacity: 1;
    filter: brightness(1.06);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
    filter: brightness();
  }
}
@keyframes floaty {
  0%,
  to {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-9px);
  }
}
.hero-kicker-wrap {
  animation: 4.5s ease-in-out 2s infinite floaty;
  display: inline-block;
}
@keyframes glitchSkew {
  0%,
  40%,
  45%,
  80%,
  86%,
  to {
    transform: skew(0);
  }
  41% {
    transform: skew(7deg);
  }
  43% {
    transform: skew(-5deg);
  }
  81% {
    transform: skew(-8deg);
  }
  84% {
    transform: skew(4deg);
  }
}
@keyframes glitchR {
  0%,
  40%,
  45%,
  80%,
  86%,
  to {
    opacity: 0;
    transform: translate(0);
  }
  41% {
    opacity: 0.9;
    clip-path: polygon(0 8%, 100% 8%, 100% 34%, 0 34%);
    transform: translate(-3px, -2px);
  }
  43% {
    opacity: 0.9;
    clip-path: polygon(0 52%, 100% 52%, 100% 78%, 0 78%);
    transform: translate(3px, 1px);
  }
  81% {
    opacity: 0.9;
    clip-path: polygon(0 18%, 100% 18%, 100% 44%, 0 44%);
    transform: translate(3px, 2px);
  }
  84% {
    opacity: 0.9;
    clip-path: polygon(0 60%, 100% 60%, 100% 92%, 0 92%);
    transform: translate(-2px, -1px);
  }
}
@keyframes glitchC {
  0%,
  40%,
  45%,
  80%,
  86%,
  to {
    opacity: 0;
    transform: translate(0);
  }
  41% {
    opacity: 0.85;
    clip-path: polygon(0 30%, 100% 30%, 100% 55%, 0 55%);
    transform: translate(3px, 2px);
  }
  43% {
    opacity: 0.85;
    clip-path: polygon(0 70%, 100% 70%, 100% 95%, 0 95%);
    transform: translate(-3px, -1px);
  }
  81% {
    opacity: 0.85;
    clip-path: polygon(0 40%, 100% 40%, 100% 66%, 0 66%);
    transform: translate(-3px, -2px);
  }
  84% {
    opacity: 0.85;
    clip-path: polygon(0 5%, 100% 5%, 100% 28%, 0 28%);
    transform: translate(2px, 1px);
  }
}
.hero-title {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: -0.02em;
  z-index: 3;
  will-change: transform;
  font-size: clamp(4.2rem, 18vw, 15rem);
  line-height: 0.84;
  animation: 3.6s step-end 1.8s infinite titleGlitch;
  position: relative;
}
@keyframes titleGlitch {
  0%,
  7%,
  49%,
  56%,
  to {
    text-shadow: none;
    transform: translate(0) skew(0);
  }
  8% {
    text-shadow:
      -0.05em 0 #d81f2ce6,
      0.05em 0 #1fd6ffcc;
    transform: translate(-2px, 1px) skew(3deg);
  }
  10% {
    text-shadow:
      0.055em 0 #d81f2ce6,
      -0.055em 0 #1fd6ffcc;
    transform: translate(3px, -1px) skew(-4deg);
  }
  12% {
    text-shadow: none;
    transform: translate(0) skew(0);
  }
  50% {
    text-shadow:
      0.05em 0 #d81f2cd9,
      -0.05em 0 #1fd6ffbf;
    transform: translate(2px, 1px) skew(-3deg);
  }
  53% {
    text-shadow:
      -0.055em 0 #d81f2cd9,
      0.055em 0 #1fd6ffbf;
    transform: translate(-3px, -1px) skew(4deg);
  }
}
.hero-title .line {
  display: block;
  overflow: visible;
}
.hero-title .line span {
  opacity: 0;
  animation: fadeUp 0.9s var(--ease) forwards;
  display: inline-block;
  transform: translateY(40px);
}
.hero-title .line:first-child span {
  animation-delay: 0.35s;
}
.hero-title .line:nth-child(2) span {
  -webkit-text-stroke: 2px var(--white);
  color: #0000;
  animation-delay: 0.5s;
}
.hero-title .line:nth-child(2) span b {
  color: var(--accent);
  -webkit-text-stroke: 0;
  font-weight: inherit;
}
.hero-sub {
  max-width: 560px;
  color: var(--muted);
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.8s forwards;
  margin-top: 34px;
  font-size: clamp(1rem, 1.4vw, 1.18rem);
  font-weight: 400;
}
.hero-sub strong {
  color: var(--white);
  font-weight: 600;
}
.hero-actions {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 1s forwards;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 38px;
  display: flex;
}
.hero-audience {
  opacity: 0;
  animation: fadeUp 0.8s var(--ease) 0.92s forwards;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12px 0;
  margin-top: 28px;
  list-style: none;
  display: flex;
}
.hero-audience li {
  font-family: var(--tech);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  color: var(--white);
  transition: color 0.3s var(--ease);
  align-items: center;
  padding: 0 clamp(14px, 2.4vw, 24px);
  font-size: clamp(0.66rem, 1.5vw, 0.76rem);
  font-weight: 500;
  display: flex;
  position: relative;
}
.hero-audience li:after {
  content: "";
  background: var(--accent);
  opacity: 0.85;
  border-radius: 50%;
  width: 5px;
  height: 5px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50%, -50%);
}
.hero-audience li:first-child:after {
  display: none;
}
.hero-audience li:hover {
  color: var(--accent);
}
.corner {
  z-index: 3;
  font-family: var(--tech);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted-2);
  opacity: 0;
  font-size: 0.66rem;
  line-height: 1.7;
  animation: 1s 1.3s forwards fadeIn;
  position: absolute;
}
.corner b {
  color: var(--accent);
  font-weight: 600;
}
.corner.tl {
  text-align: left;
  top: 96px;
  left: 30px;
}
.corner.bl {
  text-align: left;
  bottom: 42px;
  left: 30px;
}
.corner.br {
  text-align: right;
  bottom: 42px;
  right: 30px;
}
.scroll-cue {
  z-index: 3;
  font-family: var(--tech);
  letter-spacing: 0.3em;
  color: var(--muted-2);
  opacity: 0;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 0.6rem;
  animation: 1s 1.5s forwards fadeIn;
  display: flex;
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%);
}
.scroll-cue .arrow {
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  width: 18px;
  height: 18px;
  animation: 1.6s ease-in-out infinite bob;
  transform: rotate(45deg);
}
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes menuItemIn {
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ctaShine {
  0% {
    left: -65%;
  }
  to {
    left: 150%;
  }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links {
    transition:
      opacity 0.25s,
      visibility !important;
    transform: none !important;
  }
  .nav-links > a,
  .menu-foot {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}
@keyframes bob {
  0%,
  to {
    transform: rotate(45deg) translate(0);
  }
  50% {
    transform: rotate(45deg) translate(4px, 4px);
  }
}