/* Bluelink Ventures — Cinematic 3D Scroll Layer
   Additive only: no rule here should be required for existing pages to render.
   Load AFTER all other Bluelink CSS files. */

/* ── Particle / hand-gesture system disabled site-wide by request ───
   The underlying markup and JS are left completely intact (per the "no
   destructive refactor" rule) — the per-page loadThreeJs() functions now
   return immediately (see each subsite's own <script>), and site-boot.js
   no longer builds the global particle canvas or gesture-ui panel. This
   just hides the now-inert static UI elements that were built to control
   those particles, so nothing dead or non-functional is left visible. */
#particle-canvas, #cam-ui, #t-dots, #gesture-hint, #hand-preview-canvas, #cam-video {
  display: none !important;
}

/* ── Scroll container ─────────────────────────────────────────── */
.cinematic-scroll {
  height: 100vh;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior: none;
  /* No scroll-behavior:smooth here: it fights the browser's own mandatory
     snap-scroll animation (both try to own the transition on the same
     element), which produces jumpy, non-deterministic scroll jumps.
     Native mandatory snapping already animates the transition on its own. */
}

html.hand-scrolling .cinematic-scroll {
  scroll-behavior: auto;
}

/* ── Cinematic section base (full-bleed, parallax-ready) ─────── */
.cin-section {
  position: relative;
  width: 100%;
  height: 100vh;
  min-height: 100vh;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(40px, 6vh, 80px) clamp(24px, 6vw, 100px);
}

.cin-bg {
  position: absolute;
  inset: -15% 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform;
  z-index: 0;
  transition: none;
}

.cin-section::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.35) 45%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}

/* Use on any .cin-section that already has its own overlay/gradient
   (e.g. subsite heroes with .hero-overlay) so gradients don't stack. */
.cin-section--no-gradient::after {
  display: none;
}

/* Content stacking above .cin-bg (z:0) and the ::after gradient (z:1) relies on
   each page's own existing z-index/position rules (hero-content, particle
   canvas, etc. already carry these) or, for plain flex-item text, on normal
   flex stacking order — intentionally NOT forcing position:relative here,
   since that would clobber elements that already use position:absolute. */

/* ── Cinematic typography ─────────────────────────────────────── */
.cin-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--yellow);
  margin-bottom: 16px;
}

.cin-heading {
  /* Inherits the site's Inter brand font — no serif import exists on any page here. */
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 800;
  line-height: 1.05;
  color: #FFFFFF;
  margin-bottom: 20px;
  max-width: 800px;
}

.cin-sub {
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(255,255,255,0.75);
  line-height: 1.65;
  max-width: 600px;
  margin-bottom: 36px;
}

.cin-descriptors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.cin-descriptor {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--yellow);
  padding: 6px 14px;
  border: 1px solid rgba(245,197,24,0.40);
  backdrop-filter: blur(6px);
}

/* ── Scroll indicator ──────────────────────────────────────────── */
.cin-scroll-hint {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.55);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  animation: cin-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}

.cin-scroll-hint::after {
  content: '';
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, rgba(245,197,24,0.7), transparent);
  animation: cin-line-drop 2.4s ease-in-out infinite;
}

@keyframes cin-pulse {
  0%, 100% { opacity: 0.45; transform: translateX(-50%) translateY(0); }
  50%       { opacity: 1;    transform: translateX(-50%) translateY(6px); }
}
@keyframes cin-line-drop {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Tall content sections that share the snap container ───────── */
.cin-section--tall {
  height: auto;
  min-height: 100vh;
  scroll-snap-align: start;
  padding: clamp(64px, 8vh, 120px) clamp(24px, 6vw, 100px);
}
.cin-section--tall::after { display: none; }

/* ── Mobile adjustments ────────────────────────────────────────── */
@media (max-width: 768px) {
  .cin-heading { font-size: clamp(32px, 8vw, 56px); }
  .cin-section { padding: 40px 24px; }
  .cin-bg { inset: 0; background-attachment: scroll; }
}

/* ════════════════════════════════════════════════════════════════
   3D SYSTEM — cursor-tilt cards, depth-emerge sections, hero parallax
   layers. Classes below are added by js/bluelink-cinematic-3d.js only
   (never present in the static HTML), so a page with JS disabled or
   failing renders exactly as it did before this file existed.
   ════════════════════════════════════════════════════════════════ */

/* Card tilt: perspective(...) rotateX/rotateY/translateZ is written inline
   per-frame by the JS; this class only carries the resting transition. */
.cin-tilt {
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.5s;
  will-change: transform;
}
.cin-tilt.cin-tilt-active {
  transition: transform 0.08s linear, box-shadow 0.3s;
  box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.45);
}

