/**
 * ==========================================================================
 * New Grain Market — Unique Split-Screen Reveal Animations
 * ==========================================================================
 * Provides tailored, high-performance, GPU-accelerated split-screen reveals
 * for every section of the website.
 *
 * Requirements Met:
 * 1. Different animation for each section
 * 2. Split-screen reveal: two panels moving apart horizontally or vertically
 * 3. Section-specific effects (Hero, About Us, Architecture, Gallery, etc.)
 * 4. Scroll-triggered (runs once per section, no jittery repeated toggles)
 * 5. Smooth transforms (cubic-bezier easing, GPU accelerated)
 * 6. Preserves branding, colors, typography, images & layout
 * 7. Fully responsive on desktop, tablet, and mobile
 * 8. Full accessibility support (prefers-reduced-motion)
 * 9. Absolute cleanup: split panels vanish completely after reveal (display:none)
 */

/* ---------------- GLOBAL SPLIT REVEAL INFRASTRUCTURE ---------------- */

/* Section baseline container containment */
[data-split-section] {
  position: relative;
}

/* Curtain wrapper covers the entire section during reveal */
.split-curtain-curtain {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 25;
  overflow: hidden;
}

/* Base split panel styling */
.split-curtain-curtain .split-panel {
  position: absolute;
  box-sizing: border-box;
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translate3d(0, 0, 0);
  transition: transform 1.15s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Split seam: delicate luxury hairline along the split boundary */
.split-curtain-curtain .split-seam {
  position: absolute;
  pointer-events: none;
  z-index: 26;
  opacity: 1;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

/* When the section has completed its split reveal, hide curtains completely */
.split-curtain-hidden,
[data-split-section].split-revealed .split-curtain-curtain.split-done {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* Instantaneous off-screen reset without transition */
.split-resetting,
.split-resetting *,
[data-split-section].split-resetting,
[data-split-section].split-resetting * {
  transition: none !important;
  animation: none !important;
}


/* ==========================================================================
   1. HERO SECTION: Grand Double-Door Split Reveal
   ========================================================================== */
.split-curtain-hero .split-panel-1 {
  top: 0;
  left: 0;
  width: 50.5%;
  height: 100%;
  background: #E8EAED;
}

.split-curtain-hero .split-panel-2 {
  top: 0;
  right: 0;
  width: 50.5%;
  height: 100%;
  background: #E8EAED;
}

.split-curtain-hero .split-seam {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(217,220,225,0.60) 50%, rgba(255,255,255,0.05) 100%);
  transform: translateX(-50%);
}

/* Hero reveal active states */
.hero.split-revealed .split-curtain-hero .split-panel-1 {
  transform: translate3d(-100.5%, 0, 0);
}

.hero.split-revealed .split-curtain-hero .split-panel-2 {
  transform: translate3d(100.5%, 0, 0);
}

.hero.split-revealed .split-curtain-hero .split-seam {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.2);
}

/* Hero content entrance choreography */
html.split-js-ready .hero:not(.split-revealed) .hero-inner {
  opacity: 0;
  transform: translate3d(0, 26px, 0);
}

html.split-js-ready .hero:not(.split-revealed) .bg {
  transform: scale(1.08);
}

.hero.split-revealed .bg {
  transform: scale(1);
  transition: transform 1.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.hero.split-revealed .hero-inner {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
              transform 1.05s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}

.hero.split-revealed .hero-float {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
}


/* ==========================================================================
   2. ABOUT US (OVERVIEW): Asymmetric Split (Text & Image Revealed Separately)
   ========================================================================== */
.split-curtain-overview .split-panel-1 {
  top: 0;
  left: 0;
  width: 53%;
  height: 100%;
  background: #FFFFFF;
  border-right: 1px solid rgba(58,58,58,0.06);
  transition-duration: 1.1s;
}

.split-curtain-overview .split-panel-2 {
  top: 0;
  right: 0;
  width: 48%;
  height: 100%;
  background: #FFFFFF;
  border-left: 1px solid rgba(58,58,58,0.06);
  transition-duration: 1.1s;
  transition-delay: 0.16s; /* Distinct staggered reveal for image */
}

.split-curtain-overview .split-seam {
  top: 0;
  bottom: 0;
  left: 52.5%;
  width: 1px;
  background: rgba(58,58,58,0.12);
  transform: translateX(-50%);
}

.overview.split-revealed .split-curtain-overview .split-panel-1 {
  transform: translate3d(-101%, 0, 0);
}

.overview.split-revealed .split-curtain-overview .split-panel-2 {
  transform: translate3d(101%, 0, 0);
}

.overview.split-revealed .split-curtain-overview .split-seam {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.4);
}

/* About Us content motion: text from left, gate image from right */
html.split-js-ready .overview:not(.split-revealed) .ov-head,
html.split-js-ready .overview:not(.split-revealed) .ov-copy {
  opacity: 0;
  transform: translate3d(-30px, 0, 0);
}

html.split-js-ready .overview:not(.split-revealed) .ov-art {
  opacity: 0;
  transform: translate3d(30px, 0, 0);
}

.overview.split-revealed .ov-head,
.overview.split-revealed .ov-copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
              transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.overview.split-revealed .ov-art {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
              transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.overview.split-revealed .ov-art .ov-photo .frame img {
  clip-path: inset(0 0 0 0%) !important;
}


/* ==========================================================================
   3. PROJECT HIGHLIGHTS: Vertical Split Reveal (Top & Bottom Parting)
   ========================================================================== */
.split-curtain-highlights .split-panel-1 {
  top: 0;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: #F3F4F5;
}

.split-curtain-highlights .split-panel-2 {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: #F3F4F5;
}

.split-curtain-highlights .split-seam {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(58,58,58,0.12);
  transform: translateY(-50%);
}

.highlights.split-revealed .split-curtain-highlights .split-panel-1 {
  transform: translate3d(0, -100.5%, 0);
}

.highlights.split-revealed .split-curtain-highlights .split-panel-2 {
  transform: translate3d(0, 100.5%, 0);
}

.highlights.split-revealed .split-curtain-highlights .split-seam {
  opacity: 0;
  transform: translateY(-50%) scaleX(0.4);
}

/* Highlights content motion: Header drops in, stat metrics elevate */
html.split-js-ready .highlights:not(.split-revealed) .head {
  opacity: 0;
  transform: translate3d(0, -20px, 0);
}

html.split-js-ready .highlights:not(.split-revealed) .stat-item {
  opacity: 0;
  transform: translate3d(0, 28px, 0);
}

.highlights.split-revealed .head {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.highlights.split-revealed .stat-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.25s + var(--i, 0) * 0.11s);
}


/* ==========================================================================
   4. ARCHITECTURE & DESIGN: Opposite Direction Converging Reveal
   ========================================================================== */
.split-curtain-architecture .split-panel-1 {
  top: 0;
  left: 0;
  width: 50.5%;
  height: 100%;
  background: #F3F4F5;
}

.split-curtain-architecture .split-panel-2 {
  top: 0;
  right: 0;
  width: 50.5%;
  height: 100%;
  background: #F3F4F5;
}

.split-curtain-architecture .split-seam {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(48, 50, 56, 0.12);
}

.architecture.split-revealed .split-curtain-architecture .split-panel-1 {
  transform: translate3d(-100.5%, 0, 0);
}

.architecture.split-revealed .split-curtain-architecture .split-panel-2 {
  transform: translate3d(100.5%, 0, 0);
}

.architecture.split-revealed .split-curtain-architecture .split-seam {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.3);
}

