@property --wind-lean-a {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@property --wind-lean-b {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@property --wood-lean-a {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
@property --wood-lean-b {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}

:root {
  --bg: #2f7ad4;
  --ink: #f7fbff;
  --sky-top: #0e4aa8;
  --sky-mid: #3d97e8;
  --sky-low: #c5e8fc;
  --sky-horizon: #c5d4b8;
  --haze: rgba(186, 206, 168, 0.45);
  --lake-top: #8ec4de;
  --lake-mid: #4e8fb3;
  --lake-bot: #2f6a86;
  --lake-ripple: rgba(236, 248, 255, 0.22);
  --lake-shine: rgba(255, 255, 255, 0.34);
  --lake-glint: rgba(255, 255, 255, 0.16);
  --lake-rim: rgba(46, 72, 78, 0.28);
  --cloud-opacity: 0.35;
  --cloud-light: rgba(255, 255, 255, 0.82);
  --cloud-dark: rgba(190, 207, 218, 0.76);
  --overcast: 0;
  --stars-opacity: 0;
  --moon-illum: 1;
  --scene-light: 1;
  --tree-light: 1;
  --shadow-x: 0%;
  --shadow-skew: 0deg;
  --shadow-stretch: 1;
  --shadow-opacity: 0.24;
  --shadow-color: rgba(24, 18, 12, 0.52);
  --leaf-shadow-x: 2px;
  --leaf-shadow-y: 3px;
  --rim-x: 0px;
  --rim-y: 2px;
  --rim-blur: 5px;
  --rim-glow: rgba(255, 226, 170, 0.06);
  --lit-x: 36%;
  --lit-y: 26%;
  --hot-glow: rgba(198, 245, 176, 0.3);
  --wind: 0;
  --wind-x: -1;
  --wind-lean-a: 0deg;
  --wind-lean-b: 0deg;
  --wood-lean-a: 0deg;
  --wood-lean-b: 0deg;
  --wind-period: 2.6s;
  --rain-tilt: 9deg;
  --rain-drift: -7vw;
  --ease-zoom: cubic-bezier(0.62, 0.02, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-zoom: 780ms;
  --t-fade: 300ms;
  --t-intro: 1.18s;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --vh: 1vh;
}

@supports (height: 1svh) {
  :root {
    --vh: 1svh;
  }
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  background: var(--bg);
  color: var(--ink);
  transition:
    --wind-lean-a 1.25s var(--ease-soft),
    --wind-lean-b 1.25s var(--ease-soft),
    --wood-lean-a 1.25s var(--ease-soft),
    --wood-lean-b 1.25s var(--ease-soft);
  font-family:
    "Valley Sans",
    ui-sans-serif,
    system-ui,
    -apple-system,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

.topbar {
  position: fixed;
  z-index: 40;
  inset: 0 auto auto 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: calc(0.95rem + var(--safe-t)) calc(1.15rem + var(--safe-r)) 0.95rem
    calc(1.15rem + var(--safe-l));
  pointer-events: none;
  transition:
    opacity var(--t-fade) var(--ease-soft),
    transform var(--t-fade) var(--ease-soft);
  will-change: opacity, transform;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  font-weight: 650;
  font-size: clamp(0.76rem, 1.9vw, 0.94rem);
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 10px rgba(18, 48, 92, 0.35);
}

@media (max-width: 560px) {
  .topbar {
    align-items: flex-start;
    gap: 0.55rem;
  }

  .brand {
    font-size: clamp(0.56rem, 3vw, 0.8rem);
    white-space: nowrap;
  }

  .weather-status {
    flex: 0 1 auto;
    max-width: 46%;
    white-space: normal;
    font-size: 0.6rem;
    line-height: 1.3;
  }
}

.brand__mark {
  flex: 0 0 auto;
  width: 1.15em;
  height: 1.15em;
  color: rgba(232, 244, 214, 0.95);
  filter: drop-shadow(0 1px 6px rgba(18, 48, 92, 0.35));
}

.brand__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.brand__mark path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
}

.brand__mark circle {
  fill: #6aaa4a;
}

.weather-status {
  flex: 0 0 auto;
  font-size: clamp(0.64rem, 1.6vw, 0.76rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  text-align: right;
  color: rgba(247, 252, 255, 0.92);
  text-shadow: 0 1px 9px rgba(14, 35, 65, 0.5);
}

body.is-zoomed .topbar {
  opacity: 0;
  transform: translate3d(0, -0.75rem, 0);
}

.stage {
  position: relative;
  height: 100%;
  display: grid;
  place-items: end center;
  isolation: isolate;
  overflow: hidden;
  transform-origin: 50% 62%;
}

body.is-intro .stage {
  transform: scale(1.34) translate3d(0, 5.5%, 0);
}

body.is-intro-animating .stage {
  transition: transform var(--t-intro) cubic-bezier(0.16, 0.84, 0.28, 1);
}

body.is-intro .topbar,
body.is-intro .climate-controls {
  opacity: 0;
  transform: translate3d(0, -0.55rem, 0);
}

body.is-intro-animating .topbar,
body.is-intro-animating .climate-controls {
  transition:
    opacity 0.7s var(--ease-soft) 0.28s,
    transform 0.7s var(--ease-soft) 0.28s;
}

body.is-intro .tree__labels {
  opacity: 0;
}

body.is-intro-animating .tree__labels {
  transition: opacity 0.55s var(--ease-soft) 0.42s;
}

body.is-intro .tree,
body.is-intro-animating .tree {
  pointer-events: none;
}

body.is-intro .tree__wood,
body.is-intro .tree__crown,
body.is-intro-animating .tree__wood,
body.is-intro-animating .tree__crown {
  animation: none;
  transform: none;
}

body.is-intro .leaf__cluster,
body.is-intro-animating .leaf__cluster {
  animation: none;
  transform: scale(1.08, 0.84);
}

.sky {
  position: absolute;
  inset: 0;
  z-index: -4;
  background:
    radial-gradient(
      ellipse 90% 40% at 50% 100%,
      var(--haze) 0%,
      transparent 55%
    ),
    linear-gradient(
      180deg,
      var(--sky-top) 0%,
      var(--sky-mid) 46%,
      var(--sky-low) 82%,
      var(--sky-horizon) 100%
    );
  transition:
    background 1.8s ease,
    filter 1.8s ease;
}

.sky::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(
    180deg,
    rgba(225, 232, 236, 0.86),
    rgba(202, 211, 216, 0.58)
  );
  opacity: var(--overcast);
  transition: opacity 1.6s ease;
  pointer-events: none;
}

body[data-period="amanhecer"] {
  --sky-top: #173f78;
  --sky-mid: #8d78a6;
  --sky-low: #f2a36f;
  --sky-horizon: #ffd49a;
  --haze: rgba(255, 168, 112, 0.48);
  --lake-top: #efb48a;
  --lake-mid: #8a6a92;
  --lake-bot: #4a4e78;
  --lake-ripple: rgba(255, 220, 190, 0.28);
  --lake-shine: rgba(255, 236, 210, 0.36);
  --lake-glint: rgba(255, 214, 170, 0.22);
}

body[data-period="dia"] {
  --sky-top: #0e4aa8;
  --sky-mid: #3d97e8;
  --sky-low: #b8e3fb;
  --sky-horizon: #dcebd2;
  --haze: rgba(198, 222, 185, 0.34);
  --lake-top: #9ad0ea;
  --lake-mid: #4f96be;
  --lake-bot: #2d6d8d;
  --lake-ripple: rgba(236, 248, 255, 0.26);
  --lake-shine: rgba(255, 255, 255, 0.38);
  --lake-glint: rgba(255, 255, 255, 0.18);
}

body[data-period="tarde"] {
  --sky-top: #195bb2;
  --sky-mid: #54a6ea;
  --sky-low: #cce8ec;
  --sky-horizon: #ded2a7;
  --haze: rgba(231, 197, 143, 0.34);
  --lake-top: #b7d6e4;
  --lake-mid: #5a93b0;
  --lake-bot: #3b6d86;
  --lake-ripple: rgba(255, 244, 214, 0.2);
  --lake-shine: rgba(255, 248, 226, 0.3);
  --lake-glint: rgba(255, 236, 190, 0.16);
}

body[data-period="entardecer"] {
  --sky-top: #233c72;
  --sky-mid: #8d6382;
  --sky-low: #ef8a5f;
  --sky-horizon: #ffbf73;
  --haze: rgba(255, 128, 76, 0.48);
  --lake-top: #e89a6c;
  --lake-mid: #9a5a6e;
  --lake-bot: #3f3d62;
  --lake-ripple: rgba(255, 196, 150, 0.26);
  --lake-shine: rgba(255, 210, 160, 0.32);
  --lake-glint: rgba(255, 186, 120, 0.22);
}

body[data-period="noite"] {
  --sky-top: #041127;
  --sky-mid: #0b2850;
  --sky-low: #1b4770;
  --sky-horizon: #385b70;
  --haze: rgba(58, 83, 100, 0.24);
  --stars-opacity: 0.92;
  --scene-light: 0.58;
  --tree-light: 0.92;
  --shadow-color: rgba(4, 10, 20, 0.5);
  --rim-blur: 4px;
  --rim-glow: rgba(168, 206, 255, 0.16);
  --hot-glow: rgba(176, 214, 255, 0.36);
  --lake-top: #2c5574;
  --lake-mid: #173652;
  --lake-bot: #0c2238;
  --lake-ripple: rgba(170, 210, 240, 0.16);
  --lake-shine: rgba(190, 220, 245, 0.2);
  --lake-glint: rgba(210, 230, 255, 0.38);
}

body[data-period="madrugada"] {
  --sky-top: #020916;
  --sky-mid: #081c3a;
  --sky-low: #143653;
  --sky-horizon: #2d4b5d;
  --haze: rgba(44, 66, 82, 0.22);
  --stars-opacity: 1;
  --scene-light: 0.48;
  --tree-light: 0.86;
  --shadow-color: rgba(3, 8, 16, 0.46);
  --rim-blur: 4px;
  --rim-glow: rgba(148, 188, 240, 0.12);
  --hot-glow: rgba(168, 206, 245, 0.3);
  --lake-top: #234860;
  --lake-mid: #122a40;
  --lake-bot: #081820;
  --lake-ripple: rgba(150, 190, 220, 0.14);
  --lake-shine: rgba(170, 205, 230, 0.16);
  --lake-glint: rgba(200, 225, 250, 0.3);
}

body.is-scrubbing {
  transition: none;
}

body.is-scrubbing .sky,
body.is-scrubbing .sky::after,
body.is-scrubbing .stars,
body.is-scrubbing .celestial,
body.is-scrubbing .celestial.is-up,
body.is-scrubbing .cloud-field,
body.is-scrubbing .rain,
body.is-scrubbing .lake-stop-top,
body.is-scrubbing .lake-stop-mid,
body.is-scrubbing .lake-stop-bot {
  transition: none;
}

body.is-scrubbing .land,
body.is-scrubbing .tree {
  transition: transform 620ms var(--ease-soft);
}

.stars {
  position: absolute;
  inset: 0 0 27%;
  z-index: 0;
  opacity: var(--stars-opacity);
  transition: opacity 1.4s ease;
}

.star {
  position: absolute;
  left: calc(var(--sx) * 1%);
  top: calc(var(--sy) * 1%);
  width: var(--ss);
  height: var(--ss);
  border-radius: 50%;
  background: var(--sc, #fff);
  box-shadow: 0 0 0.45rem rgba(185, 218, 255, 0.85);
  opacity: var(--so);
  animation: twinkle var(--sd) ease-in-out var(--sdelay) infinite alternate;
}

.star--major {
  box-shadow:
    0 0 0.22rem var(--sc),
    0 0 0.7rem rgba(185, 218, 255, 0.72);
}

@keyframes twinkle {
  from {
    transform: translateZ(0) scale(0.65);
    opacity: calc(var(--so) * 0.45);
  }
  to {
    transform: translateZ(0) scale(1.15);
    opacity: var(--so);
  }
}

.celestial {
  position: absolute;
  z-index: 1;
  left: calc(var(--cx, 50) * 1%);
  top: calc(var(--cy, 12) * 1%);
  border-radius: 50%;
  transform: translate3d(-50%, -50%, 0);
  opacity: 0;
  visibility: hidden;
  transition:
    left 1.5s ease,
    top 1.5s ease,
    opacity 1.2s ease,
    transform var(--t-intro) cubic-bezier(0.16, 0.84, 0.28, 1),
    visibility 0s linear 1.2s;
  pointer-events: none;
}

body.is-intro .celestial {
  transform: translate3d(calc(-50% + 6vw), calc(-50% + 5vh), 0);
}

.celestial.is-up {
  opacity: 1;
  visibility: visible;
  transition:
    left 1.5s ease,
    top 1.5s ease,
    opacity 1.2s ease,
    transform var(--t-intro) cubic-bezier(0.16, 0.84, 0.28, 1),
    visibility 0s linear;
}

.sun {
  width: min(12vmin, 7.5rem);
  height: min(12vmin, 7.5rem);
  background:
    radial-gradient(
      circle at 36% 32%,
      rgba(255, 255, 242, 0.95) 0 20%,
      rgba(255, 248, 214, 0) 62%
    ),
    radial-gradient(circle at 50% 50%, #fff4c8 0 42%, #ffdf76 76%, #ffc44a 100%);
  box-shadow:
    0 0 4.5rem 1.4rem rgba(255, 214, 130, 0.45),
    0 0 1.5rem 0.2rem rgba(255, 229, 156, 0.55);
}

.moon {
  width: min(9vmin, 5.6rem);
  height: min(9vmin, 5.6rem);
  background: radial-gradient(circle at 42% 38%, #fffdf0, #eceee5 68%, #d3d9dc);
  box-shadow: 0 0 2.5rem 0.65rem
    rgba(195, 220, 245, calc(0.12 + var(--moon-illum, 1) * 0.26));
}

.moon__phase {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.moon__phase path {
  fill: #141f36;
  fill-opacity: 0.88;
}

.moon__crater {
  position: absolute;
  border-radius: 50%;
  background: rgba(130, 145, 150, 0.2);
  box-shadow: inset 1px 1px 2px rgba(80, 95, 100, 0.15);
}

.moon__crater--a {
  width: 19%;
  height: 19%;
  left: 25%;
  top: 22%;
}
.moon__crater--b {
  width: 12%;
  height: 12%;
  right: 21%;
  top: 47%;
}
.moon__crater--c {
  width: 15%;
  height: 15%;
  left: 38%;
  bottom: 18%;
}

.cloud-field {
  position: absolute;
  inset: 0 0 25%;
  z-index: 2;
  opacity: var(--cloud-opacity);
  transition:
    opacity 1.5s ease,
    transform var(--t-intro) cubic-bezier(0.16, 0.84, 0.28, 1);
  pointer-events: none;
}

body.is-intro .cloud-field {
  transform: translate3d(-2.4vw, 1.2vh, 0) scale(1.08);
}

.cloud {
  position: absolute;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--cloud-light), var(--cloud-dark));
  transform: translateZ(0);
  box-shadow:
    1.6em 0 0 0.1em var(--cloud-dark),
    3.1em 0.15em 0 -0.15em var(--cloud-light),
    0.7em -0.55em 0 0.15em var(--cloud-light);
  opacity: var(--co, 0.7);
  animation: cloud-drift calc(var(--cd, 50s) / (0.78 + var(--wind) * 1.15))
    ease-in-out var(--cdelay, 0s) infinite alternate;
  pointer-events: none;
}

@keyframes cloud-drift {
  from {
    transform: translate3d(-1.5vw, 0, 0);
  }
  to {
    transform: translate3d(2.5vw, 0, 0);
  }
}

.cloud--a {
  width: 4.4rem;
  height: 1.15rem;
  top: 13%;
  left: 7%;
  --cd: 52s;
}
.cloud--b {
  width: 3.2rem;
  height: 0.9rem;
  top: 24%;
  left: 25%;
  --co: 0.55;
  --cd: 61s;
}
.cloud--c {
  width: 5rem;
  height: 1.25rem;
  top: 10%;
  right: 28%;
  --co: 0.5;
  --cd: 48s;
}
.cloud--d {
  width: 5.8rem;
  height: 1.35rem;
  top: 30%;
  right: 9%;
  --co: 0.72;
  --cd: 68s;
}
.cloud--e {
  width: 7rem;
  height: 1.55rem;
  top: 43%;
  left: 12%;
  --co: 0.62;
  --cd: 73s;
}
.cloud--f {
  width: 6.3rem;
  height: 1.45rem;
  top: 50%;
  right: 25%;
  --co: 0.68;
  --cd: 56s;
}

.rain {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  opacity: 0;
  transition: opacity 800ms ease;
  pointer-events: none;
}

body.is-raining .rain {
  opacity: var(--rain-opacity, 0.65);
}

.raindrop {
  position: absolute;
  left: calc(var(--rx) * 1%);
  top: -12%;
  width: 1px;
  height: var(--rl);
  border-radius: 999px;
  background: linear-gradient(transparent, rgba(215, 235, 250, 0.9));
  transform: translate3d(0, -15vh, 0) rotate(var(--rain-tilt, 9deg));
  animation: rainfall var(--rd) linear var(--rdelay) infinite;
}

body.is-storming .raindrop {
  width: 1.35px;
  background: linear-gradient(transparent, rgba(220, 239, 252, 0.96));
  box-shadow:
    7vw -9vh 0 rgba(210, 233, 250, 0.82),
    -8vw 13vh 0 rgba(210, 233, 250, 0.76),
    15vw 27vh 0 rgba(210, 233, 250, 0.68);
  animation-duration: calc(var(--rd) * 0.72);
}

@keyframes rainfall {
  to {
    transform: translate3d(var(--rain-drift, -7vw), 125vh, 0)
      rotate(var(--rain-tilt, 9deg));
  }
}

.lightning {
  position: absolute;
  inset: 0;
  z-index: 6;
  background: rgba(230, 240, 255, 0.72);
  opacity: 0;
  pointer-events: none;
}

body.is-storming .lightning {
  animation: lightning 9s steps(1, end) infinite;
}

@keyframes lightning {
  0%,
  92%,
  94%,
  100% {
    opacity: 0;
  }
  93%,
  95% {
    opacity: 0.32;
  }
}

.land {
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -2%;
  width: 116%;
  height: 42%;
  overflow: visible;
  transform: translate3d(0, 0, 0);
  translate: 0 0;
  will-change: transform;
  pointer-events: none;
  transition:
    filter 1.6s ease,
    transform 620ms var(--ease-soft),
    translate var(--t-intro) cubic-bezier(0.16, 0.84, 0.28, 1);
}

body.is-intro .land--far {
  translate: -2.4% 2.8%;
}
body.is-intro .land--mid {
  translate: 1.8% 3.6%;
}
body.is-intro .land--near {
  translate: -1.1% 4.4%;
}
body.is-intro .tree {
  translate: 0 3.2%;
}

.land--far {
  z-index: -3;
  height: 52%;
  opacity: 0.95;
}

.lake__body {
  fill: url(#lakeFill);
}

.lake-stop-top,
.lake-stop-mid,
.lake-stop-bot {
  transition: stop-color 1.6s ease;
}

.lake-stop-top {
  stop-color: var(--lake-top);
}
.lake-stop-mid {
  stop-color: var(--lake-mid);
}
.lake-stop-bot {
  stop-color: var(--lake-bot);
}

.lake__ripple {
  fill: var(--lake-ripple);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: lake-drift 8s ease-in-out infinite alternate;
}

.lake__ripple--b {
  animation-duration: 12.5s;
  animation-delay: -4s;
  opacity: 0.7;
}

.lake__shimmer {
  fill: var(--lake-shine);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: lake-shimmer 6.4s ease-in-out infinite alternate;
}

.lake__glint {
  fill: var(--lake-glint);
  transform-box: fill-box;
  transform-origin: 50% 0%;
  animation: lake-glint 7.2s ease-in-out infinite alternate;
}

.lake__rim {
  fill: none;
  stroke: var(--lake-rim);
  stroke-width: 2.2;
}

@keyframes lake-drift {
  from {
    transform: translateX(-3.2%);
  }
  to {
    transform: translateX(3.6%);
  }
}

@keyframes lake-shimmer {
  from {
    transform: translateX(-6%) scaleX(0.92);
    opacity: 0.45;
  }
  to {
    transform: translateX(7%) scaleX(1.08);
    opacity: 0.85;
  }
}

@keyframes lake-glint {
  from {
    transform: translateX(-10%) scaleY(0.92);
    opacity: 0.35;
  }
  to {
    transform: translateX(12%) scaleY(1.06);
    opacity: 0.8;
  }
}
.land--mid {
  z-index: -2;
  height: 46%;
}
.land--near {
  z-index: -1;
  height: 38%;
}

.land {
  filter: brightness(var(--scene-light))
    saturate(calc(0.72 + var(--scene-light) * 0.28));
}

.tree {
  filter: brightness(var(--tree-light))
    saturate(calc(0.78 + var(--tree-light) * 0.22));
}

.tree {
  position: relative;
  --coord-w: 1000;
  --coord-h: 1600;
  --tree-w: min(
    100vw,
    calc(var(--vh) * 96 * var(--coord-w) / var(--coord-h)),
    760px
  );
  width: var(--tree-w);
  height: calc(var(--tree-w) * var(--coord-h) / var(--coord-w));
  transform: translate3d(0, 0, 0);
  transform-origin: 50% 93%;
  translate: 0 0;
  transition:
    transform 620ms var(--ease-soft),
    opacity 420ms var(--ease-soft),
    translate var(--t-intro) cubic-bezier(0.16, 0.84, 0.28, 1);
  will-change: transform;
}

@media (max-width: 430px) {
  .tree {
    --tree-w: min(
      89vw,
      calc(var(--vh) * 88 * var(--coord-w) / var(--coord-h)),
      760px
    );
  }
}

.tree__branches path {
  stroke-width: var(--sw);
}

.tree__branches--back {
  opacity: 0.46;
  filter: grayscale(0.28) brightness(0.82);
}

.tree__shadow {
  position: absolute;
  left: 50%;
  bottom: 3.2%;
  z-index: 0;
  width: 46%;
  height: 7.5%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 50%,
    var(--shadow-color) 0%,
    transparent 74%
  );
  transform: translate3d(calc(-50% + var(--shadow-x)), 0, 0)
    skewX(var(--shadow-skew)) scaleX(var(--shadow-stretch));
  transform-origin: 50% 50%;
  opacity: var(--shadow-opacity);
  filter: blur(7px);
  pointer-events: none;
  transition:
    transform 1.5s ease,
    opacity 1.5s ease;
}

body.is-scrubbing .tree__shadow {
  transition-duration: 80ms;
}

body.is-zoomed .tree__shadow {
  opacity: 0;
}

.araucaria-bg path {
  stroke-linecap: round;
}

body.is-zoomed .tree {
  pointer-events: none;
}

.tree__wood {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 50% 94%;
  filter: drop-shadow(0 8px 10px rgba(28, 18, 10, 0.16))
    drop-shadow(
      var(--rim-x) var(--rim-y) var(--rim-blur) var(--rim-glow)
    );
  animation: trunk-bend var(--wind-period, 2.6s) ease-in-out infinite alternate;
  transition:
    opacity var(--t-fade) var(--ease-soft),
    filter 1.6s ease;
  will-change: transform;
}

.tree__crown {
  position: absolute;
  inset: 0;
  transform-origin: 50% 94%;
  animation: trunk-bend var(--wind-period, 2.6s) ease-in-out infinite alternate;
  will-change: transform;
}

body.is-zoomed .tree__wood {
  opacity: 0;
  animation: none;
  transform: translate3d(0, 2%, 0);
}

body.is-zoomed .tree__crown {
  animation: none;
  transform: none;
}

.tuft {
  position: absolute;
  left: calc(var(--x) / var(--coord-w) * 100%);
  top: calc(var(--y) / var(--coord-h) * 100%);
  width: calc(var(--d) / var(--coord-w) * 100%);
  aspect-ratio: 1 / 1;
  pointer-events: none;
  z-index: 1;
  transform: translate3d(-50%, -50%, 0);
  transition: opacity 420ms var(--ease-soft);
}

.tuft--back {
  z-index: 0;
  opacity: 0.86;
  filter: brightness(0.92) saturate(0.72) hue-rotate(-4deg);
}

.leaf {
  position: absolute;
  left: calc(var(--x) / var(--coord-w) * 100%);
  top: calc(var(--y) / var(--coord-h) * 100%);
  width: calc(var(--d) / var(--coord-w) * 100%);
  aspect-ratio: 1 / 1;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  transform: translate3d(-50%, -50%, 0);
  transition:
    opacity 420ms var(--ease-soft),
    transform 520ms var(--ease-soft);
  will-change: transform, opacity;
}

.leaf[data-page="especie"],
.leaf[data-page="pesquisa"] {
  z-index: 2;
}
.leaf[data-page="ecologia"],
.leaf[data-page="conservacao"] {
  z-index: 3;
}
.leaf[data-page="cultura"],
.leaf[data-page="mapa"] {
  z-index: 4;
}
.leaf[data-page="contato"] {
  z-index: 5;
}
.leaf[data-page="sobre"] {
  z-index: 6;
}

.leaf:focus {
  outline: none;
}

.leaf:hover,
.leaf:focus-visible,
.leaf.is-hot {
  z-index: 12;
}

.leaf:focus-visible .leaf__hover,
.leaf.is-hot .leaf__hover {
  transform: scale(1.14);
}

.leaf__core {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle at 34% 26%,
    hsl(var(--hue) 46% 26%),
    hsl(var(--hue) 52% 15%) 58%,
    hsl(var(--hue) 55% 9%)
  );
  opacity: 0;
  transform: translateZ(0) scale(0.55);
  transform-origin: 50% 50%;
  transition:
    transform var(--t-zoom) var(--ease-zoom),
    opacity 260ms linear;
  pointer-events: none;
}

.leaf__hover {
  position: absolute;
  inset: 0;
  display: block;
  transform: translateZ(0);
  transition: transform 420ms var(--ease-soft);
  will-change: transform;
}

.leaf__hover::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(
    circle at var(--lit-x, 36%) var(--lit-y, 26%),
    var(--hot-glow),
    transparent 68%
  );
  opacity: 0;
  transform: scale(0.82);
  pointer-events: none;
  transition:
    opacity 260ms var(--ease-soft),
    transform 420ms var(--ease-soft);
}

.leaf:hover .leaf__hover::after,
.leaf:focus-visible .leaf__hover::after,
.leaf.is-hot .leaf__hover::after {
  opacity: 1;
  transform: scale(1.16);
}

.leaf.is-open .leaf__hover::after {
  opacity: 0;
}

@media (hover: hover) and (pointer: fine) {
  .leaf:hover .leaf__hover {
    transform: scale(1.14);
  }
  .leaf:active .leaf__hover {
    transform: scale(1.08);
  }
}

.leaf__cluster {
  position: absolute;
  inset: 0;
  display: block;
  transform-origin: 50% 100%;
  animation: foliage-wind
    calc(var(--wind-period, 2.6s) * var(--sway-scale, 1))
    ease-in-out var(--sway-delay, 0s) infinite alternate;
  transition: filter 1.5s ease;
  will-change: transform;
}

.leaf .leaf__cluster {
  filter: drop-shadow(
    var(--leaf-shadow-x) var(--leaf-shadow-y) 2.4px rgba(12, 16, 10, 0.3)
  );
}

.leaf:hover .leaf__cluster,
.leaf:focus-visible .leaf__cluster,
.leaf.is-hot .leaf__cluster {
  filter: drop-shadow(
      var(--leaf-shadow-x) var(--leaf-shadow-y) 2.4px rgba(12, 16, 10, 0.3)
    )
    drop-shadow(0 0 10px var(--hot-glow)) brightness(1.2) saturate(1.16);
}

body[data-period="noite"] .leaf,
body[data-period="madrugada"] .leaf {
  filter: brightness(1.1) saturate(1.04);
}

@keyframes foliage-wind {
  from {
    transform: rotate(var(--wind-lean-a)) scale(1.08, 0.84);
  }
  to {
    transform: rotate(var(--wind-lean-b)) scale(1.08, 0.84);
  }
}

@keyframes trunk-bend {
  from {
    transform: rotate(var(--wood-lean-a));
  }
  to {
    transform: rotate(var(--wood-lean-b));
  }
}

.leaflet {
  position: absolute;
  left: calc(var(--cx) * 1%);
  top: calc(var(--cy) * 1%);
  width: calc(var(--cs) * 1%);
  height: calc(var(--cs) * 1%);
  margin: calc(var(--cs) * -0.5%) 0 0 calc(var(--cs) * -0.5%);
  border-radius: 46%;
  background: radial-gradient(
    circle at var(--lit-x, 36%) var(--lit-y, 26%),
    var(--cc2),
    var(--cc) 72%
  );
  transform: scale(var(--ls, 1));
  transform-origin: 50% 50%;
  opacity: var(--lo, 1);
  transition:
    transform 420ms var(--ease-soft) calc(var(--i) * 7ms),
    opacity 300ms linear calc(var(--i) * 7ms);
}

.leaflet--in {
  animation: pop 620ms var(--ease-soft) calc(120ms + var(--i) * 14ms) both;
}

@keyframes pop {
  from {
    transform: scale(0.1);
    opacity: 0;
  }
  60% {
    transform: scale(1.1);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.tree__labels {
  position: absolute;
  inset: 0;
  z-index: 20;
  opacity: 1;
  transition: opacity 260ms var(--ease-soft);
  pointer-events: none;
}

.leaf-label {
  position: absolute;
  left: calc(var(--lx) / var(--coord-w) * 100%);
  top: calc(var(--ly) / var(--coord-h) * 100%);
  padding: 0.32em 0.7em;
  border-radius: 999px;
  background: rgba(6, 20, 15, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-size: clamp(0.55rem, 1.2vmin, 0.72rem);
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0.88;
  transform: translate3d(-50%, -50%, 0);
  transition:
    opacity 260ms var(--ease-soft),
    transform 260ms var(--ease-soft),
    box-shadow 200ms linear;
}

.leaf-label.is-active {
  opacity: 1;
  transform: translate3d(-50%, -50%, 0) scale(1.12);
  box-shadow:
    0 0 0 2px rgba(214, 245, 200, 0.95),
    0 0 12px var(--hot-glow);
}

body.is-zoomed .tree__labels {
  opacity: 0;
}

body.is-zoomed .tuft,
body.is-zoomed .leaf:not(.is-open) {
  opacity: 0;
  transform: translate3d(-50%, -50%, 0) scale(0.72);
}

.leaf.is-open {
  z-index: 30;
}

.leaf.is-open .leaf__cluster {
  animation: none;
  transform: translateZ(0) scale(1.04);
  filter: drop-shadow(
    var(--leaf-shadow-x) var(--leaf-shadow-y) 2.4px rgba(12, 16, 10, 0.3)
  );
}

.leaf.is-open .leaflet {
  --ls: 0.28;
  --lo: 0;
}

.leaf.is-open .leaf__core {
  opacity: 1;
  transform: translateZ(0) scale(var(--zoom, 12));
}

.reader {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: start center;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: calc(5.5rem + var(--safe-t)) calc(1.25rem + var(--safe-r))
    calc(4rem + var(--safe-b)) calc(1.25rem + var(--safe-l));
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 360ms var(--ease-soft),
    visibility 0s linear 360ms;
}

.reader::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0, 0, 0, 0.42), transparent 58%),
    linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent 46%);
  opacity: 0;
  transition: opacity 420ms var(--ease-soft);
  pointer-events: none;
}

body.is-reading .reader {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 420ms var(--ease-soft) 40ms,
    visibility 0s linear;
}

body.is-reading .reader::before {
  opacity: 1;
}

.reader__close {
  position: fixed;
  z-index: 3;
  top: calc(1rem + var(--safe-t));
  right: calc(1.1rem + var(--safe-r));
  width: 2.9rem;
  height: 2.9rem;
  display: grid;
  place-items: center;
  border: 1px solid rgba(240, 255, 244, 0.28);
  border-radius: 50%;
  background: rgba(8, 24, 18, 0.5);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #eafbee;
  cursor: pointer;
  transform: translateZ(0) scale(0.7);
  opacity: 0;
  transition:
    transform 340ms var(--ease-soft),
    opacity 340ms var(--ease-soft),
    background 200ms linear;
  touch-action: manipulation;
}

.reader__close svg {
  width: 1.3rem;
  height: 1.3rem;
}
.reader__close:hover {
  background: rgba(14, 44, 32, 0.78);
}

body.is-reading .reader__close {
  opacity: 1;
  transform: translateZ(0) scale(1);
  transition-delay: 120ms;
}

.page {
  width: min(70rem, 100%);
  transform: translate3d(0, 1.4rem, 0);
  opacity: 0;
  transition:
    transform 520ms var(--ease-soft),
    opacity 420ms var(--ease-soft);
  will-change: transform, opacity;
}

.page[hidden] {
  display: none;
}

body.is-reading .page {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition-delay: 120ms;
}

.page__kicker {
  margin: 0 0 0.6rem;
  font-size: 0.74rem;
  font-weight: 650;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(222, 248, 226, 0.6);
}

.page__title {
  margin: 0 0 0.85rem;
  font-size: clamp(2.1rem, 7.4vw, 4.4rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  font-weight: 700;
  text-wrap: balance;
}

.page__lede {
  margin: 0 0 2.4rem;
  max-width: 44ch;
  font-size: clamp(1.02rem, 2.9vw, 1.35rem);
  line-height: 1.5;
  color: rgba(238, 252, 240, 0.86);
  text-wrap: pretty;
}

.page__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16.5rem), 1fr));
  gap: 0.9rem;
}

