/* Extracted from style.css: garden/world foundations, weather layers, and weather visibility toggles. */

/* ============================
   World Panel (root container)
   ============================ */
#world-panel {
  position: absolute;
  top: 0;
  left: var(--sidebar-width);
  width: var(--world-width);
  height: var(--world-height);
  overflow: hidden;
  isolation: isolate;
  z-index: 0 !important;
  background:
    linear-gradient(to bottom, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 18%, rgba(255,255,255,0.00) 34%),
    linear-gradient(to bottom, #8cccf6 0%, #8ad8f7 14%, #77d5e8 28%, #64d2de 40%, #53d0d6 49%, #27ca2e 49%, #1cc319 100%),
    repeating-linear-gradient(90deg, rgba(0,0,0,0.05) 0 48px, rgba(255,255,255,0.05) 48px 96px),
    repeating-linear-gradient(0deg, rgba(0,0,0,0.05) 0 48px, rgba(255,255,255,0.05) 48px 96px);
  background-size: auto, auto, 96px 96px, 96px 96px;
  background-position: center top, center top, center bottom, center bottom;
}

/* ============================
   WEATHER LAYER
   ============================ */
#weather-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  contain: layout paint style;

  /* Above garden visuals, below UI panels */
  z-index: 50;
}

/* Weather visibility toggles */
body.hide-weather-visuals #weather-layer,
body.hide-weather-visuals #weather-tint-layer,
body.hide-weather-visuals #cloud-shadow-layer,
body.hide-weather-visuals #world-clouds-a,
body.hide-weather-visuals #world-clouds-b {
  display: none !important;
}

/* ============================================================
   Migrated from 03-panel-contract.css — world/garden ownership carve-out
   ============================================================ */

/* ============================
   World Panel (root container)
   ============================ */

#world-panel::before,
#world-panel::after {
  display: none;
  content: none;
}

#world-sky,
#world-sun,
#world-moon,
#world-clouds-a,
#world-clouds-b,
#world-misc-layer,
#world-lighting {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#world-sky {
  z-index: -8 !important;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: var(--garden-stage-width) var(--garden-sky-render-height);
  opacity: 1;
  transition: opacity 1.2s linear, filter 1.2s linear;
}

#world-sky.sky-dawn  { background-image: url("../assets/world/sky/sky_dawn.png"); }
#world-sky.sky-day   { background-image: url("../assets/world/sky/sky_day.png"); }
#world-sky.sky-dusk  { background-image: url("../assets/world/sky/sky_dusk.png"); }
#world-sky.sky-night { background-image: url("../assets/world/sky/sky_night.png"); }

#world-sun,
#world-moon {
  inset: auto;
  width: var(--garden-celestial-size);
  height: var(--garden-celestial-size);
  transform: translate(-50%, -50%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0;
  transition: opacity 1.4s linear, filter 1.2s linear, left 1.4s linear, top 1.4s linear;
}

#world-sun {
  z-index: -7 !important;
  background-image: url("../assets/world/celestial/sun.png");
  filter: drop-shadow(0 0 26px rgba(255, 220, 100, 0.35));
}

#world-moon {
  z-index: -7 !important;
  background-image: url("../assets/world/celestial/moon.png");
  filter: drop-shadow(0 0 18px rgba(190, 210, 255, 0.24));
}

#world-clouds-a,
#world-clouds-b {
  left: calc(var(--garden-clouds-overscan) * -1);
  width: var(--garden-clouds-span-width);
  background-repeat: repeat-x;
  background-position: 0 center;
  background-size: var(--garden-clouds-texture-width) var(--garden-clouds-texture-height);
  opacity: 0;
  transition: opacity 1.4s linear, filter 1.2s linear;
}

#world-clouds-a {
  top: var(--garden-clouds-a-top);
  height: var(--garden-clouds-a-height);
  z-index: -6 !important;
  background-image: url("../assets/world/clouds/clouds_far.png");
}

#world-clouds-b {
  top: var(--garden-clouds-b-top);
  height: var(--garden-clouds-b-height);
  z-index: -5 !important;
  background-image: url("../assets/world/clouds/clouds_near.png");
}

