/* ========================================
   NOBLEWEAR — Animations CSS
   ======================================== */

/* === Fade In === */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-30px); }
    to { opacity: 1; transform: translateX(0); }
}

/* === Gold Shimmer === */
@keyframes goldShimmer {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}
.gold-shimmer {
    background: linear-gradient(90deg, var(--gold-dark) 0%, var(--gold-light) 50%, var(--gold-dark) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 4s linear infinite;
}

/* === Pulse Glow === */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(201, 168, 76, 0.3); }
    50% { box-shadow: 0 0 0 12px rgba(201, 168, 76, 0); }
}
.pulse-glow { animation: pulseGlow 2.5s ease-in-out infinite; }

/* === Floating === */
@keyframes floating {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.floating { animation: floating 3s ease-in-out infinite; }

/* === Scroll Reveal (JS triggers) === */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}
.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* === Stagger Children === */
.stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.stagger-children.visible > *:nth-child(1) { opacity: 1; transform: none; transition-delay: 0.05s; }
.stagger-children.visible > *:nth-child(2) { opacity: 1; transform: none; transition-delay: 0.1s; }
.stagger-children.visible > *:nth-child(3) { opacity: 1; transform: none; transition-delay: 0.15s; }
.stagger-children.visible > *:nth-child(4) { opacity: 1; transform: none; transition-delay: 0.2s; }
.stagger-children.visible > *:nth-child(5) { opacity: 1; transform: none; transition-delay: 0.25s; }
.stagger-children.visible > *:nth-child(6) { opacity: 1; transform: none; transition-delay: 0.3s; }
.stagger-children.visible > *:nth-child(7) { opacity: 1; transform: none; transition-delay: 0.35s; }
.stagger-children.visible > *:nth-child(8) { opacity: 1; transform: none; transition-delay: 0.4s; }
.stagger-children.visible > *:nth-child(9) { opacity: 1; transform: none; transition-delay: 0.45s; }
.stagger-children.visible > *:nth-child(10) { opacity: 1; transform: none; transition-delay: 0.5s; }
.stagger-children.visible > *:nth-child(11) { opacity: 1; transform: none; transition-delay: 0.55s; }
.stagger-children.visible > *:nth-child(12) { opacity: 1; transform: none; transition-delay: 0.6s; }
.stagger-children.visible > *:nth-child(13) { opacity: 1; transform: none; transition-delay: 0.65s; }
.stagger-children.visible > *:nth-child(14) { opacity: 1; transform: none; transition-delay: 0.7s; }
.stagger-children.visible > *:nth-child(15) { opacity: 1; transform: none; transition-delay: 0.75s; }
.stagger-children.visible > *:nth-child(16) { opacity: 1; transform: none; transition-delay: 0.8s; }
.stagger-children.visible > *:nth-child(17) { opacity: 1; transform: none; transition-delay: 0.85s; }
.stagger-children.visible > *:nth-child(18) { opacity: 1; transform: none; transition-delay: 0.9s; }
.stagger-children.visible > *:nth-child(19) { opacity: 1; transform: none; transition-delay: 0.95s; }
.stagger-children.visible > *:nth-child(20) { opacity: 1; transform: none; transition-delay: 1s; }
.stagger-children.visible > *:nth-child(n+21) { opacity: 1; transform: none; transition-delay: 1.1s; }

/* === Hero Entrance === */
.hero-badge { animation: fadeInDown 0.6s ease 0.2s both; }
.hero-title { animation: fadeInUp 0.8s ease 0.3s both; }
.hero-subtitle { animation: fadeInUp 0.8s ease 0.5s both; }
.hero-actions { animation: fadeInUp 0.8s ease 0.7s both; }

/* === Spin === */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

/* === Skeleton Loading === */
@keyframes skeleton {
    0% { background-position: -200px 0; }
    100% { background-position: calc(200px + 100%) 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
    background-size: 200px 100%;
    animation: skeleton 1.5s ease-in-out infinite;
    border-radius: var(--radius-sm);
}

/* === Gold Dot Loader === */
.loader {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.loader-dot {
    width: 8px; height: 8px;
    background: var(--gold);
    border-radius: 50%;
    animation: loaderBounce 0.6s ease-in-out infinite;
}
.loader-dot:nth-child(2) { animation-delay: 0.1s; }
.loader-dot:nth-child(3) { animation-delay: 0.2s; }
@keyframes loaderBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* === Scale In === */
@keyframes scaleIn {
    from { transform: scale(0.9); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.scale-in { animation: scaleIn 0.3s ease forwards; }

/* === Page Transition === */
.page-transition {
    animation: fadeIn 0.5s ease forwards;
}