/* Independent of page CSS so the home and inner pages share the same entrance. */
:root { --portfolio-loader-ready:1 }
html.portfolio-loading { overflow:hidden }
.portfolio-loader {
  --loader-bg:#090909; --loader-ink:#f6f6f6; --loader-muted:#92978c;
  --loader-line:#242820; --loader-accent:#b8ff38;
  position:fixed; inset:0; z-index:100000; isolation:isolate;
  color:var(--loader-ink); font-family:Portfolio,Arial,sans-serif;
  cursor:auto; overflow:hidden;
}
[data-theme=light] .portfolio-loader {
  --loader-bg:#fafafa; --loader-ink:#101010; --loader-muted:#64685e;
  --loader-line:#e2e5dc; --loader-accent:#477400;
}
.portfolio-loader *, .portfolio-loader *::before { box-sizing:border-box }
.portfolio-loader,.portfolio-loader * { cursor:auto!important }
.portfolio-loader .loader-skip { cursor:pointer!important }
.loader-grid { position:absolute; inset:0; display:grid; grid-template-columns:repeat(10,1fr); grid-template-rows:repeat(8,1fr) }
.loader-tile { background:var(--loader-bg); outline:1px solid var(--loader-line); transition:transform .65s cubic-bezier(.65,0,.35,1),opacity .65s,border-radius .65s; transition-delay:var(--tile-delay) }
.loader-glow { position:absolute; inset:0; pointer-events:none; background:radial-gradient(ellipse 420px 340px at var(--glow-x,50%) var(--glow-y,48%),rgba(184,255,56,.10),transparent 75%); transition:opacity .25s }
.loader-top,.loader-bottom { position:absolute; left:clamp(22px,5vw,88px); right:clamp(22px,5vw,88px); display:flex; justify-content:space-between; align-items:center; gap:20px }
.loader-top { top:max(28px,env(safe-area-inset-top)) }
.loader-brand { font-size:34px; font-weight:800; letter-spacing:-3px; line-height:1 }
.loader-brand span { color:var(--loader-accent) }
.loader-caption,.loader-bottom,.loader-eyebrow,.loader-status { font:11px/1.6 Code,monospace; letter-spacing:.14em; text-transform:uppercase }
.loader-caption { color:var(--loader-muted) }
.loader-content { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:100px 24px; text-align:center; pointer-events:none }
.loader-eyebrow { color:var(--loader-muted); margin:0 0 24px }
.loader-heading { margin:0; font-size:clamp(44px,8.2vw,120px); font-weight:800; line-height:.96; letter-spacing:-.055em }
.loader-heading span { display:block; color:var(--loader-accent) }
.loader-track { width:min(240px,65vw); height:2px; background:var(--loader-line); overflow:hidden; margin-top:36px }
.loader-track::before { content:''; display:block; width:100%; height:100%; background:var(--loader-accent); transform:translateX(-100%); animation:loader-sweep 1.4s ease-in-out infinite }
.loader-status { margin:16px 0 0; color:var(--loader-muted); letter-spacing:.08em }
.loader-bottom { bottom:max(28px,env(safe-area-inset-bottom)); color:var(--loader-muted) }
.loader-skip { font:inherit; letter-spacing:.08em; color:var(--loader-ink); background:transparent; border:1px solid var(--loader-line); border-radius:40px; padding:12px 18px; cursor:pointer; transition:border-color .2s,color .2s,background .2s }
.loader-skip:hover,.loader-skip:focus-visible { outline:2px solid var(--loader-accent); outline-offset:4px; color:var(--loader-accent) }
.portfolio-loader.is-ready .loader-track::before { animation:none; transform:none }
.portfolio-loader.is-ready .loader-status { color:var(--loader-accent) }
.loader-top,.loader-bottom,.loader-content { transition:opacity .25s,transform .4s }
.portfolio-loader.is-leaving .loader-top,.portfolio-loader.is-leaving .loader-bottom,.portfolio-loader.is-leaving .loader-content { opacity:0; transform:translateY(-12px); pointer-events:none }
.portfolio-loader.is-leaving .loader-glow { opacity:0 }
.portfolio-loader.is-leaving .loader-tile { transform:scale(0); opacity:0; border-radius:35% }
@keyframes loader-sweep { to { transform:translateX(100%) } }
@media(max-width:600px) {
  .loader-caption { max-width:150px; text-align:right; font-size:9px }
  .loader-eyebrow { font-size:9px; letter-spacing:.1em }
  .loader-bottom { font-size:9px; gap:10px }
  .loader-bottom>span { max-width:160px }
  .loader-skip { white-space:nowrap; padding:12px }
}
@media(max-height:450px) { .loader-heading { font-size:42px } .loader-eyebrow { margin-bottom:12px } .loader-track { margin-top:16px } .loader-content { padding:65px 24px } }
@media(prefers-reduced-motion:reduce) { .portfolio-loader *, .portfolio-loader *::before { animation:none!important; transition:none!important } }