:root {
  --depth: 0;
  --ease-depth: 0;
  --ink: #f7f0cf;
  --glow-ink: #fff4c7;
  --deep-blue: #070d24;
  --abyss-blue: #01030d;
  --surface-glow: rgba(250, 244, 204, 0.96);
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--abyss-blue);
  scroll-behavior: smooth;
}

body {
  min-height: 100%;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  background: var(--abyss-blue);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.landing {
  min-height: 330svh;
}

.stage {
  position: sticky;
  top: 0;
  inset: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: #050917;
}

.water {
  position: absolute;
  inset: -1px;
  pointer-events: none;
}

.water-base {
  z-index: 0;
  background:
    radial-gradient(
      126% 64% at 50% -18%,
      rgba(255, 248, 211, calc(0.97 - var(--depth) * 0.76)) 0%,
      rgba(241, 235, 205, calc(0.9 - var(--depth) * 0.69)) 18%,
      rgba(183, 183, 178, calc(0.74 - var(--depth) * 0.45)) 33%,
      rgba(91, 97, 121, calc(0.75 - var(--depth) * 0.3)) 47%,
      rgba(38, 49, 86, 0.9) 63%,
      rgba(12, 21, 55, 0.98) 84%,
      #050b26 100%
    ),
    linear-gradient(
      180deg,
      rgba(246, 242, 213, calc(0.72 - var(--depth) * 0.7)) 0%,
      rgba(158, 160, 163, calc(0.6 - var(--depth) * 0.36)) 24%,
      rgba(62, 71, 105, 0.78) 41%,
      #142044 61%,
      #07102d 83%,
      var(--abyss-blue) 100%
    );
  filter: saturate(calc(0.7 + var(--depth) * 0.18)) brightness(calc(1.02 - var(--depth) * 0.34));
  transform: translate3d(0, calc(var(--depth) * -15svh), 0) scale(calc(1 + var(--depth) * 0.07));
  transform-origin: center top;
}

.reference-frame {
  z-index: 1;
  opacity: clamp(0, calc(1 - var(--depth) * 4.8), 1);
  background-image: url("assets/fond-page-attente-1920.jpg");
  background-image: image-set(
    url("assets/fond-page-attente-960.webp") type("image/webp") 1x,
    url("assets/fond-page-attente-1920.webp") type("image/webp") 2x,
    url("assets/fond-page-attente-1920.jpg") type("image/jpeg")
  );
  background-position: center center;
  background-size: cover;
  filter: brightness(calc(1 - var(--depth) * 0.26)) saturate(0.94);
  transform: translate3d(0, calc(var(--depth) * -6svh), 0) scale(calc(1 + var(--depth) * 0.03));
  transform-origin: center top;
}

.surface-light {
  z-index: 2;
  opacity: calc((1 - var(--depth) * 1.08) * 0.82);
  background:
    radial-gradient(
      86% 31% at 50% -2%,
      rgba(255, 248, 211, 0.95) 0%,
      rgba(250, 244, 209, 0.82) 35%,
      rgba(236, 231, 205, 0.24) 67%,
      rgba(244, 238, 205, 0) 100%
    ),
    radial-gradient(
      42% 24% at 16% 1%,
      rgba(255, 250, 218, 0.58) 0%,
      rgba(255, 253, 222, 0) 72%
    ),
    radial-gradient(
      39% 22% at 86% 1%,
      rgba(255, 250, 218, 0.55) 0%,
      rgba(255, 253, 222, 0) 70%
    );
  filter: blur(calc(11px + var(--depth) * 11px));
  transform: translate3d(0, calc(var(--depth) * -21svh), 0) scale(calc(1 + var(--depth) * 0.08));
}

.particles {
  z-index: 4;
  opacity: calc(0.16 + var(--depth) * 0.18);
  background-image:
    radial-gradient(circle at 18% 24%, rgba(255, 248, 211, 0.52) 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 32%, rgba(255, 248, 211, 0.34) 0 1px, transparent 1.6px),
    radial-gradient(circle at 84% 58%, rgba(255, 248, 211, 0.27) 0 1px, transparent 1.4px),
    radial-gradient(circle at 38% 77%, rgba(255, 248, 211, 0.22) 0 1px, transparent 1.5px);
  background-size: 16rem 18rem, 21rem 17rem, 18rem 22rem, 24rem 24rem;
  filter: blur(0.4px);
  transform: translate3d(0, calc(var(--depth) * -7svh), 0);
}

.particles::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: calc(0.12 + var(--depth) * 0.23);
  background-image:
    repeating-radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.16) 0 0.5px, transparent 0.9px 4px);
  background-size: 7rem 7rem;
  mix-blend-mode: soft-light;
}

