/* ============================================================ The Icon — stratul de mișcare al paginii HOME ------------------------------------------------------------ Se încarcă ULTIMUL în layout, după the-icon-brand-navy.css. Pus în @stack('styles') ar fi încărcat înainte, iar !important-urile din brand-navy ar câștiga. Două părți: A. Reset — neutralizează animațiile vechi rămase în bundle-urile partajate (the-icon-public.css, the-icon-brand-navy.css), care servesc și alte pagini și deci nu pot fi tăiate la sursă. B. Sistemul nou de reveal — motor generic + coregrafie pe piese. ============================================================ */ /* ============================================================ A. RESET — mișcarea veche ============================================================ */ body.public-home-page *, body.public-home-page *::before, body.public-home-page *::after { animation: none !important; transition: none !important; } /* Excepții: funcție, nu decor. */ body.public-home-page .hero-slide { transition: opacity 1.25s ease !important; } body.public-home-page .icon-floorplans-tab, body.public-home-page .icon-floorplans-zoom-hint, body.public-home-page .icon-floorplans-dialog-close { transition: color .25s ease, border-color .25s ease, opacity .25s ease !important; } /* Bara de nivel care se desprinde deasupra barei de jos, pe telefon: intrarea ei e functionala, nu decor — fara ea butoanele par ca sar. */ body.public-home-page .icon-floorplans-tabs.is-docked { animation: iconPlansDockIn .32s cubic-bezier(.16, 1, .3, 1) both !important; } body.public-home-page .cookie-popup, body.public-home-page .cookie-popup * { transition: opacity .3s ease !important; } /* Hover-uri decorative vechi. NU se pune `transform: none` global — planul de etaj folosește transform pentru rotația de pe telefon. */ body.public-home-page .why-lamer-grid--row article:hover, body.public-home-page .home-use-card:hover, body.public-home-page .home-news-card:hover, body.public-home-page .apartment-card:hover { transform: none !important; box-shadow: none !important; } body.public-home-page .why-lamer-grid--row article:hover h3 { transform: none !important; text-shadow: none !important; } body.public-home-page .why-lamer-grid--row article:hover > span { transform: none !important; box-shadow: none !important; } body.public-home-page .apartment-card:hover img, body.public-home-page .home-use-card:hover img, body.public-home-page .home-news-card:hover img { transform: none !important; } /* ============================================================ B. SISTEMUL DE REVEAL ------------------------------------------------------------ Referința de calitate: aquacullinan.ro — animații mari, evidente, cu cascade deliberate. Acolo: animate.css prin Elementor, durată 2s, easing `ease` plat, translație de 100% din înălțimea elementului. Ce păstrăm: generozitatea (distanță mare, timp lung). Ce schimbăm: - 1.2s în loc de 2s. Home-ul nostru are 10 secțiuni dese; la 2s, cine derulează repede vede permanent lucruri care încă intră. Reglabil dintr-o singură variabilă. - easing expo-out în loc de `ease` — pornește decis și așază lin, se simte mai scump decât o curbă simetrică. - coregrafie pe piesă, nu aceeași animație peste tot. - fallback corect: fără JS, conținutul rămâne VIZIBIL. (La referință, `elementor-invisible` îl lasă ascuns.) ============================================================ */ body.public-home-page, body.public-project-page { --reveal-dur: 1700ms; --reveal-ease: cubic-bezier(.16, 1, .3, 1); --reveal-y: 64px; --reveal-x: 72px; --reveal-step: 150ms; } /* Starea ascunsă se aplică DOAR după ce JS confirmă că poate revela. `reveal-ready` se pune în , înainte de primul paint, ca să nu existe licărire. */ html.reveal-ready body.public-home-page [data-reveal], html.reveal-ready body.public-project-page [data-reveal] { opacity: 0; transition: opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms), transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms) !important; will-change: opacity, transform; } html.reveal-ready body.public-home-page [data-reveal="up"], html.reveal-ready body.public-project-page [data-reveal="up"] { transform: translate3d(0, var(--reveal-y), 0); } html.reveal-ready body.public-home-page [data-reveal="down"], html.reveal-ready body.public-project-page [data-reveal="down"] { transform: translate3d(0, calc(var(--reveal-y) * -1), 0); } html.reveal-ready body.public-home-page [data-reveal="left"], html.reveal-ready body.public-project-page [data-reveal="left"] { transform: translate3d(calc(var(--reveal-x) * -1), 0, 0); } html.reveal-ready body.public-home-page [data-reveal="right"], html.reveal-ready body.public-project-page [data-reveal="right"] { transform: translate3d(var(--reveal-x), 0, 0); } html.reveal-ready body.public-home-page [data-reveal="zoom"], html.reveal-ready body.public-project-page [data-reveal="zoom"] { transform: scale(1.045); } html.reveal-ready body.public-home-page [data-reveal="fade"], html.reveal-ready body.public-project-page [data-reveal="fade"] { transform: none; } html.reveal-ready body.public-home-page [data-reveal].is-in, html.reveal-ready body.public-project-page [data-reveal].is-in { opacity: 1; transform: none; } /* După ce a intrat, eliberăm compozitorul. */ html.reveal-ready body.public-home-page [data-reveal].is-done, html.reveal-ready body.public-project-page [data-reveal].is-done { will-change: auto; } /* Cascada: JS pune --reveal-i pe fiecare copil, CSS-ul il face intarziere. */ html.reveal-ready body.public-home-page [data-reveal-stagger] > *, html.reveal-ready body.public-project-page [data-reveal-stagger] > * { --reveal-delay: calc(var(--reveal-i, 0) * var(--reveal-step)); } /* Copiii unui grup mostenesc automat reveal-ul „up", ca sa nu fie nevoie de atribut pe fiecare — util cand copiii vin dintr-un partial partajat cu alte pagini (ex. apartment-card), pe care nu vrem sa-l atingem. */ html.reveal-ready body.public-home-page [data-reveal-stagger] > *:not([data-reveal]), html.reveal-ready body.public-project-page [data-reveal-stagger] > *:not([data-reveal]) { opacity: 0; transform: translate3d(0, var(--reveal-y), 0); transition: opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms), transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms) !important; will-change: opacity, transform; } html.reveal-ready body.public-home-page [data-reveal-stagger] > *.is-in, html.reveal-ready body.public-project-page [data-reveal-stagger] > *.is-in { opacity: 1; transform: none; } html.reveal-ready body.public-home-page [data-reveal-stagger] > *.is-done, html.reveal-ready body.public-project-page [data-reveal-stagger] > *.is-done { will-change: auto; } /* ---------- Coregrafie pe piese ---------- */ /* HERO — intră singur la încărcare, nu la scroll. Cascadă lentă, peste fundalul care respiră. */ body.public-home-page .icon-hero-copy, body.public-project-page .apartment-detail-copy { --reveal-step: 180ms; } body.public-home-page .hero [data-reveal], body.public-project-page .project-hero [data-reveal] { --reveal-dur: 1900ms; } /* Ken Burns pe hero: NU il rescriem. `iconHeroDrift` din the-icon-brand-navy.css supravietuieste resetului pentru ca are specificitate mai mare (5 clase) plus !important — si e mai bine gandit decat ce as fi pus eu: 60s liniar, legat de `.hero-slide.is-active`, deci se reia la fiecare schimbare de imagine. Il pastram intentionat. Daca vrei alta miscare pe fundal, se editeaza acolo, nu aici. */ /* PLANURI DE ETAJ — piesa cu coregrafie proprie, în trei timpi: marea coboară, planșa urcă sub ea, tab-urile apar la urmă. Marea vine de mai sus decât restul, ca să se simtă că „intră în cadru" dinspre exterior. */ body.public-home-page .icon-floorplans-sea, body.public-project-page .icon-floorplans-sea { --reveal-y: 100px; --reveal-dur: 2000ms; } body.public-home-page .icon-floorplans-stage, body.public-project-page .icon-floorplans-stage { --reveal-y: 80px; --reveal-dur: 1850ms; } /* VIDEO ȘANTIER — doar scale, fără translație: secțiunea e full-bleed, o deplasare ar descoperi marginea. */ body.public-home-page .construction-video-section [data-reveal="zoom"] { --reveal-dur: 2100ms; } /* GALERIE + TEXT — perechea oglindită intră simultan. */ body.public-home-page .why-lamer-media, body.public-home-page .why-lamer-content { --reveal-dur: 1800ms; } /* CARUSELUL DE ARTICOLE — doua corectii legate intre ele. 1. `.home-guides-viewport` primeste doar `overflow-x: auto`. Regula CSS spune ca daca o axa e `visible` si cealalta nu, cea `visible` calculeaza `auto` — deci containerul devine si derulabil VERTICAL, fara sa ceara nimeni asta. Peste zona aceea, rotita mouse-ului deruleaza caruselul in loc de pagina. 2. In timpul reveal-ului cardurile stau translatate `--reveal-y` (64px) in jos si creeaza exact atata depasire verticala: timp de ~2s chiar se poate derula „in articole", apoi dispare. Corectia 1 singura ar taia cardurile cat timp sunt translatate, de aceea cardurile din carusel intra doar prin opacitate. */ html body.public-home-page .home-guides-viewport { overflow-y: hidden !important; } html.reveal-ready body.public-home-page .home-guides-grid > * { transform: none !important; } /* ============================================================ CARDURILE DE BENEFICII (Sub-hero Proiect & Home) Coregrafie Aqua Cullinan: 4 carduri cu intrare in cascada, micro-reveal pe insignele aurii si hover boutique tactil. ============================================================ */ body.public-project-page .home-benefits-strip .home-benefits-inner { --benefits-base-delay: 380ms; } html.reveal-ready body.public-home-page .home-benefits-strip .home-benefits-inner article, html.reveal-ready body.public-project-page .home-benefits-strip .home-benefits-inner article { --reveal-y: 56px; --reveal-dur: 1750ms; --reveal-step: 160ms; --reveal-delay: calc(var(--benefits-base-delay, 0ms) + (var(--reveal-i, 0) * var(--reveal-step))); opacity: 0; transform: translate3d(0, var(--reveal-y), 0); transition: opacity var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms), transform var(--reveal-dur) var(--reveal-ease) var(--reveal-delay, 0ms) !important; will-change: opacity, transform; position: relative; } html.reveal-ready body.public-home-page .home-benefits-strip .home-benefits-inner article.is-in, html.reveal-ready body.public-project-page .home-benefits-strip .home-benefits-inner article.is-in { opacity: 1; transform: translate3d(0, 0, 0); } /* Dupa finalizarea intrarii, eliberam proprietatea transform pentru hover rapid */ html.reveal-ready body.public-home-page .home-benefits-strip .home-benefits-inner article.is-done, html.reveal-ready body.public-project-page .home-benefits-strip .home-benefits-inner article.is-done { will-change: auto; transition: transform .4s cubic-bezier(.16, 1, .3, 1), background .4s ease, border-color .4s ease, box-shadow .4s ease !important; } /* Micro-reveal iconita aurie din interiorul fiecarui card */ html.reveal-ready body.public-home-page .home-benefits-strip .home-benefits-inner article > .benefit-icon, html.reveal-ready body.public-project-page .home-benefits-strip .home-benefits-inner article > .benefit-icon { opacity: 0.25; transform: translateY(10px) scale(0.86); transition: opacity 1400ms cubic-bezier(.16, 1, .3, 1) calc(var(--reveal-delay, 0ms) + 120ms), transform 1400ms cubic-bezier(.16, 1, .3, 1) calc(var(--reveal-delay, 0ms) + 120ms), border-color .35s ease, background-color .35s ease, box-shadow .35s ease !important; } html.reveal-ready body.public-home-page .home-benefits-strip .home-benefits-inner article.is-in > .benefit-icon, html.reveal-ready body.public-project-page .home-benefits-strip .home-benefits-inner article.is-in > .benefit-icon { opacity: 1; transform: translateY(0) scale(1); } html.reveal-ready body.public-home-page .home-benefits-strip .home-benefits-inner article.is-done > .benefit-icon, html.reveal-ready body.public-project-page .home-benefits-strip .home-benefits-inner article.is-done > .benefit-icon { transition: transform .35s cubic-bezier(.16, 1, .3, 1), border-color .35s ease, background-color .35s ease, box-shadow .35s ease !important; } /* Fir de lumina auriu (hairline highlight) pe card la hover */ .home-benefits-strip .home-benefits-inner article::after { content: ''; position: absolute; top: 0; left: 15%; right: 15%; height: 1.5px; background: linear-gradient(90deg, transparent, rgba(214, 180, 109, .8), transparent); opacity: 0; transform: scaleX(0.3); transition: opacity .4s ease, transform .45s cubic-bezier(.16, 1, .3, 1); pointer-events: none; } .home-benefits-strip .home-benefits-inner article:hover::after { opacity: 1; transform: scaleX(1); } /* ---------- Telefon ---------- */ /* Pe ecran mic o translație de 56px arată exagerat, iar cascadele lungi devin obositoare: totul se strânge. */ @media (max-width: 767px) { body.public-home-page, body.public-project-page { --reveal-y: 34px; --reveal-x: 0px; --reveal-dur: 1400ms; --reveal-step: 110ms; } body.public-project-page .home-benefits-strip .home-benefits-inner { --benefits-base-delay: 80ms; } html.reveal-ready body.public-home-page .home-benefits-strip .home-benefits-inner article, html.reveal-ready body.public-project-page .home-benefits-strip .home-benefits-inner article { --reveal-y: 36px; --reveal-dur: 1350ms; --reveal-step: 110ms; } /* Pe ecran ingust intrarile laterale se citesc prost: cat timp nu sunt revelate, elementul stanga sta lipit de margine iar cel dreapta lasa un gol — arata ca un bug de layout, nu ca o animatie. Devin verticale. (Nu produceau scroll orizontal — un parinte deja decupeaza.) */ html.reveal-ready body.public-home-page [data-reveal="left"], html.reveal-ready body.public-home-page [data-reveal="right"], html.reveal-ready body.public-project-page [data-reveal="left"], html.reveal-ready body.public-project-page [data-reveal="right"] { transform: translate3d(0, var(--reveal-y), 0); } body.public-home-page .icon-floorplans-sea, body.public-home-page .icon-floorplans-stage, body.public-project-page .icon-floorplans-sea, body.public-project-page .icon-floorplans-stage { --reveal-y: 42px; --reveal-dur: 1550ms; } } /* ---------- Plasa de siguranta ---------- Pe un site de vanzari, continut ramas invizibil inseamna lead pierdut. Daca o tranzitie nu se incheie (tab in fundal cu throttling agresiv, compozitor blocat, orice), JS-ul forteaza starea finala. */ html.reveal-ready body.public-home-page .reveal-force, html.reveal-ready body.public-project-page .reveal-force { opacity: 1 !important; transform: none !important; transition: none !important; } /* ---------- Accesibilitate ---------- */ @media (prefers-reduced-motion: reduce) { html.reveal-ready body.public-home-page [data-reveal], html.reveal-ready body.public-home-page [data-reveal].is-in, html.reveal-ready body.public-project-page [data-reveal], html.reveal-ready body.public-project-page [data-reveal].is-in { opacity: 1 !important; transform: none !important; transition: none !important; } }