/* =========================================================
   PRODUCT — visual overrides for product detail pages.
   Refined micro-interactions, tasteful motion.
   ========================================================= */

/* -------- Refined base -------- */
body {
  background: #fafbfc;
  font-feature-settings: "ss01", "cv11", "kern";
}

/* Subtle noise texture overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  z-index: 9999;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' /%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* -------- Refined cursor follower --------
   A small blue glow that lags softly behind the cursor */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16,143,212,.35), transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width .4s cubic-bezier(.2,.9,.2,1), height .4s cubic-bezier(.2,.9,.2,1), opacity .3s;
  mix-blend-mode: multiply;
}
.cursor-glow.is-hover { width: 80px; height: 80px; }
@media (hover: none) { .cursor-glow { display: none; } }

/* -------- Refined buttons -------- */
.btn {
  position: relative;
  overflow: hidden;
  transition: all .5s cubic-bezier(.2,.9,.2,1);
}
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--accent);
  transform: translateY(100%);
  transition: transform .5s cubic-bezier(.7,0,.2,1);
  z-index: -1;
}
.btn:hover::before { transform: translateY(0); }
.btn:hover {
  color: #fff;
  border-color: var(--accent);
  background: transparent;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -10px rgba(25,163,221,.35);
}
.btn .arrow { transition: transform .5s cubic-bezier(.2,.9,.2,1); }
.btn:hover .arrow { transform: translateX(6px); }

/* Ghost buttons */
.btn--ghost:hover::before { background: var(--ink); }

/* -------- Refined nav with underline draw -------- */
.site-header { transition: padding .4s cubic-bezier(.2,.9,.2,1), box-shadow .4s, background .4s; }
.site-header.is-scrolled {
  padding: 0;
  box-shadow: 0 4px 30px -10px rgba(11,18,32,.08);
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(20px) saturate(1.4);
}
.site-header.is-scrolled .nav { padding-top: 14px; padding-bottom: 14px; }
.site-header.is-scrolled .brand__img { height: 40px; }

.nav__links a {
  transition: color .3s cubic-bezier(.2,.9,.2,1);
}
.nav__links a::after {
  transition: width .6s cubic-bezier(.2,.9,.2,1);
}
.nav__cta {
  position: relative;
  overflow: hidden;
  transition: all .4s cubic-bezier(.2,.9,.2,1);
}
.nav__cta:hover {
  background: var(--accent);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -8px rgba(25,163,221,.4);
}

/* -------- Tilt-ready product cards -------- */
.product-card {
  transform-style: preserve-3d;
  perspective: 1000px;
  transition: transform .6s cubic-bezier(.2,.9,.2,1), box-shadow .6s;
  position: relative;
}
.product-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(16,143,212,.06), transparent);
  opacity: 0;
  transition: opacity .5s;
  pointer-events: none;
  z-index: 2;
}
.product-card:hover::before { opacity: 1; }
.product-card:hover {
  box-shadow: 0 30px 60px -30px rgba(11,18,32,.22);
  border-color: var(--accent);
}
.product-card__img img { transition: transform 1.5s cubic-bezier(.2,.9,.2,1); }
.product-card:hover .product-card__img img { transform: scale(1.08); }
.product-card__arrow {
  transition: transform .4s cubic-bezier(.2,.9,.2,1), color .3s;
  display: inline-block;
}
.product-card:hover .product-card__arrow { transform: translateX(8px); color: var(--accent); }

/* -------- Reveal: blur + rise + stagger -------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition: opacity 1.1s cubic-bezier(.2,.9,.2,1),
              transform 1.1s cubic-bezier(.2,.9,.2,1),
              filter .9s cubic-bezier(.2,.9,.2,1);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* Text splits into words that fade in */
.word-reveal { opacity: 0; display: inline-block; transform: translateY(14px); transition: all .7s cubic-bezier(.2,.9,.2,1); }
.word-reveal.is-in { opacity: 1; transform: none; }

/* -------- Hero polish -------- */
.hero__text h1 { position: relative; }
.hero__glow {
  animation: drift 20s cubic-bezier(.5,0,.5,1) infinite alternate;
}
@keyframes drift {
  0%   { transform: translate(0, 0); }
  100% { transform: translate(-60px, 40px); }
}

/* Subtle parallax on hero visual */
.hero__visual { transition: transform .8s cubic-bezier(.2,.9,.2,1); }

/* -------- Links: elegant underline -------- */
.news-card__link, .location-card a {
  position: relative;
  display: inline-block;
  transition: color .3s;
}
.news-card__link::after, .location-card a::after {
  content: '';
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(1);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.7,0,.2,1);
}
.news-card__link:hover::after, .location-card a:hover::after {
  transform: scaleX(0);
  transform-origin: left;
}

