/* ==================================================
   EFFECTS.CSS – Injected visual effects layer
   Includes: custom cursor, scroll reveal, hover lift,
             image shimmer, parallax overlay, magnetic btn
   ================================================== */

/* --------------------------------------------------
   CUSTOM CURSOR
   -------------------------------------------------- */
* { cursor: none !important; }

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 8px; height: 8px;
  background: #c7a27c;
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background 0.2s, opacity 0.2s;
  will-change: transform;
}

.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(199, 162, 124, 0.55);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.35s cubic-bezier(.25,.8,.25,1),
              height 0.35s cubic-bezier(.25,.8,.25,1),
              border-color 0.3s, opacity 0.3s;
  will-change: transform;
}

/* hover state – set via JS */
.cursor-dot.hovered   { width: 12px; height: 12px; background: #1c1c1c; }
.cursor-ring.hovered  { width: 56px; height: 56px; border-color: rgba(199,162,124,0.85); }

/* hide on touch devices */
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
  * { cursor: auto !important; }
}


/* --------------------------------------------------
   SCROLL REVEAL
   -------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.75s cubic-bezier(.22,1,.36,1),
              transform 0.75s cubic-bezier(.22,1,.36,1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* stagger variants for children */
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.65s cubic-bezier(.22,1,.36,1),
              transform 0.65s cubic-bezier(.22,1,.36,1);
}

.reveal-stagger.visible > *:nth-child(1) { transition-delay: 0.05s; opacity:1; transform:none; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: 0.15s; opacity:1; transform:none; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: 0.25s; opacity:1; transform:none; }
.reveal-stagger.visible > *:nth-child(4) { transition-delay: 0.35s; opacity:1; transform:none; }


/* --------------------------------------------------
   PARALLAX SLIDER WRAPPER
   -------------------------------------------------- */
.parallax-scene {
  position: relative;
  overflow: hidden;
}

/* inner img moves at a slower rate via JS */
.parallax-scene img {
  transform-origin: center center;
  will-change: transform;
}

/* subtle dark gradient overlay on slider */
.parallax-scene::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.08) 0%,
    rgba(0,0,0,0.22) 100%
  );
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
}


/* --------------------------------------------------
   IMAGE SHIMMER / HOVER ZOOM
   -------------------------------------------------- */
.ratio-1-1,
.ratio-16-9 {
  position: relative;
  overflow: hidden;
}

/* shimmer sweep on load */
.ratio-1-1::before,
.ratio-16-9::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    110deg,
    transparent 30%,
    rgba(255,255,255,0.18) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  animation: shimmer 1.6s ease forwards;
  z-index: 2;
  pointer-events: none;
}

@keyframes shimmer {
  0%   { transform: translateX(-100%); opacity: 1; }
  70%  { transform: translateX(100%);  opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}

/* zoom on hover */
.ratio-1-1 img,
.ratio-16-9 img {
  transition: transform 0.7s cubic-bezier(.22,1,.36,1),
              filter 0.5s ease;
  will-change: transform;
}

.ratio-1-1:hover img,
.ratio-16-9:hover img {
  transform: scale(1.06);
  filter: brightness(1.04);
}


/* --------------------------------------------------
   CARD TILT (set perspective via JS)
   -------------------------------------------------- */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  transition: box-shadow 0.3s ease;
}

.tilt-card:hover {
  box-shadow: 6px 16px 40px rgba(0,0,0,0.14);
}


/* --------------------------------------------------
   MAGNETIC BUTTON EFFECT
   -------------------------------------------------- */
.magnetic-wrap {
  display: inline-block;
  position: relative;
}

.magnetic-btn {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1);
  will-change: transform;
}


/* --------------------------------------------------
   SCROLL PROGRESS BAR (top of page)
   -------------------------------------------------- */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2.5px;
  width: 0%;
  background: linear-gradient(90deg, #c7a27c, #e8c9a0);
  z-index: 100000;
  transition: width 0.1s linear;
  pointer-events: none;
}


/* --------------------------------------------------
   SECTION HEADING UNDERLINE ANIMATION
   -------------------------------------------------- */
h2 {
  position: relative;
  display: inline-block;
}

/* wrap trick applied via JS */
.h2-wrap {
  text-align: center;
  overflow: hidden;
}

.h2-wrap h2::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 1.5px;
  background: #c7a27c;
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(.22,1,.36,1) 0.3s;
}

.h2-wrap.visible h2::after {
  transform: translateX(-50%) scaleX(1);
}


/* --------------------------------------------------
   GALLERY ITEM HOVER LABEL LIFT
   -------------------------------------------------- */
.gallery-item {
  transition: transform 0.4s cubic-bezier(.22,1,.36,1);
}

.gallery-item:hover {
  transform: translateY(-6px);
}

.gallery-item h3 {
  transition: color 0.3s ease, letter-spacing 0.4s ease;
}

.gallery-item:hover h3 {
  color: #c7a27c;
  letter-spacing: 1.5px;
}