:root {
  color-scheme: dark;
  --background: #0b0308;
  --silver: #e9e5e9;
  --cycle: 6.4s;
  --ease: cubic-bezier(.26,.72,.26,1);
}
* { box-sizing: border-box; }
html { min-width: 320px; }
body {
  margin: 0;
  min-height: 100%;
  color: var(--silver);
  background: var(--background);
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.scene {
  position: relative;
  display: grid;
  place-items: center;
  isolation: isolate;
  width: 100%;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding: clamp(48px, 7vh, 74px) 24px 86px;
  background:
    radial-gradient(ellipse 36% 43% at 50% 42%, #521018 0%, #280711 42%, transparent 100%),
    radial-gradient(ellipse 65% 80% at 50% 53%, #290712 0%, transparent 86%),
    linear-gradient(127deg, #0b0409 0%, #13040b 52%, #070308 100%);
}
.atmosphere, .vignette, .film-grain {
  position: absolute; inset: 0;
  pointer-events: none;
}
.atmosphere { overflow: hidden; z-index: -3; }
.light { position: absolute; will-change: opacity,transform; }
.light--left {
  width: 68vw; height: 120vh; left: -26vw; top: -26vh;
  background: linear-gradient(94deg, transparent 16%, rgba(121,19,38,.055) 46%, transparent 53%);
  transform: rotate(-21deg); animation: lightShimmer 18s ease-in-out infinite alternate;
}
.light--right {
  width: 70vw; height: 120vh; right: -29vw; top: -20vh;
  background: linear-gradient(87deg, transparent 18%, rgba(172,23,47,.065) 47%, transparent 54%);
  transform: rotate(19deg); animation: lightShimmer 16s ease-in-out infinite alternate-reverse;
}
.light--core {
  width: min(95vw, 900px); aspect-ratio: 1 / 1;
  left: 50%; top: 42%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(172,20,44,.23) 0%,rgba(105,12,31,.11) 35%,transparent 71%);
  filter: blur(24px);
  animation: ambientGlow 11s ease-in-out infinite alternate;
}
.vignette {
  z-index: 5;
  box-shadow: inset 0 0 160px 18px rgba(0,0,0,.63), inset 0 0 32px rgba(0,0,0,.32);
}
.film-grain {
  z-index: 4;
  background: url("assets/grain.png") repeat;
  opacity: .42;
  mix-blend-mode: soft-light;
}
.dust {position: absolute; inset: 0; overflow: hidden;}
.dust > i {
  position: absolute; display: block; width: var(--size); height: var(--size);
  left: var(--x); top: var(--y); border-radius: 50%;
  background: #edb8bb;
  opacity: 0;
  filter: blur(var(--blur));
  box-shadow: 0 0 11px rgba(252,94,115,.55);
  animation: floatDust var(--duration) linear var(--delay) infinite;
}
.content {
  position: relative; z-index: 2;
  width: 100%; max-width: 860px;
  display: flex; flex-direction: column; align-items: center;
  animation: reveal 1.5s both cubic-bezier(.2,.8,.2,1);
}
.emblem-stage {
  position: relative;
  width: clamp(285px, 39vw, 445px);
  aspect-ratio: 1 / 1;
  display: grid; place-items: center;
  margin-bottom: clamp(19px,4vh,44px);
}
.emblem-aura {
  position: absolute; inset: 4%; border-radius: 50%;
  background: radial-gradient(circle, rgba(177,23,42,.28),rgba(91,9,22,.11) 46%,transparent 69%);
  filter: blur(22px);
  animation: aura var(--cycle) infinite ease-out;
}
.orbital {
  position: absolute;
  left: 50%; top: 50%;
  border: 1px solid rgba(245,176,186,.095);
  border-radius: 50%; transform: translate(-50%,-50%);
  box-shadow: 0 0 34px rgba(167,24,53,.07),inset 0 0 30px rgba(167,24,53,.07);
}
.orbital--outer {width: 99%; height: 99%;}
.orbital--inner {width: 84%; height: 84%; border-color:rgba(242,162,172,.07);}
.pulse-wave {
  position:absolute; inset: 20%;
  border-radius: 50%; border: 1.5px solid rgba(251,210,217,.69);
  box-shadow: 0 0 23px rgba(251,70,104,.42),inset 0 0 14px rgba(251,95,127,.21);
  transform: scale(.82); opacity: 0;
  pointer-events: none;
}
.pulse-wave--one {animation: waveFirst var(--cycle) ease-out infinite;}
.pulse-wave--two {animation: waveSecond var(--cycle) ease-out infinite;}
.emblem-light {
  position: absolute; inset: 18%; border-radius: 50%;
  background: radial-gradient(circle, rgba(254,83,99,.09), transparent 67%);
  filter: blur(16px);
  animation: aura var(--cycle) infinite;
}
.emblem-image {
  display:block; width: 81%; height: auto;
  position: relative; z-index: 2;
  object-fit: contain;
  filter: drop-shadow(0 8px 18px rgba(0,0,0,.48)) drop-shadow(0 0 8px rgba(255,225,229,.20));
  transform-origin: center center;
  animation: heartbeat var(--cycle) ease-in-out infinite, gleam var(--cycle) ease-in-out infinite;
  user-select: none;
  -webkit-user-drag: none;
}
.reflection {
  position: absolute; z-index: 1; pointer-events:none;
  left: 50%; bottom: 3%; width: 53%; height: 6px;
  transform:translateX(-50%);
  background: radial-gradient(ellipse,rgba(212,115,130,.23),transparent 70%);
  filter: blur(9px);
}
.wordmark { width: 100%; display:flex; flex-direction:column; align-items:center; }
h1 {
  padding: 0 0 0 .32em; margin: 16px 0 18px;
  font-weight: 400;
  font-size: clamp(30px, 4.9vw, 65px);
  line-height: 1.22;
  letter-spacing: .32em;
  text-align: center;
  color: #f4ebed;
  text-shadow: 0 1px 2px rgba(255,255,255,.14), 0 0 34px rgba(244,159,173,.22);
}
h1 span { font-weight: 300; }
.ornament {
  display:flex; justify-content:center; align-items:center;
  height: 15px; width: 100%;
}
.ornament::before, .ornament::after {
  content:""; display: block; height: 1px;
  width: min(11vw, 66px);
  background: linear-gradient(90deg,transparent,rgba(236,186,194,.4));
}
.ornament::after { transform:rotate(180deg); }
.ornament span {
  display:block; width: 4px; height: 4px; border-radius:50%;
  margin: 0 17px; background: #d8a4aa;
  box-shadow:0 0 10px rgba(255,143,165,.85);
}
.ornament--bottom { opacity:.35; transform:scale(.7); }
.footer {
  position: absolute; z-index: 8; bottom: 30px; left: 0; right:0;
  text-align:center;
  font-size: 9px; font-weight: 400; letter-spacing:.27em;
  color:rgba(228,185,192,.53);
}
.motion-toggle {
  position:absolute; z-index:9; bottom:24px; right:25px;
  display: grid; place-items:center;
  width: 35px; height: 35px; padding: 0;
  border: 1px solid rgba(255,225,232,.13); border-radius:50%;
  background: rgba(22,7,13,.45); color: rgba(255,227,232,.59);
  cursor:pointer; transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.motion-toggle:hover, .motion-toggle:focus-visible {color:#fff;border-color:rgba(255,225,232,.5);background:rgba(70,11,26,.7);}
.motion-toggle:focus-visible {outline: 2px solid white; outline-offset:4px;}
.play-icon {display: none;}
.is-paused .pause-icon {display:none;}
.is-paused .play-icon {display:block;}
.is-paused *, .is-paused *::before, .is-paused *::after {animation-play-state:paused !important;}

@keyframes heartbeat {
  0%, 6%, 9%, 12.5%, 17%, 100% {transform: scale(1);}
  7.7% {transform: scale(1.052);}
  10.5% {transform:scale(.990);}
  14.3% {transform: scale(1.072);}
}
@keyframes gleam {
  0%, 6%, 10%, 18%, 100% {filter:drop-shadow(0 8px 18px rgba(0,0,0,.48)) drop-shadow(0 0 8px rgba(255,225,229,.20));}
  8%, 14.3% {filter:drop-shadow(0 8px 18px rgba(0,0,0,.5)) drop-shadow(0 0 25px rgba(255,228,235,.64)) drop-shadow(0 0 42px rgba(233,79,114,.35));}
}
@keyframes aura {
  0%, 5%, 11%, 20%, 100% {opacity:.65; transform:scale(1);}
  8%, 14% {opacity:1; transform:scale(1.12);}
}
@keyframes waveFirst {
  0%, 7% {opacity:0;transform:scale(.82);}
  8.5% {opacity:.61;}
  27% {opacity:0;transform:scale(1.89);}
  100% {opacity:0;transform:scale(1.89);}
}
@keyframes waveSecond {
  0%, 13% {opacity:0;transform:scale(.82);}
  14.6% {opacity:.56;}
  35% {opacity:0;transform:scale(2.07);}
  100% {opacity:0;transform:scale(2.07);}
}
@keyframes ambientGlow {from {opacity:.45;filter:blur(26px);} to {opacity:.87;filter:blur(35px);}}
@keyframes lightShimmer {from {opacity:.4;} to {opacity:1;}}
@keyframes floatDust {
  0% {transform:translate3d(0,15px,0);opacity:0;}
  18% {opacity:var(--alpha);}
  78% {opacity:calc(var(--alpha) * .52);}
  100% {transform:translate3d(var(--drift),-75px,0);opacity:0;}
}
@keyframes reveal {from {opacity:0; transform:translateY(18px) scale(.985);} to {opacity:1;transform:translateY(0) scale(1);}}
@media (max-width: 640px) {
  .scene {padding: 42px 16px 85px;}
  .emblem-stage {width:min(86vw, 360px);margin-bottom:18px;}
  .emblem-image {width:84%;}
  h1 {font-size:clamp(26px,7.5vw,37px);letter-spacing:.22em;padding-left:.22em;margin: 15px 0 19px;white-space:nowrap;}
  .footer {bottom:23px;font-size:8px;}
  .motion-toggle {bottom:14px;right:13px;width:33px;height:33px;}
  .vignette {box-shadow: inset 0 0 86px 8px rgba(0,0,0,.52);}
}
@media (max-height: 670px) {
  .scene {padding-top:22px;padding-bottom:48px;}
  .emblem-stage {width:min(45vh,310px);margin-bottom:8px;}
  h1 {font-size:clamp(25px,4vw,49px);margin:10px 0;}
  .footer {bottom:12px;}
  .motion-toggle {bottom:8px;}
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {animation: none !important;scroll-behavior:auto !important;}
  .content {opacity:1;transform:none;}
  .dust > i {display:none;}
  .motion-toggle {display:none;}
}