/* ════════════════════════════════════════════════════════════════
   Bench Tester — Motion & Decoration Layer
   ────────────────────────────────────────────────────────────────
   Extra animations, scroll-reveals, decorative orbs and hover-glow
   patterns. Inspired by the airy / "alive" feeling of premium tech
   product sites (viagotransfer.com style).
   ════════════════════════════════════════════════════════════════ */

/* ─────────────── Keyframes ─────────────── */
@keyframes btOrbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(38px, -28px) scale(1.08); }
  66%      { transform: translate(-26px, 22px) scale(0.94); }
}
@keyframes btOrbDriftAlt {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%      { transform: translate(-30px, 20px) scale(1.05); }
  70%      { transform: translate(22px, -18px) scale(0.97); }
}

@keyframes btFadeInUp {
  0%   { opacity: 0; transform: translateY(36px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes btFadeInLeft {
  0%   { opacity: 0; transform: translateX(-30px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes btFadeInRight {
  0%   { opacity: 0; transform: translateX(30px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes btScaleIn {
  0%   { opacity: 0; transform: scale(0.92); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes btFlipInY {
  0%   { opacity: 0; transform: perspective(600px) rotateY(-22deg) translateZ(-30px); }
  60%  {              transform: perspective(600px) rotateY(4deg)   translateZ(6px); }
  100% { opacity: 1; transform: perspective(600px) rotateY(0)       translateZ(0); }
}

@keyframes btGlowBorder {
  0%, 100% { box-shadow: 0 0 18px rgba(200, 0, 28, .25), inset 0 0 0 1px rgba(200, 0, 28, .25); }
  50%      { box-shadow: 0 0 42px rgba(200, 0, 28, .55), inset 0 0 0 1px rgba(200, 0, 28, .55); }
}
@keyframes btRingPulse {
  0%, 100% { transform: scale(1);    opacity: .45; }
  50%      { transform: scale(1.18); opacity: .12; }
}
@keyframes btShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes btFloatY {
  0%, 100% { transform: translateY(0) rotateX(0); }
  50%      { transform: translateY(-14px) rotateX(3deg); }
}
@keyframes btCountPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}
@keyframes btRotateRing { to { transform: rotate(360deg); } }
@keyframes btBeam {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  {                                opacity: 1; }
  80%  {                                opacity: 1; }
  100% { transform: translateX(100%);  opacity: 0; }
}

/* ─────────────── Decorative orbs ─────────────── */
/* Add `.bt-orb-deco` to a relatively-positioned section to splash
   two animated radial-gradient orbs in the background. */
.bt-orb-deco { position: relative; overflow: hidden; isolation: isolate; }
.bt-orb-deco > * { position: relative; z-index: 1; }
.bt-orb-deco::before,
.bt-orb-deco::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  will-change: transform;
}
.bt-orb-deco::before {
  width: 540px; height: 540px;
  top: -120px; left: -160px;
  background: radial-gradient(circle, rgba(200, 0, 28, .35) 0%, transparent 60%);
  animation: btOrbDrift 18s ease-in-out infinite;
}
.bt-orb-deco::after {
  width: 460px; height: 460px;
  bottom: -160px; right: -120px;
  background: radial-gradient(circle, rgba(21, 101, 192, .32) 0%, transparent 60%);
  animation: btOrbDriftAlt 22s ease-in-out infinite;
}
.bt-orb-deco--light::before {
  background: radial-gradient(circle, rgba(200, 0, 28, .14) 0%, transparent 60%);
  opacity: 0.85;
}
.bt-orb-deco--light::after {
  background: radial-gradient(circle, rgba(21, 101, 192, .12) 0%, transparent 60%);
  opacity: 0.85;
}

/* Discrete corner orbs — drop one anywhere */
.bt-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(48px);
  pointer-events: none;
  z-index: 0;
}
.bt-orb--red    { background: radial-gradient(circle, rgba(200, 0, 28, .32),  transparent 65%); }
.bt-orb--blue   { background: radial-gradient(circle, rgba(21, 101, 192, .3), transparent 65%); }
.bt-orb--orange { background: radial-gradient(circle, rgba(234, 109, 0, .28), transparent 65%); }
.bt-orb--green  { background: radial-gradient(circle, rgba(22, 163, 74, .28), transparent 65%); }
.bt-orb--drift  { animation: btOrbDrift 20s ease-in-out infinite; }
.bt-orb--drift-alt { animation: btOrbDriftAlt 24s ease-in-out infinite; }

/* ─────────────── Scroll-reveal ─────────────── */
.bt-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s cubic-bezier(.22, .9, .26, 1),
              transform .9s cubic-bezier(.22, .9, .26, 1);
  will-change: opacity, transform;
}
.bt-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.bt-reveal--scale { transform: scale(.92); }
.bt-reveal--scale.is-visible { transform: scale(1); }
.bt-reveal--left  { transform: translateX(-30px); }
.bt-reveal--right { transform: translateX(30px); }
.bt-reveal--left.is-visible,
.bt-reveal--right.is-visible { transform: translateX(0); }
.bt-reveal--flip {
  transform: perspective(600px) rotateY(-18deg) translateZ(-22px);
}
.bt-reveal--flip.is-visible {
  transform: perspective(600px) rotateY(0) translateZ(0);
}

/* Stagger children — set --i index inline or via JS. */
.bt-stagger > * {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.22, .9, .26, 1),
              transform .8s cubic-bezier(.22, .9, .26, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.bt-stagger.is-visible > * {
  opacity: 1;
  transform: translateY(0);
}

/* Honor reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bt-reveal,
  .bt-reveal--scale,
  .bt-reveal--left,
  .bt-reveal--right,
  .bt-reveal--flip,
  .bt-stagger > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bt-orb-deco::before,
  .bt-orb-deco::after,
  .bt-orb--drift,
  .bt-orb--drift-alt {
    animation: none !important;
  }
}

/* ─────────────── Premium card hover (glow + lift) ─────────────── */
.bt-lift {
  transition: transform .35s cubic-bezier(.22, .9, .26, 1),
              box-shadow .35s ease,
              border-color .35s ease;
  will-change: transform;
}
.bt-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 17, 23, .14),
              0 0 0 1px rgba(200, 0, 28, .25);
}

.bt-glow-hover { position: relative; overflow: hidden; isolation: isolate; }
.bt-glow-hover::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(200, 0, 28, .55) 0%,
    rgba(225, 72, 79, .35) 35%,
    rgba(21, 101, 192, .35) 70%,
    rgba(200, 0, 28, .55) 100%);
  background-size: 220% 220%;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
  animation: btShimmer 6s linear infinite;
}
.bt-glow-hover:hover::before {
  opacity: 1;
}

/* ─────────────── Animated counters ─────────────── */
.bt-count {
  display: inline-block;
  transition: transform .25s ease;
}
.bt-count.is-popped {
  animation: btCountPop .55s cubic-bezier(.22, .9, .26, 1);
}

/* ─────────────── Floating decorations ─────────────── */
.bt-float-y { animation: btFloatY 7s ease-in-out infinite; }
.bt-float-y--slow { animation-duration: 11s; }

.bt-rotate-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(200, 0, 28, .25);
  animation: btRotateRing 26s linear infinite;
  pointer-events: none;
}
.bt-rotate-ring--reverse { animation-direction: reverse; animation-duration: 34s; }

/* ─────────────── Section accents ─────────────── */
.bt-accent-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(200, 0, 28, .8), transparent);
  pointer-events: none;
  animation: btBeam 8s ease-in-out infinite;
}

/* ─────────────── Hero visual floating ─────────────── */
.bt-slide.is-active .bt-slide__visual > .bt-dev,
.bt-slide.is-active .bt-slide__visual > .bt-mini-az,
.bt-slide.is-active .bt-slide__visual > .bt-mini-mod,
.bt-slide.is-active .bt-slide__visual > .bt-mini-br {
  animation: btFloatY 8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .bt-slide.is-active .bt-slide__visual > * { animation: none !important; }
}

/* ─────────────── Decorative grid for hero+sections ─────────────── */
.bt-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 56px 56px;
  pointer-events: none;
  opacity: .55;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 35%, transparent 75%);
}
.bt-grid-bg--light {
  background-image:
    linear-gradient(rgba(15, 17, 23, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15, 17, 23, .055) 1px, transparent 1px);
}