/* Cursor-follow shine, appended as a child of each tilt card */
.cin-shine {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--cin-mx, 50%) var(--cin-my, 50%), rgba(255, 255, 255, 0.16), transparent 55%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
  z-index: 6;
  border-radius: inherit;
}
.cin-tilt.cin-tilt-active .cin-shine { opacity: 1; }

/* Scroll-triggered 3D emerge for section-level wrappers */
.cin-emerge {
  opacity: 0;
  transform: perspective(1200px) translateY(56px) translateZ(-140px) rotateX(9deg);
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.cin-emerge.cin-emerge-in {
  opacity: 1;
  transform: perspective(1200px) translateY(0) translateZ(0) rotateX(0deg);
}

/* Hero foreground depth layer — subtle cursor-tracked tilt independent of
   the scroll-parallax transform already owned by each page's .cin-bg script. */
.cin-depth-layer {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .cin-tilt, .cin-emerge, .cin-depth-layer {
    transition: none !important;
    transform: none !important;
  }
}

/* No hover tilt on touch devices — the JS also gates this, CSS is a backstop */
@media (hover: none) {
  .cin-tilt { transform: none !important; }
}

/* Idle float — cards stay gently alive at rest, not just on hover. Only the
   resting (non-hovered) state animates; .cin-tilt-active always carries an
   inline transform from the pointer-tracking JS, which naturally overrides
   this because the animation only applies while that class is absent. */
@keyframes cin-idle-float {
  0%, 100% { transform: perspective(900px) translateY(0) rotateX(0deg) rotateY(0deg); }
  50% { transform: perspective(900px) translateY(-9px) rotateX(1.4deg) rotateY(-1.6deg); }
}
.cin-tilt:not(.cin-tilt-active) {
  animation: cin-idle-float 5.5s ease-in-out infinite;
  animation-delay: var(--cin-float-delay, 0s);
}

/* ════════════════════════════════════════════════════════════════
   LUXURY WEBGL LAYER — liquid-distortion photos, magnetic cursor.
   Added by js/bluelink-luxury-3d.js only; a page with WebGL or JS
   unavailable simply keeps showing the plain <img> underneath.
   ════════════════════════════════════════════════════════════════ */

/* The real <img> is NEVER hidden — it stays fully visible at all times as
   the guaranteed fallback. The WebGL canvas is a pure overlay painted
   directly on top of it (same picture at rest, distorted only on hover),
   so a failed/slow/unsupported WebGL build can never make a photo vanish. */
.cin-ripple-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

/* Elements the cursor magnetically pulls toward itself while hovered.
   This never hides or replaces the system mouse cursor. */
.cin-magnetic {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce), (hover: none) {
  .cin-tilt { animation: none !important; }
  .cin-magnetic { transform: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   3D PROPERTY VIEWER — drag-to-orbit spatial viewer built from each
   project's own real photography. Added by js/bluelink-property-viewer.js
   as a new section AFTER the existing carousel; never replaces or hides it.
   ════════════════════════════════════════════════════════════════ */
.bl-3d-viewer {
  max-width: 1000px;
  margin: 48px auto;
  padding: 0 clamp(20px, 5vw, 40px);
}
.bl-3d-viewer-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--yellow, #F5C518);
  margin-bottom: 8px;
}
.bl-3d-viewer-title {
  font-size: clamp(20px, 2.6vw, 28px);
  font-weight: 800;
  color: var(--white, #fff);
  margin-bottom: 20px;
}
.bl-3d-viewer-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  overflow: hidden;
  background: #0A0A0F;
  cursor: grab;
  touch-action: pan-y;
  outline: none;
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.5);
}
.bl-3d-viewer-stage:focus-visible {
  box-shadow: 0 0 0 3px var(--yellow, #F5C518);
}
.bl-3d-viewer-stage.bl-3d-viewer-dragging { cursor: grabbing; }

.bl-3d-viewer-frame {
  position: absolute;
  inset: 0;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
  transform-style: preserve-3d;
}
.bl-3d-viewer-dragging .bl-3d-viewer-frame { transition: none; }

.bl-3d-viewer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.28s ease;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}
.bl-3d-viewer-img-visible { opacity: 1; }

.bl-3d-viewer-hint {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(10, 10, 15, 0.72);
  backdrop-filter: blur(6px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 999px;
  pointer-events: none;
  transition: opacity 0.4s, transform 0.4s;
  animation: bl-3d-hint-sway 1.8s ease-in-out infinite;
}
.bl-3d-viewer-hint-icon { font-size: 14px; display: inline-block; animation: bl-3d-hint-spin 2.4s linear infinite; }
.bl-3d-viewer-hint-gone { opacity: 0; transform: translateX(-50%) translateY(8px); }
@keyframes bl-3d-hint-sway {
  0%, 100% { transform: translateX(-50%); }
  50% { transform: translateX(calc(-50% + 6px)); }
}
@keyframes bl-3d-hint-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.bl-3d-viewer-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(10, 10, 15, 0.55);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.25s, background 0.2s;
}
.bl-3d-viewer-stage:hover .bl-3d-viewer-arrow,
.bl-3d-viewer-stage:focus-visible .bl-3d-viewer-arrow { opacity: 1; }
.bl-3d-viewer-arrow:hover { background: rgba(11, 45, 110, 0.85); }
.bl-3d-viewer-arrow-l { left: 14px; }
.bl-3d-viewer-arrow-r { right: 14px; }

.bl-3d-viewer-count {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 4px 10px;
  background: rgba(10, 10, 15, 0.6);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.5px;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .bl-3d-viewer-hint { animation: none; }
  .bl-3d-viewer-hint-icon { animation: none; }
}
@media (max-width: 640px) {
  .bl-3d-viewer-arrow { opacity: 1; width: 34px; height: 34px; font-size: 16px; }
}

/* Compact grid variant — several viewers side by side (e.g. a "3D Property
   Tours" showcase linking out to each project's full page/viewer). */
.bl-3d-viewer-showcase {
  max-width: 1280px;
  margin: 0 auto;
}
.bl-3d-viewer-showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 28px;
}
.bl-3d-viewer-compact {
  margin: 0;
  padding: 0;
  max-width: none;
}
.bl-3d-viewer-compact .bl-3d-viewer-title {
  font-size: 16px;
  margin-bottom: 12px;
}
.bl-3d-viewer-compact .bl-3d-viewer-stage {
  aspect-ratio: 4 / 3;
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.5);
}
.bl-3d-viewer-link {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--yellow, #F5C518);
}

