/* 모든 질감과 빛은 CSS로 그린다. 외부 이미지와 스크립트는 사용하지 않는다. */
* {
  box-sizing: border-box;
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  background: #0b0908;
}
body {
  overflow: hidden;
}
.room {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(
    ellipse at 50% 63%,
    #241b15 0,
    #15110e 40%,
    #0b0908 76%
  );
}
.room::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.22;
  background:
    repeating-linear-gradient(0deg, #0000 0 3px, #201a1514 3px 4px),
    repeating-linear-gradient(91deg, #0000 0 6px, #bda58b08 6px 7px);
}
.room-light {
  position: absolute;
  width: min(135vw, 1500px);
  height: 110%;
  background: radial-gradient(
    ellipse at 50% 58%,
    #af4d1617,
    #6438180b 38%,
    transparent 68%
  );
  animation: room-glow 7s ease-in-out infinite alternate;
}
.fireplace {
  position: relative;
  width: min(92vw, 1050px, 140svh);
  aspect-ratio: 1.45;
  margin-top: 4svh;
  container-type: inline-size;
}
.surround {
  position: absolute;
  inset: 8% 7% 13%;
  background: linear-gradient(
    90deg,
    #14120f,
    #28231d 17%,
    #332b22 50%,
    #252019 85%,
    #14120f
  );
  box-shadow: 0 12px 55px #000b;
}
.mantel {
  position: absolute;
  top: 6%;
  left: 4%;
  width: 92%;
  height: 6.2%;
  border-top: 2px solid #56504455;
  border-bottom: 3px solid #080706;
  background: linear-gradient(#36322b, #24211b 28%, #1b1814 82%, #383026);
  box-shadow: 0 13px 18px #000a;
  z-index: 5;
}
.mantel::after {
  content: "";
  position: absolute;
  inset: 10% 0;
  background: repeating-linear-gradient(
    173deg,
    #0000 0 7px,
    #a4977e08 8px,
    #0000 9px 15px
  );
}
.lintel {
  position: absolute;
  top: 13%;
  left: 11%;
  width: 78%;
  height: 14%;
  background: linear-gradient(
    90deg,
    #24211b,
    #393026 45%,
    #2f291f 75%,
    #25211a
  );
  border-top: 1px solid #64513b44;
  border-bottom: 2px solid #100c08;
  box-shadow: inset 0 -5px 10px #0006;
}
.lintel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      4deg,
      #0000 0 8px,
      #09070618 9px 10px,
      #0000 11px 19px
    ),
    linear-gradient(
      90deg,
      #0000 49.8%,
      #0d0b0880 50%,
      #6c594533 50.2%,
      #0000 50.5%
    );
}
.pillar {
  position: absolute;
  top: 26%;
  bottom: 14%;
  width: 13%;
  background:
    repeating-linear-gradient(
      0deg,
      #0000 0 24%,
      #0b0806aa 24.5% 25%,
      #76604422 25.3% 25.6%
    ),
    linear-gradient(90deg, #211d17, #393025 65%, #4e3c29 95%, #18110b);
  box-shadow: inset 2px 0 6px #0005;
}
.pillar-left {
  left: 11%;
}
.pillar-right {
  right: 11%;
  transform: scaleX(-1);
}
.pillar::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.6;
  background:
    repeating-linear-gradient(
      167deg,
      #0000 0 9px,
      #b9a17e09 10px 11px,
      #0000 12px 23px
    ),
    repeating-linear-gradient(
      84deg,
      #0000 0 17px,
      #06040318 18px 19px,
      #0000 21px 30px
    );
}
.firebox {
  position: absolute;
  left: 24%;
  right: 24%;
  top: 25%;
  bottom: 14%;
  overflow: hidden;
  border-radius: 46% 46% 1% 1% / 13% 13% 1% 1%;
  background: #080503;
  box-shadow:
    0 -5px 9px #000a,
    0 0 0 7px #100d09,
    0 0 0 9px #49372655;
}
.brickwork {
  position: absolute;
  inset: 0;
  background-color: #25160e;
  background-image:
    linear-gradient(90deg, #05030290 1.5px, transparent 1.5px),
    linear-gradient(90deg, #05030290 1.5px, transparent 1.5px),
    linear-gradient(#050302aa 2px, #8d4e2520 3px, transparent 3px);
  background-size:
    16cqw 10cqw,
    16cqw 10cqw,
    100% 5cqw;
  background-position:
    0 0,
    8cqw 5cqw,
    0 0;
  mask-image: linear-gradient(#0005, #000 80%);
}
.backlight {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at 50% 87%,
    #ce5c174b 0,
    #a5421635 33%,
    #5b281912 55%,
    transparent 75%
  );
  mix-blend-mode: screen;
  animation: firelight 5.7s ease-in-out infinite;
}
.soot {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse at 50% 97%,
      transparent 16%,
      #0b06042a 42%,
      #070504c9 83%
    ),
    linear-gradient(90deg, #000a, #0000 16% 84%, #000a);
}
.firebed {
  position: absolute;
  left: 0;
  bottom: 1%;
  width: 100%;
  height: 88%;
}
.heat {
  position: absolute;
  inset: 20% 5% -10%;
  background: radial-gradient(
    ellipse at 50% 70%,
    #ee5b1728,
    #d94b0810 44%,
    transparent 70%
  );
  animation: firelight 4.1s ease-in-out infinite reverse;
}
.coals {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 4%;
  height: 16%;
  border-radius: 50%;
  background:
    radial-gradient(
        ellipse,
        #ffb244 0,
        #c5390a 15%,
        #431307 45%,
        transparent 70%
      )
      0 0 / 27px 13px,
    radial-gradient(
        ellipse,
        #f98120 0,
        #892407 18%,
        #1b0d08 45%,
        transparent 70%
      )
      11px 5px / 37px 18px,
    radial-gradient(ellipse at center, #5d1e0a, #100b08 64%, transparent 70%);
  box-shadow: 0 0 22px #d84b0920;
  animation: coal-glow 6s ease-in-out infinite alternate;
}
/* 불꽃 뒤의 장작과 앞의 장작을 나누어 불이 틈에서 올라오게 한다. */
.log {
  position: absolute;
  height: 11%;
  border-radius: 17% 12% 15% 18% / 45% 43% 47% 48%;
  background: repeating-linear-gradient(
    176deg,
    #080604 0 2px,
    #332014 3px 5px,
    #150d08 6px 9px,
    #4c2b16 10px,
    #100a06 12px 16px
  );
  box-shadow:
    inset 0 2px 3px #ba642c70,
    inset 0 -8px 11px #000d,
    0 7px 7px #000a;
}
.log::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(
      102deg,
      #0000 0 16px,
      #050301b0 17px 19px,
      #ad48141c 20px,
      #0000 22px 35px
    ),
    linear-gradient(#e47a2924, transparent 25% 60%, #0007);
}
.log::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 8%;
  top: 2%;
  height: 4%;
  border-radius: 50%;
  background: #ec742c;
  filter: blur(0.7px);
  opacity: 0.55;
  box-shadow:
    12px 4px 8px #ea571545,
    -10px -2px 13px #fa90233d;
  animation: coal-glow 4.5s ease-in-out infinite alternate-reverse;
}
.log i {
  position: absolute;
  right: -1%;
  top: 2%;
  width: 12%;
  height: 94%;
  border-radius: 50%;
  background: repeating-radial-gradient(
    ellipse at 50% 44%,
    #1e120b 0 3px,
    #4b2b17 4px 5px,
    #26190f 6px 8px
  );
  box-shadow:
    inset 1px 1px 4px #d47c3155,
    inset -4px -2px 7px #050301;
}
.log-back {
  width: 65%;
  left: 20%;
  bottom: 14%;
  transform: rotate(-13deg);
}
.log-middle {
  width: 70%;
  left: 12%;
  bottom: 13%;
  transform: rotate(12deg);
}
.log-left {
  width: 59%;
  left: 7%;
  bottom: 9%;
  transform: rotate(-11deg);
  z-index: 4;
}
.log-right {
  width: 54%;
  left: 40%;
  bottom: 8%;
  transform: rotate(15deg);
  z-index: 5;
}
.flames {
  position: absolute;
  inset: 0 0 15%;
  pointer-events: none;
  mix-blend-mode: screen;
}
.flames-back {
  opacity: 0.72;
  filter: blur(2.8px);
}
.flames-main {
  inset: 2% 0 14%;
  filter: blur(1.1px);
}
.flames-front {
  inset: 0 0 11%;
  z-index: 6;
  opacity: 0.76;
  filter: blur(0.8px);
}
.flame {
  position: absolute;
  bottom: 0;
  left: var(--x);
  width: var(--w);
  height: var(--h);
  transform-origin: 50% 100%;
  background: linear-gradient(
    0deg,
    #ff6b0b00 0,
    #ff710bf2 14%,
    #ffa72d 31%,
    #ffc658e8 52%,
    #fb891dcb 76%,
    #ef4f0700 100%
  );
  clip-path: polygon(
    22% 100%,
    6% 87%,
    12% 73%,
    32% 60%,
    37% 45%,
    29% 31%,
    49% 13%,
    62% 0,
    57% 23%,
    76% 42%,
    69% 58%,
    91% 76%,
    96% 90%,
    76% 100%
  );
  animation: flame-dance var(--t) ease-in-out var(--d) infinite alternate;
}
.flame::before {
  content: "";
  position: absolute;
  inset: 28% 17% -4%;
  background: linear-gradient(
    0deg,
    #ffb33200,
    #ffdc79 30%,
    #ffe9a2 52%,
    #ffd671b0 75%,
    #ffce5000
  );
  clip-path: polygon(
    0 100%,
    16% 75%,
    40% 51%,
    33% 27%,
    62% 0,
    55% 36%,
    90% 69%,
    100% 100%
  );
  transform-origin: 50% 100%;
  animation: core-dance calc(var(--t) * 0.73) ease-in-out var(--d) infinite
    alternate-reverse;
}
.flame::after {
  content: "";
  position: absolute;
  inset: 68% 17% -5%;
  background: radial-gradient(
    ellipse at 50% 95%,
    #a7b9db70,
    #d0b0a02b 38%,
    transparent 70%
  );
}
.flames-back .flame {
  background: linear-gradient(
    0deg,
    #fc5a0600,
    #f9620bc9 24%,
    #f8891e9e 53%,
    #d6460900 100%
  );
}
.flames-back .flame::before {
  opacity: 0.3;
}
.embers {
  position: absolute;
  inset: 0;
  z-index: 7;
}
.embers i {
  position: absolute;
  bottom: 16%;
  left: var(--x);
  width: 2px;
  height: 3px;
  border-radius: 50%;
  background: #ffc365;
  box-shadow: 0 0 5px #f87c22;
  opacity: 0;
  animation: ember-rise var(--t) linear var(--d) infinite;
}
.embers i:nth-child(3n) {
  width: 1px;
  height: 2px;
}
.grate {
  position: absolute;
  left: 9%;
  right: 9%;
  bottom: 3%;
  height: 13%;
  z-index: 8;
  border-bottom: 7px solid #100e0b;
  border-radius: 0 0 9% 9%;
  box-shadow:
    0 3px 4px #000b,
    inset 0 -1px 0 #aa623722;
}
.grate i {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, #090908, #30251a 55%, #0d0c0a);
  box-shadow: -1px 0 1px #e89b4c18;
  transform: perspective(60px) rotateX(-12deg);
}
.grate i:nth-child(1) {
  left: 3%;
  height: 115%;
}
.grate i:nth-child(2) {
  left: 19%;
}
.grate i:nth-child(3) {
  left: 35%;
}
.grate i:nth-child(4) {
  left: 51%;
}
.grate i:nth-child(5) {
  left: 67%;
}
.grate i:nth-child(6) {
  left: 83%;
}
.grate i:nth-child(7) {
  left: 97%;
  height: 115%;
}
.inner-shadow {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 18px 30px #000c,
    inset 10px 0 14px #0009,
    inset -10px 0 14px #0009;
}
.hearth {
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: 8%;
  height: 7%;
  background:
    radial-gradient(ellipse at 50% 0, #92522655, transparent 60%),
    repeating-linear-gradient(178deg, transparent 0 5px, #00000015 6px 7px),
    linear-gradient(#322a20, #211d17);
  transform: perspective(150px) rotateX(18deg);
  border-top: 1px solid #9c794233;
  box-shadow: 0 12px 30px #0008;
}
.hearth-edge {
  position: absolute;
  left: 4%;
  right: 4%;
  bottom: 5.6%;
  height: 3%;
  background: linear-gradient(#3a3024, #17140f 15%, #1b1712 85%, #070605);
  border-top: 1px solid #74604433;
  box-shadow: 0 9px 11px #0008;
}
.floor-light {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: -12%;
  height: 18%;
  border-radius: 50%;
  background: radial-gradient(
    ellipse at 50% 0,
    #d3772633,
    #81451c14 40%,
    transparent 70%
  );
  filter: blur(12px);
  animation: room-glow 6s ease-in-out infinite alternate-reverse;
}
.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse at 50% 55%,
    transparent 22%,
    #05040340 61%,
    #050403bd 100%
  );
}
/* 루프의 주기를 어긋나게 하여 불꽃이 함께 반복되지 않게 한다. */
@keyframes flame-dance {
  0% {
    transform: scaleX(0.91) scaleY(0.86) skewX(calc(var(--r) * -0.4));
    opacity: 0.78;
  }
  23% {
    transform: scaleX(1.09) scaleY(1.05) skewX(var(--r));
    opacity: 1;
  }
  49% {
    transform: scaleX(0.85) scaleY(0.93) skewX(calc(var(--r) * -0.7));
    opacity: 0.86;
    clip-path: polygon(
      22% 100%,
      6% 87%,
      18% 73%,
      21% 60%,
      43% 45%,
      53% 31%,
      45% 13%,
      37% 0,
      68% 23%,
      65% 42%,
      76% 58%,
      87% 76%,
      96% 90%,
      76% 100%
    );
  }
  74% {
    transform: scaleX(1.02) scaleY(1.12) skewX(calc(var(--r) * 0.4));
    opacity: 0.96;
  }
  100% {
    transform: scaleX(0.94) scaleY(0.9) skewX(calc(var(--r) * -0.6));
    opacity: 0.83;
  }
}
@keyframes core-dance {
  from {
    transform: scale(0.85, 0.88) skewX(9deg);
    opacity: 0.68;
  }
  to {
    transform: scale(1.08, 1.12) skewX(-7deg);
    opacity: 1;
  }
}
@keyframes firelight {
  0%,
  100% {
    opacity: 0.69;
  }
  19% {
    opacity: 0.9;
  }
  37% {
    opacity: 0.74;
  }
  58% {
    opacity: 1;
  }
  79% {
    opacity: 0.82;
  }
}
@keyframes room-glow {
  0%,
  100% {
    opacity: 0.65;
  }
  30% {
    opacity: 0.86;
  }
  63% {
    opacity: 1;
  }
  82% {
    opacity: 0.78;
  }
}
@keyframes coal-glow {
  from {
    opacity: 0.65;
  }
  to {
    opacity: 1;
  }
}
@keyframes ember-rise {
  0%,
  12% {
    opacity: 0;
    transform: translate(0, 0) scale(0.6);
  }
  17% {
    opacity: 0.8;
  }
  35% {
    transform: translate(calc(var(--drift) * -0.3), -8cqw) scale(0.8);
    opacity: 0.55;
  }
  60% {
    opacity: 0.15;
  }
  74%,
  100% {
    transform: translate(var(--drift), -30cqw) scale(0.2);
    opacity: 0;
  }
}
/* 지원 브라우저에서는 곡선 윤곽까지 바꾸어 불꽃의 끝이 부드럽게 휘게 한다. */
@supports (
  clip-path: shape(from 0% 0%, curve to 100% 100% with 0% 100%, close)
) {
  .flame {
    clip-path: shape(
      from 22% 100%,
      curve to 13% 73% with 0% 94% / 5% 84%,
      curve to 37% 45% with 29% 61% / 43% 61%,
      curve to 49% 13% with 20% 28% / 43% 25%,
      curve to 62% 0% with 57% 7% / 61% 4%,
      curve to 57% 23% with 55% 12% / 52% 15%,
      curve to 69% 58% with 59% 39% / 88% 42%,
      curve to 96% 90% with 66% 73% / 98% 73%,
      curve to 76% 100% with 94% 98% / 86% 100%,
      close
    );
    animation-name: flame-flow;
  }
  .flame::before {
    clip-path: shape(
      from 0% 100%,
      curve to 40% 51% with 4% 74% / 44% 77%,
      curve to 62% 0% with 22% 27% / 55% 13%,
      curve to 55% 36% with 50% 17% / 45% 22%,
      curve to 100% 100% with 62% 62% / 88% 65%,
      close
    );
  }
  @keyframes flame-flow {
    0% {
      transform: scaleX(0.91) scaleY(0.86) skewX(calc(var(--r) * -0.4));
      opacity: 0.78;
    }
    23% {
      transform: scaleX(1.09) scaleY(1.05) skewX(var(--r));
      opacity: 1;
    }
    49% {
      transform: scaleX(0.85) scaleY(0.93) skewX(calc(var(--r) * -0.7));
      opacity: 0.86;
      clip-path: shape(
        from 22% 100%,
        curve to 18% 73% with 1% 93% / 7% 82%,
        curve to 43% 45% with 29% 58% / 16% 61%,
        curve to 45% 13% with 63% 31% / 49% 26%,
        curve to 37% 0% with 40% 7% / 35% 4%,
        curve to 68% 23% with 54% 7% / 63% 14%,
        curve to 76% 58% with 78% 37% / 57% 41%,
        curve to 96% 90% with 91% 72% / 89% 76%,
        curve to 76% 100% with 96% 97% / 85% 100%,
        close
      );
    }
    74% {
      transform: scaleX(1.02) scaleY(1.12) skewX(calc(var(--r) * 0.4));
      opacity: 0.96;
    }
    100% {
      transform: scaleX(0.94) scaleY(0.9) skewX(calc(var(--r) * -0.6));
      opacity: 0.83;
    }
  }
}
@media (max-aspect-ratio: 3/4) {
  .fireplace {
    width: 150vw;
    max-width: 105svh;
    margin-top: 0;
  }
  .vignette {
    background: radial-gradient(
      ellipse at 50% 54%,
      transparent 20%,
      #05040333 65%,
      #050403b0
    );
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
  }
  .embers {
    display: none;
  }
}