mirror of
https://codeberg.org/Kankys/ApolloNvim2025.git
synced 2026-11-11 16:34:36 +01:00
685 lines
20 KiB
CSS
685 lines
20 KiB
CSS
/* ============================================================
|
||
ApolloNvim – animations.css
|
||
Web: apollo-nvim.lukan.cz
|
||
All keyframes, scroll animations, stagger delays,
|
||
micro-interactions and loading screen transitions.
|
||
============================================================ */
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
1. CORE KEYFRAMES
|
||
──────────────────────────────────────────────────────────── */
|
||
|
||
/* 1.1 fadeIn ─ simple opacity */
|
||
@keyframes fadeIn {
|
||
from { opacity: 0; }
|
||
to { opacity: 1; }
|
||
}
|
||
|
||
/* 1.2 slideUp ─ rise + fade */
|
||
@keyframes slideUp {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(40px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
/* 1.3 slideInLeft ─ enter from left */
|
||
@keyframes slideInLeft {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(-60px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
/* 1.4 slideInRight ─ enter from right */
|
||
@keyframes slideInRight {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(60px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
/* 1.5 float ─ gentle levitation for hero images / icons */
|
||
@keyframes float {
|
||
0%, 100% {
|
||
transform: translateY(0px);
|
||
}
|
||
33% {
|
||
transform: translateY(-10px);
|
||
}
|
||
66% {
|
||
transform: translateY(-6px);
|
||
}
|
||
}
|
||
|
||
/* 1.6 pulse-glow ─ pulsing purple box-shadow */
|
||
@keyframes pulse-glow {
|
||
0%, 100% {
|
||
box-shadow:
|
||
0 0 0 0 rgba(189, 147, 249, 0),
|
||
0 0 20px 2px rgba(189, 147, 249, 0.15);
|
||
}
|
||
50% {
|
||
box-shadow:
|
||
0 0 0 4px rgba(189, 147, 249, 0.08),
|
||
0 0 40px 8px rgba(189, 147, 249, 0.35);
|
||
}
|
||
}
|
||
|
||
/* 1.7 typing ─ blinking cursor caret */
|
||
@keyframes typing {
|
||
0%, 100% { border-right-color: rgba(189, 147, 249, 1); }
|
||
50% { border-right-color: transparent; }
|
||
}
|
||
|
||
/* Typewriter text reveal (pair with .typewriter class) */
|
||
@keyframes typewriter {
|
||
from { width: 0; }
|
||
to { width: 100%; }
|
||
}
|
||
|
||
/* 1.8 spin-slow ─ slow full rotation (used by loading logo) */
|
||
@keyframes spin-slow {
|
||
from { transform: rotate(0deg); }
|
||
to { transform: rotate(360deg); }
|
||
}
|
||
|
||
/* 1.9 glitch ─ subtle horizontal glitch for headings */
|
||
@keyframes glitch {
|
||
0% { clip-path: inset(0 0 100% 0); transform: translate(0); }
|
||
10% { clip-path: inset(10% 0 60% 0); transform: translate(-3px, 1px); }
|
||
20% { clip-path: inset(60% 0 10% 0); transform: translate(3px, -1px); }
|
||
30% { clip-path: inset(30% 0 40% 0); transform: translate(-2px, 0); }
|
||
40% { clip-path: inset(0 0 80% 0); transform: translate(2px, 1px); }
|
||
50% { clip-path: inset(80% 0 0 0); transform: translate(-1px, -2px); }
|
||
60% { clip-path: inset(20% 0 50% 0); transform: translate(1px, 0); }
|
||
70% { clip-path: inset(50% 0 20% 0); transform: translate(-2px, 1px); }
|
||
80% { clip-path: inset(5% 0 70% 0); transform: translate(2px, -1px); }
|
||
90% { clip-path: inset(70% 0 5% 0); transform: translate(0, 2px); }
|
||
100% { clip-path: inset(0 0 0 0); transform: translate(0); }
|
||
}
|
||
|
||
/* 1.10 rocket-launch ─ rocket rises with shrinking trail */
|
||
@keyframes rocket-launch {
|
||
0% {
|
||
transform: translateY(0) scale(1);
|
||
opacity: 1;
|
||
filter: drop-shadow(0 8px 16px rgba(189, 147, 249, 0.6));
|
||
}
|
||
30% {
|
||
transform: translateY(-20px) scale(1.05);
|
||
filter: drop-shadow(0 16px 32px rgba(255, 121, 198, 0.7));
|
||
}
|
||
70% {
|
||
transform: translateY(-80px) scale(0.9);
|
||
opacity: 0.85;
|
||
filter: drop-shadow(0 4px 8px rgba(139, 233, 253, 0.5));
|
||
}
|
||
100% {
|
||
transform: translateY(-200px) scale(0.4);
|
||
opacity: 0;
|
||
filter: drop-shadow(0 0 0 transparent);
|
||
}
|
||
}
|
||
|
||
/* Rocket trail (::after pseudo) */
|
||
@keyframes rocket-trail {
|
||
0% { opacity: 0.8; transform: scaleY(1) scaleX(1); }
|
||
50% { opacity: 0.5; transform: scaleY(1.4) scaleX(0.7); }
|
||
100% { opacity: 0; transform: scaleY(2) scaleX(0.3); }
|
||
}
|
||
|
||
/* 1.11 star-twinkle ─ random opacity blink for star dots */
|
||
@keyframes star-twinkle {
|
||
0%, 100% { opacity: 0.15; transform: scale(0.85); }
|
||
25% { opacity: 0.9; transform: scale(1.1); }
|
||
50% { opacity: 0.4; transform: scale(0.95); }
|
||
75% { opacity: 1; transform: scale(1.05); }
|
||
}
|
||
|
||
/* 1.12 gradient-shift ─ animated gradient background */
|
||
@keyframes gradient-shift {
|
||
0% { background-position: 0% 50%; }
|
||
50% { background-position: 100% 50%; }
|
||
100% { background-position: 0% 50%; }
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
2. ANIMATION UTILITY CLASSES
|
||
──────────────────────────────────────────────────────────── */
|
||
|
||
/* Basic named animations */
|
||
.anim-fade-in { animation: fadeIn 0.5s ease both; }
|
||
.anim-slide-up { animation: slideUp 0.55s ease both; }
|
||
.anim-slide-left { animation: slideInLeft 0.55s ease both; }
|
||
.anim-slide-right { animation: slideInRight 0.55s ease both; }
|
||
.anim-float { animation: float 4s ease-in-out infinite; }
|
||
.anim-pulse-glow { animation: pulse-glow 2.5s ease-in-out infinite; }
|
||
.anim-spin-slow { animation: spin-slow 20s linear infinite; }
|
||
.anim-star-twinkle { animation: star-twinkle 3s ease-in-out infinite; }
|
||
|
||
/* Gradient-shift background (set background-size: 200% 200% on element) */
|
||
.anim-gradient-bg {
|
||
background-size: 200% 200%;
|
||
animation: gradient-shift 6s ease infinite;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
3. TYPEWRITER EFFECT
|
||
──────────────────────────────────────────────────────────── */
|
||
.typewriter {
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
border-right: 2px solid;
|
||
/* combine reveal + cursor blink */
|
||
animation:
|
||
typewriter 2s steps(30, end) both,
|
||
typing 0.7s step-end infinite;
|
||
}
|
||
|
||
/* Standalone cursor only (no text reveal) */
|
||
.cursor-blink {
|
||
display: inline-block;
|
||
width: 2px;
|
||
height: 1.1em;
|
||
background: #bd93f9;
|
||
vertical-align: text-bottom;
|
||
animation: typing 0.7s step-end infinite;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
4. GLITCH EFFECT
|
||
──────────────────────────────────────────────────────────── */
|
||
.glitch-text {
|
||
position: relative;
|
||
display: inline-block;
|
||
}
|
||
|
||
/* Glitch layers via pseudo-elements */
|
||
.glitch-text::before,
|
||
.glitch-text::after {
|
||
content: attr(data-text);
|
||
position: absolute;
|
||
inset: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.glitch-text::before {
|
||
color: #ff79c6;
|
||
animation: glitch 3.5s infinite linear alternate-reverse;
|
||
animation-delay: 0.1s;
|
||
opacity: 0.7;
|
||
}
|
||
|
||
.glitch-text::after {
|
||
color: #8be9fd;
|
||
animation: glitch 2.8s infinite linear alternate;
|
||
animation-delay: 0.25s;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
/* On hover only */
|
||
.glitch-text--hover::before,
|
||
.glitch-text--hover::after {
|
||
animation-play-state: paused;
|
||
}
|
||
|
||
.glitch-text--hover:hover::before,
|
||
.glitch-text--hover:hover::after {
|
||
animation-play-state: running;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
5. ROCKET LAUNCH
|
||
──────────────────────────────────────────────────────────── */
|
||
.rocket {
|
||
display: inline-block;
|
||
position: relative;
|
||
transition: transform 0.3s ease;
|
||
}
|
||
|
||
.rocket--launch {
|
||
animation: rocket-launch 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
|
||
}
|
||
|
||
/* Trail element */
|
||
.rocket__trail {
|
||
position: absolute;
|
||
bottom: -8px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 6px;
|
||
height: 20px;
|
||
border-radius: 0 0 4px 4px;
|
||
background: linear-gradient(180deg, rgba(255, 121, 198, 0.8), transparent);
|
||
transform-origin: top center;
|
||
animation: rocket-trail 1.2s ease forwards;
|
||
opacity: 0;
|
||
}
|
||
|
||
.rocket--launch .rocket__trail {
|
||
opacity: 0.8;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
6. STAR FIELD
|
||
──────────────────────────────────────────────────────────── */
|
||
.star {
|
||
position: absolute;
|
||
width: 3px;
|
||
height: 3px;
|
||
background: #f8f8f2;
|
||
border-radius: 50%;
|
||
animation: star-twinkle var(--duration, 3s) ease-in-out infinite;
|
||
animation-delay: var(--delay, 0s);
|
||
}
|
||
|
||
.star--sm { width: 1.5px; height: 1.5px; }
|
||
.star--md { width: 2.5px; height: 2.5px; }
|
||
.star--lg { width: 4px; height: 4px; box-shadow: 0 0 4px 1px rgba(248, 248, 242, 0.4); }
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
7. SCROLL-TRIGGERED ANIMATIONS
|
||
──────────────────────────────────────────────────────────── */
|
||
|
||
/* Base hidden state – applied by JS IntersectionObserver */
|
||
.animate-on-scroll {
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
|
||
/* Revealed state – JS adds .visible class */
|
||
.animate-on-scroll.visible {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Directional variants */
|
||
.animate-on-scroll--left {
|
||
opacity: 0;
|
||
transform: translateX(-40px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
|
||
.animate-on-scroll--left.visible {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.animate-on-scroll--right {
|
||
opacity: 0;
|
||
transform: translateX(40px);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
|
||
.animate-on-scroll--right.visible {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
|
||
.animate-on-scroll--scale {
|
||
opacity: 0;
|
||
transform: scale(0.9);
|
||
transition: opacity 0.6s ease, transform 0.6s ease;
|
||
}
|
||
|
||
.animate-on-scroll--scale.visible {
|
||
opacity: 1;
|
||
transform: scale(1);
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
8. STAGGER DELAYS
|
||
──────────────────────────────────────────────────────────── */
|
||
.delay-1 { animation-delay: 100ms; transition-delay: 100ms; }
|
||
.delay-2 { animation-delay: 200ms; transition-delay: 200ms; }
|
||
.delay-3 { animation-delay: 300ms; transition-delay: 300ms; }
|
||
.delay-4 { animation-delay: 400ms; transition-delay: 400ms; }
|
||
.delay-5 { animation-delay: 500ms; transition-delay: 500ms; }
|
||
|
||
/* Extended stagger for large grids */
|
||
.delay-6 { animation-delay: 600ms; transition-delay: 600ms; }
|
||
.delay-7 { animation-delay: 700ms; transition-delay: 700ms; }
|
||
.delay-8 { animation-delay: 800ms; transition-delay: 800ms; }
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
9. HOVER MICRO-ANIMATIONS
|
||
──────────────────────────────────────────────────────────── */
|
||
|
||
/* ── Buttons ── */
|
||
/* Primary button shine sweep */
|
||
.btn-primary {
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.btn-primary::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: -75%;
|
||
width: 50%;
|
||
height: 100%;
|
||
background: linear-gradient(
|
||
120deg,
|
||
transparent 20%,
|
||
rgba(255, 255, 255, 0.22) 50%,
|
||
transparent 80%
|
||
);
|
||
transform: skewX(-20deg);
|
||
transition: left 0.55s ease;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.btn-primary:hover::after {
|
||
left: 135%;
|
||
}
|
||
|
||
/* Secondary button border glow pulse */
|
||
.btn-secondary {
|
||
position: relative;
|
||
}
|
||
|
||
.btn-secondary::before {
|
||
content: '';
|
||
position: absolute;
|
||
inset: -1px;
|
||
border-radius: inherit;
|
||
background: linear-gradient(135deg, transparent, rgba(189, 147, 249, 0.3), transparent);
|
||
opacity: 0;
|
||
transition: opacity 0.3s ease;
|
||
pointer-events: none;
|
||
z-index: -1;
|
||
}
|
||
|
||
.btn-secondary:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
/* ── Links ── */
|
||
.link-underline {
|
||
position: relative;
|
||
text-decoration: none;
|
||
display: inline-block;
|
||
}
|
||
|
||
.link-underline::after {
|
||
content: '';
|
||
position: absolute;
|
||
bottom: -2px;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 1px;
|
||
background: linear-gradient(90deg, #bd93f9, #ff79c6);
|
||
transform: scaleX(0);
|
||
transform-origin: right;
|
||
transition: transform 0.35s ease;
|
||
}
|
||
|
||
.link-underline:hover::after {
|
||
transform: scaleX(1);
|
||
transform-origin: left;
|
||
}
|
||
|
||
/* ── Card tilt (subtle) ── */
|
||
.card-tilt {
|
||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||
will-change: transform;
|
||
}
|
||
|
||
/* Managed by JS mousemove if desired – CSS fallback hover */
|
||
.card-tilt:hover {
|
||
transform: perspective(800px) rotateX(2deg) rotateY(-2deg) translateY(-4px);
|
||
}
|
||
|
||
/* ── Icon bounce ── */
|
||
.icon-bounce {
|
||
display: inline-block;
|
||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||
}
|
||
|
||
.icon-bounce:hover {
|
||
transform: scale(1.25) translateY(-2px);
|
||
}
|
||
|
||
/* ── Icon spin on hover ── */
|
||
.icon-spin-hover {
|
||
transition: transform 0.4s ease;
|
||
display: inline-block;
|
||
}
|
||
|
||
.icon-spin-hover:hover {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
/* ── Pill/badge pop ── */
|
||
.badge {
|
||
transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1),
|
||
box-shadow 0.2s ease;
|
||
}
|
||
|
||
.badge:hover {
|
||
transform: scale(1.08) translateY(-1px);
|
||
box-shadow: 0 4px 12px rgba(189, 147, 249, 0.3);
|
||
}
|
||
|
||
/* ── Nav link underline (already in style.css, reinforced here) ── */
|
||
.navbar__link {
|
||
will-change: color;
|
||
}
|
||
|
||
/* ── Feature card shimmer border ── */
|
||
.feature-card {
|
||
background-clip: padding-box;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
10. ANIMATED GRADIENT HERO BACKGROUND
|
||
──────────────────────────────────────────────────────────── */
|
||
.hero-gradient-bg {
|
||
background: linear-gradient(
|
||
-45deg,
|
||
#0d0d1a,
|
||
#12122a,
|
||
#1a0a2e,
|
||
#0d1a2e
|
||
);
|
||
background-size: 400% 400%;
|
||
animation: gradient-shift 12s ease infinite;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
11. LOADING SCREEN – FADE OUT
|
||
──────────────────────────────────────────────────────────── */
|
||
@keyframes loading-fade-out {
|
||
0% { opacity: 1; transform: scale(1); }
|
||
80% { opacity: 1; transform: scale(1.02); }
|
||
100% { opacity: 0; transform: scale(0.98); }
|
||
}
|
||
|
||
/* Trigger by adding .is-hiding to .loading-screen via JS */
|
||
.loading-screen.is-hiding {
|
||
animation: loading-fade-out 0.55s ease forwards;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* Orbiting dots spinner (used inside loading screen) */
|
||
@keyframes orbit {
|
||
from { transform: rotate(0deg) translateX(28px) rotate(0deg); }
|
||
to { transform: rotate(360deg) translateX(28px) rotate(-360deg); }
|
||
}
|
||
|
||
.loader-orbit {
|
||
position: relative;
|
||
width: 60px;
|
||
height: 60px;
|
||
}
|
||
|
||
.loader-orbit__dot {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 8px;
|
||
height: 8px;
|
||
border-radius: 50%;
|
||
background: var(--purple, #bd93f9);
|
||
margin: -4px 0 0 -4px;
|
||
animation: orbit 1.4s linear infinite;
|
||
}
|
||
|
||
.loader-orbit__dot:nth-child(2) {
|
||
background: var(--pink, #ff79c6);
|
||
animation-delay: -0.46s;
|
||
}
|
||
|
||
.loader-orbit__dot:nth-child(3) {
|
||
background: var(--cyan, #8be9fd);
|
||
animation-delay: -0.93s;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
12. REVEAL ANIMATIONS FOR PAGE SECTIONS
|
||
──────────────────────────────────────────────────────────── */
|
||
|
||
/* Used by JS: section fades in as a block */
|
||
.section-reveal {
|
||
opacity: 0;
|
||
transition: opacity 0.8s ease, transform 0.8s ease;
|
||
transform: translateY(24px);
|
||
}
|
||
|
||
.section-reveal.in-view {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
|
||
/* Hero content staggered entrance */
|
||
.hero__content > * {
|
||
opacity: 0;
|
||
animation: slideUp 0.65s ease both;
|
||
}
|
||
|
||
.hero__content > *:nth-child(1) { animation-delay: 0.1s; }
|
||
.hero__content > *:nth-child(2) { animation-delay: 0.25s; }
|
||
.hero__content > *:nth-child(3) { animation-delay: 0.4s; }
|
||
.hero__content > *:nth-child(4) { animation-delay: 0.55s; }
|
||
.hero__content > *:nth-child(5) { animation-delay: 0.7s; }
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
13. PROGRESS / SKILL BARS
|
||
──────────────────────────────────────────────────────────── */
|
||
@keyframes bar-fill {
|
||
from { width: 0%; }
|
||
}
|
||
|
||
.progress-bar {
|
||
height: 4px;
|
||
background: var(--border, rgba(189, 147, 249, 0.2));
|
||
border-radius: 4px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.progress-bar__fill {
|
||
height: 100%;
|
||
border-radius: 4px;
|
||
background: linear-gradient(90deg, var(--purple, #bd93f9), var(--pink, #ff79c6));
|
||
width: var(--progress, 0%);
|
||
animation: bar-fill 1.2s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||
animation-delay: var(--delay, 0.2s);
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
14. NOTIFICATION / TOAST ENTRANCE
|
||
──────────────────────────────────────────────────────────── */
|
||
@keyframes toast-in {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateX(calc(100% + 24px));
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
}
|
||
|
||
@keyframes toast-out {
|
||
from {
|
||
opacity: 1;
|
||
transform: translateX(0);
|
||
}
|
||
to {
|
||
opacity: 0;
|
||
transform: translateX(calc(100% + 24px));
|
||
}
|
||
}
|
||
|
||
.toast {
|
||
animation: toast-in 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
|
||
}
|
||
|
||
.toast.closing {
|
||
animation: toast-out 0.3s ease forwards;
|
||
}
|
||
|
||
/* ────────────────────────────────────────────────────────────
|
||
15. REDUCED MOTION OVERRIDES
|
||
──────────────────────────────────────────────────────────── */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
/* Disable all custom animations */
|
||
.anim-fade-in,
|
||
.anim-slide-up,
|
||
.anim-slide-left,
|
||
.anim-slide-right,
|
||
.anim-float,
|
||
.anim-pulse-glow,
|
||
.anim-spin-slow,
|
||
.anim-star-twinkle,
|
||
.anim-gradient-bg,
|
||
.typewriter,
|
||
.cursor-blink,
|
||
.glitch-text::before,
|
||
.glitch-text::after,
|
||
.hero__content > *,
|
||
.rocket--launch,
|
||
.rocket__trail,
|
||
.loader-orbit__dot,
|
||
.loading-screen__bar-fill,
|
||
.loading-screen__logo,
|
||
.section-reveal,
|
||
.progress-bar__fill,
|
||
.toast,
|
||
.toast.closing {
|
||
animation: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
/* Scroll-triggered: instantly reveal instead */
|
||
.animate-on-scroll,
|
||
.animate-on-scroll--left,
|
||
.animate-on-scroll--right,
|
||
.animate-on-scroll--scale {
|
||
opacity: 1 !important;
|
||
transform: none !important;
|
||
transition: none !important;
|
||
}
|
||
|
||
/* Hero items also visible immediately */
|
||
.hero__content > * {
|
||
opacity: 1 !important;
|
||
}
|
||
}
|