/* ============================================================
   LA HONORIA — 3D EFFECTS & VISUAL UPGRADES (effects-3d.css)
   ============================================================ */

/* ── CURSOR SPOTLIGHT ──────────────────────────────────────── */
#cursorSpotlight {
    position: fixed;
    pointer-events: none;
    width: 580px;
    height: 580px;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(201,169,110,0.065) 0%,
        rgba(107,123,94,0.04) 35%,
        transparent 70%
    );
    transform: translate(-50%, -50%);
    z-index: 1;
    mix-blend-mode: overlay;
    top: -300px;
    left: -300px;
    transition: opacity 0.4s ease;
}

/* ── HERO ENHANCEMENTS ────────────────────────────────────── */
.hero-title {
    text-shadow:
        2px 4px 10px rgba(0,0,0,0.55),
        0 0 80px rgba(201,169,110,0.18);
}

.hero-content {
    transform-style: preserve-3d;
    will-change: transform;
}

/* Stats hover 3D pop */
.stat {
    cursor: default;
    transition: transform 0.35s cubic-bezier(0.34,1.56,0.64,1) !important;
}
.stat:hover {
    transform: perspective(400px) translateZ(24px) scale(1.05) !important;
}

/* ── 3D PARTICLES UPGRADE ─────────────────────────────────── */
.particle {
    transform-style: preserve-3d;
    will-change: transform;
    filter: blur(0px);
}

@keyframes float3D {
    0%, 100% { transform: translateY(0)     rotateX(0deg)  rotateZ(0deg);  opacity: 0.3; }
    25%       { transform: translateY(-18px) rotateX(8deg)  rotateZ(5deg);  opacity: 0.55; }
    50%       { transform: translateY(-28px) rotateX(0deg)  rotateZ(-5deg); opacity: 0.65; }
    75%       { transform: translateY(-12px) rotateX(-6deg) rotateZ(3deg);  opacity: 0.45; }
}

.particle-1 { animation: float3D 9s  ease-in-out 0s infinite; }
.particle-2 { animation: float3D 12s ease-in-out 2s infinite; }
.particle-3 { animation: float3D 10s ease-in-out 4s infinite; }
.particle-4 { animation: float3D 11s ease-in-out 1s infinite; }
.particle-5 { animation: float3D 8s  ease-in-out 3s infinite; }

/* ── EVENT CARDS — 3D FLIP ────────────────────────────────── */
.event-card {
    perspective: 1400px;
    height: 400px;
    overflow: visible !important;
    background: transparent !important;
    border: none !important;
    backdrop-filter: none !important;
    transition: none !important;
    cursor: pointer;
}

.event-card:hover {
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.event-card-flipper {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.78s cubic-bezier(0.23, 1, 0.32, 1);
}

.events-grid .event-card:hover .event-card-flipper {
    transform: rotateY(180deg);
}

.event-card-front,
.event-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    border-radius: var(--radius);
    overflow: hidden;
}

/* Front face keeps the original card look */
.event-card-front {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    backdrop-filter: blur(5px);
}

