:root {
  color-scheme: dark;
  --bg: #020608;
  --ice: rgba(186, 229, 255, 0.9);
  --ice-soft: rgba(138, 205, 244, 0.34);
  --cycle: 24s;
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100svh;
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", monospace;
}

.presence {
  position: relative;
  width: 100vw;
  height: 100svh;
  min-height: 420px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(18, 39, 51, 0.22), transparent 48%),
    var(--bg);
  isolation: isolate;
}

.hero {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  filter: brightness(0.91) contrast(0.95) saturate(0.92);
  transform: scale(1.002);
  animation: imageBreath 28s ease-in-out infinite;
  user-select: none;
  pointer-events: none;
}

/*
  A translucent atmospheric veil. This is what makes the artwork feel less
  like a flat poster without washing out the crest or wordmark.
*/
.atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 46%, rgba(95, 154, 187, 0.10), transparent 31%),
    radial-gradient(circle at 50% 62%, rgba(54, 105, 135, 0.055), transparent 43%),
    linear-gradient(to bottom, rgba(4, 10, 14, 0.08) 0%, rgba(4, 9, 13, 0.15) 66%, rgba(1, 5, 7, 0.38) 100%);
  box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.26);
  animation: atmosphereBreath 22s ease-in-out infinite;
}


/*
  WISPY FOG PASS
  Unlike the previous experiment, this layer contains no opaque black field.
  Only the smoke itself has alpha. "screen" blend makes the fog visible as
  mist without lowering the brightness of the entire page.
*/
.fog-field {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
}

.fog-wisp {
  position: absolute;
  width: 145%;
  height: 84%;
  left: -22%;
  top: 8%;
  background: url("assets/mythoreal-fog-wisps.webp") center / cover no-repeat;
  mix-blend-mode: screen;
  pointer-events: none;
  will-change: transform, opacity;
  filter: blur(2px);
  mask-image: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(0,0,0,.65) 10%,
    #000 24%,
    #000 74%,
    rgba(0,0,0,.55) 88%,
    transparent 100%
  );
}

.fog-wisp-a {
  opacity: 0.31;
  transform: translate3d(-4%, 1%, 0) scale(1.05);
  animation: fogWispA 52s ease-in-out infinite alternate;
}

.fog-wisp-b {
  opacity: 0.20;
  top: 20%;
  left: -30%;
  width: 160%;
  height: 72%;
  transform: translate3d(6%, -1%, 0) scaleX(-1) scale(1.12);
  filter: blur(5px);
  animation: fogWispB 69s ease-in-out infinite alternate;
}

.fog-wisp-c {
  opacity: 0.17;
  top: 38%;
  left: -18%;
  width: 138%;
  height: 57%;
  background-position: center 64%;
  transform: translate3d(-3%, 2%, 0) scale(1.16);
  filter: blur(8px);
  animation: fogWispC 43s ease-in-out infinite alternate;
}

@keyframes fogWispA {
  0% {
    transform: translate3d(-5%, 1%, 0) scale(1.05);
    opacity: 0.24;
  }
  42% {
    transform: translate3d(1%, -1.5%, 0) scale(1.09);
    opacity: 0.34;
  }
  100% {
    transform: translate3d(6%, 1%, 0) scale(1.06);
    opacity: 0.27;
  }
}

@keyframes fogWispB {
  0% {
    transform: translate3d(7%, -1%, 0) scaleX(-1) scale(1.12);
    opacity: 0.14;
  }
  56% {
    transform: translate3d(-1%, 1%, 0) scaleX(-1) scale(1.17);
    opacity: 0.24;
  }
  100% {
    transform: translate3d(-7%, -0.5%, 0) scaleX(-1) scale(1.13);
    opacity: 0.18;
  }
}

@keyframes fogWispC {
  0% {
    transform: translate3d(-4%, 3%, 0) scale(1.16);
    opacity: 0.12;
  }
  48% {
    transform: translate3d(2%, 0%, 0) scale(1.21);
    opacity: 0.21;
  }
  100% {
    transform: translate3d(5%, 2%, 0) scale(1.17);
    opacity: 0.14;
  }
}


