/* Clear, convex optics. No opaque product gradients or broad frosted highlight. */
html .glass,
html[data-lighting] .glass,
html[data-lighting] .delta .primary-action,
html[data-lighting] .donuts .primary-action {
  --liquid-tint: 225, 233, 235;
  --liquid-fill: .055;
  background: linear-gradient(155deg, rgba(255,255,255,.1), transparent 38%, rgba(var(--liquid-tint),var(--liquid-fill)));
  -webkit-backdrop-filter: blur(.8px) saturate(1.12);
  backdrop-filter: blur(.8px) saturate(1.12);
  border-color: rgba(255,255,255,.48);
  transform: none;
  transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease;
  box-shadow: inset var(--inset-x,1px) var(--inset-y,1px) 1px var(--edge), inset var(--inset-dark-x,-1px) var(--inset-dark-y,-1px) 2px var(--rim), var(--shadow-near-x,3px) var(--shadow-near-y,4px) 8px -6px var(--shadow), var(--shadow-x,6px) var(--shadow-y,10px) 15px -10px var(--shadow);
}
html .primary-action,
html[data-lighting] .primary-action,
html[data-lighting] .delta .primary-action,
html[data-lighting] .donuts .primary-action { --liquid-tint: var(--tint); --liquid-fill: .23; color: var(--ink); }
html .donuts .primary-action { --tint: 194,159,231; }
/* Project buttons share clear optics; the watercolor supplies brand colour. */
html .personal-section .personal-project .glass,
html .intro .profile-actions .glass,
html :where(.projects .project) .glass,
html[data-lighting] :where(.projects .project) .glass {
  --liquid-tint: 255,255,255;
  --liquid-fill: 0;
  --edge: rgba(255,255,255,.72);
  --rim: rgba(0,0,0,.16);
  --shadow: rgba(0,0,0,.16);
  --shine: rgba(255,255,255,.5);
  background: transparent;
}
/* Removing the ancestor backdrop filter lets the separate lens sample the page. */
html .glass.liquid-refracting { -webkit-backdrop-filter: none; backdrop-filter: none; }
.liquid-lens { position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; }
.liquid-filter-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
html .glass::before,
html[data-lighting] .glass::before,
html[data-lighting] .delta .primary-action::before {
  inset: 0;
  padding: 1.2px;
  filter: none;
  opacity: .92;
  background: radial-gradient(ellipse 65% 85% at var(--sun-x,15%) var(--sun-y,0%), rgba(255,255,255,.96), transparent 72%), conic-gradient(from 140deg, rgba(var(--liquid-tint),.32) 0deg, transparent 72deg, rgba(255,255,255,.65) 137deg, transparent 205deg, rgba(255,255,255,.6) 295deg, rgba(var(--liquid-tint),.32) 360deg);
}
/* A narrow moving reflection crosses the surface without moving its contents. */
html .glass::after,
html[data-lighting] .glass::after,
html[data-lighting] .primary-action::after {
  inset: 2px;
  z-index: 0;
  transform: none;
  filter: none;
  opacity: var(--glint-opacity,0);
  background: radial-gradient(ellipse 24px 38px at var(--px,50%) var(--py,50%), rgba(255,255,255,.28), rgba(255,255,255,.08) 45%, transparent 75%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.18);
  transition: opacity .2s ease;
}
@media (hover: hover) and (pointer: fine) {
  html .glass:hover,
  html[data-lighting] .glass:hover,
  html[data-lighting] .primary-action:hover {
    --glint-opacity: 1;
    transform: none;
    box-shadow: inset var(--inset-x,1px) var(--inset-y,1px) 1px var(--edge), inset var(--inset-dark-x,-1px) var(--inset-dark-y,-1px) 2px var(--rim), var(--shadow-near-x,3px) var(--shadow-near-y,4px) 8px -6px var(--shadow), var(--shadow-x,6px) var(--shadow-y,10px) 15px -9px var(--shadow);
  }
  html .glass:hover::before,
  html[data-lighting] .glass:hover::before { background: radial-gradient(ellipse 75px 60px at var(--px,50%) var(--py,50%), white, transparent 80%), radial-gradient(ellipse at var(--sun-x,15%) var(--sun-y,0%), var(--edge), transparent 70%), conic-gradient(from 140deg, transparent 0deg, rgba(var(--liquid-tint),.45) 60deg, transparent 108deg, rgba(255,255,255,.6) 198deg, transparent 288deg, transparent 360deg); }
}
html .glass:active,
html .glass.is-pressed,
html[data-lighting] .glass:active,
html[data-lighting] .glass.is-pressed { transform: translateY(1px) scale(.987); --glint-opacity: .55; transition: transform .09s ease-out, box-shadow .09s; }
html .glass.is-releasing { animation: liquid-release .32s cubic-bezier(.2,.8,.2,1); }
@keyframes liquid-release { 0% { transform: translateY(1px) scale(.987); } 65% { transform: scale(1.003); } 100% { transform: none; } }
/* Accelerated local previews sample fresh shadows each frame, without CSS lag. */
html[data-lighting-preview="cycle"] .glass,
html[data-lighting-preview="cycle"] .delta .primary-action,
html[data-lighting-preview="cycle"] .donuts .primary-action { transition: transform .3s cubic-bezier(.2,.8,.2,1); }
html[data-lighting-preview="cycle"] .glass:active,
html[data-lighting-preview="cycle"] .glass.is-pressed,
html[data-lighting-preview="cycle"] .delta .primary-action:active,
html[data-lighting-preview="cycle"] .delta .primary-action.is-pressed,
html[data-lighting-preview="cycle"] .donuts .primary-action:active,
html[data-lighting-preview="cycle"] .donuts .primary-action.is-pressed { transition: transform .09s ease-out; }
/* Use the shared project surface, retaining the inlaid Atmos watermark. */
html .atmosphere {
  --project-watermark:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 280 180'%3E%3Cdefs%3E%3Cg id='etch' fill='none' stroke-width='1.6' stroke-linecap='round' shape-rendering='geometricPrecision'%3E%3Cellipse cx='198' cy='87' rx='92' ry='30' transform='rotate(-34 198 87)'/%3E%3Cellipse cx='198' cy='104' rx='92' ry='30' transform='rotate(-34 198 104)'/%3E%3Cellipse cx='198' cy='121' rx='92' ry='30' transform='rotate(-34 198 121)'/%3E%3C/g%3E%3C/defs%3E%3Cuse href='%23etch' stroke='white' stroke-opacity='.48' transform='translate(0 .65)'/%3E%3Cuse href='%23etch' stroke='%23202b33' stroke-opacity='.17'/%3E%3C/svg%3E");
}
html .delta { --project-watermark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2062%2038%22%3E%3Cdefs%3E%3Cg%20id%3D%22etch%22%20fill%3D%22none%22%20stroke-width%3D%22.55%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M18.1%205.6a1%201%200%200%201%201.8%200L34%2031a1%201%200%200%201-.9%201.5H4.9A1%201%200%200%201%204%2031Z%22%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cuse%20href%3D%22%23etch%22%20x%3D%2224%22%20y%3D%22.25%22%20stroke%3D%22white%22%20stroke-opacity%3D%22.48%22%2F%3E%3Cuse%20href%3D%22%23etch%22%20x%3D%2224%22%20stroke%3D%22%23202b33%22%20stroke-opacity%3D%22.17%22%2F%3E%3C%2Fsvg%3E"); }
html .donuts { --project-watermark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2062%2038%22%3E%3Cdefs%3E%3Cg%20id%3D%22etch%22%20fill%3D%22none%22%20stroke-width%3D%22.55%22%20stroke-linecap%3D%22round%22%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2219%22%20r%3D%2215%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2219%22%20r%3D%228.5%22%2F%3E%3Ccircle%20cx%3D%2219%22%20cy%3D%2219%22%20r%3D%222%22%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cuse%20href%3D%22%23etch%22%20x%3D%2224%22%20y%3D%22.25%22%20stroke%3D%22white%22%20stroke-opacity%3D%22.48%22%2F%3E%3Cuse%20href%3D%22%23etch%22%20x%3D%2224%22%20stroke%3D%22%23202b33%22%20stroke-opacity%3D%22.17%22%2F%3E%3C%2Fsvg%3E"); }
html .airy { --project-watermark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2062%2038%22%3E%3Cdefs%3E%3Cg%20id%3D%22etch%22%20fill%3D%22none%22%20stroke-width%3D%22.55%22%20stroke-linecap%3D%22round%22%3E%3Cpath%20d%3D%22M19%203v32M3%2019h32M7.7%207.7l22.6%2022.6M7.7%2030.3%2030.3%207.7%22%2F%3E%3C%2Fg%3E%3C%2Fdefs%3E%3Cuse%20href%3D%22%23etch%22%20x%3D%2224%22%20y%3D%22.25%22%20stroke%3D%22white%22%20stroke-opacity%3D%22.48%22%2F%3E%3Cuse%20href%3D%22%23etch%22%20x%3D%2224%22%20stroke%3D%22%23202b33%22%20stroke-opacity%3D%22.17%22%2F%3E%3C%2Fsvg%3E"); }
html :where(.projects) .project .glass,
html[data-lighting] :where(.projects) .project .glass {
  border-radius: 999px;
  border-color: rgba(255,255,255,.2);
  background: transparent;
  color: #10283a;
  /* Paint the shadow after the lens, so it cannot enter the refracted backdrop. */
  box-shadow: none;
}
html .personal-section .personal-project .glass,
html .intro .profile-actions .glass { box-shadow: none; }
/* The shoulder has thickness; the centre has no painted surface. Opposing
   specular and dark arcs describe a convex edge even on a quiet background. */
html .personal-section .personal-project .glass::before,
html .intro .profile-actions .glass::before,
html :where(.projects) .project .glass::before,
html[data-lighting] :where(.projects) .project .glass::before {
  inset: 0;
  padding: 3px;
  opacity: 1;
  filter: none;
  background:
    radial-gradient(ellipse 42px 28px at var(--px,-100%) var(--py,-100%), rgba(255,255,255,.78), transparent 78%),
    radial-gradient(ellipse 30% 64% at var(--sun-x,20%) var(--sun-y,0%), rgba(255,255,255,.68), rgba(255,255,255,.1) 42%, transparent 76%);
}
html .personal-section .personal-project .glass::after,
html .intro .profile-actions .glass::after,
html :where(.projects) .project .glass::after,
html[data-lighting] :where(.projects) .project .glass::after {
  inset: 0;
  padding: 0;
  opacity: 1;
  background: none;
  -webkit-mask: none;
  mask: none;
  box-shadow: var(--shadow-near-x,3px) var(--shadow-near-y,4px) 12px -5px rgba(0,0,0,.12);
}
@media (prefers-reduced-motion: reduce) {
  html .glass::after { display: none; }
  html .glass, html .glass.is-pressed { transform: none !important; }
}
@media (prefers-contrast: more), (forced-colors: active) {
  html .glass, html[data-lighting] .glass,
  html[data-lighting] .delta .primary-action,
  html[data-lighting] .donuts .primary-action,
  html :where(.projects) .project .glass,
  html[data-lighting] :where(.projects) .project .glass { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .liquid-lens, html .glass::before, html .glass::after { display: none; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html .glass, html[data-lighting] .glass,
  html[data-lighting] .delta .primary-action,
  html[data-lighting] .donuts .primary-action,
  html :where(.projects) .project .glass,
  html[data-lighting] :where(.projects) .project .glass { background-color: var(--bg); }
}