/* -------- Form refinements -------- */
.form input, .form select, .form textarea {
  transition: border-color .4s cubic-bezier(.2,.9,.2,1), background .3s, box-shadow .3s;
}
.form input:hover, .form select:hover, .form textarea:hover {
  border-color: var(--steel);
}
.form input:focus, .form select:focus, .form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(25,163,221,.08);
  outline: none;
}
.form label {
  transition: color .3s;
}

/* -------- FAQ refinement -------- */
.faq-item {
  transition: border-color .4s, background .3s;
}
.faq-item:hover { border-color: var(--steel); }
.faq-item[open] { border-color: var(--accent); background: rgba(25,163,221,.02); }
.faq-item summary {
  transition: color .3s;
}
.faq-item summary:hover { color: var(--accent); }

/* -------- Resource cards -------- */
.resource { transition: all .5s cubic-bezier(.2,.9,.2,1); }
.resource:hover {
  transform: translateX(8px);
  border-color: var(--accent);
  box-shadow: 0 14px 28px -14px rgba(25,163,221,.25);
}
.resource__icon { transition: background .4s, color .4s; }
.resource:hover .resource__icon { background: var(--accent); color: #fff; }

/* -------- Timeline refinement -------- */
.timeline__item {
  position: relative;
  transition: padding-left .5s cubic-bezier(.2,.9,.2,1);
}
.timeline__item:hover { padding-left: 68px; }
.timeline__item::before {
  transition: transform .5s cubic-bezier(.2,.9,.2,1), background .3s;
}
.timeline__item:hover::before { transform: scale(1.4); background: var(--accent); }

/* -------- Image hover treatments -------- */
.product-hero__img, .product-card__img {
  overflow: hidden;
  position: relative;
}
.product-hero__img {
  cursor: crosshair;
}
.product-hero__img img {
  transition: filter .3s;
}
.product-hero__img:hover img {
  filter: saturate(1.08);
}

/* -------- Metric hover -------- */
.metric { transition: transform .5s cubic-bezier(.2,.9,.2,1); cursor: default; }
.metric:hover { transform: translateY(-6px); }
.metric__num { transition: color .4s; }
.metric:hover .metric__num { color: var(--accent); }

/* -------- Scroll progress (thin, refined) -------- */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0;
  background: var(--accent);
  z-index: 9998;
  transition: width .2s cubic-bezier(.2,.9,.2,1);
  opacity: .8;
}

/* -------- Product hero gallery (multi-image slider) -------- */
.product-hero__media { display: flex; flex-direction: column; gap: 14px; }

.product-hero__img--gallery img {
  transition: opacity .35s cubic-bezier(.2,.9,.2,1), filter .3s;
}
.product-hero__img--gallery.is-swapping img { opacity: 0; }

.gallery-nav {
  position: absolute;
  top: 50%;
  width: 44px; height: 44px;
  padding: 0 0 4px;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 22px -10px rgba(11,18,32,.25);
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity .3s, background .3s, color .3s;
  z-index: 6;
}
.gallery-nav--prev { left: 14px; }
.gallery-nav--next { right: 14px; }
.product-hero__img--gallery:hover .gallery-nav,
.gallery-nav:focus-visible { opacity: 1; }
.gallery-nav:hover { background: var(--accent); color: #fff; }
.gallery-nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (hover: none) { .gallery-nav { opacity: 1; } }

.gallery-counter {
  position: absolute;
  bottom: 14px;
  left: 16px;
  padding: 6px 12px;
  background: rgba(15,20,28,.78);
  color: #fff;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .12em;
  border-radius: 4px;
  pointer-events: none;
  z-index: 6;
}

.product-hero__thumbs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.product-hero__thumb {
  flex: 0 0 auto;
  width: 80px; height: 60px;
  padding: 0;
  border: 1px solid var(--rule);
  background: var(--paper);
  cursor: pointer;
  overflow: hidden;
  transition: border-color .25s, transform .3s cubic-bezier(.2,.9,.2,1), box-shadow .25s;
}
.product-hero__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-hero__thumb:hover { border-color: var(--steel); transform: translateY(-2px); }
.product-hero__thumb.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(25,163,221,.18);
}
.product-hero__thumb:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* -------- Refined footer -------- */
.footer-col a {
  transition: color .3s, padding-left .3s cubic-bezier(.2,.9,.2,1);
}
.footer-col a:hover { padding-left: 6px; color: var(--accent); }