/* ---------- sticky section bar ---------- */
.dock{position:fixed;top:12px;left:50%;z-index:50;display:flex;align-items:center;gap:6px;max-width:calc(100vw - 24px);padding:6px;border-radius:999px;
  background:rgba(237,238,243,.82);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border:1px solid rgba(23,20,43,.12);box-shadow:0 14px 34px -18px rgba(23,20,43,.45);
  transform:translate(-50%,-140%);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.dock.show{transform:translate(-50%,0)}
.dock.dark{background:rgba(28,26,46,.78);border-color:rgba(255,255,255,.12)}
.dock .me{font-family:var(--display);font-weight:500;font-size:11px;letter-spacing:.06em;text-decoration:none;padding:8px 12px;border-radius:999px;white-space:nowrap;color:var(--ink)}
.dock.dark .me{color:#fff}
.dock nav{position:relative;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.dock nav::-webkit-scrollbar{display:none}
.dock nav a{position:relative;z-index:1;text-decoration:none;font-size:15px;padding:8px 14px;border-radius:999px;white-space:nowrap;color:var(--ink);transition:color .25s}
.dock.dark nav a{color:#D8D5EA}
.dock nav a.on{color:var(--paper)}
.dock.dark nav a.on{color:var(--ink)}
.dock .blob{position:absolute;z-index:0;top:0;height:100%;border-radius:999px;background:var(--ink);transition:left .35s cubic-bezier(.2,.8,.2,1),width .35s cubic-bezier(.2,.8,.2,1),opacity .2s;opacity:0}
.dock.dark .blob{background:var(--paper)}
@media (max-width:640px){
  .dock{top:auto;bottom:12px;transform:translate(-50%,140%)}
  .dock.show{transform:translate(-50%,0)}
  .dock .me{display:none}
  .dock nav a{font-size:14px;padding:8px 12px}
}

/* ---------- hero tilt ---------- */
.hero-img.tilt{animation:none;transition:transform .25s ease-out;will-change:transform}
.hero-img .glare{position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 60% at var(--gx,30%) var(--gy,20%),rgba(255,255,255,.38),transparent 60%);mix-blend-mode:soft-light;opacity:0;transition:opacity .3s}
.hero-img.tilt .glare{opacity:1}

/* ---------- lightbox navigation ---------- */
dialog .lb-nav{position:fixed;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:999px;border:0;background:#fff;color:var(--ink);font-size:24px;cursor:pointer;display:grid;place-items:center;box-shadow:0 10px 30px -12px rgba(0,0,0,.6)}
dialog .lb-prev{left:16px}
dialog .lb-next{left:auto;right:16px}
dialog .lb-nav[hidden]{display:none}
dialog .lb-count{color:#A9A5C4;font-size:14px;margin-top:4px;text-align:center}
dialog img{touch-action:pan-y;transition:opacity .18s}
dialog img.fade{opacity:.25}
@media (max-width:640px){dialog .lb-nav{top:auto;bottom:18px;transform:none;width:46px;height:46px}}

/* ---------- draggable strips ---------- */
.case-media{position:relative}
.strip.grab{cursor:grab}
.strip.dragging{cursor:grabbing;scroll-snap-type:none}
.strip.dragging button{pointer-events:none}
.strip-nav{display:flex;justify-content:flex-end;gap:8px;margin-top:-4px}
.strip-nav button{width:40px;height:40px;border-radius:999px;border:1.5px solid currentColor;background:transparent;color:inherit;font-size:18px;cursor:pointer;opacity:.85}
.strip-nav button:disabled{opacity:.3;cursor:default}
@media (hover:none){.strip-nav{display:none}}

/* ---------- chrome title on hover ---------- */
.title h1{position:relative}
.title h1 .chrome{position:absolute;left:0;right:0;top:0;pointer-events:none;opacity:0;transition:opacity .35s ease;
  color:transparent;-webkit-text-stroke:1px rgba(23,20,43,.55);font-weight:700;
  background:linear-gradient(100deg,#221D3D 0%,#4C4580 12%,#B9A6F2 22%,#FFFFFF 27%,#8C7FD0 32%,#2E2852 42%,#E58FC8 52%,#FFE3F4 56%,#6FC3F0 64%,#1F1A38 76%,#9D90E0 86%,#FFFFFF 90%,#3A3363 100%);
  background-size:260% 100%;background-position:var(--mx,50%) 50%;-webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 2px 0 rgba(23,20,43,.35)) drop-shadow(0 18px 30px rgba(108,92,190,.25))}
.title h1 .chrome .p{font-weight:300}
.title h1.lit .chrome{opacity:1}
.title h1.lit > .base{opacity:0}
.title h1 > .base{transition:opacity .35s ease}