/* Choreographed entrance animations (replays smoothly on re-entry) */
html.split-js-ready .architecture:not(.split-revealed) .arch-head {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

html.split-js-ready .architecture:not(.split-revealed) .arch-lead {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

html.split-js-ready .architecture:not(.split-revealed) .arch-showcase {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
}

html.split-js-ready .architecture:not(.split-revealed) .arch-fact-card {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
}

.architecture.split-revealed .arch-head {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.architecture.split-revealed .arch-lead {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
              transform 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.architecture.split-revealed .arch-showcase {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
              transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}

.architecture.split-revealed .arch-fact-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1) calc(0.25s + var(--i, 0) * 0.1s),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1) calc(0.25s + var(--i, 0) * 0.1s);
}

/* ==========================================================================
   5. FLOOR PLANS: Horizontal Opposing Split (Blueprint & Specs)
   ========================================================================== */
.split-curtain-plans .split-panel-1 {
  top: 0;
  left: 0;
  width: 52%;
  height: 100%;
  background: #F3F4F5;
}

.split-curtain-plans .split-panel-2 {
  top: 0;
  right: 0;
  width: 49%;
  height: 100%;
  background: #F3F4F5;
}

.split-curtain-plans .split-seam {
  top: 0;
  bottom: 0;
  left: 51.5%;
  width: 1px;
  background: rgba(58,58,58,0.12);
  transform: translateX(-50%);
}

.plans.split-revealed .split-curtain-plans .split-panel-1 {
  transform: translate3d(-101%, 0, 0);
}

.plans.split-revealed .split-curtain-plans .split-panel-2 {
  transform: translate3d(101%, 0, 0);
}

.plans.split-revealed .split-curtain-plans .split-seam {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.3);
}

