:root {
    /* Animation Variables */
    --ease-apple: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-entry: 800ms;
    --duration-exit: 400ms;
}

/* Page Container Wrapper */
.page-container {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-entry) var(--ease-apple), transform var(--duration-entry) var(--ease-apple);
    will-change: opacity, transform;
}

.page-loaded .page-container {
    opacity: 1;
    transform: translateY(0);
}

.page-exiting .page-container {
    opacity: 0;
    transform: scale(0.98);
    transition: opacity var(--duration-exit) var(--ease-apple), transform var(--duration-exit) var(--ease-apple);
}

/* Staggered Entry Helpers */
.stagger-1 { transition-delay: 0ms; }
.stagger-2 { transition-delay: 80ms; }
.stagger-3 { transition-delay: 160ms; }

/* Interactive Elements (Buttons & Cards) */
.interactive-hover {
    transition: transform 0.3s var(--ease-apple), box-shadow 0.3s var(--ease-apple), opacity 0.3s ease;
}

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

.interactive-hover:active {
    transform: scale(0.96);
}

/* Disabled State for "Continue" button */
.btn-disabled {
    opacity: 0.5;
    pointer-events: none;
    transform: none !important;
}

/* Gift Selection Specifics */
.gift-card {
    transition: transform 0.3s var(--ease-apple), box-shadow 0.3s var(--ease-apple), opacity 0.3s ease;
    cursor: pointer;
    overflow: hidden; /* Ensure image corners clip */
}

.gift-card img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.gift-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 30px -5px rgba(251, 113, 133, 0.2);
}

.gift-card.selected {
    transform: scale(1.03);
    box-shadow: 0 0 0 2px rgba(251, 113, 133, 0.4), 0 20px 40px -10px rgba(251, 113, 133, 0.3);
}

.gift-card.dimmed {
    opacity: 0.4;
    transform: scale(0.98);
}

/* That's It Button Success State */
.btn-success {
    background: transparent !important;
    box-shadow: none !important;
    color: #fb7185 !important; 
    transform: scale(0.95);
    pointer-events: none;
    cursor: default;
}

/* ENHANCEMENT: Heartbeat */
@keyframes heartbeat {
    0% { transform: scale(1); }
    15% { transform: scale(1.08); }
    30% { transform: scale(1); }
    45% { transform: scale(1.04); }
    60% { transform: scale(1); }
    100% { transform: scale(1); }
}

.heart-beat {
    animation: heartbeat 3s infinite ease-in-out;
    transform-origin: center center;
}

/* ENHANCEMENT: Shake */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

.animate-shake {
    animation: shake 0.4s ease-in-out;
}

/* ENHANCEMENT: Cinematic Photo Reveal */
.cinematic-active .layout-container {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.8s ease-out;
}

/* Vignette */
.bg-radial-vignette {
    background: radial-gradient(circle, transparent 40%, rgba(0, 0, 0, 0.2) 100%);
    pointer-events: none;
}

/* Photo Card Base State */
.photo-card {
    width: 300px; /* Base width */
    height: auto;
    max-width: 80vw;
    /* Rotation set via inline var --rotate */
    transform: scale(0.9) rotate(var(--rotate));
    /* Opacity managed via class */
}

/* Visible State (added by JS) */
.photo-visible {
    opacity: 0.95 !important; /* Default stack opacity */
    transform: scale(1) rotate(var(--rotate)) translateY(0px) !important;
}

/* Last photo gets full opacity */
.photo-card:last-of-type.photo-visible {
    opacity: 1 !important;
}

/* Photos Exit (Slide Up) */
.photo-exit {
    transform: translateY(-120vh) rotate(var(--rotate)) !important;
    opacity: 0;
    transition: transform 1.5s ease-in, opacity 1.5s ease-in;
}

#photo-reveal-container {
    display: none;
}

.cinematic-active #photo-reveal-container {
    display: flex;
}

/* Text Fade & Slide */
#final-text {
    /* Create starting state: Way down */
    transform: translateY(100vh);
    opacity: 0;
    transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.5s ease-out;
}

#final-text.text-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Wait, car takes 4s to cross. If text stops at 50% (2s), the car drives away and text stays. This is 'dropping off' the message. */
/* This seems closest to 'trail' + 'readable'. */

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *, ::before, ::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    .page-container {
        transform: none !important;
        transition: opacity var(--duration-entry) ease !important;
    }
    
    /* ... existing interactive element resets ... */
    
    .photo-card {
        transition: none !important;
        opacity: 1 !important; /* Show all immediately */
        transform: scale(1) rotate(var(--rotate)) !important;
    }

    #vignette {
        transition: none !important;
        opacity: 1 !important;
    }

    #final-text {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}