#world-clouds-a.weather-storm,
#world-clouds-b.weather-storm {
  background-image: url("../assets/world/clouds/clouds_storm.png");
}

#world-misc-layer {
  z-index: -4 !important;
  background: transparent;
  opacity: 0;
}

#world-lighting {
  z-index: -2;
  background: linear-gradient(to bottom, rgba(255,255,255,0.00) 0%, rgba(255,255,255,0.00) 45%, rgba(0,0,0,0.00) 100%);
  opacity: 1;
  transition: background 1.2s linear, opacity 1.2s linear;
}

#garden-wrapper,
#darkgarden-wrapper,
#herogarden-wrapper {
  position: absolute;
  display: block;
  background: transparent;
  pointer-events: none;

  /* wrapper is scaled; clipping here breaks visibility */
  overflow: visible;
}

/* Neutral Garden now owns the full playable background area to the right of the sidebar. */
#garden-wrapper {
  position: absolute;
  left: var(--garden-authored-left) !important;
  top: var(--garden-authored-top) !important;
  width: var(--garden-stage-width);
  height: var(--garden-stage-height);
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
}

#garden-wrapper,
#garden,
#garden-canvas,
#chao-container,
#egg-container,
#item-container,
#weather-layer,
#weather-tint-layer,
#cloud-shadow-layer {
  z-index: 0 !important;
}

#garden-wrapper::before {
  display: none;
  content: none;
}

/* Dark Garden (top-right) */
#darkgarden-wrapper {
  width: var(--darkgarden-stage-width);
  height: var(--darkgarden-stage-height);
}

/* Hero Garden (bottom-center) */
#herogarden-wrapper {
  width: var(--herogarden-stage-width);
  height: var(--herogarden-stage-height);
}

/* ============================
   Gardens (inside wrappers)
   Clip HERE instead (scales correctly).
   ============================ */
#garden,
#darkgarden,
#herogarden {
  position: relative;          /* anchor for absolute children like canvas */
  width: 100%;
  height: 100%;
  border: 2px solid #415a77;
  border-radius: 12px;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  /* ✅ clip garden content + respects rounded corners */
  overflow: hidden;
}

/* Neutral Garden */
#garden {
  position: absolute;
  inset: 0;
  width: var(--garden-stage-width);
  height: var(--garden-stage-height);
  z-index: 1;
  border: 0;
  border-radius: 0;
  transform: none;
  background: url("../assets/bgs/bg_nGarden.png") no-repeat left top;
  background-size: var(--garden-stage-width) var(--garden-stage-height);
}

/* Dark Garden */
#darkgarden {
  background: url("../assets/bgs/bg_darkGarden.png") no-repeat left top;
  background-size: var(--darkgarden-stage-width) var(--darkgarden-stage-height);
}

/* Hero Garden */
#herogarden {
  background: url("../assets/bgs/bg_heroGarden.png") no-repeat left top;
  background-size: var(--herogarden-stage-width) var(--herogarden-stage-height);
}

/* ============================
   Canvases inside gardens
   ============================ */
#garden-canvas,
#darkgarden-canvas,
#herogarden-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* ✅ visuals only */
}

#garden-wrapper > #world-sky,
#garden-wrapper > #world-sun,
#garden-wrapper > #world-moon,
#garden-wrapper > #world-clouds-a,
#garden-wrapper > #world-clouds-b,
#garden-wrapper > #world-misc-layer,
#garden-wrapper > #world-lighting {
  inset: auto;
}

#garden-wrapper > #world-sky,
#garden-wrapper > #world-clouds-a,
#garden-wrapper > #world-clouds-b,
#garden-wrapper > #world-misc-layer {
  left: 0;
  right: 0;
  top: 0;
  height: var(--garden-sky-render-height);
}

#garden-wrapper > #world-sky {
  z-index: 1;
  opacity: 1;
  background-position: center top;
  background-size: var(--garden-stage-width) var(--garden-sky-render-height);
}

#garden-wrapper > #world-clouds-a {
  z-index: 3;
  top: var(--garden-clouds-a-top);
  height: var(--garden-clouds-a-height);
}

