:root {
  color-scheme: dark;
  --navy: #052459;
  --blue: #0094D9;
  --fog: #E5E6E7;
  --ink: #010814;
  --scene-opacity: .30;
  --ease: cubic-bezier(.2, .7, .3, 1);
  --display: "Archivo Narrow", "Leelawadee UI", "Arial Narrow", system-ui, sans-serif;
  --body: "Manrope", "Leelawadee UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  background: var(--ink);
}

body {
  position: relative;
  overflow: hidden;
  color: var(--fog);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

/* ---------- palco ---------- */

.stage {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.stage__scene,
.stage__video,
.stage__fallback {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.stage__fallback {
  background:
    radial-gradient(120% 90% at 50% 8%, color-mix(in oklab, var(--blue) 22%, transparent) 0%, transparent 58%),
    radial-gradient(90% 70% at 50% 100%, color-mix(in oklab, var(--navy) 85%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, var(--ink) 0%, var(--navy) 55%, var(--ink) 100%);
  opacity: var(--scene-opacity);
}

.stage__scene {
  opacity: 0;
  transition: opacity 1.2s ease 120ms;
  will-change: opacity;
}



.stage__video {
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
  will-change: transform;
}

.stage__scene.is-on,
.stage__video.is-on { opacity: var(--scene-opacity); }

.stage__overlay,
.stage__vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.stage__overlay {
  background:
    linear-gradient(180deg,
      rgba(1, 8, 20, .86) 0%,
      rgba(1, 8, 20, .34) 28%,
      rgba(1, 8, 20, .14) 60%,
      rgba(1, 8, 20, .26) 82%,
      rgba(1, 8, 20, .9) 100%);
}

.stage__vignette {
  background: radial-gradient(82% 74% at 50% 54%, transparent 46%, rgba(1, 8, 20, .58) 100%);
}

/* ---------- marca d'água ---------- */

.watermark {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(5rem, 24vw, 21rem);
  letter-spacing: .04em;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in oklab, var(--blue) 11%, transparent);
  user-select: none;
  pointer-events: none;
  will-change: transform;
}

/* ---------- holofote ---------- */

.spot {
  position: absolute;
  z-index: 2;
  top: 0; left: 0;
  width: 620px; height: 620px;
  margin: -310px 0 0 -310px;
  border-radius: 50%;
  background: radial-gradient(closest-side,
    color-mix(in oklab, var(--blue) 26%, transparent) 0%,
    color-mix(in oklab, var(--blue) 10%, transparent) 42%,
    transparent 72%);
  opacity: 0;
  transition: opacity .45s ease;
  pointer-events: none;
  will-change: transform, opacity;
}

.spot.is-on { opacity: 1; }

/* ---------- poeira ---------- */

.dust {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.dust span {
  position: absolute;
  bottom: -8px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--fog) 70%, var(--blue));
  opacity: 0;
  animation-name: drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  12%  { opacity: .42; }
  50%  { transform: translate3d(22px, -48dvh, 0); opacity: .26; }
  88%  { opacity: .30; }
  100% { transform: translate3d(-14px, -104dvh, 0); opacity: 0; }
}

/* ---------- grão de filme ---------- */

.grain {
  position: absolute;
  inset: 0;
  z-index: 3;
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-repeat: repeat;
}

/* ---------- marcas de enquadramento ---------- */

.frame {
  position: absolute;
  inset: clamp(14px, 2.4vw, 34px);
  z-index: 4;
  pointer-events: none;
}

.frame span {
  position: absolute;
  width: 18px; height: 18px;
  border: 1px solid color-mix(in oklab, var(--fog) 14%, transparent);
}

.frame span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.frame span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.frame span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.frame span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

/* ---------- som (botão desativado no index.html — regras mantidas para religar) ---------- */

.sound {
  position: absolute;
  z-index: 5;
  top: calc(clamp(14px, 2.4vw, 34px) + 36px + env(safe-area-inset-top, 0px));
  right: clamp(14px, 2.4vw, 34px);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid color-mix(in oklab, var(--fog) 16%, transparent);
  border-radius: 50%;
  background: color-mix(in oklab, var(--ink) 55%, transparent);
  color: var(--fog);
  cursor: pointer;
  touch-action: manipulation;
  transition: border-color .3s ease, background-color .3s ease;
}

.sound:hover { border-color: color-mix(in oklab, var(--blue) 60%, transparent); }

.sound:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}

.sound__bars {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 15px;
}

.sound__bars i {
  width: 2px;
  border-radius: 1px;
  background: currentColor;
  opacity: .55;
  transition: opacity .3s ease;
}

.sound__bars i:nth-child(1) { height: 5px; }
.sound__bars i:nth-child(2) { height: 11px; }
.sound__bars i:nth-child(3) { height: 7px; }
.sound__bars i:nth-child(4) { height: 13px; }

/* desligado: quatro traços parados. ligado: o equalizador se move */
.sound.is-on .sound__bars i {
  opacity: 1;
  animation: level 1.1s ease-in-out infinite alternate;
}

.sound.is-on .sound__bars i:nth-child(2) { animation-delay: .18s; }
.sound.is-on .sound__bars i:nth-child(3) { animation-delay: .36s; }
.sound.is-on .sound__bars i:nth-child(4) { animation-delay: .54s; }

.sound.is-on {
  border-color: color-mix(in oklab, var(--blue) 45%, transparent);
  color: var(--blue);
}

@keyframes level {
  from { height: 3px; }
  to { height: 15px; }
}

/* ---------- marca ---------- */

.brand {
  position: absolute;
  z-index: 4;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 24px;
  pointer-events: none;
}

.brand__logo {
  position: relative;
  width: min(430px, 64vw);
  margin: 0;
  animation: rise .9s var(--ease) 180ms backwards;
}

.brand__logo img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 48px rgba(1, 8, 20, .65));
}

