/* ===== RESET & BASE ===== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
  background: #0a0a0a;
  font-family: 'Courier New', monospace;
  cursor: default;
}

img, .npc-sprite, .eye-sprite, .bat-sprite, .skeleton-sprite {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ===== PIXEL FONT ===== */
.pixel-text {
  font-size: clamp(3rem, 10vw, 8rem);
  font-weight: bold;
  letter-spacing: 0.15em;
  color: #f0e040;
  text-shadow:
    4px 4px 0 #8b6914,
    -2px -2px 0 #fff8,
    0 0 20px #f0e04080,
    0 0 60px #f0e04040;
}

.pixel-text-sm {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: bold;
  letter-spacing: 0.1em;
  color: #f0e040;
  text-shadow:
    2px 2px 0 #8b6914,
    0 0 15px #f0e04060;
}

/* ===== SECTIONS ===== */
.section {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.section-title {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  text-align: center;
}

/* (Ground is now per-section with proper assets) */

/* ========================================
   SECTION 1: HERO
   ======================================== */
.section-hero {
  min-height: 100vh;
  flex-direction: column;
}

.hero-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #1a1a5e 0%,
    #2e4482 20%,
    #4a90d9 45%,
    #87ceeb 70%,
    #b8e6f0 100%);
  z-index: 0;
}

.sun {
  position: absolute;
  top: 8%;
  right: 12%;
  width: clamp(80px, 12vw, 160px);
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 0 30px #fff700aa) drop-shadow(0 0 80px #ffaa0066);
}

.cloud {
  position: absolute;
  z-index: 2;
  height: auto;
  opacity: 0.9;
  filter: brightness(1.1);
}

.cloud-1 { top: 12%; left: 5%; width: clamp(150px, 20vw, 300px); }
.cloud-2 { top: 22%; right: 5%; width: clamp(120px, 16vw, 250px); }
.cloud-3 { top: 35%; left: 35%; width: clamp(100px, 14vw, 220px); }

.hero-title {
  position: relative;
  z-index: 5;
  text-align: center;
  margin-bottom: 20vh;
}

.hero-subtitle {
  color: #fff;
  font-size: clamp(0.8rem, 2vw, 1.2rem);
  margin-top: 1rem;
  opacity: 0.7;
  animation: pulse-opacity 2s ease-in-out infinite;
  cursor: pointer;
}

@keyframes pulse-opacity {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 0.9; }
}

/* Hero has no ground — flows directly into forest */

/* ========================================
   SECTION 2: FOREST
   ======================================== */
.section-forest {
  min-height: 120vh;
}

/* Sky gradient at top, fading to green */
.forest-sky {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    #87ceeb 0%,
    #a8dba8 40%,
    #6ab04c 70%,
    #4a8c2a 100%);
  z-index: 0;
}

/* Tree background layers */
.forest-layer {
  position: absolute;
  bottom: 10%;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 2;
}

/* Distant trees — gray silhouettes, slightly higher */
.forest-trees-far {
  bottom: 14%;
  z-index: 1;
  opacity: 0.5;
  width: 110%;
  left: -5%;
}

/* Foreground trees — green with full trunks */
.forest-trees-near {
  bottom: 8%;
  z-index: 3;
}