.card {
  padding: 1.15rem 1.2rem 1.25rem;
  border: 1px solid rgba(240, 255, 244, 0.14);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.07);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.card h2 {
  margin: 0 0 0.45rem;
  font-size: 0.95rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}

.card p {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.58;
  color: rgba(236, 250, 239, 0.8);
}

.card a {
  color: #b7f0c0;
  text-underline-offset: 3px;
}
.card code,
.card kbd {
  padding: 0.1em 0.38em;
  border-radius: 0.35em;
  background: rgba(0, 0, 0, 0.3);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.climate-controls {
  position: fixed;
  z-index: 45;
  right: calc(1rem + var(--safe-r));
  bottom: calc(1rem + var(--safe-b));
  display: grid;
  justify-items: end;
  gap: 0.7rem;
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}

body.is-zoomed .climate-controls {
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0.75rem, 0);
}

.climate-controls__toggle {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.52);
  border-radius: 50%;
  color: #fff;
  background: rgba(20, 42, 58, 0.65);
  box-shadow: 0 0.6rem 1.8rem rgba(9, 23, 35, 0.2);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  touch-action: manipulation;
  transition:
    background 180ms ease,
    transform 220ms var(--ease-soft);
}

.climate-controls__toggle:hover,
.climate-controls__toggle:focus-visible {
  background: rgba(25, 58, 78, 0.86);
  transform: scale(1.06);
}

