/*
=================================================
  ANIMAȚII GENERALE (Luxury Fade & Slide)
=================================================
*/

/* 1. Fade In Simple */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.animate-fade-in {
    animation: fadeIn 1s ease-out forwards;
}

/* 2. Slide In Up (Elemente care vin de jos) */
@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-slide-in-up {
    /* Setat pe 0.8s pentru o intrare rapidă și elegantă */
    animation: slideInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 3. Slide In Down (Elemente care vin de sus - Titluri) */
@keyframes slideInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.animate-slide-in-down {
    animation: slideInDown 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* 4. Pulse Gold (Efectul de aur intermitent) */
@keyframes pulseGold {
    0%, 100% {
        opacity: 1;
        transform: scale(1.0) translateY(2px);
    }
    50% {
        opacity: 0.95;
        transform: scale(1.02) translateY(2px);
    }
}
.animate-pulse-gold {
    animation: pulseGold 2s ease-in-out infinite;
}

/*
=================================================
  EFEFCTE 3D ȘI DECORATIVE (Secțiunea Despre & Restaurant)
=================================================
*/

/* Perspective Container pentru efecte 3D */
.perspective-1000 {
    perspective: 1000px;
}

/* Efect 3D pe imaginea din secțiunea Despre */
.about-image {
    /* Setăm punctul de transformare la centru-jos pentru un efect de rotire elegant */
    transform-origin: center bottom;
    /* Aplicăm transformarea inițială (ușor rotită pe X și Y) */
    transform: rotateX(2deg) rotateY(1deg); 
    box-shadow: 0 20px 25px -5px rgba(26, 82, 118, 0.1), 0 10px 10px -5px rgba(26, 82, 118, 0.08); /* Umbra Marine */
}

/* Efectul de hover (Rotire mai pronunțată pe axa Y) */
.about-image:hover {
    transform: rotateX(0deg) rotateY(3deg) scale(1.02);
}

/* Decor pe cardul de Restaurant (clip-path) */
.clip-path-polygon-gold-decor {
    /* Crează o formă geometrică asimetrică elegantă */
    clip-path: polygon(0 0, 100% 15%, 100% 100%, 0% 85%);
}

/*
=================================================
  ELEMENTE FINALE & UTILITY
=================================================
*/

/* Asigură că elementele animate pornesc de la opacitate 0 */
[class*="animate-"] {
    opacity: 0;
}

/* Asigură o tranziție fluidă pentru bara de contact */
#top-bar-contact {
    /* Folosim CSS Transition pentru a fi mai fluid decât JS style manipulation */
    transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out, padding 0.3s ease-in-out;
    /* Setările de bază (vizibil) */
    max-height: 60px; /* Valoarea inițială e importantă */
    opacity: 1;
}

/* Starea barei de contact când s-a scrollat (clasa 'scrolled') */
#top-bar-contact.scrolled {
    max-height: 0;
    opacity: 0;
    /* Foarte important: Păstrează padding-ul zero! */
    padding-top: 0 !important; 
    padding-bottom: 0 !important;
    /* Ascunde vizual (fără a ocupa spațiu) */
    overflow: hidden; 
}

/* Acest CSS poate fi adăugat într-un fișier separat sau într-un bloc <style> */

/* Targetează doar browserele bazate pe WebKit (care include Safari pe iOS) */
@supports (-webkit-touch-callout: none) {
    #hero-section {
        background-image: none !important; /* Ascunde imaginea de pe secțiune pe iOS */
    }

    #hero-section::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: -1; /* Plasează imaginea sub conținutul secțiunii */
        background-image: url('images/vila.jpg'); /* Calea către imagine */
        background-size: cover;
        background-position: center;
        /* Aici este trucul pentru a simula fixed pe iOS: */
        /* În loc de `background-attachment: fixed;`, folosim un viewport-relative positioning pe pseudo-element */
        /* Deși nu va fi un scrolling parallax perfect fixed, va fi vizibil. */
        
        /* O altă metodă (mai simplă, de obicei suficientă): */
        /* Asigură-te că imaginea e pe un element părinte mare (precum body) */
    }
}

/* O soluție mai simplă și mai generală: */
/* Dacă nu ai neapărat nevoie de efectul `fixed` pe mobile, 
   poți pur și simplu să elimini `bg-fixed` și să lași `bg-cover` și `bg-center`. */
/* Dacă vrei să forțezi o soluție pe iOS: */
@media screen and (max-width: 768px) { /* Sau doar pe dispozitive cu ecran mic */
    .bg-fixed {
        background-attachment: scroll !important; /* Forțează-l să fie scrollabil */
        /* Sau, dacă folosești pseudo-elementul de mai sus, nu mai e nevoie de asta. */
    }
}