/**
 * NESTPRO - Animation Styles
 */

/* ============================================
   SCROLL REVEAL
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.active {
    opacity: 1;
    transform: translateX(0);
}

.reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.active {
    opacity: 1;
    transform: scale(1);
}

.reveal-rotate {
    opacity: 0;
    transform: translateY(30px) rotate(-3deg);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* Stagger children */
.stagger-children .reveal {
    transition-delay: calc(var(--stagger, 0) * 0.1s);
}

/* ============================================
   COUNTER ANIMATION
   ============================================ */
.counter-value {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ============================================
   PARALLAX
   ============================================ */
.parallax-element {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ============================================
   GLASSMORPHISM HOVER
   ============================================ */
.glass-tilt {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    perspective: 1000px;
}

.glass-tilt:hover {
    transform: perspective(1000px) rotateX(2deg) rotateY(-2deg) translateY(-5px);
}

/* ============================================
   MAGNETIC BUTTON
   ============================================ */
.magnetic-btn {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================
   RIPPLE EFFECT
   ============================================ */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple-effect {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: scale(0);
    animation: rippleAnim 0.6s ease-out;
    pointer-events: none;
}

@keyframes rippleAnim {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

/* ============================================
   ANIMATED GRADIENT BG
   ============================================ */
.gradient-bg-animated {
    background: linear-gradient(-45deg, #0A1628, #1A1A2E, #132240, #E86A2A);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}

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

/* ============================================
   MOUSE FOLLOW GLOW
   ============================================ */
.mouse-glow {
    position: fixed;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--primary-rgb), 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    transform: translate(-50%, -50%);
    transition: opacity 0.3s;
}

/* ============================================
   FLOATING SHAPES
   ============================================ */
.floating-shapes {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.floating-shape {
    position: absolute;
    border-radius: 50%;
    opacity: 0.04;
    animation: float 20s infinite ease-in-out;
}

.floating-shape:nth-child(1) {
    width: 300px; height: 300px;
    background: var(--primary);
    top: 10%; left: -5%;
    animation-delay: 0s;
}

.floating-shape:nth-child(2) {
    width: 200px; height: 200px;
    background: var(--gold);
    top: 60%; right: -3%;
    animation-delay: -5s;
    animation-duration: 25s;
}

.floating-shape:nth-child(3) {
    width: 150px; height: 150px;
    background: var(--primary);
    bottom: 5%; left: 40%;
    animation-delay: -10s;
    animation-duration: 30s;
}

.floating-shape:nth-child(4) {
    width: 100px; height: 100px;
    background: var(--gold);
    top: 30%; right: 20%;
    animation-delay: -7s;
    animation-duration: 18s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(30px, -40px) rotate(90deg); }
    50% { transform: translate(-20px, 30px) rotate(180deg); }
    75% { transform: translate(40px, 15px) rotate(270deg); }
}

/* ============================================
   IMAGE TILT ON HOVER
   ============================================ */
.image-tilt {
    perspective: 1000px;
    overflow: hidden;
    border-radius: var(--radius-xl);
}

.image-tilt img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-tilt:hover img {
    transform: scale(1.05) rotateX(2deg) rotateY(-2deg);
}

/* ============================================
   TEXT ANIMATION
   ============================================ */
.text-reveal {
    overflow: hidden;
}

.text-reveal span {
    display: inline-block;
    transform: translateY(100%);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.text-reveal.active span {
    transform: translateY(0);
}

/* Typewriter effect */
.typewriter {
    overflow: hidden;
    border-right: 2px solid var(--primary);
    white-space: nowrap;
    animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: var(--primary); }
}

/* ============================================
   HOVER LIFT
   ============================================ */
.hover-lift {
    transition: transform var(--transition), box-shadow var(--transition);
}

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

/* ============================================
   GLOW EFFECTS
   ============================================ */
.glow-primary {
    box-shadow: 0 0 20px rgba(var(--primary-rgb), 0.3);
    transition: box-shadow var(--transition);
}

.glow-primary:hover {
    box-shadow: 0 0 40px rgba(var(--primary-rgb), 0.5);
}

.glow-gold {
    box-shadow: 0 0 20px rgba(var(--gold-rgb), 0.3);
    transition: box-shadow var(--transition);
}

.glow-gold:hover {
    box-shadow: 0 0 40px rgba(var(--gold-rgb), 0.5);
}

/* ============================================
   SMOOTH SCROLL PROGRESS
   ============================================ */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--gradient-primary);
    z-index: calc(var(--z-header) + 1);
    transition: width 0.1s linear;
}

/* ============================================
   SECTION TRANSITION
   ============================================ */
.section-transition {
    position: relative;
}

.section-transition::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.2), transparent);
}

/* ============================================
   LOADING SHIMMER
   ============================================ */
.shimmer {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ============================================
   3D CARD HOVER
   ============================================ */
.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-3d:hover {
    transform: perspective(1000px) rotateY(5deg) rotateX(5deg) translateZ(20px);
}

.card-3d-content {
    transform: translateZ(30px);
}