/* Dreamers of Dawn. Full-window dawn scene.
   Fixed positioning is not used: the scene is 100dvh (100vh fallback)
   and every layer is absolute inside it.
   Asset URLs are root-relative under /landing/assets/.
   The painted scene keeps the art horizon at 72 percent and the sun at 63 percent.
   CSS gradients are only the stand-in until those bitmaps load. */

:root {
  --horizon: 72%;
  --sun-x: 63%;
  --sun-min: 210px;
  --sun-vw: 32vw;
  --sun-max: 700px;
  --logo-aspect: 4.5;
  --logo-max: 700px;
  --logo-vw: 80;
  --logo-vh: 40;
  --ink: #102e40;
  --sea-deep: #07131f;
}

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

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--sea-deep);
  overscroll-behavior: none;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  height: 100vh;
  height: 100dvh;
  color: var(--ink);
  font-family: Georgia, "Palatino Linotype", Palatino, serif;
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
  background: var(--sea-deep);
}

.layer,
.sky,
.horizon-glow,
.sun,
.sea {
  position: absolute;
  pointer-events: none;
}

.sky {
  inset: 0;
  z-index: 0;
  background-color: #8fb6c9;
  background-image:
    radial-gradient(ellipse 100% 32% at 50% -8%, rgba(176, 168, 198, 0.34), transparent 68%),
    radial-gradient(ellipse 70% 26% at 50% 74%, rgba(255, 206, 150, 0.42), transparent 70%),
    linear-gradient(
      180deg,
      #5a7890 0%,
      #7a9cb3 7%,
      #a7c8db 16%,
      #c5e4f3 28%,
      #d8f2fb 40%,
      #d0ebf8 52%,
      #e6ddd2 63%,
      #f4d2ac 70%,
      #f0b67c 77%,
      #e09260 88%,
      #c67b59 100%
    );
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center top;
}

.sky-img,
.sea-img {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
}

.sky.has-photo {
  background-image: none;
  background-color: transparent;
}

.sky.has-photo .sky-img {
  display: block;
}

.sky.has-photo::after {
  display: none;
}

.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 46%, transparent 46%, rgba(16, 32, 48, 0.14) 100%);
  pointer-events: none;
}

.scene.has-art .horizon-glow {
  display: none;
}

.horizon-glow {
  left: 0;
  right: 0;
  top: calc(var(--horizon) - 16vh);
  height: 26vh;
  z-index: 1;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 214, 176, 0.08) 30%,
    rgba(255, 186, 124, 0.34) 62%,
    rgba(255, 220, 180, 0.2) 80%,
    transparent 100%
  );
}

.sun {
  left: var(--sun-x);
  top: var(--horizon);
  z-index: 2;
  width: 0;
  height: 0;
}

.sun.above-sea {
  z-index: 4;
}

.sun-bloom,
.sun-rays,
.sun-streak,
.sun-core,
.sun-ring,
.sun-img {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
}

.sun-bloom {
  width: min(120vw, 1480px);
  height: min(42vh, 460px);
  transform: translate(-50%, -58%);
  background: radial-gradient(
    ellipse at 50% 62%,
    rgba(255, 250, 236, 0.96) 0%,
    rgba(255, 220, 160, 0.62) 12%,
    rgba(255, 184, 112, 0.28) 32%,
    rgba(255, 160, 96, 0) 68%
  );
  animation: bloom-breathe 18s ease-in-out infinite alternate;
}

