/* ──────────────────────────────────────────────────────────────────
 Sell Chicago Properties - shared scroll-effects styles
 Adds the visual scaffolding the scroll-effects.js engine needs.
 ──────────────────────────────────────────────────────────────── */

/* Effects are progressive enhancement: content must stay visible if JS is late or blocked. */
[data-fx="fade-up"],
[data-fx="fade-in"],
[data-fx="zoom-in"],
[data-fx="stagger-children"] > * {
 opacity: 1;
 will-change: auto;
}

[data-fx="fade-up"],
[data-fx="zoom-in"] {
 transform: none;
}

[data-fx="reveal-words"] {
 display: inline-block;
}

/* Three.js hero canvas - absolute fill of its parent */
canvas[data-three-hero] {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 pointer-events: none;
 z-index: 0;
}

/* tilt-3d cards need a transform-style and perspective on parent for best feel */
[data-fx="tilt-3d"] {
 transform-style: preserve-3d;
 transition: box-shadow 0.4s ease;
 cursor: pointer;
}
[data-fx="tilt-3d"]:hover {
 box-shadow: 0 32px 64px -20px rgba(0,0,0,0.35);
}

/* Smooth-scroll wrapper is opt-in only. Native scrolling is the default. */
body[data-smooth-scroll] #smooth-wrapper {
 position: fixed;
 height: 100%;
 width: 100%;
 top: 0;
 left: 0;
 overflow: hidden;
}
body[data-smooth-scroll] #smooth-content {
 overflow: visible;
 width: 100%;
}

/* Reduced motion - bypass animations completely */
@media (prefers-reduced-motion: reduce) {
 [data-fx] {
 opacity: 1 !important;
 transform: none !important;
 transition: none !important;
 }
 canvas[data-three-hero] {
 display: none;
 }
}

/* Section spacing helpers (drop-in classes used by upgraded pages) */
.fx-section {
 position: relative;
 padding: clamp(56px, 8vw, 120px) clamp(20px, 5vw, 60px);
 overflow: clip;
}
.fx-section--dark {
 background: #0d121a;
 color: #f3eee2;
}
.fx-section--gold {
 background: linear-gradient(135deg, #1a2436 0%, #0d121a 70%);
 color: #f3eee2;
}
.fx-section__inner {
 max-width: 1180px;
 margin: 0 auto;
 position: relative;
 z-index: 2;
}

/* Headline that supports word-by-word reveal */
.fx-headline {
 font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
 font-weight: 500;
 font-size: clamp(34px, 5.5vw, 72px);
 line-height: 1.04;
 letter-spacing: -0.02em;
 margin: 0 0 24px 0;
}
.fx-eyebrow {
 font-family: 'Inter', system-ui, sans-serif;
 text-transform: uppercase;
 letter-spacing: 0.18em;
 font-size: 12px;
 font-weight: 600;
 color: #d4a843;
 margin: 0 0 16px 0;
}

/* Card grid used on listings + 'Why work with Montserrat' sections */
.fx-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
 gap: 24px;
 margin-top: 36px;
}
.fx-card {
 background: rgba(255, 255, 255, 0.04);
 border: 1px solid rgba(212, 168, 67, 0.18);
 border-radius: 14px;
 padding: 28px;
 backdrop-filter: blur(6px);
 -webkit-backdrop-filter: blur(6px);
 position: relative;
}
.fx-card__title {
 font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
 font-size: 24px;
 margin: 0 0 10px 0;
 color: #f3eee2;
}
.fx-card__body {
 font-size: 15px;
 line-height: 1.55;
 color: rgba(243, 238, 226, 0.78);
}

/* Counter typography */
.fx-counter {
 font-family: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
 font-weight: 500;
 font-size: clamp(40px, 6vw, 84px);
 color: #d4a843;
 line-height: 1;
 letter-spacing: -0.02em;
 display: inline-block;
}
.fx-counter-label {
 display: block;
 text-transform: uppercase;
 letter-spacing: 0.18em;
 font-size: 11px;
 font-weight: 600;
 color: rgba(243, 238, 226, 0.62);
 margin-top: 10px;
}

/* Pinned hero - content stays put while particles drift behind */
.fx-pinned-hero {
 position: relative;
 height: 100vh;
 min-height: 640px;
 display: grid;
 place-items: center;
 background: radial-gradient(ellipse at center, #1a2436 0%, #0a0e16 75%);
 color: #f3eee2;
 overflow: hidden;
}
.fx-pinned-hero__copy {
 position: relative;
 z-index: 3;
 text-align: center;
 padding: 0 20px;
 max-width: 980px;
}

/* Optional decorative gradient lines */
.fx-divider-gold {
 height: 1px;
 width: 80px;
 background: linear-gradient(90deg, transparent 0%, #d4a843 50%, transparent 100%);
 margin: 24px auto;
}