/* =========================================================
   Jones & Co. Metals — motion layer
   Reveals use the individual `translate` / `scale` properties so
   they never fight the `transform` used by hover and tilt effects.
   ========================================================= */

:root {
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Preloader ---------- */
.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 22px;
  background: var(--green-950);
  transition: clip-path 1s var(--ease-io), visibility 0s 1s;
  clip-path: inset(0 0 0 0);
}
.preloader__logo { display: grid; justify-items: center; gap: 12px; color: var(--gold); }
.preloader__logo .logo__img {
  height: 180px;
  opacity: 0;
  scale: .9;
  filter: drop-shadow(0 0 0 rgba(226, 196, 131, 0));
  animation: logoIn 1.2s .15s var(--ease-out) forwards;
}
@keyframes logoIn { to { opacity: 1; scale: 1; filter: drop-shadow(0 0 14px rgba(226, 196, 131, .35)); } }
.preloader__bar { width: 140px; height: 1px; background: rgba(201, 164, 92, .2); overflow: hidden; }
.preloader__bar i { display: block; height: 100%; background: var(--gold); transform-origin: left; animation: loadBar 1.2s var(--ease-io) forwards; }
body.is-loaded .preloader { clip-path: inset(0 0 100% 0); visibility: hidden; }
body.is-loading { overflow: hidden; }

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fadeLetter { from { opacity: 0; letter-spacing: .6em; } to { opacity: 1; letter-spacing: .3em; } }
@keyframes loadBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- Scroll progress ---------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 120;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  transform-origin: left;
  transform: scaleX(var(--progress, 0));
  pointer-events: none;
}

/* ---------- Header: slide in, hide on scroll down ---------- */
.header { transition: background .35s var(--ease), padding .35s var(--ease), box-shadow .35s, transform .5s var(--ease-out); }
.header.is-hidden { transform: translateY(-110%); }
body.is-loading .header { transform: translateY(-110%); }
.logo__img { transition: height .35s var(--ease), filter .5s var(--ease-out); }
.logo:hover .logo__img { filter: drop-shadow(0 0 10px rgba(226, 196, 131, .45)); }

/* ---------- Hero intro ---------- */
.hero__bg { scale: 1.15; transition: scale 2.6s var(--ease-out); will-change: translate; }
body.is-loaded .hero__bg { scale: 1.04; }
.hero__dust { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }

.hero .eyebrow,
.hero__lead,
.hero__content .btn,
.hero__tags li {
  opacity: 0;
  translate: 0 22px;
  transition: opacity 1s var(--ease-out), translate 1s var(--ease-out);
}
.hero__tags { position: relative; border-left-color: transparent; }
.hero__tags::before {
  content: "";
  position: absolute;
  left: -1px; top: 0;
  width: 1px; height: 100%;
  background: var(--gold);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.2s 1.2s var(--ease-io);
}
body.is-loaded .hero .eyebrow { opacity: 1; translate: 0 0; transition-delay: .35s; }
body.is-loaded .hero__lead { opacity: 1; translate: 0 0; transition-delay: .95s; }
body.is-loaded .hero__content .btn { opacity: 1; translate: 0 0; transition-delay: 1.1s; }
body.is-loaded .hero__tags li { opacity: 1; translate: 0 0; }
body.is-loaded .hero__tags li:nth-child(1) { transition-delay: 1.35s; }
body.is-loaded .hero__tags li:nth-child(2) { transition-delay: 1.5s; }
body.is-loaded .hero__tags li:nth-child(3) { transition-delay: 1.65s; }
body.is-loaded .hero__tags::before { transform: scaleY(1); }

/* scroll cue */
.hero::after { pointer-events: none; }
.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  width: 1px;
  height: 46px;
  background: rgba(201, 164, 92, .25);
  overflow: hidden;
  opacity: 0;
  transition: opacity 1s 1.8s;
}
.scroll-cue::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  animation: cue 2.2s var(--ease-io) infinite;
}
body.is-loaded .scroll-cue { opacity: 1; }
@keyframes cue { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }

/* ---------- Split-line headings ---------- */
.split-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-line > span {
  display: block;
  translate: 0 105%;
  transition: translate 1.1s var(--ease-out);
}
.split-line:nth-child(2) > span { transition-delay: .12s; }
.split-line:nth-child(3) > span { transition-delay: .24s; }
.is-split.is-visible .split-line > span,
body.is-loaded .hero__title .split-line > span { translate: 0 0; }
.hero__title .split-line > span { transition-delay: .5s; }
.hero__title .split-line:nth-child(2) > span { transition-delay: .64s; }