.abyss {
  z-index: 5;
  opacity: calc(var(--depth) * 0.92);
  background:
    radial-gradient(90% 70% at 50% 40%, rgba(4, 12, 35, 0) 0%, rgba(2, 6, 18, 0.36) 58%, rgba(0, 1, 6, 0.9) 100%),
    linear-gradient(180deg, rgba(3, 8, 25, 0.12) 0%, rgba(1, 3, 12, 0.95) 78%, #00020a 100%);
}

.stage::after {
  position: absolute;
  z-index: 9;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: calc(0.26 + var(--depth) * 0.22);
  background:
    radial-gradient(88% 70% at 50% 46%, transparent 0 48%, rgba(0, 0, 0, 0.36) 100%),
    linear-gradient(180deg, transparent 0 68%, rgba(0, 0, 0, 0.26) 100%);
}

.stage::before {
  position: absolute;
  z-index: 8;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.19;
  background-image:
    repeating-radial-gradient(circle at 17% 31%, rgba(255, 255, 255, 0.055) 0 0.4px, rgba(255, 255, 255, 0) 0.9px 3px);
  mix-blend-mode: overlay;
}

.brand-mark {
  position: absolute;
  z-index: 6;
  top: calc(54.4% - var(--depth) * 27svh);
  left: 50%;
  width: min(88vw, clamp(35.5rem, 58vw, 69rem));
  transform: translate3d(-50%, -50%, 0) scale(calc(1 - var(--depth) * 0.38));
  opacity: clamp(0, calc(1 - (var(--depth) - 0.18) * 1.75), 1);
  filter:
    drop-shadow(0 0 calc(10px + var(--depth) * 4px) rgba(255, 244, 199, 0.18))
    blur(calc(var(--depth) * 2.6px));
  will-change: transform, opacity, filter;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: auto;
}

.teaser {
  position: absolute;
  z-index: 7;
  top: 50%;
  left: 50%;
  width: min(88vw, 44rem);
  margin: 0;
  color: rgba(255, 244, 199, 0.95);
  font-size: clamp(1.85rem, 4.2vw, 4.6rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 0 calc(0.32rem + (1 - var(--depth)) * 2.7rem) rgba(255, 244, 196, 0.28);
  transform: translate3d(-50%, calc(-42% + (1 - var(--depth)) * 13svh), 0);
  opacity: clamp(0, calc((var(--depth) - 0.43) * 1.75), 0.96);
  filter: blur(clamp(0px, calc((1 - var(--depth)) * 46px), 26px));
  will-change: transform, opacity, filter;
}

.contact-link {
  position: absolute;
  z-index: 7;
  top: calc(50% + clamp(6.2rem, 12vw, 10.8rem));
  left: 50%;
  color: rgba(255, 244, 199, 0.78);
  font-size: clamp(0.78rem, 1.05vw, 0.95rem);
  font-weight: 300;
  letter-spacing: 0.08em;
  text-align: center;
  text-decoration-line: underline;
  text-decoration-color: rgba(255, 244, 199, 0.56);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
  text-shadow: 0 0 calc(0.18rem + (1 - var(--depth)) * 1.5rem) rgba(255, 244, 196, 0.22);
  transform: translate3d(-50%, calc((1 - var(--depth)) * 8svh), 0);
  opacity: clamp(0, calc((var(--depth) - 0.56) * 2.2), 0.78);
  filter: blur(clamp(0px, calc((1 - var(--depth)) * 34px), 18px));
  will-change: transform, opacity, filter;
}

.contact-link:focus-visible {
  outline: 1px solid rgba(255, 244, 199, 0.86);
  outline-offset: 0.35rem;
}

.scroll-cue {
  position: absolute;
  z-index: 10;
  left: 50%;
  bottom: clamp(1.4rem, 4.2svh, 2.8rem);
  width: 2.4rem;
  height: 5.8rem;
  opacity: clamp(0, calc(0.98 - var(--depth) * 2.5), 0.98);
  transform: translateX(-50%);
  filter: drop-shadow(0 0 1.3rem rgba(255, 244, 199, 0.46));
}

.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 0.25rem;
  display: block;
  width: 1px;
  height: 4.8rem;
  background: linear-gradient(180deg, transparent, rgba(255, 244, 199, 0.98), transparent);
  transform: translateX(-50%);
}

.scroll-cue::before {
  position: absolute;
  left: 50%;
  content: "";
  transform: translateX(-50%);
}

.scroll-cue::before {
  top: 0.15rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--glow-ink);
  box-shadow: 0 0 1.2rem rgba(255, 244, 199, 0.9);
  animation: cue-dot 2.15s ease-in-out infinite;
}

.scroll-space {
  height: 230svh;
}

@keyframes cue-dot {
  0% {
    opacity: 0;
    transform: translate3d(-50%, 0, 0) scale(0.75);
  }
  28% {
    opacity: 1;
  }
  70%,
  100% {
    opacity: 0;
    transform: translate3d(-50%, 3.6rem, 0) scale(1);
  }
}

@media (max-width: 720px) {
  .brand-mark {
    top: calc(54% - var(--depth) * 24svh);
    width: min(96vw, 42rem);
  }

  .teaser {
    width: min(86vw, 28rem);
    font-size: clamp(2rem, 11vw, 3.7rem);
    line-height: 1.02;
  }

  .contact-link {
    top: calc(50% + 7.8rem);
    width: min(86vw, 24rem);
    font-size: clamp(0.68rem, 3vw, 0.82rem);
    letter-spacing: 0.06em;
  }

  .surface-light {
    background:
      radial-gradient(
        130% 30% at 50% -2%,
        rgba(255, 248, 211, 0.92) 0%,
        rgba(251, 244, 208, 0.72) 36%,
        rgba(244, 238, 205, 0) 100%
      );
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .scroll-cue::before {
    animation: none;
  }

  .water-base,
  .reference-frame,
  .surface-light,
  .particles,
  .brand-mark,
  .teaser,
  .contact-link {
    transition: opacity 180ms ease-out;
    transform: translate3d(0, 0, 0);
    filter: none;
  }
}