/* VoxCard Home Signature Motion v3
   Restrained premium motion layer. It never changes layout or business logic. */
:root{
  --vox-motion-ease:cubic-bezier(.16,1,.3,1);
  --vox-pointer-x:50vw;
  --vox-pointer-y:30vh;
}
html.vox-home-motion{scroll-behavior:smooth}
body.vox-home-motion{isolation:isolate}

/* Desktop-only ambient pointer light */
.vox-home-pointer{
  position:fixed;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:radial-gradient(460px circle at var(--vox-pointer-x) var(--vox-pointer-y),rgba(200,255,56,.075),transparent 62%);
  transition:opacity .35s ease;mix-blend-mode:multiply;
}
body.vox-home-pointer-visible .vox-home-pointer{opacity:1}

/* Independent translate/rotate properties preserve existing theme transforms. */
.vox-magnetic{
  --vox-mag-x:0px;--vox-mag-y:0px;
  translate:var(--vox-mag-x) var(--vox-mag-y);
  transition:translate 260ms var(--vox-motion-ease),box-shadow 220ms ease,background 220ms ease!important;
  will-change:translate;
}
.vox-home-tilt{
  --vox-tilt-axis-x:1;--vox-tilt-axis-y:0;--vox-tilt-angle:0deg;
  --vox-tilt-lift:0px;
  rotate:var(--vox-tilt-axis-x) var(--vox-tilt-axis-y) 0 var(--vox-tilt-angle);
  translate:0 var(--vox-tilt-lift);
  transform-style:preserve-3d;
  transition:rotate 460ms var(--vox-motion-ease),translate 320ms var(--vox-motion-ease),box-shadow 320ms ease!important;
  will-change:rotate,translate;
}
.vox-home-tilt.is-tilting{transition-duration:90ms!important}
.vox-home-tilt:hover{--vox-tilt-lift:-4px}

.vox-card-glow{
  position:absolute;inset:0;border-radius:inherit;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(300px circle at var(--vox-glow-x,50%) var(--vox-glow-y,50%),rgba(255,255,255,.34),transparent 54%);
  transition:opacity .22s ease;
}
.vox-home-tilt:hover > .vox-card-glow{opacity:.62}
.vox-home-tilt > *:not(.vox-card-glow){z-index:1}

/* Hero profile arrives as a polished sequence. */
.vox-home-motion .profile-card .profile-photo,
.vox-home-motion .profile-card h2,
.vox-home-motion .profile-card .profile-title,
.vox-home-motion .profile-card .profile-company,
.vox-home-motion .profile-card .profile-divider,
.vox-home-motion .profile-card .profile-links a{
  opacity:0;translate:0 14px;
}
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-photo,
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card h2,
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-title,
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-company,
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-divider,
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-links a{
  animation:voxHomeSequence .72s var(--vox-motion-ease) forwards;
}
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-photo{animation-delay:.30s}
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card h2{animation-delay:.36s}
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-title{animation-delay:.42s}
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-company{animation-delay:.47s}
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-divider{animation-delay:.52s}
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-links a:nth-child(1){animation-delay:.58s}
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-links a:nth-child(2){animation-delay:.64s}
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-links a:nth-child(3){animation-delay:.70s}
.vox-home-motion .hero-visual.vox-sequence-ready .profile-card .profile-links a:nth-child(4){animation-delay:.76s}
@keyframes voxHomeSequence{to{opacity:1;translate:0 0}}

/* NFC energy halo without adding visual noise. */
.vox-home-motion .nfc-card{isolation:isolate}
.vox-home-motion .nfc-card .nfc-mark::after{
  content:"";position:absolute;inset:-28px -18px;border:1px solid rgba(200,255,56,.22);border-radius:50%;
  animation:voxNfcHalo 2.8s ease-out infinite;pointer-events:none;
}
@keyframes voxNfcHalo{0%{opacity:0;scale:.72}34%{opacity:.55}100%{opacity:0;scale:1.28}}