/* ─────────────── Tilt utility (hover) ─────────────── */
.bt-tilt {
  transition: transform .4s cubic-bezier(.22, .9, .26, 1);
}
.bt-tilt:hover {
  transform: perspective(900px) rotateX(2deg) rotateY(-3deg) translateY(-4px);
}

/* ─────────────── Section dividers / wave style ─────────────── */
.bt-divider {
  position: relative;
  height: 80px;
  margin: 0;
  background: linear-gradient(180deg, transparent, rgba(200, 0, 28, .04));
}
.bt-divider::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle at 50% 100%, rgba(200, 0, 28, .15), transparent 60%);
}

/* ─────────────── Shiny CTA on hover ─────────────── */
.bt-btn--shine,
.btn--primary.bt-btn--shine {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.bt-btn--shine::after {
  content: "";
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(110deg,
    transparent 20%,
    rgba(255, 255, 255, .35) 50%,
    transparent 80%);
  transform: skewX(-22deg);
  transition: left .65s cubic-bezier(.22, .9, .26, 1);
  z-index: 1;
  pointer-events: none;
}
.bt-btn--shine:hover::after {
  left: 130%;
}

/* ─────────────── Card hover for module / brand / feature cards ─────────────── */
.module-card-pro,
.config-card,
.bt-bc,
.spec-sheet,
.bt-af,
.analyzer-feature-card,
.contact-card {
  transition: transform .35s cubic-bezier(.22, .9, .26, 1),
              box-shadow .35s ease,
              border-color .35s ease,
              background .35s ease;
}
.module-card-pro:hover,
.config-card:hover,
.spec-sheet:hover,
.bt-af:hover,
.analyzer-feature-card:hover,
.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 56px rgba(15, 17, 23, .12),
              0 0 0 1px rgba(200, 0, 28, .2);
}

