/* Austria Pixel motion system — subtle, consistent and reduced-motion aware */

body.public-site{animation:apxPageIn .5s cubic-bezier(.2,.75,.2,1) both}

/* Header and logo */
.site-header{will-change:background-position;animation:apxHeaderDrift 18s ease-in-out infinite alternate}
.brand,.footer-logo{transition:transform .22s ease,filter .22s ease}
.brand:hover{transform:translateY(-1px)}
.brand img,.footer-logo img{transform-origin:50% 54%;will-change:transform,filter;animation:apxLogoFloat 4.8s ease-in-out infinite;filter:drop-shadow(0 4px 10px rgba(0,0,0,.34))}
.brand:hover img,.footer-logo:hover img{animation-duration:1.4s;filter:drop-shadow(0 6px 15px rgba(208,0,24,.30))}
.nav a{transition:color .18s ease,transform .18s ease,text-shadow .18s ease}
.nav a:hover{transform:translateY(-1px);text-shadow:0 0 14px rgba(255,255,255,.28)}
.nav a::after{box-shadow:0 0 0 rgba(208,0,24,0)}
.nav a.active::after{animation:apxNavGlow 2.3s ease-in-out infinite}
.icon-button{transition:transform .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.icon-button:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.8);box-shadow:0 7px 20px rgba(0,0,0,.22)}
.theme-toggle:hover .sun{transform:rotate(28deg)}
.theme-toggle:hover .moon{transform:rotate(-12deg) scale(1.05)}
.login-button:hover svg{transform:scale(1.08)}
.icon-button svg{transition:transform .25s ease}

/* Scroll reveals */
.apx-reveal{opacity:0;transform:translate3d(0,26px,0);filter:blur(2px);transition:opacity .62s ease var(--reveal-delay,0ms),transform .7s cubic-bezier(.2,.75,.2,1) var(--reveal-delay,0ms),filter .62s ease var(--reveal-delay,0ms)}
.apx-reveal.apx-reveal-left{transform:translate3d(-34px,10px,0)}
.apx-reveal.apx-reveal-right{transform:translate3d(34px,10px,0)}
.apx-reveal.apx-reveal-scale{transform:scale(.975) translate3d(0,18px,0)}
.apx-reveal.is-visible{opacity:1;transform:none;filter:none}
.apx-title-reveal{opacity:0;transform:translateY(18px);filter:blur(3px);transition:opacity .5s ease,transform .62s cubic-bezier(.2,.8,.2,1),filter .5s ease}
.apx-title-reveal.is-title-visible{opacity:1;transform:none;filter:none}
.simple-page-head.apx-reveal h1::after{transform:scaleX(0);transform-origin:center;transition:transform .65s cubic-bezier(.2,.8,.2,1) .18s}
.simple-page-head.apx-reveal.is-visible h1::after{transform:scaleX(1)}

/* Large imagery */
.template-hero,.page-hero,.status-hero{will-change:background-position}
.template-image{overflow:hidden}
.template-image img{transform:translate3d(0,var(--apx-parallax-y,0px),0) scale(1.045);will-change:transform;transition:filter .4s ease}
.template-image:hover img{filter:brightness(1.035) saturate(1.035)}
.faction-job-image img,.faction-reference-image img,.fleet-vehicle-card>img,.news-card img,.news-preview-card img{transition:transform .55s cubic-bezier(.2,.75,.2,1),filter .4s ease}
.faction-job-card:hover .faction-job-image img,.faction-reference-row:hover .faction-reference-image img,.fleet-vehicle-card:hover>img,.news-card:hover img,.news-preview-card:hover img{transform:scale(1.035);filter:brightness(1.035)}

