@charset "UTF-8";
:root { color-scheme: dark; --ink: #11120f; --paper: #eeede5; --accent: #ff4c23; }
* { box-sizing: border-box; }
html { background: var(--ink); }
body { margin: 0; }
button { -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 2px solid var(--paper); outline-offset: 5px; }
.splash { position: relative; height: 100vh; height: 100svh; min-height: 360px; overflow: hidden; color: var(--paper); background: var(--ink); isolation: isolate; }
.stage { position: relative; display: grid; place-items: center; height: 100%; }
.scene-art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: -1; }
.scene-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, #11120f96 90%); }
.backlight { position: absolute; width: 130%; height: 140%; left: -15%; top: -20%; background: radial-gradient(ellipse at center, #fc4a211d 0, #3d292015 35%, transparent 64%); animation: breathe 8s ease-in-out infinite alternate; }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid #eeede517; border-radius: 50%; width: min(92vw, 1130px); aspect-ratio: 1; }
.orbit::before, .orbit::after { content: ""; position: absolute; border-radius: 50%; }
.orbit-one { transform: translate(-50%, -50%) rotateX(54deg) rotate(-24deg); animation: orbit-one 34s linear infinite; }
.orbit-one::before { inset: -2px; border: 3px solid transparent; border-top-color: var(--accent); border-right-color: #ff4c2322; transform: rotate(-24deg); }
.orbit-one::after { width: 8px; height: 8px; top: 14%; right: 14%; background: var(--paper); box-shadow: 0 0 16px #eeede555; }
.orbit-two { width: min(70vw, 850px); border-color: #ff4c232b; transform: translate(-50%, -50%) rotateY(62deg) rotate(30deg); animation: orbit-two 29s linear infinite reverse; }
.orbit-two::before { inset: 26px; border: 1px dashed #eeede518; }
.orbit-two::after { width: 14px; height: 14px; top: 15%; left: 13%; background: var(--accent); }
[data-depth] { transform: translate3d(var(--layer-x, 0px), var(--layer-y, 0px), 0); }
.slab { position: absolute; width: 24vw; height: 145%; }
.slab i { display: block; height: 100%; width: 100%; transform: skew(-24deg); }
.slab-one { left: -21vw; top: -24%; }
.slab-one i { background: var(--accent); box-shadow: 11px 0 0 #11120f, 14px 0 0 #ff4c2399; animation: slab-drift 10s ease-in-out infinite alternate; }
.slab-two { right: -23vw; bottom: -24%; }
.slab-two i { background: var(--paper); box-shadow: -12px 0 0 #11120f, -14px 0 0 #eeede557; animation: slab-drift 12s ease-in-out infinite alternate-reverse; }
.fragment { position: absolute; width: 90px; height: 110px; }
.fragment i { display: block; height: 100%; width: 100%; clip-path: polygon(12% 16%, 73% 0, 100% 66%, 39% 100%, 0 67%); background: linear-gradient(135deg, #656256 0, #aaa694 28%, #403e34 29%, #1a1b17 64%); animation: fragment-float 7s ease-in-out infinite alternate; }
.fragment-one { left: 17%; top: 17%; width: 50px; height: 66px; rotate: -30deg; }
.fragment-two { right: 14%; top: 20%; width: 75px; height: 39px; rotate: 21deg; }
.fragment-two i { background: linear-gradient(140deg, #ff7950, #ff4c23 33%, #a62b17 34%, #421811); animation-delay: -3s; }
.fragment-three { left: 23%; bottom: 14%; width: 27px; height: 37px; rotate: 45deg; }
.fragment-three i { animation-delay: -4s; }
.fragment-four { right: 18%; bottom: 13%; width: 92px; height: 73px; rotate: -17deg; filter: blur(.6px); }
.fragment-four i { animation-delay: -2s; }
.fragment-five { left: 48%; top: 9%; width: 14px; height: 20px; rotate: 20deg; }
.fragment-five i { background: var(--accent); animation-delay: -5s; }
.particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .68; }
.brand { margin: 0; width: min(81vw, 900px); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; }
.brand-logo { display: block; width: 100%; height: auto; filter: drop-shadow(0 30px 30px #0009); animation: logo-float 7s ease-in-out infinite alternate; user-select: none; }
.edge { position: absolute; z-index: 2; left: -10%; width: 120%; height: 6px; background: repeating-linear-gradient(115deg, var(--accent) 0, var(--accent) 14px, var(--ink) 14px, var(--ink) 25px); opacity: .9; }
.edge-top { top: 0; }
.edge-bottom { bottom: 0; }
.motion-toggle { position: absolute; right: 24px; bottom: 23px; z-index: 3; display: grid; place-items: center; padding: 11px; width: 38px; height: 38px; border: 1px solid #eeede52a; border-radius: 50%; background: #11120f70; color: #eeede5a3; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.motion-toggle:hover { border-color: var(--accent); color: var(--paper); }
.motion-toggle svg { width: 13px; height: 13px; fill: currentColor; }
.play-icon { display: none; }
.motion-toggle[aria-pressed="true"] .pause-icon { display: none; }
.motion-toggle[aria-pressed="true"] .play-icon { display: block; }
.splash[data-motion="off"] *, .splash[data-motion="off"] *::before, .splash[data-motion="off"] *::after { animation-play-state: paused !important; }
@keyframes logo-float { from { transform: translateY(5px) rotate(-1deg); } to { transform: translateY(-8px) rotate(.6deg); } }
@keyframes fragment-float { from { transform: translateY(-9px) rotate(-8deg); } to { transform: translateY(17px) rotate(12deg); } }
@keyframes slab-drift { from { transform: skew(-24deg) translateX(-13px); } to { transform: skew(-24deg) translateX(20px); } }
@keyframes breathe { from { opacity: .6; transform: scale(.94); } to { opacity: 1; transform: scale(1.08); } }
@keyframes orbit-one { from { transform: translate(-50%, -50%) rotateX(54deg) rotate(-24deg); } to { transform: translate(-50%, -50%) rotateX(54deg) rotate(336deg); } }
@keyframes orbit-two { from { transform: translate(-50%, -50%) rotateY(62deg) rotate(30deg); } to { transform: translate(-50%, -50%) rotateY(62deg) rotate(390deg); } }
@media (min-width: 1700px) { .brand { width: min(75vw, 1130px); } }
@media (max-width: 700px) {
  .brand { width: 96vw; }
  .orbit-one { width: 135vw; }
  .orbit-two { width: 116vw; }
  .slab { width: 31vw; }
  .slab-one { left: -36vw; }
  .slab-two { right: -36vw; }
  .fragment-one { left: 10%; top: 22%; width: 30px; height: 43px; }
  .fragment-two { right: 11%; top: 18%; width: 47px; height: 28px; }
  .fragment-three { left: 14%; bottom: 20%; }
  .fragment-four { right: 10%; bottom: 22%; width: 53px; height: 44px; }
  .fragment-five { top: 15%; }
  .motion-toggle { right: 18px; bottom: 18px; }
}
@media (max-height: 600px) and (min-width: 701px) { .brand { width: min(64vw, 108svh); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-depth] { transform: none !important; }
  .motion-toggle { display: none; }
}