:root{
  --fv3d-glow-1: 255,60,130;     
  --fv3d-glow-2: 120,90,255;     
  --fv3d-glow-3: 60,220,255;     
  --fv3d-gold: 255,205,110;
  --fv3d-ease: cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce){
  .fv3d-card, .fv3d-card *, .fv-glow-btn, .fv-glow-btn *,
  .fv-dreamscape *, .fv-hero3dlogo *, .fv-spark{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}
.fv3d-card{
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .45s var(--fv3d-ease), box-shadow .45s var(--fv3d-ease);
  isolation: isolate;
}

.fv3d-card::before{
  content:'';
  position:absolute; inset:-2px;
  border-radius: inherit;
  padding: 1px;
  background: radial-gradient(420px circle at var(--fv-mx,50%) var(--fv-my,50%),
    rgba(var(--fv3d-glow-3), .9), rgba(var(--fv3d-glow-2), .55) 35%, transparent 65%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: 3;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.fv3d-card::after{
  content:'';
  position:absolute; inset: 6%;
  border-radius: inherit;
  background: radial-gradient(60% 60% at var(--fv-mx,50%) var(--fv-my,50%),
    rgba(var(--fv3d-glow-1), .35), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
  z-index: -1;
  filter: blur(14px);
}

.fv3d-card:hover,
.fv3d-card.fv3d-active{
  box-shadow:
    0 22px 46px -18px rgba(0,0,0,.65),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 38px -6px rgba(var(--fv3d-glow-2), .55);
  z-index: 5;
}
.fv3d-card:hover::before,
.fv3d-card.fv3d-active::before{ opacity: 1; }
.fv3d-card:hover::after,
.fv3d-card.fv3d-active::after{ opacity: 1; }

.fv3d-shine{
  position:absolute; inset:0;
  border-radius: inherit;
  overflow:hidden;
  pointer-events:none;
  z-index: 2;
}
.fv3d-shine::before{
  content:'';
  position:absolute; top:-60%; left:-40%;
  width:40%; height:220%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-160%) rotate(8deg);
  transition: transform .9s cubic-bezier(.2,.7,.1,1);
  mix-blend-mode: overlay;
}
.fv3d-card:hover .fv3d-shine::before{ transform: translateX(380%) rotate(8deg); }

.fv3d-card [class*="__media"],
.fv3d-card [class*="__img"],
.fv3d-card [class*="__poster"],
.fv3d-card [class*="__portrait"],
.fv3d-card [class*="__thumb"]{
  transform: translateZ(28px);
  transition: transform .45s var(--fv3d-ease), filter .45s var(--fv3d-ease);
}
.fv3d-card:hover [class*="__media"],
.fv3d-card:hover [class*="__img"],
.fv3d-card:hover [class*="__poster"],
.fv3d-card:hover [class*="__portrait"],
.fv3d-card:hover [class*="__thumb"]{
  filter: saturate(1.18) brightness(1.05);
}
.fv3d-card [class*="__body"]{
  transform: translateZ(14px);
  transition: transform .45s var(--fv3d-ease);
}

.fv-spark{
  position:absolute;
  width: 6px; height: 6px;
  pointer-events:none;
  z-index: 4;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 60%, transparent 72%);
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
  filter: drop-shadow(0 0 4px rgba(var(--fv3d-gold),.9));
}
.fv3d-card:hover .fv-spark,
.fv3d-card.fv3d-active .fv-spark{
  animation: fv-spark-pop 1100ms ease-in forwards;
}
@keyframes fv-spark-pop{
  0%{ opacity:0; transform: scale(.2) rotate(0deg); }
  18%{ opacity:1; transform: scale(1) rotate(40deg); }
  100%{ opacity:0; transform: scale(.3) translateY(-14px) rotate(140deg); }
}

.fv-glow-btn{
  position: relative;
  overflow: visible;
  isolation: isolate;
}
.fv-glow-btn::before{
  content:'';
  position:absolute; inset:-3px;
  border-radius: inherit;
  background: conic-gradient(from 0deg,
    rgba(var(--fv3d-glow-1),.9), rgba(var(--fv3d-gold),.9),
    rgba(var(--fv3d-glow-3),.9), rgba(var(--fv3d-glow-2),.9), rgba(var(--fv3d-glow-1),.9));
  opacity: 0;
  filter: blur(6px);
  z-index: -1;
  transition: opacity .35s ease;
  animation: fv-conic-spin 3.2s linear infinite paused;
}
.fv-glow-btn:hover::before,
.fv-glow-btn:focus-visible::before{
  opacity: .85;
  animation-play-state: running;
}
@keyframes fv-conic-spin{ to{ transform: rotate(360deg); } }

.fv-glow-btn{ transition: transform .25s var(--fv3d-ease), box-shadow .25s var(--fv3d-ease); }
.fv-glow-btn:hover{ transform: translateY(-2px) scale(1.035); }
.fv-glow-btn:active{ transform: translateY(0) scale(.97); }

.fv-glow-btn .fv-btn-ripple{
  position:absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.85), rgba(var(--fv3d-glow-3),.35) 55%, transparent 72%);
  transform: translate(-50%,-50%) scale(0);
  pointer-events:none;
  width: 14px; height: 14px;
  animation: fv-ripple-burst 650ms ease-out forwards;
  z-index: 2;
}
@keyframes fv-ripple-burst{
  0%{ transform: translate(-50%,-50%) scale(0); opacity:.9; }
  100%{ transform: translate(-50%,-50%) scale(18); opacity:0; }
}