.sun-rays {
  width: min(88vmin, 860px);
  height: min(88vmin, 860px);
  transform: translate(-50%, -50%);
  background: conic-gradient(
    from -3deg,
    transparent 0deg,
    rgba(255, 250, 236, 0.62) 0.3deg,
    transparent 0.95deg,
    transparent 14deg,
    rgba(255, 236, 204, 0.28) 14.25deg,
    transparent 15.15deg,
    transparent 28deg,
    rgba(255, 246, 224, 0.5) 28.16deg,
    transparent 28.7deg,
    transparent 46deg,
    rgba(255, 228, 186, 0.22) 46.3deg,
    transparent 47.25deg,
    transparent 61deg,
    rgba(255, 250, 236, 0.46) 61.14deg,
    transparent 61.75deg,
    transparent 79deg,
    rgba(255, 236, 200, 0.18) 79.28deg,
    transparent 80.3deg,
    transparent 96deg,
    rgba(255, 248, 228, 0.4) 96.16deg,
    transparent 96.8deg,
    transparent 118deg,
    rgba(255, 232, 190, 0.2) 118.28deg,
    transparent 119.3deg,
    transparent 136deg,
    rgba(255, 250, 238, 0.52) 136.14deg,
    transparent 136.72deg,
    transparent 154deg,
    rgba(255, 228, 186, 0.16) 154.3deg,
    transparent 155.35deg,
    transparent 171deg,
    rgba(255, 244, 216, 0.36) 171.16deg,
    transparent 171.85deg,
    transparent 188deg,
    rgba(255, 236, 204, 0.22) 188.24deg,
    transparent 189.2deg,
    transparent 206deg,
    rgba(255, 250, 236, 0.48) 206.14deg,
    transparent 206.75deg,
    transparent 226deg,
    rgba(255, 230, 188, 0.18) 226.28deg,
    transparent 227.35deg,
    transparent 246deg,
    rgba(255, 246, 224, 0.34) 246.16deg,
    transparent 246.9deg,
    transparent 268deg,
    rgba(255, 236, 202, 0.16) 268.3deg,
    transparent 269.4deg,
    transparent 286deg,
    rgba(255, 250, 238, 0.5) 286.14deg,
    transparent 286.7deg,
    transparent 308deg,
    rgba(255, 228, 186, 0.2) 308.26deg,
    transparent 309.3deg,
    transparent 328deg,
    rgba(255, 244, 218, 0.32) 328.14deg,
    transparent 328.85deg,
    transparent 348deg,
    rgba(255, 236, 204, 0.22) 348.28deg,
    transparent 349.3deg,
    transparent 360deg
  );
  -webkit-mask-image: radial-gradient(circle, transparent 0 4%, #fff 9%, rgba(255, 255, 255, 0.75) 30%, transparent 64%);
  mask-image: radial-gradient(circle, transparent 0 4%, #fff 9%, rgba(255, 255, 255, 0.75) 30%, transparent 64%);
  mix-blend-mode: screen;
  opacity: 0.9;
  animation: ray-spin 160s linear infinite;
}

.sun-streak {
  width: min(96vw, 1280px);
  height: 42px;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    ellipse at center,
    rgba(255, 252, 244, 0.92) 0%,
    rgba(255, 226, 176, 0.42) 24%,
    rgba(255, 196, 130, 0.12) 50%,
    transparent 74%
  );
}

.sun-core {
  width: clamp(58px, 8vmin, 124px);
  height: clamp(58px, 8vmin, 124px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    #fff 0%,
    #fff6e2 26%,
    #ffe3a8 55%,
    rgba(255, 198, 120, 0.72) 74%,
    rgba(255, 176, 90, 0) 100%
  );
}

.sun-ring {
  border-radius: 50%;
  border: 1px solid rgba(255, 226, 186, 0.38);
  mix-blend-mode: screen;
}

.ring-a {
  width: 14vmin;
  height: 14vmin;
  opacity: 0.5;
  transform: translate(-50%, -50%) rotate(-38deg) translateX(17vmin) scaleY(0.42);
}

.ring-b {
  width: 24vmin;
  height: 24vmin;
  opacity: 0.32;
  transform: translate(-50%, -50%) rotate(-38deg) translateX(30vmin) scaleY(0.36);
}

.ring-c {
  width: 8vmin;
  height: 8vmin;
  opacity: 0.38;
  border-color: rgba(214, 198, 156, 0.4);
  transform: translate(-50%, -50%) rotate(-38deg) translateX(42vmin) scaleY(0.5);
}

.sun-img {
  display: none;
  width: clamp(var(--sun-min), var(--sun-vw), var(--sun-max));
  height: clamp(var(--sun-min), var(--sun-vw), var(--sun-max));
  transform: translate(-50%, -50%);
  object-fit: fill;
}

.sun.has-image .sun-bloom,
.sun.has-image .sun-rays,
.sun.has-image .sun-streak,
.sun.has-image .sun-core,
.sun.has-image .sun-ring {
  display: none;
}

.sun.has-image .sun-img {
  display: block;
}

.sea {
  left: 0;
  right: 0;
  top: var(--horizon);
  bottom: 0;
  z-index: 3;
  background-color: var(--sea-deep);
  background-image:
    linear-gradient(180deg, rgba(255, 198, 150, 0.2), rgba(255, 198, 150, 0) 16%),
    linear-gradient(180deg, rgba(32, 64, 92, 0.18) 0%, #143248 14%, #0c2032 40%, #07131f 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #fff 18%, #fff 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #fff 18%, #fff 100%);
}

.sea.has-image {
  background-color: transparent;
  background-image: none;
  -webkit-mask-image: none;
  mask-image: none;
}

.sea.has-image .sea-img {
  display: block;
}

#sea-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1.2s ease;
}

.sea-img {
  transition: opacity 1.2s ease;
}

.sea.is-live #sea-canvas { opacity: 1; }
.sea.is-live .sea-img { opacity: 0; }

/* Return immediately to the painting if the drawing buffer is lost. */
.sea:not(.is-live) #sea-canvas,
.sea:not(.is-live) .sea-img { transition: none; }

.sea.has-image .glitter,
.sea.has-image .glitter-core {
  display: none;
}

.glitter,
.glitter-core {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  pointer-events: none;
}

.glitter {
  width: min(34vw, 420px);
  height: 78%;
  background: radial-gradient(
    ellipse 42% 70% at 50% 0%,
    rgba(255, 232, 196, 0.72) 0%,
    rgba(255, 196, 140, 0.28) 36%,
    rgba(255, 180, 120, 0.08) 58%,
    transparent 74%
  );
  mix-blend-mode: screen;
  opacity: 0.9;
}

.glitter-core {
  width: min(18vw, 200px);
  height: 56%;
  background: radial-gradient(
    ellipse 48% 62% at 50% 0%,
    rgba(255, 252, 242, 0.92) 0%,
    rgba(255, 214, 156, 0.32) 34%,
    transparent 70%
  );
  opacity: 0.85;
}

.clouds {
  inset: 0;
  z-index: 5;
  overflow: visible;
}

#clouds-front {
  z-index: 7;
}

