:root {
  --navy: #031a31;
  --navy-soft: #082942;
  --water-deep: #021426;
  --water-mid: #0b3553;
  --gold: #b88936;
  --page: #ffffff;
  --safe-vh: 1vh;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
}

html {
  background: var(--page);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: calc(var(--safe-vh) * 100);
  overflow: hidden;
  color: var(--navy);
  background:
    radial-gradient(circle at 50% 46%, rgba(184, 137, 54, 0.055), rgba(255, 255, 255, 0) 30%),
    linear-gradient(180deg, #ffffff 0%, #ffffff 68%, #fbfcfc 100%);
  font-family: Georgia, "Times New Roman", serif;
}

.page {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: calc(var(--safe-vh) * 100);
  padding: clamp(24px, 5vh, 56px) clamp(16px, 4vw, 48px) clamp(150px, 22vh, 240px);
}

.logo-wrap {
  width: clamp(280px, 58vw, 720px);
  max-width: 92vw;
  opacity: 0;
  transform: translateY(10px) scale(0.992);
  animation:
    logoReveal 900ms ease forwards,
    logoFloat 8.5s ease-in-out 1s infinite;
  will-change: transform;
}

.logo {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
  border: 0;
  outline: 0;
  background: transparent;
  filter: drop-shadow(0 16px 28px rgba(3, 26, 49, 0.055));
  transform: translateZ(0);
  user-select: none;
  -webkit-user-drag: none;
}

.water {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  height: clamp(120px, 18vh, 205px);
  overflow: hidden;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(7, 33, 55, 0.08) 24%, rgba(5, 25, 45, 0.58) 100%);
}

.water::before {
  content: "";
  position: absolute;
  inset: 34% -12% -38%;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.18) 28%, rgba(255, 255, 255, 0) 54%),
    linear-gradient(180deg, rgba(12, 57, 87, 0.68), rgba(2, 20, 38, 0.96));
  filter: blur(0.2px);
}

.water::after {
  content: "";
  position: absolute;
  inset: 28% -30% -18%;
  background:
    radial-gradient(ellipse at 22% 38%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0) 38%),
    radial-gradient(ellipse at 78% 44%, rgba(184, 137, 54, 0.16), rgba(184, 137, 54, 0) 42%),
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.13), rgba(255, 255, 255, 0));
  filter: blur(18px);
  opacity: 0.9;
  animation: waterDrift 18s ease-in-out infinite alternate;
}

.water-glow {
  position: absolute;
  width: 44vw;
  min-width: 420px;
  height: 90px;
  border-radius: 999px;
  filter: blur(30px);
  opacity: 0.36;
  background: rgba(255, 255, 255, 0.32);
}

.water-glow-one {
  left: -8%;
  top: 38%;
  animation: glowMoveOne 24s ease-in-out infinite alternate;
}

.water-glow-two {
  right: -10%;
  top: 48%;
  opacity: 0.24;
  animation: glowMoveTwo 28s ease-in-out infinite alternate;
}

.wave {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 220%;
  height: 100%;
  transform-origin: center bottom;
  will-change: transform;
}

.wave path {
  fill: rgba(3, 26, 49, 0.76);
}

.wave-back {
  bottom: 12px;
  opacity: 0.28;
  animation: waveFlow 34s linear infinite, waveLift 9s ease-in-out infinite;
}

.wave-front {
  opacity: 0.62;
  animation: waveFlow 26s linear infinite reverse, waveLift 8s ease-in-out infinite reverse;
}

@keyframes logoReveal {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes logoFloat {
  0%, 100% {
    transform: translateY(0) rotate(-0.08deg);
  }
  50% {
    transform: translateY(-7px) rotate(0.08deg);
  }
}

@keyframes waveFlow {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes waveLift {
  0%, 100% {
    translate: 0 0;
  }
  50% {
    translate: 0 4px;
  }
}

@keyframes waterDrift {
  from {
    transform: translateX(-4%) scaleX(1.03);
  }
  to {
    transform: translateX(4%) scaleX(1.08);
  }
}

@keyframes glowMoveOne {
  from {
    transform: translateX(-4%) translateY(0);
  }
  to {
    transform: translateX(18%) translateY(8px);
  }
}

@keyframes glowMoveTwo {
  from {
    transform: translateX(6%) translateY(8px);
  }
  to {
    transform: translateX(-16%) translateY(-4px);
  }
}

@media (max-width: 1024px) {
  .logo-wrap {
    width: clamp(300px, 70vw, 620px);
  }

  .page {
    padding-bottom: clamp(150px, 24vh, 230px);
  }
}

@media (max-width: 640px) {
  body {
    background:
      radial-gradient(circle at 50% 43%, rgba(184, 137, 54, 0.045), rgba(255, 255, 255, 0) 34%),
      linear-gradient(180deg, #ffffff 0%, #ffffff 70%, #fbfcfc 100%);
  }

  .page {
    align-items: center;
    padding: 22px 16px clamp(142px, 25vh, 190px);
  }

  .logo-wrap {
    width: min(88vw, 430px);
  }

  .water {
    height: clamp(118px, 20vh, 175px);
  }

  .water-glow {
    min-width: 280px;
    height: 72px;
  }
}

@media (max-width: 380px) {
  .logo-wrap {
    width: min(91vw, 360px);
  }

  .page {
    padding-bottom: 132px;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .page {
    padding-top: 12px;
    padding-bottom: 118px;
  }

  .logo-wrap {
    width: min(52vw, 430px);
  }

  .water {
    height: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-wrap,
  .wave,
  .water::after,
  .water-glow {
    animation: none !important;
  }

  .logo-wrap {
    opacity: 1;
    transform: none;
  }
}