.icon-btn{ position: relative; }
.icon-btn.fv-glow-btn::after{
  content:'';
  position:absolute; inset:-6px;
  border-radius: 50%;
  border: 1.5px solid rgba(var(--fv3d-glow-3), .55);
  opacity: 0;
  transform: scale(.6);
  pointer-events:none;
}
.icon-btn.fv-glow-btn:hover::after{
  animation: fv-awaken-ring 900ms var(--fv3d-ease);
}
@keyframes fv-awaken-ring{
  0%{ opacity:.9; transform: scale(.6); }
  100%{ opacity:0; transform: scale(1.9); }
}

.fv-hero3dlogo{
  position:absolute;
  top: 14%;
  right: 8%;
  width: min(220px, 22vw);
  aspect-ratio: 1;
  z-index: 4;
  pointer-events:none;
  perspective: 900px;
  display: grid;
  place-items:center;
}
.fv-hero3dlogo__ring{
  position:absolute; inset:0;
  border-radius: 50%;
  border: 1px solid rgba(var(--fv3d-glow-3), .35);
  box-shadow:
    0 0 40px -6px rgba(var(--fv3d-glow-2), .55) inset,
    0 0 60px -10px rgba(var(--fv3d-glow-1), .5);
  animation: fv-ring-spin 14s linear infinite;
}
.fv-hero3dlogo__ring--2{
  inset: 10%;
  border-color: rgba(var(--fv3d-gold), .3);
  animation-duration: 9s;
  animation-direction: reverse;
}
@keyframes fv-ring-spin{ to{ transform: rotate(360deg); } }

