/* ---- Scroll Progress Bar ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--teal), #34d399, var(--teal));
  background-size: 200% 100%;
  z-index: 100;
  width: 0;
  pointer-events: none;
  animation: progress-shimmer 3s linear infinite;
}
@keyframes progress-shimmer {
  to { background-position: -200% 0; }
}

/* ---- Live Dot Pulse ---- */
.live-dot {
  animation: dot-pulse 2s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(8,125,104,.4);
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 0 rgba(8,125,104,.4); }
  50%      { opacity: .6; transform: scale(1.5); box-shadow: 0 0 0 6px rgba(8,125,104,0); }
}

/* ---- Orbit Rotation ---- */
.orbit-one { animation: orbit-spin 28s linear infinite; }
.orbit-two { animation: orbit-spin 40s linear infinite reverse; }
@keyframes orbit-spin {
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ---- Floating Certified Badge ---- */
.certified-float { animation: badge-float 4s ease-in-out infinite; }
@keyframes badge-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

/* ---- Hero Ghost Text Shimmer ---- */
.hero-ghost {
  background: linear-gradient(90deg, #c7e0d1 0%, #8fd4a8 30%, #c7e0d1 50%, #8fd4a8 70%, #c7e0d1 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: ghost-shimmer 6s ease-in-out infinite;
}
@keyframes ghost-shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* ---- Gradient Text on Section Headings ---- */
.section-head h2,
.section-intro h2 {
  background: linear-gradient(135deg, var(--ink) 30%, var(--teal) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.why .section-intro h2 {
  background: linear-gradient(135deg, #f3f8f4 30%, #a1d8bc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Card Hover Lift + Glow ---- */
.category-card,
.product-card,
.eco-card,
.wa-card,
.press-grid a {
  transition: transform .4s cubic-bezier(.22,1,.36,1),
              box-shadow .4s cubic-bezier(.22,1,.36,1);
}
.category-card:hover,
.product-card:hover,
.eco-card:hover,
.wa-card:hover,
.press-grid a:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 24px 48px rgba(20,44,41,.07),
    0 10px 20px rgba(20,44,41,.04);
}

/* ---- Image Zoom on Card Hover ---- */
.product-media { overflow: hidden; border-radius: 12px; }
.product-media img,
.category-card img,
.eco-card img {
  transition: transform .6s cubic-bezier(.22,1,.36,1);
}
.product-card:hover .product-media img,
.category-card:hover img,
.eco-card:hover img {
  transform: scale(1.06);
}

/* ---- Nav Link Underline Animation ---- */
.main-nav a:not(.nav-deal) {
  position: relative;
}
.main-nav a:not(.nav-deal)::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 0;
  height: 2px;
  background: var(--teal);
  border-radius: 1px;
  transition: width .3s cubic-bezier(.22,1,.36,1),
              left .3s cubic-bezier(.22,1,.36,1);
}
.main-nav a:not(.nav-deal):hover::after {
  width: 100%;
  left: 0;
}

/* ---- Benefit Icon Hover ---- */
.benefits > div > span {
  display: inline-block;
  transition: transform .35s cubic-bezier(.22,1,.36,1);
}
.benefits > div:hover > span {
  transform: scale(1.25) rotate(-8deg);
}

/* ---- Stagger Reveal ---- */
.stagger-child {
  opacity: 0;
  transform: translateY(24px);
}
.stagger-child.revealed {
  opacity: 1;
  transform: none;
  transition: opacity .55s cubic-bezier(.22,1,.36,1),
              transform .55s cubic-bezier(.22,1,.36,1);
}

/* ---- Hero Orchestrated Entrance ---- */
.hero-anim {
  opacity: 0;
  transform: translateY(28px);
}
.hero-anim.in {
  opacity: 1;
  transform: none;
  transition: opacity .7s cubic-bezier(.22,1,.36,1),
              transform .7s cubic-bezier(.22,1,.36,1);
}

/* ---- Counter Glow Effect ---- */
.audit-stamp.counted strong {
  text-shadow: 0 0 40px rgba(198,232,170,.35);
}

/* ---- Comparison Table Row Hover ---- */
tbody tr {
  transition: background .25s ease;
}
tbody tr:hover {
  background: #f0f7f2;
}

/* ---- Button Shine ---- */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
  transition: none;
  pointer-events: none;
}
.btn-primary:hover::before {
  left: 120%;
  transition: left .6s ease;
}

/* ---- Topline Ticker Feel ---- */
.topline {
  background: linear-gradient(90deg, #163a32, #1a4a3e, #163a32);
  background-size: 200% 100%;
  animation: topline-shift 8s ease-in-out infinite;
}
@keyframes topline-shift {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}

/* ---- Floating Help Button Pulse ---- */
.floating-help {
  animation: help-glow 3s ease-in-out infinite;
}
@keyframes help-glow {
  0%, 100% { box-shadow: 0 8px 30px rgba(23,61,49,.2); }
  50%      { box-shadow: 0 8px 40px rgba(10,115,95,.35), 0 0 0 4px rgba(10,115,95,.1); }
}

/* ---- Filter Bar Active Glow ---- */
.filter-marker {
  box-shadow: 0 2px 8px rgba(20,44,41,.15);
}

/* ---- Wordmark monogram ---- */
.wordmark-mark {
  transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.wordmark:hover .wordmark-mark {
  transform: rotate(-6deg) scale(1.06);
}

/* ---- Hero phone flip ---- */
@keyframes phone-flip {
  0% {
    transform: perspective(1100px) translateY(0) rotateX(0deg) rotateY(0deg) scale(1);
    filter: drop-shadow(0 0 0 rgba(8,125,104,0));
  }
  35% {
    transform: perspective(1100px) translateY(-18px) rotateX(8deg) rotateY(200deg) scale(1.08);
    filter: drop-shadow(0 24px 28px rgba(8,125,104,.28));
  }
  70% {
    transform: perspective(1100px) translateY(-6px) rotateX(2deg) rotateY(350deg) scale(1.03);
    filter: drop-shadow(0 16px 22px rgba(8,125,104,.18));
  }
  85% {
    transform: perspective(1100px) translateY(2px) rotateX(-2deg) rotateY(368deg) scale(1.01);
    filter: drop-shadow(0 8px 14px rgba(8,125,104,.12));
  }
  100% {
    transform: perspective(1100px) translateY(0) rotateX(0deg) rotateY(360deg) scale(1);
    filter: drop-shadow(0 0 0 rgba(8,125,104,0));
  }
}
.phone-main.is-flipping {
  animation: phone-flip 1.4s cubic-bezier(.22,1,.36,1) both;
  will-change: transform, filter;
}

/* ---- Story scroll ---- */
.story-pin.is-active {
  height: 190vh;
  margin-top: 26px;
}
.story-pin.is-active > .hero {
  position: sticky;
  top: 120px;
  margin-top: 0;
}
.hero-copy {
  translate: 0 calc(var(--pin, 0) * -72px);
  opacity: calc(1 - var(--pin, 0) * 0.72);
}
.story-block {
  --story-rise: 96px;
}
.story-block .section-head > *,
.story-block .section-intro > * {
  translate: 0 calc((1 - var(--story, 1)) * var(--story-rise));
  opacity: var(--story, 1);
}
.story-block .category-card,
.story-block .product-card,
.story-block .eco-card,
.story-block .wa-card,
.story-block .press-grid > a,
.story-block .why-grid > article,
.story-block .stats-grid > div {
  translate: 0 calc((1 - var(--story, 1)) * var(--story-rise) * 0.55);
}
.story-photo {
  scale: calc(1 + (1 - var(--story, 1)) * 0.18);
  translate: 0 calc(var(--drift, 0) * 1px);
  transform-origin: center;
}
.why.story-block {
  border-radius: calc((1 - var(--story, 1)) * 36px);
  margin-inline: calc((1 - var(--story, 1)) * 8vw);
  overflow: clip;
}
@media (max-width: 760px) {
  .story-pin.is-active { height: 160vh; margin-top: 16px; }
  .story-pin.is-active > .hero { top: 96px; }
  .story-block { --story-rise: 52px; }
  .why.story-block { margin-inline: calc((1 - var(--story, 1)) * 5vw); }
}

/* ═══ Reduced Motion ═══ */
@media (prefers-reduced-motion: reduce) {
  .scroll-progress,
  .live-dot,
  .orbit-one,
  .orbit-two,
  .certified-float,
  .hero-ghost,
  .topline,
  .floating-help {
    animation: none !important;
  }
  .hero-anim,
  .stagger-child {
    opacity: 1 !important;
    transform: none !important;
  }
  .btn-primary::before { display: none; }
  .hero-copy,
  .wordmark:hover .wordmark-mark,
  .story-block .section-head > *,
  .story-block .section-intro > *,
  .story-block .category-card,
  .story-block .product-card,
  .story-block .eco-card,
  .story-block .wa-card,
  .story-block .press-grid > a,
  .story-block .why-grid > article,
  .story-block .stats-grid > div,
  .story-photo {
    translate: none !important;
    scale: none !important;
    opacity: 1 !important;
  }
  .why.story-block {
    border-radius: 0 !important;
    margin-inline: 0 !important;
  }
  .phone-composition,
  .hero-ghost,
  .orbit {
    translate: none !important;
  }
  .phone-main.is-flipping,
  .wordmark:hover .wordmark-mark { animation: none !important; transform: none !important; }
  .category-card:hover,
  .product-card:hover,
  .eco-card:hover,
  .wa-card:hover,
  .press-grid a:hover {
    transform: none !important;
  }
}