/* beach.css — Pixel art beach scene (CSS gradients + pseudo-elements) */

.beach-scene {
  font-size: 16px; /* scale reference */
}

/* === SKY === */
.beach-sky {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 55%;
  background: linear-gradient(180deg,
    var(--sky-top) 0%,
    var(--sky-mid) 40%,
    var(--sky-bottom) 85%,
    #FFF8DC 100%
  );
  transition: background 1s ease;
}

/* === SUN === */
.beach-sun {
  position: absolute;
  top: 14%;
  right: 22%;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #FFF8DC, var(--sun-color) 40%, #FFA500 80%);
  box-shadow:
    0 0 30px var(--sun-glow),
    0 0 60px rgba(255, 165, 0, 0.25);
  animation: sun-pulse 4s ease-in-out infinite;
  transition: all 1s ease;
  image-rendering: pixelated;
}

@keyframes sun-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px var(--sun-glow), 0 0 60px rgba(255,165,0,0.25); }
  50% { transform: scale(1.06); box-shadow: 0 0 45px var(--sun-glow), 0 0 80px rgba(255,165,0,0.35); }
}

/* === MOON (visible at night) === */
.beach-moon {
  position: absolute;
  top: 12%;
  right: 25%;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #E8E8E8, #C0C0C0 50%, #888 90%);
  box-shadow: 0 0 20px rgba(192, 192, 192, 0.4);
  opacity: var(--moon-opacity);
  transition: opacity 1s ease;
  image-rendering: pixelated;
}
.beach-moon::after {
  content: '';
  position: absolute;
  top: 4px; right: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--sky-top);
  /* crater shadow for crescent effect */
}

