/* kurtz portfolio: "liquid glass" wall + tap-to-burst style view.
   Light by design: panes show posters; only a few loop videos play at once (app.js scheduler);
   no blur/filter on panes; scroll dimming = one overlay's opacity; parallax = transform on 3 layers. */

body.dark{background:#07070a;color:#f2f2ef}
body.dark a{color:#fff;text-decoration-color:var(--y)}
body.dark .top{background:rgba(10,10,13,.82);border-bottom-color:rgba(255,255,255,.08)}
body.dark .nav a{color:rgba(255,255,255,.72)}
body.dark .nav a[aria-current],body.dark .nav a:hover{color:#fff}
body.dark .foot{background:#0c0c10;border-top:1px solid rgba(255,255,255,.1)}
body.dark .foot-nav a,body.dark .muted{color:rgba(255,255,255,.6)}
.btn-y{background:var(--y);border-color:var(--y);color:#111!important}
.btn-y:hover{background:#fff;border-color:#fff}
.btn-ghost{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.35);color:#fff!important}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.lg-eyebrow{font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--y);margin:0}

/* ---------- glass material (shared) ---------- */
.glass{position:relative;border-radius:var(--rad,28px);overflow:hidden;
  box-shadow:0 18px 40px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.28)}
.gt::before,.vc::before,.sv-card::before{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;
  padding:6%;
  background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,.08) 30%,rgba(255,255,255,0) 50%,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.gt::after,.vc::after,.sv-card::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:2;pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.30) 0%,rgba(255,255,255,.06) 18%,transparent 36%),
             radial-gradient(120% 50% at 50% 112%,rgba(255,255,255,.12),transparent 60%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.4),inset 1.5px 1.5px 0 rgba(255,255,255,.55)}

/* ---------- hero wall ---------- */
.lg-hero{position:relative;height:240vh;margin-top:-60px}
.lg-stage{position:sticky;top:0;height:100vh;overflow:hidden;contain:strict}
.lg-glow{position:absolute;inset:0;
  background:radial-gradient(40% 32% at 30% 35%,rgba(255,219,0,.22),transparent 72%),
             radial-gradient(32% 30% at 72% 68%,rgba(255,120,40,.18),transparent 72%),#07070a}
.lg-wall,.ly{position:absolute;inset:0}
.ly{will-change:transform}
.lg-dim{position:absolute;inset:0;background:#07070a;opacity:0;pointer-events:none}

.gt{--u:min(1vw,1.75vh);position:absolute;left:var(--x);top:var(--y);width:calc(var(--w) * var(--u));aspect-ratio:9/16;
  padding:0;border:0;background:#111;cursor:pointer;
  border-radius:calc(var(--w) * var(--u) * .17);overflow:hidden;
  transform:translate(-50%,-50%) rotate(var(--r));
  box-shadow:0 calc(var(--w) * var(--u) * .22) calc(var(--w) * var(--u) * .45) rgba(0,0,0,.55);
  animation:lg-float 9s ease-in-out infinite;animation-delay:calc(var(--i) * -.8s);
  transition:box-shadow .2s}
.gt:hover,.gt:focus-visible{box-shadow:0 0 0 3px var(--y),0 20px 50px rgba(0,0,0,.6);outline:none}
.gt img,.gt video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.gt video{opacity:0;transition:opacity .35s}
.gt video.on{opacity:1}
.ly3 .gt{opacity:.8}
.gt-label{position:absolute;left:8%;right:8%;bottom:7%;z-index:3;font-size:clamp(.58rem,.9vw,.78rem);font-weight:700;
  color:#fff;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:3px 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
@keyframes lg-float{0%,100%{translate:0 0}50%{translate:0 -10px}}

.lg-title{position:absolute;left:50%;top:50%;z-index:5;width:min(540px,86vw);text-align:center;
  padding:30px 30px 26px;border-radius:32px;transform:translate(-50%,-50%);
  background:linear-gradient(160deg,rgba(40,40,46,.72),rgba(14,14,18,.6));
  border:1px solid rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 30px 80px rgba(0,0,0,.5);pointer-events:none}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  @media (pointer:fine){
    .lg-title{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04));
      -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6)}
  }
}
.lg-title h1{font-size:clamp(1.8rem,4.2vw,3.2rem);margin:.15em 0 .35em;color:#fff}
.lg-sub{color:rgba(255,255,255,.78);margin:0}
.lg-hint{position:absolute;left:50%;bottom:26px;z-index:5;margin-left:-13px;width:26px;height:42px;border:2px solid rgba(255,255,255,.6);border-radius:14px}
.lg-hint span{position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:2px;background:#fff;animation:lg-hint 1.6s ease-in-out infinite}
@keyframes lg-hint{0%{transform:translateY(0);opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ---------- static list per style ---------- */
.lg-works{position:relative;z-index:3;margin-top:-90vh;padding-top:10vh;padding-bottom:40px}
.lg-h2{font-size:clamp(1.6rem,3.4vw,2.5rem);text-align:center;margin-bottom:36px;color:#fff}
.cat{margin:0 0 56px}
.cat-head{display:block;width:100%;text-align:left;background:none;border:0;color:#fff;padding:0;cursor:pointer;font:inherit}
.cat-head h2{color:#fff;margin:.2em 0 .2em}
.cat-head p{color:rgba(255,255,255,.7);max-width:60ch}
.cat-head:hover h2{text-decoration:underline;text-decoration-color:var(--y);text-underline-offset:6px}
.vc-row{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(130px,16vw,170px);gap:14px;overflow-x:auto;padding:8px 2px 14px;scroll-snap-type:x mandatory}
.vc{position:relative;display:block;aspect-ratio:9/16;border-radius:22px;overflow:hidden;background:#111;scroll-snap-align:start;text-decoration:none;
  box-shadow:0 14px 30px rgba(0,0,0,.45)}
.vc img{width:100%;height:100%;object-fit:cover}
.vc span{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:28px 10px 10px;font-size:.78rem;font-weight:600;color:#fff;line-height:1.3;
  background:linear-gradient(transparent,rgba(0,0,0,.8))}
.lg-more{text-align:center;color:rgba(255,255,255,.75)}

/* ---------- style view: tap a pane -> burst into many ---------- */
.sv{position:fixed;inset:0;z-index:60;overflow-y:auto;overscroll-behavior:contain;background:rgba(6,6,9,.94);padding:84px 16px 40px}
.sv[hidden],.pl[hidden]{display:none}
.sv-head{max-width:1080px;margin:0 auto 22px;display:flex;gap:16px;align-items:flex-start;justify-content:space-between}
.sv-head h2{color:#fff;margin:.2em 0}
.sv-head p{color:rgba(255,255,255,.72);margin:0;max-width:60ch}
.sv-x{flex:none;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.1);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer}
.sv-grid{max-width:1080px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:18px}
.sv-card{position:relative;aspect-ratio:9/16;border-radius:24px;overflow:hidden;background:#111;border:0;padding:0;cursor:pointer;
  box-shadow:0 18px 40px rgba(0,0,0,.55);transform-origin:center}
.sv-card img,.sv-card video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sv-card span{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:30px 10px 10px;font-size:.8rem;font-weight:600;color:#fff;text-align:left;
  background:linear-gradient(transparent,rgba(0,0,0,.82))}
.sv-card:hover,.sv-card:focus-visible{outline:none;box-shadow:0 0 0 3px var(--y),0 18px 40px rgba(0,0,0,.55)}

/* ---------- player ---------- */
.pl{position:fixed;inset:0;z-index:70;background:rgba(4,4,6,.9);display:grid;place-items:center;padding:16px}
.pl-box{display:grid;grid-template-columns:minmax(220px,360px) minmax(0,320px);gap:28px;align-items:center}
.glass-frame{padding:10px;border-radius:34px;background:linear-gradient(160deg,rgba(255,255,255,.16),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 40px 90px rgba(0,0,0,.6)}
.glass-frame video{display:block;width:100%;max-height:78vh;aspect-ratio:9/16;border-radius:25px;background:#000}
.pl-txt h3{color:#fff;font-size:1.3rem;margin:.3em 0 .6em}
@media (max-width:760px){
  .gt{--u:2.6vw}
  .ly3{display:none}
  .lg-title{padding:22px 18px}
  .pl-box{grid-template-columns:1fr;gap:12px;max-width:340px}
  .glass-frame video{max-height:62vh}
  .sv-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media (prefers-reduced-motion:reduce){.gt{animation:none}.lg-hint span{animation:none}}
.vc-row{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.vc-row::-webkit-scrollbar{height:6px}.vc-row::-webkit-scrollbar-track{background:transparent}
.vc-row::-webkit-scrollbar-thumb{background:rgba(255,255,255,.25);border-radius:3px}