:root {
  color-scheme: dark;
  --deep-pine: #143b2d;
  --deep-pine-shadow: #091d15;
  --mist: #f2f4ef;
  --moss: #a8b8ae;
}

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

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--deep-pine-shadow);
}

body {
  position: relative;
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow: hidden;
  color: var(--mist);
  background: #12382a;
  isolation: isolate;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: -3;
  content: "";
  pointer-events: none;
  background: url("../images/atmosphere-bg.webp") center center / cover no-repeat;
  transform: scale(1.02);
}

body::after {
  position: fixed;
  inset: 0;
  z-index: 0;
  content: "";
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%, transparent 40%, rgb(5 16 11 / 0.055) 78%, rgb(4 12 9 / 0.13) 100%);
}

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.mist {
  position: absolute;
  inset: -9vmax;
  opacity: 0;
  animation-play-state: paused;
  animation-fill-mode: both;
  will-change: transform, opacity;
  transition: opacity 2.2s ease;
}

.mist img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  animation-play-state: paused;
  animation-fill-mode: both;
  will-change: transform;
  user-select: none;
}

/* Front layer: slightly more transparent, smaller, sharper, larger parallax. */
.mist--a {
  z-index: 2;
  inset: -7vmax;
  animation: mist-path-a 16s linear infinite;
  animation-delay: -5s;
}

.mist--a img {
  animation: mist-shape-a 20s linear infinite;
  animation-delay: -8s;
}

/* Rear layer: larger, blurrier, slower and calmer, more like a deep veil. */
.mist--b {
  z-index: 1;
  inset: -14vmax;
  filter: blur(12px);
  animation: mist-path-b 38s linear infinite;
  animation-delay: -19s;
}

.mist--b img {
  animation: mist-shape-b 48s linear infinite;
  animation-delay: -23s;
}

.mist-ready .mist {
  animation-play-state: running;
}

.mist-ready .mist img {
  animation-play-state: running;
}

.mist-ready .mist--a {
  opacity: 0.22;
}

.mist-ready .mist--b {
  opacity: 0.30;
}

.landing {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(2rem, 5vw, 5rem);
  place-items: center;
}

.identity {
  position: relative;
  z-index: 1;
  display: flex;
  width: min(100%, 50rem);
  flex-direction: column;
  align-items: center;
  text-align: center;
  transform: translateY(-3vh);
}

.identity::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(22rem, 48vw);
  height: min(22rem, 48vw);
  content: "";
  pointer-events: none;
  transform: translate(-50%, -57%);
  border-radius: 50%;
  background: radial-gradient(circle, rgb(242 244 239 / 0.012) 0%, rgb(242 244 239 / 0.006) 34%, transparent 68%);
  filter: blur(18px);
  z-index: -1;
}

.identity__sign {
  display: block;
  width: clamp(7.2rem, 12.8vw, 11rem);
  height: auto;
  margin: 0 0 clamp(0rem, 0.18vw, 0.1rem);
  filter: drop-shadow(0 0 1rem rgb(242 244 239 / 0.04));
}