.climate-controls__toggle svg {
  width: 1.55rem;
  height: 1.55rem;
}

.climate-controls.is-open .climate-controls__toggle {
  background: rgba(18, 48, 65, 0.9);
}

.climate-panel {
  position: absolute;
  right: 0;
  bottom: 3.7rem;
  width: min(21rem, calc(100vw - 2rem - var(--safe-l) - var(--safe-r)));
  padding: 1.15rem;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 1.15rem;
  color: #f8fcff;
  background: linear-gradient(
    145deg,
    rgba(19, 45, 61, 0.9),
    rgba(23, 53, 65, 0.78)
  );
  box-shadow: 0 1.2rem 3.5rem rgba(4, 18, 28, 0.34);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  transform: translate3d(0, 0.7rem, 0) scale(0.96);
  transform-origin: right bottom;
  opacity: 0;
  transition:
    opacity 220ms ease,
    transform 280ms var(--ease-soft);
}

.climate-panel[hidden] {
  display: none;
}

.climate-panel.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.climate-panel h2 {
  margin: 0 0 1.15rem;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}
.climate-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
  color: rgba(241, 250, 253, 0.78);
  font-size: 0.78rem;
  font-weight: 600;
}

.climate-field output {
  color: #fff;
  font-variant-numeric: tabular-nums;
  font-size: 1rem;
  font-weight: 700;
}

