/**
 * Greco Theme - Animations
 * CSS animations with reduced motion support
 */

/* ========================================
   Scroll Fade-In Animations
   ======================================== */

.fade-in-ready {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.fade-in-visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    will-change: auto;
}

/* Image fade-in animation */
.img-fade {
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.img-visible {
    opacity: 1;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {

    .fade-in-ready,
    .img-fade {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

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

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

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

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

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.95);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================
   Scroll-triggered Animations
   ======================================== */

.animate-on-scroll {
    opacity: 0;
    transform: translateY(20px) translateZ(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.animate-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    will-change: auto;
}

/* Premium Reveal Animation (optimized - no filter:blur) */
.blur-in-up {
    opacity: 0;
    transform: translateY(30px) translateZ(0);
    transition: opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1),
        transform 0.8s cubic-bezier(0.19, 1, 0.22, 1);
    backface-visibility: hidden;
    will-change: transform, opacity;
}

.blur-in-up.is-visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
    will-change: auto;
}

/* Premium Gradient Text Flow "Wow" Animation */
.premium-text-flow {
    opacity: 0;
    transform: translateY(20px) scale(0.95) translateZ(0);
    background: linear-gradient(110deg,
            #1E4D6B 0%,
            #1E4D6B 30%,
            #C9A227 45%,
            #E8D5A3 50%,
            #C9A227 55%,
            #1E4D6B 70%,
            #1E4D6B 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    transition:
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-text-flow.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1) translateZ(0);
}

@keyframes shineText {
    to {
        background-position: 200% center;
    }
}

/* Staggered animations removed — handled by scroll-animations.js
   via IntersectionObserver (fade-in-ready → fade-in-visible).
   CSS keyframes fired immediately on page load even for off-screen elements,
   causing double-animation and wasted layout work. */

/* ========================================
   Hover Effects
   ======================================== */

/* Card lift effect */
.location-card,
.featured-dish-card,
.testimonial-card,
.archive-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.location-card:hover,
.featured-dish-card:hover,
.testimonial-card:hover,
.archive-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Button hover effects */
.btn,
.wp-block-button__link {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn:hover,
.wp-block-button__link:hover {
    transform: translateY(-2px);
}

.btn:active,
.wp-block-button__link:active {
    transform: translateY(0);
}

/* Link underline animation */
.location-info-row a,
.footer-nav-column a {
    position: relative;
}

.location-info-row a::after,
.footer-nav-column a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s ease;
}

.location-info-row a:hover::after,
.footer-nav-column a:hover::after {
    transform: scaleX(1);
}

/* ========================================
   Menu Tab Transitions
   ======================================== */

.menu-panel {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.menu-panel.active {
    animation: fadeInScale 0.3s ease;
}

/* Tab indicator animation */
.menu-tab {
    position: relative;
    transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.menu-tab::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 40%;
    height: 2px;
    background: var(--wp--preset--color--aegean);
    transform: translateX(-50%) scaleX(0);
    transition: transform 0.25s ease;
}

.menu-tab.active::before,
.menu-tab[aria-selected="true"]::before {
    transform: translateX(-50%) scaleX(1);
}

/* ========================================
   Dropdown Animations
   ======================================== */

.dropdown-menu {
    animation: fadeInScale 0.2s ease;
    transform-origin: top right;
}

.dropdown-menu [role="option"] {
    transition: background 0.15s ease, color 0.15s ease;
}

/* ========================================
   Location Selection Animation
   ======================================== */

.location-card-badge {
    animation: fadeInScale 0.3s ease;
}

.location-select-btn.is-selected {
    animation: pulse 0.3s ease;
}

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

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

/* ========================================
   Hero Section Animations
   ======================================== */

.hero-section .wp-block-heading {
    animation: fadeInUp 0.8s ease 0.2s backwards;
}

.hero-section p {
    animation: fadeInUp 0.8s ease 0.4s backwards;
}

.hero-section .wp-block-buttons {
    animation: fadeInUp 0.8s ease 0.6s backwards;
}

.hero-location-pill {
    animation: fadeInUp 0.8s ease backwards;
}

.greco-stats-bar {
    animation: fadeInUp 0.8s ease 0.8s backwards;
}

/* ========================================
   Loading Spinner
   ======================================== */

.loading-spinner {
    animation: spin 0.8s linear infinite;
}

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

/* ========================================
   Focus States
   ======================================== */

:focus-visible {
    outline: 2px solid var(--wp--preset--color--aegean);
    outline-offset: 2px;
}

/* Skip link */
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: 1rem;
    background: var(--wp--preset--color--aegean);
    color: var(--wp--preset--color--white);
    z-index: 9999;
    transform: translateY(-100%);
    transition: transform 0.3s ease;
}

.skip-link:focus {
    transform: translateY(0);
}

/* ========================================
   Reduced Motion
   ======================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }

    .location-card:hover,
    .featured-dish-card:hover,
    .testimonial-card:hover,
    .archive-card:hover,
    .btn:hover,
    .wp-block-button__link:hover {
        transform: none;
    }
}

/* ========================================
   Performance: drop GPU-heavy backdrop-filter on small screens or
   when the user has asked the OS to reduce transparency. Each target
   element already ships with a near-opaque rgba background, so the
   visual impact is minimal but the GPU savings are substantial.
   ======================================== */

@media (max-width: 768px), (prefers-reduced-transparency: reduce) {
    [class*="modal-overlay"],
    .dropdown-menu,
    .greco-menu-tabs-wrapper,
    .greco-stats-bar,
    .beer-modal-overlay,
    .drink-modal-overlay,
    .wine-modal-overlay {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ========================================
   Performance: Content Visibility
   Skip rendering of below-fold sections until near viewport
   ======================================== */

.has-off-white-background-color.alignfull,
.has-sand-light-background-color.alignfull {
    content-visibility: auto;
    contain-intrinsic-size: auto 800px;
}

/* ========================================
   Performance: CSS Containment on Grid Containers
   Limits layout recalculation scope during animations
   ======================================== */

.locations-preview-grid,
.greco-featured-grid,
.menu-items-grid,
.menu-content {
    contain: layout style paint;
}

/* ========================================
   General Styles (non-dark-mode)
   Dark mode styles moved to dark-mode.css
   ======================================== */

/* Hero Section - always has dark background, so text should be white in both modes */
.hero-section h1 {
    color: #FFFFFF !important;
}

/* Section headings with aegean accent */
.has-sand-light-background-color h2,
.has-off-white-background-color h2,
.has-white-background-color h2 {
    color: var(--wp--preset--color--dark);
}

/* Hero "Znajdź restaurację" button - always white (dark background) */
.hero-section .is-style-outline .wp-block-button__link {
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.6) !important;
}

/* Menu Switcher - Icons only on mobile */
@media (max-width: 768px) {
    .menu-tab .menu-tab-name {
        display: none;
    }

    .menu-tab {
        padding: 0.75rem 1rem;
    }
}

/* ========================================
   Hero Decoration Animation
   ======================================== */

.hero-decoration-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.hero-decoration {
    width: 80px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #C9A227, transparent);
    border-radius: 2px;
    transform-origin: center;
    animation: expandWidth 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s backwards;
}

@keyframes expandWidth {
    from {
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

/* ========================================
   Hero Animated Background
   ======================================== */

.hero-animated-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    background-image: url('../images/hero/hero-light-desktop.webp');
    background-size: cover;
    background-position: center 65%;
    background-repeat: no-repeat;
}

/* On large/ultrawide monitors, scale image to full width without cropping */
@media (min-width: 1600px) {
    .hero-animated-bg {
        background-size: 100% auto;
        background-position: center bottom;
    }
}

/* Hero background - mobile light */
@media (max-width: 781px) {
    .hero-animated-bg {
        background-image: url('../images/hero/hero-light-mobile.webp');
    }
}

/* Dark overlay for text readability + top gradient for header visibility */
.hero-animated-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        linear-gradient(to bottom, rgba(10, 25, 40, 0.65) 0%, rgba(10, 25, 40, 0.3) 15%, transparent 30%),
        rgba(10, 25, 40, 0.4);
}

/* ========================================
   Section Gradient Background (reusable)
   ======================================== */

.section-gradient {
    position: relative;
    background: linear-gradient(135deg, #0F3A52 0%, #1E4D6B 40%, #2A7AB8 70%, #0A1F33 100%);
}

.section-gradient h2,
.section-gradient h3,
.section-gradient p {
    color: #FFFFFF;
}

.section-gradient p {
    color: rgba(255, 255, 255, 0.85);
}

.section-gradient a:not(.wp-block-button__link):not(.btn) {
    color: #FFD700;
}

/* Section cards on gradient background */
.section-gradient .greco-featured-card,
.section-gradient .menu-items-grid .menu-item,
.section-gradient .location-card {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.section-gradient .greco-featured-title,
.section-gradient .menu-item-title,
.section-gradient .location-card-title {
    color: #FFFFFF;
}

.section-gradient .greco-featured-price,
.section-gradient .menu-item-price {
    color: #FFD700;
}

/* Menu tabs on gradient */
.section-gradient .menu-tabs {
    background: rgba(255, 255, 255, 0.1);
}

.section-gradient .menu-tab {
    color: rgba(255, 255, 255, 0.8);
}

.section-gradient .menu-tab.active,
.section-gradient .menu-tab:hover {
    background: rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
}

/* ========================================
   Footer Animated Background
   ======================================== */

.footer-animated-bg {
    background: linear-gradient(135deg, #0A1F33 0%, #1E4D6B 40%, #0F3A52 70%, #2A7AB8 100%);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
}

/* Light mode footer text - needs light color on dark gradient background */
.site-footer .greco-footer-bottom .has-gray-color,
.site-footer .greco-footer-bottom a.has-gray-color {
    color: rgba(255, 255, 255, 0.7) !important;
}

.site-footer .greco-footer-bottom a.has-gray-color:hover {
    color: rgba(255, 255, 255, 1) !important;
}

/* Ensure footer content is above the background */
.site-footer>*:not(.footer-animated-bg) {
    position: relative;
    z-index: 1;
}