@layer components {
/* Ambientación estacional */
.halloween-toggle[aria-pressed="true"] {
  border-color: #78e8c0;
  color: #bdf7e4;
  background: #142522;
}

.halloween-on .hero {
  background: radial-gradient(ellipse at 85% 20%, #142e27 0%, transparent 62%), var(--carbon);
}

.halloween-on .section-botanical {
  background: linear-gradient(145deg, #10251f, var(--botanical) 65%);
}

.halloween-on main > section { position: relative; }

.halloween-page-leaf,
.halloween-section-moon,
.halloween-section-lantern {
  display: none;
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.halloween-on .halloween-page-leaf {
  display: block;
  top: -18px;
  left: var(--leaf-edge, 95%);
  width: 9px;
  height: 21px;
  border: 1px solid rgb(156 233 190 / 32%);
  border-radius: 2px 80% 2px 80%;
  background: linear-gradient(135deg, rgb(160 239 197 / 34%), rgb(48 134 90 / 10%));
  box-shadow: 0 0 10px rgb(109 225 160 / 12%);
  opacity: 0;
  animation: halloween-leaf-fall var(--leaf-duration, 22s) linear var(--leaf-delay, 0s) infinite;
}

.halloween-page-leaf::after {
  position: absolute;
  top: -14px;
  left: 4px;
  width: 1px;
  height: 18px;
  background: linear-gradient(transparent, rgb(157 235 190 / 20%));
  content: "";
}

.halloween-on .halloween-section-moon {
  display: block;
  top: 24px;
  right: 18px;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  box-shadow: -6px 3px 0 0 rgb(137 214 172 / 22%);
  transform: rotate(-18deg);
}

.halloween-on .halloween-section-lantern {
  display: block;
  top: 30px;
  right: 24px;
  width: 12px;
  height: 21px;
  border: 1px solid rgb(130 205 164 / 25%);
  border-radius: 4px;
  background: radial-gradient(ellipse, rgb(189 245 206 / 30%), rgb(64 196 135 / 4%) 65%);
}

.halloween-section-lantern::before {
  position: absolute;
  top: -8px;
  left: 3px;
  width: 4px;
  height: 7px;
  border: 1px solid rgb(130 205 164 / 25%);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
  content: "";
}

@keyframes halloween-leaf-fall {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-18deg); }
  10% { opacity: 0.28; }
  35% { transform: translate3d(-10px, calc(var(--leaf-travel, 600px) * 0.35), 0) rotate(28deg); }
  65% { transform: translate3d(7px, calc(var(--leaf-travel, 600px) * 0.65), 0) rotate(-22deg); }
  90% { opacity: 0.24; }
  100% { opacity: 0; transform: translate3d(-3px, var(--leaf-travel, 600px), 0) rotate(35deg); }
}

.halloween-paused .halloween-page-leaf { animation-play-state: paused; }

@media (max-width: 767px) {
  .halloween-on .halloween-page-leaf { width: 6px; height: 15px; }
  .halloween-on .halloween-section-moon { top: 16px; right: 10px; width: 17px; height: 17px; }
  .halloween-on .halloween-section-lantern { top: 18px; right: 12px; }
}

.halloween-home,
.halloween-dock { display: none; }

.halloween-static .halloween-home {
  display: flex;
  justify-content: flex-end;
  min-height: 144px;
}

.halloween-on .halloween-dock {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  min-height: 158px;
  margin-top: 18px;
}

.eterea-stage {
  position: relative;
  flex: 0 0 84px;
  width: 84px;
  height: 144px;
}

.eterea-companion {
  position: absolute;
  inset: 0 auto auto 0;
  z-index: 30;
  width: 84px;
  height: 144px;
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: #d7f8e8;
  cursor: pointer;
  touch-action: manipulation;
}

.eterea-companion.is-floating {
  position: fixed;
  inset: auto;
  left: 0;
  top: 0;
}

.eterea-companion.is-floating .eterea-art {
  opacity: 0.94;

}
.eterea-companion.is-floating:focus-visible .eterea-art {
  animation: none;
  opacity: 1;
}
.eterea-companion.is-floating.is-passing:not(:focus-visible) .eterea-art {
  animation: none;
  opacity: 0.65;
}

.eterea-art {
  display: block;
  position: relative;
  width: 210px;
  height: 360px;
  transform: scale(0.4);
  transform-origin: top left;
  pointer-events: none;
  transition: opacity 1600ms ease-in-out;
}

.eterea-art::before {
  position: absolute;
  inset: 28px -12px 16px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(64 196 170 / 26%), transparent 70%);
  opacity: 0.55;
  transition: opacity 350ms ease;
  content: "";
}

.eterea-companion:is(:focus-visible, .is-near) .eterea-art::before {
  opacity: 0.8;
}

.eterea-figure {
  position: absolute;
  inset: 0;
  animation: eterea-levitate 6s ease-in-out infinite;
}

.eterea-head {
  position: absolute;
  top: 6px;
  left: 83px;
  z-index: 3;
  width: 44px;
}

.eterea-crown {
  display: block;
  width: 28px;
  height: 26px;
  margin-inline: auto;
  background: linear-gradient(#d6fff1, #4cddb4 50%, #137063);
  clip-path: polygon(50% 0%, 75% 45%, 100% 60%, 75% 85%, 65% 100%, 35% 100%, 25% 85%, 0% 60%, 25% 45%);
}

.eterea-bun {
  display: block;
  width: 44px;
  height: 28px;
  margin-top: -4px;
  border-top: 1px solid #43ae99;
  border-radius: 50% 50% 45% 45%;
  background: linear-gradient(#0b1917, #040808);
}

.eterea-face {
  display: block;
  position: relative;
  width: 44px;
  height: 56px;
  margin-top: -2px;
  border-radius: 40% 40% 50% 50% / 35% 35% 65% 65%;
  background: linear-gradient(#e3f4f1, #b6dfd8);
}

.eterea-face::before {
  position: absolute;
  inset: 0 0 auto;
  height: 12px;
  border-radius: 4px 4px 7px 7px;
  background: #0a1111;
  content: "";
}

.eterea-eyes {
  position: absolute;
  top: 25px;
  left: 8px;
  display: flex;
  gap: 8px;
}

.eterea-eye {
  position: relative;
  width: 10px;
  height: 8px;
  overflow: hidden;
  border-radius: 50%;
  background: #e7fff4;
}

.eterea-eye::before {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0f766e;
  transform: translate(var(--eye-x, 0px), var(--eye-y, 0px));
  content: "";
}

.eterea-mouth {
  position: absolute;
  top: 43px;
  left: 17px;
  width: 10px;
  height: 4px;
  border-radius: 50%;
  background: #72555e;
}

.eterea-earring {
  position: absolute;
  top: 26px;
  width: 4px;
  height: 14px;
  border-radius: 50%;
  background: #76edc6;
  box-shadow: 0 0 7px #40c4aa;
}

.eterea-earring.left { left: -4px; }
.eterea-earring.right { right: -4px; }

.eterea-neck {
  display: block;
  width: 14px;
  height: 16px;
  margin-inline: auto;
  background: #c2e4de;
}

.eterea-sabai {
  position: absolute;
  z-index: 2;
  top: 116px;
  left: 60px;
  width: 96px;
  height: 112px;
  border-left: 2px solid #4cbe9e;
  background: repeating-linear-gradient(45deg, transparent 0 5px, rgb(45 212 191 / 14%) 5px 6px), linear-gradient(135deg, #173c34, #081713);
  clip-path: polygon(15% 0%, 95% 0%, 82% 100%, 0% 85%);
}

.eterea-belt {
  position: absolute;
  z-index: 3;
  top: 208px;
  left: 66px;
  width: 80px;
  height: 12px;
  background: linear-gradient(90deg, #146558, #9bf2d4, #176e60);
}

.eterea-belt::after {
  position: absolute;
  top: -3px;
  left: 33px;
  width: 16px;
  height: 16px;
  background: #bdf7e4;
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgb(120 232 192 / 60%);
  content: "";
}

.eterea-skirt {
  position: absolute;
  top: 220px;
  left: 58px;
  width: 100px;
  height: 125px;
  background: repeating-linear-gradient(90deg, transparent 0 10px, rgb(79 207 163 / 8%) 10px 12px), linear-gradient(#17362d, #0b201a 60%, transparent);
  clip-path: polygon(25% 0%, 75% 0%, 95% 86%, 85% 100%, 15% 100%, 5% 86%);
}

.eterea-mist {
  position: absolute;
  top: 320px;
  left: 48px;
  width: 126px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(120 232 192 / 35%), transparent 68%);
}

.eterea-arm {
  position: absolute;
  z-index: 4;
  top: 117px;
  left: 142px;
  width: 12px;
  height: 70px;
  border-radius: 12px;
  background: #bde0da;
  transform: rotate(-32deg);
  transform-origin: top;
}

.eterea-arm-free {
  top: 120px;
  left: 64px;
  height: 66px;
  background: linear-gradient(#cbe7e2, #b6dcd4);
  transform: rotate(19deg);
}

.eterea-arm-free::after {
  position: absolute;
  bottom: -8px;
  left: -1px;
  width: 14px;
  height: 18px;
  border-top: 2px solid #67bc9f;
  border-radius: 5px 5px 8px 8px;
  background: #c2e4de;
  content: "";
}

.eterea-lantern {
  position: absolute;
  z-index: 5;
  top: 178px;
  left: 168px;
  width: 28px;
  height: 44px;
  border: 2px solid #156650;
  border-radius: 4px;
  background: linear-gradient(90deg, transparent 20%, #174638 21% 24%, transparent 25% 75%, #174638 76% 79%, transparent 80%), radial-gradient(ellipse, #f0fff5, #8ae9b9 40%, #249e7a);
  box-shadow: 0 0 18px 5px rgb(64 196 170 / 30%);
}

.eterea-lantern::before {
  position: absolute;
  top: -17px;
  left: 6px;
  width: 12px;
  height: 15px;
  border: 2px solid #377d67;
  border-bottom: 0;
  border-radius: 50% 50% 0 0;
  content: "";
}

.eterea-lantern::after {
  position: absolute;
  inset: -22px;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(rgb(120 232 192 / 30%), transparent 70%);
  opacity: 0.55;
  transition: opacity 350ms ease;
  content: "";
}

.eterea-companion:is(:focus-visible, .is-near) .eterea-lantern::after {
  opacity: 0.8;
}

.eterea-leaf {
  position: absolute;
  top: 105px;
  left: 12px;
  width: 22px;
  height: 34px;
  border: 1px solid #31795e;
  border-radius: 2px 35px 2px 35px;
  background: linear-gradient(135deg, #429d78, #143e2e);
  transform: rotate(-30deg);
}

.eterea-leaf.second {
  top: 247px;
  left: 179px;
  transform: rotate(30deg);
}

.halloween-fireflies {
  position: fixed;
  inset: 0;
  z-index: 6;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.eterea-speech {
  position: absolute;
  left: var(--speech-x, -236px);
  top: var(--speech-y, 10px);
  width: min(220px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-wrap: anywhere;
  padding: 14px 16px;
  border: 1px solid #39725b;
  border-radius: 16px 16px 4px 16px;
  background: #10241c;
  color: #e0f4e9;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: left;
  pointer-events: none;
}

.dialog-open .eterea-companion,
.dialog-open .halloween-fireflies { visibility: hidden; }

.eterea-companion.is-parked .eterea-figure {
  animation: none;
}

.halloween-paused .eterea-figure,
.halloween-paused .eterea-art { animation-play-state: paused; }

@keyframes eterea-levitate {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}


/* Interacciones con mouse */
@media (hover: hover) and (pointer: fine) {
  .eterea-companion.is-floating:hover .eterea-art {
    animation: none;
    opacity: 1;
  }

  .eterea-companion:hover .eterea-art::before,
  .eterea-companion:hover .eterea-lantern::after {
    opacity: 0.8;
  }
}
/* Legibilidad durante el vuelo */
.eterea-companion.is-floating.is-over-copy:not(:focus-visible) .eterea-art {
  animation: none;
  opacity: 0.58;
}
}