/* Dedicated hero and category motion system. */
@property --ac-css-idle-x { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ac-css-idle-y { syntax: '<length>'; inherits: false; initial-value: 0px; }
@property --ac-css-idle-rotate { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --ac-css-idle-scale { syntax: '<number>'; inherits: false; initial-value: 1; }

.aurelis-root .hero-stage,
.aurelis-root .stage-glow,
.aurelis-root .glass-card,
.aurelis-root .cat-card,
.aurelis-root .cat-card::after { will-change: transform, opacity; }

.aurelis-root .hero-stage { perspective: 1100px; transform-style: preserve-3d; }
.aurelis-root .stage-glow { opacity: .78; transform: translate3d(0, 0, 0) scale(1); transition: opacity 420ms var(--ease), transform 600ms var(--ease); }
.aurelis-root .hero-stage:hover .stage-glow { opacity: .96; transform: translate3d(0, -6px, 0) scale(1.03); }

/* One transform pipeline combines placement, float, wave, focus and press. */
.aurelis-root .glass-card {
    --ac-base-x: 0%; --ac-idle-x: 0px; --ac-idle-y: 0px;
    --ac-wave-x: 0px; --ac-wave-y: 0px; --ac-wave-rotate: 0deg;
    --ac-hover-y: 0px; --ac-hover-scale: 1; --ac-press-scale: 1;
    --ac-css-idle-x: 0px; --ac-css-idle-y: 0px; --ac-css-idle-rotate: 0deg; --ac-css-idle-scale: 1;
    --ac-idle-duration: 10s; --ac-idle-delay: 0s; --ac-idle-motion-scale: 1;
    --ac-ripple-x: 50%; --ac-ripple-y: 50%; --ac-ripple-scale: 0; --ac-ripple-opacity: 0;
    transform: translate3d(calc(var(--ac-base-x) + var(--ac-idle-x) + var(--ac-css-idle-x) + var(--ac-wave-x)), calc(var(--ac-idle-y) + var(--ac-css-idle-y) + var(--ac-wave-y) + var(--ac-hover-y)), 0) rotate(calc(var(--ac-wave-rotate) + var(--ac-css-idle-rotate))) scale(calc(var(--ac-hover-scale) * var(--ac-press-scale) * var(--ac-css-idle-scale)));
    transition: filter 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease);
    animation: aurelis-card-idle var(--ac-idle-duration) ease-in-out var(--ac-idle-delay) infinite alternate;
}
.aurelis-root .gc4 { --ac-base-x: -50%; }

/* Each card follows a distinct, deterministic multi-point path. */
.aurelis-root .gc1 { --ac-idle-x-a: -6px; --ac-idle-x-b: 7px; --ac-idle-y-a: -9px; --ac-idle-y-b: 5px; --ac-idle-rot-a: -.35deg; --ac-idle-rot-b: .25deg; --ac-idle-scale-a: .992; --ac-idle-scale-b: 1.008; --ac-idle-duration: 8.7s; --ac-idle-delay: -1.4s; }
.aurelis-root .gc2 { --ac-idle-x-a: 8px; --ac-idle-x-b: -5px; --ac-idle-y-a: 6px; --ac-idle-y-b: -12px; --ac-idle-rot-a: .4deg; --ac-idle-rot-b: -.28deg; --ac-idle-scale-a: 1.006; --ac-idle-scale-b: .994; --ac-idle-duration: 11.8s; --ac-idle-delay: -5.1s; }
.aurelis-root .gc3 { --ac-idle-x-a: -4px; --ac-idle-x-b: 6px; --ac-idle-y-a: 11px; --ac-idle-y-b: -5px; --ac-idle-rot-a: -.22deg; --ac-idle-rot-b: .45deg; --ac-idle-scale-a: .996; --ac-idle-scale-b: 1.006; --ac-idle-duration: 9.6s; --ac-idle-delay: -7.2s; }
.aurelis-root .gc4 { --ac-idle-x-a: 5px; --ac-idle-x-b: -7px; --ac-idle-y-a: -7px; --ac-idle-y-b: 10px; --ac-idle-rot-a: .28deg; --ac-idle-rot-b: -.42deg; --ac-idle-scale-a: 1.008; --ac-idle-scale-b: .992; --ac-idle-duration: 13.2s; --ac-idle-delay: -3.8s; }
.aurelis-root .gc5 { --ac-idle-x-a: -9px; --ac-idle-x-b: 4px; --ac-idle-y-a: 5px; --ac-idle-y-b: -8px; --ac-idle-rot-a: -.46deg; --ac-idle-rot-b: .2deg; --ac-idle-scale-a: .994; --ac-idle-scale-b: 1.007; --ac-idle-duration: 10.4s; --ac-idle-delay: -8.6s; }
.aurelis-root .gc6 { --ac-idle-x-a: 6px; --ac-idle-x-b: -8px; --ac-idle-y-a: -12px; --ac-idle-y-b: 6px; --ac-idle-rot-a: .36deg; --ac-idle-rot-b: -.18deg; --ac-idle-scale-a: 1.005; --ac-idle-scale-b: .995; --ac-idle-duration: 12.6s; --ac-idle-delay: -2.2s; }
.aurelis-root .gc7 { --ac-idle-x-a: -5px; --ac-idle-x-b: 8px; --ac-idle-y-a: 8px; --ac-idle-y-b: -6px; --ac-idle-rot-a: -.3deg; --ac-idle-rot-b: .4deg; --ac-idle-scale-a: .993; --ac-idle-scale-b: 1.006; --ac-idle-duration: 7.9s; --ac-idle-delay: -6.4s; }

@keyframes aurelis-card-idle {
    0% { --ac-css-idle-x: calc(var(--ac-idle-x-a) * var(--ac-idle-motion-scale)); --ac-css-idle-y: calc(var(--ac-idle-y-a) * var(--ac-idle-motion-scale)); --ac-css-idle-rotate: calc(var(--ac-idle-rot-a) * var(--ac-idle-motion-scale)); --ac-css-idle-scale: var(--ac-idle-scale-a); }
    20% { --ac-css-idle-x: calc(var(--ac-idle-x-b) * .35 * var(--ac-idle-motion-scale)); --ac-css-idle-y: calc(var(--ac-idle-y-b) * .72 * var(--ac-idle-motion-scale)); --ac-css-idle-rotate: calc(var(--ac-idle-rot-b) * .55 * var(--ac-idle-motion-scale)); --ac-css-idle-scale: 1.002; }
    45% { --ac-css-idle-x: calc(var(--ac-idle-x-b) * var(--ac-idle-motion-scale)); --ac-css-idle-y: calc(var(--ac-idle-y-b) * var(--ac-idle-motion-scale)); --ac-css-idle-rotate: calc(var(--ac-idle-rot-b) * var(--ac-idle-motion-scale)); --ac-css-idle-scale: var(--ac-idle-scale-b); }
    70% { --ac-css-idle-x: calc(var(--ac-idle-x-a) * .55 * var(--ac-idle-motion-scale)); --ac-css-idle-y: calc(var(--ac-idle-y-a) * .3 * var(--ac-idle-motion-scale)); --ac-css-idle-rotate: calc(var(--ac-idle-rot-a) * .35 * var(--ac-idle-motion-scale)); --ac-css-idle-scale: .998; }
    100% { --ac-css-idle-x: calc(var(--ac-idle-x-a) * var(--ac-idle-motion-scale)); --ac-css-idle-y: calc(var(--ac-idle-y-a) * var(--ac-idle-motion-scale)); --ac-css-idle-rotate: calc(var(--ac-idle-rot-a) * var(--ac-idle-motion-scale)); --ac-css-idle-scale: var(--ac-idle-scale-a); }
}

/* Interactive states take priority over idle drift. */
.aurelis-root .hero-stage:hover .glass-card,
.aurelis-root .glass-card:hover,
.aurelis-root .glass-card:focus-visible,
.aurelis-root .glass-card.is-focused,
.aurelis-root .glass-card.is-pressed { animation-play-state: paused; }
.aurelis-root .glass-card:hover,
.aurelis-root .glass-card:focus-visible,
.aurelis-root .glass-card.is-focused {
    --ac-hover-y: -4px; --ac-hover-scale: 1.045; z-index: 8;
    filter: brightness(1.08) saturate(1.05);
    border-color: rgba(123, 128, 255, .5);
    box-shadow: 0 20px 42px -18px rgba(94, 107, 255, .62), 0 0 22px rgba(94, 107, 255, .18), inset 0 1px 0 rgba(255, 255, 255, .16);
}
.aurelis-root .glass-card.is-pressed { --ac-press-scale: .97; transition-duration: 110ms; }
.aurelis-root .glass-card::after { content: ""; position: absolute; inset: -30%; pointer-events: none; border-radius: 50%; background: radial-gradient(circle at var(--ac-ripple-x) var(--ac-ripple-y), rgba(247, 147, 30, .3), rgba(94, 107, 255, .16) 18%, transparent 58%); transform: scale(var(--ac-ripple-scale)); opacity: var(--ac-ripple-opacity); transition: transform 360ms var(--ease), opacity 360ms var(--ease); }
.aurelis-root .glass-card.is-ripple-active::after { --ac-ripple-scale: 1; --ac-ripple-opacity: .8; }
.aurelis-root .glass-card.is-ripple-fade::after { --ac-ripple-scale: 1.35; --ac-ripple-opacity: 0; }

/* Category cards keep their existing layout with tactile active feedback. */
.aurelis-root .cat-card {
    --aurelis-cat-card-bg: #0F1B29; --aurelis-cat-card-border: rgba(48, 68, 103, .35);
    --aurelis-cat-hover-grad-start: #152437; --aurelis-cat-hover-grad-end: #1C2E57;
    --aurelis-cat-hover-border: rgba(123, 128, 255, .25); --aurelis-cat-hover-glow: rgba(123, 128, 255, .18);
    --aurelis-cat-icon-color: #f39c12; --aurelis-cat-icon-bg: rgba(48, 68, 103, .45); --aurelis-cat-icon-bg-hover: rgba(58, 79, 116, .55);
    --aurelis-cat-link-color: #A4B1C7; --aurelis-cat-link-hover-color: #FF8A00;
    --ac-ripple-x: 50%; --ac-ripple-y: 50%; --ac-ripple-scale: .22; --ac-ripple-opacity: 0;
    background: var(--aurelis-cat-card-bg); border-color: var(--aurelis-cat-card-border); box-shadow: 0 10px 22px -20px rgba(0, 0, 0, .8); animation: none;
    transition: transform 300ms ease, opacity 300ms ease, background 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
}
.aurelis-root .cat-card:hover,
.aurelis-root .cat-card:focus-within,
.aurelis-root .cat-card.is-active { background: linear-gradient(145deg, var(--aurelis-cat-hover-grad-start) 0%, #172B46 70%, var(--aurelis-cat-hover-grad-end) 100%); border-color: var(--aurelis-cat-hover-border); box-shadow: 0 18px 40px var(--aurelis-cat-hover-glow); transform: translate3d(0, -4px, 0); }
.aurelis-root .cat-card.is-active { border-color: rgba(247, 147, 30, .72); box-shadow: 0 18px 40px rgba(94, 107, 255, .22), 0 0 0 1px rgba(247, 147, 30, .2); }
.aurelis-root .cat-card::after { content: ""; position: absolute; width: 180px; height: 180px; left: 0; top: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(94, 107, 255, .34) 0%, rgba(94, 107, 255, 0) 70%); transform: translate3d(calc(var(--ac-ripple-x) - 90px), calc(var(--ac-ripple-y) - 90px), 0) scale(var(--ac-ripple-scale)); opacity: var(--ac-ripple-opacity); transition: transform 340ms var(--ease), opacity 340ms var(--ease); }
.aurelis-root .cat-card.is-ripple-active::after { --ac-ripple-scale: 1.08; --ac-ripple-opacity: 1; }
.aurelis-root .cat-card.is-ripple-fade::after { --ac-ripple-scale: 1.22; --ac-ripple-opacity: 0; }
.aurelis-root .cat-icon, .aurelis-root .cat-link { transition: transform 300ms ease, opacity 300ms ease, background 300ms ease, box-shadow 300ms ease; }
.aurelis-root .cat-icon { width: 52px; height: 52px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--aurelis-cat-icon-bg); color: var(--aurelis-cat-icon-color); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.aurelis-root .cat-card:hover .cat-icon, .aurelis-root .cat-card:focus-within .cat-icon, .aurelis-root .cat-card.is-active .cat-icon { background: linear-gradient(150deg, rgba(255, 138, 0, .08) 0%, rgba(123, 128, 255, .12) 100%), var(--aurelis-cat-icon-bg-hover); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 8px 16px -14px rgba(24, 34, 56, .85); transform: translate3d(0, -2px, 0); }
.aurelis-root .cat-card.is-active .cat-icon { color: var(--highlight); }
.aurelis-root .cat-link { color: var(--aurelis-cat-link-color); opacity: .96; display: inline-flex; align-items: center; gap: 8px; }
.aurelis-root .cat-link::after { content: "\2192"; display: inline-block; transform: translate3d(0, 0, 0); transition: transform 300ms ease, opacity 300ms ease; }
.aurelis-root .cat-card:hover .cat-link, .aurelis-root .cat-card:focus-within .cat-link, .aurelis-root .cat-card.is-active .cat-link { color: var(--aurelis-cat-link-hover-color); opacity: 1; }
.aurelis-root .cat-card:hover .cat-link::after, .aurelis-root .cat-card:focus-within .cat-link::after, .aurelis-root .cat-card.is-active .cat-link::after { transform: translate3d(4px, 0, 0); }

@media (max-width: 1024px) {
    .aurelis-root .glass-card {
        --ac-wave-limit: 5px;
        --ac-idle-motion-scale: .7;
    }
}
@media (max-width: 767px) {
    .aurelis-root .glass-card {
        --ac-wave-limit: 3px;
        --ac-idle-motion-scale: .52;
    }
}
@media (prefers-reduced-motion: reduce) {
    .aurelis-root .stage-glow, .aurelis-root .glass-card, .aurelis-root .cat-card, .aurelis-root .cat-card::after, .aurelis-root .cat-icon, .aurelis-root .cat-link { animation: none !important; transition: none !important; }
    .aurelis-root .glass-card { transform: translate3d(var(--ac-base-x), 0, 0) !important; }
    .aurelis-root .cat-card:hover, .aurelis-root .cat-card:focus-within, .aurelis-root .cat-card.is-active { transform: none; }
}