/**
 * Au Aktiv - Custom Styles
 * Performance-optimized CSS for animations and special effects
 */

/* =========================================
   CSS Custom Properties (Performance)
   ========================================= */
:root {
    --au-transition-fast: 0.15s ease;
    --au-transition-normal: 0.2s ease;
    --au-shadow-small: 0 2px 10px rgba(48, 31, 24, 0.06);
    --au-shadow-medium: 0 8px 28px rgba(48, 31, 24, 0.12);
    --au-shadow-large: 0 30px 60px rgba(48, 31, 24, 0.22);
    --au-radius-small: 14px;
    --au-radius-medium: 20px;
    --au-radius-large: 28px;
}

/* =========================================
   Smooth Scroll & Selection
   ========================================= */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

::selection {
    background-color: var(--wp--preset--color--terracotta);
    color: var(--wp--preset--color--white);
}

/* =========================================
   Logo Animations
   ========================================= */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.au-logo-ring {
    animation: spin 38s linear infinite;
    transform-origin: center;
}

.au-logo:hover .au-logo-ring {
    animation-play-state: paused;
}

/* Nav Logo */
.au-nav-logo {
    position: relative;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
}

.au-nav-logo svg.au-logo-ring {
    position: absolute;
    inset: 0;
}

.au-nav-logo .au-star {
    position: absolute;
    top: 13px;
    left: 13px;
    width: 18px;
    height: 18px;
    transform: rotate(-8deg);
}

/* Hero Stamp Logo */
.au-stamp-logo {
    position: relative;
    width: 120px;
    height: 120px;
}

.au-stamp-logo svg.au-logo-ring {
    position: absolute;
    inset: 0;
    width: 120px;
    height: 120px;
}

.au-stamp-logo .au-star {
    position: absolute;
    top: 37px;
    left: 37px;
    width: 46px;
    height: 46px;
    transform: rotate(-8deg);
}

/* Floating stamp container */
.au-stamp-container {
    position: absolute;
    bottom: -30px;
    left: -30px;
    width: 132px;
    height: 132px;
    filter: drop-shadow(0 12px 26px rgba(48, 31, 24, 0.28));
    animation: floaty 6s ease-in-out infinite;
}

.au-stamp-bg {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--wp--preset--color--cream);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================================
   Button Hover Effects
   ========================================= */
.au-btn-hover .wp-block-button__link {
    transition: transform var(--au-transition-fast), box-shadow var(--au-transition-fast), background-color var(--au-transition-fast);
}

.au-btn-hover:hover .wp-block-button__link {
    transform: translateY(-2px);
    box-shadow: var(--au-shadow-medium);
}

/* Ghost Button Style */
.au-btn-ghost .wp-block-button__link {
    background: transparent !important;
    border: 2px solid currentColor;
}

.au-btn-ghost:hover .wp-block-button__link {
    background: var(--wp--preset--color--ink) !important;
    color: var(--wp--preset--color--cream) !important;
    border-color: var(--wp--preset--color--ink);
}

/* =========================================
   Card Hover Effects
   ========================================= */
.au-card-hover {
    transition: transform var(--au-transition-normal), box-shadow var(--au-transition-normal);
}

.au-card-hover:hover {
    transform: translateY(-5px);
    box-shadow: var(--au-shadow-large);
}

/* Pillar Card Style */
.au-pillar {
    transition: transform var(--au-transition-normal), box-shadow var(--au-transition-normal);
    border-radius: var(--au-radius-medium);
}

.au-pillar:hover {
    transform: translateY(-4px);
    box-shadow: var(--au-shadow-medium);
}

/* =========================================
   Marquee Animation
   ========================================= */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.au-marquee {
    overflow: hidden;
    white-space: nowrap;
    background: var(--wp--preset--color--ink);
    padding: 16px 0;
}

.au-marquee-inner {
    display: inline-flex;
    align-items: center;
    gap: 26px;
    animation: marquee 26s linear infinite;
    font-weight: 900;
    font-size: 22px;
    letter-spacing: 0.02em;
    color: var(--wp--preset--color--cream);
}

.au-marquee:hover .au-marquee-inner {
    animation-play-state: paused;
}

