/* ════════════════════════════════════════════════════════════════════════ BOOM Cinema — shared cinematic UI engine Additive · prefers-reduced-motion safe · no-JS safe (nothing hidden by CSS alone; the .cine-* hide states only apply once is set by the engine, and a JS failsafe always reveals). ════════════════════════════════════════════════════════════════════════ */ :root{--cine-ease:cubic-bezier(.16,1,.3,1)} /* Cinematic smooth anchor scrolling (offset for the fixed nav) */ html{scroll-behavior:smooth;scroll-padding-top:104px} /* ── Ambient living gold light (behind everything) ───────────────────── */ .cine-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict} .cine-ambient i{position:absolute;border-radius:50%;will-change:transform} .cine-ambient .g1{width:62vmax;height:62vmax;left:-12vmax;top:-22vmax;background:radial-gradient(circle,rgba(255,215,0,.12),transparent 62%);animation:cineFloat1 28s ease-in-out infinite alternate} .cine-ambient .g2{width:52vmax;height:52vmax;right:-16vmax;top:34vmax;background:radial-gradient(circle,rgba(0,206,209,.06),transparent 62%);animation:cineFloat2 34s ease-in-out infinite alternate} .cine-ambient .g3{width:40vmax;height:40vmax;left:28vmax;bottom:-18vmax;background:radial-gradient(circle,rgba(255,165,0,.07),transparent 62%);animation:cineFloat1 40s ease-in-out infinite alternate-reverse} @keyframes cineFloat1{0%{transform:translate(0,0) scale(1)}100%{transform:translate(6vmax,4vmax) scale(1.16)}} @keyframes cineFloat2{0%{transform:translate(0,0) scale(1)}100%{transform:translate(-5vmax,-3vmax) scale(1.12)}} /* ── Scroll-progress reel line ───────────────────────────────────────── */ .cine-progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:300;background:linear-gradient(90deg,#FFD54F,#FFD700,#FFA500);box-shadow:0 0 12px rgba(255,215,0,.55);transition:width .12s linear} /* ── Hero: Ken Burns + premium frame + cursor spotlight ──────────────── */ .cine-on .single-hero-img,.cine-on .carousel-slide img{animation:cineKen 26s ease-in-out infinite alternate} @keyframes cineKen{0%{transform:scale(1.03)}100%{transform:scale(1.10)}} .cine-on .carousel,.cine-on .single-hero-img{box-shadow:0 0 0 1px rgba(255,215,0,.08),0 40px 90px -34px rgba(0,0,0,.85)} .cine-on .cine-hero{position:relative;transition:transform .5s var(--cine-ease)} /* tilt reset (carousel or wrapped single photo) */ .cine-on .cine-hero-wrap{border-radius:16px;overflow:hidden} .cine-on .cine-hero::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,215,0,.14),transparent 38%);opacity:0;transition:opacity .35s var(--cine-ease)} .cine-on .cine-hero.cine-spot::before{opacity:1} /* ── Immersive lightbox upgrade (premium open + backdrop blur) ────────── */ .cine-on .lightbox{backdrop-filter:blur(8px)} .cine-on .lightbox .lightbox-img{transform:scale(.965);transition:transform .4s var(--cine-ease),opacity .3s} .cine-on .lightbox.open .lightbox-img{transform:scale(1)} /* ── Section reveal on scroll + section-title underline draw ──────────── */ .cine-on .cine-reveal{opacity:0;transform:translateY(28px)} .cine-on .cine-reveal.cine-in{opacity:1;transform:none;transition:opacity .85s var(--cine-ease),transform .85s var(--cine-ease)} .cine-on .content-section-title{position:relative} .cine-on .content-section-title::after{content:'';position:absolute;left:0;bottom:-1px;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#FFD700,#FFA500);transition:transform .9s var(--cine-ease) .15s} .cine-on .content-section.cine-in .content-section-title::after{transform:scaleX(1)} /* ── Gold CTA sheen sweep + magnetic ─────────────────────────────────── */ .cine-cta{position:relative;overflow:hidden;isolation:isolate} .cine-cta::after{content:'';position:absolute;inset:0;z-index:3;background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.38) 50%,transparent 66%);transform:translateX(-140%) skewX(-18deg);animation:cineSheen 7.5s ease-in-out infinite;pointer-events:none} @keyframes cineSheen{0%,72%{transform:translateX(-140%) skewX(-18deg)}90%,100%{transform:translateX(140%) skewX(-18deg)}} .cine-mag{transition:transform .25s var(--cine-ease)} /* ── Honest "live availability" chip ─────────────────────────────────── */ .cine-live{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-size:11px;letter-spacing:.4px;color:var(--text-secondary,#999)} .cine-live .dot{width:7px;height:7px;border-radius:50%;background:#00FF88;animation:cinePulse 2.4s infinite} @keyframes cinePulse{0%{box-shadow:0 0 0 0 rgba(0,255,136,.45)}70%{box-shadow:0 0 0 9px rgba(0,255,136,0)}100%{box-shadow:0 0 0 0 rgba(0,255,136,0)}} /* Link-cards should never show the default underline */ .cine-on a.card,.cine-on a.zone-card,.cine-on a.listing-card,.cine-on a.apartment-card{text-decoration:none} /* ── Universal 3D card tilt — keep each card's own base transition for the smooth return; only disable it while actively tilting ────────────────── */ .cine-on .card.cine-tilt,.cine-on .zone-card.cine-tilt,.cine-on .listing-card.cine-tilt,.cine-on .apartment-card.cine-tilt{transition:none;box-shadow:0 34px 80px -34px rgba(0,0,0,.78),0 0 0 1px rgba(255,215,0,.22)} /* ── Carousel "Play tour" button ─────────────────────────────────────── */ .cine-tour{position:absolute;left:14px;bottom:14px;z-index:11;display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:100px;background:rgba(0,0,0,.6);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);color:#fff;font-size:11px;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all .25s var(--cine-ease);font-family:inherit} .cine-tour:hover,.cine-tour.is-playing{background:var(--gold,#FFD700);color:#000;border-color:var(--gold,#FFD700)} .cine-tour svg{width:12px;height:12px} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .cine-ambient,.cine-progress,.cine-tour{display:none!important} .cine-on .single-hero-img,.cine-on .carousel-slide img{animation:none!important} .cine-on .cine-reveal{opacity:1!important;transform:none!important} .cine-on .content-section-title::after{transform:scaleX(1)!important;transition:none!important} .cine-cta::after{display:none!important} .cine-live .dot{animation:none!important} .cine-on .cine-hero::before{display:none!important} }