/* =========================================================
RAMERIAN EMPIRE
Animations
========================================================= */

/* =========================================================
PAGE LOAD
========================================================= */

@keyframes fadeUp {
from {
opacity: 0;
transform: translateY(24px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

@keyframes fadeIn {
from {
opacity: 0;
}

to {
opacity: 1;
}
}

@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.96);
}

to {
opacity: 1;
transform: scale(1);
}
}

/* =========================================================
HERO
========================================================= */

.hero-content .eyebrow {
animation:
fadeUp 1s ease 0.15s both;
}

.hero h1 {
animation:
fadeUp 1s ease 0.3s both;
}

.hero .gold-rule {
animation:
fadeIn 1s ease 0.65s both;
}

.hero-copy {
animation:
fadeUp 1s ease 0.75s both;
}

.hero-buttons {
animation:
fadeUp 1s ease 0.9s both;
}

.scroll-cue {
animation:
fadeIn 1.2s ease 1.5s both;
}

/* =========================================================
HERO ATMOSPHERE
========================================================= */

@keyframes ambientPulse {
0%,
100% {
opacity: 0.10;
transform: scale(1);
}

50% {
opacity: 0.18;
transform: scale(1.08);
}
}

.ambient-one {
animation:
ambientPulse 10s ease-in-out infinite;
}

.ambient-two {
animation:
ambientPulse 13s ease-in-out infinite reverse;
}

/* =========================================================
SCROLL INDICATOR
========================================================= */

@keyframes scrollLine {
0% {
transform: scaleY(0);
transform-origin: top;
opacity: 0;
}

30% {
opacity: 1;
}

70% {
transform: scaleY(1);
transform-origin: top;
opacity: 1;
}

100% {
transform: scaleY(1);
transform-origin: bottom;
opacity: 0;
}
}

.scroll-cue span {
animation:
scrollLine 2s ease-in-out infinite;
}

/* =========================================================
GOLD SHIMMER
========================================================= */

@keyframes goldShimmer {
0% {
text-shadow:
0 0 10px rgba(201, 163, 91, 0.05);
}

50% {
text-shadow:
0 0 25px rgba(201, 163, 91, 0.2);
}

100% {
text-shadow:
0 0 10px rgba(201, 163, 91, 0.05);
}
}

.hero h1 span {
animation:
goldShimmer 5s ease-in-out infinite;
}

/* =========================================================
FEATURE CARDS
========================================================= */

.feature-card {
opacity: 0;

animation:
cardReveal 0.8s ease forwards;
}

.feature-card:nth-child(1) {
animation-delay: 0.15s;
}

.feature-card:nth-child(2) {
animation-delay: 0.25s;
}

.feature-card:nth-child(3) {
animation-delay: 0.35s;
}

.feature-card:nth-child(4) {
animation-delay: 0.45s;
}

@keyframes cardReveal {
from {
opacity: 0;

```
transform:
  translateY(30px);
```

}

to {
opacity: 1;

```
transform:
  translateY(0);
```

}
}

/* =========================================================
CARD ICON
========================================================= */

@keyframes iconGlow {
0%,
100% {
box-shadow:
0 0 0
rgba(201, 163, 91, 0);
}

50% {
box-shadow:
0 0 22px
rgba(201, 163, 91, 0.08);
}
}

.feature-card:hover .card-icon {
animation:
iconGlow 1.5s ease-in-out infinite;
}

/* =========================================================
MOTTO
========================================================= */

.motto blockquote {
animation:
goldShimmer 6s ease-in-out infinite;
}

/* =========================================================
REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
}

}