/* Cards and content */
.team-reference-card,.directory-card,.fleet-card,.fleet-vehicle-card,.faq-group,.status-card,.status-panel,.contact-email-card,.news-card,.news-preview-card,.release-link,.rule-tab{transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background-color .24s ease}
.team-reference-card:hover,.directory-card:hover,.fleet-card:hover,.fleet-vehicle-card:hover,.contact-email-card:hover,.news-card:hover,.news-preview-card:hover,.release-link:hover{transform:translateY(-5px);border-color:rgba(208,0,24,.38);box-shadow:0 18px 42px rgba(0,0,0,.13)}
.team-reference-card .portrait img{transition:transform .45s cubic-bezier(.2,.8,.2,1),filter .35s ease}
.team-reference-card:hover .portrait img{transform:translateY(-7px) scale(1.025);filter:drop-shadow(0 14px 18px rgba(0,0,0,.22))}
.rule-tab:hover{transform:translateY(-2px)}
.rule-accordion-item,.faq-item{transition:border-color .24s ease,background-color .24s ease}
.rule-accordion-item.open,.faq-item.open{border-color:rgba(208,0,24,.34)}
.rule-toggle .plus,.faq-plus{display:inline-block;transition:transform .25s ease,color .25s ease}
.rule-accordion-item.open .rule-toggle .plus,.faq-item.open .faq-plus{transform:rotate(180deg);color:var(--red)}

/* Buttons and links */
.btn,.fleet-button,.step-link,.contact-mail,.social-row a{transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease,border-color .2s ease,color .2s ease}
.btn:hover,.fleet-button:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.16)}
.btn.red:hover,.fleet-button:hover{box-shadow:0 11px 26px rgba(208,0,24,.22)}
.step-link:hover,.contact-mail:hover{transform:translateX(4px)}
.social-row a:hover{transform:translateY(-3px) rotate(-2deg);border-color:rgba(255,255,255,.55)}
.social-row a:hover img{transform:scale(1.08)}
.social-row img{transition:transform .2s ease}

/* Onboarding */
.onboarding-shell{transition:box-shadow .3s ease,border-color .3s ease}
.onboarding-shell:hover{border-color:rgba(208,0,24,.26);box-shadow:0 22px 48px rgba(0,0,0,.12)}
.onboarding-tab{transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease}
.onboarding-tab:hover{transform:translateY(-1px)}
.onboarding-tab.active{animation:apxActiveStep 2.6s ease-in-out infinite}
.onboarding-progress span{position:relative;overflow:visible}
.onboarding-progress span::after{content:"";position:absolute;right:-2px;top:50%;width:6px;height:6px;border-radius:50%;background:var(--red);transform:translateY(-50%);box-shadow:0 0 0 0 rgba(208,0,24,.32);animation:apxProgressPulse 2s ease-out infinite}
.step-ghost{transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .4s ease}
.onboarding-panel.active .step-ghost{transform:translateX(-5px)}

/* Fleet modal */
.fleet-modal:not([hidden]) .fleet-modal-backdrop{animation:apxBackdropIn .22s ease both}
.fleet-modal:not([hidden]) .fleet-modal-dialog{animation:apxModalIn .3s cubic-bezier(.2,.8,.2,1) both}
.fleet-modal-close{transition:transform .2s ease,border-color .2s ease,background .2s ease}
.fleet-modal-close:hover{transform:rotate(90deg);border-color:var(--red)}

/* Status */
.history-bar{transform-origin:center bottom;animation:apxHistoryBar .42s cubic-bezier(.2,.8,.2,1) both}
.status-pill.online{animation:apxStatusPulse 2.5s ease-in-out infinite}
.status-summary-grid .status-card strong{display:inline-block;transition:transform .2s ease}
.status-card:hover strong{transform:translateY(-2px) scale(1.025)}

/* Footer */
.site-footer{position:relative;overflow:hidden}
.site-footer::before{content:"";position:absolute;left:-20%;top:0;width:36%;height:2px;background:linear-gradient(90deg,transparent,var(--red),transparent);animation:apxFooterSweep 8s linear infinite;opacity:.55}

