:root {
  --hero: url("./assets/barbarian-smithy-hero.png");
  --hero-mobile: url("./assets/barbarian-smithy-hero-mobile.png");
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020203;
}

body {
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.scene {
  position: fixed;
  inset: 0;
  isolation: isolate;
  outline: none;
  overflow: hidden;
  background: #020203;
}

.backdrop,
.breath-layer {
  position: absolute;
  inset: -2.5vmax;
  background-image: var(--hero);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.backdrop {
  z-index: 0;
  filter: brightness(0.68) contrast(1.18) saturate(0.82);
  transform: scale(1.018);
  animation: room-drift 32s ease-in-out infinite alternate;
}

.breath-layer {
  z-index: 2;
  opacity: 0.79;
  transform-origin: 43% 58%;
  filter: brightness(0.82) contrast(1.2) saturate(0.86);
  -webkit-mask-image:
    radial-gradient(ellipse 14% 14% at 44% 52%, #000 0%, #000 40%, transparent 70%),
    radial-gradient(ellipse 16% 13% at 42% 63%, #000 0%, #000 40%, transparent 72%),
    radial-gradient(ellipse 9% 10% at 48% 46%, #000 0%, #000 32%, transparent 66%);
  mask-image:
    radial-gradient(ellipse 14% 14% at 44% 52%, #000 0%, #000 40%, transparent 70%),
    radial-gradient(ellipse 16% 13% at 42% 63%, #000 0%, #000 40%, transparent 72%),
    radial-gradient(ellipse 9% 10% at 48% 46%, #000 0%, #000 32%, transparent 66%);
  animation: sleeping-breath 5.4s ease-in-out infinite;
}

.chest-shadow {
  position: absolute;
  left: 39%;
  top: 45%;
  z-index: 3;
  width: 24vmin;
  height: 18vmin;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at center, rgb(255 217 166 / 0.07), transparent 47%),
    radial-gradient(ellipse at center, rgb(0 0 0 / 0.42), transparent 72%);
  filter: blur(1.9vmin);
  mix-blend-mode: soft-light;
  transform: translate(-50%, -50%);
  animation: chest-fall 5.4s ease-in-out infinite;
}

.exhale {
  position: absolute;
  left: 51.5%;
  top: 36.8%;
  z-index: 6;
  width: clamp(92px, 10vw, 190px);
  height: clamp(38px, 4.8vw, 86px);
  border-radius: 999px;
  background:
    radial-gradient(ellipse at 16% 50%, rgb(217 232 241 / 0.28), transparent 46%),
    radial-gradient(ellipse at 42% 50%, rgb(135 174 198 / 0.18), transparent 70%);
  filter: blur(11px);
  opacity: 0;
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) rotate(-17deg) scale(0.38);
  pointer-events: none;
}

.exhale-one {
  animation: breath-mist 5.4s ease-in-out infinite;
}

.exhale-two {
  animation: breath-mist 5.4s ease-in-out 2.7s infinite;
}

.embers,
.moon-haze,
.vignette,
.grain {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.embers {
  z-index: 7;
  opacity: 0.72;
  background:
    radial-gradient(circle at 76% 44%, rgb(255 76 31 / 0.19) 0 0.18vmin, transparent 0.24vmin),
    radial-gradient(circle at 82% 48%, rgb(255 131 39 / 0.14) 0 0.12vmin, transparent 0.2vmin),
    radial-gradient(circle at 71% 53%, rgb(255 54 27 / 0.12) 0 0.16vmin, transparent 0.23vmin),
    radial-gradient(circle at 79% 39%, rgb(255 146 45 / 0.12) 0 0.1vmin, transparent 0.18vmin);
  filter: blur(0.4px);
  animation: ember-pulse 4.8s ease-in-out infinite alternate;
}

.moon-haze {
  z-index: 8;
  opacity: 0.35;
  background:
    radial-gradient(ellipse 35% 55% at 20% 12%, rgb(106 147 178 / 0.18), transparent 64%),
    linear-gradient(112deg, rgb(110 140 160 / 0.16), transparent 35%);
  mix-blend-mode: screen;
}

.vignette {
  z-index: 9;
  background:
    radial-gradient(ellipse at 50% 48%, transparent 0%, transparent 46%, rgb(0 0 0 / 0.6) 78%, rgb(0 0 0 / 0.92) 100%),
    linear-gradient(to bottom, rgb(0 0 0 / 0.42), transparent 22%, transparent 58%, rgb(0 0 0 / 0.72));
}

.grain {
  z-index: 10;
  opacity: 0.16;
  background-image:
    radial-gradient(circle at 20% 30%, rgb(255 255 255 / 0.16) 0 1px, transparent 1.4px),
    radial-gradient(circle at 73% 71%, rgb(255 255 255 / 0.12) 0 1px, transparent 1.5px),
    radial-gradient(circle at 39% 82%, rgb(255 255 255 / 0.1) 0 1px, transparent 1.2px);
  background-size: 9px 11px, 13px 17px, 19px 23px;
  mix-blend-mode: overlay;
  animation: grain-shift 0.9s steps(2) infinite;
}

@keyframes sleeping-breath {
  0%,
  100% {
    transform: scale(1.014) translate3d(0, 0, 0);
  }

  42% {
    transform: scaleX(1.018) scaleY(1.034) translate3d(0, -0.2%, 0);
  }

  62% {
    transform: scaleX(1.012) scaleY(1.014) translate3d(0, 0.05%, 0);
  }
}

@keyframes chest-fall {
  0%,
  100% {
    opacity: 0.66;
    transform: translate(-50%, -50%) scale(0.88);
  }

  42% {
    opacity: 0.22;
    transform: translate(-50%, -52.4%) scale(1.22);
  }

  64% {
    opacity: 0.72;
    transform: translate(-50%, -49%) scale(0.96);
  }
}

@keyframes breath-mist {
  0%,
  38%,
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(-10deg) scale(0.42);
  }

  50% {
    opacity: 0.38;
  }

  76% {
    opacity: 0;
    transform: translate(-20%, -92%) rotate(-16deg) scale(1.16);
  }
}

@keyframes room-drift {
  from {
    transform: scale(1.018) translate3d(-0.18%, 0, 0);
  }

  to {
    transform: scale(1.032) translate3d(0.18%, -0.16%, 0);
  }
}

@keyframes ember-pulse {
  from {
    opacity: 0.38;
    filter: blur(0.6px) brightness(0.85);
  }

  to {
    opacity: 0.76;
    filter: blur(0.4px) brightness(1.3);
  }
}

@keyframes grain-shift {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-2px, 2px, 0);
  }
}

@media (max-aspect-ratio: 1 / 1) {
  :root {
    --hero: var(--hero-mobile);
  }

  .backdrop,
  .breath-layer {
    background-position: center;
  }

  .breath-layer {
    -webkit-mask-image:
      radial-gradient(ellipse 25% 12% at 46% 55%, #000 0%, #000 38%, transparent 70%),
      radial-gradient(ellipse 23% 11% at 48% 65%, #000 0%, #000 39%, transparent 72%),
      radial-gradient(ellipse 13% 9% at 52% 48%, #000 0%, #000 31%, transparent 66%);
    mask-image:
      radial-gradient(ellipse 25% 12% at 46% 55%, #000 0%, #000 38%, transparent 70%),
      radial-gradient(ellipse 23% 11% at 48% 65%, #000 0%, #000 39%, transparent 72%),
      radial-gradient(ellipse 13% 9% at 52% 48%, #000 0%, #000 31%, transparent 66%);
  }

  .chest-shadow {
    left: 47%;
    top: 55%;
    width: 34vmin;
    height: 22vmin;
  }

  .exhale {
    left: 52%;
    top: 47%;
    width: clamp(74px, 21vw, 150px);
    height: clamp(32px, 9vw, 68px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .backdrop,
  .breath-layer,
  .chest-shadow,
  .exhale,
  .embers,
  .grain {
    animation: none;
  }
}