/* animations-apple.css */

:root {
    /* Apple-inspired easing curves */
    --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
    --ease-apple-soft: cubic-bezier(0.25, 0.1, 0.25, 1);
    --ease-apple-bounce: cubic-bezier(0.5, 1.5, 0.5, 1);
}

/* Scroll-triggered reveal animations */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s var(--ease-apple), transform 1s var(--ease-apple);
    will-change: opacity, transform;
}

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

/* Staggered children reveal */
.reveal-group>* {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s var(--ease-apple), transform 0.8s var(--ease-apple);
}

.reveal-group.active>* {
    opacity: 1;
    transform: translateY(0);
}

/* Add delays for staggering */
.reveal-group.active>*:nth-child(1) {
    transition-delay: 100ms;
}

.reveal-group.active>*:nth-child(2) {
    transition-delay: 200ms;
}

.reveal-group.active>*:nth-child(3) {
    transition-delay: 300ms;
}

.reveal-group.active>*:nth-child(4) {
    transition-delay: 400ms;
}

.reveal-group.active>*:nth-child(5) {
    transition-delay: 500ms;
}

/* Advanced Hover Effects */
.apple-hover {
    transition: transform 0.4s var(--ease-apple-soft), box-shadow 0.4s var(--ease-apple-soft);
}

.apple-hover:hover {
    transform: scale(1.02);
}

/* Smooth parallax effect for background shapes */
.parallax-shape {
    transition: transform 0.6s var(--ease-apple-soft);
    will-change: transform;
}

/* Glass micro-interaction */
.glass-glow {
    position: relative;
    overflow: hidden;
}

.glass-glow::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s var(--ease-apple);
    pointer-events: none;
}

.glass-glow:hover::after {
    opacity: 1;
}