:root {
  --cocoa-deep: #1a0f0a;
  --cocoa: #2a1810;
  --cocoa-mid: #3d2317;
  --amber-soft: #c4a574;
  --amber-glow: #a67c52;
  --ember: #8b5a3c;
  --bark: rgba(90, 64, 48, 0.42);
  --bark-soft: rgba(90, 64, 48, 0.18);
  --canopy: rgba(72, 52, 38, 0.12);
  --brand: #e8dcc8;
  --brand-shadow: rgba(26, 15, 10, 0.45);
  --font-display: "Fraunces", "Palatino Linotype", Palatino, serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
}

body {
  font-family: var(--font-display);
  background: var(--cocoa-deep);
  color: var(--brand);
  text-transform: lowercase;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* --- Atmosphere --- */

.atmosphere {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(139, 90, 60, 0.25) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 70% 20%, rgba(166, 124, 82, 0.12) 0%, transparent 50%),
    linear-gradient(165deg, var(--cocoa-deep) 0%, var(--cocoa) 45%, var(--cocoa-mid) 100%);
}

.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
}

.glow--amber {
  width: min(55vw, 480px);
  height: min(55vw, 480px);
  bottom: -10%;
  left: 50%;
  translate: -50% 0;
  background: radial-gradient(circle, rgba(196, 165, 116, 0.22) 0%, transparent 70%);
  animation: glow-breathe 14s ease-in-out infinite;
}

.glow--ember {
  width: min(40vw, 320px);
  height: min(40vw, 320px);
  top: 15%;
  right: 10%;
  background: radial-gradient(circle, rgba(139, 90, 60, 0.15) 0%, transparent 70%);
  animation: glow-breathe 18s ease-in-out infinite reverse;
}

/* --- Tree --- */

.tree {
  position: absolute;
  bottom: -4%;
  left: 50%;
  transform: translateX(-50%);
  width: min(58vw, 460px);
  height: auto;
  color: var(--bark);
  opacity: 0.9;
  pointer-events: none;
}

.tree__canopy {
  fill: var(--canopy);
}

.tree__canopy--soft {
  fill: rgba(72, 52, 38, 0.07);
}

.tree__trunk--soft {
  color: var(--bark-soft);
}

.tree__root {
  opacity: 0.7;
}

.tree__twig {
  opacity: 0.85;
}

/* --- Steam (swirly SVG paths) --- */

.steam {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.steam__swirl {
  opacity: 0;
  transform-origin: 50% 90%;
  transform-box: fill-box;
  will-change: transform, opacity;
}

.steam__swirl--1 {
  animation: steam-swirl-a 15s ease-in-out infinite;
}

.steam__swirl--2 {
  animation: steam-swirl-b 18s ease-in-out 1.8s infinite;
}

.steam__swirl--3 {
  animation: steam-swirl-a 13s ease-in-out 4s infinite;
}

.steam__swirl--4 {
  animation: steam-swirl-c 20s ease-in-out 0.6s infinite;
}

.steam__swirl--5 {
  animation: steam-swirl-b 16s ease-in-out 6s infinite;
}

.steam__swirl--6 {
  animation: steam-swirl-c 22s ease-in-out 3s infinite;
}

/* --- Grain --- */

.grain {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
  mix-blend-mode: overlay;
}

/* --- Brand --- */

.stage {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 100%;
  min-height: 100dvh;
  padding: 1.5rem;
}

.brand {
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(2.75rem, 9vw, 6.5rem);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--brand);
  text-shadow: 0 2px 40px var(--brand-shadow);
  animation: brand-settle 1.8s ease-out both;
}

/* --- Motion --- */

@keyframes steam-swirl-a {
  0% {
    opacity: 0;
    transform: translate(0, 8%) rotate(-4deg) scale(0.92, 0.85);
  }
  12% {
    opacity: 0.85;
  }
  35% {
    opacity: 0.65;
    transform: translate(4%, -18%) rotate(8deg) scale(1.05, 1);
  }
  60% {
    opacity: 0.4;
    transform: translate(-5%, -38%) rotate(-10deg) scale(0.95, 1.08);
  }
  85% {
    opacity: 0.15;
  }
  100% {
    opacity: 0;
    transform: translate(3%, -58%) rotate(6deg) scale(1.1, 1.15);
  }
}

@keyframes steam-swirl-b {
  0% {
    opacity: 0;
    transform: translate(0, 6%) rotate(5deg) scale(0.9, 0.88);
  }
  15% {
    opacity: 0.9;
  }
  40% {
    opacity: 0.55;
    transform: translate(-6%, -22%) rotate(-12deg) scale(1.08, 1.02);
  }
  65% {
    opacity: 0.35;
    transform: translate(5%, -42%) rotate(9deg) scale(0.92, 1.1);
  }
  100% {
    opacity: 0;
    transform: translate(-3%, -62%) rotate(-5deg) scale(1.12, 1.18);
  }
}

@keyframes steam-swirl-c {
  0% {
    opacity: 0;
    transform: translate(0, 10%) rotate(-6deg) scale(0.88, 0.9);
  }
  18% {
    opacity: 0.75;
  }
  45% {
    opacity: 0.5;
    transform: translate(7%, -20%) rotate(11deg) scale(1.12, 0.98);
  }
  70% {
    opacity: 0.28;
    transform: translate(-4%, -40%) rotate(-8deg) scale(0.96, 1.12);
  }
  100% {
    opacity: 0;
    transform: translate(2%, -60%) rotate(4deg) scale(1.05, 1.2);
  }
}

@keyframes glow-breathe {
  0%,
  100% {
    opacity: 0.85;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

@keyframes brand-settle {
  from {
    opacity: 0;
    letter-spacing: 0.14em;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    letter-spacing: 0.06em;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .steam__swirl,
  .glow,
  .brand {
    animation: none;
  }

  .steam__swirl {
    opacity: 0.25;
    transform: translate(0, -15%);
  }

  .brand {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .tree {
    width: min(88vw, 360px);
    opacity: 0.75;
  }
}