* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  background: #ffffff;
}

body {
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

.home {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  background: #ffffff;
}

.intro-layer {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #05080d;
  opacity: 1;
  visibility: visible;
  transition: opacity 700ms ease, visibility 700ms ease;
}

.intro-layer.is-complete {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-layer__video {
  width: 100vw;
  height: 100vh;
  height: 100svh;
  display: block;
  object-fit: cover;
  background: #05080d;
}

.intro-sound {
  position: absolute;
  right: clamp(16px, 3vw, 38px);
  bottom: clamp(16px, 3vw, 38px);
  z-index: 21;
  width: clamp(48px, 5.4vw, 68px);
  height: clamp(48px, 5.4vw, 68px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 50%;
  background: rgb(10 12 16 / 0.52);
  color: #ffffff;
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.28);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 250ms ease,
    border-color 250ms ease,
    transform 250ms ease,
    color 250ms ease,
    opacity 240ms ease,
    visibility 240ms ease;
}

.intro-sound:hover,
.intro-sound:focus-visible {
  background: rgb(255 255 255 / 0.9);
  border-color: rgb(255 255 255 / 0.98);
  color: #15171a;
  transform: translateY(-2px);
}

.intro-sound:focus-visible {
  outline: 3px solid rgb(255 255 255 / 0.9);
  outline-offset: 4px;
}

.intro-sound__icon {
  width: 54%;
  height: 54%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.intro-sound__icon--on,
.intro-sound.is-unmuted .intro-sound__icon--muted {
  display: none;
}

.intro-sound.is-unmuted .intro-sound__icon--on {
  display: block;
}

.intro-sound__tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgb(10 12 16 / 0.78);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: translate(4px, -50%);
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: nowrap;
  pointer-events: none;
}

.intro-sound:hover .intro-sound__tooltip,
.intro-sound:focus-visible .intro-sound__tooltip {
  opacity: 1;
  transform: translate(0, -50%);
}

.intro-active .reveal-control {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(8px);
}

.reveal-scene {
  --light-x: 50%;
  --light-y: 48%;
  --image-shift-x: 0px;
  --image-shift-y: 0px;
  --fog-shift-x: 0px;
  --fog-shift-y: 0px;
  --ray-shift-x: 0px;
  --ray-shift-y: 0px;
  position: relative;
  width: min(100vw, calc(100svh * 1.5), 1536px);
  aspect-ratio: 3 / 2;
  max-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #ffffff;
}

.reveal-scene::before {
  content: "";
  position: absolute;
  inset: -28%;
  z-index: 4;
  pointer-events: none;
  background:
    linear-gradient(106deg, transparent 12%, rgb(255 246 219 / 0.26) 22%, transparent 35%),
    linear-gradient(111deg, transparent 28%, rgb(255 248 232 / 0.18) 38%, transparent 50%),
    linear-gradient(118deg, transparent 52%, rgb(255 255 255 / 0.16) 62%, transparent 73%);
  filter: blur(12px);
  mix-blend-mode: screen;
  opacity: 0.3;
  transform: translate3d(var(--ray-shift-x), var(--ray-shift-y), 0) rotate(-5deg);
  animation: rayDrift 24s ease-in-out infinite;
  transition: opacity 1200ms ease, transform 700ms ease-out, visibility 0s 1200ms;
}

.reveal-scene.is-revealed::before {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

.reveal-scene__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  backface-visibility: hidden;
  filter: brightness(0.54) saturate(0.8) contrast(0.96);
  transform: translate3d(var(--image-shift-x), var(--image-shift-y), 0) scale(1.026);
  transition:
    opacity 1300ms ease,
    filter 1300ms ease,
    transform 700ms ease-out;
}

.reveal-scene__image--foggy {
  z-index: 0;
}

.reveal-scene__image--clear {
  z-index: 1;
  opacity: 0;
  filter: brightness(1.04) saturate(1.04) contrast(1.08);
  transform: translate3d(0, 0, 0) scale(1);
}

.reveal-scene.is-revealed .reveal-scene__image--foggy {
  opacity: 0;
  visibility: hidden;
  transition-duration: 180ms;
}

.reveal-scene.is-revealed .reveal-scene__image--clear {
  opacity: 1;
  filter: brightness(1.08) saturate(1.08) contrast(1.12);
  transform: translate3d(0, 0, 0) scale(1);
}

.reveal-scene__shade,
.reveal-scene__fog,
.reveal-scene__light {
  position: absolute;
  pointer-events: none;
}

.reveal-scene__shade {
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg, rgb(5 8 13 / 0.08), rgb(5 8 13 / 0.42) 78%),
    linear-gradient(90deg, rgb(5 8 13 / 0.36), transparent 22%, transparent 78%, rgb(5 8 13 / 0.28));
  opacity: 0.86;
  transition: opacity 1200ms ease, visibility 0s 1200ms;
}

.reveal-scene.is-revealed .reveal-scene__shade {
  opacity: 0;
  visibility: hidden;
}

.reveal-scene__fog {
  inset: -18%;
  z-index: 2;
  background:
    linear-gradient(102deg, transparent 0%, rgb(255 255 255 / 0.62) 16%, transparent 36%, rgb(255 255 255 / 0.48) 56%, transparent 78%),
    linear-gradient(18deg, rgb(255 255 255 / 0.34), transparent 42%, rgb(255 255 255 / 0.5) 82%, transparent 100%),
    repeating-linear-gradient(172deg, rgb(255 255 255 / 0.16) 0 16px, transparent 16px 54px);
  filter: blur(22px);
  mix-blend-mode: screen;
  opacity: 0.9;
  transform: translate3d(calc(-5% + var(--fog-shift-x)), calc(1% + var(--fog-shift-y)), 0) scale(1.12);
  animation: clearFog 18s ease-in-out forwards, driftFog 26s ease-in-out infinite;
  transition:
    opacity 1300ms ease,
    transform 1300ms ease,
    filter 1300ms ease,
    visibility 0s 1300ms;
}

.reveal-scene__fog--two {
  z-index: 3;
  opacity: 0.62;
  transform: translate3d(calc(6% - var(--fog-shift-x)), calc(-3% - var(--fog-shift-y)), 0) scale(1.08);
  animation: clearFogSecondary 22s ease-in-out forwards, driftFogReverse 31s ease-in-out infinite;
}

.reveal-scene.is-revealed .reveal-scene__fog {
  opacity: 0;
  visibility: hidden;
  filter: blur(0);
  animation: none;
  transform: translate3d(-26%, -10%, 0) scale(1.24);
}

.reveal-scene.is-revealed .reveal-scene__fog--two {
  opacity: 0;
  transform: translate3d(24%, -14%, 0) scale(1.2);
}

.reveal-scene__light {
  inset: 0;
  z-index: 5;
  background:
    radial-gradient(circle at var(--light-x) var(--light-y), rgb(255 244 207 / 0.28), rgb(255 244 207 / 0.1) 18%, transparent 42%),
    linear-gradient(180deg, transparent 0%, rgb(255 255 255 / 0.04) 70%, rgb(255 255 255 / 0.1) 100%);
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 900ms ease, visibility 0s 1100ms;
}

.reveal-scene.is-revealed .reveal-scene__light {
  opacity: 0;
  visibility: hidden;
  animation: none;
}

.reveal-scene__copy {
  position: absolute;
  left: clamp(18px, 5vw, 72px);
  right: clamp(18px, 5vw, 72px);
  bottom: clamp(22px, 7vw, 94px);
  z-index: 6;
  display: grid;
  gap: clamp(10px, 1.6vw, 18px);
  justify-items: center;
  text-align: center;
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 900ms ease 260ms,
    transform 900ms ease 260ms;
}

.reveal-scene.is-revealed .reveal-scene__copy {
  opacity: 1;
  transform: translateY(0);
}

.truth-line,
.manifesto {
  margin: 0;
  text-shadow: 0 2px 18px rgb(0 0 0 / 0.72);
}

.truth-line {
  display: grid;
  gap: clamp(2px, 0.65vw, 8px);
  font-size: clamp(2.25rem, 5.2vw, 4.9rem);
  font-weight: 800;
  line-height: 0.98;
}

.truth-line span {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px);
}

