/* =========================================================
   Creative Transitions preview extension
   Loaded AFTER styles.css. All effects are additive/preview.
   Brand system preserved. No-JS safe + reduced-motion safe.
   ========================================================= */

/* ---- Custom cursor (desktop only, pointer-fine) ---- */
@media (pointer: fine) {
  .t-cursor {
    position: fixed; z-index: 9999; width: 28px; height: 28px;
    border: 1px solid var(--gold); border-radius: 50%;
    top: 0; left: 0; pointer-events: none; opacity: 0;
    transform: translate(-50%, -50%);
    transition: width .25s var(--ease), height .25s var(--ease), opacity .25s;
    mix-blend-mode: difference;
  }
  .t-cursor.is-on { opacity: .9; }
  .t-cursor.is-hover { width: 52px; height: 52px; border-color: var(--gold-bright); }
}

/* ---- Scroll progress bar (gold line fills as you scroll) ---- */
.t-progress {
  position: fixed; top: 0; left: 0; z-index: 80;
  height: 3px; width: 0%; background: linear-gradient(90deg, var(--gold), var(--gold-bright));
  box-shadow: 0 0 8px rgba(211,168,59,.6);
}

/* ---- Headline clip-rise (replaces plain fade on reveal) ----
   The reveal line masks in from below a gold rule. */
.clip-rise .clip-line {
  display: block; overflow: hidden;
}
.clip-rise .clip-inner {
  display: block; transform: translateY(110%);
  transition: transform 1s cubic-bezier(.16,1,.3,1) .12s;
}
.clip-rise.in .clip-inner { transform: translateY(0); }
.clip-rise .clip-rule {
  display: block; width: 0; height: 2px; margin-top: .35em;
  background: var(--gold); transition: width .9s cubic-bezier(.16,1,.3,1) .3s;
}
.clip-rise.in .clip-rule { width: 100%; }

/* spilt headline across multiple wrapped lines */
.a-clip { margin-top: -0.18em; }

/* ---- Service / portfolio photo unmask on scroll ---- */
.unmask {
  position: relative; isolation: isolate; overflow: hidden;
}
.unmask img {
  filter: grayscale(1) contrast(1.08) brightness(1.02);
  mix-blend-mode: luminosity;      /* duotone only while covered */
  transform: scale(1.12);
  transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity 1s, filter 1.4s ease, mix-blend-mode 1.4s ease;
  opacity: .92;
}
.unmask::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(180deg, rgba(211,168,59,.35), rgba(11,11,10,.6));
  mix-blend-mode: color; pointer-events: none;
  transition: opacity 1.4s ease;
}
.unmask::before {   /* gold sweep that reveals upward */
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: var(--ink);
  transform: scaleY(1); transform-origin: bottom;
  transition: transform 1.1s cubic-bezier(.16,1,.3,1);
}
.unmask.in::before { transform: scaleY(0); }
/* Once revealed, drop the duotone + gold wash and restore true colors */
.unmask.in img { transform: scale(1.0); opacity: 1; filter: none; mix-blend-mode: normal; }
.unmask.in::after { opacity: 0; }

/* ---- Parallax drift on the hero photo (subtle) ---- */
.t-parallax { will-change: transform; }

/* ---- Horizontal "keys to booked" rail: moves as you scroll ---- */
.t-rail-scroll { will-change: transform; }

/* ---- Magnetic CTA ---- */
.magnetic { transition: transform .18s var(--ease); will-change: transform; }

/* ---- Reduced motion: kill all decorative motion ---- */
@media (prefers-reduced-motion: reduce) {
  .t-cursor { display: none !important; }
  .clip-rise .clip-inner { transform: none; }
  .clip-rise .clip-rule { width: 100%; }
  .unmask::before { display: none; }
  .unmask img, .unmask.in img { transform: none; filter: none; mix-blend-mode: normal; }
  .unmask::after { opacity: 0; }
  .magnetic { transform: none !important; }
  .t-rail-scroll, .t-parallax { transform: none !important; }
}