.site-opening{display:none;position:fixed;inset:0;z-index:1000;background:#0b0b0b;color:#efefeb;padding:clamp(24px,4.1vw,70px);outline:none;isolation:isolate}
.opening-pending .site-opening{display:grid;grid-template-rows:auto 1fr auto}
.opening-running{overflow:hidden}
.opening-running body{padding-right:var(--opening-scrollbar,0px)}
#portfolio-main:focus{outline:none}
.opening-topline,.opening-bottomline{display:flex;justify-content:space-between;align-items:center;gap:24px;font-family:var(--mono,monospace);font-size:9px;letter-spacing:.1em;line-height:1.65;color:#85897d}
.opening-topline{align-items:flex-start}
.opening-dot{width:6px;height:6px;margin-top:4px;background:#c3f550;border-radius:50%}
.opening-center{align-self:center;justify-self:center;width:min(100%,1000px);text-align:center;transform:translateY(-2vh)}
.opening-lockup{display:flex;justify-content:center;align-items:center;gap:clamp(20px,3.2vw,56px)}
.opening-monogram{display:flex;font-family:var(--opening-font,Arial,sans-serif);font-size:min(20vw,calc(90vw / var(--opening-characters,3)),280px);font-weight:1000;letter-spacing:-.085em;line-height:1.08;padding-right:.085em}
.opening-letter{display:block;overflow:hidden;padding:0 .015em;margin:0 -.015em}
.opening-letter>span{display:block;transform:translateY(112%)}
.opening-star{display:block;flex:none;width:clamp(48px,8vw,112px);height:clamp(48px,8vw,112px);color:#c3f550;opacity:0}
.opening-star svg{display:block;width:100%;height:100%;transform-origin:50% 50%}
.opening-rule{height:1px;width:clamp(140px,22vw,320px);margin:clamp(26px,4vh,48px) auto 22px;background:#c3f550;transform:scaleX(0);transform-origin:left}
.opening-caption{font-family:var(--mono,monospace);font-size:clamp(8px,.65vw,11px);letter-spacing:.18em;color:#a1a697;margin:0;opacity:0}
.opening-skip{display:flex;align-items:center;gap:24px;background:transparent;border:0;min-height:44px;padding:10px 0 10px 16px;font:inherit;letter-spacing:.02em;color:#bfc3b5;cursor:pointer}
.opening-skip>span{color:#c3f550;font-size:18px}
.opening-skip:hover{color:#c3f550}.opening-skip:focus-visible{outline:1px solid #c3f550;outline-offset:5px}
.opening-running .site-opening{animation:opening-curtain .7s 1.7s cubic-bezier(.76,0,.24,1) both}
.opening-running .opening-letter>span{animation:opening-letter-in .8s calc(.12s + var(--letter)*.1s) cubic-bezier(.16,1,.3,1) both}
.opening-running .opening-star{animation:opening-star-in .2s .12s ease-out both}
.opening-running .opening-star svg{animation:opening-star-turn 1.2s .12s cubic-bezier(.25,.65,.25,1) both}
.opening-running .opening-rule{animation:opening-rule-in 1s .38s cubic-bezier(.22,1,.36,1) both}
.opening-running .opening-caption{animation:opening-caption-in .55s .65s ease both}
.opening-running .opening-center{animation:opening-lockup-out .55s 1.52s cubic-bezier(.4,0,.2,1) both}
.opening-running .site-header,.opening-running .hero{animation:opening-page-in .75s 1.65s cubic-bezier(.22,1,.36,1) both}
@keyframes opening-letter-in{from{transform:translateY(112%) rotate(5deg)}to{transform:translateY(0) rotate(0)}}
@keyframes opening-star-in{from{opacity:0}to{opacity:1}}
@keyframes opening-star-turn{from{transform:rotate(-360deg)}to{transform:rotate(0)}}
@keyframes opening-rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes opening-caption-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@keyframes opening-lockup-out{from{opacity:1;transform:translateY(-2vh)}to{opacity:0;transform:translateY(-5vh)}}
@keyframes opening-curtain{from{clip-path:inset(0 0 0 0)}to{clip-path:inset(0 0 100% 0)}}
@keyframes opening-page-in{from{opacity:.2;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.site-opening{padding:24px 6vw}.opening-topline,.opening-bottomline{font-size:8px}.opening-monogram{font-size:min(29vw,calc(84vw / var(--opening-characters,3)))}.opening-lockup{gap:18px}.opening-star{width:48px;height:48px}.opening-rule{width:160px;margin-top:26px}.opening-caption{font-size:7px;letter-spacing:.12em}.opening-center{transform:translateY(-4vh)}.opening-skip{gap:14px}}
@media(prefers-reduced-motion:reduce){.opening-pending .site-opening{display:none}.opening-running .site-header,.opening-running .hero{animation:none}}