/* Brand card extra polish */
.bt-bc:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(15, 17, 23, .12);
  z-index: 1;
}

/* Subtle card-corner glow accent on hover for module cards */
.module-card-pro {
  position: relative;
  overflow: hidden;
}
.module-card-pro::after {
  content: "";
  position: absolute;
  top: -40%; right: -40%;
  width: 80%; height: 80%;
  background: radial-gradient(circle, rgba(200, 0, 28, .15), transparent 70%);
  opacity: 0;
  transition: opacity .35s ease, transform .5s ease;
  pointer-events: none;
}
.module-card-pro:hover::after {
  opacity: 1;
  transform: translate(-12%, 12%);
}

/* ─────────────── Gradient text accents ─────────────── */
.bt-text-gradient {
  background: linear-gradient(120deg, #C8001C 0%, #E5001F 40%, #ff5060 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  background-size: 200% auto;
  animation: btShimmer 8s linear infinite;
}

/* ─────────────── Marquee shimmer overlay ─────────────── */
.bt-mini-br__marquee::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: -50%;
  width: 50%;
  background: linear-gradient(110deg,
    transparent 0%,
    rgba(255, 255, 255, .12) 50%,
    transparent 100%);
  pointer-events: none;
  animation: btBeam 6s ease-in-out infinite;
  animation-delay: 1.5s;
}
.bt-mini-br__marquee { position: relative; overflow: hidden; }

/* ─────────────── Section header reveal ─────────────── */
.section-header,
.bt-analyzer__head,
.bt-compat__head,
.specs-premium__head,
.bench-overview .overview-copy {
  /* These will be auto-revealed by JS as .bt-reveal targets,
     so we just provide an "initial hidden" cue without hard-coding
     so non-JS users still see them. */
}

/* ─────────────── Mobile scaling ─────────────── */
@media (max-width: 700px) {
  .bt-orb-deco::before {
    width: 360px; height: 360px;
    opacity: .42;
    filter: blur(40px);
  }
  .bt-orb-deco::after {
    width: 320px; height: 320px;
    opacity: .42;
    filter: blur(40px);
  }
  .bt-orb { display: none; }
}
@media (max-width: 480px) {
  .bt-rotate-ring { display: none; }
  .bt-glow-hover::before { display: none; }
  .bt-orb-deco::before,
  .bt-orb-deco::after {
    filter: blur(30px);
    opacity: .35;
  }
}

/* Only hide reveal targets when JS is ready — avoids FOUC if the
   effects script is blocked / disabled. */
:root:not(.bt-js) .bt-reveal,
:root:not(.bt-js) .bt-stagger > * {
  opacity: 1 !important;
  transform: none !important;
}

/* ─────────────── Touch device — disable hover-only effects ─────────────── */
@media (hover: none) {
  .bt-glow-hover::before { display: none; }
  .bt-btn--shine::after { display: none; }
  .module-card-pro::after { display: none; }
}