@keyframes apxPageIn{from{opacity:0}to{opacity:1}}
@keyframes apxHeaderDrift{0%{background-position:49% center}100%{background-position:51% center}}
@keyframes apxLogoFloat{0%,100%{transform:translateY(0) rotate(0deg) scale(1)}30%{transform:translateY(-4px) rotate(-1.6deg) scale(1.025)}66%{transform:translateY(1px) rotate(1.2deg) scale(.995)}82%{transform:translateY(-1px) rotate(-.4deg) scale(1.012)}}
@keyframes apxNavGlow{0%,100%{box-shadow:0 0 0 rgba(208,0,24,0)}50%{box-shadow:0 0 10px rgba(208,0,24,.55)}}
@keyframes apxActiveStep{0%,100%{box-shadow:inset 0 -2px 0 var(--red),0 0 0 rgba(208,0,24,0)}50%{box-shadow:inset 0 -2px 0 var(--red),0 0 18px rgba(208,0,24,.08)}}
@keyframes apxProgressPulse{0%{box-shadow:0 0 0 0 rgba(208,0,24,.34)}70%{box-shadow:0 0 0 8px rgba(208,0,24,0)}100%{box-shadow:0 0 0 0 rgba(208,0,24,0)}}
@keyframes apxBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes apxModalIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes apxHistoryBar{from{opacity:.25;transform:scaleY(.18)}to{opacity:1;transform:scaleY(1)}}
@keyframes apxStatusPulse{0%,100%{box-shadow:0 0 0 rgba(25,189,104,0)}50%{box-shadow:0 0 18px rgba(25,189,104,.18)}}
@keyframes apxFooterSweep{from{transform:translateX(-20%)}to{transform:translateX(380%)}}

@media(max-width:900px){
  .site-header{animation:none}
  .brand img,.footer-logo img{animation-duration:5.8s}
  .template-image img{transform:scale(1.02)}
  .team-reference-card:hover,.directory-card:hover,.fleet-card:hover,.fleet-vehicle-card:hover,.contact-email-card:hover,.news-card:hover,.news-preview-card:hover,.release-link:hover{transform:none}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .apx-reveal,.apx-title-reveal{opacity:1!important;transform:none!important;filter:none!important}
  .template-image img{transform:none!important}
}


/* V10.32 richer brand motion */
.brand,.footer-logo{position:relative}
.brand::before,.footer-logo::before{
  content:"";
  position:absolute;
  left:-10px;
  top:50%;
  width:54px;
  height:54px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(208,0,24,.16),transparent 66%);
  transform:translateY(-50%) scale(.75);
  opacity:.18;
  pointer-events:none;
  animation:apxBrandGlow 4.8s ease-in-out infinite;
}
@keyframes apxBrandGlow{
  0%,100%{opacity:.10;transform:translateY(-50%) scale(.72)}
  50%{opacity:.34;transform:translateY(-50%) scale(1.08)}
}
@media(prefers-reduced-motion:reduce){.brand::before,.footer-logo::before{animation:none}}


