:root { --il-bg:#0c0d0d; --il-fg:#e9e5dc; --il-accent:#c7a96b; }
initials-loader { position:fixed; inset:0; z-index:9999; display:block; color:var(--il-fg); background:var(--il-bg); overflow:hidden; }
initials-loader[hidden] { display:none; }
.il-monogram { position:absolute; left:50%; top:49%; display:flex; align-items:center; justify-content:center; gap:.11em; font:700 clamp(12rem,31vw,32rem)/.72 Georgia,serif; letter-spacing:0; transform:translate(-50%,-50%); white-space:nowrap; }
.il-monogram span { display:inline-block; color:transparent; background:linear-gradient(to top,var(--il-fg) 0 var(--letter-fill,0%),#202020 var(--letter-fill,0%) 100%); background-clip:text; -webkit-background-clip:text; transform:translateY(115%); animation:il-rise 850ms cubic-bezier(.77,0,.18,1) forwards; animation-delay:calc(var(--i)*90ms); transition:background 80ms linear; }
.il-dot { position:absolute; left:50%; top:50%; width:14px; aspect-ratio:1; border-radius:50%; background:var(--il-fg); transform:translate(-50%,-50%) scale(0); animation:il-pop .65s .25s cubic-bezier(.2,.8,.2,1) forwards; }
.il-meta { position:absolute; left:4vw; bottom:6vh; color:#888; font:600 .68rem/1 sans-serif; letter-spacing:.18em; text-transform:uppercase; }
.il-meta::before { content:""; display:inline-block; width:6px; aspect-ratio:1; margin-right:.75rem; background:var(--il-accent); }
.il-count { position:absolute; right:5vw; bottom:4vh; display:flex; align-items:flex-start; font:500 clamp(6rem,13vw,12rem)/.72 Arial,sans-serif; letter-spacing:-.08em; }
.il-count sup { margin:.1em 0 0 .12em; color:var(--il-accent); font-size:.24em; letter-spacing:0; }
.il-wipe { position:absolute; inset:0; background:var(--il-fg); transform:translateY(101%); }
initials-loader[data-leaving] .il-wipe { animation:il-wipe 950ms cubic-bezier(.77,0,.18,1) forwards; }
initials-loader[data-leaving] .il-monogram, initials-loader[data-leaving] .il-dot, initials-loader[data-leaving] .il-meta, initials-loader[data-leaving] .il-count { opacity:0; transition:opacity .35s ease; }
@keyframes il-rise { to { transform:translateY(0); } }
@keyframes il-pop { to { transform:translate(-50%,-50%) scale(1); } }
@keyframes il-wipe { 0%{transform:translateY(101%)} 52%{transform:translateY(0)} 100%{transform:translateY(-101%)} }
@media (prefers-reduced-motion:reduce){ initials-loader{display:none} }