#garden-wrapper > #world-clouds-b {
  z-index: 4;
  top: var(--garden-clouds-b-top);
  height: var(--garden-clouds-b-height);
}

#garden-wrapper > #world-sun,
#garden-wrapper > #world-moon {
  z-index: 5;
  width: var(--garden-celestial-size);
  height: var(--garden-celestial-size);
}

#garden-wrapper > #world-lighting {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 6;
}

#garden-wrapper > #world-lighting {
  background: linear-gradient(to bottom, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.02) 16%, rgba(255,255,255,0.00) 30%, rgba(0,0,0,0.00) 100%);
}

#garden-canvas,
#cloud-shadow-layer,
#chao-container,
#egg-container,
#item-container,
#weather-tint-layer,
#weather-layer {
  z-index: 1;
}

/* Focus panel sizing/body contract is finalized later in the file. */

/* extracted from styles/03-panel-contract.css — Weather particles/tint/shadows family */
/* ============================
   WEATHER LAYER
   ============================ */

/* ============================
   WEATHER: CLOUD SHADOWS + TINT (Garden-only, scales with wrapper zoom)
   ============================ */
#cloud-shadow-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;

  /* Above garden canvas (11), below entities (12)
     IMPORTANT: keep strictly < 12 so it doesn't cover Chao/items.
     We use 11 but strengthen the actual shadow field below.
  */
  z-index: 11;

  /* Defaults (JS will override via CSS variables)
     NOTE: opacity is on the layer (not the ::before) so it affects the whole field.
  */
  opacity: var(--cloudShadowOpacity, 0);
  filter: blur(var(--cloudShadowBlur, 10px));
}

#cloud-shadow-layer::before {
  content: "";
  position: absolute;
  top: calc(var(--garden-stage-height) * -0.20);
  left: 0;
  width: calc(var(--garden-stage-width) * 2.6);
  height: calc(var(--garden-stage-height) * 1.4);

  /* Soft, large shadow blobs.
     Do NOT rely on mix-blend-mode here — it can be inconsistent depending on
     stacking contexts/filters. We instead use a stronger alpha field that
     darkens via normal compositing.
  */
  background-image:
    radial-gradient(ellipse at 15% 30%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.00) 62%),
    radial-gradient(ellipse at 45% 55%, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.00) 66%),
    radial-gradient(ellipse at 70% 35%, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.00) 64%),
    radial-gradient(ellipse at 90% 60%, rgba(0,0,0,0.40) 0%, rgba(0,0,0,0.00) 68%);

  background-repeat: repeat;
  background-size: var(--garden-cloud-shadow-tile-width) var(--garden-cloud-shadow-tile-height);

  transform: translateX(0) scale(var(--cloudShadowScale, 1));
  transform-origin: center;

  animation: cloudShadowDriftLeft var(--cloudShadowSpeed, 22s) linear infinite;
}

@keyframes cloudShadowDriftLeft {
  from { transform: translateX(0) scale(var(--cloudShadowScale, 1)); }
  to   { transform: translateX(-33.333%) scale(var(--cloudShadowScale, 1)); }
}

#weather-tint-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;

  /* Above entities, below weather particles */
  z-index: 13;

  background: var(--weatherTintColor, transparent);
  opacity: var(--weatherTintOpacity, 0);

  /* Tint reads better as multiply, but still works without it */
  mix-blend-mode: multiply;
}

/* ============================
   SNOW PARTICLES
   ============================ */
.snowflake {
  position: absolute;
  top: 0;
  left: 0;

  width: 3px;
  height: 3px;

  background: #ffffff;
  border-radius: 50%;

  opacity: 0.85;
  will-change: transform;
  transform: translate3d(0, 0, 0);

  image-rendering: pixelated;
  pointer-events: none;
}

/* Rain */
.rain-drop {
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 10px;
  background: rgba(180, 200, 255, 0.7);
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.rain-drop.heavy {
  height: 14px;
  opacity: 0.85;
}

/* Autumn Leaves */
.autumn-leaf {
  position: absolute;
  top: 0;
  left: 0;
  will-change: transform;
  width: 8px;
  height: 6px;
  background: #c96b2c;
  border-radius: 2px;
  opacity: 0.9;
  pointer-events: none;
}