/* ==========================================================================
   PetConnect — site-wide animation utility
   Purposeful arrivals: elements enter once; loops stay in pc-visual.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scroll-reveal base
   JS adds .pc-reveal--in when the element enters the viewport.
   -------------------------------------------------------------------------- */
.pc-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.62s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.62s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

.pc-reveal.pc-reveal--in {
  opacity: 1;
  transform: none;
}

/* Direction variants (combine with .pc-reveal) */
.pc-reveal.pc-reveal--left {
  transform: translateX(-30px);
}

.pc-reveal.pc-reveal--right {
  transform: translateX(30px);
}

.pc-reveal.pc-reveal--fade {
  transform: none;
}

.pc-reveal.pc-reveal--scale {
  transform: scale(0.93);
}

.pc-reveal.pc-reveal--left.pc-reveal--in,
.pc-reveal.pc-reveal--right.pc-reveal--in,
.pc-reveal.pc-reveal--fade.pc-reveal--in,
.pc-reveal.pc-reveal--scale.pc-reveal--in {
  transform: none;
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Stagger delay helpers — add to individual items within a reveal group.
   -------------------------------------------------------------------------- */
.pc-stagger-1 { transition-delay: 0.05s; }
.pc-stagger-2 { transition-delay: 0.11s; }
.pc-stagger-3 { transition-delay: 0.17s; }
.pc-stagger-4 { transition-delay: 0.23s; }
.pc-stagger-5 { transition-delay: 0.29s; }
.pc-stagger-6 { transition-delay: 0.35s; }
.pc-stagger-7 { transition-delay: 0.41s; }
.pc-stagger-8 { transition-delay: 0.47s; }

/* --------------------------------------------------------------------------
   Page-load hero entrance
   Default: visible (no JS / blocked script / marketing-site.js failed).
   html.js-motion: hide until body.pc-loaded (marketing-site.js adds it).
   -------------------------------------------------------------------------- */
.pc-hero-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

html.js-motion .pc-hero-in {
  opacity: 0;
  transform: translateY(16px);
}

html.js-motion body.pc-loaded .pc-hero-in {
  opacity: 1;
  transform: none;
}

/* Stagger delays for hero-in items */
.pc-hero-in-d0 { transition-delay: 0.0s;  }
.pc-hero-in-d1 { transition-delay: 0.1s;  }
.pc-hero-in-d2 { transition-delay: 0.18s; }
.pc-hero-in-d3 { transition-delay: 0.26s; }
.pc-hero-in-d4 { transition-delay: 0.34s; }
.pc-hero-in-d5 { transition-delay: 0.44s; }

/* --------------------------------------------------------------------------
   Animated accent underline
   Wrap text in a span with .pc-underline-anim; CSS draws a gradient line.
   -------------------------------------------------------------------------- */
.pc-underline-anim {
  position: relative;
  display: inline-block;
}

.pc-underline-anim::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  height: 3px;
  width: 0;
  border-radius: 999px;
  background: var(--pc-gradient);
  transition: width 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.45s;
}

html:not(.js-motion) .pc-underline-anim::after {
  width: 100%;
}

html.js-motion body.pc-loaded .pc-underline-anim::after {
  width: 100%;
}

/* --------------------------------------------------------------------------
   Scroll progress bar
   Injected as #pcScrollProgress div in the header; width is driven by JS.
   -------------------------------------------------------------------------- */
#pcScrollProgress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--pc-gradient);
  z-index: 60001;
  pointer-events: none;
  transition: width 80ms linear;
}

/* --------------------------------------------------------------------------
   Button shimmer — hover sweep on .btn-pc-primary
   Requires overflow:hidden + position:relative on the button (set in home.css).
   -------------------------------------------------------------------------- */
.btn-pc-primary::before {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent,
    rgba(255, 255, 255, 0.32),
    transparent
  );
  transform: skewX(-18deg);
  transition: left 0.55s ease;
  pointer-events: none;
}

.btn-pc-primary:hover::before {
  left: 130%;
}

/* --------------------------------------------------------------------------
   Card entrance polish — used site-wide on product/feature cards
   -------------------------------------------------------------------------- */
.pc-reveal.pc-reveal--in .card-pc,
.pc-reveal.pc-reveal--in .feature-tile,
.pc-reveal.pc-reveal--in .pc-value-card {
  /* Extra visual pop on arrival (ring briefly brightens) */
  box-shadow: var(--pc-shadow);
}

/* --------------------------------------------------------------------------
   Reduced motion — show everything instantly, kill shimmer + drift.
   -------------------------------------------------------------------------- */
/* Scripting disabled — don't leave scroll sections invisible */
@media (scripting: none) {
  .pc-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pc-reveal,
  .pc-hero-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .pc-stagger-1, .pc-stagger-2, .pc-stagger-3, .pc-stagger-4,
  .pc-stagger-5, .pc-stagger-6, .pc-stagger-7, .pc-stagger-8,
  .pc-hero-in-d0, .pc-hero-in-d1, .pc-hero-in-d2, .pc-hero-in-d3,
  .pc-hero-in-d4, .pc-hero-in-d5 {
    transition-delay: 0s !important;
  }

  .pc-underline-anim::after {
    width: 100% !important;
    transition: none !important;
  }

  .btn-pc-primary::before {
    display: none;
  }

  #pcScrollProgress {
    display: none;
  }
}