* { box-sizing: border-box; }

:root {
  --purple: #8a45ff;
  --gold: #f4c95d;
  --green: #172e21;
  --dark: #06100c;
  --water: #0e2a24;
}

html, body {
  margin: 0;
  min-height: 100%;
  font-family: Georgia, "Times New Roman", serif;
  background: var(--dark);
  color: white;
  overflow: hidden;
}

.scene {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 20%, rgba(158, 122, 255, .22), transparent 28%),
    linear-gradient(#08100f 0%, #10251d 45%, #06100c 100%);
}

.sky {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 25%, rgba(244, 201, 93, .06), transparent 25%),
    radial-gradient(circle at 80% 20%, rgba(138, 69, 255, .08), transparent 30%);
  z-index: -5;
}

.moon {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  top: 8%;
  right: 14%;
  background: radial-gradient(circle, #ffeaa4 0 20%, #d9c28b 21% 55%, transparent 56%);
  opacity: .45;
  filter: blur(.3px);
  z-index: -3;
}

.tree {
  position: absolute;
  bottom: 18vh;
  width: 170px;
  height: 78vh;
  background: linear-gradient(90deg, #050806, #11170d, #050806);
  border-radius: 50% 30% 0 0;
  z-index: -1;
  opacity: .88;
}

.tree-left { left: -35px; transform: rotate(4deg); }
.tree-right { right: -45px; transform: rotate(-5deg); }

.tree::before,
.tree::after {
  content: "";
  position: absolute;
  width: 280px;
  height: 55px;
  background: #080d08;
  top: 18%;
  border-radius: 100px;
}

.tree-left::before { left: 40px; transform: rotate(-28deg); }
.tree-left::after { left: 10px; top: 30%; transform: rotate(18deg); }
.tree-right::before { right: 45px; transform: rotate(24deg); }
.tree-right::after { right: 20px; top: 34%; transform: rotate(-18deg); }

.moss {
  position: absolute;
  top: 15%;
  width: 180px;
  height: 300px;
  border-radius: 0 0 50% 50%;
  background:
    repeating-linear-gradient(90deg, rgba(67, 89, 50, .65) 0 3px, transparent 3px 14px);
  filter: blur(.4px);
  opacity: .55;
  animation: sway 7s ease-in-out infinite alternate;
}

.moss-one { left: 10%; }
.moss-two { right: 11%; animation-delay: -2s; }

.hero {
  position: absolute;
  top: 7vh;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: min(920px, 90vw);
  z-index: 5;
}

.eyebrow {
  margin: 0 0 .5rem;
  font-size: .8rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(244, 201, 93, .88);
}

h1 {
  margin: 0;
  font-size: clamp(3.3rem, 9vw, 8rem);
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow: 0 0 30px rgba(138, 69, 255, .35);
}

.tagline {
  margin: .3rem 0 0;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-style: italic;
  color: rgba(255,255,255,.82);
}

.water {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -4vh;
  height: 48vh;
  background:
    linear-gradient(transparent, rgba(255,255,255,.07) 40%, transparent 42%) 0 0 / 100% 22px,
    radial-gradient(ellipse at 50% 0%, rgba(138, 69, 255, .18), transparent 60%),
    linear-gradient(#12392f, #071713);
  transform: skewY(-1deg);
  z-index: 1;
}

.ripples {
  position: absolute;
  inset: auto -20% -5vh -20%;
  height: 42vh;
  z-index: 2;
  opacity: .26;
  background:
    repeating-radial-gradient(ellipse at center, transparent 0 30px, rgba(255,255,255,.16) 32px 33px, transparent 35px 70px);
  animation: ripple 9s linear infinite;
}

.fog {
  position: absolute;
  left: -30%;
  right: -30%;
  height: 28vh;
  background: radial-gradient(ellipse, rgba(255,255,255,.18), transparent 65%);
  filter: blur(18px);
  z-index: 4;
  pointer-events: none;
}

.fog-one { bottom: 21vh; animation: drift 18s ease-in-out infinite alternate; }
.fog-two { bottom: 8vh; opacity: .75; animation: drift 24s ease-in-out infinite alternate-reverse; }

.pirogue {
  position: absolute;
  left: 50%;
  bottom: 28vh;
  transform: translateX(-50%);
  width: min(340px, 48vw);
  height: 100px;
  z-index: 6;
  animation: float 4s ease-in-out infinite;
}

.boat-body {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 42px;
  border-radius: 0 0 100% 100%;
  background: linear-gradient(#8b5128, #3b1e10);
  clip-path: polygon(0 20%, 12% 100%, 88% 100%, 100% 20%, 80% 55%, 20% 55%);
  box-shadow: 0 12px 24px rgba(0,0,0,.35);
}

.musician {
  position: absolute;
  left: 45%;
  bottom: 35px;
  width: 95px;
  height: 110px;
}

.head {
  position: absolute;
  top: 0;
  left: 28px;
  width: 34px;
  height: 34px;
  background: #6b3d27;
  border-radius: 50%;
}

.body {
  position: absolute;
  top: 32px;
  left: 22px;
  width: 45px;
  height: 55px;
  background: linear-gradient(135deg, var(--purple), #2f164e);
  border-radius: 45% 45% 25% 25%;
}

.guitar {
  position: absolute;
  top: 36px;
  left: -2px;
  width: 105px;
  height: 24px;
  background: linear-gradient(90deg, #2b1208 0 35%, #d8a33a 36% 60%, #2b1208 61%);
  border-radius: 999px;
  transform: rotate(-18deg);
  transform-origin: 80% 50%;
}

.gator-nav {
  position: absolute;
  inset: auto 0 10vh 0;
  z-index: 8;
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 180px));
  gap: 1.2rem;
  justify-content: center;
  padding: 0 1rem;
}

.gator {
  position: relative;
  display: block;
  height: 100px;
  text-decoration: none;
  color: white;
  transform: translateY(18px);
  transition: transform .45s ease, filter .45s ease;
}

.gator:hover,
.gator:focus-visible {
  transform: translateY(-8px);
  filter: drop-shadow(0 0 20px rgba(244,201,93,.28));
}

.snout {
  position: absolute;
  left: 50%;
  top: 12px;
  width: 118px;
  height: 45px;
  transform: translateX(-50%);
  border-radius: 60% 60% 42% 42%;
  background: linear-gradient(#254c2e, #102518);
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.22), 0 8px 18px rgba(0,0,0,.32);
}

.eyes::before,
.eyes::after {
  content: "";
  position: absolute;
  top: 7px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #121a0e;
  border: 2px solid #315d37;
  z-index: 3;
  transition: background .3s ease, box-shadow .3s ease;
}

.eyes::before { left: calc(50% - 30px); }
.eyes::after { left: calc(50% + 15px); }

.gator:hover .eyes::before,
.gator:hover .eyes::after {
  background: var(--gold);
  box-shadow: 0 0 16px var(--gold);
}

.sign {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) rotate(-2deg);
  padding: .55rem .8rem;
  min-width: 120px;
  text-align: center;
  font-size: .95rem;
  letter-spacing: .05em;
  color: #f7e5b2;
  background: linear-gradient(#5a351c, #2d190c);
  border: 1px solid rgba(244,201,93,.35);
  border-radius: 4px;
  box-shadow: 0 10px 16px rgba(0,0,0,.32);
}

.hint {
  position: absolute;
  left: 50%;
  bottom: 3.2vh;
  transform: translateX(-50%);
  z-index: 9;
  margin: 0;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.7);
}

.firefly {
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ffd86b;
  box-shadow: 0 0 12px #ffd86b;
  z-index: 3;
}

.transition {
  position: fixed;
  inset: 0;
  z-index: 99;
  pointer-events: none;
  background: radial-gradient(circle, rgba(244,201,93,.2), rgba(6,16,12,.95) 55%);
  opacity: 0;
  transform: scale(.8);
}

.scene.leaving .transition {
  animation: plunge 1s ease forwards;
}

.scene.leaving .guitar {
  animation: strum .5s ease;
}

.scene.leaving .ripples {
  opacity: .85;
  animation-duration: 1s;
}

@keyframes drift {
  from { transform: translateX(-8%); }
  to { transform: translateX(8%); }
}

@keyframes sway {
  from { transform: rotate(-2deg); }
  to { transform: rotate(3deg); }
}

@keyframes ripple {
  from { transform: translateX(0) scale(1); }
  to { transform: translateX(120px) scale(1.08); }
}

@keyframes float {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-8px); }
}

@keyframes strum {
  0% { transform: rotate(-18deg); }
  50% { transform: rotate(18deg) scale(1.08); }
  100% { transform: rotate(-18deg); }
}

@keyframes plunge {
  0% { opacity: 0; transform: scale(.8); filter: blur(0); }
  40% { opacity: 1; transform: scale(1.15); filter: blur(1px); }
  100% { opacity: 1; transform: scale(1.8); filter: blur(12px); }
}

@media (max-width: 760px) {
  body { overflow-y: auto; }
  .scene { min-height: 100svh; overflow: hidden; }
  .hero { top: 6vh; }
  .eyebrow { font-size: .62rem; }
  .pirogue { bottom: 37vh; width: 260px; }
  .gator-nav {
    grid-template-columns: repeat(2, minmax(135px, 1fr));
    bottom: 9vh;
    gap: .8rem;
  }
  .gator { height: 86px; transform: none; }
  .snout { width: 104px; height: 38px; }
  .hint { display: none; }
}