/* ==========================================================================
   skydiver.com.au — Landing page styles
   ========================================================================== */

:root {
  /* Sky palette */
  --sky-top: #1a6fd4;
  --sky-mid: #3d9ae8;
  --sky-low: #87cefa;
  --sky-horizon: #b8e4ff;

  /* Cloud colours */
  --cloud-far: rgba(255, 255, 255, 0.55);
  --cloud-mid: rgba(255, 255, 255, 0.72);
  --cloud-near: rgba(255, 255, 255, 0.88);

  /* Typography */
  --font-display: "Luckiest Guy", cursive;
  --font-body: "Roboto", sans-serif;

  /* Layout */
  --content-max: 600px;
  --skydiver-size: clamp(260px, 72vw, 380px);

  /* Z-index stack */
  --z-sky: 0;
  --z-clouds-far: 1;
  --z-clouds-mid: 2;
  --z-clouds-near: 3;
  --z-skydiver: 10;
  --z-content: 20;

  /* Motion (overridden when reduced motion is active) */
  --cloud-rise-far: 28s;
  --cloud-rise-mid: 17s;
  --cloud-rise-near: 10s;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

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

html {
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100%;
  min-height: 100dvh;
  overflow: hidden;
  font-family: var(--font-body);
  color: #fff;
  background: var(--sky-mid);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 0.2em;
  transition: opacity 0.2s ease;
}

a:hover,
a:focus-visible {
  opacity: 0.85;
}

a:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 2px;
}

/* --------------------------------------------------------------------------
   Sky background
   -------------------------------------------------------------------------- */

.sky {
  position: fixed;
  inset: 0;
  z-index: var(--z-sky);
  background: linear-gradient(
    180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 28%,
    var(--sky-low) 62%,
    var(--sky-horizon) 100%
  );
  overflow: hidden;
}

.sun-glow {
  position: absolute;
  top: -8%;
  right: 12%;
  width: min(45vw, 320px);
  height: min(45vw, 320px);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 252, 230, 0.45) 0%,
    rgba(255, 248, 200, 0.15) 40%,
    transparent 70%
  );
  pointer-events: none;
}

.haze {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.06) 55%,
    rgba(255, 255, 255, 0.12) 100%
  );
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Floating particles (atmospheric dust)
   -------------------------------------------------------------------------- */

.particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 4;
}

.particle {
  position: absolute;
  left: var(--px, 50%);
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  animation: particle-rise var(--pdur, 14s) linear infinite;
  animation-delay: var(--pdelay, 0s);
  opacity: 0;
}

.particle:nth-child(1) { --px: 12%; --pdur: 16s; --pdelay: 0s; }
.particle:nth-child(2) { --px: 28%; --pdur: 12s; --pdelay: -3s; width: 2px; height: 2px; }
.particle:nth-child(3) { --px: 45%; --pdur: 18s; --pdelay: -7s; }
.particle:nth-child(4) { --px: 63%; --pdur: 11s; --pdelay: -2s; width: 2px; height: 2px; }
.particle:nth-child(5) { --px: 77%; --pdur: 15s; --pdelay: -9s; }
.particle:nth-child(6) { --px: 88%; --pdur: 13s; --pdelay: -5s; width: 2px; height: 2px; }
.particle:nth-child(7) { --px: 35%; --pdur: 17s; --pdelay: -11s; }
.particle:nth-child(8) { --px: 52%; --pdur: 10s; --pdelay: -1s; width: 2px; height: 2px; }

