/* =============================================================================
   Casa Graziella — Scroll Animations & Transitions
   Elegant, subtle. GPU-accelerated (opacity + transform only).
   ============================================================================= */

/* ── Reveal base state (hidden) ───────────────────────────────────────────── */
.cg-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity  0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: opacity, transform;
}

.cg-reveal--left  { transform: translateX(-32px); }
.cg-reveal--right { transform: translateX(32px);  }
.cg-reveal--scale { transform: scale(0.94);        }
.cg-reveal--fade  { transform: none;               }

/* ── Revealed state ───────────────────────────────────────────────────────── */
.cg-revealed {
    opacity: 1 !important;
    transform: none !important;
}

/* ── Hero slides (parallax parent needs overflow:hidden) ─────────────────── */
.hero-slide img {
    transition: none; /* handled by JS rAF */
    will-change: transform;
    transform-origin: center center;
}

/* ── Apartment card hover — handled by style.css (border + overlay) ───────── */
.apartment-card {
    transition: border-color 0.25s ease;
    will-change: border-color;
}
/* No lift — gold border appears instead */
.apartment-card:hover { transform: none; box-shadow: none; }

/* ── Service item hover ───────────────────────────────────────────────────── */
.service-item {
    transition:
        box-shadow 0.3s ease,
        transform  0.3s ease,
        border-left 0.3s ease;
    border-left: 3px solid transparent;
}
.service-item:hover {
    transform: none;
    border-color: var(--cg-gold);
}

/* ── Activity card hover ──────────────────────────────────────────────────── */
.activity-card {
    transition:
        box-shadow 0.3s ease,
        transform  0.3s ease;
}
.activity-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(62, 42, 34, 0.12);
}

/* ── Button hover ─────────────────────────────────────────────────────────── */
.btn {
    transition:
        background  0.25s ease,
        color       0.25s ease,
        box-shadow  0.25s ease,
        transform   0.18s ease,
        border-color 0.25s ease;
}
.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
.btn:active { transform: translateY(0); }

/* ── Nav link hover ───────────────────────────────────────────────────────── */
.main-nav a {
    position: relative;
}
.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--cg-gold);
    transition: width 0.3s ease;
}
.main-nav a:hover::after,
.main-nav .current-menu-item > a::after {
    width: 100%;
}

/* ── Gallery item hover ───────────────────────────────────────────────────── */
.gallery-item img {
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
.gallery-item:hover img {
    transform: scale(1.07);
}

/* ── Header scroll state ──────────────────────────────────────────────────── */
/* Header is transparent by default — scrolled state just solidifies it (style.css handles the rule) */

/* ── Stats counters ───────────────────────────────────────────────────────── */
.cg-counter {
    display: inline-block;
    font-variant-numeric: tabular-nums;
}

/* ── Smooth section dividers ─────────────────────────────────────────────── */
.section {
    position: relative;
}

/* ── Hero overlay fade-in on load ────────────────────────────────────────── */
@keyframes heroFadeIn {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
.hero-content {
    animation: heroFadeIn 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.4s both;
}

/* ── Reduced motion — respect user preference ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cg-reveal,
    .cg-reveal--left,
    .cg-reveal--right,
    .cg-reveal--scale,
    .cg-reveal--fade {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .hero-slide img { transform: none !important; }
    .apartment-card:hover { transform: none; }
    .btn:hover { transform: none; }
    .hero-content { animation: none; }
}