/* ---------- Scroll reveals ---------- */
.reveal {
  opacity: 0;
  translate: 0 36px;
  transition: opacity .9s var(--ease-out), translate .9s var(--ease-out), scale .9s var(--ease-out), filter .9s var(--ease-out);
  transition-delay: var(--d, 0ms);
}
.reveal--left  { translate: -50px 0; }
.reveal--right { translate: 50px 0; }
.reveal--zoom  { translate: 0 0; scale: .92; filter: blur(6px); }
.reveal.is-visible { opacity: 1; translate: 0 0; scale: 1; filter: none; }

/* eyebrow rule grows in */
.eyebrow--line::before { transform: scaleX(0); transform-origin: left; transition: transform .9s .2s var(--ease-io); }
.is-visible .eyebrow--line::before { transform: scaleX(1); }

/* image curtain on cards */
.svc__img { clip-path: inset(100% 0 0 0); transition: clip-path 1.1s var(--ease-io); transition-delay: calc(var(--d, 0ms) + 150ms); }
.is-visible .svc__img, .svc.is-visible .svc__img { clip-path: inset(0 0 0 0); }

/* strip icons draw themselves */
.strip__icon { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease-io), transform .35s var(--ease); transition-delay: calc(var(--d, 0ms) + 200ms), 0s; }
.strip__item.is-visible .strip__icon { stroke-dashoffset: 0; }

/* sell list stagger */
.sell__list li { opacity: 0; translate: 30px 0; transition: opacity .7s var(--ease-out), translate .7s var(--ease-out), color .25s, transform .3s var(--ease); }
.sell__list.is-visible li { opacity: 1; translate: 0 0; }
.sell__list.is-visible li:nth-child(1) { transition-delay: .1s, .1s, 0s, 0s; }
.sell__list.is-visible li:nth-child(2) { transition-delay: .18s, .18s, 0s, 0s; }
.sell__list.is-visible li:nth-child(3) { transition-delay: .26s, .26s, 0s, 0s; }
.sell__list.is-visible li:nth-child(4) { transition-delay: .34s, .34s, 0s, 0s; }
.sell__list.is-visible li:nth-child(5) { transition-delay: .42s, .42s, 0s, 0s; }
.sell__list.is-visible li:nth-child(6) { transition-delay: .5s, .5s, 0s, 0s; }
.sell__list svg { transition: transform .5s var(--ease-out); }
.sell__list li:hover svg { transform: rotate(-12deg) scale(1.15); }

/* stats divider draws down */
.about__stats { border-left-color: transparent; position: relative; }
.about__stats::before {
  content: "";
  position: absolute;
  left: -1px; top: 0;
  width: 1px; height: 100%;
  background: var(--line-dark);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 1.4s .2s var(--ease-io);
}
.about__stats.is-visible::before { transform: scaleY(1); }
@media (max-width: 900px) { .about__stats::before { display: none; } }

/* ---------- Parallax photo layers (extra bleed so edges never show) ---------- */
.sell__img, .about__img, .testimonials__img { top: -120px; bottom: -120px; will-change: translate; }

/* ---------- Buttons: gold shine sweep ---------- */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -75%;
  width: 50%;
  z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg);
  transition: left .8s var(--ease-io);
}
.btn:hover::before { left: 130%; }
.btn:active { transform: scale(.97); }
.btn--gold { animation: pulseGold 3.2s 3s ease-in-out infinite; }
.btn--gold:hover { animation: none; }
@keyframes pulseGold {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 164, 92, 0); }
  50% { box-shadow: 0 0 0 8px rgba(201, 164, 92, .12); }
}

/* ---------- Card tilt + glare ---------- */
.svc:not(.svc--cta) { transform-style: preserve-3d; will-change: transform; }
.is-tilting { transition: transform .12s linear, box-shadow .4s var(--ease) !important; }
.svc:not(.svc--cta)::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255, 255, 255, .22), transparent 55%);
  opacity: 0;
  transition: opacity .4s;
}
.svc { position: relative; }
.svc:hover::after { opacity: 1; }

