/* =========================================================
   1) BASIC PAGE RESET (removes annoying gaps / white edges)
   ========================================================= */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* =========================================================
   2) BACKGROUND (your animated star GIF)
   - "cover" means it fills the screen WITHOUT stretching
   - it may crop a little depending on screen shape, but won't distort
   ========================================================= */
body {
  background-image: url("assets/img/skystar.gif");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* Prevent scrollbars from tiny pixel rounding */
  overflow: hidden;
}

/* =========================================================
   3) FULL SCREEN STAGE
   Everything is positioned inside this
   ========================================================= */
.scene {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* =========================================================
   4) COMPOSITION (moon + island group)
   - This is anchored near the bottom center of the screen.
   - If you want the whole island group higher/lower, change "bottom".
   ========================================================= */
.composition {
  position: absolute;
  left: 50%;
  bottom: -100px;              /* move island group up/down */
  transform: translateX(-50%);
}

/* =========================================================
   5) ISLAND SIZE
   - THIS is the main knob to make the island bigger.
   - Increase width to make island bigger.
   ========================================================= */
.island-wrap {
  position: relative;         /* makes swans position relative to island */
  width: 900px;               /* <<< MAKE THIS BIGGER (try 1000px / 1100px) */
}

/* Island image fills the container */
.island {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  user-select: none;
}

/* =========================================================
   6) MOON
   - Moon is positioned relative to ".composition", NOT the screen.
   - So it stays "top-left of island" even when island size changes.
   ========================================================= */
.moon {
  position: absolute;

  /* These two values control WHERE the moon sits relative to island */
  left: -50px;              /* move moon left/right */
  top: -100px;               /* move moon up/down */

  width: 300px;              /* make moon bigger/smaller */
  height: auto;
  
  /* make sure it’s always on top */
  z-index: 999;

  /* Soft yellow glow */
  filter: drop-shadow(0 0 14px rgba(255, 230, 160, 0.45))
          drop-shadow(0 0 30px rgba(255, 210, 120, 0.25));

  /* Hover grow effect (smooth) */
  transition: transform 180ms ease;

  /* Keeps it from being selectable */
  pointer-events: auto;
  user-select: none;
}

/* When you hover the moon, it grows slightly */
.moon:hover {
  transform: scale(1.08);
}

/* =========================================================
   7) SWANS
   IMPORTANT STRUCTURE:
   - The .swan DIV is the thing that:
       a) moves left/right across the lake
       b) flips (mirrors) when turning
   - The .swan img inside is the thing that:
       a) bobs up and down
   This avoids transform conflicts.
   ========================================================= */
.swan {
  position: absolute;

  /* So flipping happens around the center nicely */
  transform-origin: center center;

  /* Keeps them unclickable */
  pointer-events: none;
  user-select: none;
}

/* Swans scale (size control) */
.swan img {
  width: 80px;              /* <<< change swan size */
  height: auto;
  display: block;
}

/* =========================================================
   8) SWAN POSITIONS + SWIM BOUNDARIES
   You asked for the white swan right boundary to stay about where it is,
   but the left boundary to go further left across the lake.
   
   The easiest way: animate the CSS "left" value between two percentages.

   HOW TO TUNE:
   - Increase --leftEdge to move further RIGHT
   - Decrease --leftEdge to move further LEFT
   - Increase --rightEdge to move further RIGHT
   - Decrease --rightEdge to move further LEFT
   ========================================================= */

/* ---------- WHITE SWAN ---------- */
.swan-white {
  /* "top" places it vertically on the lake */
  top: 30%;                   /* <<< tweak if needed */

  /* Swim boundary settings */
  --leftEdge: 34%;
  --rightEdge: 49%;           /* right boundary: you said it's pretty perfect */

  /* Start position (must match one edge, usually left) */
  left: var(--leftEdge);

  /* Swim animation: includes flip at turns */
  animation: swim 12s ease-in-out infinite;
}

/* Bobbing for white swan */
.swan-white img {
  animation: bob 2.5s ease-in-out infinite;
}

/* ---------- BLACK SWAN ---------- */
.swan-black {
  top: 36%;

  /* Black swan currently goes too far right,
     so give it a tighter right boundary. */
  --leftEdge: 28%;
  --rightEdge: 52%;          /* <<< tighten this if it goes off lake */

  left: var(--leftEdge);

  animation: swim 7.2s ease-in-out infinite;
}

/* Bobbing for black swan */
.swan-black img {
  animation: bob 3s ease-in-out infinite;
}

/* =========================================================
   9) THE SWIM ANIMATION (includes automatic flip!)
   This does:
   - Start at leftEdge facing right
   - Move to rightEdge still facing right
   - Flip at the right edge
   - Move back to leftEdge facing left
   ========================================================= */
@keyframes swim {
  0%   { left: var(--leftEdge);  transform: scaleX(1); }
  49%  { left: var(--rightEdge); transform: scaleX(1); }

  /* At the turning point, flip the swan */
  50%  { left: var(--rightEdge); transform: scaleX(-1); }

  100% { left: var(--leftEdge);  transform: scaleX(-1); }
}

/* =========================================================
   10) BOBBING (small floating movement)
   ========================================================= */
@keyframes bob {
  0%, 100% { transform: translateY(0px); }
  50%      { transform: translateY(4px); }
}