.fv-hero3dlogo__img{
  width: 56%;
  filter: drop-shadow(0 0 22px rgba(var(--fv3d-glow-2), .75))
          drop-shadow(0 0 46px rgba(var(--fv3d-glow-3), .35));
  animation: fv-logo-float 5.5s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes fv-logo-float{
  0%,100%{ transform: translateY(0) rotateY(0deg) rotateX(4deg); }
  50%{ transform: translateY(-16px) rotateY(180deg) rotateX(-4deg); }
}

.fv-hero3dlogo__particle{
  position:absolute;
  width: 3px; height:3px;
  border-radius:50%;
  background: rgba(var(--fv3d-gold), .95);
  box-shadow: 0 0 8px 2px rgba(var(--fv3d-gold), .8);
  animation: fv-particle-drift linear infinite;
}
@keyframes fv-particle-drift{
  0%{ transform: translate(0,0) scale(.6); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:.8; }
  100%{ transform: translate(var(--fv-px,40px), var(--fv-py,-120px)) scale(1); opacity:0; }
}

@media (max-width: 860px){
  .fv-hero3dlogo{ display:none; }
}

.fv-dreamscape{
  position: relative;
  height: clamp(140px, 20vw, 260px);
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% 120%, rgba(var(--fv3d-glow-2), .22), transparent 60%),
    linear-gradient(180deg, var(--bg-void), #0a0a13 55%, var(--bg-void));
}
.fv-dreamscape::before{
  content:'';
  position:absolute; inset:-20% -5%;
  background-image:
    radial-gradient(1.5px 1.5px at 10% 20%, rgba(255,255,255,.85), transparent 60%),
    radial-gradient(1.5px 1.5px at 25% 70%, rgba(255,255,255,.6), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 30%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(1.5px 1.5px at 55% 80%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 70% 15%, rgba(255,255,255,.8), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 55%, rgba(255,255,255,.65), transparent 60%),
    radial-gradient(1.5px 1.5px at 95% 85%, rgba(255,255,255,.7), transparent 60%),
    radial-gradient(1.5px 1.5px at 15% 90%, rgba(255,255,255,.55), transparent 60%);
  background-repeat: repeat;
  background-size: 220px 220px;
  transform: translateY(var(--fv-sy1, 0px));
  will-change: transform;
}
.fv-dreamscape__moon{
  position:absolute;
  top: 50%;
  left: 50%;
  width: clamp(64px, 8vw, 108px);
  aspect-ratio:1;
  border-radius:50%;
  transform: translate(-50%,-55%) translateY(var(--fv-sy2, 0px));
  background: radial-gradient(circle at 35% 32%, #fff8e6 0%, #ffe9b8 28%, #d9b877 55%, #7a5f37 100%);
  box-shadow:
    0 0 40px 8px rgba(var(--fv3d-gold), .45),
    0 0 90px 24px rgba(var(--fv3d-glow-2), .3);
  will-change: transform;
}
.fv-dreamscape__moon::after{
  content:'';
  position:absolute; inset:0; border-radius:50%;
  background-image:
    radial-gradient(10px 10px at 30% 60%, rgba(0,0,0,.12), transparent 60%),
    radial-gradient(6px 6px at 65% 35%, rgba(0,0,0,.1), transparent 60%),
    radial-gradient(8px 8px at 60% 70%, rgba(0,0,0,.1), transparent 60%);
}
.fv-dreamscape__glow{
  position:absolute; left:50%; top:50%;
  width: 340px; height:340px;
  transform: translate(-50%,-55%);
  background: radial-gradient(circle, rgba(var(--fv3d-gold),.22), transparent 65%);
  pointer-events:none;
}
.fv-dreamscape__hill{
  position:absolute; left:-5%; right:-5%; bottom:-4px;
  height: 46%;
  background: linear-gradient(180deg, transparent, var(--bg-void) 70%);
}
.fv-dreamscape__particle{
  position:absolute;
  width:2.5px; height:2.5px; border-radius:50%;
  background: rgba(var(--fv3d-glow-3), .9);
  box-shadow: 0 0 6px 1.5px rgba(var(--fv3d-glow-3), .8);
  animation: fv-dream-rise linear infinite;
}
@keyframes fv-dream-rise{
  0%{ transform: translateY(20px) scale(.6); opacity:0; }
  15%{ opacity:.9; }
  100%{ transform: translateY(-140px) scale(1.1); opacity:0; }
}
.fv-login-btn{
  color: rgba(var(--fv3d-gold), 1);
  border: 1px solid rgba(var(--fv3d-gold), .35);
  border-radius: 50%;
}
.fv-login-mobile{
  display:block;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  color: rgba(var(--fv3d-gold), 1) !important;
  font-weight: 700;
}

.fv3d-reveal{
  opacity: 0;
  transform: translateY(26px) scale(.97);
  transition: opacity .7s var(--fv3d-ease), transform .7s var(--fv3d-ease);
}
.fv3d-reveal.fv3d-in{
  opacity: 1;
  transform: translateY(0) scale(1);
}