/* special request card: floating icon + slow glow */
.svc__cta-icon { animation: floaty 4s ease-in-out infinite; }
.svc--cta { background-size: 100% 200%; animation: glow 6s ease-in-out infinite alternate; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes glow { from { background-position: 50% 0%; } to { background-position: 50% 100%; } }

/* ---------- Nav & link underline flourishes ---------- */
.footer__col ul a { position: relative; }
.footer__col ul a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.footer__col ul a:hover::after { transform: scaleX(1); transform-origin: left; }
.contact-list svg { transition: transform .4s var(--ease-out); }
.contact-list li:hover svg { transform: scale(1.2) rotate(-8deg); }
.icon-btn svg { transition: transform .35s var(--ease-out); }
.icon-btn:hover svg { transform: scale(1.15); }

/* ---------- Testimonials: stars pop in ---------- */
.tslide .stars svg { opacity: 0; scale: .3; transition: opacity .4s, scale .6s cubic-bezier(.34, 1.8, .64, 1); }
.tslide.is-active .stars svg { opacity: 1; scale: 1; }
.tslide.is-active .stars svg:nth-child(1) { transition-delay: .25s; }
.tslide.is-active .stars svg:nth-child(2) { transition-delay: .33s; }
.tslide.is-active .stars svg:nth-child(3) { transition-delay: .41s; }
.tslide.is-active .stars svg:nth-child(4) { transition-delay: .49s; }
.tslide.is-active .stars svg:nth-child(5) { transition-delay: .57s; }
.tslide { transform: translateX(30px); }
.tslide.is-leaving { transform: translateX(-30px); }
.tslide.is-active { transform: none; }
.tslider__nav svg { transition: transform .3s var(--ease-out); }
.tslider__nav--prev:hover svg { transform: translateX(-3px); }
.tslider__nav--next:hover svg { transform: translateX(3px); }

/* ---------- Newsletter ---------- */
.newsletter__msg { transition: opacity .4s, translate .4s; }
.newsletter__msg:empty { opacity: 0; translate: 0 -6px; }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: 24px; bottom: 24px;
  z-index: 60;
  width: 46px; height: 46px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: rgba(8, 25, 18, .9);
  color: var(--gold);
  opacity: 0;
  translate: 0 20px;
  pointer-events: none;
  transition: opacity .4s, translate .4s var(--ease-out), background .3s, color .3s;
}
.to-top svg { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
.to-top.is-shown { opacity: 1; translate: 0 0; pointer-events: auto; }
.to-top:hover { background: var(--gold); color: var(--green-900); }
.to-top:hover svg { transform: translateY(-3px); }

/* ---------- Reduced motion: show everything, no movement ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal, .hero .eyebrow, .hero__lead, .hero__content .btn, .hero__tags li, .sell__list li, .tslide .stars svg { opacity: 1 !important; translate: none !important; scale: none !important; filter: none !important; }
  .split-line > span { translate: none !important; }
  .svc__img { clip-path: none !important; }
  .strip__icon { stroke-dashoffset: 0 !important; }
  .preloader, .hero__dust { display: none !important; }
  .preloader__logo .logo__img { opacity: 1 !important; scale: none !important; }
  .hero__tags::before, .about__stats::before, .eyebrow--line::before { transform: none !important; }
}

/* =========================================================
   GOLD MOUSE EFFECTS (see js/cursor.js)
   ========================================================= */
.has-gold-cursor, .has-gold-cursor * { cursor: none !important; }
.has-gold-cursor input, .has-gold-cursor textarea { cursor: text !important; }

.cursor-dot, .cursor-ring {
  position: fixed;
  top: 0; left: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0;
  transition: opacity .3s;
}
.cursor-visible .cursor-dot, .cursor-visible .cursor-ring { opacity: 1; }

.cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--gold-light);
  box-shadow: 0 0 10px 2px rgba(226, 196, 131, .7);
}
.cursor-ring {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  display: grid;
  place-items: center;
}
.cursor-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(201, 164, 92, .75);
  border-radius: 50%;
  transition: transform .45s var(--ease-out), background .35s, border-color .35s;
}
.cursor-ring__label {
  position: relative;
  font: 600 9px/1 var(--sans);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green-900);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .3s, transform .45s var(--ease-out);
}

