/* ============================================================
   TierTek — v2.css · 2026 UI layer
   Loaded after styles.css. Subtle motion, glass header,
   refined micro-interactions. GSAP drives [data-reveal].
   ============================================================ */

/* ------------------------------------------------------------
   GSAP owns reveals now — kill the old CSS transition
   ------------------------------------------------------------ */
[data-reveal] { transition: none; }

/* ------------------------------------------------------------
   Reduced motion: show everything, no animation
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------
   Selection + focus
   ------------------------------------------------------------ */
::selection { background: rgba(194,144,54,.28); color: var(--navy); }
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, .btn:focus-visible {
  outline: 2.5px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ------------------------------------------------------------
   Glass header — condenses on scroll
   ------------------------------------------------------------ */
.header {
  background: rgba(249,244,234,.86);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  transition: height .32s cubic-bezier(.4,0,.2,1), box-shadow .32s, background .32s;
}
.header.scrolled {
  height: 72px;
  background: rgba(249,244,234,.94);
  box-shadow: 0 6px 28px rgba(7,31,61,.09);
  border-bottom-color: rgba(221,208,184,.6);
}
.brand img { transition: width .32s cubic-bezier(.4,0,.2,1); }
.header.scrolled .brand img { width: 196px; }
@media (max-width: 1024px) {
  .main-nav.open { top: 96px; transition: top .32s; }
  .header.scrolled ~ * .main-nav.open, .header.scrolled .main-nav.open { top: 72px; }
}

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

/* ------------------------------------------------------------
   Hero — three.js canvas slot + refinements
   ------------------------------------------------------------ */
#tt-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;            /* over overlay gradient, under content */
  pointer-events: none;
  opacity: var(--tt-particles, .9);
}
html.tt-no-particles #tt-hero-canvas { display: none; }
.hero-overlay { z-index: 1; }
.hero-content { z-index: 2; }

/* Gold underline flourish on the hero headline */
.hero h1 em {
  font-style: inherit;
  position: relative;
  white-space: nowrap;
}
.hero h1 em::after {
  content: '';
  position: absolute;
  left: 2%; right: 2%; bottom: .04em;
  height: .1em;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 99px;
  opacity: .5;
  transform: scaleX(var(--rule, 1));
  transform-origin: 0 50%;
  z-index: -1;
}

/* ------------------------------------------------------------
   Buttons — soft gradient + sheen sweep
   ------------------------------------------------------------ */
.btn { position: relative; overflow: hidden; isolation: isolate; }
.btn.gold { background: linear-gradient(135deg, #cf9d42, var(--gold) 55%, #b07f28); }
.btn.gold:hover { background: linear-gradient(135deg, #c08c30, var(--gold2) 60%, #96651d); }
.btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.34), transparent);
  transform: skewX(-22deg);
  transition: left .55s ease;
  pointer-events: none;
}
.btn:hover::after { left: 130%; }

/* ------------------------------------------------------------
   Cards — gold edge on hover, smoother lift
   ------------------------------------------------------------ */
.test, .icon-card, .content-card, .resource-card, .compare {
  transition: box-shadow .28s cubic-bezier(.4,0,.2,1),
              transform .28s cubic-bezier(.4,0,.2,1),
              border-color .28s;
}
.test:hover, .icon-card:hover, .content-card:hover, .resource-card:hover {
  border-color: rgba(194,144,54,.45);
  transform: translateY(-4px);
}
.svc { position: relative; }
.svc::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.svc:hover::before { transform: scaleX(1); }

/* ------------------------------------------------------------
   Eyebrow — animated tick
   ------------------------------------------------------------ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  flex-shrink: 0;
}

/* ------------------------------------------------------------
   Stats bar — faint circuit texture
   ------------------------------------------------------------ */
.stats-bar { position: relative; overflow: hidden; }
.stats-bar::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(circle at 12% 30%, rgba(194,144,54,.14), transparent 32%),
    radial-gradient(circle at 88% 70%, rgba(194,144,54,.1), transparent 30%);
  pointer-events: none;
}
.stat-item { position: relative; }

/* ------------------------------------------------------------
   Imagery — gentle treatment
   ------------------------------------------------------------ */
.feature-img, .page-hero-art img, .framed-photo img, .resource-card img {
  will-change: transform;
}
.page-hero-art { overflow: visible; }

/* ------------------------------------------------------------
   Chat trigger — entrance handled by GSAP; start hidden
   (motion-safe only, JS reveals it)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .js-anim .tt-chat-widget { opacity: 0; transform: translateY(14px); }
}

/* ------------------------------------------------------------
   Mobile nav — smoother drawer
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  .main-nav.open a { transition: background .18s; }
  .mobile-toggle { transition: transform .25s; border-radius: 8px; min-width: 44px; min-height: 44px; }
  .mobile-toggle[aria-expanded="true"] { transform: rotate(90deg); }
  body.nav-open { overflow: hidden; }
}

/* ------------------------------------------------------------
   Footer — subtle top glow
   ------------------------------------------------------------ */
.footer { position: relative; }
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194,144,54,.5), transparent);
}

/* ------------------------------------------------------------
   Background drift blobs (bg-anim.js) — sits behind content,
   visible through cream sections only
   ------------------------------------------------------------ */
.tt-bg {
  position: fixed;
  inset: -12%;
  z-index: -1;
  pointer-events: none;
  opacity: var(--tt-bg-opacity, .55);
  transition: opacity .4s;
}
.tt-bg span {
  position: absolute;
  border-radius: 50%;
  filter: blur(64px);
  will-change: transform;
}

/* ------------------------------------------------------------
   Scrollbar (WebKit) — quiet brand styling
   ------------------------------------------------------------ */
::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb {
  background: #cdbfa4;
  border-radius: 8px;
  border: 3px solid var(--cream);
}
::-webkit-scrollbar-thumb:hover { background: var(--gold); }