/**
 * PROEX REALTY — MASTERISE HOMES MOTION SYSTEM
 * Luxury Motion Design Architecture inspired by Masterise Homes (masterisehomes.com)
 * Preserves Brand V2 Palette (Deep Navy, Champagne Gold, Warm Ivory).
 * Hardware-accelerated (60/120fps), Zero CLS, WCAG 2.1 AA accessible.
 */

:root {
  --ease-luxury: cubic-bezier(0.16, 1, 0.3, 1);       /* Masterise Homes signature ease */
  --ease-gentle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-hero: 1.15s;
  --duration-reveal: 0.95s;
  --duration-card: 0.85s;
  --duration-micro: 0.4s;
  --champagneGoldGlow: rgba(199, 165, 108, 0.25);
  --goldBorderHover: rgba(199, 165, 108, 0.45);
}

/* ==========================================================================
   1. TOP LUXURY SCROLL PROGRESS BAR
   ========================================================================== */
#proexMotionProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: linear-gradient(90deg, #c7a56c 0%, #ecdcb9 50%, #c7a56c 100%);
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(199, 165, 108, 0.6);
  transition: width 0.08s ease-out;
}

/* ==========================================================================
   2. HERO ARRIVAL CINEMATIC CHOREOGRAPHY
   ========================================================================== */

/* Ken Burns background breathing effect */
@keyframes prxHeroKenBurns {
  0% {
    transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.08);
  }
  50% {
    transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.025);
  }
  100% {
    transform: translate3d(0, var(--hero-shift, 0px), 0) scale(1.08);
  }
}

@keyframes prxHeroFadeInZoom {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(1.14);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1.08);
  }
}

.prx-home-experience .prx-arrival-visual img {
  transform-origin: center center;
  animation: prxHeroFadeInZoom 2.2s var(--ease-luxury) forwards,
             prxHeroKenBurns 32s ease-in-out 2.2s infinite alternate !important;
  will-change: transform;
}

/* Kicker letter tracking reveal */
@keyframes prxKickerReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    letter-spacing: 0.05em;
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    letter-spacing: 0.15em;
  }
}

.prx-arrival-kicker {
  animation: prxKickerReveal 1.2s var(--ease-luxury) 0.1s backwards;
}

/* Ambient pulsating gold dot */
@keyframes prxGoldPulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(199, 165, 108, 0.7);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 0 9px rgba(199, 165, 108, 0);
    transform: scale(1.15);
  }
}

.prx-arrival-mark {
  animation: prxGoldPulse 2.8s ease-in-out infinite;
}

/* Luxury staggered text slide-up reveal */
@keyframes prxSlideUpReveal {
  0% {
    opacity: 0;
    transform: translate3d(0, 36px, 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.prx-home-experience .prx-arrival .prx-hero-title {
  animation: prxSlideUpReveal 1.1s var(--ease-luxury) 0.22s backwards;
}

.prx-home-experience .prx-arrival .prx-hero-title span {
  animation: prxSlideUpReveal 1.1s var(--ease-luxury) 0.38s backwards;
}

.prx-home-experience .prx-arrival .prx-hero-lead {
  animation: prxSlideUpReveal 1.05s var(--ease-luxury) 0.52s backwards;
}

.prx-home-experience .prx-arrival .prx-hero-cta-group {
  animation: prxSlideUpReveal 1.05s var(--ease-luxury) 0.66s backwards;
}

.prx-home-experience .prx-arrival-bottom {
  animation: prxSlideUpReveal 1.05s var(--ease-luxury) 0.8s backwards;
}

/* Hero CTA button luxury micro-interaction */
.prx-home-experience .prx-hero-cta-group .prx-btn-gold {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-luxury),
              box-shadow 0.4s var(--ease-luxury),
              background 0.4s var(--ease-luxury) !important;
}

.prx-home-experience .prx-hero-cta-group .prx-btn-gold:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -6px rgba(199, 165, 108, 0.42);
}

.prx-home-experience .prx-hero-cta-group .prx-btn-gold span {
  display: inline-block;
  transition: transform 0.4s var(--ease-luxury);
}

.prx-home-experience .prx-hero-cta-group .prx-btn-gold:hover span {
  transform: translate(3px, -3px);
}

/* AI Trigger subtle hover float */
.prx-arrival-ai {
  transition: color 0.3s var(--ease-luxury), transform 0.3s var(--ease-luxury);
}

.prx-arrival-ai:hover {
  transform: translateX(4px);
  color: var(--champagneGold);
}

/* Search bar frosted glass & focus glow */
.prx-home-experience .prx-arrival .prx-hero-search {
  transition: border-color 0.4s var(--ease-luxury),
              box-shadow 0.4s var(--ease-luxury),
              background 0.4s var(--ease-luxury);
}

.prx-home-experience .prx-arrival .prx-hero-search:focus-within {
  border-color: #b28a52;
  box-shadow: 0 16px 36px -8px rgba(23, 23, 23, 0.08),
              0 0 0 1px rgba(178, 138, 82, 0.35);
  background: #ffffff;
}

.prx-home-experience .prx-arrival .prx-hero-search-btn {
  transition: color 0.3s var(--ease-luxury), transform 0.3s var(--ease-luxury);
}

.prx-home-experience .prx-arrival .prx-hero-search-btn:hover {
  color: #ecdcb9;
  transform: translateX(3px);
}

/* Scroll indicator breathing float */
@keyframes prxScrollFloat {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(6px);
  }
}

