/* ============================================================
 * home-mobile-3d.css
 * Strat premium 3D cinematic — exclusiv mobil (max-width: 980px)
 * Construit deasupra home-premium-motion.css + home-animations.css
 * ============================================================ */

:root {
    --m3d-ease: cubic-bezier(.16, 1, .3, 1);
    --m3d-ease-back: cubic-bezier(.34, 1.56, .64, 1);
}

/* ============================================================
 * 1. PERSPECTIVE REVEALS — intrari cu adancime reala 3D
 *    Suprascrie transform-ul flat cu perspective() + rotateX()
 *    Transition-ul si stagger-delay-ul din baza raman intacte.
 * ============================================================ */

@media (max-width: 980px) {

    /* stabilizeaza transform-origin jos (nu centru) pentru 3D credibil */
    html.home-motion-ready .home-benefits-inner article.home-motion-item,
    html.home-motion-ready .why-lamer-grid article.home-motion-item,
    html.home-motion-ready .home-use-card.home-motion-item,
    html.home-motion-ready .home-news-card.home-motion-item,
    html.home-motion-ready .construction-video-section.home-motion-item {
        transform-origin: 50% 90%;
    }

    /* Benefits — carti inclinate din planul paginii */
    html.home-motion-ready .home-benefits-inner article.home-motion-item:not(.home-motion-visible) {
        transform: perspective(740px) rotateX(13deg) translateY(28px) scale(.968) !important;
    }
    html.home-motion-ready .home-benefits-inner article.home-motion-item.home-motion-visible {
        transform: perspective(740px) rotateX(0deg) translateY(0) scale(1) !important;
    }

    /* Why Lamer grid */
    html.home-motion-ready .why-lamer-grid article.home-motion-item:not(.home-motion-visible) {
        transform: perspective(740px) rotateX(11deg) translateY(24px) scale(.972) !important;
    }
    html.home-motion-ready .why-lamer-grid article.home-motion-item.home-motion-visible {
        transform: perspective(740px) rotateX(0deg) translateY(0) scale(1) !important;
    }

    /* Use cards — perspectiva din adancime */
    html.home-motion-ready .home-use-card.home-motion-item:not(.home-motion-visible) {
        transform: perspective(860px) rotateX(10deg) translateY(44px) scale(.962) !important;
    }
    html.home-motion-ready .home-use-card.home-motion-item.home-motion-visible {
        transform: perspective(860px) rotateX(0deg) translateY(0) scale(1) !important;
    }

    /* News cards */
    html.home-motion-ready .home-news-card.home-motion-item:not(.home-motion-visible) {
        transform: perspective(740px) rotateX(9deg) translateY(36px) scale(.966) !important;
    }
    html.home-motion-ready .home-news-card.home-motion-item.home-motion-visible {
        transform: perspective(740px) rotateX(0deg) translateY(0) scale(1) !important;
    }

    /* Construction video — drama maxima, clip-path anulat in favoarea 3D pur */
    html.home-motion-ready .construction-video-section.home-motion-item:not(.home-motion-visible) {
        clip-path: none !important;
        transform: perspective(1000px) rotateX(6deg) translateY(52px) scale(.964) !important;
    }
    html.home-motion-ready .construction-video-section.home-motion-item.home-motion-visible {
        clip-path: none !important;
        transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1) !important;
    }
}

/* ============================================================
 * 2. CINEMATIC H2 REVEAL — titluri care se inclina din plan
 * ============================================================ */

@media (max-width: 980px) {

    html.home-motion-ready .why-lamer-content > h2.home-motion-visible,
    html.home-motion-ready .home-use-head > h2.home-motion-visible,
    html.home-motion-ready .home-news-head > div > h2.home-motion-visible,
    html.home-motion-ready .home-final-copy > h2.home-motion-visible,
    html.home-motion-ready .section-head.home-motion-visible h2 {
        animation: mobileH2Tilt3D 1.12s var(--m3d-ease) 70ms both !important;
    }
}

@keyframes mobileH2Tilt3D {
    0% {
        opacity: 0;
        transform: perspective(560px) rotateX(16deg) translateY(34px) scale(.958);
        filter: blur(12px);
    }
    58% {
        opacity: 1;
        transform: perspective(560px) rotateX(-2deg) translateY(-4px) scale(1.005);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: perspective(560px) rotateX(0deg) translateY(0) scale(1);
        filter: blur(0);
    }
}

/* ============================================================
 * 3. HERO — Meteor auriu + micro-particule constelatie
 * ============================================================ */

@media (max-width: 980px) {

    /* Meteor — o singura data la 2.6s, elegant, scurt */
    .mobile-hero-ambient::before {
        content: '';
        position: absolute;
        width: 100px;
        height: 1px;
        background: linear-gradient(90deg, transparent 0%, rgba(215,190,114,.85) 52%, transparent 100%);
        top: 28%;
        left: 62%;
        opacity: 0;
        transform: rotate(-42deg);
        transform-origin: left center;
        animation: heroShootingStar 1.15s ease-out 2.7s both;
        pointer-events: none;
        z-index: 2;
    }

    /* Constelatie micro-particule aurii — discreta, cinematica */
    .mobile-hero-ambient::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 3px;
        height: 3px;
        border-radius: 50%;
        background: rgba(215,190,114,.65);
        box-shadow:
            21vw  17vh 0 0.5px rgba(215,190,114,.52),
            21vw  17vh 5px 1px  rgba(215,190,114,.11),
            57vw  11vh 0 1px   rgba(215,190,114,.46),
            57vw  11vh 6px 1px  rgba(215,190,114,.10),
            79vw  33vh 0 0.8px rgba(215,190,114,.42),
            79vw  33vh 4px 1px  rgba(215,190,114,.09),
            13vw  51vh 0 0.6px rgba(215,190,114,.36),
            43vw  63vh 0 1px   rgba(215,190,114,.30),
            43vw  63vh 5px 1px  rgba(215,190,114,.07),
            87vw  55vh 0 0.7px rgba(215,190,114,.28);
        opacity: 0;
        animation:
            heroParticlesFadeIn 1.8s ease 1.5s both,
            heroParticlesDrift 14s ease-in-out 3.8s infinite alternate;
        pointer-events: none;
        z-index: 2;
        will-change: transform, opacity;
    }
}

@keyframes heroShootingStar {
    0%   { opacity: 0;  transform: rotate(-42deg) translateX(0) scaleX(0.01); }
    10%  { opacity: .9; transform: rotate(-42deg) translateX(0) scaleX(1); }
    70%  { opacity: .6; }
    100% { opacity: 0;  transform: rotate(-42deg) translateX(44vw) scaleX(1); }
}

@keyframes heroParticlesFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes heroParticlesDrift {
    0%   { transform: translate3d(0, 0, 0); }
    30%  { transform: translate3d(5px, -7px, 0); }
    65%  { transform: translate3d(-4px, 4px, 0); }
    100% { transform: translate3d(8px, -12px, 0); }
}

/* ============================================================
 * 4. AMBIENT GOLD GLOW — respiratie aurie pe sectii
 * ============================================================ */

@media (max-width: 980px) {

    /* Benefits strip */
    .home-benefits-inner {
        position: relative;
        overflow: hidden;
    }

    .home-benefits-inner::after {
        content: '';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 130%;
        height: 150%;
        background:
            radial-gradient(ellipse 72% 52% at 18% 50%, rgba(201,169,110,.06) 0%, transparent 68%),
            radial-gradient(ellipse 52% 64% at 84% 50%, rgba(201,169,110,.04) 0%, transparent 65%);
        pointer-events: none;
        z-index: 0;
        animation: ambientBenefitsBreath 9s ease-in-out 1.5s infinite alternate;
    }

    .home-benefits-inner > * {
        position: relative;
        z-index: 1;
    }

    /* Use section — halou de jos */
    .home-use-shell {
        position: relative;
    }

    .home-use-shell::after {
        content: '';
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        width: 85%;
        height: 180px;
        background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(201,169,110,.065) 0%, transparent 72%);
        pointer-events: none;
        animation: ambientUseBreath 10s ease-in-out 2.5s infinite alternate;
    }

    /* Why Lamer content — halou lateral */
    .why-lamer-content {
        position: relative;
    }

    .why-lamer-content::before {
        content: '';
        position: absolute;
        top: -40px;
        left: -20px;
        right: -20px;
        bottom: -40px;
        background: radial-gradient(ellipse 90% 60% at 0% 40%, rgba(201,169,110,.04) 0%, transparent 65%);
        pointer-events: none;
        z-index: 0;
        animation: ambientBenefitsBreath 11s ease-in-out 3s infinite alternate;
    }

    .why-lamer-content > * {
        position: relative;
        z-index: 1;
    }
}

@keyframes ambientBenefitsBreath {
    0%   { opacity: .55; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 1;   transform: translate(-50%, -50%) scale(1.07); }
}

@keyframes ambientUseBreath {
    0%   { opacity: .5; transform: translateX(-50%) scale(1); }
    100% { opacity: 1;  transform: translateX(-50%) scale(1.1); }
}

/* ============================================================
 * 5. SEPARATOR AURIU — linie decorativa subtila intre sectii
 * ============================================================ */

@media (max-width: 980px) {

    .home-use-section {
        position: relative;
    }

    .home-use-section::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 54px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(201,169,110,.55) 50%, transparent);
        pointer-events: none;
    }

    .why-lamer-section {
        position: relative;
    }

    .why-lamer-section::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 54px;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(201,169,110,.45) 50%, transparent);
        pointer-events: none;
    }
}

/* ============================================================
 * 6. GALERIE WHY LAMER — primul slide se asaza cinematic
 * ============================================================ */

@media (max-width: 980px) {

    html.home-motion-ready .why-lamer-media.home-motion-visible
    .why-lamer-gallery-track > div:first-child figure img {
        animation: galleryFirstSettle 1.15s var(--m3d-ease) .15s both;
    }
}

@keyframes galleryFirstSettle {
    0%   { transform: scale(1.09); filter: saturate(.7) brightness(.8) blur(5px); }
    100% { transform: scale(1);    filter: saturate(1) brightness(1) blur(0); }
}

/* ============================================================
 * 7. TOUCH FEEDBACK — active state 3D premium
 * ============================================================ */

@media (max-width: 980px) {

    .home-use-card,
    .home-news-card {
        -webkit-tap-highlight-color: transparent;
    }

    .home-use-card:active {
        transform: scale(.972) translateY(3px) !important;
        box-shadow: 0 6px 24px rgba(0,0,0,.22), 0 0 0 1px rgba(201,169,110,.15) !important;
        transition: transform .14s var(--m3d-ease), box-shadow .14s ease !important;
    }

    .home-news-card:active {
        transform: scale(.97) !important;
        transition: transform .14s var(--m3d-ease) !important;
    }

    /* CTA buttons — shimmer pe touch */
    .hero-actions .btn-primary,
    .construction-video-actions .btn-primary,
    .home-final-submit {
        -webkit-tap-highlight-color: transparent;
        position: relative;
        overflow: hidden;
    }

    .hero-actions .btn-primary::before,
    .construction-video-actions .btn-primary::before,
    .home-final-submit::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(105deg, transparent 28%, rgba(255,255,255,.26) 50%, transparent 72%);
        transform: translateX(-120%) skewX(-10deg);
        pointer-events: none;
    }

    .hero-actions .btn-primary:active::before,
    .construction-video-actions .btn-primary:active::before,
    .home-final-submit:active::before {
        animation: btnMobileTap .6s ease both;
    }
}

@keyframes btnMobileTap {
    from { transform: translateX(-120%) skewX(-10deg); }
    to   { transform: translateX(120%) skewX(-10deg); }
}

/* ============================================================
 * 8. PROOF STATS — intrare 3D pe construction video
 * ============================================================ */

@media (max-width: 980px) {

    html.home-motion-ready .construction-video-section.home-motion-visible
    .construction-video-proof {
        animation: proofReveal3D .85s var(--m3d-ease) .75s both;
        transform-origin: 50% 100%;
    }
}

@keyframes proofReveal3D {
    from {
        opacity: 0;
        transform: perspective(600px) rotateX(9deg) translateY(22px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: perspective(600px) rotateX(0deg) translateY(0);
        filter: blur(0);
    }
}

/* ============================================================
 * 9. REDUCED MOTION — dezactiveaza tot stratul 3D
 * ============================================================ */

@media (prefers-reduced-motion: reduce) {

    html.home-motion-ready .home-benefits-inner article.home-motion-item,
    html.home-motion-ready .why-lamer-grid article.home-motion-item,
    html.home-motion-ready .home-use-card.home-motion-item,
    html.home-motion-ready .home-news-card.home-motion-item,
    html.home-motion-ready .construction-video-section.home-motion-item {
        transform-origin: 50% 50% !important;
    }

    html.home-motion-ready .home-benefits-inner article.home-motion-item:not(.home-motion-visible),
    html.home-motion-ready .why-lamer-grid article.home-motion-item:not(.home-motion-visible),
    html.home-motion-ready .home-use-card.home-motion-item:not(.home-motion-visible),
    html.home-motion-ready .home-news-card.home-motion-item:not(.home-motion-visible),
    html.home-motion-ready .construction-video-section.home-motion-item:not(.home-motion-visible) {
        transform: none !important;
        clip-path: none !important;
    }

    html.home-motion-ready .home-benefits-inner article.home-motion-item.home-motion-visible,
    html.home-motion-ready .why-lamer-grid article.home-motion-item.home-motion-visible,
    html.home-motion-ready .home-use-card.home-motion-item.home-motion-visible,
    html.home-motion-ready .home-news-card.home-motion-item.home-motion-visible,
    html.home-motion-ready .construction-video-section.home-motion-item.home-motion-visible {
        transform: none !important;
        clip-path: none !important;
        transition: none !important;
    }

    html.home-motion-ready .why-lamer-content > h2.home-motion-visible,
    html.home-motion-ready .home-use-head > h2.home-motion-visible,
    html.home-motion-ready .home-news-head > div > h2.home-motion-visible,
    html.home-motion-ready .home-final-copy > h2.home-motion-visible,
    html.home-motion-ready .section-head.home-motion-visible h2 {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .mobile-hero-ambient::before,
    .mobile-hero-ambient::after,
    .home-benefits-inner::after,
    .home-use-shell::after,
    .why-lamer-content::before {
        display: none !important;
        animation: none !important;
    }

    .home-use-card:active,
    .home-news-card:active {
        transform: none !important;
        box-shadow: none !important;
    }

    html.home-motion-ready .construction-video-section.home-motion-visible
    .construction-video-proof {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    html.home-motion-ready .why-lamer-media.home-motion-visible
    .why-lamer-gallery-track > div:first-child figure img {
        animation: none !important;
        transform: none !important;
        filter: none !important;
    }

    .hero-actions .btn-primary::before,
    .construction-video-actions .btn-primary::before,
    .home-final-submit::before {
        display: none !important;
    }
}