/* =============================================================
   GOLF LINKS CHANDIGARH — CINEMATIC LAYER
   Palette-matched to Castelfalfi warm cream + terracotta system
   ============================================================= */

/* ── NOISE TEXTURE OVERLAY ──────────────────────────────────── */
#noiseCanvas {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.025;
  mix-blend-mode: multiply;
  will-change: opacity;
}

/* ── CINEMATIC CURSOR ────────────────────────────────────────── */
#cursorDot {
  width: 5px;
  height: 5px;
  background: var(--color-terra);
  border-radius: 50%;
  position: fixed;
  top: -2.5px; left: -2.5px;
  pointer-events: none;
  z-index: 9999;
  will-change: transform;
}

#cursorRing {
  width: 38px;
  height: 38px;
  border: 1px solid var(--color-terra);
  border-radius: 50%;
  position: fixed;
  top: 0; left: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.4;
  will-change: transform;
  transition:
    transform 0.15s cubic-bezier(0.23, 1, 0.32, 1),
    opacity 0.3s ease,
    border-color 0.3s ease;
}

#cursorRing.is-hover {
  opacity: 0.85;
  border-color: var(--color-terra);
  background: rgba(139,94,60,0.05);
}
#cursorRing.is-click { opacity: 1; background: rgba(139,94,60,0.1); }

@media (pointer: coarse), (max-width: 1023px) {
  #cursorDot, #cursorRing { display: none; }
}

/* ── SCROLL PROGRESS BAR ────────────────────────────────────── */
#scrollProgressBar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(to right, var(--color-terra), var(--color-terra-lt));
  z-index: 10000;
  pointer-events: none;
  transition: width 0.1s linear;
}

/* ── SPLIT TEXT REVEAL ──────────────────────────────────────── */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.04em;
}
.split-inner {
  display: inline-block;
  transform: translateY(110%);
  transition:
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) calc(var(--wi, 0) * 0.07s + 0.1s),
    opacity 0.7s ease calc(var(--wi, 0) * 0.07s + 0.1s);
  opacity: 0;
  will-change: transform;
}
.split-revealed .split-inner { transform: translateY(0); opacity: 1; }

/* ── TILT CARD GLARE ────────────────────────────────────────── */
.tilt-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  z-index: 5;
  transition: opacity 0.3s ease;
}

/* ── MARQUEE ITEM ICON ──────────────────────────────────────── */
.marquee__item span {
  display: inline-block;
  font-size: 0.8em;
  vertical-align: middle;
  line-height: 1;
  margin-right: 2px;
}

/* ── SECTION RULE ANIMATION ──────────────────────────────────── */
.section-rule {
  transform: scaleY(0);
  transition: transform 1.2s cubic-bezier(0.76, 0, 0.24, 1);
}
.section-rule.is-visible { transform: scaleY(1); }

/* Hero floats — removed (SVG art removed from DOM) */
/* .hero__golf-art and .hero__float-* rules intentionally removed */

/* ── PARTICLE CANVAS ────────────────────────────────────────── */
#particleCanvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.5;
}

/* ── HERO CROSS DECORATION ───────────────────────────────────── */
.hero__cross {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease 2s;
}
.hero.hero-animate .hero__cross { opacity: 1; }
.hero__cross-h, .hero__cross-v {
  display: block;
  position: absolute;
  background: var(--color-terra);
  opacity: 0.15;
}
.hero__cross-h {
  width: 36px; height: 1px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.hero__cross-v {
  width: 1px; height: 36px;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}

/* ── NAV CTA LINK — styled as pill in style.css; no overrides here ── */

/* ── ABOUT SECTION ───────────────────────────────────────────── */
.about__intro { position: relative; z-index: 2; }

/* ── INVEST WATERMARK ────────────────────────────────────────── */
.invest .section-watermark {
  top: 40%;
  opacity: 1;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* ── SECTION 3D CINEMA ──────────────────────────────────────── */
[data-cinema] {
  will-change: transform, opacity;
  transform-origin: center bottom;
  backface-visibility: hidden;
}

/* ── DISCOVER PANELS ─────────────────────────────────────────── */
.discover__panel { will-change: transform, opacity; }

/* ── WEDDINGS PANELS ─────────────────────────────────────────── */
.weddings__visual, .weddings__copy { will-change: transform, opacity; }

/* ── FOOTER ENHANCED ─────────────────────────────────────────── */
.footer__top::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,0.06);
}
.footer__top { position: relative; }

/* ── INVEST CARD 3D ──────────────────────────────────────────── */
.invest-card {
  transform-style: preserve-3d;
  will-change: transform, opacity;
}

/* ── INVEST CARD HOVER (overrides style.css for desktop only) ── */
@media (pointer: fine) {
  .invest-card.cinema-reveal:hover {
    transform: perspective(800px) translateY(-8px) scale(1.01);
    transition: transform 0.4s cubic-bezier(0.23,1,0.32,1) !important;
  }
}

/* ── WATERMARK DEPTH ─────────────────────────────────────────── */
.section-watermark,
.about__deco-number {
  will-change: transform;
}

/* ── NAV EXPLORE ICON STATES ─────────────────────────────────── */
.nav__explore { position: relative; }
.nav__explore::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0; right: 0;
  height: 1px;
  background: var(--color-terra);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-luxury);
}
.nav__explore:hover::after { transform: scaleX(1); }

/* ── RESPONSIVE ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  #noiseCanvas { opacity: 0.015; }
  [data-cinema] { transform: none !important; opacity: 1 !important; }
  .weddings__visual,
  .weddings__copy { transform: none !important; opacity: 1 !important; }
  .discover__panel { transform: none !important; opacity: 1 !important; }
  .about { transform: none !important; opacity: 1 !important; }
  .invest-card { opacity: 0; transform: none !important; }
  .invest-card.cinema-reveal,
  .invest-card.reveal-up.is-visible { opacity: 1 !important; transform: none !important; }
}

/* ── PREFERS REDUCED MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-cinema], [data-depth], [data-tilt],
  .weddings__visual, .weddings__copy,
  .discover__panel, .about,
  .invest-card, .split-inner,
  .hero__float {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}