.cloud-slot {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  animation-name: bob;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-duration: var(--bob-dur, 14s);
  animation-delay: var(--bob-delay, 0s);
  pointer-events: none;
  will-change: transform;
}

.cloud {
  position: absolute;
  left: 0;
  top: 0;
  animation-name: drift;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: var(--dur, 160s);
  animation-delay: var(--delay, 0s);
  pointer-events: none;
  will-change: transform;
}

.cloud.drift-right {
  animation-name: drift-right;
}

.cloud img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
}

.puff {
  width: 100%;
  height: 100%;
}

.puff-low {
  background:
    radial-gradient(ellipse 42% 48% at 24% 62%, rgba(244, 176, 132, 0.55), transparent 70%),
    radial-gradient(ellipse 48% 52% at 58% 40%, rgba(255, 250, 246, 0.94), transparent 68%),
    radial-gradient(ellipse 34% 40% at 46% 68%, rgba(255, 206, 164, 0.72), transparent 72%),
    radial-gradient(ellipse 26% 34% at 76% 52%, rgba(255, 244, 236, 0.8), transparent 70%),
    radial-gradient(ellipse 22% 28% at 38% 38%, rgba(255, 252, 250, 0.85), transparent 72%);
}

.puff-mid {
  background:
    radial-gradient(ellipse 46% 50% at 30% 48%, rgba(255, 255, 255, 0.92), transparent 68%),
    radial-gradient(ellipse 40% 46% at 62% 44%, rgba(236, 246, 252, 0.9), transparent 70%),
    radial-gradient(ellipse 28% 36% at 48% 66%, rgba(206, 224, 234, 0.55), transparent 72%),
    radial-gradient(ellipse 22% 30% at 74% 56%, rgba(255, 255, 255, 0.75), transparent 70%);
}

.puff-high {
  background:
    radial-gradient(ellipse 50% 48% at 36% 46%, rgba(255, 255, 255, 0.72), transparent 70%),
    radial-gradient(ellipse 34% 42% at 66% 54%, rgba(226, 240, 250, 0.62), transparent 72%);
}

.puff-cirrus {
  background:
    radial-gradient(ellipse 70% 46% at 28% 50%, rgba(255, 255, 255, 0.42), transparent 72%),
    radial-gradient(ellipse 56% 40% at 70% 56%, rgba(244, 250, 255, 0.28), transparent 74%);
}

.cloud.has-image .puff {
  display: none;
}

.logo-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  transform: translate3d(-50%, -50%, 0);
  animation: logo-float 9s ease-in-out infinite alternate;
  pointer-events: none;
  will-change: transform;
}

.logo {
  display: block;
  width: min(var(--logo-max), calc(var(--logo-vw) * 1vw), calc(var(--logo-vh) * var(--logo-aspect) * 1vh));
  width: min(var(--logo-max), calc(var(--logo-vw) * 1vw), calc(var(--logo-vh) * var(--logo-aspect) * 1dvh));
  height: auto;
  aspect-ratio: 1323 / 294;
  -webkit-user-drag: none;
  user-select: none;
}

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

@keyframes drift-right {
  from { transform: translate3d(-100%, -50%, 0); }
  to { transform: translate3d(100vw, -50%, 0); }
}

@keyframes bob {
  from { transform: translate3d(0, calc(var(--bob, 1px) * -1), 0); }
  to { transform: translate3d(0, var(--bob, 1px), 0); }
}

@keyframes logo-float {
  from { transform: translate3d(-50%, calc(-50% - 1px), 0); }
  to { transform: translate3d(-50%, calc(-50% + 1px), 0); }
}

@keyframes bloom-breathe {
  from { opacity: 0.84; transform: translate(-50%, -58%) scale(0.985); }
  to { opacity: 1; transform: translate(-50%, -58%) scale(1.035); }
}

@keyframes ray-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

html.is-paused .cloud,
html.is-paused .cloud-slot,
html.is-paused .logo-wrap,
html.is-paused .sun-bloom,
html.is-paused .sun-rays {
  animation-play-state: paused !important;
}

@media (prefers-reduced-motion: reduce) {
  #sea-canvas,
  .sea-img { transition: none; }

  .cloud {
    animation-duration: 3600s !important;
    animation-delay: var(--delay-slow, 0s) !important;
  }

  .cloud-slot,
  .logo-wrap,
  .sun-bloom,
  .sun-rays {
    animation: none !important;
  }

  .logo-wrap {
    transform: translate3d(-50%, -50%, 0) !important;
  }
}