/* ════════════════════════════════════════════════════════════════
   CINEMATIC SCROLL JOURNEY — scroll position drives a "camera" through
   the project's real photography (Ken-Burns zoom/pan + cross-fade
   between real angles). Added by js/bluelink-property-viewer.js as a
   new section right after the existing carousel; never replaces it.
   ════════════════════════════════════════════════════════════════ */
.bl-cine-track {
  position: relative;
  width: 100%;
}
.bl-cine-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  background: #0A0A0F;
}
.bl-cine-scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}
.bl-cine-scene.bl-cine-active { opacity: 1; z-index: 1; }
.bl-cine-scene-img {
  position: absolute;
  inset: -12%;
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.bl-cine-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.15) 100%);
  pointer-events: none;
}
.bl-cine-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  padding: clamp(40px, 8vh, 90px) clamp(24px, 6vw, 90px) clamp(64px, 10vh, 110px);
  pointer-events: none;
}
.bl-cine-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--yellow, #F5C518);
  margin-bottom: 14px;
}
.bl-cine-title {
  font-size: clamp(30px, 5.2vw, 60px);
  font-weight: 800;
  line-height: 1.08;
  color: #fff;
  max-width: 800px;
  margin-bottom: 14px;
}
.bl-cine-sub {
  font-size: clamp(14px, 1.6vw, 18px);
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.65;
  max-width: 620px;
  transition: opacity 0.5s;
}
.bl-cine-sub-hidden { opacity: 0; position: absolute; }
.bl-cine-hint {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: opacity 0.4s;
  pointer-events: none;
}
.bl-cine-hint-icon { font-size: 16px; animation: bl-cine-bob 1.6s ease-in-out infinite; }
.bl-cine-hint-gone { opacity: 0; }
@keyframes bl-cine-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}
.bl-cine-count {
  position: absolute;
  top: 20px;
  right: clamp(20px, 5vw, 60px);
  z-index: 3;
  padding: 5px 12px;
  background: rgba(10, 10, 15, 0.55);
  color: rgba(255, 255, 255, 0.85);
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: 0.5px;
}
.bl-cine-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.12);
  z-index: 3;
}
.bl-cine-progress-bar {
  height: 100%;
  background: var(--yellow, #F5C518);
  width: 0%;
}

@media (prefers-reduced-motion: reduce) {
  .bl-cine-track { height: auto !important; }
  .bl-cine-stage { position: relative; height: 70vh; }
  .bl-cine-hint, .bl-cine-progress { display: none; }
}