.reveal-scene.is-revealed .truth-line span {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 650ms ease, transform 650ms ease;
}

.reveal-scene.is-revealed .truth-line span:nth-child(2) {
  transition-delay: 140ms;
}

.reveal-scene.is-revealed .truth-line span:nth-child(3) {
  transition-delay: 280ms;
}

.manifesto {
  max-width: 760px;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 700;
  line-height: 1.35;
  color: rgb(255 255 255 / 0.94);
}

.reveal-control {
  position: absolute;
  right: clamp(16px, 3vw, 38px);
  bottom: clamp(16px, 3vw, 38px);
  z-index: 7;
  width: clamp(48px, 5.4vw, 68px);
  height: clamp(48px, 5.4vw, 68px);
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.72);
  border-radius: 50%;
  background: rgb(10 12 16 / 0.46);
  color: #ffffff;
  box-shadow: 0 14px 40px rgb(0 0 0 / 0.26);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 250ms ease,
    border-color 250ms ease,
    transform 250ms ease,
    color 250ms ease,
    opacity 240ms ease,
    visibility 240ms ease;
}

.reveal-control:hover,
.reveal-control:focus-visible {
  background: rgb(255 255 255 / 0.9);
  border-color: rgb(255 255 255 / 0.98);
  color: #15171a;
  transform: translateY(-2px);
}