.prx-arrival-scroll {
  animation: prxScrollFloat 3.2s ease-in-out infinite 1.8s;
}

.prx-arrival-scroll > span {
  display: inline-block;
  transition: transform 0.4s var(--ease-luxury);
}

.prx-arrival-scroll:hover > span {
  transform: translateY(4px);
}

/* ==========================================================================
   3. MASTERISE-GRADE SCROLL ENTRANCE REVEALS
   ========================================================================== */

/* Progressive Enhancement: Elements remain clearly readable (never blank or blurry), with subtle smooth entrance */
.js-motion-ready .prx-motion-reveal {
  opacity: 0.95;
  transform: translate3d(0, 10px, 0);
  transition: opacity 0.35s var(--ease-luxury),
              transform 0.4s var(--ease-luxury);
  will-change: opacity, transform;
}

.js-motion-ready .prx-motion-reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger delay classes for child items */
.prx-stagger-1 { transition-delay: 0.08s !important; }
.prx-stagger-2 { transition-delay: 0.16s !important; }
.prx-stagger-3 { transition-delay: 0.24s !important; }
.prx-stagger-4 { transition-delay: 0.32s !important; }
.prx-stagger-5 { transition-delay: 0.40s !important; }
.prx-stagger-6 { transition-delay: 0.48s !important; }

/* Section eyebrow expanding hairline accent */
.prx-eyebrow {
  position: relative;
  display: inline-flex;
  flex-direction: column;
}

.prx-eyebrow::after {
  content: "";
  display: block;
  width: 28px;
  height: 1.5px;
  background: var(--champagneGold);
  margin-top: 6px;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 0.8s var(--ease-luxury) 0.25s;
}

.is-revealed .prx-eyebrow::after,
.prx-eyebrow.is-revealed::after {
  transform: scaleX(1);
}

/* Section titles subtle mask/slide */
.prx-section-title {
  transition: color 0.4s var(--ease-luxury);
}

/* ==========================================================================
   4. INTENT BAR & ACTION PATHWAYS
   ========================================================================== */
.prx-intent-grid > a,
.prx-intent-grid > button {
  position: relative;
  transition: background 0.4s var(--ease-luxury),
              border-color 0.4s var(--ease-luxury),
              padding 0.4s var(--ease-luxury) !important;
}

.prx-intent-grid > a:hover,
.prx-intent-grid > button:hover {
  background: rgba(199, 165, 108, 0.06);
  border-color: rgba(199, 165, 108, 0.4);
}

.prx-intent-grid strong b {
  display: inline-block;
  transition: transform 0.35s var(--ease-luxury);
}

.prx-intent-grid > a:hover strong b,
.prx-intent-grid > button:hover strong b {
  transform: translate(3px, -3px);
  color: var(--champagneGold);
}

/* ==========================================================================
   5. BESPOKE PROJECT CARDS (MASTERISE SHOWCASE AESTHETIC)
   ========================================================================== */
.prx-project-card {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.65s var(--ease-luxury),
              box-shadow 0.65s var(--ease-luxury),
              border-color 0.65s var(--ease-luxury) !important;
  will-change: transform;
}

.prx-project-card:hover {
  transform: translateY(-6px);
  border-color: var(--goldBorderHover) !important;
  box-shadow: 0 24px 44px -16px rgba(7, 26, 45, 0.16),
              0 0 0 1px var(--champagneGoldGlow) !important;
}

/* Project Media Zoom */
.prx-project-media {
  overflow: hidden;
  position: relative;
}

.prx-project-media img {
  transition: transform var(--duration-card) var(--ease-luxury),
              filter var(--duration-card) var(--ease-luxury) !important;
  will-change: transform;
}

.prx-project-card:hover .prx-project-media img {
  transform: scale(1.055) !important;
  filter: contrast(1.03) brightness(1.02);
}

/* Tag / Category Badge */
.prx-project-tag {
  transition: background 0.4s var(--ease-luxury),
              color 0.4s var(--ease-luxury),
              box-shadow 0.4s var(--ease-luxury) !important;
}

.prx-project-card:hover .prx-project-tag {
  background: var(--deepNavy) !important;
  color: var(--champagneGold) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* CTA Arrow Glide */
.prx-project-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.35s var(--ease-luxury),
              transform 0.35s var(--ease-luxury) !important;
}

.prx-project-card:hover .prx-project-cta {
  color: var(--champagneGold) !important;
  transform: translateX(4px);
}

/* ==========================================================================
   6. PROPERTY CARDS (NEED FINDER RESULTS RAIL)
   ========================================================================== */
.prx-property-card {
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.6s var(--ease-luxury),
              box-shadow 0.6s var(--ease-luxury),
              border-color 0.6s var(--ease-luxury) !important;
  will-change: transform;
}

