/* ==========================================================================
   Buytac — motion & depth layer
   Opacity/transform only: nothing here can shift layout.
   ========================================================================== */

:root {
  --ease-out-quint: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ---------- scroll reveal ---------- */
.will-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease-out-quint), transform .7s var(--ease-out-quint);
}
.is-revealed { opacity: 1; transform: none; }

/* ---------- hero ---------- */
.hero.has-parallax .hero__media { will-change: transform; }
.hero.has-parallax .hero__media img {
  transform: scale(1.08);
  transition: transform .1s linear;
}

/* a touch more depth in the hero scrim */
.hero__media::after {
  background:
    linear-gradient(90deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.42) 46%, rgba(0,0,0,.06) 100%),
    radial-gradient(120% 90% at 20% 60%, rgba(0,0,0,.28) 0%, rgba(0,0,0,0) 60%);
}

.hero__title,
.hero__eyebrow,
.hero .btn { animation: buytac-rise .9s var(--ease-out-quint) both; }
.hero__eyebrow { animation-delay: .05s; }
.hero__title   { animation-delay: .14s; }
.hero .btn     { animation-delay: .24s; }

@keyframes buytac-rise {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- tiles: lift + inner zoom ---------- */
.tile {
  transition: transform .45s var(--ease-out-quint), box-shadow .45s var(--ease-out-quint);
}
@media (hover: hover) {
  .tile:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .16);
  }
  .tile:hover img { transform: scale(1.07); }
  .tile__label { transition: transform .45s var(--ease-out-quint); }
  .tile:hover .tile__label { transform: translateY(-4px); }
}

/* ---------- product cards ---------- */
.product-card {
  transition: transform .4s var(--ease-out-quint), box-shadow .4s var(--ease-out-quint);
}
@media (hover: hover) {
  .product-card:hover { transform: translateY(-6px); box-shadow: 0 20px 44px rgba(0,0,0,.12); }
}

/* ---------- stats: counting numbers get tabular figures so they don't jitter ---------- */
.stat__value { font-variant-numeric: tabular-nums; }
.stats { position: relative; overflow: hidden; }
.stats::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(70% 120% at 80% 0%, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}

/* ---------- marquee ---------- */
.marquee.is-paused .marquee__track { animation-play-state: paused; }

/* ---------- cards gain a hairline + soft shadow for depth ---------- */
.compare-card,
.faq-card {
  box-shadow: 0 1px 2px rgba(0,0,0,.03), 0 12px 34px rgba(0,0,0,.05);
}

/* ---------- media grid ---------- */
.media-grid__video,
.media-grid__still {
  transition: transform .5s var(--ease-out-quint), box-shadow .5s var(--ease-out-quint);
}
@media (hover: hover) {
  .media-grid__still:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.16); }
}

/* ---------- respect the user's motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  .will-reveal,
  .is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero__title, .hero__eyebrow, .hero .btn { animation: none !important; }
  .hero.has-parallax .hero__media img { transform: none !important; }
  .tile, .product-card, .media-grid__still { transition: none !important; }
  .tile:hover, .product-card:hover, .media-grid__still:hover { transform: none !important; }
  .marquee__track { animation: none !important; }
}

/* ==========================================================================
   Elevation layer — craft details that take it past the reference
   ========================================================================== */

/* ---------- text selection + scrollbar ---------- */
::selection { background: var(--blue-500); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: rgba(26,26,26,.28) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: rgba(26,26,26,.22); border-radius: 99px; border: 3px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: rgba(26,26,26,.38); background-clip: content-box; }

/* ---------- header condenses on scroll ---------- */
.site-header { transition: background-color .3s var(--ease), box-shadow .3s var(--ease), backdrop-filter .3s var(--ease); }
.site-header.is-condensed { box-shadow: 0 6px 24px rgba(0,0,0,.07); }
.site-header.is-condensed .site-header__inner { min-height: 64px; }
.site-header__inner { transition: min-height .3s var(--ease-out-quint); }
.site-header.is-condensed .logo__mark { width: 38px; }
.site-header.is-condensed .logo__text { font-size: 1.6rem; }
.logo__mark, .logo__text { transition: width .3s var(--ease-out-quint), font-size .3s var(--ease-out-quint); }
@supports (backdrop-filter: blur(1px)) {
  .site-header.is-condensed:not(.site-header--transparent),
  .site-header--transparent.is-stuck { background: rgba(240,240,240,.82); backdrop-filter: saturate(150%) blur(14px); }
}