.identity__title {
  margin: 0;
  font-family: "Iowan Old Style", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  font-size: clamp(3.3rem, 7vw, 6.25rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.identity__subtitle {
  margin: clamp(0.52rem, 1vw, 0.72rem) 0 0;
  color: #b3c0b7;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(0.72rem, 1.15vw, 0.95rem);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: clamp(0.16em, 0.5vw, 0.28em);
  text-transform: uppercase;
}

.identity__sign,
.identity__title,
.identity__subtitle {
  opacity: 0;
  will-change: opacity, transform, filter;
}

.identity__sign {
  transform: translateY(8px) scale(0.985);
  transition: opacity 0.85s ease, transform 1.15s cubic-bezier(0.22, 1, 0.36, 1), filter 1.15s ease;
}

.identity__title {
  transform: translateY(10px);
  transition: opacity 0.95s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: 0.12s;
}

.identity__subtitle {
  transform: translateY(8px);
  transition: opacity 0.95s ease, transform 1.2s cubic-bezier(0.22, 1, 0.36, 1), letter-spacing 1s ease;
  transition-delay: 0.24s;
}

.intro-ready .identity__sign,
.intro-ready .identity__title,
.intro-ready .identity__subtitle {
  opacity: 1;
}

.intro-ready .identity__sign {
  transform: translateY(0) scale(1);
}

.intro-ready .identity__title,
.intro-ready .identity__subtitle {
  transform: translateY(0);
}

@keyframes mist-path-a {
  0%   { transform: translate3d( 1.2vw, -3.8vh, 0); }
  14%  { transform: translate3d( 5.8vw, -1.6vh, 0); }
  31%  { transform: translate3d( 6.8vw,  2.6vh, 0); }
  48%  { transform: translate3d( 2.6vw,  5.6vh, 0); }
  67%  { transform: translate3d(-4.2vw,  3.5vh, 0); }
  84%  { transform: translate3d(-6.2vw, -1.4vh, 0); }
  100% { transform: translate3d( 1.2vw, -3.8vh, 0); }
}

@keyframes mist-shape-a {
  0%   { transform: scale(1.01) rotate(-0.5deg) translate3d(-1.6%,  0.4%, 0); }
  19%  { transform: scale(1.04) rotate( 0.2deg) translate3d( 1.2%, -1.1%, 0); }
  46%  { transform: scale(1.03) rotate( 0.5deg) translate3d( 1.7%,  0.9%, 0); }
  73%  { transform: scale(1.05) rotate(-0.3deg) translate3d(-1.1%,  1.3%, 0); }
  100% { transform: scale(1.01) rotate(-0.5deg) translate3d(-1.6%,  0.4%, 0); }
}

@keyframes mist-path-b {
  0%   { transform: translate3d( 2.6vw, -1.2vh, 0); }
  18%  { transform: translate3d( 0.8vw,  2.4vh, 0); }
  39%  { transform: translate3d(-2.8vw,  3.4vh, 0); }
  61%  { transform: translate3d(-4.2vw,  0.5vh, 0); }
  82%  { transform: translate3d(-0.8vw, -2.8vh, 0); }
  100% { transform: translate3d( 2.6vw, -1.2vh, 0); }
}

@keyframes mist-shape-b {
  0%   { transform: scale(1.15) rotate( 0.1deg) translate3d( 0.6%, -0.3%, 0); }
  26%  { transform: scale(1.21) rotate(-0.2deg) translate3d(-0.6%,  0.7%, 0); }
  56%  { transform: scale(1.17) rotate( 0.0deg) translate3d(-0.9%, -0.8%, 0); }
  82%  { transform: scale(1.22) rotate( 0.2deg) translate3d( 0.5%,  0.6%, 0); }
  100% { transform: scale(1.15) rotate( 0.1deg) translate3d( 0.6%, -0.3%, 0); }
}

@media (max-width: 560px) {
  .identity {
    transform: translateY(-2.5vh);
  }

  .identity::before {
    width: min(18rem, 68vw);
    height: min(18rem, 68vw);
    transform: translate(-50%, -55%);
    filter: blur(14px);
  }

  .identity__sign {
    width: clamp(6rem, 21vw, 7.8rem);
  }

  .identity__subtitle {
    max-width: 24rem;
    letter-spacing: 0.19em;
  }

  body::before {
    transform: scale(1.03);
    background-position: center 46%;
  }

  .mist {
    inset: -12vmax;
  }

  .mist--a {
    inset: -10vmax;
  }

  .mist--b {
    inset: -15vmax;
    filter: blur(10px);
  }

  .mist-ready .mist--a {
    opacity: 0.20;
  }

  .mist-ready .mist--b {
    opacity: 0.26;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mist,
  .mist img {
    animation: none;
  }

  .identity__sign,
  .identity__title,
  .identity__subtitle {
    opacity: 1;
    transform: none;
    transition: none;
  }
}