/* Content motion: header drops in, blueprint expands, specs slide in */
html.split-js-ready .plans:not(.split-revealed) .plan-header-bar {
  opacity: 0;
  transform: translate3d(0, -18px, 0);
}

html.split-js-ready .plans:not(.split-revealed) .plan-img {
  opacity: 0;
  transform: translate3d(-24px, 0, 0) scale(0.985);
}

html.split-js-ready .plans:not(.split-revealed) .plan-side {
  opacity: 0;
  transform: translate3d(24px, 0, 0);
}

.plans.split-revealed .plan-header-bar {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}

.plans.split-revealed .plan-img {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}

.plans.split-revealed .plan-side {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.22s,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.22s;
}


/* ==========================================================================
   6. SPECIFICATIONS: Dual Horizontal Blinds Parting Vertically
   ========================================================================== */
.split-curtain-specifications .split-panel-1 {
  top: 0;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: #FFFFFF;
}

.split-curtain-specifications .split-panel-2 {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: #FFFFFF;
}

.split-curtain-specifications .split-seam {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(58,58,58,0.12);
  transform: translateY(-50%);
}

.specs.split-revealed .split-curtain-specifications .split-panel-1 {
  transform: translate3d(0, -100.5%, 0);
}

.specs.split-revealed .split-curtain-specifications .split-panel-2 {
  transform: translate3d(0, 100.5%, 0);
}

.specs.split-revealed .split-curtain-specifications .split-seam {
  opacity: 0;
  transform: translateY(-50%) scaleX(0.4);
}

/* Staggered grid item settle */
html.split-js-ready .specs:not(.split-revealed) .spec-item:nth-child(odd) {
  opacity: 0;
  transform: translate3d(0, -16px, 0);
}

html.split-js-ready .specs:not(.split-revealed) .spec-item:nth-child(even) {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}

.specs.split-revealed .spec-item {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   7. AMENITIES: Center-Outward Horizontal Curtain Split
   ========================================================================== */
.split-curtain-amenities .split-panel-1 {
  top: 0;
  left: 0;
  width: 50.5%;
  height: 100%;
  background: #F3F4F5;
}

.split-curtain-amenities .split-panel-2 {
  top: 0;
  right: 0;
  width: 50.5%;
  height: 100%;
  background: #F3F4F5;
}

.split-curtain-amenities .split-seam {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(58,58,58,0.12);
  transform: translateX(-50%);
}

.amenities.split-revealed .split-curtain-amenities .split-panel-1 {
  transform: translate3d(-100.5%, 0, 0);
}

.amenities.split-revealed .split-curtain-amenities .split-panel-2 {
  transform: translate3d(100.5%, 0, 0);
}

.amenities.split-revealed .split-curtain-amenities .split-seam {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.3);
}

/* Amenities slider track float in */
html.split-js-ready .amenities:not(.split-revealed) .amen-shell:not(.in) {
  opacity: 0;
  transform: translateY(16px);
}

.amenities.split-revealed .amen-shell,
.amenities .amen-shell.in {
  opacity: 1 !important;
  transform: none !important;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1) !important;
}


/* ==========================================================================
   8. GALLERY: Alternating Split-Panel Animations on Images
   ========================================================================== */
.split-curtain-gallery .split-panel-1 {
  top: 0;
  left: 0;
  width: 50.5%;
  height: 100%;
  background: #FFFFFF;
}

.split-curtain-gallery .split-panel-2 {
  top: 0;
  right: 0;
  width: 50.5%;
  height: 100%;
  background: #FFFFFF;
}

.split-curtain-gallery .split-seam {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: rgba(58,58,58,0.12);
  transform: translateX(-50%);
}

.gallery.split-revealed .split-curtain-gallery .split-panel-1 {
  transform: translate3d(-100.5%, 0, 0);
}