/* V10.70 — cinematic one-time scroll motion system */
.apx-scroll-progress{
  position:fixed;left:0;right:0;top:0;height:3px;z-index:5000;pointer-events:none;
  transform-origin:left center;overflow:visible;
}
.apx-scroll-progress span{
  display:block;width:100%;height:100%;transform-origin:left center;
  transform:scaleX(var(--apx-scroll-progress,0));
  background:linear-gradient(90deg,#78000d 0%,#d00018 48%,#ff5164 100%);
  box-shadow:0 0 10px rgba(208,0,24,.72),0 0 24px rgba(208,0,24,.28);
  transition:transform .08s linear;
}

.apx-pointer-glow{
  position:fixed;left:0;top:0;width:420px;height:420px;z-index:2;pointer-events:none;border-radius:50%;
  background:radial-gradient(circle,rgba(208,0,24,.075) 0%,rgba(208,0,24,.035) 28%,transparent 68%);
  opacity:0;filter:blur(6px);transition:opacity .35s ease;will-change:transform;
}
.apx-pointer-glow.active{opacity:1}
.site-header,main,.site-footer{position:relative;z-index:3}

/* The first hero entrance is independent of scrolling. */
.apx-hero-intro{animation:apxHeroEntrance .82s cubic-bezier(.16,.78,.22,1) var(--apx-intro-delay,0ms) both}
@keyframes apxHeroEntrance{
  0%{opacity:0;transform:translate3d(0,18px,0) scale(.992);filter:blur(5px)}
  58%{opacity:1;filter:blur(0)}
  100%{opacity:1;transform:none;filter:none}
}

/* Scroll elements animate only once. JS unobserves them as soon as they enter. */
.apx-reveal{
  --apx-reveal-x:0px;--apx-reveal-y:38px;--apx-reveal-scale:.985;--apx-reveal-rotate:0deg;
  opacity:0;
  transform:translate3d(var(--apx-reveal-x),var(--apx-reveal-y),0) scale(var(--apx-reveal-scale)) rotate(var(--apx-reveal-rotate));
  filter:blur(5px) saturate(.88);
  transition:
    opacity .72s cubic-bezier(.2,.72,.2,1) var(--reveal-delay,0ms),
    transform .88s cubic-bezier(.16,.82,.2,1) var(--reveal-delay,0ms),
    filter .76s ease var(--reveal-delay,0ms),
    clip-path .92s cubic-bezier(.16,.82,.2,1) var(--reveal-delay,0ms);
  will-change:transform,opacity,filter,clip-path;
}
.apx-reveal-lift{--apx-reveal-y:44px;--apx-reveal-scale:.992}
.apx-reveal-scale{--apx-reveal-y:28px;--apx-reveal-scale:.955}
.apx-reveal-soft{--apx-reveal-y:22px;--apx-reveal-scale:.995;filter:blur(3px) saturate(.92)}
.apx-reveal-clip{--apx-reveal-y:24px;--apx-reveal-scale:1;clip-path:inset(0 0 18% 0 round 10px)}
.apx-reveal-left{--apx-reveal-x:-48px;--apx-reveal-y:12px}
.apx-reveal-right{--apx-reveal-x:48px;--apx-reveal-y:12px}
.apx-reveal.is-visible{
  opacity:1;transform:translate3d(0,0,0) scale(1) rotate(0);filter:none;clip-path:inset(0 0 0 0 round 0);
}
.apx-reveal.apx-reveal-done{will-change:auto}

/* More deliberate title entrance with a red scan line. */
.apx-title-reveal{position:relative;opacity:0;transform:translateY(24px);filter:blur(5px);clip-path:inset(0 0 100% 0);transition:opacity .56s ease,transform .74s cubic-bezier(.16,.84,.2,1),filter .56s ease,clip-path .74s cubic-bezier(.16,.84,.2,1)}
.apx-title-reveal::before{
  content:"";position:absolute;left:0;bottom:-8px;width:min(110px,32%);height:2px;background:linear-gradient(90deg,var(--red),rgba(208,0,24,0));
  transform:scaleX(0);transform-origin:left;box-shadow:0 0 12px rgba(208,0,24,.38);transition:transform .7s cubic-bezier(.16,.84,.2,1) .18s;
}
.apx-title-reveal.is-title-visible{opacity:1;transform:none;filter:none;clip-path:inset(0 0 0 0)}
.apx-title-reveal.is-title-visible::before{transform:scaleX(1)}

/* Image curtain reveal. */
.apx-visual-reveal{position:relative;isolation:isolate;overflow:hidden}
.apx-visual-reveal::after{
  content:"";position:absolute;inset:-2px;z-index:8;pointer-events:none;
  background:linear-gradient(105deg,#08090b 0 42%,#78000d 49%,#d00018 50%,#090b0e 57% 100%);
  transform:translate3d(-105%,0,0);opacity:0;
}
.apx-visual-reveal.is-visible::after{animation:apxImageCurtain 1.08s cubic-bezier(.18,.72,.18,1) var(--reveal-delay,0ms) both}
@keyframes apxImageCurtain{
  0%{transform:translate3d(-105%,0,0);opacity:.98}
  48%{opacity:.98}
  100%{transform:translate3d(105%,0,0);opacity:0}
}
.apx-visual-reveal img{transform:translate3d(0,var(--apx-parallax-y,0px),0) scale(1.055);transition:transform 1s cubic-bezier(.16,.82,.2,1),filter .5s ease}
.apx-visual-reveal.is-visible img{transform:translate3d(0,var(--apx-parallax-y,0px),0) scale(1.035)}

/* Card edge sweep is short and only runs on first reveal. */
.apx-card-reveal{position:relative;isolation:isolate;overflow:hidden}
.apx-card-reveal::before{
  content:"";position:absolute;z-index:9;pointer-events:none;left:-35%;top:-2px;width:24%;height:2px;
  background:linear-gradient(90deg,transparent,#ff5b6d,transparent);opacity:0;filter:drop-shadow(0 0 5px rgba(208,0,24,.65));
}
.apx-card-reveal.is-visible::before{animation:apxCardScan .9s ease-out calc(var(--reveal-delay,0ms) + 260ms) both}
@keyframes apxCardScan{0%{left:-35%;opacity:0}18%{opacity:.9}75%{opacity:.6}100%{left:118%;opacity:0}}

/* Scroll direction changes only ambient header depth, never replays content. */
.site-header{transition:filter .28s ease,box-shadow .28s ease}
body.apx-has-scrolled .site-header{filter:saturate(1.04);box-shadow:0 14px 30px rgba(0,0,0,.12)}
body.apx-scrolling-down .site-header{filter:saturate(1.07) brightness(.97)}
body.apx-scrolling-up .site-header{filter:saturate(1.04) brightness(1.01)}

/* Background parallax uses a CSS custom property and keeps existing background images. */
.template-hero,.page-hero,.status-hero,.changelog-hero,.apx-goodbye{background-position:center calc(50% + var(--apx-bg-shift,0px))!important}

/* Click ripple */
.btn,.fleet-button,.icon-button,.step-link,.contact-mail,.onboarding-tab{position:relative;overflow:hidden}
.apx-ripple{
  position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;z-index:30;
  background:rgba(255,255,255,.46);transform:scale(0);animation:apxRipple .58s ease-out forwards;
}
@keyframes apxRipple{0%{opacity:.68;transform:scale(0)}100%{opacity:0;transform:scale(22)}}

/* Existing hover motion gets a slightly more premium shadow after reveal. */
.apx-card-reveal.apx-reveal-done:hover{box-shadow:0 22px 52px rgba(0,0,0,.18),0 0 0 1px rgba(208,0,24,.08)}

@media(max-width:900px){
  .apx-pointer-glow{display:none}
  .apx-reveal{--apx-reveal-y:28px;filter:blur(2px);transition-duration:.58s,.7s,.58s,.72s}
  .apx-reveal-scale{--apx-reveal-scale:.975}
  .apx-reveal-left,.apx-reveal-right{--apx-reveal-x:0px;--apx-reveal-y:28px}
  .apx-visual-reveal::after{background:linear-gradient(105deg,#08090b 0 44%,#a00012 50%,#08090b 56% 100%)}
}

@media(prefers-reduced-motion:reduce){
  .apx-scroll-progress,.apx-pointer-glow{display:none!important}
  .apx-hero-intro,.apx-visual-reveal.is-visible::after,.apx-card-reveal.is-visible::before,.apx-ripple{animation:none!important}
  .apx-reveal,.apx-title-reveal{opacity:1!important;transform:none!important;filter:none!important;clip-path:none!important}
}