/* Void ambient glass: compositor motion, no animation dependency. */
.backdrop{overflow:hidden;background:radial-gradient(ellipse at 48% -20%,#33302c 0,transparent 60%),radial-gradient(ellipse at 5% 90%,#19273a 0,transparent 65%),#090c12;perspective:1200px}
.backdrop:after{z-index:8;background:radial-gradient(ellipse at 50% 40%,transparent 15%,#06080d77 100%)}
.ambient-light{position:absolute;border-radius:50%;filter:blur(85px);opacity:.42;will-change:transform;animation:light-drift 26s ease-in-out infinite alternate}
.light-warm{width:650px;height:450px;top:-200px;left:35%;background:radial-gradient(ellipse,#a8937459,transparent 65%)}
.light-blue{width:700px;height:600px;left:-240px;bottom:-350px;background:radial-gradient(ellipse,#6886b45e,transparent 68%);animation-duration:33s;animation-direction:alternate-reverse}
.glass-orbit{position:absolute;width:760px;height:760px;border-radius:50%;left:calc(50% - 380px);top:calc(46% - 380px);background:conic-gradient(from 30deg,transparent 0deg,#90a8c12c 32deg,#e6eaf3a1 55deg,#ffffff24 67deg,transparent 99deg,transparent 160deg,#c2ae8b44 196deg,#fff3db99 224deg,#ffffff1a 241deg,transparent 270deg);-webkit-mask:radial-gradient(transparent 62%,#000 62.5%,#000 64%,transparent 65%);mask:radial-gradient(transparent 62%,#000 62.5%,#000 64%,transparent 65%);filter:drop-shadow(0 0 17px #c3d7fa22);transform:rotateX(65deg) rotateY(-25deg) rotateZ(-30deg);animation:orbit-turn 46s linear infinite;will-change:transform;opacity:.55}
.orbit-two{width:1040px;height:1040px;left:calc(50% - 520px);top:calc(52% - 520px);animation-name:orbit-turn-two;animation-duration:64s;opacity:.18;-webkit-mask:radial-gradient(transparent 62%,#000 62.2%,#000 62.7%,transparent 63%);mask:radial-gradient(transparent 62%,#000 62.2%,#000 62.7%,transparent 63%)}
.liquid-lens{position:absolute;width:290px;height:290px;border-radius:41% 59% 58% 42%/48% 38% 62% 52%;background:radial-gradient(ellipse at 29% 13%,#f5e4c829,transparent 24%),radial-gradient(ellipse at 66% 86%,#95b7f21c,transparent 43%),linear-gradient(145deg,#cdd5e015,#ffffff01 44%,#00000044 75%,#ffffff16);box-shadow:inset 2px 2px 2px #ffffff28,inset -3px -6px 9px #0009,inset -1px -1px 1px #ffffff19,0 28px 70px #0005;border:1px solid #ffffff10;filter:blur(.3px);will-change:transform;animation:lens-float 19s ease-in-out infinite alternate}
.lens-one{left:-120px;top:16%;transform:rotate(-22deg);opacity:.65}
.lens-two{right:-110px;top:8%;width:380px;height:380px;animation-duration:27s;animation-direction:alternate-reverse;opacity:.5}
.void-halo{position:absolute;left:calc(50% - 310px);top:calc(42% - 310px);width:620px;height:620px;background:url('/assets/void.png') center/contain no-repeat;mix-blend-mode:screen;opacity:.035;filter:blur(1px);-webkit-mask:radial-gradient(#000 30%,transparent 68%);mask:radial-gradient(#000 30%,transparent 68%);animation:halo-breathe 22s ease-in-out infinite alternate}
.specs dd{white-space:pre-line}
.wordmark{background:none;text-shadow:none;filter:drop-shadow(0 2px 2px #0008);position:relative;display:block;width:230px;height:38px;overflow:hidden;flex-shrink:0}
.wordmark img{display:block;width:230px;height:auto;position:absolute;top:50%;transform:translateY(-50%)}
@media(max-width:540px){.wordmark{width:140px;height:27px;margin-top:4px}.wordmark img{width:140px}}
.tiktok-art img{clip-path:circle(39% at 50% 50%);border-radius:0;filter:drop-shadow(0 10px 16px #0007)}
.youtube-art img{clip-path:none;width:139px;height:139px;object-fit:contain}
@media(min-width:1101px){.intro{margin-top:35px;margin-bottom:40px}.footer{padding-top:24px;padding-bottom:24px}}
.intro{position:relative}
.intro:before{content:"";position:absolute;left:30%;right:30%;height:1px;bottom:-30px;background:linear-gradient(90deg,transparent,#b7b8c226,transparent)}
@keyframes orbit-turn{0%{transform:rotateX(65deg) rotateY(-25deg) rotateZ(-30deg)}100%{transform:rotateX(65deg) rotateY(-25deg) rotateZ(330deg)}}
@keyframes orbit-turn-two{0%{transform:rotateX(42deg) rotateY(45deg) rotateZ(25deg)}100%{transform:rotateX(42deg) rotateY(45deg) rotateZ(-335deg)}}
@keyframes light-drift{from{transform:translate3d(-60px,0,0) scale(.92)}to{transform:translate3d(120px,60px,0) scale(1.15)}}
@keyframes lens-float{from{transform:translate3d(0,0,0) rotate(-22deg)}to{transform:translate3d(30px,90px,0) rotate(17deg)}}
@keyframes halo-breathe{from{transform:scale(.95) rotate(-5deg);opacity:.03}to{transform:scale(1.08) rotate(5deg);opacity:.07}}
@media(max-width:540px){.glass-orbit{width:600px;height:600px;left:calc(50% - 300px)}.orbit-two{width:800px;height:800px;left:calc(50% - 400px)}.lens-one{left:-210px}.lens-two{right:-275px}.void-halo{width:500px;height:500px;left:calc(50% - 250px)}}
/* Touch screens keep the glass finish without live blur behind every card. */
@media(max-width:850px),(hover:none) and (pointer:coarse){
  .backdrop{perspective:none;contain:strict}
  .ambient-light{width:min(100vw,480px);height:380px;filter:none;opacity:.55;animation:mobile-light-drift 24s ease-in-out infinite alternate}
  .light-warm{left:10%;top:-90px}
  .light-blue{left:-20%;bottom:0;animation:none;will-change:auto}
  .glass-orbit,.liquid-lens,.void-halo{display:none;animation:none;will-change:auto;filter:none;background-image:none}
  .card{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(142deg,#272b35f5,#151a23f5 55%,#1c2430f5);box-shadow:inset 1px 1px #ffffff2d,inset -1px -1px #0009,0 10px 22px #0006}
  .featured{background:linear-gradient(145deg,#333a46f5,#1a2330f5 65%,#283544f5);box-shadow:inset 0 1px #ffffff90,0 0 0 1px #ffffff25,0 12px 25px #0007}
  .glass,.language select{backdrop-filter:none;-webkit-backdrop-filter:none}
  .field input{font-size:16px}
  dialog::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none;background:#030609dc}
  body:has(dialog[open]) .ambient-light{animation-play-state:paused}
}
@media(hover:none) and (pointer:coarse){.card,.card:hover,.card:active,.featured,.featured:hover{transform:none;transition:none}}
@keyframes mobile-light-drift{from{transform:translate3d(-24px,0,0)}to{transform:translate3d(24px,28px,0)}}
@media(prefers-reduced-motion:reduce){.backdrop *{animation:none!important;will-change:auto}.void-halo{opacity:.045}}