.climate-slider {
  width: 100%;
  height: 1.5rem;
  margin: 0 0 1rem;
  accent-color: #8ddda3;
  cursor: ew-resize;
}

.climate-field--select {
  align-items: center;
  margin-bottom: 1rem;
}

.climate-field select {
  max-width: 12.5rem;
  padding: 0.48rem 2rem 0.48rem 0.65rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.55rem;
  color: #fff;
  background: #244c5c;
  font: inherit;
  cursor: pointer;
}

.climate-live {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.48rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid rgba(155, 231, 176, 0.34);
  border-radius: 0.7rem;
  color: #d8f8e1;
  background: rgba(73, 154, 94, 0.18);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 650;
  cursor: pointer;
  transition: background 180ms ease;
}

.climate-live:hover,
.climate-live:focus-visible {
  background: rgba(73, 154, 94, 0.32);
}

.climate-live__dot {
  width: 0.48rem;
  height: 0.48rem;
  border-radius: 50%;
  background: #8be6a4;
  box-shadow: 0 0 0.55rem rgba(139, 230, 164, 0.8);
}

@media (max-width: 520px) {
  .climate-controls {
    right: calc(0.7rem + var(--safe-r));
    bottom: calc(0.7rem + var(--safe-b));
  }

  .climate-panel {
    padding: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --t-zoom: 1ms;
    --t-fade: 1ms;
    --t-intro: 1ms;
  }
  body.is-intro .stage,
  body.is-intro .celestial,
  body.is-intro .cloud-field {
    transform: none;
  }
  body.is-intro .land--far,
  body.is-intro .land--mid,
  body.is-intro .land--near,
  body.is-intro .tree {
    translate: 0;
  }
  .leaf__cluster {
    animation: none;
    transform: scale(1.08, 0.84);
  }
  .tree__wood,
  .tree__crown {
    animation: none;
  }
  .leaflet--in {
    animation: none;
  }
  .lake__ripple,
  .lake__shimmer,
  .lake__glint {
    animation: none;
  }
  .tree__shadow {
    transition-duration: 120ms;
  }
  .tree,
  .leaf,
  .leaf__core,
  .leaf__hover,
  .leaflet,
  .page,
  .reader,
  .reader__close,
  .topbar {
    transition-duration: 120ms !important;
    transition-delay: 0ms !important;
  }
}

@supports not (aspect-ratio: 1 / 1) {
  .leaf {
    height: calc(var(--d) / var(--coord-w) * 100%);
  }
}