@keyframes particle-rise {
  0% {
    transform: translate3d(0, 105vh, 0);
    opacity: 0;
  }
  8% {
    opacity: 0.5;
  }
  92% {
    opacity: 0.4;
  }
  100% {
    transform: translate3d(0, -10vh, 0);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Cloud layers & parallax rise
   -------------------------------------------------------------------------- */

.cloud-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cloud-layer--far {
  z-index: var(--z-clouds-far);
}

.cloud-layer--mid {
  z-index: var(--z-clouds-mid);
}

.cloud-layer--near {
  z-index: var(--z-clouds-near);
}

.cloud {
  position: absolute;
  left: var(--x, 50%);
  bottom: 0;
  will-change: transform;
  animation: cloud-rise var(--dur, 20s) linear infinite;
  animation-delay: var(--delay, 0s);
}

.cloud-layer--far .cloud {
  --dur: var(--cloud-rise-far);
  filter: blur(1.5px);
}

.cloud-layer--mid .cloud {
  --dur: var(--cloud-rise-mid);
  filter: blur(0.5px);
}

.cloud-layer--near .cloud {
  --dur: var(--cloud-rise-near);
}

@keyframes cloud-rise {
  0% {
    transform: translate3d(-50%, 105vh, 0);
  }
  100% {
    transform: translate3d(-50%, -130vh, 0);
  }
}

/* --------------------------------------------------------------------------
   Cloud shapes (pure CSS)
   -------------------------------------------------------------------------- */

/* Shared puff base */
.cloud--puff-sm,
.cloud--puff-md,
.cloud--puff-lg,
.cloud--wide,
.cloud--wide-bold,
.cloud--stretched,
.cloud--wisp,
.cloud--cluster-bg,
.cloud--cluster-lg {
  position: absolute;
}

.cloud--puff-sm {
  width: 70px;
  height: 28px;
  background: var(--cloud-far);
  border-radius: 50px;
  box-shadow:
    22px -8px 0 -2px var(--cloud-far),
    42px -4px 0 -4px var(--cloud-far),
    -18px -6px 0 -2px var(--cloud-far);
}

.cloud--puff-md {
  width: 110px;
  height: 40px;
  background: var(--cloud-mid);
  border-radius: 60px;
  box-shadow:
    35px -14px 0 -4px var(--cloud-mid),
    68px -8px 0 -6px var(--cloud-mid),
    -28px -10px 0 -4px var(--cloud-mid),
    52px 4px 0 -8px var(--cloud-mid);
}

.cloud--puff-lg {
  width: 150px;
  height: 52px;
  background: var(--cloud-near);
  border-radius: 80px;
  box-shadow:
    48px -20px 0 -6px var(--cloud-near),
    95px -10px 0 -10px var(--cloud-near),
    -38px -14px 0 -6px var(--cloud-near),
    72px 6px 0 -12px var(--cloud-near);
}

/* Wide flat cloud */
.cloud--wide {
  width: 200px;
  height: 36px;
  background: var(--cloud-mid);
  border-radius: 40px;
  opacity: 0.85;
  box-shadow:
    60px -12px 0 -8px var(--cloud-mid),
    120px -6px 0 -10px var(--cloud-mid),
    -50px -8px 0 -8px var(--cloud-mid),
    30px 8px 0 -12px var(--cloud-mid);
}

.cloud--wide-bold {
  width: 240px;
  height: 48px;
  background: var(--cloud-near);
  border-radius: 50px;
  box-shadow:
    70px -18px 0 -8px var(--cloud-near),
    140px -8px 0 -12px var(--cloud-near),
    -60px -12px 0 -8px var(--cloud-near);
}

/* Thin stretched wisp */
.cloud--stretched {
  width: 180px;
  height: 22px;
  background: var(--cloud-mid);
  border-radius: 30px;
  opacity: 0.7;
  box-shadow:
    50px -6px 0 -10px var(--cloud-mid),
    -40px -4px 0 -10px var(--cloud-mid);
}

/* Delicate background wisp */
.cloud--wisp {
  width: 120px;
  height: 16px;
  background: var(--cloud-far);
  border-radius: 20px;
  opacity: 0.5;
  filter: blur(2px);
  box-shadow:
    35px -4px 0 -8px var(--cloud-far),
    -30px -3px 0 -8px var(--cloud-far);
}

/* Multi-blob cluster — background */
.cloud--cluster-bg {
  width: 90px;
  height: 90px;
  background: transparent;
}

.cloud--cluster-bg::before,
.cloud--cluster-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--cloud-far);
}

.cloud--cluster-bg::before {
  width: 50px;
  height: 50px;
  top: 10px;
  left: 0;
  box-shadow:
    40px 8px 0 -8px var(--cloud-far),
    20px 30px 0 -10px var(--cloud-far);
}

.cloud--cluster-bg::after {
  width: 38px;
  height: 38px;
  top: 28px;
  left: 48px;
  box-shadow: -25px 5px 0 -8px var(--cloud-far);
}

/* Large foreground cluster */
.cloud--cluster-lg {
  width: 160px;
  height: 120px;
  background: transparent;
}

.cloud--cluster-lg::before,
.cloud--cluster-lg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: var(--cloud-near);
}

.cloud--cluster-lg::before {
  width: 80px;
  height: 80px;
  top: 20px;
  left: 10px;
  box-shadow:
    55px 15px 0 -12px var(--cloud-near),
    30px 45px 0 -15px var(--cloud-near),
    90px 35px 0 -18px var(--cloud-near);
}

.cloud--cluster-lg::after {
  width: 60px;
  height: 60px;
  top: 45px;
  left: 75px;
  box-shadow: -35px 10px 0 -10px var(--cloud-near);
}

/* --------------------------------------------------------------------------
   Main stage layout
   -------------------------------------------------------------------------- */

.stage {
  position: relative;
  z-index: var(--z-content);
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(1rem, 4vw, 2.5rem);
  padding-top: clamp(1.25rem, 5vh, 3rem);
  text-align: center;
  pointer-events: none;
}

.stage a {
  pointer-events: auto;
}

.hero {
  position: relative;
  z-index: var(--z-content);
  flex-shrink: 0;
  width: 100%;
  max-width: 90vw;
  padding-bottom: clamp(0.5rem, 2vh, 1.5rem);
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 8vw, 4.5rem);
  line-height: 1.1;
  color: #fff;
  text-shadow:
    0 2px 4px rgba(0, 40, 80, 0.35),
    0 4px 20px rgba(0, 30, 60, 0.25),
    0 0 40px rgba(255, 255, 255, 0.15);
  letter-spacing: 0.02em;
}

