/* Figma 2028:5629 / 2057:5569 / 2077:4990 share one optical material.
   Glass: radius 60, refraction .8, depth 16, light -45deg/.8,
   dispersion .5, splay .42; multitone grain .2px / 8% / 50% density. */
:root {
  --glass-fill: rgba(20.84, 20.84, 20.84, 0.2);
  --glass-blur: 60px;
  --glass-depth: 16px;
  --glass-light-angle: 185deg;
  --glass-refraction: 0.8;
  --glass-dispersion: 0.5;
  --glass-splay: 0.42;
  --glass-grain-opacity: 0.08;
  --glass-transmission: 0.3;
  --glass-emission: transparent;
  --glass-emission-soft: transparent;
  --glass-hover: #303124;
}
:root[data-project] {
  --glass-hover: color-mix(in srgb, var(--accent) 16%, #151515);
  --glass-transmission: 0.16;
}
/* A broad offscreen key and a weaker opposing bounce illuminate the surface,
   not the page background. No source object, glow pool or visible spotlight. */
:root .site-toast,
:root .photo-dialog,
:root .photo-expand,
:root .glass-surface,
:root .glass-control,
:root .dock-menu,
:root .reach-menu,
:root .case-toc,
:root .case-section-toggle,
:root[data-project] .case-toc,
:root[data-project] .case-section-toggle,
:root a.portfolio-back,
:root a.portfolio-back:hover,
:root a.portfolio-back:focus-visible {
  isolation: isolate;
  border: 0;
  background:
    radial-gradient(ellipse at 50% 100%, var(--glass-emission-soft), transparent 80%),
    radial-gradient(ellipse at 0% 0%, #ffffff09, transparent 58%),
    radial-gradient(ellipse at 100% 100%, #ffffff05, transparent 55%), var(--glass-fill);
  box-shadow: 0 8px 24px #00000020;
  backdrop-filter: blur(var(--glass-blur)) brightness(var(--glass-transmission)) saturate(1.12);
  -webkit-backdrop-filter: blur(var(--glass-blur)) brightness(var(--glass-transmission))
    saturate(1.12);
}
:root .glass-surface::before,
:root .case-toc::before,
:root .case-section-toggle::before {
  display: none;
}
.glass-optics {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
/* Native rounded inset shadows keep one antialiased contour at fractional zoom.
   Soft opposing highlights suggest curved glass without an XOR mask seam. */
.glass-optics::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: transparent;
  box-shadow:
    inset 0 0 0 1px #ffffff08,
    inset 0.5px 1px 1.25px -0.5px #ffffff54,
    inset -0.5px -1px 1.5px -0.5px #ffffff24,
    inset 1px 0 2px -1px var(--glass-emission);
}
.glass-optics::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: url('assets/dock-grain.svg') 0 0/128px;
  opacity: var(--glass-grain-opacity);
  mix-blend-mode: soft-light;
}
/* Tab fills stay inside their 4px shell; standalone button fills cover the button. */
.dock-hover,
.menu-hover,
.case-nav-hover {
  background: var(--glass-hover) !important;
}
:root .reach-trigger.is-open {
  background: var(--glass-hover);
}
:root
  :where(button, [role='button'], .back-link, .button, .btn):not(.reach-trigger):not(
    .menu-reach
  )::after {
  background: var(--glass-hover);
}
.polaroid-stack::after {
  display: none !important;
}
.case-section-toggle::after {
  display: none !important;
}
.case-section-toggle .case-current-section {
  justify-content: flex-start;
  padding-inline: 24px;
}
/* Match the latest section picker and the 24px-radius overlay sheets. */
.case-toc {
  border-radius: 26px;
}
.dock-menu,
.reach-menu {
  border-radius: 24px;
}
@media (max-width: 900px) {
  .case-toc {
    border-radius: 24px;
  }
}
@supports not (backdrop-filter: blur(1px)) {
  :root .site-toast,
  :root .photo-dialog,
  :root .photo-expand,
  :root .glass-surface,
  :root .glass-control,
  :root .dock-menu,
  :root .reach-menu,
  :root .case-toc,
  :root .case-section-toggle,
  :root[data-project] .case-toc,
  :root[data-project] .case-section-toggle,
  :root a.portfolio-back,
  :root a.portfolio-back:hover,
  :root a.portfolio-back:focus-visible {
    background: #151515f2;
  }
}
@media (prefers-reduced-transparency: reduce) {
  :root .site-toast,
  :root .photo-dialog,
  :root .photo-expand,
  :root .glass-surface,
  :root .glass-control,
  :root .dock-menu,
  :root .reach-menu,
  :root .case-toc,
  :root .case-section-toggle,
  :root[data-project] .case-toc,
  :root[data-project] .case-section-toggle,
  :root a.portfolio-back,
  :root a.portfolio-back:hover,
  :root a.portfolio-back:focus-visible {
    background: #151515f2;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

.case-chevron {
  position: absolute;
  z-index: 1;
  right: 24px;
  width: 10.5416px;
  height: 6.24659px;
  background: currentColor;
  mask: url('assets/navigation/chevron-down.svg') center/contain no-repeat;
  -webkit-mask: url('assets/navigation/chevron-down.svg') center/contain no-repeat;
  transform: rotate(180deg);
  transition: transform var(--motion-menu) var(--motion-ease);
}
.case-section-toggle[aria-expanded='true'] .case-chevron {
  transform: rotate(0);
}
:root[data-project] a.portfolio-back::after {
  background: var(--glass-hover);
}
@media (prefers-reduced-motion: reduce) {
  .case-chevron {
    transition: none;
  }
}
/* Hover fills sit below labels and icons, never over them. */
:root
  :where(button, [role='button'], .back-link, .button, .btn):not(.reach-trigger):not(
    .menu-reach
  )::after,
:root a.portfolio-back::after {
  z-index: 0;
}
.nav-toggle > .nav-current,
.nav-toggle > .nav-indicator,
.glass-control > :not(.glass-optics) {
  z-index: 1;
}
.glass-label {
  position: relative;
  z-index: 1;
}
/* Standalone hover is an inset background, so it cannot cover foreground content. */
:root
  :is(
    .glass-control,
    .sound-toggle,
    .music-toggle,
    .portfolio-back,
    .nav-toggle,
    button.glass-surface
  )::after {
  display: none !important;
}
:root :is(.glass-control, .sound-toggle, .music-toggle, .portfolio-back, .nav-toggle) {
  transition:
    box-shadow var(--motion-settle) var(--motion-ease),
    color var(--motion-fast) var(--motion-ease),
    width var(--motion-settle) var(--motion-ease);
}
@media (hover: hover) {
  :root :is(.glass-control, .sound-toggle, .music-toggle, .portfolio-back, .nav-toggle):hover {
    box-shadow:
      inset 0 0 0 100vmax var(--glass-hover),
      0 8px 24px #00000020;
  }
}
:root
  :is(.glass-control, .sound-toggle, .music-toggle, .portfolio-back, .nav-toggle):focus-visible {
  box-shadow:
    inset 0 0 0 100vmax var(--glass-hover),
    0 8px 24px #00000020;
}
/* The live contour remains above exported disc artwork in every transport state. */
:root .sound-toggle > .glass-optics,
:root .music-toggle > .glass-optics {
  display: block;
  z-index: 2;
}
:root[data-project] .case-toc a {
  justify-content: flex-start;
  text-align: left;
  padding-inline: 20px;
}
@media (prefers-reduced-motion: reduce) {
  :root :is(.glass-control, .sound-toggle, .music-toggle, .portfolio-back, .nav-toggle) {
    transition: none;
  }
}
/* Moving hover passes beneath the selected pill, with all labels above both. */
.dock-navigation > .dock-hover,
.case-toc > .case-nav-hover {
  z-index: 1;
}
.dock-navigation > .dock-active,
.case-toc > .case-nav-active {
  z-index: 2;
}
.dock-navigation > a,
.dock-navigation > .reach-trigger,
.dock-navigation > .nav-toggle,
.case-toc > a {
  z-index: 3;
}

/* Match the base material selector so the back control can fill on hover. */
@media (hover: hover) {
  :root a.portfolio-back:hover {
    box-shadow:
      inset 0 0 0 100vmax var(--glass-hover),
      0 8px 24px #00000020;
  }
}
:root a.portfolio-back:focus-visible {
  box-shadow:
    inset 0 0 0 100vmax var(--glass-hover),
    0 8px 24px #00000020;
}

/* Decorative optics cannot inherit legacy header-dot dimensions or fills. */
:root .glass-optics {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: inherit;
  box-shadow: none;
}

:root a.portfolio-back::before {
  display: none;
}

/* A feathered, uneven occlusion keeps moving content quiet under controls. */
.bottom-vignette {
  position: fixed;
  inset: auto -8% -48px;
  height: clamp(160px, 24vh, 280px);
  z-index: 5;
  pointer-events: none;
  background:
    radial-gradient(ellipse 62% 78% at 32% 100%, #080908eb, #08090888 55%, transparent 100%),
    radial-gradient(ellipse 57% 88% at 83% 105%, #080908e6, #08090878 51%, transparent 100%),
    radial-gradient(ellipse 100% 34% at 50% 106%, #080908eb, transparent 100%);
}
@media (min-width: 901px) {
  :root[data-project] .bottom-vignette {
    display: none;
  }
}