.gallery.split-revealed .split-curtain-gallery .split-panel-2 {
  transform: translate3d(100.5%, 0, 0);
}

.gallery.split-revealed .split-curtain-gallery .split-seam {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.3);
}

/* Gallery individual slide alternating split overlays */
.gal-slide {
  position: relative;
  overflow: hidden;
}

.split-slide-curtain {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  overflow: hidden;
}

.split-slide-curtain .slide-panel {
  position: absolute;
  background: #F7F7F7;
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ODD SLIDES: Vertical split (top panel moves up, bottom panel moves down) */
.split-slide-v .slide-panel-1 {
  top: 0;
  left: 0;
  width: 100%;
  height: 50.5%;
}

.split-slide-v .slide-panel-2 {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50.5%;
}

.gallery.split-revealed .split-slide-v .slide-panel-1 {
  transform: translate3d(0, -101%, 0);
}

.gallery.split-revealed .split-slide-v .slide-panel-2 {
  transform: translate3d(0, 101%, 0);
}

/* EVEN SLIDES: Horizontal split (left panel moves left, right panel moves right) */
.split-slide-h .slide-panel-1 {
  top: 0;
  left: 0;
  width: 50.5%;
  height: 100%;
}

.split-slide-h .slide-panel-2 {
  top: 0;
  right: 0;
  width: 50.5%;
  height: 100%;
}

.gallery.split-revealed .split-slide-h .slide-panel-1 {
  transform: translate3d(-101%, 0, 0);
}

.gallery.split-revealed .split-slide-h .slide-panel-2 {
  transform: translate3d(101%, 0, 0);
}

/* After slide split reveal completes, ensure slide curtains vanish cleanly */
.split-slide-curtain.split-done {
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}


/* ==========================================================================
   9. LOCATION: Dual-Wing Horizontal Split Reveal
   ========================================================================== */
.split-curtain-location .split-panel-1 {
  top: 0;
  left: 0;
  width: 54%;
  height: 100%;
  background: #F3F4F5;
}

.split-curtain-location .split-panel-2 {
  top: 0;
  right: 0;
  width: 47%;
  height: 100%;
  background: #F3F4F5;
}

.split-curtain-location .split-seam {
  top: 0;
  bottom: 0;
  left: 53.5%;
  width: 1px;
  background: rgba(58,58,58,0.12);
  transform: translateX(-50%);
}

.location.split-revealed .split-curtain-location .split-panel-1 {
  transform: translate3d(-101%, 0, 0);
}

.location.split-revealed .split-curtain-location .split-panel-2 {
  transform: translate3d(101%, 0, 0);
}

.location.split-revealed .split-curtain-location .split-seam {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.3);
}

/* Location content motion: map slides from left, points from right */
html.split-js-ready .location:not(.split-revealed) .loc-map-col {
  opacity: 0;
  transform: translate3d(-24px, 0, 0);
}

html.split-js-ready .location:not(.split-revealed) .loc-points li {
  opacity: 0;
  transform: translate3d(24px, 0, 0);
}