/* === STARS (visible at night) === */
.beach-stars {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  opacity: var(--star-opacity);
  transition: opacity 1s ease;
  background-image:
    radial-gradient(1px 1px at 15% 20%, #FFF 100%, transparent),
    radial-gradient(1px 1px at 28% 12%, #FFF 100%, transparent),
    radial-gradient(1px 1px at 42% 30%, #FFF 100%, transparent),
    radial-gradient(1px 1px at 55% 8%, #FFF 100%, transparent),
    radial-gradient(1px 1px at 68% 18%, #FFF 100%, transparent),
    radial-gradient(1px 1px at 80% 25%, #FFF 100%, transparent),
    radial-gradient(1.5px 1.5px at 10% 35%, #FFF 100%, transparent),
    radial-gradient(1.5px 1.5px at 35% 40%, #FFF 100%, transparent),
    radial-gradient(1px 1px at 60% 38%, #FFF 100%, transparent),
    radial-gradient(1px 1px at 75% 32%, #FFF 100%, transparent),
    radial-gradient(1px 1px at 88% 15%, #FFF 100%, transparent),
    radial-gradient(1px 1px at 20% 45%, #FFF 80%, transparent),
    radial-gradient(1px 1px at 50% 42%, #FFF 80%, transparent);
  animation: star-twinkle 3s ease-in-out infinite alternate;
}

@keyframes star-twinkle {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* === CLOUDS === */
.beach-clouds {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
  opacity: var(--cloud-opacity);
  transition: opacity 1s ease;
}

.beach-cloud {
  position: absolute;
  background: var(--cloud-color);
  border-radius: 50px;
  transition: background 1s ease;
  image-rendering: pixelated;
}
.beach-cloud::before,
.beach-cloud::after {
  content: '';
  position: absolute;
  background: inherit;
  border-radius: 50%;
}

.cloud-1 {
  width: 76px; height: 26px;
  top: 18%;
  animation: cloud-drift 25s linear infinite;
}
.cloud-1::before {
  width: 34px; height: 34px;
  top: -18px; left: 12px;
}
.cloud-1::after {
  width: 22px; height: 22px;
  top: -10px; right: 12px;
}

.cloud-2 {
  width: 60px; height: 20px;
  top: 28%;
  animation: cloud-drift 20s linear infinite;
  animation-delay: -8s;
}
.cloud-2::before {
  width: 26px; height: 26px;
  top: -14px; left: 8px;
}
.cloud-2::after {
  width: 18px; height: 18px;
  top: -8px; right: 8px;
}

.cloud-3 {
  width: 90px; height: 30px;
  top: 8%;
  animation: cloud-drift 30s linear infinite;
  animation-delay: -15s;
}
.cloud-3::before {
  width: 40px; height: 40px;
  top: -20px; left: 16px;
}
.cloud-3::after {
  width: 28px; height: 28px;
  top: -12px; right: 14px;
}

@keyframes cloud-drift {
  0% { transform: translateX(-120px); }
  100% { transform: translateX(calc(100vw + 120px)); }
}

/* === OCEAN === */
.beach-ocean {
  position: absolute;
  top: 55%; left: 0; right: 0;
  height: 15%;
  background: linear-gradient(180deg,
    var(--ocean-top) 0%,
    var(--ocean-bottom) 100%
  );
  transition: background 1s ease;
}

.beach-waves {
  position: absolute;
  top: 25%;
  left: 0; right: 0;
  height: 60%;
  background: repeating-linear-gradient(
    90deg,
    transparent 0px,
    transparent 22px,
    rgba(255, 255, 255, 0.3) 22px,
    rgba(255, 255, 255, 0.3) 26px,
    transparent 26px,
    transparent 32px,
    rgba(255, 255, 255, 0.15) 32px,
    rgba(255, 255, 255, 0.15) 35px
  );
  animation: wave-move var(--wave-speed) ease-in-out infinite alternate;
  image-rendering: pixelated;
}

@keyframes wave-move {
  0% { transform: translateX(0); }
  100% { transform: translateX(-14px); }
}

/* === SAND === */
.beach-sand {
  position: absolute;
  top: 70%; left: 0; right: 0;
  bottom: 0;
  background: linear-gradient(180deg,
    var(--sand-color) 0%,
    var(--sand-dark) 100%
  );
  transition: background 1s ease;
}

/* === PALM TREE === */
.beach-palm {
  position: absolute;
  bottom: 15%;
  left: 15%;
}

.beach-palm-trunk {
  width: 12px;
  height: 90px;
  background: linear-gradient(90deg, #8B4513, #A0522D 50%, #8B4513);
  border-radius: 6px;
  transform: rotate(-6deg);
  transform-origin: bottom center;
  transition: background 1s ease;
  image-rendering: pixelated;
}

.beach-palm-fronds {
  position: absolute;
  top: -18px;
  left: -44px;
  width: 96px;
  height: 44px;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at center, #228B22 30%, #006400 70%);
  transform: rotate(-12deg);
  animation: frond-sway 5s ease-in-out infinite alternate;
  transition: background 1s ease;
  image-rendering: pixelated;
}
.beach-palm-fronds::before {
  content: '';
  position: absolute;
  width: 54px; height: 28px;
  border-radius: 0 50% 50% 0;
  background: #2E8B57;
  right: -20px; top: 6px;
  transform: rotate(18deg);
}
.beach-palm-fronds::after {
  content: '';
  position: absolute;
  width: 48px; height: 26px;
  border-radius: 50% 0 0 50%;
  background: #1E7B3E;
  left: -16px; top: 8px;
  transform: rotate(-15deg);
}

@keyframes frond-sway {
  0% { transform: rotate(-14deg); }
  100% { transform: rotate(2deg); }
}

/* === SEAGULLS === */
.beach-gulls {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 50%;
}

.beach-gull {
  position: absolute;
  width: 18px; height: 8px;
  background: var(--gull-color);
  clip-path: polygon(0% 50%, 30% 10%, 45% 45%, 55% 45%, 70% 10%, 100% 50%, 70% 55%, 55% 48%, 45% 48%, 30% 55%);
  transition: opacity 1s ease;
  image-rendering: pixelated;
}

.gull-1 {
  top: 25%;
  animation: gull-fly 18s linear infinite;
}
.gull-2 {
  top: 32%;
  animation: gull-fly 15s linear infinite;
  animation-delay: -6s;
}

@keyframes gull-fly {
  0% { transform: translate(-50px, 0) scaleX(1); }
  45% { transform: translate(45vw, -18px) scaleX(1); }
  55% { transform: translate(55vw, -18px) scaleX(-1); }
  100% { transform: translate(calc(100vw + 50px), -5px) scaleX(-1); }
}

/* === ADAPT FOR DIFFERENT SCREEN SIZES === */

/* iPhone landscape — beach as sidebar */
@media (max-width: 850px) and (orientation: landscape) {
  .beach-scene { width: 35%; }
  .beach-sky { height: 60%; }
  .beach-ocean { top: 60%; height: 12%; }
  .beach-sand { top: 72%; }
  .beach-sun { width: 28px; height: 28px; top: 8%; right: 25%; }
  .beach-palm { bottom: 20%; left: 10%; transform: scale(0.7); }
}

/* iPad */
[data-device="ipad"] .beach-sun {
  width: 56px; height: 56px;
}
[data-device="ipad"] .beach-palm {
  left: 20%;
  transform: scale(1.2);
}

/* Mac desktop */
[data-device="mac"] .beach-sun {
  width: 64px; height: 64px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .beach-sun,
  .beach-waves,
  .beach-palm-fronds,
  .beach-gull,
  .beach-cloud,
  .beach-stars {
    animation: none !important;
  }
}