.prx-property-card:hover {
  transform: translateY(-5px);
  border-color: var(--goldBorderHover) !important;
  box-shadow: 0 20px 40px -12px rgba(7, 26, 45, 0.14),
              0 0 0 1px var(--champagneGoldGlow) !important;
}

.prx-property-media {
  overflow: hidden;
  position: relative;
}

.prx-property-media img {
  transition: transform var(--duration-card) var(--ease-luxury),
              filter var(--duration-card) var(--ease-luxury) !important;
  will-change: transform;
}

.prx-property-card:hover .prx-property-media img {
  transform: scale(1.052) !important;
  filter: contrast(1.02) brightness(1.02);
}

/* Property card action buttons */
.prx-property-actions .prx-btn-detail {
  transition: background 0.35s var(--ease-luxury),
              color 0.35s var(--ease-luxury),
              transform 0.35s var(--ease-luxury);
}

.prx-property-card:hover .prx-property-actions .prx-btn-detail {
  background: var(--deepNavy);
  color: var(--champagneGold);
}

/* ==========================================================================
   7. MARKET INSIGHTS CARDS
   ========================================================================== */
.prx-insight-card {
  border-radius: 4px;
  overflow: hidden;
  transition: transform 0.6s var(--ease-luxury),
              box-shadow 0.6s var(--ease-luxury),
              border-color 0.6s var(--ease-luxury) !important;
  will-change: transform;
}

.prx-insight-card:hover {
  transform: translateY(-5px);
  border-color: var(--goldBorderHover) !important;
  box-shadow: 0 20px 40px -14px rgba(7, 26, 45, 0.12),
              0 0 0 1px var(--champagneGoldGlow) !important;
}

.prx-insight-media {
  overflow: hidden;
  position: relative;
}

.prx-insight-media img {
  transition: transform var(--duration-card) var(--ease-luxury) !important;
  will-change: transform;
}

.prx-insight-card:hover .prx-insight-media img {
  transform: scale(1.05) !important;
}

.prx-insight-title a {
  transition: color 0.35s var(--ease-luxury);
}

.prx-insight-card:hover .prx-insight-title a {
  color: var(--champagneGold);
}

/* ==========================================================================
   8. WORKFLOW STEPS & FOUNDER SECTION
   ========================================================================== */
.prx-process-list li {
  transition: transform 0.5s var(--ease-luxury),
              background 0.5s var(--ease-luxury),
              border-color 0.5s var(--ease-luxury);
  border-radius: 3px;
}

.prx-process-list li:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, 0.05);
}

.prx-process-list li span {
  transition: color 0.4s var(--ease-luxury),
              transform 0.4s var(--ease-luxury);
}

.prx-process-list li:hover span {
  color: var(--champagneGold);
  transform: scale(1.1);
}

/* Founder Portrait luxury frame */
.prx-founder-portrait {
  overflow: hidden;
  border-radius: 3px;
  box-shadow: 0 16px 36px -12px rgba(7, 26, 45, 0.16);
  transition: transform 0.6s var(--ease-luxury),
              box-shadow 0.6s var(--ease-luxury);
}

.prx-founder-portrait img {
  transition: transform 0.8s var(--ease-luxury),
              filter 0.8s var(--ease-luxury);
}

.prx-founder-brief:hover .prx-founder-portrait img {
  transform: scale(1.035);
  filter: contrast(1.02);
}

/* ==========================================================================
   9. EDITORIAL HEADER DYNAMIC COMPRESSION ON SCROLL
   ========================================================================== */
.proex-header.is-header-scrolled {
  background-color: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border-bottom: 1px solid rgba(199, 165, 108, 0.22) !important;
  box-shadow: 0 8px 28px -10px rgba(7, 26, 45, 0.08) !important;
}

.proex-header.is-header-scrolled .proex-header-inner {
  height: 60px !important;
  transition: height 0.4s var(--ease-luxury);
}

/* ==========================================================================
   10. FORM FOCUS & SUBMIT LUXURY SHEEN
   ========================================================================== */
.prx-input:focus,
.prx-select:focus,
.prx-textarea:focus {
  outline: none;
  border-color: var(--champagneGold) !important;
  box-shadow: 0 0 0 3px var(--champagneGoldGlow) !important;
  transition: border-color 0.3s var(--ease-luxury),
              box-shadow 0.3s var(--ease-luxury);
}

.prx-submit-btn {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--ease-luxury),
              box-shadow 0.4s var(--ease-luxury),
              background 0.4s var(--ease-luxury) !important;
}

.prx-submit-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -6px rgba(10, 20, 40, 0.3);
}

/* ==========================================================================
   11. ACCESSIBILITY OVERRIDE (PREFERS-REDUCED-MOTION)
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js-motion-ready .prx-motion-reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  #proexMotionProgressBar {
    display: none !important;
  }

  .prx-arrival-mark {
    animation: none !important;
  }

  .prx-arrival-scroll {
    animation: none !important;
  }

  .prx-home-experience .prx-arrival-visual img {
    animation: none !important;
    transform: scale(1.05) !important;
  }
}