.location.split-revealed .loc-map-col {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
              transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.location.split-revealed .loc-points li {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ==========================================================================
   10. ENQUIRY: Split-Door Reveal (Contact Side & Form Card)
   ========================================================================== */
.split-curtain-enquiry .split-panel-1 {
  top: 0;
  left: 0;
  width: 48%;
  height: 100%;
  background: #FFFFFF;
}

.split-curtain-enquiry .split-panel-2 {
  top: 0;
  right: 0;
  width: 53%;
  height: 100%;
  background: #FFFFFF;
}

.split-curtain-enquiry .split-seam {
  top: 0;
  bottom: 0;
  left: 47.5%;
  width: 1px;
  background: rgba(58,58,58,0.12);
  transform: translateX(-50%);
}

.enquiry.split-revealed .split-curtain-enquiry .split-panel-1 {
  transform: translate3d(-101%, 0, 0);
}

.enquiry.split-revealed .split-curtain-enquiry .split-panel-2 {
  transform: translate3d(101%, 0, 0);
}

.enquiry.split-revealed .split-curtain-enquiry .split-seam {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.3);
}

/* Enquiry motion: Contact info left, Form card right */
html.split-js-ready .enquiry:not(.split-revealed) .enq-side {
  opacity: 0;
  transform: translate3d(-24px, 0, 0);
}

html.split-js-ready .enquiry:not(.split-revealed) .enq-form-wrap {
  opacity: 0;
  transform: translate3d(24px, 0, 0);
}

.enquiry.split-revealed .enq-side {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
              transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.enquiry.split-revealed .enq-form-wrap {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.25s,
              transform 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.25s;
}


/* ==========================================================================
   11. CTA BAND: Dual Center-Parting Reveal
   ========================================================================== */
.split-curtain-cta .split-panel-1 {
  top: 0;
  left: 0;
  width: 50.5%;
  height: 100%;
  background: #E8EAED;
}

.split-curtain-cta .split-panel-2 {
  top: 0;
  right: 0;
  width: 50.5%;
  height: 100%;
  background: #E8EAED;
}

.split-curtain-cta .split-seam {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(217,220,225,0.60) 50%, rgba(255,255,255,0.05) 100%);
  transform: translateX(-50%);
}

.cta-band.split-revealed .split-curtain-cta .split-panel-1 {
  transform: translate3d(-100.5%, 0, 0);
}

.cta-band.split-revealed .split-curtain-cta .split-panel-2 {
  transform: translate3d(100.5%, 0, 0);
}

.cta-band.split-revealed .split-curtain-cta .split-seam {
  opacity: 0;
  transform: translateX(-50%) scaleY(0.3);
}

/* CTA content motion */
html.split-js-ready .cta-band:not(.split-revealed) .wrap {
  opacity: 0;
  transform: translate3d(0, 24px, 0);
}

.cta-band.split-revealed .wrap {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s,
              transform 1s cubic-bezier(0.22, 1, 0.36, 1) 0.2s;
}


/* ==========================================================================
   12. FOOTER: Subtle Vertical Hairline Split Parting
   ========================================================================== */
.split-curtain-footer .split-panel-1 {
  top: 0;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: #303238;
}

.split-curtain-footer .split-panel-2 {
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50.5%;
  background: #303238;
}

.split-curtain-footer .split-seam {
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(255,255,255,0.1);
  transform: translateY(-50%);
}

.site-footer.split-revealed .split-curtain-footer .split-panel-1 {
  transform: translate3d(0, -100.5%, 0);
}

.site-footer.split-revealed .split-curtain-footer .split-panel-2 {
  transform: translate3d(0, 100.5%, 0);
}

.site-footer.split-revealed .split-curtain-footer .split-seam {
  opacity: 0;
  transform: translateY(-50%) scaleX(0.3);
}

/* Footer content entrance */
html.split-js-ready .site-footer:not(.split-revealed) .footer-top,
html.split-js-ready .site-footer:not(.split-revealed) .footer-bottom {
  opacity: 0;
  transform: translate3d(0, 18px, 0);
}

.site-footer.split-revealed .footer-top,
.site-footer.split-revealed .footer-bottom {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s,
              transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}


/* ==========================================================================
   ACCESSIBILITY: Respect prefers-reduced-motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .split-curtain-curtain,
  .split-slide-curtain,
  .split-seam {
    display: none !important;
  }

  [data-split-section],
  [data-split-section] *,
  .hero-inner,
  .ov-head,
  .ov-copy,
  .ov-art,
  .architecture-content,
  .stat-item,
  .plan-img,
  .plan-side,
  .spec-item,
  .amen-shell,
  .loc-map-col,
  .loc-points li,
  .enq-side,
  .enq-form-wrap,
  .footer-top,
  .footer-bottom {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}


/* ==========================================================================
   RESPONSIVE OPTIMIZATIONS (TABLET & MOBILE)
   ========================================================================== */
@media (max-width: 900px) {
  /* On mobile/tablet, ensure column splits adapt cleanly to stacked layouts */
  .split-curtain-overview .split-panel-1,
  .split-curtain-overview .split-panel-2 {
    width: 50.5%;
  }

  .split-curtain-plans .split-panel-1,
  .split-curtain-plans .split-panel-2 {
    width: 50.5%;
  }

  .split-curtain-location .split-panel-1,
  .split-curtain-location .split-panel-2 {
    width: 50.5%;
  }

  .split-curtain-enquiry .split-panel-1,
  .split-curtain-enquiry .split-panel-2 {
    width: 50.5%;
  }

  .split-curtain-overview .split-seam,
  .split-curtain-plans .split-seam,
  .split-curtain-location .split-seam,
  .split-curtain-enquiry .split-seam {
    left: 50% !important;
  }
}