/* Back face */
.event-card-back {
    transform: rotateY(180deg);
    background: linear-gradient(150deg, #3d5232 0%, #253320 50%, #1e2e18 100%);
    border: 1px solid rgba(201,169,110,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.75rem 1.5rem;
    text-align: center;
    color: var(--white, #FDFAF5);
}

.event-card-back .back-icon {
    font-size: 2.4rem;
    color: var(--gold, #c9a96e);
    margin-bottom: 0.85rem;
    filter: drop-shadow(0 4px 12px rgba(201,169,110,0.45));
    animation: none;
}

.event-card-back h3 {
    color: #FDFAF5;
    font-size: 1.45rem;
    margin-bottom: 0.55rem;
}

.event-card-back .back-desc {
    font-size: 0.82rem;
    color: rgba(253,250,245,0.7);
    line-height: 1.65;
    margin-bottom: 1rem;
}

.event-card-back .back-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    width: 100%;
    text-align: left;
}

.event-card-back .back-features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(253,250,245,0.72);
    padding: 0.28rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}

.event-card-back .back-features li:last-child {
    border-bottom: none;
}

.event-card-back .back-features li i {
    color: var(--gold, #c9a96e);
    font-size: 0.6rem;
    flex-shrink: 0;
}

.event-card-back .btn-ghost {
    font-size: 10px;
    padding: 9px 20px;
    letter-spacing: 0.14em;
}

/* Flip hint on front */
.flip-hint {
    position: absolute;
    bottom: 10px;
    right: 12px;
    font-size: 9px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
    display: flex;
    align-items: center;
    gap: 4px;
    pointer-events: none;
    transition: opacity 0.3s;
}
.flip-hint i { font-size: 0.6rem; }
.event-card:hover .flip-hint { opacity: 0; }

/* ── 3D TILT — GENERIC ────────────────────────────────────── */
.tilt-card {
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
}

/* Injected glare element base style */
.tilt-glare {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 10;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.25s ease;
}

/* ── ABOUT IMAGE 3D FRAME ─────────────────────────────────── */
.about-image {
    perspective: 1200px;
    transform-style: preserve-3d;
}

.about-image img {
    transform: perspective(1200px) rotateY(-5deg) rotateX(2deg) !important;
    box-shadow: 22px 18px 55px rgba(91,67,37,0.28), 0 4px 14px rgba(91,67,37,0.12) !important;
    transition: transform 0.6s cubic-bezier(0.23,1,0.32,1), box-shadow 0.6s ease !important;
}

.about-image:hover img {
    transform: perspective(1200px) rotateY(0deg) rotateX(0deg) scale(1.01) !important;
    box-shadow: 10px 10px 36px rgba(91,67,37,0.18), 0 4px 14px rgba(91,67,37,0.08) !important;
}

.about-badge {
    transform: perspective(500px) translateZ(16px) !important;
    box-shadow: 0 10px 26px rgba(91,67,37,0.22), 0 2px 6px rgba(91,67,37,0.1) !important;
}

/* ── GALLERY ITEMS 3D TILT ────────────────────────────────── */
.gallery-item {
    transform-style: preserve-3d;
    will-change: transform;
}

.gallery-item.tilt-returning {
    transition: transform 0.6s cubic-bezier(0.23,1,0.32,1) !important;
}

/* ── REVIEW CARDS DEPTH HOVER ─────────────────────────────── */
.review-card {
    transform-style: preserve-3d;
    transition: transform 0.4s ease, box-shadow 0.4s ease !important;
}

.review-card:hover {
    transform: perspective(900px) translateZ(16px) translateY(-5px) !important;
    box-shadow: 0 22px 50px rgba(91,67,37,0.14) !important;
}

/* ── FEATURE ICONS 3D ─────────────────────────────────────── */
.feature-icon {
    transition: background-color var(--transition), transform 0.42s cubic-bezier(0.34,1.56,0.64,1) !important;
}

.feature:hover .feature-icon {
    transform: scale(1.12) rotate(9deg) !important;
}

/* ── NAV UNDERLINE ANIMATION ──────────────────────────────── */
.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 2px;
    left: 50%;
    right: 50%;
    height: 1px;
    background: var(--gold, #c9a96e);
    transition: left 0.28s ease, right 0.28s ease;
    opacity: 0.75;
}

.nav-links a:hover::after,
.nav-links a.active::after {
    left: 14px;
    right: 14px;
}

/* ── DARK MODE TOGGLE 3D ─────────────────────────────────── */
.dark-mode-toggle {
    transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1),
                background var(--transition),
                border-color var(--transition) !important;
}

.dark-mode-toggle:hover {
    transform: rotate(22deg) scale(1.15) !important;
}

/* ── SCROLL-TO-TOP SPRING ─────────────────────────────────── */
.scroll-top {
    transition: transform 0.4s cubic-bezier(0.34,1.56,0.64,1),
                opacity var(--transition),
                background var(--transition),
                bottom var(--transition) !important;
}

.scroll-top:hover {
    transform: translateY(-5px) scale(1.1) !important;
}

/* ── GLASSMORPHISM CONTACT CARD ───────────────────────────── */
.contact-info-card {
    background: rgba(253,250,245,0.82) !important;
    backdrop-filter: blur(22px) !important;
    -webkit-backdrop-filter: blur(22px) !important;
    border: 1px solid rgba(255,255,255,0.55) !important;
    box-shadow:
        0 8px 32px rgba(91,67,37,0.1),
        inset 0 1px 0 rgba(255,255,255,0.7) !important;
}

/* ── SECTION HEADER HOVER DEPTH ───────────────────────────── */
.section-header h2 {
    transition: text-shadow 0.3s ease;
}

.section-header:hover h2 {
    text-shadow:
        1px 2px 3px rgba(91,67,37,0.1),
        2px 4px 8px rgba(91,67,37,0.06);
}

/* ── FOOTER LOGO DEPTH ────────────────────────────────────── */
.footer-logo {
    perspective: 600px;
}

.footer-logo-main {
    display: inline-block;
    transition: transform 0.4s ease, text-shadow 0.3s ease !important;
}

.footer-logo:hover .footer-logo-main {
    transform: perspective(400px) translateZ(8px);
    text-shadow: 2px 4px 8px rgba(91,67,37,0.18);
}

/* ── GASTRO / DECO — TILT READY ──────────────────────────── */
.gastro-card,
.deco-card {
    transform-style: preserve-3d;
    will-change: transform;
    position: relative;
}

/* ── DEPTH SHADOW UTILITY ─────────────────────────────────── */
.depth-card {
    box-shadow:
        0 2px 4px rgba(91,67,37,0.04),
        0 6px 14px rgba(91,67,37,0.07),
        0 14px 28px rgba(91,67,37,0.06);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.depth-card:hover {
    box-shadow:
        0 4px 8px rgba(91,67,37,0.06),
        0 10px 22px rgba(91,67,37,0.11),
        0 22px 44px rgba(91,67,37,0.1),
        0 38px 70px rgba(91,67,37,0.07);
}

/* ── RESPONSIVE — DISABLE 3D ON MOBILE / REDUCED MOTION ────── */
@media (prefers-reduced-motion: reduce) {
    .tilt-card, .about-image, .gallery-item,
    .review-card, .particle {
        animation: none !important;
        transform: none !important;
        transition: opacity 0.3s ease !important;
        will-change: auto !important;
    }

    .about-image img {
        transform: none !important;
    }
}

@media (max-width: 900px) {
    #cursorSpotlight { display: none; }

    /* Disable flip on mobile — show flat cards */
    .event-card {
        height: auto !important;
        perspective: none !important;
        overflow: hidden !important;
    }

    .event-card-flipper {
        transform: none !important;
        transform-style: flat !important;
        position: static;
        height: auto;
    }

    .event-card-front {
        position: relative;
        height: auto;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }

    .event-card-back {
        display: none;
    }

    .flip-hint { display: none; }

    .about-image img {
        transform: none !important;
        box-shadow: 0 20px 50px rgba(91,67,37,0.18) !important;
    }

    .gallery-item {
        transform: none !important;
        transition: none !important;
    }

    .review-card:hover { transform: translateY(-3px) !important; }
    .stat:hover { transform: none !important; }
}