/* Marquee star colors */
.au-star-terracotta { color: #D3653C; }
.au-star-amber { color: #E8A85D; }
.au-star-cyan { color: #23CDE4; }
.au-star-green { color: #7DDB8E; }
.au-star-gold { color: #EED692; }

/* =========================================
   Floating Animation (Hero Elements)
   ========================================= */
@keyframes floaty {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.au-float {
    animation: floaty 6s ease-in-out infinite;
}

.au-float-delay-1 {
    animation-delay: -2s;
}

.au-float-delay-2 {
    animation-delay: -4s;
}

/* =========================================
   Event Cards
   ========================================= */
.au-event-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--au-radius-large);
    transition: transform var(--au-transition-normal), box-shadow var(--au-transition-normal);
}

.au-event-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--au-shadow-large);
}

.au-event-card img {
    transition: transform 0.4s ease;
}

.au-event-card:hover img {
    transform: scale(1.05);
}

/* Event Card Overlay */
.au-event-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(48, 31, 24, 0) 0%, rgba(48, 31, 24, 0.7) 100%);
    pointer-events: none;
}

/* =========================================
   Section Backgrounds
   ========================================= */
.au-bg-green {
    background-color: var(--wp--preset--color--green) !important;
}

.au-bg-petrol {
    background-color: var(--wp--preset--color--petrol) !important;
}

.au-bg-terracotta {
    background-color: var(--wp--preset--color--terracotta) !important;
}

/* =========================================
   Icon Box (Star Container)
   ========================================= */
.au-icon-box {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--wp--preset--color--cream);
    border-radius: 12px;
    transition: transform var(--au-transition-fast);
}

.au-icon-box:hover {
    transform: rotate(-8deg) scale(1.05);
}

/* =========================================
   Stamp Logo Style
   ========================================= */
.au-stamp {
    position: relative;
    width: 180px;
    height: 180px;
}

.au-stamp-text {
    position: absolute;
    inset: 0;
    animation: spin 38s linear infinite;
}

.au-stamp-star {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-8deg);
}

/* =========================================
   Stats Box
   ========================================= */
.au-stat {
    text-align: center;
    padding: 16px;
}

.au-stat-value {
    font-size: 2rem;
    font-weight: 900;
    line-height: 1;
}

.au-stat-label {
    font-size: 0.875rem;
    opacity: 0.8;
    margin-top: 4px;
}

/* =========================================
   Handwritten Text Style (Caveat)
   ========================================= */
.au-handwritten,
.has-caveat-font-family {
    font-family: var(--wp--preset--font-family--caveat), cursive !important;
    font-weight: 600;
}

/* Fix Caveat font loading */
@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v18/WnznHAc5bAfYB2Q7YzYYiALdLvYwT-Y.woff2) format('woff2');
}

@font-face {
    font-family: 'Caveat';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/caveat/v18/WnznHAc5bAfYB2Q7YzYYiALdO_YwT-Y.woff2) format('woff2');
}

/* =========================================
   Navigation Styling
   ========================================= */
.site-header .wp-block-navigation-item__content {
    transition: color var(--au-transition-fast);
}

.site-header .wp-block-navigation-item__content:hover {
    color: var(--wp--preset--color--terracotta);
}

/* Sticky Header Glassmorphism */
.site-header {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    z-index: 100;
}

/* =========================================
   Footer Styling
   ========================================= */
.footer-nav-list {
    list-style: none;
}

.footer-nav-list a {
    color: inherit;
    text-decoration: none;
    transition: color var(--au-transition-fast);
}

.footer-nav-list a:hover {
    color: var(--wp--preset--color--terracotta);
}

/* =========================================
   Text Wrapping Optimization
   ========================================= */
h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

/* =========================================
   Image Styling
   ========================================= */
.au-img-rounded {
    border-radius: var(--au-radius-medium);
    overflow: hidden;
}

.au-img-rounded-lg {
    border-radius: var(--au-radius-large);
    overflow: hidden;
}

/* =========================================
   Responsive Adjustments
   ========================================= */
@media (max-width: 782px) {
    .site-header .wp-block-navigation {
        order: 3;
        width: 100%;
        margin-top: 16px;
    }

    .au-marquee-inner {
        animation-duration: 18s;
    }
}

/* =========================================
   Reduced Motion
   ========================================= */
@media (prefers-reduced-motion: reduce) {
    .au-logo-spin img,
    .au-marquee-inner,
    .au-float {
        animation: none;
    }

    .au-card-hover,
    .au-pillar,
    .au-event-card,
    .au-btn-hover .wp-block-button__link {
        transition: none;
    }
}

/* =========================================
   Print Styles
   ========================================= */
@media print {
    .site-header,
    .site-footer,
    .au-marquee {
        display: none;
    }
}