/* 
 * Paradigm Pet Professionals - Animations and Transitions
 * Enhanced animations to create a modern, fluid, and beautiful UI experience
 * while adhering to the brand specifications
 */

/* Variables for animation properties */
:root {
    /* Animation Timing */
    --transition-fast: 0.2s;
    --transition-medium: 0.3s;
    --transition-slow: 0.5s;
    
    /* Animation Easing */
    --ease-default: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ======================================
   Base Transitions
   ====================================== */

/* Smooth transition for all interactive elements */
a, button, input, select, textarea,
.btn, .card, .logo, .nav-link, .feature-box,
.accordion-header, .social-links a {
    transition: all var(--transition-medium) var(--ease-default);
}

/* ======================================
   Fade Animations
   ====================================== */

.fade-in {
    animation: fadeIn var(--transition-medium) var(--ease-default) forwards;
}

.fade-out {
    animation: fadeOut var(--transition-medium) var(--ease-default) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

/* Fade with direction */
.fade-in-up {
    animation: fadeInUp var(--transition-slow) var(--ease-default) forwards;
}

.fade-in-down {
    animation: fadeInDown var(--transition-slow) var(--ease-default) forwards;
}

.fade-in-left {
    animation: fadeInLeft var(--transition-slow) var(--ease-default) forwards;
}

.fade-in-right {
    animation: fadeInRight var(--transition-slow) var(--ease-default) forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

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

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

/* ======================================
   Entrance Animations
   ====================================== */

/* Scale animations */
.scale-in {
    animation: scaleIn var(--transition-medium) var(--ease-out-back) forwards;
}

.scale-in-up {
    animation: scaleInUp var(--transition-medium) var(--ease-out-back) forwards;
}

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

@keyframes scaleInUp {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(30px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Rotate animations */
.rotate-in {
    animation: rotateIn var(--transition-medium) var(--ease-out-back) forwards;
}

@keyframes rotateIn {
    from {
        opacity: 0;
        transform: rotate(-10deg) scale(0.9);
    }
    to {
        opacity: 1;
        transform: rotate(0) scale(1);
    }
}

/* ======================================
   Scroll Reveal Animations
   ====================================== */

/* Base reveal animation class */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity var(--transition-slow) var(--ease-default),
                transform var(--transition-slow) var(--ease-default);
}

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

/* Reveal variations */
.reveal-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity var(--transition-slow) var(--ease-default),
                transform var(--transition-slow) var(--ease-default);
}

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

.reveal-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity var(--transition-slow) var(--ease-default),
                transform var(--transition-slow) var(--ease-default);
}

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

.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity var(--transition-slow) var(--ease-default),
                transform var(--transition-slow) var(--ease-default);
}

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

/* ======================================
   Staggered Animations
   ====================================== */

/* Stagger container children with delay */
.stagger-container > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity var(--transition-medium) var(--ease-default),
                transform var(--transition-medium) var(--ease-default);
}

.stagger-container > .active {
    opacity: 1;
    transform: translateY(0);
}

.stagger-container > *:nth-child(1) { transition-delay: 0.1s; }
.stagger-container > *:nth-child(2) { transition-delay: 0.2s; }
.stagger-container > *:nth-child(3) { transition-delay: 0.3s; }
.stagger-container > *:nth-child(4) { transition-delay: 0.4s; }
.stagger-container > *:nth-child(5) { transition-delay: 0.5s; }
.stagger-container > *:nth-child(n+6) { transition-delay: 0.6s; }

/* Staggered reveal for lists */
.stagger-reveal > * {
    opacity: 0;
    transform: translateY(20px);
    transition: all var(--transition-medium) var(--ease-default);
}

.stagger-reveal > *.active:nth-child(1) { 
    animation: staggerReveal var(--transition-medium) var(--ease-out-back) 0.1s forwards; 
}
.stagger-reveal > *.active:nth-child(2) { 
    animation: staggerReveal var(--transition-medium) var(--ease-out-back) 0.2s forwards; 
}
.stagger-reveal > *.active:nth-child(3) { 
    animation: staggerReveal var(--transition-medium) var(--ease-out-back) 0.3s forwards; 
}
.stagger-reveal > *.active:nth-child(4) { 
    animation: staggerReveal var(--transition-medium) var(--ease-out-back) 0.4s forwards; 
}
.stagger-reveal > *.active:nth-child(5) { 
    animation: staggerReveal var(--transition-medium) var(--ease-out-back) 0.5s forwards; 
}
.stagger-reveal > *.active:nth-child(n+6) { 
    animation: staggerReveal var(--transition-medium) var(--ease-out-back) 0.6s forwards; 
}

@keyframes staggerReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ======================================
   Attention Animations
   ====================================== */

/* Pulse animation for highlight/attention */
.pulse {
    animation: pulse 2s infinite var(--ease-default);
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

/* Subtle floating effect */
.float {
    animation: float 3s infinite var(--ease-in-out);
}

@keyframes float {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

/* Shake animation for error states or attention grabbing */
.shake {
    animation: shake 0.6s var(--ease-default);
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Heartbeat effect for important elements */
.heartbeat {
    animation: heartbeat 2s ease-in-out infinite;
}

@keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.1); }
    28% { transform: scale(1); }
    42% { transform: scale(1.15); }
    70% { transform: scale(1); }
}

/* ======================================
   Button & Interactive Element Animations
   ====================================== */

/* Button hover ripple effect */
.btn {
    position: relative;
    overflow: hidden;
}

.btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: width 0.6s ease, height 0.6s ease, opacity 0.6s ease;
}

