:root {
  color-scheme: light;
  background: #f4f0e7;
  --paper: #f4f0e7;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--paper);
  -webkit-tap-highlight-color: transparent;
}

.scene {
  --light-x: 0px;
  --light-y: 0px;
  --surface-x: 0px;
  --surface-y: 0px;
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  min-height: 100svh;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 46%, #faf7f0 0%, #f4f0e7 60%, #eee7dc 100%);
}

.atmosphere {
  position: absolute;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.surface {
  position: absolute;
  inset: -1.5%;
  display: block;
  transform: translate3d(var(--surface-x), var(--surface-y), 0);
  transition: transform 2.8s cubic-bezier(.16, 1, .3, 1);
  animation: material-in 2.2s ease-out both;
}

.surface img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  -webkit-user-drag: none;
}

.light {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(ellipse at 34% 22%, rgb(255 253 245 / 25%), transparent 55%),
    radial-gradient(ellipse at 53% 48%, rgb(255 254 248 / 10%), transparent 40%);
  transform: translate3d(var(--light-x), var(--light-y), 0);
  transition: transform 2.2s cubic-bezier(.16, 1, .3, 1);
}

.warmth {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse at 76% 85%, rgb(167 120 76 / 5%), transparent 44%);
  animation: light-breathe 40s ease-in-out infinite alternate;
}

.vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 47%, transparent 42%, rgb(109 78 47 / 2%) 100%);
}

.emblem {
  position: relative;
  width: clamp(220px, 25vw, 320px);
  max-width: min(72vw, 58svh);
  aspect-ratio: 1;
  margin: 0;
  mix-blend-mode: multiply;
  user-select: none;
  animation: emerge 1.8s cubic-bezier(.16, 1, .3, 1) both;
}

.emblem img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-drag: none;
}

.is-paused .warmth,
.is-paused .surface {
  animation-play-state: paused;
}

@keyframes emerge {
  from {
    opacity: 0;
    transform: translate3d(0, 6px, 0) scale(.98);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes material-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes light-breathe {
  from {
    opacity: .35;
  }
  to {
    opacity: 1;
  }
}

@media (max-width: 600px) {
  .emblem {
    width: 230px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .surface,
  .light {
    transform: none;
  }
}

@media (forced-colors: active) {
  .atmosphere {
    display: none;
  }

  .scene {
    background: Canvas;
  }

  .emblem {
    mix-blend-mode: normal;
  }

  .emblem img {
    forced-color-adjust: none;
  }
}