.hero__subtitle {
  margin: clamp(0.75rem, 2.5vw, 1.25rem) auto 0;
  max-width: var(--content-max);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.9rem, 2.8vw, 1.125rem);
  line-height: 1.65;
  color: #fff;
  text-shadow: 0 1px 8px rgba(0, 40, 80, 0.4);
}

.hero__subtitle a {
  font-weight: 500;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Skydiver — centred, layered freefall motion
   -------------------------------------------------------------------------- */

.skydiver-zone {
  position: absolute;
  top: 40%;
  left: 50%;
  z-index: var(--z-skydiver);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  transform: translate3d(-50%, -50%, 0);
  pointer-events: none;
}

.skydiver-wrap {
  width: var(--skydiver-size);
  will-change: transform;
  animation: skydiver-composite 13s ease-in-out infinite;
}

.skydiver {
  width: 100%;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 8px 24px rgba(0, 40, 80, 0.25));
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Composite freefall — drift, bob, rotation in one organic loop */
@keyframes skydiver-composite {
  0% {
    transform: translate3d(-28px, -10px, 0) rotate(-5deg);
  }
  8% {
    transform: translate3d(-18px, 4px, 0) rotate(-3deg);
  }
  16% {
    transform: translate3d(8px, 10px, 0) rotate(2deg);
  }
  24% {
    transform: translate3d(24px, 6px, 0) rotate(4.5deg);
  }
  32% {
    transform: translate3d(34px, -4px, 0) rotate(5.5deg);
  }
  40% {
    transform: translate3d(30px, -12px, 0) rotate(3deg);
  }
  48% {
    transform: translate3d(14px, -8px, 0) rotate(-1deg);
  }
  56% {
    transform: translate3d(-6px, 2px, 0) rotate(-4deg);
  }
  64% {
    transform: translate3d(-22px, 12px, 0) rotate(-5.5deg);
  }
  72% {
    transform: translate3d(-32px, 8px, 0) rotate(-4deg);
  }
  80% {
    transform: translate3d(-26px, -2px, 0) rotate(-1.5deg);
  }
  88% {
    transform: translate3d(-10px, -10px, 0) rotate(2deg);
  }
  96% {
    transform: translate3d(4px, -8px, 0) rotate(4deg);
  }
  100% {
    transform: translate3d(-28px, -10px, 0) rotate(-5deg);
  }
}

/* Rapid air turbulence on the image (nested transform, independent timing) */
.skydiver-wrap.is-jittering .skydiver {
  animation: air-turbulence 1.7s ease-in-out infinite;
}

@keyframes air-turbulence {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  15%      { transform: translate3d(2px, -1px, 0) rotate(0.3deg); }
  30%      { transform: translate3d(-1px, 2px, 0) rotate(-0.25deg); }
  45%      { transform: translate3d(-2px, 0, 0) rotate(0.2deg); }
  60%      { transform: translate3d(1px, 1px, 0) rotate(-0.35deg); }
  75%      { transform: translate3d(2px, -2px, 0) rotate(0.15deg); }
  90%      { transform: translate3d(-1px, -1px, 0) rotate(-0.2deg); }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --cloud-rise-far: 0.01ms;
    --cloud-rise-mid: 0.01ms;
    --cloud-rise-near: 0.01ms;
  }

  .cloud,
  .particle,
  .skydiver-wrap {
    animation: none !important;
  }

  .skydiver-wrap .skydiver {
    animation: none !important;
  }

  .cloud {
    transform: translate3d(-50%, 30vh, 0);
    opacity: 0.6;
  }

  .cloud-layer--far .cloud:nth-child(odd) {
    transform: translate3d(-50%, 15vh, 0);
  }

  .cloud-layer--near .cloud {
    transform: translate3d(-50%, 50vh, 0);
  }

  .particles {
    display: none;
  }

  .skydiver-wrap {
    transform: none;
  }
}

body.reduced-motion .cloud,
body.reduced-motion .particle {
  animation: none !important;
}

body.reduced-motion .skydiver-wrap {
  animation: none !important;
}

body.reduced-motion .skydiver-wrap .skydiver {
  animation: none !important;
  transform: none !important;
}

body.reduced-motion .particles {
  display: none;
}

/* --------------------------------------------------------------------------
   Large screens — extra breathing room
   -------------------------------------------------------------------------- */

@media (min-width: 768px) {
  :root {
    --skydiver-size: clamp(220px, 45vw, 380px);
  }
}

@media (min-width: 1200px) {
  .hero__title {
    font-size: clamp(3.5rem, 5vw, 5rem);
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .stage {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1rem;
  }

  .hero {
    flex: 1 1 40%;
    padding-bottom: 0;
  }

  .skydiver-zone {
    position: relative;
    top: auto;
    left: auto;
    flex: 1 1 45%;
    transform: none;
  }

  :root {
    --skydiver-size: clamp(180px, 42vh, 280px);
  }
}