/* Active navigation state makes long-page orientation clearer. */
.main-nav a.is-active{color:#171a16}
.main-nav a.is-active::after{transform:translateX(-50%) scaleX(1)}

/* Reveal refinement */
.motion-ready [data-reveal]{filter:blur(6px)}
.motion-ready [data-reveal].is-visible{filter:blur(0);transition-property:opacity,transform,filter}

/* FAQ content softens in rather than popping. */
.faq-list details[open] p{animation:voxFaqIn .34s var(--vox-motion-ease) both}
@keyframes voxFaqIn{from{opacity:0;translate:0 -7px}to{opacity:1;translate:0 0}}

/* Tactile press state */
.vox-home-motion :where(a,button):active{scale:.985}

/* Pause continuous decoration while the tab is hidden. */
body.vox-motion-paused *,body.vox-motion-paused *::before,body.vox-motion-paused *::after{animation-play-state:paused!important}

@media (hover:none),(pointer:coarse){
  .vox-home-pointer{display:none}
  .vox-magnetic{translate:0 0!important}
  .vox-home-tilt{rotate:none!important;translate:0 0!important}
}
@media (max-width:760px){
  .vox-card-glow{display:none}
  .vox-home-motion .nfc-card .nfc-mark::after{animation-duration:3.8s}
}
@media (prefers-reduced-motion:reduce){
  html.vox-home-motion{scroll-behavior:auto}
  .vox-home-pointer,.vox-card-glow{display:none!important}
  .vox-magnetic,.vox-home-tilt{translate:0 0!important;rotate:none!important;transition:none!important}
  .vox-home-motion .profile-card :where(.profile-photo,h2,.profile-title,.profile-company,.profile-divider,.profile-links a){opacity:1!important;translate:0 0!important;animation:none!important}
  .vox-home-motion .nfc-card .nfc-mark::after,.faq-list details[open] p{animation:none!important}
}

/* === VoxCard Scroll Journey v5 === */
:root{--vox-scroll-ease:cubic-bezier(.16,1,.3,1)}
.vox-scroll-scene{backface-visibility:hidden;transform-style:preserve-3d;isolation:isolate}
.motion-ready .vox-scroll-scene[data-reveal]:not(.is-visible),
.vox-scroll-scene.vox-scroll-auto:not(.vox-scroll-in){
  opacity:0!important;
  filter:blur(9px) saturate(.9)!important;
  transform:perspective(1100px) translate3d(0,46px,0) rotateX(7deg) rotateZ(var(--vox-scroll-entry-rotate,0deg)) scale(.968)!important;
}
.motion-ready .vox-scroll-scene[data-reveal].is-visible,
.vox-scroll-scene.vox-scroll-auto.vox-scroll-in{
  animation:voxScrollSceneIn .92s var(--vox-scroll-ease) both;
  animation-delay:var(--vox-scroll-delay,0ms);
}
@keyframes voxScrollSceneIn{
  0%{opacity:0;filter:blur(9px) saturate(.9);transform:perspective(1100px) translate3d(0,46px,0) rotateX(7deg) rotateZ(var(--vox-scroll-entry-rotate,0deg)) scale(.968)}
  64%{opacity:1;filter:blur(0) saturate(1.03);transform:perspective(1100px) translate3d(0,-4px,0) rotateX(-.6deg) rotateZ(0) scale(1.006)}
  100%{opacity:1;filter:none;transform:none}
}
.vox-scroll-scene::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:5;
  border:1px solid rgba(200,255,56,0);box-shadow:0 0 0 0 rgba(200,255,56,0);
  transition:border-color .38s ease,box-shadow .38s ease,opacity .38s ease;opacity:0;
}
.vox-scroll-scene.vox-scroll-active::before{
  opacity:1;border-color:rgba(200,255,56,.32);
  box-shadow:0 24px 70px rgba(42,55,16,.12),inset 0 1px rgba(255,255,255,.28);
}
.vox-scroll-scene.vox-scroll-active :where(.feature-icon,.proof-icon,.step-icon,i,svg){
  animation:voxScrollIconSettle .72s var(--vox-scroll-ease) both;
}
@keyframes voxScrollIconSettle{0%{scale:.92;rotate:-5deg}55%{scale:1.08;rotate:2deg}100%{scale:1;rotate:0deg}}
.vox-scroll-tap{animation:voxScrollTap .42s var(--vox-scroll-ease)!important}
@keyframes voxScrollTap{0%,100%{scale:1}45%{scale:.985}72%{scale:1.008}}

/* Mevcut pointer tilt ile uyumlu, kaydırmaya bağlı hero derinliği. */
.hero-visual{
  --vox-scroll-profile-y:0px;--vox-scroll-profile-rx:0deg;
  --vox-scroll-nfc-y:0px;--vox-scroll-nfc-rx:0deg;
}
.vox-scroll-journey .hero-visual .profile-card{
  transform:translate3d(var(--profile-x),calc(var(--profile-y) + var(--vox-scroll-profile-y)),45px)
    rotateX(calc(var(--profile-rx) + var(--vox-scroll-profile-rx))) rotateY(var(--profile-ry));
}
.vox-scroll-journey .hero-visual .nfc-card{
  transform:translate3d(var(--nfc-x),calc(var(--nfc-y) + var(--vox-scroll-nfc-y)),0) rotate(14deg)
    rotateX(calc(var(--nfc-rx) + var(--vox-scroll-nfc-rx))) rotateY(var(--nfc-ry));
}
.vox-scroll-journey .profile-photo img{animation:voxScrollAvatarBreath 6.4s ease-in-out infinite;transform-origin:50% 65%}
@keyframes voxScrollAvatarBreath{0%,100%{scale:1;translate:0 0}50%{scale:1.025;translate:0 -1px}}
.demo-stage{translate:0 var(--vox-demo-scroll-y,0px);rotate:1 0 0 var(--vox-demo-scroll-rx,0deg);transition:translate .16s linear,rotate .16s linear}

@media (hover:hover) and (pointer:fine){
  .vox-scroll-scene.vox-scroll-active{filter:saturate(1.025)}
  .vox-scroll-scene :where(.feature-icon,.proof-icon,.profile-link-icon,.product-badge){transition:translate .3s var(--vox-scroll-ease),rotate .3s var(--vox-scroll-ease),scale .3s var(--vox-scroll-ease)}
  .vox-scroll-scene:hover :where(.feature-icon,.proof-icon,.profile-link-icon){translate:2px -2px;rotate:-3deg;scale:1.06}
}
@media (max-width:760px){
  .motion-ready .vox-scroll-scene[data-reveal]:not(.is-visible),.vox-scroll-scene.vox-scroll-auto:not(.vox-scroll-in){
    transform:translate3d(0,28px,0) scale(.98)!important;filter:blur(5px)!important;
  }
  .vox-scroll-scene.vox-scroll-active::before{box-shadow:0 16px 42px rgba(42,55,16,.08)}
  .demo-stage{translate:0 var(--vox-demo-scroll-y,0px);rotate:none}
}
@media (prefers-reduced-motion:reduce){
  .vox-scroll-scene,.vox-scroll-scene[data-reveal],.vox-scroll-scene.vox-scroll-auto{opacity:1!important;filter:none!important;transform:none!important;animation:none!important;transition:none!important}
  .vox-scroll-scene::before{display:none!important}
  .vox-scroll-journey .profile-photo img,.vox-scroll-scene.vox-scroll-active :where(i,svg){animation:none!important}
  .demo-stage{translate:none!important;rotate:none!important}
}