/* Fox-island background visual — ported from experiments/fox-island/ as a
   drop-in hero background (experiment: swap the hero photo for this scene).
   Namespaced under fi- so nothing here collides with the site's own classes.
   See experiments/fox-island/assets/layers/README.md for how the source art
   was segmented into the layers animated below. */

.bg-module--fox-island {
  background: #050308;
}

.fi-sky {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.fi-sky__nebula {
  position: absolute;
  inset: -10%;
  filter: blur(60px);
  opacity: 0.1;
}
.fi-sky__nebula i {
  position: absolute;
  border-radius: 50%;
}
.fi-sky__stars {
  position: absolute;
  inset: 0;
}
.fi-sky__stars i.fi-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: fi-twinkle linear infinite;
}
.fi-sky__stars i.fi-glow {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, rgba(255, 255, 255, 0.35) 45%, transparent 75%);
}
.fi-sky__stars i.fi-spark {
  position: absolute;
}
.fi-sky__stars i.fi-spark svg {
  display: block;
  animation: fi-sparkle ease-in-out infinite;
}
@keyframes fi-twinkle {
  0%, 100% { opacity: var(--fi-op-lo, 0.15); }
  50% { opacity: var(--fi-op-hi, 0.9); }
}
@keyframes fi-sparkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7) rotate(0deg); }
  50% { opacity: 0.9; transform: scale(1.05) rotate(25deg); }
}
@media (prefers-reduced-motion: reduce) {
  .fi-sky__stars i.fi-dot,
  .fi-sky__stars i.fi-spark svg {
    animation: none;
    opacity: 0.5;
  }
}

.fi-scene {
  position: absolute;
  top: 50%;
  right: 15%;
  transform: translateY(-35%);
  width: clamp(400px, 50vw, 700px);
  pointer-events: none;
}
.fi-scene__glow {
  position: absolute;
  inset: -8% -25%;
  z-index: 0;
  background: radial-gradient(45% 40% at 50% 30%, rgba(255, 148, 74, 0.12), transparent 72%);
  filter: blur(14px);
}
.fi-scene__base {
  position: relative;
  z-index: 3;
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 26px 50px rgba(0, 0, 0, 0.6));
  animation: fi-float 8s ease-in-out infinite alternate;
}
@keyframes fi-float {
  to { transform: translateY(-12px); }
}

.fi-debris {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  animation-name: fi-fallDrift;
  animation-timing-function: cubic-bezier(0.5, 0, 0.85, 0.35);
}
.fi-debris img {
  width: 100%;
  height: auto;
  display: block;
}
@keyframes fi-fallDrift {
  0% { top: calc(var(--fi-t0) * 1%); transform: translateX(0) rotate(0deg); opacity: 0; }
  8% { opacity: 0.95; }
  78% { opacity: 0.7; }
  100% {
    top: calc(var(--fi-t1) * 1%);
    transform: translateX(var(--fi-dx, 6%)) rotate(var(--fi-rot, 26deg));
    opacity: 0;
  }
}

.fi-leaf {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  width: 8px;
  animation-name: fi-leafFall;
  animation-timing-function: ease-in;
}
.fi-leaf svg {
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
@keyframes fi-leafFall {
  0% { top: calc(var(--fi-t0) * 1%); transform: translateX(0) rotate(-10deg); opacity: 0; z-index: 1; }
  18% { opacity: 0; z-index: 1; }
  23% { z-index: 4; }
  30% { opacity: 0.9; }
  50% { transform: translateX(var(--fi-sway1, 7%)) rotate(50deg); }
  74% { transform: translateX(var(--fi-sway2, -6%)) rotate(-30deg); }
  92% { opacity: 0.85; }
  100% {
    top: calc(var(--fi-t1) * 1%);
    transform: translateX(2%) rotate(70deg);
    opacity: 0;
    z-index: 4;
  }
}

.fi-flame {
  position: absolute;
  left: 47%;
  top: 60%;
  width: 20%;
  height: 44%;
  z-index: 1;
  transform: translateX(-50%);
  pointer-events: none;
}
.fi-flame__glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: 320%;
  height: 55%;
  transform: translate(-50%, -14%);
  border-radius: 50%;
  background: radial-gradient(50% 50% at 50% 20%, rgba(255, 178, 122, 0.55), transparent 72%);
  filter: blur(10px);
  mix-blend-mode: screen;
  animation: fi-flameGlow 2.2s ease-in-out infinite;
}
.fi-flame__svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  mix-blend-mode: screen;
  overflow: visible;
  filter: blur(1.2px);
  animation: fi-flameSway 3.4s ease-in-out infinite;
  transform-origin: 50% 0%;
}
@keyframes fi-flameGlow {
  0%, 100% { opacity: 0.65; transform: translate(-50%, -14%) scale(1); }
  50% { opacity: 1; transform: translate(-50%, -14%) scale(1.08); }
}
@keyframes fi-flameSway {
  0%, 100% { transform: translateX(0) scaleX(1); }
  50% { transform: translateX(0.6%) scaleX(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .fi-scene__base,
  .fi-debris,
  .fi-leaf,
  .fi-flame__glow,
  .fi-flame__svg {
    animation: none;
  }
}

@media (max-width: 900px) {
  .fi-scene {
    right: 50%;
    transform: translate(50%, -50%);
    width: clamp(220px, 70vw, 380px);
    opacity: 0.9;
  }
}