/* ifyoudidnothing — PRISM preloader Drop-in, framework agnostic, no dependencies. Pairs with iydn-preloader.js. Fonts: Archivo 900 + JetBrains Mono (load them in , the preloader falls back to system mono). */ #iydn-pre { position: fixed; inset: 0; z-index: 99999; background: #050505; color: #fff; font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 34px; overflow: hidden; transition: opacity 260ms ease; } #iydn-pre[data-state="out"] { pointer-events: none; } /* layered field so it never reads as flat black */ #iydn-pre::before, #iydn-pre::after { content: ""; position: absolute; inset: 0; pointer-events: none; } #iydn-pre::before { background-image: radial-gradient(ellipse at 24% 14%, rgba(204,255,0,0.12) 0%, rgba(5,5,5,0) 58%), radial-gradient(ellipse at 82% 88%, rgba(255,90,42,0.08) 0%, rgba(5,5,5,0) 55%), linear-gradient(rgba(204,255,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(204,255,0,0.05) 1px, transparent 1px); background-size: auto, auto, 90px 90px, 90px 90px; } #iydn-pre::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E"); background-size: 180px 180px; opacity: 0.5; mix-blend-mode: soft-light; } /* corner chrome */ .iydn-pre__top, .iydn-pre__foot { position: absolute; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 22px 28px; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; white-space: nowrap; gap: 16px; } .iydn-pre__top { top: 0; color: #fff; } .iydn-pre__foot { bottom: 0; background: #ccff00; color: #000; padding: 14px 28px; transform: translateY(100%); animation: iydn-foot 420ms 900ms cubic-bezier(.2,.8,.2,1) forwards; } .iydn-pre__brand { display: flex; align-items: center; gap: 12px; white-space: nowrap; } .iydn-pre__foot span { white-space: nowrap; } .iydn-pre__brand i { width: 14px; height: 14px; background: #ccff00; display: inline-block; } .iydn-pre__live { color: #ccff00; animation: iydn-blink 1.4s steps(1, end) infinite; } /* mark: 4x4 grid, blocks snap in */ .iydn-pre__mark { position: relative; width: 188px; height: 188px; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 9px; } .iydn-pre__mark span { border: 2px solid rgba(204,255,0,0.14); } .iydn-pre__mark span[data-on] { border: 0; background: #ccff00; box-shadow: 0 0 26px rgba(204,255,0,0.3); transform: scale(0); animation: iydn-pop 380ms cubic-bezier(.2,1.5,.35,1) forwards; } .iydn-pre__mark span[data-on="hot"] { background: #ff5a2a; box-shadow: 0 0 26px rgba(255,90,42,0.35); } /* readout */ .iydn-pre__lines { position: relative; width: min(520px, 78vw); display: flex; flex-direction: column; gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: 0.1em; min-height: 96px; } .iydn-pre__line { color: #fff; white-space: nowrap; } .iydn-pre__line b { color: #ccff00; font-weight: 700; margin-right: 10px; } .iydn-pre__line i { color: #ccff00; font-style: normal; animation: iydn-blink 1s steps(1, end) infinite; } .iydn-pre__line:last-child { color: #ccff00; } /* progress */ .iydn-pre__bar { position: relative; width: min(520px, 78vw); height: 12px; border: 2px solid #ccff00; } .iydn-pre__bar > div { height: 100%; width: 0%; background: #ccff00; transition: width 220ms cubic-bezier(.3,.7,.2,1); } .iydn-pre__pct { position: relative; width: min(520px, 78vw); display: flex; justify-content: space-between; font-size: 12px; font-weight: 800; letter-spacing: 0.2em; color: #fff; margin-top: -22px; } /* exit: acid curtain wipes up, then the layer fades out */ #iydn-pre .iydn-pre__curtain { position: absolute; inset: 0; background: #ccff00; transform: translateY(100%); z-index: 3; } #iydn-pre[data-state="out"] .iydn-pre__curtain { animation: iydn-wipe 620ms cubic-bezier(.7,0,.3,1) forwards; } #iydn-pre[data-state="gone"] { opacity: 0; } @keyframes iydn-pop { to { transform: scale(1); } } @keyframes iydn-foot { to { transform: translateY(0); } } @keyframes iydn-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.2; } } @keyframes iydn-wipe { 0% { transform: translateY(100%); } 55% { transform: translateY(0); } 100% { transform: translateY(-100%); } } @media (max-width: 600px) { .iydn-pre__mark { width: 148px; height: 148px; gap: 7px; } .iydn-pre__lines { font-size: 13px; min-height: 84px; } } @media (prefers-reduced-motion: reduce) { #iydn-pre .iydn-pre__mark span[data-on], #iydn-pre .iydn-pre__foot { animation: none; transform: none; } #iydn-pre .iydn-pre__live, #iydn-pre .iydn-pre__line i { animation: none; } #iydn-pre[data-state="out"] .iydn-pre__curtain { animation: none; } }