.site-intro{display:none}
html[data-intro=pending] .site-intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;overflow:hidden;background:#22231f;color:#f7f7f2;perspective:900px;cursor:pointer}
html[data-theme=dark][data-intro=pending] .site-intro{background:#f7f7f2;color:var(--paper)}
.intro-symbol{width:clamp(110px,14vw,190px);aspect-ratio:570/324;position:relative;transform-style:preserve-3d;will-change:transform;opacity:0}
.intro-symbol svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;fill:currentColor;transform:translateZ(var(--depth,0px))}
.intro-symbol svg:not(:last-child){filter:brightness(.68)}
.project-skeleton .image-wrap{background:var(--surface,#e8e8e4)}
.project-skeleton .image-wrap::after,.project-card[data-media=pending] .image-wrap::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,var(--paper) 50%,transparent 75%);opacity:.22;transform:translateX(-100%);animation:project-shimmer 1.7s ease-in-out infinite}
@keyframes project-shimmer{to{transform:translateX(100%)}}
.project-card[data-media] .image-wrap{background:var(--surface,#e8e8e4)}
.project-card[data-media] .image-wrap img{transition:opacity 480ms var(--ease),transform 600ms var(--ease)}
.project-card[data-media=pending] .image-wrap img{opacity:0}
.project-card[data-media=ready] .image-wrap img{opacity:1}
.project-card[data-media=error] .image-wrap img{visibility:hidden}
.project-card[data-media=error] .card-overlay{opacity:1;background:var(--surface);color:var(--ink)}
@media(prefers-reduced-motion:reduce){html[data-intro=pending] .site-intro{display:none}.project-skeleton .image-wrap::after,.project-card[data-media=pending] .image-wrap::after{animation:none}.project-card[data-media] .image-wrap img{transition:none}}

/* Full-bleed cuts; the last cover dissolves beneath the centered symbol. */
.intro-covers{position:absolute;inset:0;z-index:0;overflow:hidden}
.intro-covers img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;visibility:hidden}
.intro-covers img.is-current{visibility:visible}
.site-intro .intro-symbol{z-index:1}
.site-intro[data-phase=logo] .intro-symbol{opacity:1}