/* ============================================================
   Custom Cursor
   ============================================================ */
.cursor-dot,
.cursor-ring {
  position: fixed;
  pointer-events: none;
  z-index: 99999;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: left, top;
}

.cursor-dot {
  width: 6px;
  height: 6px;
  background-color: #484036;
  transition: transform 0.12s ease, background-color 0.3s ease;
}

.cursor-ring {
  width: 38px;
  height: 38px;
  border: 1.5px solid rgba(72, 64, 54, 0.50);
  background: transparent;
  transition: width 0.35s ease, height 0.35s ease,
              border-color 0.35s ease, opacity 0.35s ease;
}

.cursor-ring.is-hovering {
  width: 62px;
  height: 62px;
  border-color: rgba(72, 64, 54, 0.85);
}

.cursor-ring.is-hidden { opacity: 0; }

/* On dark backgrounds (inside gallery) */
.scroll-gallery-sticky .cursor-dot { background: white; }

@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ============================================================
   Scroll Reveal – luxurious entrance
   ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(56px);
  filter: blur(6px);
  transition: opacity 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.3s cubic-bezier(0.16, 1, 0.3, 1),
              filter 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

[data-reveal="fade"] {
  transform: none;
}

[data-reveal="left"] {
  transform: translateX(-60px);
}

[data-reveal="right"] {
  transform: translateX(60px);
}

[data-reveal="scale"] {
  transform: scale(0.92);
  opacity: 0;
}

[data-reveal="rise"] {
  transform: translateY(80px) scale(0.98);
}

/* Clip-path reveal: text slides up from behind an invisible floor */
[data-reveal="clip"] {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Image wipe from left */
[data-reveal="wipe"] {
  opacity: 1;
  transform: none;
  filter: none;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal].in-view,
[data-reveal="clip"].in-view,
[data-reveal="wipe"].in-view {
  opacity: 1;
  transform: none;
  filter: blur(0);
  clip-path: inset(0 0% 0 0);
}

/* Stagger helpers */
[data-delay="1"]  { transition-delay: 0.08s; }
[data-delay="2"]  { transition-delay: 0.16s; }
[data-delay="3"]  { transition-delay: 0.24s; }
[data-delay="4"]  { transition-delay: 0.32s; }
[data-delay="5"]  { transition-delay: 0.40s; }
[data-delay="6"]  { transition-delay: 0.48s; }
[data-delay="7"]  { transition-delay: 0.56s; }
[data-delay="8"]  { transition-delay: 0.64s; }
[data-delay="9"]  { transition-delay: 0.72s; }
[data-delay="10"] { transition-delay: 0.80s; }
[data-delay="11"] { transition-delay: 0.88s; }
[data-delay="12"] { transition-delay: 0.96s; }

/* ============================================================
   Scroll Indicator (hero)
   ============================================================ */
.scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 3;
  color: rgba(255, 255, 255, 0.70);
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  transition: opacity 0.6s ease;
}

.scroll-indicator-line {
  width: 1px;
  height: 48px;
  background: rgba(255, 255, 255, 0.30);
  position: relative;
  overflow: hidden;
}

.scroll-indicator-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.85);
  animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

/* ============================================================
   Text Marquee Strip
   ============================================================ */
.marquee-strip {
  background-color: #484036;
  color: #dfd9cd;
  padding: 15px 0;
  overflow: hidden;
  width: 100%;
}

.marquee-strip-track {
  display: flex;
  width: max-content;
  animation: marqueeText 30s linear infinite;
}

.marquee-strip-track:hover { animation-play-state: paused; }

.marquee-strip-item {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 0 28px;
  font-size: 10px;
  letter-spacing: 4px;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

.marquee-strip-dot {
  opacity: 0.40;
  font-size: 8px;
}

@keyframes marqueeText {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}