.btn:hover::after,
.btn:focus::after {
    width: 300%;
    height: 300%;
    opacity: 1;
}

/* Button active state */
.btn:active {
    transform: scale(0.97);
}

/* Form field focus effects */
input:focus, 
select:focus, 
textarea:focus {
    animation: formFieldFocus 0.3s var(--ease-out-back);
}

@keyframes formFieldFocus {
    0% { transform: scale(1); }
    50% { transform: scale(1.01); }
    100% { transform: scale(1); }
}

/* ======================================
   Page & Section Transitions
   ====================================== */

/* Page transition effect */
.page-transition {
    animation: pageTransition 0.8s var(--ease-default);
}

@keyframes pageTransition {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Page exit animation */
.page-exit {
    animation: pageExit 0.3s var(--ease-default) forwards;
}

@keyframes pageExit {
    0% {
        opacity: 1;
        transform: translateY(0);
    }
    100% {
        opacity: 0;
        transform: translateY(-20px);
    }
}

/* ======================================
   Component-Specific Animations
   ====================================== */

/* Card hover animations */
.card {
    transition: transform var(--transition-medium) var(--ease-out-back), 
                box-shadow var(--transition-medium) var(--ease-default),
                filter var(--transition-medium) var(--ease-default);
}

.card:hover {
    transform: translateY(-10px);
    filter: brightness(1.03);
}

.card .card-image {
    transition: transform 0.7s var(--ease-default);
    overflow: hidden;
}

.card:hover .card-image {
    transform: scale(1.05);
}

.card .card-title::after {
    transition: width 0.3s var(--ease-default);
}

/* Navigation link hover effect */
.main-nav a::after {
    transition: width 0.3s var(--ease-default), left 0.3s var(--ease-default);
}

/* Header scroll effect */
header {
    transition: padding 0.3s var(--ease-default), 
                background-color 0.3s var(--ease-default),
                box-shadow 0.3s var(--ease-default);
}

/* Loading spinner */
.loader {
    border: 3px solid rgba(0, 59, 109, 0.1);
    border-left: 3px solid var(--blue-sky);
    border-radius: 50%;
    animation: loader 1s linear infinite;
}

@keyframes loader {
    to { transform: rotate(360deg); }
}

/* Success checkmark animation */
.checkmark {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: block;
    margin: 0 auto var(--spacing-lg);
    position: relative;
    background-color: var(--success);
    animation: fillCheckmark 0.4s ease-in-out 0.4s forwards;
    opacity: 0;
    transform: scale(0);
}

.checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 28%;
    width: 30%;
    height: 60%;
    border-right: 3px solid white;
    border-bottom: 3px solid white;
    transform: rotate(45deg) translate(-50%, -75%);
    opacity: 0;
    animation: drawCheckmark 0.2s ease-in-out 0.6s forwards;
}

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

@keyframes drawCheckmark {
    from { opacity: 0; height: 0; }
    to { opacity: 1; height: 60%; }
}

/* Modal animations */
.modal {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--transition-medium) var(--ease-default), 
                visibility var(--transition-medium) var(--ease-default);
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-content {
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform var(--transition-medium) var(--ease-out-back) 0.1s, 
                opacity var(--transition-medium) var(--ease-default) 0.1s;
}

.modal.active .modal-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

/* Scroll-to-top button */
.scroll-to-top {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--transition-medium) var(--ease-default), 
                visibility var(--transition-medium) var(--ease-default),
                background-color var(--transition-medium) var(--ease-default),
                transform var(--transition-medium) var(--ease-default);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    transform: translateY(-5px);
}

/* Accordion animations */
.accordion-header {
    transition: background-color var(--transition-medium) var(--ease-default);
}

.accordion-header::after {
    transition: transform var(--transition-medium) var(--ease-default);
}

.accordion-content {
    transition: max-height 0.4s var(--ease-default), padding 0.4s var(--ease-default);
}

/* ======================================
   Text & Typography Animations
   ====================================== */

/* Text reveal animation */
.text-reveal {
    opacity: 0;
    display: inline-block;
    animation: textReveal 0.6s var(--ease-default) forwards;
}

@keyframes textReveal {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Blinking cursor effect for typing simulation */
.typing::after {
    content: '|';
    animation: blink 1s step-end infinite;
}

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

/* ======================================
   Brand-Specific Animations
   ====================================== */

/* Brand-color pulse effect */
.brand-pulse {
    animation: brandPulse 3s infinite var(--ease-default);
}

@keyframes brandPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(0, 59, 109, 0); }
    50% { box-shadow: 0 0 0 10px rgba(0, 59, 109, 0.2); }
}

/* Hero section text animation sequence */
.hero h1 {
    animation-delay: 0.2s;
}

.hero p {
    animation-delay: 0.4s;
}

.hero .btn {
    animation: fadeInUp var(--transition-slow) var(--ease-out-back) 0.6s forwards;
    opacity: 0;
    transform: translateY(30px);
}

/* Section divider animation */
.section-title:hover .section-divider {
    animation: expandDivider 0.5s var(--ease-out-back) forwards;
}

@keyframes expandDivider {
    to { width: 80px; }
}

/* ======================================
   Accessibility & Reduced Motion
   ====================================== */

/* Respect user's reduced motion preference */
@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;
    }
    
    .reveal,
    .reveal-left,
    .reveal-right,
    .reveal-scale,
    .stagger-container > *,
    .stagger-reveal > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Allow animations in print preview (if the animation is essential to content understanding) */
@media print {
    .animate-in-print {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}