/* hovering links/buttons: ring swells and fills with soft gold */
.cursor-ring[data-state="link"]::before { transform: scale(1.6); background: rgba(201, 164, 92, .14); border-color: var(--gold-light); }
/* hovering images/cards: solid gold disc with "View" */
.cursor-ring[data-state="view"]::before { transform: scale(2.2); background: rgba(226, 196, 131, .92); border-color: transparent; }
.cursor-ring[data-state="view"] .cursor-ring__label { opacity: 1; transform: scale(1); }
.cursor-ring[data-state="view"] + .cursor-dot { opacity: 0; }
/* text fields: thin caret-like ring */
.cursor-ring[data-state="text"]::before { transform: scale(.5, 1.1); border-radius: 2px; }
/* press */
.cursor-ring.is-down::before { transform: scale(.75); background: rgba(201, 164, 92, .3); }

.gold-trail {
  position: fixed;
  inset: 0;
  z-index: 290;
  width: 100%; height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* magnetic elements glide back smoothly */
.btn, .icon-btn, .tslider__nav, .social a { transition-property: background, color, border-color, transform, translate; }
.btn, .icon-btn, .tslider__nav, .social a { transition-duration: .3s; transition-timing-function: var(--ease-out); }
.to-top { transition: opacity .4s, translate .35s var(--ease-out), background .3s, color .3s; }

/* hero: gold spotlight + depth */
.hero__bg { transition: scale 2.6s var(--ease-out), transform .9s var(--ease-out); }
.hero__content { transition: transform .9s var(--ease-out); }
.hero__spot {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(520px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(226, 196, 131, .16), transparent 60%);
  opacity: 0;
  transition: opacity .6s;
  mix-blend-mode: screen;
}
.hero.is-lit .hero__spot { opacity: 1; }

/* dark sections: faint gold glow tracks the mouse */
.has-glow {
  background-image: radial-gradient(420px circle at var(--glow-x) var(--glow-y), rgba(201, 164, 92, .10), transparent 65%);
}

/* =========================================================
   WORDPRESS PAGES (theme additions)
   ========================================================= */

/* page banner intro, keyed off the same body.is-loaded as the hero */
.phero__bg { scale: 1.12; transition: scale 2.4s var(--ease-out); will-change: translate; }
body.is-loaded .phero__bg { scale: 1.02; }
.phero .crumbs, .phero .eyebrow, .phero__lead { opacity: 0; translate: 0 20px; transition: opacity 1s var(--ease-out), translate 1s var(--ease-out); }
body.is-loaded .phero .crumbs { opacity: 1; translate: 0 0; transition-delay: .2s; }
body.is-loaded .phero .eyebrow { opacity: 1; translate: 0 0; transition-delay: .35s; }
body.is-loaded .phero__lead { opacity: 1; translate: 0 0; transition-delay: .8s; }
.phero__title .split-line > span { transition-delay: .45s; }
.phero__title .split-line:nth-child(2) > span { transition-delay: .58s; }
body.is-loaded .phero__title .split-line > span { translate: 0 0; }

/* service rows: photo curtain */
/* the curtain sits on the <img>, not on .srow__img: an element clipped to nothing
   never counts as on screen, so the observer would never reveal it */
.srow__img img { clip-path: inset(0 100% 0 0); transition: clip-path 1.2s var(--ease-io), transform .8s var(--ease); }
.srow--flip .srow__img img { clip-path: inset(0 0 0 100%); }
.srow__img.is-visible img { clip-path: inset(0 0 0 0); }
.srow__icon { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s .3s var(--ease-io); }
.srow__body.is-visible .srow__icon { stroke-dashoffset: 0; }

/* process steps + card lists */
.step__icon { stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1.6s var(--ease-io); transition-delay: calc(var(--d, 0ms) + 250ms); }
.step.is-visible .step__icon { stroke-dashoffset: 0; }
.checks li { opacity: 0; translate: -14px 0; transition: opacity .6s var(--ease-out), translate .6s var(--ease-out); }
.is-visible .checks li { opacity: 1; translate: 0 0; }
.is-visible .checks li:nth-child(2) { transition-delay: .08s; }
.is-visible .checks li:nth-child(3) { transition-delay: .16s; }
.is-visible .checks li:nth-child(4) { transition-delay: .24s; }

/* faq answer slides in when opened */
.faq__item[open] .faq__answer { animation: faqIn .5s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }

/* story badge floats */
.story__badge { animation: floaty 5s ease-in-out infinite; }

/* search panel */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .phero .crumbs, .phero .eyebrow, .phero__lead, .checks li { opacity: 1 !important; translate: none !important; }
  .phero__bg { scale: none !important; }
  .srow__img img { clip-path: none !important; }
  .srow__icon, .step__icon { stroke-dashoffset: 0 !important; }
}