/* LSN — living glass throughout the site. Decorative layers only. */

/* Interior-page glass sculptures occupy the reserved right-hand side. */
.page-intro, .portfolio-intro { position: relative; isolation: isolate; overflow: clip; }
.page-intro::before, .page-intro::after,
.portfolio-intro::before, .portfolio-intro::after { content: ''; position: absolute; pointer-events: none; z-index: -1; }
.page-intro::before {
  top: 3%; right: 2.2%; width: 26%; aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 165deg, #a5b8e450, #fff 11%, #a9b6e9b8 23%, #ececff 32%, #a99bdfbd 43%, #fff 55%, #dce9fa 65%, #7d90ca9c 79%, #e4ecff 90%, #a5b8e450);
  -webkit-mask: radial-gradient(closest-side, transparent 63%, #000 64% 98%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 63%, #000 64% 98%, transparent 100%);
  opacity: .97;
  transform: perspective(650px) rotateX(48deg) rotateZ(-29deg);
  animation: gse-intro-orbit 17s ease-in-out infinite;
}
.page-intro::after {
  width: 28%; aspect-ratio: 1; top: 6%; right: 1.3%;
  border: 1px solid #fff8; border-radius: 50%;
  background: radial-gradient(ellipse, #b5c6f13d, transparent 65%);
  transform: perspective(650px) rotateX(48deg) rotateZ(-29deg) scale(1.16);
  animation: gse-intro-halo 17s ease-in-out infinite;
}
.portfolio-intro::before {
  width: 29%; aspect-ratio: 1; right: -3%; top: -29%; border-radius: 50%;
  background: conic-gradient(from 45deg, transparent, #a6bde987, #fff, #b8a5dd61, transparent 75%);
  -webkit-mask: radial-gradient(closest-side, transparent 73%, #000 74% 98%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 73%, #000 74% 98%, transparent 100%);
  transform: rotate(-22deg); opacity: .65;
  animation: gse-portfolio-light 23s ease-in-out infinite;
}
.portfolio-intro::after {
  width: 39%; aspect-ratio: 1; right: -8%; top: -30%; border-radius: 50%;
  background: radial-gradient(ellipse, #c6d4f52e, transparent 65%);
  animation: gse-light-breathe 12s ease-in-out infinite;
}

/* Moving caustics sit below the content, inside each dark section. */
.radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section,
.contact-band, .studio-contact, .portfolio-cta, .site-footer {
  position: relative; isolation: isolate; overflow: clip;
}
:is(.radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section,
    .contact-band, .studio-contact, .portfolio-cta, .site-footer)::before,
:is(.radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section,
    .contact-band, .studio-contact, .portfolio-cta, .site-footer)::after {
  content: ''; position: absolute; pointer-events: none; z-index: -1;
}
:is(.radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section,
    .contact-band, .studio-contact, .portfolio-cta)::before {
  width: min(64%, 680px); aspect-ratio: 1; right: -12%; top: -65%;
  border-radius: 50%;
  background: conic-gradient(from 25deg, #bba9ff00, #9d9fdf36 12%, #b9dafa8c 24%, #fcfdff94 27%, #9f9bd448 33%, #64599d1f 44%, #8b9dd95c 58%, #d7e8ff80 68%, #8c88c340 76%, #bba9ff00 92%);
  -webkit-mask: radial-gradient(closest-side, transparent 72%, #000 73% 98%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 72%, #000 73% 98%, transparent 100%);
  transform: rotate(-25deg) scaleY(.7); opacity: .6;
  animation: gse-dark-orbit 24s ease-in-out infinite;
}
:is(.radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section,
    .contact-band, .studio-contact, .portfolio-cta)::after {
  width: min(84%, 930px); aspect-ratio: 1; right: -18%; top: -83%;
  border-radius: 50%; border: 1px solid #becbfd24;
  box-shadow: 0 0 0 34px #b5c2ff05, 0 0 0 67px #b5c2ff04;
  background: radial-gradient(ellipse at 27% 67%, #9c8ce712, transparent 56%);
  transform: rotate(-25deg) scaleY(.7);
  animation: gse-dark-halo 24s ease-in-out infinite;
}
.about-poster::before { width: 95%; top: -14%; right: -38%; opacity: .5; }
.about-poster::after { width: 125%; top: -23%; right: -47%; }
.about-poster .burst { background: linear-gradient(135deg, #faf7ff, #c6b6ef 39%, #8b92d1 80%, #dfecff); box-shadow: inset 0 0 22px #ffffff52; animation: gse-poster-emblem 18s ease-in-out infinite; }
.portfolio-next::before { width: 46%; top: -85%; right: -11%; }
.portfolio-next::after { width: 57%; top: -111%; right: -16%; }
.studio-stores-section::before { width: min(76%, 850px); top: -61%; right: -13%; opacity: .5; }
.studio-stores-section::after { width: min(94%, 1040px); top: -75%; right: -17%; }
.radio-app-panel::before { top: -76%; right: -6%; }
.radio-app-panel::after { top: -93%; right: -12%; }

/* The footer shares the same material, with a slower, wider reflection. */
.site-footer::before {
  width: min(76vw, 1060px); aspect-ratio: 1; left: 48%; top: -10%; border-radius: 50%;
  background: conic-gradient(from 135deg, transparent, #c3b8f028 19%, #e9edff78 22%, #728aca27 31%, transparent 46%, #a3b9f144 69%, #fff8 73%, #928bc829 81%, transparent);
  -webkit-mask: radial-gradient(closest-side, transparent 77%, #000 78% 98%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 77%, #000 78% 98%, transparent 100%);
  transform: rotate(-25deg) scaleY(.68); opacity: .25;
  animation: gse-footer-orbit 34s ease-in-out infinite;
}
.site-footer::after {
  width: min(94vw, 1280px); aspect-ratio: 1; left: 41%; top: -21%;
  border: 1px solid #bbc9f51c; border-radius: 50%;
  box-shadow: 0 0 0 36px #b9b8ff04, 0 0 0 72px #b9b8ff03;
  transform: rotate(-25deg) scaleY(.68);
  animation: gse-footer-halo 34s ease-in-out infinite;
}
.footer-signature > span { background-size: 180% 180%; animation: gse-signature-light 13s ease-in-out infinite; }

/* Portfolio artwork: live energy, with the actual labels staying upright. */
.project-art .record { transform: rotate(0); animation: gse-vinyl-turn 48s linear infinite; }
.project-art .record::before { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: conic-gradient(from 25deg, transparent 0 30%, #e4edff38 36%, transparent 43% 77%, #cadcff25 83%, transparent 89%); }
.project-art .record::after { content: ''; position: absolute; inset: 3px; border: 1px solid #e0ebff31; border-radius: 50%; pointer-events: none; }
.project-art .record-label { position: relative; z-index: 1; transform: rotate(0); animation: gse-label-counter 48s linear infinite; }
.project-art .equalizer > i { transform-origin: center; animation: gse-equalizer 2.9s ease-in-out infinite; }
.project-art .equalizer > i:nth-child(2n) { animation-duration: 2.1s; animation-delay: -.65s; }
.project-art .equalizer > i:nth-child(3n) { animation-duration: 3.4s; animation-delay: -1.8s; }
.project-art .equalizer > i:nth-child(4n) { animation-duration: 2.6s; animation-delay: -.95s; }
.project-art .equalizer > i:nth-child(7n) { animation-duration: 3.1s; animation-delay: -2.1s; }
.project-art--radio .equalizer > i { background: linear-gradient(#bfd2f4, #7f98d6); }
.project-art--radio .record { background: repeating-radial-gradient(circle at center, transparent 0, transparent 2px, #afbee443 2px, #afbee443 3px), #344965; }
.project-art--radio .record-label { color: #283750; background: #e5ccd0; border-color: #a9b5d0; }
.project-art--radio .record-dot { background: #5f6e92; }

.project-art .server-orbits { border-color: #a5b5e34d; }
.project-art .server-orbits > i { border-color: #bcc8ec69; }
.project-art .server-orbits > i:nth-child(2) { border-color: #c5d1ec73; }
.project-art .server-orbits > i:nth-child(3) { border-color: #d0d8f082; }
.project-art .server-stack > div {
  position: relative; overflow: hidden; background: linear-gradient(120deg, #465b7d, #2b3e60 72%);
  border-right-color: #7387a9; border-bottom-color: #576f94; box-shadow: 5px 7px 0 #435a8d16, inset 0 1px 0 #d6e9ff66;
  animation: gse-server-float 7s ease-in-out infinite;
}
.project-art .server-stack > div:nth-child(2) { animation-delay: -.7s; }
.project-art .server-stack > div:nth-child(3) { animation-delay: -1.4s; }
.project-art .server-stack > div::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 36%, #e5f3ff3d 49%, transparent 62%);
  transform: translateX(-110%); animation: gse-server-reflection 9s ease-in-out infinite;
}
.project-art .server-stack > div:nth-child(2)::after { animation-delay: .3s; }
.project-art .server-stack > div:nth-child(3)::after { animation-delay: .6s; }
.project-art .server-stack > div > i { background: #d0deff; animation: gse-status-light 3.6s ease-in-out infinite; }
.project-art .server-stack > div > i:nth-child(2) { background: #aea7e7; animation-delay: -1.3s; }
.project-art .server-stack > div > span { background: repeating-linear-gradient(0deg, #91a5c233 0, #91a5c233 2px, transparent 2px, transparent 5px); }

.project-art .product-orbit, .project-art .game-orbit { animation: gse-orbit-turn 32s linear infinite; }
.project-art .product-orbit--two, .project-art .game-orbit--two { animation-duration: 43s; animation-direction: reverse; }
.project-art .product-orbit::after, .project-art .game-orbit::after {
  content: ''; position: absolute; top: -3px; left: 50%; width: 7px; height: 7px; border-radius: 50%;
  background: linear-gradient(135deg, #fff, #c5b6f4); border: 1px solid #ffffffa1; box-shadow: 0 0 14px #c1b5f24d;
}
.project-art--calories .product-orbit::after { background: linear-gradient(135deg, #fff9e7, #c5a36f); }
.project-art .product-emblem { animation: gse-product-float 8s ease-in-out infinite; }
.project-art--lumevra .product-emblem { animation-delay: -3.5s; }
.project-art .product-spark, .project-art .game-spark { animation: gse-spark-rock 12s ease-in-out infinite; }
.project-art .game-emblem, .portfolio-next-art > .icon { animation: gse-product-float 8.5s ease-in-out infinite; }
.portfolio-next-orbit { animation: gse-orbit-turn 27s linear infinite; }
.portfolio-next-orbit--two { animation-direction: reverse; animation-duration: 35s; }
.portfolio-next-orbit::after { content: ''; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #c5bcf2; box-shadow: 0 0 12px #e0d7ff55; }
.project-status > span, .portfolio-development-status > span { animation: gse-status-light 4.8s ease-in-out infinite; }
.radio-app-mark .icon { animation: gse-broadcast-pulse 5.5s ease-in-out infinite; }

@keyframes gse-intro-orbit { 0%, 100% { transform: perspective(650px) translateY(0) rotateX(48deg) rotateZ(-29deg); } 50% { transform: perspective(650px) translateY(-9px) rotateX(56deg) rotateZ(-12deg); } }
@keyframes gse-intro-halo { 0%, 100% { transform: perspective(650px) rotateX(48deg) rotateZ(-29deg) scale(1.16); opacity: .9; } 50% { transform: perspective(650px) translateY(-9px) rotateX(56deg) rotateZ(-12deg) scale(1.17); opacity: .5; } }
@keyframes gse-portfolio-light { 0%, 100% { transform: rotate(-22deg) translateY(0); } 50% { transform: rotate(9deg) translateY(10px); } }
@keyframes gse-light-breathe { 0%, 100% { opacity: .5; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes gse-dark-orbit { 0%, 100% { transform: rotate(-25deg) scaleY(.7); } 50% { transform: translate(-10px, 15px) rotate(8deg) scaleY(.74); } }
@keyframes gse-dark-halo { 0%, 100% { transform: rotate(-25deg) scaleY(.7); opacity: .65; } 50% { transform: translate(-10px, 15px) rotate(8deg) scaleY(.74); opacity: 1; } }
@keyframes gse-footer-orbit { 0%, 100% { transform: rotate(-25deg) scaleY(.68); } 50% { transform: translate(-2%, -2%) rotate(11deg) scaleY(.72); } }
@keyframes gse-footer-halo { 0%, 100% { transform: rotate(-25deg) scaleY(.68); } 50% { transform: translate(-2%, -2%) rotate(11deg) scaleY(.72); } }
@keyframes gse-signature-light { 0%, 100% { background-position: 0 0; } 50% { background-position: 100% 100%; } }
@keyframes gse-vinyl-turn { to { transform: rotate(360deg); } }
@keyframes gse-label-counter { to { transform: rotate(-360deg); } }
@keyframes gse-equalizer { 0%, 100% { scale: 1 .55; } 35% { scale: 1 1; } 72% { scale: 1 .35; } }
@keyframes gse-server-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes gse-server-reflection { 0%, 58%, 100% { transform: translateX(-110%); } 81% { transform: translateX(110%); } }
@keyframes gse-status-light { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes gse-orbit-turn { to { rotate: 360deg; } }
@keyframes gse-product-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes gse-spark-rock { 0%, 100% { rotate: 0deg; } 50% { rotate: 25deg; } }
@keyframes gse-broadcast-pulse { 0%, 100% { scale: 1; opacity: .85; } 50% { scale: 1.08; opacity: 1; } }
@keyframes gse-poster-emblem { 0%, 100% { rotate: 0deg; } 50% { rotate: 13deg; } }

@media (max-width: 1023px) {
  .page-intro::before, .page-intro::after { display: none; }
  .portfolio-intro::before { width: 38%; top: -13%; opacity: .4; }
  .portfolio-intro::after { width: 48%; }
}
@media (max-width: 599px) {
  .portfolio-intro::before, .portfolio-intro::after { display: none; }
  :is(.radio-app-panel, .contact-band, .studio-contact, .portfolio-cta)::before { width: 85%; right: -37%; top: -7%; opacity: .28; }
  :is(.radio-app-panel, .contact-band, .studio-contact, .portfolio-cta)::after { width: 108%; right: -48%; top: -10%; opacity: .45; }
  .studio-stores-section::before { width: 100%; top: -8%; right: -43%; opacity: .23; }
  .studio-stores-section::after { width: 120%; top: -10%; right: -53%; opacity: .4; }
  .portfolio-next::before { width: 78%; top: -25%; right: -36%; opacity: .25; }
  .portfolio-next::after { width: 100%; top: -36%; right: -47%; opacity: .4; }
  .site-footer::before { width: 140%; left: 26%; top: 25%; opacity: .18; }
  .site-footer::after { width: 160%; left: 16%; top: 23%; }
}

/* Pausing freezes decorations without removing any readable content. */
.motion-paused :is(.page-intro, .portfolio-intro, .radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section, .contact-band, .studio-contact, .portfolio-cta, .site-footer)::before,
.motion-paused :is(.page-intro, .portfolio-intro, .radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section, .contact-band, .studio-contact, .portfolio-cta, .site-footer)::after,
[data-ambient-paused]::before, [data-ambient-paused]::after,
[data-ambient-paused] *, [data-ambient-paused] *::before, [data-ambient-paused] *::after { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  :is(.page-intro, .portfolio-intro, .radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section, .contact-band, .studio-contact, .portfolio-cta, .site-footer)::before,
  :is(.page-intro, .portfolio-intro, .radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section, .contact-band, .studio-contact, .portfolio-cta, .site-footer)::after,
  .project-art *, .project-art *::before, .project-art *::after,
  .about-poster .burst, .portfolio-next-art *, .portfolio-next-art *::after,
  .project-status > span, .portfolio-development-status > span,
  .radio-app-mark .icon, .footer-signature > span { animation: none !important; }
}
@media (forced-colors: active) {
  :is(.page-intro, .portfolio-intro, .radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section, .contact-band, .studio-contact, .portfolio-cta, .site-footer)::before,
  :is(.page-intro, .portfolio-intro, .radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section, .contact-band, .studio-contact, .portfolio-cta, .site-footer)::after { display: none; }
}
@media print {
  :is(.page-intro, .portfolio-intro, .radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section, .contact-band, .studio-contact, .portfolio-cta, .site-footer)::before,
  :is(.page-intro, .portfolio-intro, .radio-app-panel, .about-poster, .portfolio-next, .studio-stores-section, .contact-band, .studio-contact, .portfolio-cta, .site-footer)::after { display: none; }
}