/* =========================
   RESET & BASICS
========================= */

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

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

body {
  font-family: "Quicksand", system-ui, -apple-system, sans-serif;
  background-color: #286495; /* your chosen sky blue */
  color: #ffffff;
  overflow-x: hidden;
}


/* =========================
   MAIN CONTAINER
========================= */

main {
  width: 100%;
}


/* =========================
   SECTIONS (LOVE ACTUALLY MOMENTS)
========================= */

.sections {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  text-align: center;
  padding: 80px 24px;
  position: relative;
}


/* =========================
   TEXT PANELS (layout only)
========================= */

.text-panel {
  position: relative;
  z-index: 2;

  min-height: 100vh;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  padding: 60px 20px;
}


/* =========================
   HEART PANEL
========================= */

.heart-panel {
  width: 600px;
  max-width: 70vw;

  opacity: 0.95;

  /* gentle presence */
  filter: drop-shadow(0 0 45px rgba(255, 255, 255, 0.3));
}

/* =========================
   SCROLL ARROW
========================= */
.scroll-arrow {
  margin-top: 50px;   /* more space from the text */
  width: 72px;
  opacity: 0.85;

  align-self: center;

  animation: arrow-bounce 2.2s ease-in-out infinite;

}

@keyframes arrow-bounce {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(10px);
  }
  100% {
    transform: translateY(0);
  }
}

/* =========================
   TEXT BOX (words + glow)
========================= */

.text-box {
  max-width: 900px;
  text-align: center;

  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.35;
  font-weight: 500;

  text-shadow:
    0 0 12px rgba(255, 255, 255, 0.35),
    0 0 24px rgba(255, 255, 255, 0.25),
    0 0 48px rgba(255, 255, 255, 0.15);
}

.text-box .highlight {
  color: #fdcb01;        /* soft yellow */
  font-weight: 600;     /* bold, but gentle */
}

.text-box .mau {
  color: #f5a3c2;        /* pink */
  font-weight: 600;     /* bold, but gentle */
}

/* =========================
   NAV STAR LINKS
========================= */

.nav-stars {
  display: flex;
  gap: 50px;
  justify-content: left;
  margin-top: 60px;
  flex-wrap: wrap;
}

.nav-stars a img {
  width: 140px;
  transition: transform 0.25s ease, filter 0.25s ease;
}

.nav-stars a img:hover {
  transform: scale(1.08);
  filter: drop-shadow(0 0 12px rgba(255, 255, 255, 0.5));
}

/* =========================
   SKY NAV (FIXED)
========================= */

.sky-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;

  z-index: 10;

  display: flex;
  flex-direction: column;
  align-items: center;

  padding: 10px 20px;

  background: linear-gradient(
    to bottom,
    rgba(40, 100, 149, 0.9),
    rgba(40, 100, 149, 0.6),
    rgba(40, 100, 149, 0)
  );

  backdrop-filter: blur(6px);
}

.sky-nav.open .caret {
  color: #ffd6e8; /* soft pink */
  text-shadow: 0 0 8px rgba(255, 200, 220, 0.6);
}

/* Toggle button */
.nav-toggle {
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  opacity: 0.85;

  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-toggle:hover {
  opacity: 1;
}

.caret {
  font-size: 0.9em;
  color: white;
  transition: transform 0.25s ease,
  color 0.25s ease,
  text-shadow 0.25s ease;
}

/* Hover = tiny nudge */
.nav-toggle:hover .caret {
  transform: translateY(-2px);
}

/* Start CLOSED */

.sky-nav .nav-stars {
  display: none;
}

/* Open state */

.sky-nav.open .nav-stars {
  display: flex;
}
/* =========================
   Sky Stars Background
========================= */

.sky-stars {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.sky-star {
  position: absolute;
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(87, 65, 65, 0.6));
  transform: translateY(var(--parallax-y, 0));
  transition: opacity 1.5x ease;

  will-change: transform, opacity;

animation: twinkle 12s ease-in-out infinite,
drift 30s ease-in-out infinite;
}
/* Stagger star twinkle timing */
.sky-star:nth-child(1) { animation-delay: 0s; }
.sky-star:nth-child(2) { animation-delay: 3s; }
.sky-star:nth-child(3) { animation-delay: 6s; }
.sky-star:nth-child(4) { animation-delay: 9s; }
.sky-star:nth-child(5) { animation-delay: 4s; }
.sky-star:nth-child(6) { animation-delay: 7s; }

.sky-star.reverse {
  animation: twinkle 22s ease-in-out infinite,
    drift 36s ease-in-out infinite reverse;
}

/* Placement helpers */
.sky-star.left {
  left: 8%;
  top: 25%;
  width: 100px;
}

.sky-star.right {
  right: 10%;
  top: 30%;
  width: 120px;
}

.sky-star.far-right {
  right: 4%;
  top: 60%;
  width: 80px;
}

/* Additional sky placements */

.sky-star.lower-left {
  left: 6%;
  top: 65%;
  width: 90px;
}

.sky-star.upper-left {
  left: 12%;
  top: 8%;
  width: 70px;
}

/* Moon */

.sky-star.moon {
  right: 6%;
  top: 12%;
  width: 140px;
  filter: drop-shadow(0 0 12px rgba(87, 65, 65, 0.9));
}

/* Butterflies */
.sky-star.spaceship {
    right: 10%;
    top: 70%;
    width: 300px;
}
@keyframes twinkle {
  0% {
    opacity: 0.15;
    transform: scale(0.95);
    filter: drop-shadow(0 0 2px rgba(87, 65, 65, 0.3));
  }

  50% {
    opacity: 1;
    transform: scale(1.05);
    filter: drop-shadow(0 0 14px rgba(87, 65, 65, 0.9));
  }

  100% {
    opacity: 0.15;
    transform: scale(0.95);
    filter: drop-shadow(0 0 2px rgba(87, 65, 65, 0.3));
  }
}
@keyframes drift {
  0% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(12px, -8px);
  }

  100% {
    transform: translate(0, 0);
  }
}