/* =========================================================
   WELCOME — a sky that turns from day into night
   Sky layers are stacked and only their opacity changes, so color shifts are
   truly smooth (gradients can't be animated directly) and cheap to render.
   Night/sunset tints on the mountains are opacity veils too — no animated
   filters, which are expensive on large layers.
   ========================================================= */

.page-welcome {
  --cycle: 56s;
  --px: 0;
  --py: 0;
  isolation: isolate;
  background: #4ca9df;
}

.sky,
.sky > * {
  position: absolute;
  inset: 0;
}

.sky {
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Sky layers ---------- */

.sky-day {
  background: linear-gradient(180deg, #3d9de0 0%, #7cc0ea 38%, #cfe6ee 70%, #f6dcb4 100%);
}

.sky-sunset {
  background: linear-gradient(180deg, #5476b4 0%, #b58fb4 40%, #f0a07a 72%, #f37b56 100%);
  opacity: 0;
  animation: sunset-cycle var(--cycle) cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
}

.sky-dusk {
  background: linear-gradient(180deg, #23285e 0%, #533f7a 40%, #b4557a 74%, #e0775f 100%);
  opacity: 0;
  animation: dusk-cycle var(--cycle) cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
}

.sky-night {
  background:
    radial-gradient(120% 60% at 50% 110%, rgba(80, 60, 140, 0.45), transparent 70%),
    linear-gradient(180deg, #03061a 0%, #08113a 42%, #161a45 72%, #2a1f4a 100%);
  opacity: 0;
  animation: night-cycle var(--cycle) cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
}

@keyframes sunset-cycle {
  0%, 12% { opacity: 0; }
  38% { opacity: 1; }
  62% { opacity: 0.6; }
  80%, 100% { opacity: 0; }
}

@keyframes dusk-cycle {
  0%, 36% { opacity: 0; }
  62% { opacity: 1; }
  86%, 100% { opacity: 0.2; }
}

@keyframes night-cycle {
  0%, 54% { opacity: 0; }
  86%, 100% { opacity: 1; }
}

/* ---------- Stars ---------- */

.star-canvas {
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: night-cycle var(--cycle) cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
}

/* ---------- Sun ---------- */

.sun-wrap {
  transform: translate3d(calc(var(--px) * -14px), calc(var(--py) * -8px), 0);
}

.sun {
  position: absolute;
  left: 13%;
  top: 15%;
  width: clamp(90px, 11vw, 140px);
  aspect-ratio: 1;
  margin-left: calc(clamp(90px, 11vw, 140px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #fffef0 0%, #fff4c2 30%, #ffd47a 52%, rgba(255, 200, 110, 0.35) 62%, rgba(255, 190, 90, 0) 72%);
  animation: sun-set var(--cycle) cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
  will-change: transform, opacity;
}

/* Soft halo as its own static layer (cheaper than a big box-shadow) */
.sun::before {
  content: "";
  position: absolute;
  inset: -110%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 236, 170, 0.45) 0%, rgba(255, 200, 120, 0.18) 35%, transparent 65%);
}

.sun::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, #ffd9a0 0%, #ff9a5c 50%, rgba(255, 110, 70, 0) 72%);
  opacity: 0;
  animation: sun-color var(--cycle) cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
}

@keyframes sun-set {
  0% { transform: translateY(0) scale(1); opacity: 1; }
  40% { transform: translateY(26vh) scale(1.06); opacity: 1; }
  62% { transform: translateY(52vh) scale(1.12); opacity: 0.85; }
  76%, 100% { transform: translateY(78vh) scale(1.1); opacity: 0; }
}

@keyframes sun-color {
  0%, 18% { opacity: 0; }
  50%, 100% { opacity: 1; }
}

/* ---------- Moon (a real crescent, independent of the sky color) ---------- */

.moon {
  position: absolute;
  left: 84%;
  top: 13%;
  width: clamp(54px, 6vw, 84px);
  aspect-ratio: 1;
  border-radius: 50%;
  /* crescent lit on its left, facing right */
  box-shadow: inset clamp(14px, 2.2vw, 24px) clamp(8px, 0.8vw, 12px) 0 0 #f7f0d4;
  opacity: 0;
  animation: moon-rise var(--cycle) ease-in-out infinite alternate;
}

.moon::before {
  content: "";
  position: absolute;
  inset: -80%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 248, 210, 0.22), transparent 60%);
}

@keyframes moon-rise {
  0%, 58% { opacity: 0; transform: translateY(30px); }
  84%, 100% { opacity: 1; transform: none; }
}

/* ---------- Clouds ---------- */

.cloud-layer {
  transform: translate3d(calc(var(--px) * var(--depth, 10px)), calc(var(--py) * var(--depth, 10px) * 0.4), 0);
}

.cloud-layer.far {
  --depth: -10px;
  animation: far-clouds var(--cycle) ease-in-out infinite alternate;
}

.cloud-layer.near {
  --depth: -34px;
}

@keyframes far-clouds {
  0%, 30% { opacity: 0.75; }
  60% { opacity: 0.55; }
  100% { opacity: 0.18; }
}

.cloud-track {
  position: absolute;
  inset: 0;
  width: 200%;
  animation: cloud-drift var(--drift, 150s) linear infinite;
  will-change: transform;
}

.cloud-layer.near .cloud-track {
  --drift: 95s;
}

@keyframes cloud-drift {
  to { transform: translateX(-50%); }
}

.cloud {
  position: absolute;
  height: auto;
  max-width: none;
  pointer-events: none;
  user-select: none;
}

.cloud.is-flipped {
  transform: scaleX(-1);
}

/* ---------- Distant birds ----------
   Placed at random by welcome.js, high in the sky (above the plane's
   lane): each with its own height, size, speed, wingbeat and wavy path. */

.flock svg {
  position: absolute;
  width: var(--w, 16px);
  height: calc(var(--w, 16px) * 0.56);
  left: -40px;
  fill: none;
  stroke: rgba(20, 30, 60, 0.6);
  stroke-width: 1.6;
  stroke-linecap: round;
  animation: flock-fly var(--dur, 50s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.flock svg path {
  animation: flock-flap var(--flap, 0.9s) ease-in-out infinite alternate;
  transform-origin: center;
}

@keyframes flock-fly {
  0% { transform: translate(0, 0); }
  20% { transform: translate(24vw, var(--y1, 0)); }
  45% { transform: translate(54vw, var(--y2, 0)); }
  70% { transform: translate(84vw, var(--y3, 0)); }
  100% { transform: translate(120vw, var(--y4, 0)); }
}

@keyframes flock-flap {
  to { transform: scaleY(0.35); }
}

/* ---------- Horizon glow, mountains and veils ---------- */

.horizon-glow {
  top: auto;
  height: 45%;
  background: radial-gradient(80% 70% at 50% 100%, rgba(255, 196, 150, 0.55), rgba(255, 210, 170, 0.15) 50%, transparent 75%);
  animation: horizon var(--cycle) ease-in-out infinite alternate;
}

@keyframes horizon {
  0% { opacity: 0.55; }
  45% { opacity: 1; }
  100% { opacity: 0.1; }
}

.mountain {
  top: auto;
  bottom: 0;
  width: 110%;
  max-width: none;
  left: -5%;
  height: 46vh;
  /* Follows the mouse, but only ever sinks (never lifts), so the bottom edge
     of the screen always stays covered by the landscape */
  transform: translate3d(calc(var(--px) * var(--depth)), calc((var(--py) - 1) * var(--depth) * 0.15), 0);
}

.mountain-far { --depth: -6px; }
.mountain-back { --depth: -11px; }
.mountain-mid { --depth: -17px; }
.mountain-forest { --depth: -25px; }
.mountain-front,
.mountain-lights { --depth: -36px; }

/* The little house: its windows light up as night falls, with a small halo
   that never covers the house; the moon outlines the roof */
.cabin-window {
  opacity: 0.15;
  animation: cabin-light var(--cycle) ease-in-out infinite alternate;
}

.cabin-glow {
  opacity: 0;
  animation: cabin-glow var(--cycle) ease-in-out infinite alternate;
}

.cabin-rim {
  opacity: 0;
  animation: cabin-rim var(--cycle) ease-in-out infinite alternate;
}

@keyframes cabin-light {
  0%, 40% { opacity: 0.15; }
  70%, 100% { opacity: 1; }
}

@keyframes cabin-glow {
  0%, 45% { opacity: 0; }
  75%, 100% { opacity: 0.6; }
}

@keyframes cabin-rim {
  0%, 60% { opacity: 0; }
  90%, 100% { opacity: 0.45; }
}

.smoke circle {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  animation: smoke 6s ease-out infinite;
}

.smoke circle:nth-child(2) { animation-delay: 2s; }
.smoke circle:nth-child(3) { animation-delay: 4s; }

@keyframes smoke {
  0% { opacity: 0; transform: translate(0, 0) scale(0.6); }
  20% { opacity: 0.55; }
  100% { opacity: 0; transform: translate(14px, -46px) scale(2.6); }
}

/* Warm sunset light and cool night shade over the landscape */
.veil-sunset,
.veil-night {
  top: auto;
  height: 48vh;
}

.veil-sunset {
  background: linear-gradient(180deg, transparent 0%, rgba(255, 140, 90, 0.22) 40%, rgba(170, 70, 90, 0.3) 100%);
  opacity: 0;
  animation: sunset-cycle var(--cycle) cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
}

.veil-night {
  background: linear-gradient(180deg, transparent 0%, rgba(6, 10, 34, 0.55) 30%, rgba(4, 6, 24, 0.78) 100%);
  opacity: 0;
  animation: night-cycle var(--cycle) cubic-bezier(0.45, 0, 0.25, 1) infinite alternate;
}

.mist {
  top: auto;
  height: 22vh;
  background: linear-gradient(0deg, rgba(220, 225, 255, 0.28), transparent);
  animation: horizon var(--cycle) ease-in-out infinite alternate;
}

/* ---------- Content ---------- */

.welcome-content {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px 1.5vh; /* just above the mountain tops */
  text-align: center;
}

.welcome-heading {
  position: relative;
}

/* The towing plane's lane: full screen width, sitting right on top of the title */
.towplane-lane {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 0.26em); /* clear of the title, with sky in between */
  width: 100vw;
  height: var(--lane-h, 90px);
  translate: -50% 0;
  overflow: hidden;
  pointer-events: none;
  font-size: clamp(64px, 12vw, 150px); /* same em as the title */
}

.towplane {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  will-change: transform;
}

.towplane-banner {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
}

/* A Cessna-like high-wing plane drawn with minimal outlines */
.towplane-craft {
  position: absolute;
  overflow: visible;
  max-width: none;
  filter: drop-shadow(0 6px 10px rgba(10, 30, 90, 0.22));
}

.towplane-lines {
  stroke: #1c2f6e;
  stroke-width: 0.7;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.towplane-strut {
  fill: none;
  stroke: #7d8fbd;
  stroke-width: 0.9;
  stroke-linecap: round;
}

.towplane-stripe {
  fill: none;
  stroke: #2f5fd0;
  stroke-width: 2;
  stroke-linecap: round;
}

.towplane-stripe.thin {
  stroke: #7aa6ff;
  stroke-width: 1.1;
}

.towplane-shine {
  fill: none;
  stroke: #a9c6ff;
  stroke-width: 0.9;
  stroke-linecap: round;
}

.towplane-reg {
  font-family: var(--font-body);
  font-size: 6.4px;
  font-style: italic;
  font-weight: 800;
  fill: #1f45b0;
}

.towplane-disc {
  fill: rgba(255, 255, 255, 0.32);
}

/* The propeller spins: seen from the side, the blade grows and shrinks */
.towplane-prop {
  transform-box: fill-box;
  transform-origin: center;
  animation: towplane-prop 0.14s linear infinite;
}

@keyframes towplane-prop {
  0% { transform: scaleY(1); }
  50% { transform: scaleY(-1); }
  100% { transform: scaleY(1); }
}

.welcome-title {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(64px, 12vw, 150px);
  line-height: 1.05;
  color: #fff;
  text-shadow:
    0 2px 2px rgba(20, 40, 100, 0.25),
    0 8px 40px rgba(20, 40, 120, 0.45);
  animation: title-in 1.6s var(--ease-out) 0.45s both;
}

@keyframes title-in {
  from {
    opacity: 0;
    letter-spacing: 12px;
  }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(14px); }
}

/* Clear water-drop button */
.jump-btn {
  position: relative;
  margin-top: clamp(22px, 4vh, 36px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
  height: 52px;
  padding: 0 26px;
  border-radius: var(--r-full);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.07));
  border: 1px solid rgba(255, 255, 255, 0.42);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.7),
    inset 0 -12px 26px rgba(255, 255, 255, 0.06),
    0 14px 40px -10px rgba(10, 30, 90, 0.45);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3.2px;
  text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(20, 40, 100, 0.4);
  overflow: hidden;
  isolation: isolate;
  animation: rise-in 1s var(--ease-out) 1.1s both;
  transition: transform 500ms var(--ease-spring), background 500ms, box-shadow 500ms, border-color 500ms;
}

.jump-btn::before {
  content: "";
  position: absolute;
  left: 12%;
  top: 5px;
  width: 76%;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  z-index: -1;
}

.jump-btn::after {
  content: "";
  position: absolute;
  top: -80%;
  left: -60%;
  width: 40%;
  height: 260%;
  transform: rotate(25deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  animation: shine 5s ease-in-out 2.5s infinite;
}

@keyframes shine {
  0%, 70% { translate: 0 0; }
  100% { translate: 480% 0; }
}

.jump-btn svg {
  width: 17px;
  height: 17px;
  transition: transform 600ms var(--ease-spring);
}

.jump-btn:hover {
  transform: translateY(-4px) scale(1.04);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.12));
  border-color: rgba(255, 255, 255, 0.65);
  box-shadow:
    inset 0 1px 3px rgba(255, 255, 255, 0.85),
    0 20px 50px -12px rgba(10, 30, 90, 0.55),
    0 0 40px rgba(255, 255, 255, 0.25);
}

.jump-btn:hover svg {
  transform: translateY(-4px);
}

.jump-btn:active {
  transform: translateY(0) scale(0.97);
}

.sound-hint {
  position: absolute;
  left: 50%;
  bottom: max(22px, env(safe-area-inset-bottom));
  z-index: 6;
  transform: translateX(-50%);
  padding: 8px 16px;
  border-radius: var(--r-full);
  background: rgba(10, 20, 60, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.25);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.5px;
  white-space: nowrap;
  color: rgba(255, 255, 255, 0.92);
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
  pointer-events: none;
}

.sound-hint.is-visible {
  opacity: 1;
}

@media (max-width: 600px) {
  .sun { left: 18%; top: 10%; }
  .moon { left: 80%; top: 9%; }
  .jump-btn { height: 48px; padding: 0 22px; font-size: 12.5px; letter-spacing: 2.6px; }
  .mountain { height: 44vh; width: 160%; left: -30%; }
  .sound-hint { bottom: 84px; }
}