/* Shared glass controls for index, status pages and the contact dialog.
   Frosted glass over the shader. The rim is a gradient border whose light comes from the page accent (--tint)
   instead of white, so edges pick up the background colour. Blur is limited to these few small pills; the
   full-screen per-frame pixel readback was what killed frame rate, not this. */
@property --tint{syntax:'<color>';inherits:true;initial-value:#c62b43}
:root{--tint:#c62b43;--glass-ink:#f6f4f1;--glass-ease:cubic-bezier(.22,1,.36,1)}
.profile,.project,.home,.contact-close,.contact-submit{
 --rim:color-mix(in srgb,var(--tint) 70%,#ffffff40);
 position:relative;color:var(--glass-ink);-webkit-text-fill-color:var(--glass-ink);
 border:1px solid transparent;border-radius:999px;
 background:
  linear-gradient(165deg,color-mix(in srgb,var(--tint) 18%,#ffffff14),#ffffff06 55%,color-mix(in srgb,var(--tint) 12%,#ffffff0a)) padding-box,
  linear-gradient(150deg,var(--rim),color-mix(in srgb,var(--tint) 25%,#ffffff12) 35%,#ffffff08 55%,color-mix(in srgb,var(--tint) 45%,#ffffff1a)) border-box;
 box-shadow:inset 0 0 18px color-mix(in srgb,var(--tint) 20%,transparent),0 8px 24px #00000026;
 /* Keep rounded rims on their own composited layer so the browser smooths the curve instead of rasterizing a jagged edge. */
 -webkit-transform:translateZ(0);transform:translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;
 -webkit-background-clip:padding-box,border-box;background-clip:padding-box,border-box;
 /* Phones: no backdrop blur. Re-blurring an animating canvas under every pill each frame is their main cost. */
 @media(pointer:fine){backdrop-filter:blur(10px) saturate(115%) brightness(.82);-webkit-backdrop-filter:blur(10px) saturate(115%) brightness(.82)}
 @media(pointer:coarse){background:linear-gradient(165deg,color-mix(in srgb,var(--tint) 22%,#16151bcc),#0d0d10b3 60%,color-mix(in srgb,var(--tint) 16%,#16151bb3)) padding-box,linear-gradient(150deg,var(--rim),color-mix(in srgb,var(--tint) 25%,#ffffff12) 35%,#ffffff08 55%,color-mix(in srgb,var(--tint) 45%,#ffffff1a)) border-box}
 font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-weight:500;letter-spacing:-.02em;text-decoration:none;
 text-shadow:0 1px 3px #00000033;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
 cursor:pointer;translate:0 0;
 transition:translate .45s var(--glass-ease),scale .45s var(--glass-ease),box-shadow .45s var(--glass-ease),opacity .35s,--tint .6s ease
}
.profile::before{content:none}
.project::after,.home span{color:var(--glass-ink);opacity:.7;transition:transform .45s var(--glass-ease),opacity .35s}
@media(hover:hover){
 .profile:hover,.project:hover,.home:hover,.contact-close:hover,.contact-submit:hover{
  box-shadow:inset 0 0 24px color-mix(in srgb,var(--tint) 34%,transparent),0 12px 28px #00000030,0 0 22px color-mix(in srgb,var(--tint) 18%,transparent);
  translate:0 -2px;scale:1;filter:none}
 .project:hover::after,.home:hover span{opacity:1;transform:translate(2px,-2px)}
}
.profile:active,.project:active,.home:active,.contact-submit:active{scale:.97;translate:0 0;transition-duration:.15s}
.profile[aria-expanded=true]{box-shadow:inset 0 0 26px color-mix(in srgb,var(--tint) 40%,transparent),0 8px 24px #00000026}
.profile:focus-visible,.project:focus-visible,.home:focus-visible,.contact-close:focus-visible,.contact-submit:focus-visible,.footer a:focus-visible{outline:2px solid color-mix(in srgb,var(--tint) 60%,var(--glass-ink));outline-offset:5px}
/* Brief blur while a control slides: reads as motion blur, costs nothing at rest. */
@keyframes glass-glide{0%,100%{filter:none}35%{filter:blur(1.2px)}}
.gliding{animation:glass-glide .5s var(--glass-ease)}
/* Headline: faint cool-to-rose gradient and a tight haze via text-shadow (crisp; a filter blurred the glyphs). */
.dream{background:linear-gradient(104deg,#f5f1f8 0%,#ddd3e9 42%,#f0dce9 72%,#e8cfe0 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
 text-shadow:0 0 10px color-mix(in srgb,var(--tint) 18%,transparent),0 0 18px color-mix(in srgb,var(--tint) 20%,transparent),0 0 1px #ffffff30}
.dream.dim{background-image:linear-gradient(104deg,#d1cbd8 0%,#b6aec2 50%,#d0becd 100%)}
@media(prefers-reduced-motion:reduce){.profile,.project,.home,.contact-close,.contact-submit{transition:none;translate:0 0;scale:1}.gliding{animation:none}}
@media(prefers-reduced-transparency:reduce){.profile,.project,.home,.contact-close,.contact-submit{background:#25252b;backdrop-filter:none;-webkit-backdrop-filter:none}}
@media(prefers-contrast:more){.profile,.project,.home,.contact-close,.contact-submit{background:#141418;border-color:var(--glass-ink)}.dream{background:none;color:#fff;-webkit-text-fill-color:#fff;text-shadow:none}}
@supports not (backdrop-filter:blur(1px)){.profile,.project,.home,.contact-close,.contact-submit{background:#25252b}}