/*
  LOCALIZED GUST PASS
  The gust uses the darker streak texture from the earlier sweep idea, but it is
  reshaped into a narrow tapered plume and positioned off-center. It disturbs
  only part of the page instead of reading like a band moving across the whole screen.
*/
.fog-gust {
  position: absolute;
  width: min(60vw, 900px);
  aspect-ratio: 2.2 / 1;
  background: url("assets/mythoreal-fog-gust-dark.webp") center / contain no-repeat;
  pointer-events: none;
  opacity: 0;
  filter: blur(1.05px);
  will-change: transform, opacity, filter;
}

/* Enters from the left, upper-middle, taper pointing inward. */
.fog-gust-a {
  left: -18%;
  top: 29%;
  transform-origin: 12% 50%;
  animation: darkGustA 88s linear infinite;
}

/* Later return gust from the right, slightly lower and a bit flatter. */
.fog-gust-b {
  right: -16%;
  top: 45%;
  transform-origin: 88% 52%;
  animation: darkGustB 88s linear infinite;
}

@keyframes darkGustA {
  0%, 29% {
    opacity: 0;
    transform: translate3d(-4%, 0.7%, 0) rotate(7deg) scale(0.90);
    filter: blur(1.1px);
  }
  32% {
    opacity: 0.18;
    transform: translate3d(2%, 0.25%, 0) rotate(6deg) scale(0.98);
  }
  36% {
    opacity: 0.38;
    transform: translate3d(16%, -0.35%, 0) rotate(5deg) scale(1.08);
    filter: blur(1.45px);
  }
  41% {
    opacity: 0.30;
    transform: translate3d(31%, -0.95%, 0) rotate(4deg) scale(1.16);
    filter: blur(1.65px);
  }
  46% {
    opacity: 0.14;
    transform: translate3d(42%, -1.55%, 0) rotate(3deg) scale(1.21);
    filter: blur(1.45px);
  }
  51%, 100% {
    opacity: 0;
    transform: translate3d(47%, -1.8%, 0) rotate(2deg) scale(1.22);
  }
}

@keyframes darkGustB {
  0%, 72% {
    opacity: 0;
    transform: scaleX(-1) translate3d(-4%, 0.45%, 0) rotate(3deg) scale(0.88);
    filter: blur(1.1px);
  }
  75% {
    opacity: 0.16;
    transform: scaleX(-1) translate3d(2%, 0.05%, 0) rotate(2deg) scale(0.96);
  }
  79% {
    opacity: 0.34;
    transform: scaleX(-1) translate3d(15%, -0.3%, 0) rotate(1deg) scale(1.05);
    filter: blur(1.45px);
  }
  84% {
    opacity: 0.26;
    transform: scaleX(-1) translate3d(29%, -0.75%, 0) rotate(0deg) scale(1.13);
    filter: blur(1.65px);
  }
  89% {
    opacity: 0.12;
    transform: scaleX(-1) translate3d(40%, -1.05%, 0) rotate(-1deg) scale(1.18);
    filter: blur(1.45px);
  }
  94%, 100% {
    opacity: 0;
    transform: scaleX(-1) translate3d(45%, -1.2%, 0) rotate(-1deg) scale(1.20);
  }
}

/*
  These paths sit directly over the waveform already baked into the artwork.
  Only a short dash is visible at a time, so the existing waveform appears to
  wake up instead of looking like a separate animated graphic.
*/
.waveform-overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.wave-trace {
  fill: none;
  stroke: rgba(206, 239, 255, 0.94);
  stroke-width: 2.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 82 918;
  opacity: 0;
  filter: url(#signalGlow);
  vector-effect: non-scaling-stroke;
}

.wave-trace-left {
  animation: leftWavePulse var(--cycle) linear infinite;
}

.wave-trace-right {
  animation: rightWavePulse var(--cycle) linear infinite;
}

/* A tiny central shimmer. It is deliberately infrequent. */
.crest-aura {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 40%;
  width: clamp(180px, 22vw, 390px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(176, 222, 248, 0.10), rgba(104, 172, 211, 0.025) 39%, transparent 69%);
  filter: blur(12px);
  opacity: 0.14;
  animation: crestPresence var(--cycle) ease-in-out infinite;
}

.status {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 5vh, 58px);
  transform: translateX(-50%);
  width: min(440px, 76vw);
  text-align: center;
  z-index: 6;
  user-select: none;
}

.status-text {
  margin: 0 0 10px;
  color: rgba(181, 222, 245, 0.72);
  font-size: clamp(9px, 0.82vw, 12px);
  font-weight: 500;
  letter-spacing: clamp(0.24em, 0.46vw, 0.52em);
  text-indent: 0.52em;
  text-shadow: 0 0 12px rgba(116, 203, 255, 0.18);
  animation: statusBreath var(--cycle) ease-in-out infinite;
}

