/* Prepainted cosmic layers: motion transforms textures, never redraws particles. */
.cosmos {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
  background: radial-gradient(ellipse at 85% 28%, #18295d66, transparent 48%),
    radial-gradient(ellipse at 12% 68%, #4018484d, transparent 42%);
}
body > main, body > .site-footer { position: relative; z-index: 1; }
.cosmos span, .cosmos::before, .cosmos::after { position: absolute; display: block; pointer-events: none; }
/* Keep translucent clouds behind solid celestial cores, including the ::after cloud. */
.cosmos::before, .cosmos::after { z-index: 0; }
.cosmos-stars, .cosmos-depth { z-index: 1; }
.cosmos-orbit { z-index: 2; }
.cosmos-galaxy, .cosmos-blackhole { z-index: 3; }
.cosmos-meteor { z-index: 4; }
.cosmos::before, .cosmos::after, .cosmos-stars, .cosmos-depth,
.cosmos-orbit, .cosmos-galaxy, .cosmos-blackhole {
  transition: translate .3s ease-out, rotate .35s ease-out;
}
.cosmos::before {
  content: ''; width: min(1000px, 100vw); height: min(720px, calc(var(--cosmos-vh, 1vh) * 85));
  left: -24%; top: 23%;
  /* Every cloud reaches zero alpha inside this sprite, even while it rotates. */
  background: radial-gradient(ellipse 44% 42% at 45% 45%, #5731915e 0%, #57319140 25%, #57319116 55%, #57319100 100%),
    radial-gradient(ellipse 29% 33% at 68% 62%, #217fa73d 0%, #217fa719 45%, #217fa700 100%);
  opacity: .6; animation: cosmos-nebula 14s ease-in-out infinite alternate;
  translate: calc(var(--cosmos-x, 0px) * .4) calc(var(--cosmos-y, 0px) * .4);
}
.cosmos::after {
  content: ''; width: min(1100px, 110vw); aspect-ratio: 1000 / 760;
  right: -12%; top: -7%; background: url('/assets/cosmos-aurora.svg?v=4') center / contain no-repeat;
  opacity: .48; animation: cosmos-aurora 19s ease-in-out infinite alternate;
  translate: calc(var(--cosmos-x, 0px) * .7) calc(var(--cosmos-y, 0px) * .7);
}
.cosmos-stars {
  inset: -100px; background: url('/assets/cosmos-stars.svg?v=3') repeat; background-size: 960px 720px;
  opacity: .82; animation: cosmos-stars-drift 28s linear infinite alternate;
  translate: calc(var(--cosmos-x, 0px) * .45) calc(var(--cosmos-y, 0px) * .45);
}
.cosmos-depth {
  inset: -100px; background: url('/assets/cosmos-stars.svg?v=3') repeat; background-size: 1440px 1080px;
  opacity: .3; animation: cosmos-drift 18s ease-in-out infinite alternate;
  translate: calc(var(--cosmos-x, 0px) * 1.2) calc(var(--cosmos-y, 0px) * 1.2);
}
/* A small, separate sprite scintillates without repainting the star field. */
.cosmos-depth::before {
  content: ''; position: absolute; left: 21%; top: 27%; width: 3px; height: 3px;
  border-radius: 50%; background: #dcf9ff;
  box-shadow: 190px 140px #b9eaff, 510px 90px #d7c4ff, 650px 350px #dbf9ff,
    45px 390px #d7c4ff, 860px 220px #b9eaff;
  opacity: .25; animation: cosmos-scintillate 3.8s ease-in-out infinite alternate;
}
.cosmos-orbit {
  width: min(68vw, 760px); aspect-ratio: 1; right: -13%; top: 6%;
  background: url('/assets/cosmos-orbit.svg') center / contain no-repeat;
  opacity: .36; animation: cosmos-orbit 44s linear infinite;
  translate: calc(var(--cosmos-x, 0px) * 1.1) calc(var(--cosmos-y, 0px) * 1.1);
}
/* Galaxy texture rotates independently from the mouse's parallax and tilt. */
.cosmos-galaxy {
  width: min(68vw, 860px); aspect-ratio: 1; left: clamp(-260px, -9vw, -70px); top: 29%;
  translate: calc(var(--cosmos-x, 0px) * 1.7) calc(var(--cosmos-y, 0px) * 1.7);
  rotate: var(--cosmos-tilt, 0deg);
  opacity: .91;
}
.cosmos-galaxy::before {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/cosmos-galaxy.svg') center / contain no-repeat;
  animation: cosmos-galaxy-spin 105s linear infinite;
}
.cosmos-blackhole {
  width: min(52vw, 650px); aspect-ratio: 720 / 520; right: clamp(-120px, -4vw, -28px); top: 10%;
  translate: calc(var(--cosmos-x, 0px) * 2) calc(var(--cosmos-y, 0px) * 2);
  rotate: var(--cosmos-tilt, 0deg);
  opacity: .95;
}
.cosmos-blackhole::before {
  content: ''; position: absolute; inset: 0;
  background: url('/assets/cosmos-blackhole.svg') center / contain no-repeat;
  animation: cosmos-blackhole-sway 11s ease-in-out infinite alternate;
}
.cosmos-blackhole::after {
  content: ''; position: absolute; inset: 13% 9%; border-radius: 50%;
  background: radial-gradient(ellipse, #0000 25%, #846ac910 50%, #63caff0d 57%, #0000 70%);
  animation: cosmos-horizon 5s ease-in-out infinite alternate;
}
.cosmos-meteor {
  width: 190px; height: 2px; left: 12%; top: 15%; opacity: 0;
  background: linear-gradient(90deg, transparent, #71d5ff88 65%, #e3f8ff);
  border-radius: 50%; animation: cosmos-meteor 8.5s linear infinite;
}
.cosmos-stars::after {
  content: ''; position: absolute; width: 125px; height: 1px; left: 55%; top: 28%;
  background: linear-gradient(90deg, transparent, #bd9bff88 65%, #f2e7ff);
  border-radius: 50%; opacity: 0; animation: cosmos-meteor-cross 12s linear -5s infinite;
}
@keyframes cosmos-nebula {
  from { transform: translate3d(-20px,20px,0) rotate(-8deg) scale(.96); opacity: .45; }
  to { transform: translate3d(12vw,calc(var(--cosmos-vh, 1vh) * -7),0) rotate(12deg) scale(1.12); opacity: .85; }
}
@keyframes cosmos-aurora {
  from { transform: translate3d(35px,-20px,0) rotate(-7deg) scale(.96); opacity: .35; }
  to { transform: translate3d(-9vw,calc(var(--cosmos-vh, 1vh) * 7),0) rotate(8deg) scale(1.07); opacity: .65; }
}
@keyframes cosmos-stars-drift { to { transform: translate3d(64px,40px,0); } }
@keyframes cosmos-drift { to { transform: translate3d(-56px,-38px,0); opacity: .6; } }
@keyframes cosmos-scintillate { to { opacity: .85; transform: scale(1.08); } }
@keyframes cosmos-orbit { to { transform: rotate(360deg); } }
@keyframes cosmos-galaxy-spin { to { transform: rotate(360deg); } }
@keyframes cosmos-blackhole-sway {
  from { transform: translate3d(0,-5px,0) rotate(-3deg) scale(.99); }
  to { transform: translate3d(-8px,8px,0) rotate(4deg) scale(1.03); }
}
@keyframes cosmos-horizon {
  from { opacity: .4; transform: scale(.95); }
  to { opacity: .95; transform: scale(1.06); }
}
@keyframes cosmos-meteor {
  0%, 7% { opacity: 0; transform: translate3d(-180px,-80px,0) rotate(26deg); }
  9% { opacity: .9; }
  23%, 100% { opacity: 0; transform: translate3d(min(80vw,1000px),460px,0) rotate(26deg); }
}
@keyframes cosmos-meteor-cross {
  0%, 37% { opacity: 0; transform: translate3d(0,-90px,0) rotate(143deg); }
  40% { opacity: .75; }
  50%, 100% { opacity: 0; transform: translate3d(-540px,310px,0) rotate(143deg); }
}
/* Moving backgrounds do not need a second blur pass through every card. */
.site-header,.panel,.post-card,.instagram-status,.instagram-placeholder,.game-card,
.project-card,.social-float,.button,.hero-visual,.insta-card,.contact-panel,
.portfolio-tabs,.project-media span,.custom-audio,.image-lightbox,.meme-modal { backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header { background-color: #020714f5; }
.brand img { animation: cosmos-brand 20s linear infinite; filter: none; transition: transform .3s ease; }
.brand:hover img { animation-duration: 20s; filter: none; }
.brand-text span { will-change: auto; transition-property: opacity,transform; }
.brand:hover .brand-text span { filter: none; }
.header-star,.nav-star,.cursor-dot,.cursor-ring,body::after { display: none; }
.contact-portrait::after { animation: cosmos-contact 10s ease-in-out infinite alternate; }
@keyframes cosmos-contact { to { opacity: .5; transform: rotate(25deg) scale(.97); } }
@keyframes cosmos-brand { to { transform: rotate(360deg); } }
.site-controls { position: fixed; right: 16px; top: 43px; transform: translateY(-50%); display: flex; align-items: center; gap: 8px; z-index: 81; }
.site-controls .detail-toggle,.site-controls .language-switcher { position: static; transform: none; width: auto; }
.site-controls .language-toggle { min-height: 40px; }
.site-controls .detail-toggle { gap: 7px; min-height: 40px; padding: 7px 9px; }
.site-controls .detail-toggle:hover { transform: none; }
.detail-toggle-track { flex: none; }
.detail-toggle-state { font-size: .64rem; white-space: nowrap; }
.detail-toggle:focus-visible { outline: 2px solid #7dddff; outline-offset: 4px; }
.detail-toggle:disabled { opacity: .65; cursor: default; }
.motion-paused *, .motion-paused *::before, .motion-paused *::after,
.motion-outside, .motion-outside *, .motion-outside::before, .motion-outside::after,
.motion-outside *::before, .motion-outside *::after { animation-play-state: paused !important; }
.low-detail *, .low-detail *::before, .low-detail *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.low-detail { scroll-behavior: auto !important; }
.low-detail .cosmos-depth { display: none; }
.low-detail .cosmos-meteor { display: none; }
.low-detail .cosmos-stars::after { display: none; }
.low-detail .cosmos::before { opacity: .3; }
.low-detail .cosmos::after { opacity: .28; }
.low-detail .cosmos-orbit { opacity: .25; }
.low-detail .cosmos-galaxy { opacity: .65; }
.low-detail .cosmos-blackhole { opacity: .72; }
.low-detail .cosmos-blackhole::after { display: none; }
@media (max-width: 1320px) {
  :root { --header-height: 138px; }
  .site-header { padding: 14px 18px 12px; gap: 12px; min-height: var(--header-height); }
  .site-header .brand { align-self: flex-start; position: relative; left: auto; }
  .site-controls { position: fixed; right: 18px; top: 19px; transform: none; }
  .site-header nav { grid-template-columns: repeat(5,minmax(0,1fr)); width: 100%; max-width: 820px; }
  .site-header nav a:nth-child(n) { grid-column: auto; justify-self: stretch; max-width: none; }
}
@media (max-width: 900px) {
  :root { --header-height: 220px; }
  .site-header { padding: 12px; gap: 10px; overflow: visible; }
  .site-header .brand { gap: 7px; }
  .brand-mark { width: 36px; height: 36px; }
  .brand img { width: 32px; height: 32px; }
  .brand-text { font-size: .94rem; }
  .site-controls { right: 12px; top: 10px; gap: 6px; }
  .site-controls .detail-toggle { padding: 6px 7px; min-height: 36px; }
  .site-controls .language-toggle { min-height: 36px; }
  .site-header nav { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; max-width: none; padding: 0; }
  .site-header nav a { font-size: .8rem; letter-spacing: .04em; min-height: 44px; padding: 10px 8px; }
  .site-header nav a:last-of-type { grid-column: 1 / -1; }
  .detail-toggle-state { font-size: .56rem; }
}
@media (min-width: 601px) and (max-width: 900px) {
  :root { --header-height: 172px; }
  .site-header nav { grid-template-columns: repeat(6,minmax(0,1fr)); }
  .site-header nav a:nth-child(n) { grid-column: span 2; }
  .site-header nav a:nth-child(n+4) { grid-column: span 3; }
}
@media (max-width: 380px) {
  .site-header { padding-left: 9px; padding-right: 9px; }
  .brand-text { font-size: .78rem; }
  .brand-mark { width: 29px; height: 32px; }
  .brand img { width: 28px; height: 28px; }
  .site-controls { right: 9px; }
  .site-controls .detail-toggle { gap: 4px; padding: 6px; }
  .site-controls .language-toggle { padding: 4px 6px; }
  .site-controls .language-code { display: none; }
  .site-controls .language-toggle { gap: 0; min-width: 38px; }
}
/* Browser bars may change the visible viewport, but never the scene's coordinates. */
@media (max-width: 700px), (pointer: coarse) {
  .cosmos {
    inset: 0 0 auto;
    height: var(--cosmos-mobile-height, 100vh);
  }
  @supports (height: 100lvh) {
    .cosmos { height: var(--cosmos-mobile-height, 100lvh); }
  }
}
@media (max-width: 700px) {
  .cosmos-stars { background-size: 700px 525px; opacity: .67; }
  .cosmos-orbit { width: min(135vw, 560px); right: -42vw; top: 16%; opacity: .24; animation-duration: 50s; }
  .cosmos-galaxy { width: min(118vw, 510px); left: -22vw; top: 34%; opacity: .76; }
  .cosmos-galaxy::before { animation-duration: 110s; }
  .cosmos-blackhole { width: min(102vw, 440px); right: -20vw; top: 6%; opacity: .82; }
  .cosmos-blackhole::before { animation-duration: 14s; }
  .cosmos-blackhole::after { display: none; }
  /* A widely spaced second texture adds depth with a small number of visible stars. */
  .cosmos-depth { background-size: 1100px 825px; opacity: .2; animation: cosmos-mobile-depth 30s ease-in-out infinite alternate; }
  .cosmos-depth::before {
    width: 2px; height: 2px; left: 23%; top: 24%;
    box-shadow: 45px 130px #b9eaff, 210px 70px #d7c4ff, 120px 340px #dbf9ff, 260px 520px #d7c4ff;
  }
  .cosmos::before {
    width: 600px; height: 600px; left: -76%;
    animation: cosmos-mobile-nebula 18s ease-in-out infinite alternate;
  }
  .cosmos::after {
    width: min(165vw, 850px); right: -36%; top: -11%; opacity: .2;
    animation: cosmos-mobile-aurora 26s ease-in-out infinite alternate;
  }
  .cosmos-stars::after { display: none; }
  .cosmos-meteor { width: 140px; animation-duration: 10s; }
}
@keyframes cosmos-mobile-depth {
  from { transform: translate3d(0,0,0); opacity: .18; }
  to { transform: translate3d(-32px,-24px,0); opacity: .32; }
}
@keyframes cosmos-mobile-nebula {
  from { transform: translate3d(-20px,20px,0) rotate(-8deg) scale(.96); opacity: .32; }
  to { transform: translate3d(9vw,calc(var(--cosmos-vh, 1vh) * -5),0) rotate(12deg) scale(1.08); opacity: .58; }
}
@keyframes cosmos-mobile-aurora {
  from { transform: translate3d(20px,-12px,0) rotate(-5deg) scale(.96); opacity: .17; }
  to { transform: translate3d(-6vw,calc(var(--cosmos-vh, 1vh) * 4),0) rotate(6deg) scale(1.04); opacity: .31; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .cosmos-meteor { display: none; }
  .cosmos-stars::after { display: none; }
}