.brand__sweep {
  position: absolute;
  inset: 0;
  --sweep: -30%;
  background: linear-gradient(104deg,
    transparent calc(var(--sweep) - 16%),
    color-mix(in oklab, var(--blue) 72%, white) var(--sweep),
    transparent calc(var(--sweep) + 16%));
  -webkit-mask-image: url("assets/logo-execcorp.png");
  mask-image: url("assets/logo-execcorp.png");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

@keyframes rise {
  from { opacity: 0; transform: scale(.96); }
}

@keyframes lift {
  from { opacity: 0; transform: translateY(12px); }
}

/* ---------- rodapé ---------- */

.foot {
  position: absolute;
  z-index: 4;
  left: 0; right: 0;
  bottom: calc(clamp(24px, 4.5vh, 48px) + env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: 10px;
  justify-items: center;
  padding: 0 24px;
  text-align: center;
  animation: lift .8s var(--ease) 620ms backwards;
}

.foot::before {
  content: "";
  position: absolute;
  inset: -34px 0 -80px;
  z-index: -1;
  background: linear-gradient(180deg, rgba(1, 8, 20, 0) 0%, rgba(1, 8, 20, .78) 46%, rgba(1, 8, 20, .94) 100%);
  pointer-events: none;
}

.foot__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  font-size: clamp(.9rem, 1.6vw, 1.02rem);
  font-weight: 600;
  letter-spacing: .01em;
}

.foot__sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: color-mix(in oklab, var(--blue) 80%, transparent);
}

.foot__legal {
  margin: 0;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--fog) 72%, transparent);
}

.link {
  position: relative;
  color: var(--fog);
  text-decoration: none;
  padding: 4px 2px;
  pointer-events: auto;
  touch-action: manipulation;
  transition: color .25s ease;
}

/* área de toque de 50px sem alterar o ritmo visual da linha */
.link::before {
  content: "";
  position: absolute;
  inset: -11px -8px;
}

.link::after {
  content: "";
  position: absolute;
  left: 2px; right: 2px; bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: .28;
  transform-origin: left;
  transform: scaleX(1);
  transition: transform .35s var(--ease), opacity .25s ease;
}

.link:hover { color: var(--blue); }
.link:hover::after { opacity: 1; transform: scaleX(1.02); }

.link:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
  border-radius: 3px;
}

/* ---------- variações de ambiente ---------- */

@media (max-width: 767px) {
  .brand__logo { width: min(330px, 78vw); }
  .sound { width: 44px; height: 44px; }
  .foot { gap: 8px; }
  .foot__contact { gap: 8px 12px; font-size: .92rem; }
  .foot__legal { font-size: .62rem; letter-spacing: .09em; }
  .watermark { font-size: clamp(4rem, 26vw, 9rem); }
  .spot { display: none; }
  .frame { display: none; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root { --scene-opacity: .18; }
  .stage__overlay { background: linear-gradient(180deg, rgba(1, 8, 20, .92) 0%, rgba(1, 8, 20, .6) 40%, rgba(1, 8, 20, .96) 100%); }
  .watermark { -webkit-text-stroke-color: color-mix(in oklab, var(--blue) 26%, transparent); }
  .foot__legal { color: var(--fog); }
}

@media (prefers-reduced-motion: reduce) {
  .dust, .spot, .grain { display: none; }
  .sound.is-on .sound__bars i { animation: none; height: 9px; }
  .stage__scene, .stage__video { transition: none; }
  .brand__logo, .foot { opacity: 1; transform: none; animation: none; }
  .link::after { transition: none; }
}