/* Grass tile row */
.forest-grass-edge {
  position: absolute;
  bottom: 8%;
  left: 0;
  right: 0;
  height: 32px;
  background: url('assets/grass_surface.png') repeat-x;
  background-size: 32px 32px;
  z-index: 4;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Dirt tile ground */
.forest-ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8%;
  background: url('assets/dirt_mid.png') repeat;
  background-size: 32px 32px;
  z-index: 4;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Slimes */
.slime {
  position: absolute;
  z-index: 6;
  will-change: transform;
}

.slime-sprite {
  background-position: 0 0;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  transform: scale(2);
  transform-origin: bottom center;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

.slime-green { left: 12%; bottom: 10%; }
.slime-blue { right: 12%; bottom: 10%; }
.slime-pink { left: 40%; bottom: 10%; }

/* NPC Guide — sprite sheet first frame: 40x56 */
.guide {
  position: absolute;
  bottom: 10%;
  left: 55%;
  z-index: 6;
}

.npc-sprite {
  width: 40px;
  height: 56px;
  background-size: 40px 1456px;
  background-position: 0 0;
  background-repeat: no-repeat;
  transform: scale(2.5);
  transform-origin: bottom center;
}

/* ========================================
   SECTION 3: UNDERGROUND / CAVE
   ======================================== */
.section-cave {
  min-height: 120vh;
}

.cave-bg {
  position: absolute;
  inset: 0;
  background:
    url('assets/Background_69.png') repeat,
    linear-gradient(180deg, #1a1a2e 0%, #0d0d1a 100%);
  background-size: 160px 96px, 100% 100%;
}

/* Dark vignette overlay */
.cave-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, transparent 20%, #0a0a1acc 70%),
    radial-gradient(ellipse at 20% 40%, #2a1a3e33 0%, transparent 50%),
    radial-gradient(ellipse at 80% 60%, #1a2a3e33 0%, transparent 50%);
  z-index: 1;
}

/* All cave children above vignette */
.section-cave > .scroll-element,
.section-cave > .section-title {
  z-index: 3;
}

/* Bats — sprite sheet: 44x160, 4 frames of 44x40 */
.bat {
  position: absolute;
  z-index: 4;
}

.bat-sprite {
  width: 44px;
  height: 40px;
  background-size: 44px 160px;
  background-position: 0 0;
  background-repeat: no-repeat;
  transform: scale(2);
}

.bat-1 { top: 20%; right: -100px; }
.bat-2 { top: 35%; left: -100px; }
.bat-2 .bat-sprite { transform: scale(2) scaleX(-1); }
.bat-3 { top: 55%; right: -100px; }

/* Skeleton — sprite sheet: 40x840, first frame 40x56 */
.skeleton {
  position: absolute;
  bottom: 15%;
  right: 20%;
  z-index: 4;
}

.skeleton-sprite {
  width: 40px;
  height: 56px;
  background-size: 40px 840px;
  background-position: 0 0;
  background-repeat: no-repeat;
  transform: scale(2.5);
  transform-origin: bottom center;
}

/* Crystals/Gems */
.crystal {
  position: absolute;
  z-index: 3;
  will-change: transform, opacity, filter;
  opacity: 0.2;
  transition: opacity 0.8s, filter 0.8s;
}

.crystal img {
  width: clamp(40px, 6vw, 80px);
  height: auto;
  filter: drop-shadow(0 0 5px rgba(255,255,255,0.2));
}

.crystal-1 { bottom: 30%; left: 15%; }
.crystal-2 { bottom: 45%; right: 20%; }
.crystal-3 { bottom: 55%; left: 40%; }
.crystal-4 { bottom: 35%; right: 35%; }

.crystal.visible { opacity: 1; }
.crystal-1.visible img { filter: drop-shadow(0 0 20px #ff80ff) drop-shadow(0 0 40px #ff80ff88); }
.crystal-2.visible img { filter: drop-shadow(0 0 20px #80ffff) drop-shadow(0 0 40px #80ffff88); }
.crystal-3.visible img { filter: drop-shadow(0 0 20px #80ff80) drop-shadow(0 0 40px #80ff8088); }
.crystal-4.visible img { filter: drop-shadow(0 0 20px #ffff80) drop-shadow(0 0 40px #ffff8088); }

/* Ores */
.ore {
  position: absolute;
  z-index: 3;
  will-change: transform;
}

.ore img {
  width: clamp(40px, 6vw, 80px);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5));
}

.ore-gold { bottom: 25%; left: 60%; }
.ore-diamond { top: 40%; left: 25%; }
.ore-ruby { top: 55%; right: 25%; }

/* Pickaxe */
.pickaxe {
  position: absolute;
  bottom: 40%;
  left: 50%;
  z-index: 5;
}

.pickaxe img {
  width: clamp(48px, 7vw, 96px);
  height: auto;
  filter: drop-shadow(0 0 10px rgba(200,200,200,0.4));
}

/* Torches */
.torch {
  position: absolute;
  z-index: 5;
}

.torch img {
  width: clamp(28px, 3vw, 48px);
  height: auto;
  filter: drop-shadow(0 0 15px #ff8020) drop-shadow(0 0 30px #ff602088);
}

.torch-1 { top: 30%; left: 8%; }
.torch-2 { bottom: 25%; right: 10%; }

/* ========================================
   SECTION 4: BOSS FIGHT
   ======================================== */
.section-boss {
  background: #0a0008;
  min-height: 120vh;
  overflow: visible;
}

.boss-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, #2a001a44 0%, transparent 70%),
    linear-gradient(180deg, #0a0008 0%, #1a0010 50%, #0a0008 100%);
}

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

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ff2040;
  border-radius: 50%;
  opacity: 0;
  animation: particle-float 3s ease-in-out infinite;
}

@keyframes particle-float {
  0% { transform: translateY(0) scale(1); opacity: 0; }
  20% { opacity: 0.8; }
  100% { transform: translateY(-100px) scale(0); opacity: 0; }
}

/* Eye of Cthulhu — flies in from right side */
.boss-eye {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  will-change: transform;
}

.eye-sprite {
  width: 110px;
  height: 166px;
  background-size: 110px 996px;
  background-position: 0 0;
  background-repeat: no-repeat;
  transform: scale(2.5);
  filter:
    drop-shadow(0 0 20px #ff204060)
    drop-shadow(0 0 50px #ff204030);
}

.boss-warning {
  color: #ff2040 !important;
  text-shadow:
    2px 2px 0 #600010,
    0 0 20px #ff204080,
    0 0 40px #ff204040 !important;
}

.boss-text {
  position: absolute;
  bottom: 15%;
  left: 40%;
  transform: translateX(-50%);
  z-index: 10;
  white-space: nowrap;
}

/* ========================================
   SECTION 5: 3D MODEL
   ======================================== */
.section-3d {
  background: #050510;
  min-height: 100vh;
  flex-direction: column;
}

.model-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 50%, #10102040 0%, transparent 60%),
    linear-gradient(180deg, #0a0008 0%, #050510 50%, #0a0a20 100%);
}

#three-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.model-title {
  position: relative;
  z-index: 10;
  text-align: center;
  margin-top: auto;
  margin-bottom: 10%;
}

.model-hint {
  color: #888;
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

/* ========================================
   SCROLL ANIMATION STATES
   ======================================== */
.scroll-element {
  will-change: transform, opacity;
}

[data-anim="grow"] {
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
[data-anim="grow"].visible { transform: scaleY(1); }

[data-anim="slide-left"] {
  transform: translateX(-300px);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
}
[data-anim="slide-left"].visible { transform: translateX(0); opacity: 1; }

[data-anim="slide-right"] {
  transform: translateX(300px);
  opacity: 0;
  transition: transform 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
}
[data-anim="slide-right"].visible { transform: translateX(0); opacity: 1; }

[data-anim="fade-up"] {
  transform: translateY(60px);
  opacity: 0;
  transition: transform 0.8s ease-out, opacity 0.6s ease;
}
[data-anim="fade-up"].visible { transform: translateY(0); opacity: 1; }

[data-anim="spin-scale"] {
  transform: scale(0) rotate(0deg);
  opacity: 0;
  transition: transform 1s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
[data-anim="spin-scale"].visible { transform: scale(1) rotate(360deg); opacity: 1; }

[data-anim="glow"] {
  opacity: 0.15;
  transition: opacity 0.8s ease, filter 0.8s ease;
}
[data-anim="glow"].visible { opacity: 1; }

[data-anim="swing"] {
  transform: translateX(-50%) rotate(-90deg) scale(0);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
}
[data-anim="swing"].visible { transform: translateX(-50%) rotate(0deg) scale(1); opacity: 1; }

/* Boss enter handled entirely by JS */

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .tree img { width: 80px; }
  .slime img { width: 48px; }
  .eye-sprite { transform: scale(1.5); }
  .npc-sprite { transform: scale(2); }
  .skeleton-sprite { transform: scale(2); }
  .bat-sprite { transform: scale(1.5); }
  .crystal img { width: 40px; }
  .ore img { width: 40px; }
}