.reveal-control:focus-visible {
  outline: 3px solid rgb(255 255 255 / 0.9);
  outline-offset: 4px;
}

.reveal-scene.is-revealed .reveal-control {
  background: rgb(255 255 255 / 0.84);
  color: #14171a;
}

.reveal-control__icon {
  width: 54%;
  height: 54%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.reveal-control__tooltip {
  position: absolute;
  right: calc(100% + 10px);
  top: 50%;
  padding: 6px 8px;
  border-radius: 4px;
  background: rgb(10 12 16 / 0.78);
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: translate(4px, -50%);
  transition: opacity 180ms ease, transform 180ms ease;
  white-space: nowrap;
  pointer-events: none;
}

.reveal-control:hover .reveal-control__tooltip,
.reveal-control:focus-visible .reveal-control__tooltip {
  opacity: 1;
  transform: translate(0, -50%);
}

@keyframes clearFog {
  0% {
    opacity: 0.94;
  }
  100% {
    opacity: 0.58;
  }
}

@keyframes clearFogSecondary {
  0% {
    opacity: 0.7;
  }
  100% {
    opacity: 0.42;
  }
}

@keyframes driftFog {
  0%,
  100% {
    background-position: 0 0, 0 0, 0 0;
  }
  50% {
    background-position: 140px -32px, -90px 42px, 80px 0;
  }
}

@keyframes driftFogReverse {
  0%,
  100% {
    background-position: 0 0, 0 0, 0 0;
  }
  50% {
    background-position: -120px 30px, 78px -36px, -64px 0;
  }
}

@keyframes lightSweep {
  0% {
    transform: translateX(-6%);
  }
  100% {
    transform: translateX(0);
  }
}

@keyframes rayDrift {
  0%,
  100% {
    background-position: -90px 0, 40px 0, 0 0;
  }
  50% {
    background-position: 90px 26px, -40px -18px, 64px 12px;
  }
}

@media (max-width: 720px) {
  .home {
    align-items: stretch;
  }

  .reveal-scene {
    width: 100vw;
    height: 100svh;
    max-height: none;
    aspect-ratio: auto;
  }

  .reveal-scene__image {
    object-fit: cover;
    object-position: center center;
  }

  .reveal-scene__copy {
    bottom: 82px;
  }

  .truth-line {
    gap: 4px;
    font-size: clamp(1.65rem, 9vw, 2.6rem);
  }

  .manifesto {
    max-width: 280px;
    font-size: 0.86rem;
  }
}

@media (min-width: 721px) and (max-width: 1100px) {
  .truth-line {
    font-size: 1.8rem;
  }

  .manifesto {
    font-size: 1.1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}