@property --fx-a{syntax:'<angle>';inherits:false;initial-value:0deg}

.fx-stage{position:relative;isolation:isolate}

.fx-dust{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:-1;opacity:0;transition:opacity 1.4s ease}
.fx-dust.on{opacity:1}

.fx-aurora{position:absolute;inset:-12% -6%;pointer-events:none;z-index:-1;overflow:hidden}
.fx-aurora::before,.fx-aurora::after{content:'';position:absolute;border-radius:50%;will-change:transform}
.fx-aurora::before{top:-14%;left:-6%;width:62%;aspect-ratio:1.3;background:radial-gradient(closest-side,rgba(255,255,255,.085),rgba(255,255,255,.028) 56%,transparent);animation:fxAurA 24s ease-in-out infinite alternate}
.fx-aurora::after{bottom:-22%;right:-8%;width:54%;aspect-ratio:1.15;background:radial-gradient(closest-side,rgba(196,208,226,.07),rgba(196,208,226,.022) 56%,transparent);animation:fxAurB 29s ease-in-out infinite alternate}
@keyframes fxAurA{0%{transform:translate3d(0,0,0) scale(1) rotate(0)}50%{transform:translate3d(9%,7%,0) scale(1.14,.9) rotate(16deg)}100%{transform:translate3d(-5%,12%,0) scale(.92,1.1) rotate(-12deg)}}
@keyframes fxAurB{0%{transform:translate3d(0,0,0) scale(1) rotate(0)}50%{transform:translate3d(-10%,-6%,0) scale(.9,1.16) rotate(-18deg)}100%{transform:translate3d(6%,-12%,0) scale(1.12,.94) rotate(10deg)}}

.fx-grain{position:absolute;inset:0;pointer-events:none;z-index:-1;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.fx-wall{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 50%,transparent 100%);mask-image:linear-gradient(180deg,#000 50%,transparent 100%)}
.fx-wall .fx-p{position:absolute;left:var(--x);top:var(--y);width:var(--w);opacity:0;transform:translate3d(0,calc(var(--fx-sy,0) * var(--d,.2) * 1px),0) rotate(var(--r,0deg));transition:opacity 1.6s ease;will-change:transform}
.fx-wall.on .fx-p{opacity:var(--o,.3)}
.fx-wall .fx-p img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;border-radius:16px;border:1px solid rgba(255,255,255,.09);box-shadow:0 30px 60px rgba(0,0,0,.7);filter:grayscale(1) contrast(1.08) brightness(.86)}
.fx-wall .fx-p.logo img{aspect-ratio:auto;object-fit:contain;border:0;border-radius:0;box-shadow:none;filter:grayscale(1) brightness(1.8) drop-shadow(0 12px 24px rgba(0,0,0,.6))}
.fx-wall::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 70% 80% at 30% 45%,var(--fx-bg,#0a0a0a) 0%,transparent 75%)}

.fx-ring{position:absolute;inset:var(--fx-inset,-1px);border-radius:inherit;padding:1px;pointer-events:none;z-index:3;background:conic-gradient(from var(--fx-a),transparent 0deg 240deg,rgba(255,255,255,.06) 285deg,rgba(255,255,255,var(--fx-beam-a,.8)) 345deg,transparent 360deg);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:fxBeam var(--fx-beam-dur,7s) linear infinite}
.fx-ring.halo{--fx-inset:-4px;--fx-beam-a:.55;--fx-beam-dur:4.5s}
@keyframes fxBeam{to{--fx-a:360deg}}

.fx-shine{position:relative;overflow:hidden;isolation:isolate}
.fx-shine::after{content:'';position:absolute;top:0;bottom:0;left:0;width:40%;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.16),transparent);transform:translateX(-180%) skewX(-18deg);animation:fxShine 5.5s cubic-bezier(.4,0,.2,1) 1.4s infinite}
@keyframes fxShine{0%{transform:translateX(-180%) skewX(-18deg)}38%,100%{transform:translateX(360%) skewX(-18deg)}}

.fx-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.fx-track{display:flex;width:max-content;gap:var(--fx-gap,10px);animation:fxMarq var(--fx-dur,44s) linear infinite}
.fx-marquee:hover .fx-track{animation-play-state:paused}
@keyframes fxMarq{to{transform:translate3d(calc(-50% - var(--fx-gap,10px) / 2),0,0)}}

.fx-cols{display:grid;grid-template-columns:repeat(var(--fx-n,4),minmax(0,1fr));gap:var(--fx-cg,12px);height:var(--fx-h,520px);overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent);mask-image:linear-gradient(180deg,transparent,#000 14%,#000 86%,transparent)}
.fx-col{min-width:0}
.fx-col-track{display:flex;flex-direction:column;gap:var(--fx-cg,12px);animation:fxColUp var(--fx-dur,48s) linear var(--fx-del,0s) infinite}
.fx-col:nth-child(even) .fx-col-track{animation-direction:reverse}
.fx-cols:hover .fx-col-track{animation-play-state:paused}
@keyframes fxColUp{to{transform:translate3d(0,calc(-50% - var(--fx-cg,12px) / 2),0)}}

.fx-cover{position:relative;display:block;margin:0;border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);aspect-ratio:2/3;background:#111214;box-shadow:0 18px 40px rgba(0,0,0,.45);transition:transform .45s cubic-bezier(.22,1,.36,1),border-color .3s ease,box-shadow .45s ease}
.fx-cover:hover{transform:translateY(-6px) scale(1.035);border-color:rgba(255,255,255,.38);box-shadow:0 26px 60px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08);z-index:1}
.fx-cover:hover figcaption{opacity:1}
.fx-cover img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.06) brightness(.82);transition:filter .5s ease,transform .7s cubic-bezier(.22,1,.36,1)}
.fx-cover figcaption{position:absolute;left:0;right:0;bottom:0;padding:26px 10px 9px;font-size:12px;font-weight:700;line-height:1.25;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.88));opacity:.92;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fx-cover:hover img,.fx-cover:focus-within img,.fx-cover:active img{filter:none;transform:scale(1.04)}

.fx-spot-l{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:1;opacity:0;transition:opacity .35s ease;background:radial-gradient(340px circle at var(--fx-mx,50%) var(--fx-my,50%),rgba(255,255,255,.085),transparent 62%)}
[data-fx~="spot"]:hover>.fx-spot-l{opacity:1}

.fx-track:not([data-fx-duped]),.fx-col-track:not([data-fx-duped]){animation:none}

.fx-idle,.fx-idle *,.fx-idle *::before,.fx-idle *::after,.fx-idle::before,.fx-idle::after{animation-play-state:paused!important}

@media (max-width:767px){
  .fx-wall{display:none}
  .fx-aurora::before{width:110%}
  .fx-aurora::after{width:90%}
}

@media (prefers-reduced-motion:reduce){
  .fx-aurora::before,.fx-aurora::after,.fx-ring,.fx-shine::after,.fx-track,.fx-col-track{animation:none!important}
  .fx-shine::after{display:none}
  .fx-marquee{overflow-x:auto;scrollbar-width:none}
  .fx-wall .fx-p{transition:none}
  .fx-cover,.fx-cover img{transition:none}
  .fx-cover:hover{transform:none}
}