@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: slow-push 18s ease-in-out infinite alternate; transform-origin: 72% 50%; }
  .hero-grid { animation: grid-drift 18s linear infinite; }
  .hero-effects i { position:absolute; display:block; border-radius:50%; pointer-events:none; }
  .hero-effects i:nth-child(1) { width:420px; height:420px; right:-110px; top:8%; background:radial-gradient(circle,rgba(255,122,0,.21),transparent 65%); filter:blur(9px); animation: ember 9s ease-in-out infinite alternate; }
  .hero-effects i:nth-child(2) { width:1px; height:390px; right:28%; top:15%; background:linear-gradient(transparent,rgba(255,154,50,.9),transparent); transform:rotate(24deg); opacity:.7; animation: scan 6s ease-in-out infinite; }
  .hero-effects i:nth-child(3) { width:8px; height:8px; right:24%; top:66%; background:#ff9a32; box-shadow:0 0 20px 6px rgba(255,122,0,.37); animation: pulse 2.8s ease-in-out infinite; }
  .button { position:relative; overflow:hidden; }
  .button::after { content:""; position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-22deg); animation: shine 5.5s ease-in-out infinite; }
  .project-card, .catalogue-card, .review-card, .feature-list article, .steps li { animation: rise-in .75s both; animation-timeline:view(); animation-range:entry 10% cover 25%; }
}

.site-header.scrolled { position:fixed; background:rgba(11,11,12,.87); backdrop-filter:blur(16px); box-shadow:0 8px 35px rgba(0,0,0,.24); animation: header-in .28s ease-out; }
.catalogue-card .project-art, .project-card .project-art { background-size:cover; }
.catalogue-card:hover .project-art, .project-card:hover .project-art { filter:brightness(1.12) saturate(1.1); }

@keyframes slow-push { from { transform:scale(1); } to { transform:scale(1.055); } }
@keyframes grid-drift { from { transform:translate(0,0); } to { transform:translate(32px,22px); } }
@keyframes ember { from { transform:translate(0,0) scale(.9); opacity:.35; } to { transform:translate(-45px,33px) scale(1.16); opacity:.85; } }
@keyframes scan { 0%,100% { transform:rotate(24deg) translateY(-15px); opacity:0; } 45%,55% { opacity:.75; } 50% { transform:rotate(24deg) translateY(55px); } }
@keyframes pulse { 0%,100% { transform:scale(.65); opacity:.35; } 50% { transform:scale(1.4); opacity:1; } }
@keyframes shine { 0%,72%,100% { left:-60%; } 87% { left:130%; } }
@keyframes rise-in { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes header-in { from { transform:translateY(-100%); } to { transform:translateY(0); } }

@media (max-width: 680px) { .hero-effects i:nth-child(1){width:280px;height:280px;right:-120px;top:30%}.hero-effects i:nth-child(2){right:18%;height:260px}.site-header.scrolled{height:67px} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior:auto!important; animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; } }

/* Main banner and depth layers */
.hero-art {
  background-image: linear-gradient(90deg, rgba(11,11,12,.95) 0%, rgba(11,11,12,.82) 31%, rgba(11,11,12,.34) 66%, rgba(11,11,12,.22)), url('elite-main-banner.png') !important;
  background-position: center center !important;
  will-change: transform;
}
.hero-grid { will-change: transform; }
.hero-effects { position:absolute; inset:0; overflow:hidden; pointer-events:none; will-change:transform; }

@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: none; transform: translate3d(0, var(--hero-art-parallax, 0px), 0) scale(1.12); }
  .hero-grid { animation: none; transform: translate3d(0, var(--hero-grid-parallax, 0px), 0); }
  .hero-effects { transform: translate3d(0, var(--hero-effects-parallax, 0px), 0); }
}

@media (max-width: 680px) {
  .hero-art { background-position: 59% center !important; }
}