.signal {
  position: relative;
  height: 18px;
  overflow: hidden;
  opacity: 0.76;
}

.signal-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--ice-soft) 23%,
    rgba(197, 234, 255, 0.52) 50%,
    var(--ice-soft) 77%,
    transparent
  );
  transform: translateY(-50%);
}

.signal-core {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(221, 246, 255, 0.96);
  box-shadow:
    0 0 6px 2px rgba(133, 211, 255, 0.72),
    0 0 18px 6px rgba(90, 182, 235, 0.24);
  transform: translate(-50%, -50%);
  animation: corePulse var(--cycle) ease-in-out infinite;
}

.signal-pulse {
  position: absolute;
  top: 50%;
  left: -20%;
  width: 20%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(205, 240, 255, 0.96),
    transparent
  );
  filter: blur(0.2px);
  transform: translateY(-50%);
  opacity: 0;
  animation: bottomTravel var(--cycle) cubic-bezier(.28, .02, .7, .98) infinite;
}

/* Sequence: left waveform -> right waveform -> center aura -> bottom signal. */
@keyframes leftWavePulse {
  0%, 7% {
    stroke-dashoffset: 1000;
    opacity: 0;
  }
  9% {
    opacity: 0.18;
  }
  12%, 22% {
    opacity: 0.92;
  }
  27% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  28%, 100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

@keyframes rightWavePulse {
  0%, 31% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
  34% {
    opacity: 0.18;
  }
  37%, 47% {
    opacity: 0.88;
  }
  52% {
    stroke-dashoffset: -1000;
    opacity: 0;
  }
  53%, 100% {
    stroke-dashoffset: -1000;
    opacity: 0;
  }
}

@keyframes crestPresence {
  0%, 54%, 100% {
    opacity: 0.10;
    transform: translate(-50%, -50%) scale(0.98);
  }
  61% {
    opacity: 0.28;
    transform: translate(-50%, -50%) scale(1.025);
  }
  68% {
    opacity: 0.12;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes bottomTravel {
  0%, 72% {
    left: -20%;
    opacity: 0;
  }
  75% {
    opacity: 0.95;
  }
  91% {
    left: 100%;
    opacity: 0.95;
  }
  94%, 100% {
    left: 120%;
    opacity: 0;
  }
}

@keyframes corePulse {
  0%, 71%, 100% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow:
      0 0 6px 2px rgba(133, 211, 255, 0.62),
      0 0 18px 6px rgba(90, 182, 235, 0.20);
  }
  84% {
    transform: translate(-50%, -50%) scale(1.55);
    box-shadow:
      0 0 8px 3px rgba(168, 226, 255, 0.86),
      0 0 24px 9px rgba(90, 182, 235, 0.30);
  }
}

@keyframes statusBreath {
  0%, 65%, 100% { opacity: 0.78; }
  84% { opacity: 1; }
}

@keyframes atmosphereBreath {
  0%, 100% { opacity: 0.76; }
  48% { opacity: 1; }
  62% { opacity: 0.87; }
}

@keyframes imageBreath {
  0%, 100% {
    filter: brightness(0.90) contrast(0.95) saturate(0.92);
    transform: scale(1.002);
  }
  50% {
    filter: brightness(0.94) contrast(0.945) saturate(0.94);
    transform: scale(1.006);
  }
}

@media (max-width: 760px) {
  .status {
    bottom: max(22px, env(safe-area-inset-bottom));
  }

  .atmosphere {
    box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.22);
  }

  .wave-trace {
    stroke-width: 1.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-art,
  .atmosphere,
  .fog-wisp-a,
  .fog-wisp-b,
  .fog-wisp-c,
  .fog-gust-a,
  .fog-gust-b,
  .wave-trace-left,
  .wave-trace-right,
  .crest-aura,
  .status-text,
  .signal-core,
  .signal-pulse {
    animation: none;
  }

  .fog-wisp-a { opacity: 0.24; }
  .fog-wisp-b { opacity: 0.14; }
  .fog-wisp-c { opacity: 0.12; }

  .fog-gust-a,
  .fog-gust-b { opacity: 0; }

  .wave-trace {
    opacity: 0;
  }
}