@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital@0;1&family=Syne:wght@700;800&display=swap');

:root { background: #050505; color: #f7f2e9; }
* { box-sizing: border-box; }
html, body, .stage { width: 100%; min-height: 100%; margin: 0; overflow: hidden; }
body { background: #050505; }

.stage { height: 100svh; position: relative; isolation: isolate; background: #060606; }
.film {
  width: 100%; height: 100%; display: block; object-fit: cover; object-position: 50% 50%;
  filter: saturate(1.05) contrast(1.03); transform: scale(1.002);
}
.stage::after {
  content: ""; pointer-events: none; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(0,0,0,.13), transparent 16%, transparent 84%, rgba(0,0,0,.13)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.025) 0 1px, transparent 1px 4px);
  mix-blend-mode: overlay;
}

.loader {
  position: absolute; z-index: 3; inset: 0; overflow: hidden; display: grid; place-items: center;
  background: #090018; color: #fff; transition: opacity .75s cubic-bezier(.76,0,.24,1), visibility .75s;
}
.loader::before, .loader::after { content: ""; position: absolute; inset: -30%; mix-blend-mode: screen; }
.loader::before { background: conic-gradient(from 0deg, #ff244f, #ffe600, #4bffab, #18b6ff, #9d3dff, #ff21cd, #ff244f); filter: blur(30px) saturate(1.8); animation: cyclone 4s linear infinite; }
.loader::after { background: repeating-radial-gradient(circle at center, transparent 0 2.8vmin, #fff 2.9vmin 3.3vmin, transparent 3.4vmin 6vmin); opacity: .42; animation: breathe 1.35s ease-in-out infinite alternate; }
.loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }

.glow { position: absolute; border-radius: 50%; filter: blur(8px); mix-blend-mode: screen; }
.glow-one { width: 64vmax; height: 32vmax; background: #ff2ab9; animation: float-a 1.8s ease-in-out infinite alternate; }
.glow-two { width: 25vmax; height: 70vmax; background: #05f6ff; animation: float-b 1.3s ease-in-out infinite alternate; }
.rainbow { position: absolute; inset: -10vmax; background: repeating-conic-gradient(from 0deg, #ffda23 0deg 5deg, #ff32bf 5deg 10deg, #32fff4 10deg 15deg, #713cff 15deg 20deg); mix-blend-mode: overlay; filter: blur(1px); animation: spin 2.8s linear infinite; }
.petals { position: absolute; width: min(85vw, 85vh); aspect-ratio: 1; animation: spin 5s linear infinite reverse; }
.petals b { position: absolute; left: 46%; top: -5%; width: 8%; height: 54%; transform-origin: 50% 105%; border-radius: 100% 0; background: linear-gradient(#fff500, #ff0077 55%, #00f7ff); mix-blend-mode: screen; filter: blur(1px); }
.petals b:nth-child(2) { transform: rotate(30deg); }.petals b:nth-child(3) { transform: rotate(60deg); }.petals b:nth-child(4) { transform: rotate(90deg); }.petals b:nth-child(5) { transform: rotate(120deg); }.petals b:nth-child(6) { transform: rotate(150deg); }.petals b:nth-child(7) { transform: rotate(180deg); }.petals b:nth-child(8) { transform: rotate(210deg); }.petals b:nth-child(9) { transform: rotate(240deg); }.petals b:nth-child(10) { transform: rotate(270deg); }.petals b:nth-child(11) { transform: rotate(300deg); }.petals b:nth-child(12) { transform: rotate(330deg); }
.orbit { position: absolute; left: 50%; top: 50%; width: min(76vw, 76vh); aspect-ratio: 1; border: 3px dotted #fff; border-radius: 48% 52% 45% 55%; transform: translate(-50%, -50%); mix-blend-mode: difference; animation: wobble 1.1s linear infinite; }
.orbit-b { width: min(42vw, 42vh); border-style: dashed; border-color: #ffec00; border-width: 8px; animation: spin-around .65s linear infinite; }
.core { position: relative; z-index: 2; width: 20vmin; height: 20vmin; min-width: 118px; min-height: 118px; display: grid; place-content: center; border-radius: 50%; background: conic-gradient(#fff, #ffea00, #ff31bc, #18fff2, #fff); color: #100018; box-shadow: 0 0 0 8px #17002a, 0 0 40px 18px #fff; animation: core-jitter .16s steps(2) infinite; }
.core-mark { font: 800 clamp(55px, 9vmin, 115px)/.72 'Syne', sans-serif; text-shadow: 5px 0 #f80088, -5px 0 #00eaff; }
.sound { position: absolute; z-index: 2; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); border: 0; padding: 0; display: flex; align-items: center; gap: 8px; background: transparent; color: #fff; cursor: pointer; font: 11px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; opacity: 0; transform: translateY(8px); transition: opacity .5s .5s, transform .5s .5s; text-shadow: 0 1px 8px #000; }
.sound.is-visible { opacity: 1; transform: none; }.sound-icon { font: 24px/1 sans-serif; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-around { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes float-a { to { transform: translate(18%, -16%) scale(.72); } }
@keyframes float-b { to { transform: translate(-24%, 15%) scale(1.2); } }
@keyframes pulse { to { transform: scale(1.45); opacity: .65; } }
@keyframes core-jitter { 50% { transform: translate(2px, -2px) rotate(2deg); } }
@keyframes cyclone { to { transform: rotate(360deg) scale(1.18); } }
@keyframes breathe { to { transform: scale(1.4); opacity: .15; } }
@keyframes wobble { 25% { transform: translate(-50%, -50%) rotate(90deg) scale(1.1, .88); } 50% { transform: translate(-50%, -50%) rotate(180deg) scale(.84, 1.15); } 75% { transform: translate(-50%, -50%) rotate(270deg) scale(1.08, .9); } 100% { transform: translate(-50%, -50%) rotate(360deg); } }
@media (max-width: 600px) { .film { object-position: 55% center; } .orbit { width: 86vmin; } .orbit-b { width: 59vmin; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }