/* ============================================================
   PROPERTY PLATFORM — Global 3D & Animation Layer
   Adds depth + motion to the entire site without breaking layout
   ============================================================ */

/* ── Scroll-reveal base ── */
.pp3d-reveal {
    opacity: 0;
    transform: translateY(32px) scale(.97);
    transition: opacity .55s cubic-bezier(.22,.68,0,1.1), transform .55s cubic-bezier(.22,.68,0,1.1);
}
.pp3d-reveal.pp3d-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.pp3d-reveal-left {
    opacity: 0;
    transform: translateX(-36px) rotateY(6deg);
    transition: opacity .55s cubic-bezier(.22,.68,0,1.1), transform .55s cubic-bezier(.22,.68,0,1.1);
}
.pp3d-reveal-left.pp3d-visible {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
}
.pp3d-reveal-right {
    opacity: 0;
    transform: translateX(36px) rotateY(-6deg);
    transition: opacity .55s cubic-bezier(.22,.68,0,1.1), transform .55s cubic-bezier(.22,.68,0,1.1);
}
.pp3d-reveal-right.pp3d-visible {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
}

/* ── Stagger delays ── */
.pp3d-d1 { transition-delay: .08s !important; }
.pp3d-d2 { transition-delay: .16s !important; }
.pp3d-d3 { transition-delay: .24s !important; }
.pp3d-d4 { transition-delay: .32s !important; }
.pp3d-d5 { transition-delay: .40s !important; }
.pp3d-d6 { transition-delay: .48s !important; }

/* ── 3D Tilt card (applied via JS on hover) ── */
.pp3d-tilt {
    transform-style: preserve-3d;
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
}
.pp3d-tilt:hover {
    box-shadow: 0 24px 60px rgba(0,0,0,.18) !important;
}
.pp3d-tilt .pp3d-tilt-inner {
    transform: translateZ(12px);
    transform-style: preserve-3d;
}

/* ── Float animation ── */
.pp3d-float {
    animation: pp3dFloat 4s ease-in-out infinite;
}
.pp3d-float-slow {
    animation: pp3dFloat 6s ease-in-out infinite;
}
.pp3d-float-fast {
    animation: pp3dFloat 2.5s ease-in-out infinite;
}
@keyframes pp3dFloat {
    0%,100% { transform: translateY(0px); }
    50%      { transform: translateY(-10px); }
}

/* ── Pulse glow ── */
.pp3d-glow {
    animation: pp3dGlow 2.5s ease-in-out infinite;
}
@keyframes pp3dGlow {
    0%,100% { box-shadow: 0 0 0 0 rgba(165,35,35,0); }
    50%      { box-shadow: 0 0 24px 6px rgba(165,35,35,.22); }
}
.pp3d-glow-green {
    animation: pp3dGlowGreen 2.5s ease-in-out infinite;
}
@keyframes pp3dGlowGreen {
    0%,100% { box-shadow: 0 0 0 0 rgba(149,204,32,0); }
    50%      { box-shadow: 0 0 24px 6px rgba(149,204,32,.22); }
}

/* ── Shimmer text ── */
.pp3d-shimmer-text {
    background: linear-gradient(90deg, #A52323 0%, #ff6b6b 30%, #95CC20 60%, #A52323 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pp3dShimmer 3s linear infinite;
}
@keyframes pp3dShimmer {
    from { background-position: 0% center; }
    to   { background-position: 200% center; }
}

/* ── 3D depth on property cards ── */
.propr-card,
.crs-prop-card,
.pp-list-card,
.pp-myp-card {
    transform-style: preserve-3d;
    transition: transform .3s cubic-bezier(.22,.68,0,1.1), box-shadow .3s ease !important;
    will-change: transform;
}
.propr-card:hover,
.crs-prop-card:hover,
.pp-list-card:hover,
.pp-myp-card:hover {
    transform: translateY(-8px) rotateX(1.5deg) scale(1.01) !important;
}

/* ── 3D depth on type/why cards ── */
.propr-type-card,
.crs-type-card,
.propr-why-card,
.crs-why-card,
.pp-offer-card,
.pp-why-row {
    transform-style: preserve-3d;
    transition: transform .3s cubic-bezier(.22,.68,0,1.1), box-shadow .3s ease !important;
    will-change: transform;
}
.propr-type-card:hover,
.crs-type-card:hover {
    transform: translateY(-6px) rotateX(3deg) scale(1.03) !important;
}
.propr-why-card:hover,
.crs-why-card:hover,
.pp-offer-card:hover,
.pp-why-row:hover {
    transform: translateY(-5px) rotateX(2deg) !important;
}

/* ── Nav logo 3D bob ── */
.ph-logo-img {
    transition: transform .3s cubic-bezier(.22,.68,0,1.2);
}
.ph-logo:hover .ph-logo-img {
    transform: rotateY(15deg) scale(1.08);
}

/* ── Button press depth ── */
.ph-btn-primary,
.ph-btn-outline,
.propr-btn-primary,
.crs-btn-primary,
.pp-btn-primary,
.pf-cta-btn,
.pf-nl-btn {
    transition: transform .15s ease, box-shadow .15s ease !important;
}
.ph-btn-primary:active,
.ph-btn-outline:active,
.propr-btn-primary:active,
.crs-btn-primary:active,
.pp-btn-primary:active,
.pf-cta-btn:active,
.pf-nl-btn:active {
    transform: translateY(2px) scale(.97) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.15) !important;
}

/* ── Section heading entrance ── */
.propr-section-head,
.crs-section-header,
.pp-section-head {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease, transform .5s ease;
}
.propr-section-head.pp3d-visible,
.crs-section-header.pp3d-visible,
.pp-section-head.pp3d-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Hero content entrance ── */
.propr-hero-badge   { animation: pp3dHeroIn .6s cubic-bezier(.22,.68,0,1.2) .1s both; }
.propr-hero-title   { animation: pp3dHeroIn .6s cubic-bezier(.22,.68,0,1.2) .2s both; }
.propr-hero-sub     { animation: pp3dHeroIn .6s cubic-bezier(.22,.68,0,1.2) .3s both; }
.propr-search-card  { animation: pp3dHeroIn .7s cubic-bezier(.22,.68,0,1.2) .4s both; }
@keyframes pp3dHeroIn {
    from { opacity:0; transform: translateY(28px) scale(.96); }
    to   { opacity:1; transform: translateY(0)    scale(1); }
}

/* ── Stats bar count-up pop ── */
.propr-stat-num,
.pf-fstat-num {
    transition: transform .2s ease;
}
.propr-stat-num:hover,
.pf-fstat-num:hover {
    transform: scale(1.12);
}

/* ── Footer social icons 3D ── */
.pf-soc {
    transition: transform .25s cubic-bezier(.22,.68,0,1.3), box-shadow .25s ease !important;
}
.pf-soc:hover {
    transform: translateY(-5px) rotateZ(-5deg) scale(1.12) !important;
}

/* ── Image zoom on card hover ── */
.propr-card-img img,
.crs-prop-img-wrap img,
.pp-list-img img {
    transition: transform .5s cubic-bezier(.22,.68,0,1.1) !important;
}
.propr-card:hover .propr-card-img img,
.crs-prop-card:hover .crs-prop-img-wrap img,
.pp-list-card:hover .pp-list-img img {
    transform: scale(1.07) !important;
}

/* ── Dropdown 3D entrance ── */
.ph-dropdown,
.crs-dropdown {
    transform-origin: top center;
    animation: pp3dDropIn .2s cubic-bezier(.22,.68,0,1.3) both;
}
@keyframes pp3dDropIn {
    from { opacity:0; transform: scaleY(.85) translateY(-8px); }
    to   { opacity:1; transform: scaleY(1)   translateY(0); }
}

/* ── Page transition overlay ── */
#pp3d-page-transition {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #1F1A17, #A52323);
    z-index: 99998;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}
#pp3d-page-transition.pp3d-fade-in  { opacity: 1; }
#pp3d-page-transition.pp3d-fade-out { opacity: 0; }

/* ── Parallax wrapper ── */
.pp3d-parallax-wrap { overflow: hidden; }
.pp3d-parallax-img  { will-change: transform; }

/* ── Ripple on buttons ── */
.pp3d-ripple {
    position: relative;
    overflow: hidden;
}
.pp3d-ripple-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.35);
    transform: scale(0);
    animation: pp3dRipple .55s linear;
    pointer-events: none;
}
@keyframes pp3dRipple {
    to { transform: scale(4); opacity: 0; }
}

/* ── Magnetic button effect (JS-driven) ── */
.pp3d-magnetic {
    transition: transform .2s cubic-bezier(.22,.68,0,1.2);
    display: inline-flex;
}

/* ── Scroll progress bar ── */
#pp3d-progress {
    position: fixed;
    top: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, #A52323, #95CC20, #A52323);
    background-size: 200% auto;
    animation: pp3dShimmer 2s linear infinite;
    z-index: 99999;
    width: 0%;
    transition: width .1s linear;
    border-radius: 0 2px 2px 0;
}

/* ── Cursor glow (desktop only) ── */
#pp3d-cursor {
    position: fixed;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(165,35,35,.25);
    border: 1.5px solid rgba(165,35,35,.5);
    pointer-events: none;
    z-index: 99997;
    transform: translate(-50%,-50%);
    transition: width .2s, height .2s, background .2s, opacity .2s;
    mix-blend-mode: multiply;
}
#pp3d-cursor.pp3d-cursor-hover {
    width: 40px; height: 40px;
    background: rgba(165,35,35,.1);
}
@media (max-width: 991px) {
    #pp3d-cursor { display: none; }
}

/* ══════════════════════════════════════════
   PREMIUM 3D ANIMATIONS — Property Platform
   ══════════════════════════════════════════ */

/* ── Morphing gradient orbs (hero background) ── */
.pp3d-orb {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(60px);
    opacity: 0.18;
    animation: pp3dOrbFloat 8s ease-in-out infinite alternate;
    z-index: 0;
}
.pp3d-orb-1 {
    width: 400px; height: 400px;
    background: radial-gradient(circle, #A52323, transparent);
    top: -100px; left: -80px;
    animation-duration: 9s;
}
.pp3d-orb-2 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, #95CC20, transparent);
    bottom: -60px; right: -60px;
    animation-duration: 11s;
    animation-delay: 2s;
}
.pp3d-orb-3 {
    width: 200px; height: 200px;
    background: radial-gradient(circle, #fbbf24, transparent);
    top: 40%; left: 50%;
    animation-duration: 7s;
    animation-delay: 1s;
}
@keyframes pp3dOrbFloat {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(30px, -40px) scale(1.15); }
}

/* ── Floating particles ── */
.pp3d-particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
.pp3d-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.6);
    animation: pp3dParticleRise linear infinite;
}
@keyframes pp3dParticleRise {
    0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 0.5; }
    100% { transform: translateY(-100vh) rotate(720deg); opacity: 0; }
}

/* ── 3D Card flip on hover (property type cards) ── */
.pp3d-flip-wrap {
    perspective: 800px;
}
.pp3d-flip-inner {
    position: relative;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.22, 0.68, 0, 1.1);
}
.pp3d-flip-wrap:hover .pp3d-flip-inner {
    transform: rotateY(180deg);
}
.pp3d-flip-front,
.pp3d-flip-back {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.pp3d-flip-back {
    position: absolute;
    inset: 0;
    transform: rotateY(180deg);
    background: linear-gradient(135deg, #A52323, #7a1919);
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 0.85rem;
}

/* ── Animated number counter pop ── */
.pp3d-stat-pop {
    animation: pp3dStatPop 0.5s cubic-bezier(0.22, 0.68, 0, 1.5) both;
}
@keyframes pp3dStatPop {
    from { transform: scale(0.5); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── Glowing border on section hover ── */
.pp3d-glow-border {
    position: relative;
    transition: box-shadow 0.3s ease;
}
.pp3d-glow-border::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background: linear-gradient(135deg, #A52323, #95CC20, #fbbf24, #A52323);
    background-size: 300% 300%;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.3s ease;
    animation: pp3dBorderSpin 3s linear infinite;
}
.pp3d-glow-border:hover::after { opacity: 1; }
@keyframes pp3dBorderSpin {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Staggered word reveal ── */
.pp3d-word {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px) rotateX(30deg);
    transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22, 0.68, 0, 1.1);
    transform-origin: bottom center;
}
.pp3d-word.pp3d-visible {
    opacity: 1;
    transform: translateY(0) rotateX(0deg);
}

/* ── Icon bounce on card hover ── */
.propr-why-card:hover .propr-why-ico,
.pp-offer-card:hover .pp-offer-ico {
    animation: pp3dIconBounce 0.5s cubic-bezier(0.22, 0.68, 0, 1.5);
}
@keyframes pp3dIconBounce {
    0%   { transform: scale(1) rotate(0deg); }
    30%  { transform: scale(1.3) rotate(-8deg); }
    60%  { transform: scale(0.9) rotate(5deg); }
    100% { transform: scale(1) rotate(0deg); }
}

/* ── Testimonial card 3D tilt ── */
.pp-testi-card {
    transform-style: preserve-3d;
    transition: transform 0.3s cubic-bezier(0.22, 0.68, 0, 1.1), box-shadow 0.3s ease !important;
}

/* ── Locality chip wave ── */
.pp-loc-chip:hover i {
    animation: pp3dPinBounce 0.4s cubic-bezier(0.22, 0.68, 0, 1.5);
}
@keyframes pp3dPinBounce {
    0%   { transform: translateY(0) scale(1); }
    40%  { transform: translateY(-6px) scale(1.3); }
    100% { transform: translateY(0) scale(1); }
}

/* ── Hero stats bar 3D lift ── */
.propr-stat {
    transition: transform 0.25s cubic-bezier(0.22, 0.68, 0, 1.2);
}
.propr-stat:hover {
    transform: translateY(-6px) scale(1.05);
}

/* ── Animated gradient text ── */
.pp3d-grad-text {
    background: linear-gradient(90deg, #A52323 0%, #ff6b6b 25%, #fbbf24 50%, #95CC20 75%, #A52323 100%);
    background-size: 300% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: pp3dGradText 4s linear infinite;
}
@keyframes pp3dGradText {
    from { background-position: 0% center; }
    to   { background-position: 300% center; }
}

/* ── Section wave divider ── */
.pp3d-wave-divider {
    position: relative;
    overflow: hidden;
}
.pp3d-wave-divider::after {
    content: '';
    position: absolute;
    bottom: -2px; left: 0; right: 0;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60'%3E%3Cpath fill='%23f4f6fb' d='M0,30 C360,60 1080,0 1440,30 L1440,60 L0,60 Z'/%3E%3C/svg%3E") no-repeat bottom;
    background-size: cover;
    pointer-events: none;
}

/* ── Floating action button pulse ── */
.pp-whatsapp-float {
    animation: pp3dWAFloat 3s ease-in-out infinite !important;
}
@keyframes pp3dWAFloat {
    0%,100% { transform: translateY(0) scale(1); box-shadow: 0 4px 20px rgba(37,211,102,0.4); }
    50%      { transform: translateY(-6px) scale(1.05); box-shadow: 0 12px 32px rgba(37,211,102,0.6); }
}

/* ── Property card shine sweep ── */
.propr-card::after,
.pp-list-card::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 2;
}
.propr-card:hover::after,
.pp-list-card:hover::after {
    left: 150%;
}

/* ── Type card icon spin ── */
.propr-type-card:hover .propr-type-ico i {
    animation: pp3dIconSpin 0.5s cubic-bezier(0.22, 0.68, 0, 1.2);
}
@keyframes pp3dIconSpin {
    from { transform: rotateY(0deg) scale(1); }
    50%  { transform: rotateY(90deg) scale(1.2); }
    to   { transform: rotateY(0deg) scale(1); }
}

/* ── Search card glass morphism ── */
.propr-search-card {
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(255,255,255,0.6);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

/* ── Reduce motion ── */
@media (prefers-reduced-motion: reduce) {
    .pp3d-reveal, .pp3d-reveal-left, .pp3d-reveal-right,
    .pp3d-float, .pp3d-float-slow, .pp3d-float-fast,
    .pp3d-glow, .pp3d-glow-green,
    .propr-hero-badge, .propr-hero-title, .propr-hero-sub, .propr-search-card {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}