/* ============================================================
   GTS Micro-interactions & Motion — shared across all pages
   ============================================================ */

/* ---------- Scroll reveal (only active when JS adds .js to <html>) ---------- */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
html.js [data-reveal="left"]  { transform: translateX(-32px); }
html.js [data-reveal="right"] { transform: translateX(32px); }
html.js [data-reveal="zoom"]  { transform: scale(.92); }
html.js [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Staggered children (one attribute on the grid/group) */
html.js [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1);
}
html.js [data-reveal-stagger].is-revealed > * { opacity: 1; transform: none; }
html.js [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: .05s; }
html.js [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: .12s; }
html.js [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: .19s; }
html.js [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: .26s; }
html.js [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: .33s; }
html.js [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: .40s; }

/* ---------- Hero load-in entrance ---------- */
.hero-anim {
  opacity: 0;
  animation: fadeUp .8s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------- Scroll-down indicator ---------- */
@keyframes scrollDot {
  0%   { transform: translateY(0); opacity: 0; }
  30%  { opacity: 1; }
  100% { transform: translateY(40px); opacity: 0; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- Floating cards / dots ---------- */
.animate-float      { animation: floatY 6s ease-in-out infinite; }
.animate-float-slow { animation: floatY 8s ease-in-out infinite; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---------- Button shine sweep ---------- */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.5), transparent);
  transform: translateX(-140%) skewX(-20deg);
}
.btn-shine:hover::after { animation: shine .65s ease; }
@keyframes shine {
  from { transform: translateX(-140%) skewX(-20deg); }
  to   { transform: translateX(320%) skewX(-20deg); }
}

/* ---------- Pulse ring (live indicators) ---------- */
.animate-pulse-ring { animation: pulseRing 2.4s ease-out infinite; }
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(185,147,46,.45); }
  70%  { box-shadow: 0 0 0 10px rgba(185,147,46,0); }
  100% { box-shadow: 0 0 0 0 rgba(185,147,46,0); }
}

/* ---------- Gold shimmer text ---------- */
.text-shimmer {
  background: linear-gradient(110deg, #9A7A26 25%, #EAD7A0 45%, #B9932E 55%, #9A7A26 75%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmerText 6s linear infinite;
}
@keyframes shimmerText { to { background-position: 200% center; } }

/* ---------- Mouse-follow spotlight on dark sections ---------- */
.spotlight { position: relative; }
.spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
  background: radial-gradient(600px circle at var(--mx,50%) var(--my,50%), rgba(185,147,46,.14), transparent 45%);
  z-index: 1;
}
.spotlight:hover::before { opacity: 1; }

/* ---------- Tilt / magnetic smoothing ---------- */
html.js [data-tilt],
html.js [data-magnetic] {
  transition: transform .25s cubic-bezier(.22,1,.36,1);
}

/* ---------- Scroll progress bar ---------- */
#scrollProgress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #B9932E, #EAD7A0);
  z-index: 70;
}

/* ---------- Navbar scrolled state ---------- */
header.scrolled {
  background: rgba(251,249,244,.98);
  box-shadow: 0 12px 32px -18px rgba(14,20,36,.35);
}

/* ---------- Back to top ---------- */
#backToTop {
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity .3s ease, transform .3s ease, visibility .3s;
}
#backToTop.show { opacity: 1; visibility: visible; transform: none; }
#backToTop:hover svg { transform: translateY(-2px); }
#backToTop svg { transition: transform .25s ease; }

/* ---------- FAQ / details smooth ---------- */
details.faq-item { transition: background-color .25s ease; }
details.faq-item[open] { background: #fff; }

/* ---------- Card gold glow on hover ---------- */
.card-glow { transition: box-shadow .35s ease, transform .35s ease, border-color .35s ease; }
.card-glow:hover {
  border-color: rgba(185,147,46,.55);
  box-shadow: 0 18px 45px -18px rgba(185,147,46,.35);
}

/* ---------- Glass / logo utilities ---------- */
.glass {
  background: rgba(255,255,255,0.07);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 24px 60px -18px rgba(6,10,20,0.6);
}
.glass-soft {
  background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(14px) saturate(130%);
  backdrop-filter: blur(14px) saturate(130%);
  border: 1px solid rgba(255,255,255,0.12);
}
.glass-nav {
  background: rgba(251,249,244,0.82);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid rgba(23,32,54,0.08);
}
.logo-mark { filter: drop-shadow(0 10px 24px rgba(0,0,0,0.45)); }
.logo-metal {
  -webkit-mask-image: linear-gradient(180deg,#000 30%,rgba(0,0,0,.45));
  mask-image: linear-gradient(180deg,#000 30%,rgba(0,0,0,.45));
}

/* ---------- Hero halftone particle canvas ---------- */
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
}
html.px-on .hero-fallback-img { opacity: 0; }
.hero-fallback-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.16;
  filter: grayscale(1) brightness(0.8) contrast(1.1);
  transition: opacity .6s ease;
  z-index: 2;
}
@media (prefers-reduced-motion: reduce) {
  html.js .hero-canvas { display: none; }
}

/* ---------- Reduced motion: disable all decoration ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal],
  html.js [data-reveal-stagger] > *,
  .hero-anim { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .marquee-track,
  .animate-float,
  .animate-float-slow,
  .text-shimmer,
  .animate-pulse-ring { animation: none !important; }
  .btn-shine::after { display: none; }
}