/* ============================================================
   ANIMATIONS.CSS — Keyframe Animations & Transitions
   The Silverlocks Compass — Author Website
   ============================================================ */

/* ---- Fade Animations ---- */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-40px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ---- Float Animations ---- */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-20px) rotate(2deg); }
}

@keyframes floatSlow {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%      { transform: translateY(-12px) rotate(-1deg); }
    66%      { transform: translateY(-8px) rotate(1.5deg); }
}

@keyframes floatReverse {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(15px) rotate(-2deg); }
}

/* ---- Compass Animations ---- */
@keyframes compassRotate {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes compassPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50%      { transform: scale(1.05); opacity: 1; }
}

@keyframes compassGlow {
    0%, 100% { box-shadow: 0 0 20px rgba(46, 204, 113, 0.2), 0 0 40px rgba(37, 99, 168, 0.1); }
    50%      { box-shadow: 0 0 35px rgba(46, 204, 113, 0.4), 0 0 60px rgba(37, 99, 168, 0.2); }
}

/* ---- Shimmer & Gradient ---- */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes gradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ---- Crystal / Glow ---- */
@keyframes crystalGlow {
    0%, 100% { opacity: 0.5; filter: brightness(1); }
    50%      { opacity: 0.8; filter: brightness(1.3); }
}

@keyframes crystalFloat1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(10px, -15px) rotate(5deg); }
    50%      { transform: translate(-5px, -25px) rotate(-3deg); }
    75%      { transform: translate(-15px, -10px) rotate(4deg); }
}

@keyframes crystalFloat2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25%      { transform: translate(-12px, -20px) rotate(-4deg); }
    50%      { transform: translate(8px, -30px) rotate(6deg); }
    75%      { transform: translate(15px, -12px) rotate(-2deg); }
}

/* ---- Scale & Slide ---- */
@keyframes slideInScale {
    from { opacity: 0; transform: scale(0.85) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* ---- Border Glow ---- */
@keyframes borderGlow {
    0%, 100% { box-shadow: 0 0 5px rgba(23, 162, 184, 0.2); }
    50%      { box-shadow: 0 0 20px rgba(23, 162, 184, 0.5), 0 0 40px rgba(37, 99, 168, 0.2); }
}

/* ---- Pulse ---- */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.05); }
}

@keyframes pulseSubtle {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.7; }
}

/* ---- Scroll Line ---- */
@keyframes scrollLine {
    0%   { transform: scaleY(0); transform-origin: top; }
    50%  { transform: scaleY(1); transform-origin: top; }
    51%  { transform: scaleY(1); transform-origin: bottom; }
    100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---- Gauge Animation ---- */
@keyframes gaugeProgress {
    from { stroke-dashoffset: 534; }
    to   { stroke-dashoffset: 160; }
}

/* ---- Typewriter ---- */
@keyframes typewriter {
    from { width: 0; }
    to   { width: 100%; }
}

@keyframes blink {
    0%, 50% { border-color: transparent; }
    51%, 100% { border-color: var(--accent-teal); }
}

/* ============================================================
   SCROLL REVEAL CLASSES
   ============================================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--ease-out-expo),
                transform 0.8s var(--ease-out-expo);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Stagger Delays ---- */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

/* ---- Float Utility Classes ---- */
.float-animation {
    animation: float 6s ease-in-out infinite;
}

.float-slow {
    animation: floatSlow 8s ease-in-out infinite;
}

.float-reverse {
    animation: floatReverse 7s ease-in-out infinite;
}

/* ---- Hover Lift ---- */
.hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* ---- Shimmer Text ---- */
.shimmer-text {
    background: linear-gradient(
        90deg,
        var(--text-white) 0%,
        var(--accent-gold) 25%,
        var(--text-white) 50%,
        var(--accent-emerald) 75%,
        var(--text-white) 100%
    );
    background-size: 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shimmer 4s linear infinite;
}