/* HGD Theme — Global CSS (mirrors static HTML <style> blocks) */

/* ── Reset ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background-color: #F8F6F0;
    color: #111111;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
::-webkit-scrollbar { display: none; }
::selection { background: #C5A880; color: #fff; }

/* ── Preloader ──────────────────────────────────────────── */
#preloader {
    position: fixed; inset: 0; z-index: 10000;
    background: #111111;
    display: flex; justify-content: center; align-items: center;
    color: #C5A880;
}
.preloader-text {
    font-family: 'Playfair Display', serif;
    font-size: 2rem; overflow: hidden;
}
.preloader-text span { display: inline-block; transform: translateY(100%); }

/* ── Navbar ─────────────────────────────────────────────── */
.nav-scrolled {
    background-color: rgba(248,246,240,0.98) !important;
    backdrop-filter: blur(10px);
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    color: #111 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.hamburger-line {
    background-color: white;
    transition: background-color 0.3s, transform 0.3s, opacity 0.3s;
}
.nav-scrolled .hamburger-line { background-color: #111; }
.menu-open .hamburger-line    { background-color: white !important; }

/* ── Image Zoom ─────────────────────────────────────────── */
.img-zoom-container { overflow: hidden; }
.img-zoom { transition: transform 1.5s cubic-bezier(0.25,1,0.5,1); will-change: transform; }
.img-zoom-container:hover .img-zoom { transform: scale(1.05); }

/* ── Text-Fill Effect ───────────────────────────────────── */
.text-fill-wrap { position: relative; display: inline-block; }
.text-fill-bg   { opacity: 0.15; }
.text-fill-fg   {
    position: absolute; top: 0; left: 0;
    color: #111111;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

/* ── Marquee ────────────────────────────────────────────── */
@keyframes scrollMarquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.animate-marquee {
    display: flex; width: 200%;
    animation: scrollMarquee 25s linear infinite;
}
.animate-marquee:hover { animation-play-state: paused; }

/* ── Floorplan Tabs ─────────────────────────────────────── */
.floorplan-img {
    opacity: 0; transition: opacity 0.5s ease;
    position: absolute; inset: 0; pointer-events: none;
}
.floorplan-img.active { opacity: 1; z-index: 10; pointer-events: auto; }
.tab-btn { position: relative; }
.tab-btn::after {
    content: ''; position: absolute; bottom: -4px; left: 0;
    width: 0; height: 1px;
    background-color: #C5A880; transition: width 0.3s ease;
}
.tab-btn.active::after { width: 100%; }

/* ── Timeline ───────────────────────────────────────────── */
.timeline-line {
    width: 1px; background: #E2DFD8;
    position: absolute; left: 50%; top: 0; bottom: 0;
    transform: translateX(-50%);
}
.timeline-progress {
    width: 100%; background: #C5A880;
    position: absolute; top: 0; left: 0; height: 0;
}
@media (max-width: 768px) {
    .timeline-line { left: 24px; transform: none; }
}

/* ── Masterplan Hotspots ────────────────────────────────── */
.hotspot-ring { animation: ping 2s cubic-bezier(0,0,0.2,1) infinite; }
@keyframes ping {
    75%, 100% { transform: scale(2.5); opacity: 0; }
}
.hotspot.active .hotspot-dot  { background-color: #111; border-color: white; }
.hotspot.active .hotspot-ring { border-color: white; }

/* ── Block editor — keep GSAP-targeted classes on frontend ─ */
/* will-change ensures these classes are always present for GSAP to target */
.reveal-up, .hero-reveal { will-change: transform, opacity; }
.parallax-bg { will-change: transform; }

/* ══════════════════════════════════════════════
   MOBILE RESPONSIVE OVERRIDES
   ══════════════════════════════════════════════ */

/* ── Global mobile spacing ──────────────────── */
@media (max-width: 767px) {
    /* Reduce excessive section padding on small screens */
    section { padding-top: 4rem !important; padding-bottom: 4rem !important; }

    /* Prevent horizontal overflow from any block */
    .wp-block-hgd-horizontal-scroll,
    .wp-block-hgd-cinematic-hero,
    .wp-block-hgd-stacking-cards { overflow-x: hidden; }
}

/* ── Cinematic Hero — mobile ────────────────── */
@media (max-width: 767px) {
    /* Hero title should scale down gracefully */
    #hero h1 { font-size: clamp(2.5rem, 12vw, 5rem) !important; }
    #hero { min-height: 100svh; }
}

/* ── Stacking Cards — mobile ────────────────── */
@media (max-width: 767px) {
    .stacking-card {
        position: relative !important;
        top: auto !important;
        margin-bottom: 1rem;
    }
    .stacking-cards-container {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }
}

/* ── Floorplan tabs — mobile ────────────────── */
@media (max-width: 767px) {
    .tab-btn {
        font-size: 1rem !important;
        padding-bottom: 0.75rem;
        border-bottom: 1px solid #E2DFD8;
    }
    .tab-btn::after { display: none; }
    .tab-btn.active { color: #C5A880; border-bottom-color: #C5A880; }
}

/* ── Masterplan hotspots — touch-friendly ───── */
@media (max-width: 767px) {
    .hotspot-dot {
        width: 20px !important;
        height: 20px !important;
    }
    /* Disable sticky card on mobile — scroll to it instead */
    #card-content { position: relative !important; top: auto !important; }
}

/* ── Stats bar — mobile ─────────────────────── */
@media (max-width: 767px) {
    /* 2 columns on mobile instead of 4 */
    .hgd-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .hgd-stats-grid > div { border-left: none !important; padding-left: 0 !important; border-top: 1px solid rgba(0,0,0,0.08); padding-top: 1rem; }
    .hgd-stats-grid > div:nth-child(-n+2) { border-top: none; padding-top: 0; }
}

/* ── Interactive masterplan — mobile ────────── */
@media (max-width: 1023px) {
    /* Stack map above info card */
    #masterplan .flex { flex-direction: column !important; }
    #masterplan .lg\:w-2\/3,
    #masterplan .lg\:w-1\/3 { width: 100% !important; }
}

/* ── Connectivity map — mobile ──────────────── */
@media (max-width: 1023px) {
    .hgd-connectivity-layout { flex-direction: column !important; }
}

/* ── Horizontal scroll — prevent GSAP on mobile ── */
@media (max-width: 767px) {
    /* The desktop section is hidden via Tailwind hidden md:block */
    /* This ensures no leftover pinning styles leak through */
    #collections-wrapper { height: auto !important; }
    #collections-track { width: auto !important; height: auto !important; flex-direction: column !important; }
}

/* ── Global image safety ─────────────────────── */
img { max-width: 100%; height: auto; }