/* ---------- hero: pip, secondary CTA, proof points, scroll cue ---------- */
.hero__eyebrow { display: inline-flex; align-items: center; gap: .6rem; }
.hero__pip {
  width: 8px; height: 8px; border-radius: 50%; background: var(--blue-300);
  box-shadow: 0 0 0 0 rgba(74,149,216,.75); animation: buytac-pulse 2.4s ease-out infinite;
}
@keyframes buytac-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(74,149,216,.7); }
  70%  { box-shadow: 0 0 0 12px rgba(74,149,216,0); }
  100% { box-shadow: 0 0 0 0 rgba(74,149,216,0); }
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.btn--ghost {
  background: rgba(255,255,255,.10); color: #fff;
  border-color: rgba(255,255,255,.55); backdrop-filter: blur(6px);
}
.btn--ghost:hover { background: rgba(255,255,255,.20); color: #fff; border-color: #fff; }

.hero__points {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .6rem 1.75rem;
  font-size: .875rem; color: rgba(255,255,255,.85);
  animation: buytac-rise .9s var(--ease-out-quint) both; animation-delay: .34s;
}
.hero__points li { display: flex; align-items: center; gap: .5rem; }
.hero__points li::before {
  content: ''; width: 15px; height: 9px; flex-shrink: 0;
  border-left: 2px solid var(--blue-300); border-bottom: 2px solid var(--blue-300);
  transform: rotate(-45deg) translateY(-2px);
}

.hero__cue {
  position: absolute; left: 50%; bottom: 1.75rem; z-index: 3;
  width: 26px; height: 42px; transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,.6); border-radius: 99px;
  display: grid; justify-items: center; padding-top: 7px;
}
.hero__cue span {
  width: 3px; height: 8px; border-radius: 99px; background: #fff;
  animation: buytac-cue 1.8s ease-in-out infinite;
}
.hero__cue:hover { border-color: #fff; }
@keyframes buytac-cue {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(10px); opacity: .25; }
}
@media (max-width: 767px) { .hero__cue { display: none; } }

/* ---------- section eyebrow gets an accent rule ---------- */
.section-head .eyebrow { display: inline-flex; align-items: center; gap: .6rem; }
.section-head .eyebrow::before {
  content: ''; width: 26px; height: 2px; background: var(--blue-500); border-radius: 2px;
}
.section-head:not(.section-head--left) .eyebrow { justify-content: center; }

/* ---------- product card quick-add ---------- */
.product-card__media { position: relative; }
.product-card__quick {
  position: absolute; left: .85rem; right: .85rem; bottom: .85rem; z-index: 4;
  display: flex; justify-content: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .3s var(--ease-out-quint), transform .35s var(--ease-out-quint);
}
.product-card__quick .btn { width: 100%; box-shadow: 0 8px 22px rgba(0,0,0,.18); }
@media (hover: hover) {
  .product-card:hover .product-card__quick,
  .product-card:focus-within .product-card__quick { opacity: 1; transform: none; }
}
@media (hover: none) {
  /* touch devices get it permanently, since there is no hover */
  .product-card__quick { opacity: 1; transform: none; position: static; margin: 0 .85rem .85rem; }
}
.quick-add.is-busy { opacity: .65; pointer-events: none; }
.quick-add.is-done::after { content: ' ✓'; }

/* ---------- category tile hover affordance ---------- */
.tile { position: relative; }
.tile__arrow {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: rgba(255,255,255,.92); color: var(--text);
  display: grid; place-items: center;
  opacity: 0; transform: translate(6px, -6px) scale(.9);
  transition: opacity .3s var(--ease-out-quint), transform .35s var(--ease-out-quint);
}
.tile__arrow::before {
  content: ''; width: 9px; height: 9px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); margin-left: -3px;
}
@media (hover: hover) {
  .tile:hover .tile__arrow { opacity: 1; transform: none; }
}

/* ---------- carousel progress ---------- */
.carousel__progress {
  height: 3px; border-radius: 99px; background: var(--surface-alt);
  margin-top: 1.5rem; overflow: hidden;
}
.carousel__progress span {
  display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--gradient-blue); transition: width .25s var(--ease);
}

/* ---------- testimonial mark ---------- */
.testimonial { position: relative; }
.testimonial::before {
  content: '”'; display: block; font-size: 5rem; line-height: .7;
  color: var(--blue-500); opacity: .18; margin-bottom: .5rem;
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero__pip, .hero__cue span, .hero__points { animation: none !important; }
  .product-card__quick { opacity: 1 !important; transform: none !important; transition: none !important; }
  .tile__arrow { transition: none !important; }
  .site-header__inner, .logo__mark, .logo__text { transition: none !important; }
}