* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; height: -webkit-fill-available; }
body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
  background-color: #000; color: #fff; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow: hidden; min-height: -webkit-fill-available;
}

/* Marquee do contract, em cima e em baixo */
.scroll-container {
  position: fixed; width: 100%; height: 40px; background: #000c; overflow: hidden; z-index: 1000;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer;
  transition: background-color .3s ease;
}
.scroll-container:hover { background: #000000e6; }
.scroll-container.top { top: 0; border-bottom: 1px solid rgba(0,255,128,.2); }
.scroll-container.bottom { bottom: 0; border-top: 1px solid rgba(0,255,128,.2); }
.scroll-container.disabled { cursor: default; }
.scroll-text { display: flex; white-space: nowrap; animation: scroll 20s linear infinite; will-change: transform; }
.scroll-container.bottom .scroll-text { animation: scrollReverse 20s linear infinite; }
.scroll-text span {
  display: inline-block; padding: 8px 40px; font-family: Courier New, monospace; font-weight: 700;
  color: #00ff80; text-shadow: 0 0 10px rgba(0,255,128,.5); font-size: 16px; letter-spacing: 2px; flex-shrink: 0;
}
.copy-notification {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(.9);
  background: #00ff8033; color: #00ff80; padding: 6px 12px; border-radius: 4px; font-size: 14px; font-weight: 700;
  pointer-events: none; opacity: 0; transition: all .3s cubic-bezier(.4,0,.2,1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(0,255,128,.3);
  text-shadow: 0 0 10px rgba(0,255,128,.5); box-shadow: 0 0 20px #00ff8033, 0 0 40px #00ff801a;
}
.copy-notification.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
@keyframes scroll { 0% { transform: translate(0); } to { transform: translate(-50%); } }
@keyframes scrollReverse { 0% { transform: translate(-50%); } to { transform: translate(0); } }

/* Splash "Access Restricted" */
.splash-screen {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2rem; z-index: 100;
  transition: all .8s cubic-bezier(.4,0,.2,1); padding: 2rem; min-height: 100vh; height: 100%; width: 100vw;
  background-color: #111827; overflow: hidden; will-change: opacity, transform;
}
.splash-screen:before {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0; border: 2px solid transparent;
  background: linear-gradient(to right, #00ff8000, #00ff8033, #00ff8000);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 101; transition: all .3s ease;
}
.splash-screen:after {
  content: ""; position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  box-shadow: inset 0 0 100px #00ff8026, inset 0 0 60px #00ff801a, inset 0 0 30px #00ff800d;
  pointer-events: none; z-index: 101; transition: all .3s ease;
}
.splash-background {
  position: fixed; top: -50px; right: -50px; bottom: -50px; left: -50px;
  background-image: url(assets/splash-bg.jpg); background-size: cover; background-position: center;
  z-index: -2; will-change: transform; animation: floatBackground 20s ease-in-out infinite; transform: translateZ(0);
}
.splash-background:before {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  box-shadow: inset 0 0 100px #00ff8026, inset 0 0 60px #00ff801a, inset 0 0 30px #00ff800d; transition: all .3s ease;
}
.splash-screen:has(.confirm-button:hover) .splash-background:before {
  box-shadow: inset 0 0 150px #00ff804d, inset 0 0 100px #00ff8033, inset 0 0 50px #00ff801a;
}
@keyframes floatBackground {
  0% { transform: translateZ(0) scale(1.1); }
  25% { transform: translate3d(-10px,10px,0) scale(1.1); }
  50% { transform: translate3d(0,-10px,0) scale(1.1); }
  75% { transform: translate3d(10px,10px,0) scale(1.1); }
  to { transform: translateZ(0) scale(1.1); }
}
.splash-screen .overlay {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: radial-gradient(circle at center, #00000059, #00000073 70%, #0009); z-index: -1; width: 100vw; height: 100vh;
}
.splash-screen .overlay:before {
  content: ""; position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px;
  background: radial-gradient(circle at center, rgba(0,255,128,.1) 0%, rgba(0,255,128,.05) 50%, transparent 70%);
  opacity: 0; transition: all .3s ease; transform: scale(.95); pointer-events: none;
}
.splash-screen:has(.confirm-button:hover) .overlay:before { opacity: 1; transform: scale(1.1); }
.splash-content {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 2rem;
  width: 100%; height: 100%; justify-content: center;
}
.splash-screen.hidden { opacity: 0; transform: scale(1.1); pointer-events: none; }
.splash-screen img { width: 100%; height: auto; object-fit: contain; transform: translateZ(0); }
.splash-screen .access-restricted { max-width: min(800px, 90vw); margin-bottom: 2rem; }
.splash-screen .confirm-button {
  position: relative; max-width: min(300px, 50vw); cursor: pointer; margin-top: -2rem; padding: 1rem 2rem;
  background: #0000004d; border: 1px solid rgba(255,255,255,.1); border-radius: .75rem;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 10px #0003, inset 0 1px 1px #ffffff1a, 0 0 80px #00ff8066, 0 0 160px #00ff8033;
  will-change: transform, box-shadow; z-index: 102; transform: scale(1);
  transition: transform .3s cubic-bezier(.4,0,.2,1), box-shadow .3s cubic-bezier(.4,0,.2,1), background-color .3s cubic-bezier(.4,0,.2,1);
}
.splash-screen .confirm-button:hover {
  transform: scale(1.15);
  box-shadow: 0 4px 15px #0000004d, inset 0 1px 1px #ffffff26, 0 0 60px #00ff8099, 0 0 100px #00ff8033; background: #0006;
}
.splash-screen .confirm-button:active {
  transform: scale(1.1); box-shadow: 0 2px 5px #0003, inset 0 1px 1px #ffffff0d, 0 0 40px #00ff8066;
}

/* Site principal */
.container {
  min-height: 100vh; display: flex; flex-direction: column; visibility: hidden; opacity: 0; transform: scale(.98);
  transition: all .8s cubic-bezier(.4,0,.2,1); will-change: visibility, opacity, transform; background-color: #000; position: relative;
}
.container.visible { visibility: visible; opacity: 1; transform: scale(1); }
.hero { position: relative; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; perspective: 1000px; }
.video-container {
  position: absolute; top: -50px; right: -50px; bottom: -50px; left: -50px;
  transform-style: preserve-3d; transition: transform .2s ease-out; will-change: transform;
}
video { position: absolute; width: 100%; height: 100%; object-fit: cover; transform: translateZ(0); }
.desktop-video { display: block; }
.mobile-video { display: none; }
.overlay { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: #00000026; }
.content {
  position: relative; z-index: 10; text-align: center; padding: 0 1rem; transform-style: preserve-3d;
  transition: transform .2s ease-out; display: flex; flex-direction: column; justify-content: center; align-items: center;
  height: 100%; will-change: transform;
}
.logo {
  max-width: min(800px, 90vw); width: 100%; height: auto; transform: scale(var(--logo-scale, 1));
  transition: transform .2s ease-out; will-change: transform; animation: floatLogo 6s ease-in-out infinite; cursor: pointer;
}
.logo.clicked { animation: logoClick .6s cubic-bezier(.22,1,.36,1); }
@keyframes floatLogo {
  0%, to { transform: translateZ(0) scale(var(--logo-scale, 1)); }
  25% { transform: translate3d(3px,-3px,0) scale(var(--logo-scale, 1)); }
  50% { transform: translate3d(-2px,2px,0) scale(var(--logo-scale, 1)); }
  75% { transform: translate3d(1px,-1px,0) scale(var(--logo-scale, 1)); }
}
@keyframes logoClick {
  0% { transform: scale(var(--logo-scale, 1)); filter: brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0)); }
  30% { transform: scale(calc(var(--logo-scale, 1) * .95)); filter: brightness(.9) drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
  60% { transform: scale(calc(var(--logo-scale, 1) * 1.03)); filter: brightness(1.1) drop-shadow(0 2px 4px rgba(0,0,0,.4)); }
  to { transform: scale(var(--logo-scale, 1)); filter: brightness(1) drop-shadow(0 0 0 rgba(0,0,0,0)); }
}

/* Footer: launching soon + icones */
.footer {
  position: fixed; bottom: 4rem; left: 50%; transform: translate(-50%); z-index: 20; padding: .75rem 1.25rem;
  width: fit-content; min-width: 420px; background: none; border: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
}
.footer-content { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.launching-soon {
  max-width: min(160px, 32vw); margin: .5rem 0; cursor: pointer; transition: all .3s ease; padding: .4rem .3rem;
  background: #00000080; border-radius: 12px; box-shadow: 0 0 20px #00ff801a, 0 0 40px #00ff800d, inset 0 0 10px #00ff801a;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transform: scale(1.2); transform-origin: center center; will-change: transform, box-shadow;
}
.launching-soon:hover { transform: scale(1.1); background: #0009; box-shadow: 0 0 30px #00ff8033, 0 0 60px #00ff801a, inset 0 0 15px #00ff8026; }
.launching-soon:active { transform: scale(1.1); box-shadow: 0 0 15px #00ff8026, 0 0 30px #00ff8013, inset 0 0 8px #00ff801a; }
.social-links { display: flex; gap: 1rem; justify-content: center; align-items: center; padding: 0 1rem; }
.social-link {
  display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px;
  background: #00000080; transition: all .3s ease; will-change: transform, background-color, box-shadow;
  box-shadow: 0 0 20px #00ff801a, 0 0 40px #00ff800d, inset 0 0 10px #00ff801a;
}
.social-link:hover { background: #0009; transform: translateY(-2px); box-shadow: 0 0 30px #00ff8033, 0 0 60px #00ff801a, inset 0 0 15px #00ff8026; }
.social-link:active { transform: translateY(0); box-shadow: 0 0 15px #00ff8026, 0 0 30px #00ff8013, inset 0 0 8px #00ff801a; }
.social-link.hidden { display: none; }
.social-icon { width: 48px; height: 48px; object-fit: contain; }

/* Botao de audio */
.audio-toggle {
  position: fixed; bottom: 1rem; right: 1rem; width: 48px; height: 48px; border-radius: 50%;
  background: #0000004d; border: 1px solid rgba(255,255,255,.1); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .3s ease; z-index: 1000; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.audio-toggle:hover { background: #00000080; transform: translateY(-2px); }
.audio-toggle:active { transform: translateY(0); }
.audio-toggle svg { width: 24px; height: 24px; }
.audio-toggle .hidden { display: none; }

/* Mobile */
@media (max-width: 768px) {
  .footer {
    width: 100% !important; min-width: unset !important; padding: 0 max(1rem, env(safe-area-inset-left)) !important;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 60px) !important; left: 50%; transform: translate(-50%); z-index: 1000;
  }
  .footer-content { width: 100%; gap: .75rem; }
  .launching-soon { max-width: min(140px, 30vw); margin: .25rem 0; padding: .4rem .3rem; transform: scale(1.1); }
  .social-links {
    width: 100%; gap: .75rem; padding: 0 max(.5rem, env(safe-area-inset-left));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) / 2); justify-content: space-between;
  }
  .social-link { width: 48px !important; height: 48px !important; background: #00000080 !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
  .social-link .social-icon { width: 36px; height: 36px; }
  .audio-toggle { top: max(1rem, env(safe-area-inset-top, 1rem)); right: 1rem; bottom: unset; width: 42px; height: 42px; }
  .container { min-height: -webkit-fill-available; height: 100dvh; }
  .scroll-container { height: 32px; }
  .scroll-text span { font-size: 14px; padding: 6px 24px; }
  .desktop-video { display: none; }
  .mobile-video { display: block; }
  .hero { height: 100dvh; min-height: -webkit-fill-available; }
  .content {
    transform: none !important; height: 100dvh; min-height: -webkit-fill-available; position: fixed;
    top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; padding: 0;
  }
  .video-container { transform: none !important; }
  .logo { max-width: 102vw !important; width: 102% !important; margin: 0 auto; transform: none !important; animation: none !important; --logo-scale: 1 !important; }
  .scroll-text { animation: scroll 13.33s linear infinite !important; }
  .scroll-container.bottom .scroll-text { animation: scrollReverse 13.33s linear infinite !important; }
  @media (max-width: 360px) {
    .social-link { width: 42px !important; height: 42px !important; }
    .social-link .social-icon { width: 32px; height: 32px; }
    .social-links { gap: .5rem; }
  }
}