/* NAZAR interactive layer v2 — native scroll, mobile-first, decorative only */

/* Page fade-in */
@media (prefers-reduced-motion: no-preference) {
  body { animation: fxFade .45s ease both; }
}
@keyframes fxFade { from { opacity: 0 } to { opacity: 1 } }

/* Gold scroll progress bar */
.fx-prog {
  position: fixed; top: 0; left: 0; z-index: 500;
  width: 100%; height: 2px;
  background: linear-gradient(90deg, #C9A84C, #7ABFBF);
  transform: scaleX(0); transform-origin: left;
  pointer-events: none;
}

/* Scroll reveal — rise (cards, copy) */
.fx-r { opacity: 0; transform: translateY(20px); transition: opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1); transition-delay: var(--fxd, 0ms); }
.fx-r.fx-in { opacity: 1; transform: none; }

/* Scroll reveal — masked wipe (labels) */
.fx-w { clip-path: inset(0 100% 0 0); opacity: 0; transition: clip-path .85s cubic-bezier(.65,0,.35,1), opacity .3s ease; transition-delay: var(--fxd, 0ms); }
.fx-w.fx-in { clip-path: inset(0 -3% 0 0); opacity: 1; }

/* Gold keyword in headings */
.display .gd, .cta-band-title .gd { color: #C9A84C; }

/* Face-safe cropping for homepage work grid */
.work-grid .wc img { object-position: 50% 18%; }

/* CTA band thumbnail marquee backdrop */
.cta-band.has-mq { position: relative; overflow: hidden; }
.cta-band.has-mq .cta-mq { position: absolute; inset: 0; opacity: 0.16; }
.cta-band.has-mq .cta-mq-track { display: flex; height: 100%; width: max-content; animation: fxMq 60s linear infinite; }
.cta-band.has-mq .cta-mq-track img { height: 100%; width: auto; object-fit: cover; margin-right: 6px; filter: grayscale(35%); }
@keyframes fxMq { to { transform: translateX(-50%); } }
.cta-band.has-mq::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(13,87,87,0.72), rgba(13,87,87,0.55)); z-index: 1; }
.cta-band.has-mq > .section-label, .cta-band.has-mq > .cta-band-title, .cta-band.has-mq > .cta-band-sub, .cta-band.has-mq > .btn-ivory { position: relative; z-index: 2; }

/* Card overlay slide-up + growing gold accent line (works on phone) */
.fx-card .pc-ov.always-on, .fx-card .vs-reel-ov, .fx-card .vs-hero-ov, .fx-card .wc-ov {
  transform: translateY(14px); transition: transform .7s cubic-bezier(.22,.61,.36,1) .18s;
}
.fx-card.fx-in .pc-ov.always-on, .fx-card.fx-in .vs-reel-ov, .fx-card.fx-in .vs-hero-ov, .fx-card.fx-in .wc-ov {
  transform: none;
}
.fx-card .pc-ov.always-on::after {
  content: ''; display: block; width: 0; height: 1px;
  background: #C9A84C; margin-top: 10px;
  transition: width .7s ease .45s;
}
.fx-card.fx-in .pc-ov.always-on::after { width: 36px; }

/* Tap feedback on touch devices */
@media (hover: none) {
  .pc, .wc, .vs-reel-wrap, .vs-hero-wrap, .svc, .lbc { transition: transform .15s ease; }
  .pc:active, .wc:active, .vs-reel-wrap:active, .vs-hero-wrap:active, .svc:active, .lbc:active { transform: scale(.985); }
}

/* Nav shrink on scroll */
.nav { transition: padding .35s ease, background .35s ease, border-color .35s ease; }
.nav.fx-scrolled { padding-top: 10px !important; padding-bottom: 10px !important; background: rgba(10,10,10,0.97); border-bottom-color: rgba(201,168,76,0.14); }

/* Nav link underline sweep */
.nav-links a { position: relative; }
.nav-links a::after { content: ''; position: absolute; left: 0; bottom: -6px; height: 1px; width: 100%; background: #C9A84C; transform: scaleX(0); transform-origin: right; transition: transform .35s ease; }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); transform-origin: left; }

/* Desktop-only: card gold glow, service lift */
@media (hover: hover) and (pointer: fine) {
  .pc::before, .wc::before, .vs-reel-wrap::before, .vs-hero-wrap::before, .lbc::before {
    content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    box-shadow: inset 0 0 0 1px rgba(201,168,76,0);
    transition: box-shadow .45s ease;
  }
  .pc:hover::before, .wc:hover::before, .vs-reel-wrap:hover::before, .vs-hero-wrap:hover::before, .lbc:hover::before {
    box-shadow: inset 0 0 0 1px rgba(201,168,76,0.55);
  }
  .svc { transition: transform .45s ease, border-color .45s ease; }
  .svc:hover { transform: translateY(-6px); }
  .btn-gilt, .btn-ivory, .btn-outline, .btn-dark, .nav-cta { will-change: transform; }
}

/* Hero intro (index) — runs on desktop AND phone */
.fx-hl { display: inline-block; opacity: 0; transform: translateY(.45em); animation: fxHL .7s cubic-bezier(.22,.61,.36,1) forwards; animation-delay: var(--fxd, 0ms); }
.fx-hero-el { opacity: 0; animation: fxHeroEl .8s ease forwards; animation-delay: var(--fxd, 0ms); }
@keyframes fxHL { to { opacity: 1; transform: none } }
@keyframes fxHeroEl { from { opacity: 0; transform: translateY(18px) } to { opacity: 1; transform: none } }

@media (prefers-reduced-motion: reduce) {
  .cta-band.has-mq .cta-mq-track { animation: none !important; }
  .fx-r, .fx-w { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  .fx-hl, .fx-hero-el { opacity: 1 !important; transform: none !important; animation: none !important; }
  .fx-card .pc-ov.always-on, .fx-card .vs-reel-ov, .fx-card .vs-hero-ov, .fx-card .wc-ov { transform: none !important; }
}