/* Aurora motion lab: quiet vector scenes that reveal themselves as the page moves. */
.theme-aurora .fresh-aurora { position: relative; isolation: isolate; overflow: hidden; background: transparent; }
.theme-aurora .fresh-aurora::before { content: ''; position: fixed; z-index: -2; inset: 0; pointer-events: none; opacity: .75; background: radial-gradient(circle at 18% 22%, #5be1c333 0 2px, transparent 3px 100px), radial-gradient(circle at 76% 34%, #7187ff44 0 1px, transparent 2px 140px), linear-gradient(125deg, #0c1728, #111f37 50%, #0a1423); transition: background 1.2s ease, opacity 1.2s ease; }
.theme-aurora .fresh-aurora::after { content: ''; position: fixed; z-index: -1; inset: 10% -10%; pointer-events: none; opacity: .25; background: repeating-linear-gradient(115deg, transparent 0 100px, #8ba5ff14 101px 102px, transparent 103px 170px); transform: rotate(-4deg); }
.theme-aurora[data-aurora-scene="hero"] .fresh-aurora::before { background: radial-gradient(circle at 72% 20%, #6c82ff66 0 3px, transparent 4px 160px), radial-gradient(circle at 22% 78%, #45dbc04d 0 2px, transparent 3px 180px), #0c1728; }
.theme-aurora[data-aurora-scene="animations"] .fresh-aurora::before { background: radial-gradient(circle at 22% 40%, #55dec84d 0 2px, transparent 3px 120px), radial-gradient(circle at 80% 65%, #9375ff52 0 2px, transparent 3px 140px), #101a31; }
.theme-aurora[data-aurora-scene="cities"] .fresh-aurora::before { background: radial-gradient(ellipse at 30% 70%, #4cdec64d, transparent 38%), radial-gradient(ellipse at 75% 30%, #7d76ff55, transparent 44%), #0e1c30; }
.theme-aurora .fresh-aurora .aurora-scene { position: relative; background: linear-gradient(180deg, transparent, #13244026 55%, transparent); }
.theme-aurora .fresh-aurora .aurora-scene::after { content: ''; position: absolute; z-index: -1; inset: 8% 4%; border: 1px solid #9fc4ff10; border-radius: 48% 52% 45% 55%; transform: rotate(-5deg); pointer-events: none; }
.theme-aurora .fresh-aurora .fresh-nav, .theme-aurora .fresh-aurora .fresh-footer { background: #0d1829b8; backdrop-filter: blur(15px); }
.theme-aurora .fresh-aurora .fresh-hero { min-height: 700px; }
.theme-aurora .fresh-aurora .fresh-hero aside { border-radius: 34% 66% 40% 60% / 45% 35% 65% 55%; box-shadow: inset 0 0 80px #a8c4ff24, 0 30px 90px #0005; animation: aurora-float 8s ease-in-out infinite alternate; }
.theme-aurora .fresh-aurora .fresh-hero aside::before, .theme-aurora .fresh-aurora .fresh-hero aside::after { content: ''; position: absolute; border: 1px solid #b7d8ff66; border-radius: 50%; inset: 15%; animation: aurora-orbit 13s linear infinite; }
.theme-aurora .fresh-aurora .fresh-hero aside::after { inset: 27%; border-color: #65d9c788; animation-direction: reverse; animation-duration: 9s; }
.theme-aurora .fresh-aurora .fresh-head h2, .theme-aurora .fresh-aurora .fresh-hero h1, .theme-aurora .fresh-aurora .fresh-proof h2, .theme-aurora .fresh-aurora .fresh-contact h2 { text-shadow: 0 0 32px #708bff18; }

.aurora-animations { overflow: hidden; }
.aurora-animations-intro { display: block; max-width: 560px; margin-top: 22px; color: #b9c9e7; line-height: 1.6; }
.aurora-animation-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 42px; }
.aurora-animation-card { min-width: 0; overflow: hidden; border: 1px solid #a9c4ff36; border-radius: 18px; background: #16294566; box-shadow: 0 15px 45px #0002; backdrop-filter: blur(12px); }
.aurora-animation-art { position: relative; min-height: 170px; overflow: hidden; background: radial-gradient(circle at 55% 48%, #7087ff80, transparent 25%), #11223a; }
.aurora-animation-art i, .aurora-animation-art b { position: absolute; display: block; border: 1px solid #93e9dc99; }
.aurora-animation-art i { width: 92px; height: 92px; left: 50%; top: 50%; border-radius: 50%; transform: translate(-50%, -50%); }
.aurora-animation-art b { width: 18px; height: 18px; right: 20%; top: 26%; border-radius: 50%; background: #76ebd8; box-shadow: 0 0 22px #76ebd8; }
.aurora-animation-art em { position: absolute; left: 15px; top: 14px; color: #b9caff; font: 700 11px 'DM Sans', sans-serif; font-style: normal; letter-spacing: .13em; }
.aurora-animation-copy { padding: 17px; }
.aurora-animation-copy > span { color: #90e6da; font: 600 10px 'DM Sans', sans-serif; letter-spacing: .1em; text-transform: uppercase; }
.aurora-animation-copy h3 { margin: 10px 0 17px; color: #f6f8ff; font: 600 18px/1.1 'DM Sans', sans-serif; letter-spacing: -.04em; }
.aurora-animation-copy button { display: flex; justify-content: space-between; width: 100%; padding: 9px 0 0; border: 0; border-top: 1px solid #b7ceff45; background: none; color: #e7edff; font: 700 12px 'DM Sans', sans-serif; cursor: pointer; }
.aurora-animation-copy button:hover { color: #7ef0dc; }
.aurora-animation-card.is-playing .aurora-animation-art i, .aurora-animation-card.is-playing .aurora-animation-art b { animation-play-state: running; }
.aurora-animation-art i, .aurora-animation-art b { animation-play-state: paused; }
.aurora-animation-card.orbit .aurora-animation-art i { animation: aurora-orbit 4s linear infinite; }
.aurora-animation-card.aurora .aurora-animation-art { background: radial-gradient(circle at 35% 60%, #55ddc0, transparent 26%), radial-gradient(circle at 75% 35%, #8177ff, transparent 32%), #11223a; background-size: 160% 160%; }
.aurora-animation-card.aurora.is-playing .aurora-animation-art { animation: aurora-shift 3.2s ease-in-out infinite alternate; }
.aurora-animation-card.route .aurora-animation-art i { width: 150px; height: 50px; border-radius: 50%; transform: translate(-50%, -50%) rotate(-28deg); animation: aurora-route 3s ease-in-out infinite; }
.aurora-animation-card.route .aurora-animation-art b { animation: aurora-route-dot 3s ease-in-out infinite; }
.aurora-animation-card.wave .aurora-animation-art i { width: 190px; height: 60px; border-radius: 50%; transform: translate(-50%, -50%) rotate(12deg); animation: aurora-wave 3s ease-in-out infinite; }
.aurora-animation-card.glass .aurora-animation-art i { border-radius: 20px; transform: translate(-50%, -50%) rotate(45deg); animation: aurora-glass 3.4s ease-in-out infinite; }
.aurora-animation-card.pulse .aurora-animation-art i { animation: aurora-pulse 2.4s ease-in-out infinite; }
.aurora-animation-card.stars .aurora-animation-art i { border: 0; box-shadow: -45px -30px 0 -1px #8feee2, 38px -40px 0 -1px #a7b3ff, 50px 35px 0 -1px #8feee2, -34px 44px 0 -1px #a7b3ff; animation: aurora-stars 3s ease-in-out infinite; }
.aurora-animation-card.horizon .aurora-animation-art i { width: 180px; height: 22px; border-radius: 50%; animation: aurora-horizon 3.5s ease-in-out infinite; }
.aurora-animation-card.crystal .aurora-animation-art i { border-radius: 8px; transform: translate(-50%, -50%) rotate(45deg); animation: aurora-crystal 4s linear infinite; }
.aurora-animation-card.breath .aurora-animation-art i { animation: aurora-breath 3.6s ease-in-out infinite; }

.font-card-names strong { color: #163b47; }
.font-card-names > span { color: #2e8b7b; font-weight: 800; }
.font-card-bottom { color: #35565d; }
.font-card-bottom button { color: #102f38; background: #8fe8d0; }
.preview-switcher .switcher-fonts { color: #8ff0d5; border-color: #8ff0d5; background: #18332f; }

@keyframes aurora-float { to { transform: translateY(-12px) rotate(2deg); } }
@keyframes aurora-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes aurora-shift { to { background-position: 90% 10%; } }
@keyframes aurora-route { 50% { transform: translate(-40%, -50%) rotate(-18deg); } }
@keyframes aurora-route-dot { 50% { transform: translate(-22px, 26px); } }
@keyframes aurora-wave { 50% { transform: translate(-50%, -35%) rotate(-8deg) scaleX(1.2); } }
@keyframes aurora-glass { 50% { transform: translate(-50%, -50%) rotate(135deg) scale(.75); opacity: .5; } }
@keyframes aurora-pulse { 50% { transform: translate(-50%, -50%) scale(1.65); opacity: .25; box-shadow: 0 0 38px #78ead5; } }
@keyframes aurora-stars { 50% { transform: translate(-50%, -50%) scale(1.25); opacity: .65; } }
@keyframes aurora-horizon { 50% { transform: translate(-50%, -50%) scaleX(.65); opacity: .35; } }
@keyframes aurora-crystal { to { transform: translate(-50%, -50%) rotate(405deg); } }
@keyframes aurora-breath { 50% { transform: translate(-50%, -50%) scale(1.28); box-shadow: 0 0 38px #6de6d0; } }

@media (max-width: 1100px) { .aurora-animation-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .aurora-animation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .theme-aurora .fresh-aurora .fresh-hero { min-height: 0; } }
@media (max-width: 480px) { .aurora-animation-grid { grid-template-columns: 1fr; } }