/* =========================================================================
   Jersey Chemicals — Animations & Micro-interactions
   Pure CSS animations, no libraries. Human-crafted feel.
   ========================================================================= */

/* ---- Page entrance fade ---- */
body {
  animation: pageEntrance 0.5s ease-out;
}

@keyframes pageEntrance {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---- Hero cascade entrance ---- */
.hero-entrance > *:nth-child(1) { animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) both; }
.hero-entrance > *:nth-child(2) { animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; }
.hero-entrance > *:nth-child(3) { animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.24s both; }
.hero-entrance > *:nth-child(4) { animation: heroSlideUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both; }

@keyframes heroSlideUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Scroll reveal base ---- */
.reveal,
.reveal-left,
.reveal-right,
.reveal-scale {
  opacity: 0;
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal { transform: translateY(30px); }
.reveal-left { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }
.reveal-scale { transform: scale(0.92); }

.reveal.revealed,
.reveal-left.revealed,
.reveal-right.revealed,
.reveal-scale.revealed {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* ---- Stagger children ---- */
.reveal-stagger.revealed > * { opacity: 0; transform: translateY(20px); animation: staggerIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
.reveal-stagger.revealed > *:nth-child(1) { animation-delay: 0s; }
.reveal-stagger.revealed > *:nth-child(2) { animation-delay: 0.07s; }
.reveal-stagger.revealed > *:nth-child(3) { animation-delay: 0.14s; }
.reveal-stagger.revealed > *:nth-child(4) { animation-delay: 0.21s; }
.reveal-stagger.revealed > *:nth-child(5) { animation-delay: 0.28s; }
.reveal-stagger.revealed > *:nth-child(6) { animation-delay: 0.35s; }
.reveal-stagger.revealed > *:nth-child(7) { animation-delay: 0.42s; }
.reveal-stagger.revealed > *:nth-child(8) { animation-delay: 0.49s; }

@keyframes staggerIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Additional reveal variants ---- */

/* Blur to clear */
.reveal-blur {
  opacity: 0;
  filter: blur(10px);
  will-change: filter, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-blur.revealed {
  opacity: 1;
  filter: blur(0);
}

/* Rotate in */
.reveal-rotate {
  opacity: 0;
  transform: rotate(-4deg) translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-rotate.revealed {
  opacity: 1;
  transform: rotate(0) translateY(0);
}

/* Flip in from bottom */
.reveal-flip {
  opacity: 0;
  transform: perspective(800px) rotateX(15deg) translateY(30px);
  will-change: transform, opacity;
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: bottom center;
}
.reveal-flip.revealed {
  opacity: 1;
  transform: perspective(800px) rotateX(0) translateY(0);
}

/* Bounce in */
.reveal-bounce {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
  transition: opacity 0.5s ease,
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-bounce.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Zoom in from far */
.reveal-zoom {
  opacity: 0;
  transform: scale(0.7);
  will-change: transform, opacity;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-zoom.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Clip from left — wipe reveal */
.reveal-wipe {
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-wipe.revealed {
  clip-path: inset(0 0 0 0);
}

/* Slide up individual lines / words */
.text-split-reveal .word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}
.text-split-reveal .word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.text-split-reveal.revealed .word-inner {
  transform: translateY(0);
}

/* ---- Floating / decorative animations ---- */
.float {
  animation: floatUpDown 3s ease-in-out infinite;
}
@keyframes floatUpDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

.float-slow {
  animation: floatUpDown 5s ease-in-out infinite;
}

.pulse-glow {
  animation: pulseGlow 2s ease-in-out infinite;
}
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(4, 116, 172, 0.15); }
  50% { box-shadow: 0 0 0 12px rgba(4, 116, 172, 0); }
}

/* ---- Gradient shift background ---- */
.gradient-shift {
  background: linear-gradient(135deg, #0d0d0d, var(--primary), #1a1a1a, #2d3816, #111);
  background-size: 400% 400%;
  animation: gradientMove 10s ease infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Draw-in border ---- */
.draw-border {
  position: relative;
}
.draw-border::before,
.draw-border::after {
  content: '';
  position: absolute;
  transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.draw-border::before {
  top: 0; left: 0;
  width: 0; height: 2px;
  background: var(--primary);
}
.draw-border::after {
  bottom: 0; right: 0;
  width: 0; height: 2px;
  background: var(--primary);
}
.draw-border.revealed::before {
  width: 100%;
}
.draw-border.revealed::after {
  width: 100%;
  transition-delay: 0.2s;
}

/* ---- Marquee / infinite scroll ---- */
.marquee-track {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}
.marquee-track::before,
.marquee-track::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.marquee-track::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.marquee-track::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }

.marquee-content {
  display: flex;
  gap: 48px;
  animation: marqueeScroll 25s linear infinite;
}
.marquee-content[data-speed="fast"] { animation-duration: 15s; }
.marquee-content[data-speed="slow"] { animation-duration: 40s; }

@keyframes marqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.marquee-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  color: var(--text-secondary);
  font-weight: 500;
}
.marquee-item svg { color: var(--primary); }

/* ---- 3D tilt on hover (JS-driven via CSS custom props) ---- */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
}
.tilt-card > * {
  transform: translateZ(20px);
}

/* ---- Typewriter cursor blink ---- */
.typewriter-cursor::after {
  content: '|';
  animation: cursorBlink 0.8s step-end infinite;
  color: var(--primary);
  font-weight: 300;
  margin-left: 2px;
}
@keyframes cursorBlink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* ---- Underline highlight animation ---- */
.highlight-underline {
  background-image: linear-gradient(transparent 60%, rgba(154, 213, 231, 0.4) 60%);
  background-size: 0% 100%;
  background-repeat: no-repeat;
  transition: background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  display: inline;
}
.highlight-underline.revealed,
.revealed .highlight-underline {
  background-size: 100% 100%;
}

/* ---- Parallax layer (JS sets --parallax-y) ---- */
.parallax-layer {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ---- Stagger children — scale variant ---- */
.stagger-scale.revealed > * {
  opacity: 0;
  transform: scale(0.8);
  animation: staggerScaleIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stagger-scale.revealed > *:nth-child(1) { animation-delay: 0s; }
.stagger-scale.revealed > *:nth-child(2) { animation-delay: 0.08s; }
.stagger-scale.revealed > *:nth-child(3) { animation-delay: 0.16s; }
.stagger-scale.revealed > *:nth-child(4) { animation-delay: 0.24s; }
.stagger-scale.revealed > *:nth-child(5) { animation-delay: 0.32s; }
.stagger-scale.revealed > *:nth-child(6) { animation-delay: 0.40s; }
.stagger-scale.revealed > *:nth-child(7) { animation-delay: 0.48s; }
.stagger-scale.revealed > *:nth-child(8) { animation-delay: 0.56s; }

@keyframes staggerScaleIn {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

/* ---- Stagger children — slide from left ---- */
.stagger-left.revealed > * {
  opacity: 0;
  transform: translateX(-30px);
  animation: staggerLeftIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stagger-left.revealed > *:nth-child(1) { animation-delay: 0s; }
.stagger-left.revealed > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-left.revealed > *:nth-child(3) { animation-delay: 0.2s; }
.stagger-left.revealed > *:nth-child(4) { animation-delay: 0.3s; }

@keyframes staggerLeftIn {
  from { opacity: 0; transform: translateX(-30px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Hover glow ring on product cards ---- */
.product-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(200,213,185,0), rgba(61,74,30,0.15), rgba(200,213,185,0));
  opacity: 0;
  z-index: -1;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.product-card { position: relative; }
.product-card:hover::before { opacity: 1; }

/* ---- Shop sidebar entrance ---- */
.shop-sidebar {
  animation: sidebarSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes sidebarSlideIn {
  from { opacity: 0; transform: translateX(-20px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Shop toolbar entrance ---- */
.shop-toolbar {
  animation: toolbarFadeIn 0.4s ease 0.2s both;
}
@keyframes toolbarFadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Pagination entrance ---- */
.pagination {
  animation: paginationIn 0.4s ease both;
}
@keyframes paginationIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Filter section stagger ---- */
.filter-section {
  animation: filterStagger 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.filter-section:nth-child(1) { animation-delay: 0.1s; }
.filter-section:nth-child(2) { animation-delay: 0.2s; }
.filter-section:nth-child(3) { animation-delay: 0.3s; }
.filter-section:nth-child(4) { animation-delay: 0.4s; }

@keyframes filterStagger {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Breadcrumb slide in ---- */
.breadcrumb {
  animation: breadcrumbIn 0.5s ease 0.1s both;
}
@keyframes breadcrumbIn {
  from { opacity: 0; transform: translateX(-15px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Product card image ---- */
.product-card .product-card-image {
  transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.product-card a:has(.product-card-image) {
  overflow: hidden;
  display: block;
}

/* ---- Enhanced card hover ---- */
.product-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.12), 0 12px 24px -8px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(44, 195, 195, 0.1);
  border-color: rgba(4, 116, 172, 0.15);
}

/* ---- Category card hover ---- */
.category-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.35s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(26, 26, 26, 0.12);
  border-color: var(--primary);
}

.category-card-icon {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.category-card:hover .category-card-icon {
  transform: scale(1.15) rotate(-3deg);
}

/* ---- Value card hover ---- */
.value-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.35s ease;
}

.value-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(26, 26, 26, 0.1);
  border-color: var(--primary);
}

.value-card-icon {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.value-card:hover .value-card-icon {
  transform: scale(1.12);
}

/* ---- Team card hover ---- */
.team-card {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
}

.team-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px -8px rgba(26, 26, 26, 0.1);
}

.team-photo {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s ease;
}

.team-card:hover .team-photo {
  transform: scale(1.06);
  box-shadow: 0 4px 16px rgba(4, 116, 172, 0.25);
}

/* ---- Button enhancements ---- */
.btn {
  position: relative;
  overflow: hidden;
  transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.btn-primary:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 24px -4px rgba(4, 116, 172, 0.35);
}

.btn-primary:active {
  transform: translateY(0) scale(0.98);
  box-shadow: 0 2px 8px rgba(4, 116, 172, 0.2);
  transition-duration: 0.1s;
}

.btn-outline:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -4px rgba(4, 116, 172, 0.2);
}

.btn-outline:active {
  transform: translateY(0) scale(0.98);
  transition-duration: 0.1s;
}

.btn-white:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 24px -4px rgba(0, 0, 0, 0.15);
}

/* ---- Button ripple on click ---- */
.btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at var(--ripple-x, 50%) var(--ripple-y, 50%), rgba(255,255,255,0.3), transparent 60%);
  opacity: 0;
  transition: opacity 0.4s;
  pointer-events: none;
}

.btn.ripple::after {
  opacity: 1;
  animation: rippleFade 0.6s ease-out forwards;
}

@keyframes rippleFade {
  0% { opacity: 1; transform: scale(0.5); }
  100% { opacity: 0; transform: scale(2.5); }
}

/* ---- Nav link underline slide ---- */
.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.site-nav a:hover::after,
.site-nav a.active::after {
  width: 100%;
}

/* ---- Footer link hover ---- */
.footer-links a {
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.footer-links a:hover {
  transform: translateX(4px);
  color: var(--white);
}

/* ---- Header scroll state ---- */
.site-header {
  transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.site-header.scrolled {
  background: rgba(17, 17, 17, 0.92);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(44, 195, 195, 0.08);
}

.site-header.scrolled .container {
  height: 52px;
  transition: height 0.3s ease;
}

.site-header .container {
  transition: height 0.3s ease;
}

.site-header.scrolled .site-logo {
  font-size: 1.1rem;
  transition: font-size 0.3s ease;
}

.site-logo {
  transition: font-size 0.3s ease;
}

/* ---- Cart badge bounce ---- */
.cart-badge {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cart-badge.bounce {
  animation: badgeBounce 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes badgeBounce {
  0% { transform: scale(1); }
  40% { transform: scale(1.35); }
  70% { transform: scale(0.9); }
  100% { transform: scale(1); }
}

/* ---- Form input focus glow ---- */
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(4, 116, 172, 0.12), 0 0 0 6px rgba(4, 116, 172, 0.04);
  border-color: var(--primary);
  transition: box-shadow 0.3s ease, border-color 0.2s ease;
}

/* ---- Stats counter number ---- */
.stat-number {
  transition: opacity 0.3s;
}

.stat-number.counting {
  font-variant-numeric: tabular-nums;
}

/* ---- Trust item hover ---- */
.trust-item {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.trust-item:hover {
  transform: translateY(-2px);
}

.trust-item-icon {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.trust-item:hover .trust-item-icon {
  transform: scale(1.15);
}

/* ---- Info card / Contact card hover ---- */
.contact-info-card {
  transition: box-shadow 0.3s ease;
}

.contact-info-card:hover {
  box-shadow: 0 16px 40px -12px rgba(26, 26, 26, 0.1);
}

.info-icon {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s ease;
}

.info-item:hover .info-icon {
  transform: scale(1.1);
  background: rgba(154, 213, 231, 0.3);
}

/* ---- CTA banner ---- */
.cta-banner {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}

.cta-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 60px -12px rgba(26, 26, 26, 0.3);
}

/* ---- Tab button transition ---- */
.tab-nav button {
  transition: color 0.2s ease, border-color 0.3s ease;
}

/* ---- Rotating announcement bar ---- */
.announcement-bar {
  position: relative;
  overflow: hidden;
  height: 44px;
}

.announcement-bar-inner {
  display: flex;
  flex-direction: column;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.announcement-bar-item {
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- Scroll progress bar ---- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--accent-strong), var(--gold-light));
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(44, 195, 195, 0.4);
}

/* ---- Toast notification ---- */
.toast-container {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toast {
  background: linear-gradient(135deg, #111, #1a1a1a);
  color: #fff;
  padding: 14px 20px;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25), 0 0 0 1px rgba(44, 195, 195, 0.1);
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.4s ease;
  max-width: 340px;
  border-left: 3px solid var(--accent-strong);
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

.toast.leaving {
  transform: translateX(120%);
  opacity: 0;
}

.toast-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--accent-strong);
}

.toast-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  cursor: pointer;
  font-size: 1.125rem;
  margin-left: auto;
  padding: 0 0 0 8px;
  line-height: 1;
}

.toast-close:hover { color: #fff; }

/* ---- Back-to-top button ---- */
.back-to-top {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease, background 0.2s ease;
  z-index: 800;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: linear-gradient(135deg, var(--primary), #4a5c24);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(4, 116, 172, 0.3);
}

/* Move toast container above back-to-top when it's visible */
.toast-container { bottom: 80px; }

/* ---- Skeleton loading ---- */
.skeleton {
  background: linear-gradient(90deg, var(--cream) 25%, #e8e6e0 50%, var(--cream) 75%);
  background-size: 200% 100%;
  animation: skeletonPulse 1.5s ease-in-out infinite;
  border-radius: var(--radius-sm);
}

@keyframes skeletonPulse {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.skeleton-card .skeleton-img {
  width: 100%;
  height: 200px;
}

.skeleton-card .skeleton-text {
  height: 14px;
  margin: 12px 16px 0;
}

.skeleton-card .skeleton-text.short { width: 60%; }
.skeleton-card .skeleton-text.price { width: 40%; height: 20px; margin-top: 16px; }
.skeleton-card .skeleton-btn { height: 40px; margin: 16px; }

/* ---- Enhanced why-card hover ---- */
.why-card {
  transition: border-left-color 0.3s ease, background 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.why-card:hover {
  transform: translateX(4px);
  background: rgba(154, 213, 231, 0.06);
}

/* ---- CTA strip hover ---- */
.cta-strip {
  transition: box-shadow 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.cta-strip:hover {
  box-shadow: 0 12px 32px -8px rgba(26,26,26,0.1);
  transform: translateY(-2px);
}

/* ---- Hero stat entrance ---- */
.hero-stat {
  opacity: 0;
  animation: heroStatIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-stat:nth-child(1) { animation-delay: 0.3s; }
.hero-stat:nth-child(2) { animation-delay: 0.4s; }
.hero-stat:nth-child(3) { animation-delay: 0.5s; }
.hero-stat:nth-child(4) { animation-delay: 0.6s; }
.hero-stat:nth-child(5) { animation-delay: 0.7s; }

@keyframes heroStatIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Section divider line animation ---- */
.section-header .line {
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-header.revealed .line {
  transform: scaleX(1);
}

/* ---- Summary card subtle pulse on checkout ---- */
.summary-card {
  transition: box-shadow 0.3s ease;
}

.summary-card:hover {
  box-shadow: 0 8px 24px -8px rgba(26,26,26,0.1);
}

/* ---- Smooth image loading ---- */
.product-card-image,
.main-image {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.product-card-image.loaded,
.main-image.loaded {
  opacity: 1;
}

/* For images that don't get JS treatment, ensure visible */
.product-card-image[src]:not(.loaded),
.main-image[src]:not(.loaded) {
  opacity: 1;
}

/* ---- Mobile menu enhanced ---- */
@media (max-width: 768px) {
  .site-nav.open {
    animation: menuSlideDown 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  @keyframes menuSlideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .site-nav.open li {
    opacity: 0;
    animation: menuItemIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }

  .site-nav.open li:nth-child(1) { animation-delay: 0.05s; }
  .site-nav.open li:nth-child(2) { animation-delay: 0.1s; }
  .site-nav.open li:nth-child(3) { animation-delay: 0.15s; }
  .site-nav.open li:nth-child(4) { animation-delay: 0.2s; }

  @keyframes menuItemIn {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
  }
}

/* ---- Product grid stagger load ---- */
.product-card.card-enter {
  opacity: 0;
  transform: translateY(15px);
  animation: cardEnter 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes cardEnter {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Smooth scrollbar (WebKit) ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--border), rgba(44, 195, 195, 0.3)); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--text-light), rgba(44, 195, 195, 0.5)); }

/* ---- Selection color ---- */
::selection {
  background: rgba(44, 195, 195, 0.25);
  color: var(--text-primary);
}

/* ---- Premium shimmer / shine sweep ---- */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), rgba(255,255,255,0.15), rgba(255,255,255,0.08), transparent);
  animation: shimmerSweep 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shimmerSweep {
  0% { left: -100%; }
  50%, 100% { left: 200%; }
}

/* ---- Gold accent underline ---- */
.gold-underline {
  position: relative;
  display: inline;
}
.gold-underline::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light), var(--gold));
  border-radius: 1px;
}

/* ---- Luxury glow on hover for cards ---- */
.luxury-glow {
  transition: box-shadow 0.4s ease;
}
.luxury-glow:hover {
  box-shadow: var(--shadow-xl), 0 0 30px rgba(4, 116, 172, 0.08), 0 0 60px rgba(154, 213, 231, 0.05);
}

/* ---- Section divider with gradient ---- */
.premium-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), rgba(5, 146, 205, 0.3), var(--border), transparent);
  border: none;
  margin: 0;
}

/* ---- Glossy card effect ---- */
.glossy-card {
  position: relative;
  overflow: hidden;
}
.glossy-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent);
  pointer-events: none;
  z-index: 1;
  border-radius: var(--radius) var(--radius) 0 0;
}

/* ---- Text gradient shine ---- */
.text-shine {
  background: linear-gradient(135deg, var(--text-primary), var(--primary), var(--text-primary));
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShine 4s ease-in-out infinite;
}
@keyframes textShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 200% 50%; }
}

/* ---- Subtle glow behind hero section ---- */
.hero-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 195, 195, 0.15), transparent 70%);
  pointer-events: none;
  filter: blur(60px);
}

/* ---- Premium border gradient on cards ---- */
.border-glow {
  position: relative;
  border: none !important;
}
.border-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, var(--border), rgba(44, 195, 195, 0.3), var(--border));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ---- Floating particles (decorative) ---- */
.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(154, 213, 231, 0.3);
  border-radius: 50%;
  pointer-events: none;
}
.particle-1 { animation: particleFloat 6s ease-in-out infinite; }
.particle-2 { animation: particleFloat 8s ease-in-out 1s infinite; }
.particle-3 { animation: particleFloat 7s ease-in-out 2s infinite; }
@keyframes particleFloat {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
  25% { transform: translate(20px, -30px) scale(1.5); opacity: 0.6; }
  50% { transform: translate(-10px, -60px) scale(1); opacity: 0.4; }
  75% { transform: translate(15px, -30px) scale(1.2); opacity: 0.5; }
}

/* ---- Section background subtle pattern ---- */
.section-textured {
  background-image: radial-gradient(circle at 25% 25%, rgba(154, 213, 231, 0.04) 0%, transparent 50%),
                    radial-gradient(circle at 75% 75%, rgba(4, 116, 172, 0.03) 0%, transparent 50%);
}

/* ---- Premium input focus with glow spread ---- */
input:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(4, 116, 172, 0.12), 0 0 0 6px rgba(4, 116, 172, 0.04), 0 0 20px rgba(4, 116, 172, 0.06);
}

/* ---- Magnetic hover effect for buttons (via JS) ---- */
.magnetic-btn {
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Smooth content sections with gradient overlays ---- */
.section-fade-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  background: linear-gradient(to bottom, var(--bg), transparent);
  pointer-events: none;
  z-index: 1;
}

/* =========================================================================
   PREMIUM FLASHY ANIMATIONS — Maximum visual impact
   ========================================================================= */

/* ---- Elastic bounce reveal ---- */
.reveal-elastic {
  opacity: 0;
  transform: translateY(60px) scale(0.85);
  will-change: transform, opacity;
  transition: opacity 0.5s ease,
              transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-elastic.revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ---- Spin in from nothing ---- */
.reveal-spin {
  opacity: 0;
  transform: rotate(-180deg) scale(0.5);
  will-change: transform, opacity;
  transition: opacity 0.6s ease,
              transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-spin.revealed {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* ---- Slide up with rubber band ---- */
.reveal-rubber {
  opacity: 0;
  transform: translateY(50px) scaleY(1.3) scaleX(0.85);
  will-change: transform, opacity;
  transition: opacity 0.4s ease,
              transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-rubber.revealed {
  opacity: 1;
  transform: translateY(0) scaleY(1) scaleX(1);
}

/* ---- Glitch flash effect ---- */
.glitch-text {
  position: relative;
}
.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
.glitch-text.revealed::before {
  color: rgba(44, 195, 195, 0.8);
  animation: glitchFlash 0.3s ease-out 0.1s 1;
}
.glitch-text.revealed::after {
  color: rgba(5, 146, 205, 0.8);
  animation: glitchFlash 0.3s ease-out 0.2s 1;
}
@keyframes glitchFlash {
  0% { opacity: 0.8; transform: translate(-3px, -2px); }
  25% { opacity: 0.6; transform: translate(3px, 2px); }
  50% { opacity: 0.4; transform: translate(-2px, 1px); }
  75% { opacity: 0.2; transform: translate(1px, -1px); }
  100% { opacity: 0; transform: translate(0, 0); }
}

/* ---- Neon glow pulse ---- */
.neon-glow {
  animation: neonPulse 2s ease-in-out infinite alternate;
}
@keyframes neonPulse {
  0% {
    text-shadow: 0 0 4px rgba(44, 195, 195, 0.3), 0 0 8px rgba(44, 195, 195, 0.2), 0 0 16px rgba(44, 195, 195, 0.1);
    filter: brightness(1);
  }
  100% {
    text-shadow: 0 0 8px rgba(44, 195, 195, 0.5), 0 0 16px rgba(44, 195, 195, 0.3), 0 0 32px rgba(44, 195, 195, 0.15);
    filter: brightness(1.05);
  }
}

/* ---- Card neon border on hover ---- */
.neon-border-hover {
  position: relative;
}
.neon-border-hover::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(135deg, rgba(44, 195, 195, 0), rgba(44, 195, 195, 0.4), rgba(5, 146, 205, 0.3), rgba(44, 195, 195, 0));
  background-size: 300% 300%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.4s ease;
  filter: blur(4px);
}
.neon-border-hover:hover::after {
  opacity: 1;
  animation: neonBorderRotate 3s ease infinite;
}
@keyframes neonBorderRotate {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Stagger with 3D depth ---- */
.stagger-depth.revealed > * {
  opacity: 0;
  transform: perspective(800px) translateZ(-100px) translateY(30px);
  animation: staggerDepthIn 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stagger-depth.revealed > *:nth-child(1) { animation-delay: 0s; }
.stagger-depth.revealed > *:nth-child(2) { animation-delay: 0.08s; }
.stagger-depth.revealed > *:nth-child(3) { animation-delay: 0.16s; }
.stagger-depth.revealed > *:nth-child(4) { animation-delay: 0.24s; }
.stagger-depth.revealed > *:nth-child(5) { animation-delay: 0.32s; }
.stagger-depth.revealed > *:nth-child(6) { animation-delay: 0.40s; }
.stagger-depth.revealed > *:nth-child(7) { animation-delay: 0.48s; }
.stagger-depth.revealed > *:nth-child(8) { animation-delay: 0.56s; }
@keyframes staggerDepthIn {
  from { opacity: 0; transform: perspective(800px) translateZ(-100px) translateY(30px); }
  to { opacity: 1; transform: perspective(800px) translateZ(0) translateY(0); }
}

/* ---- Reveal with color wipe ---- */
.reveal-color-wipe {
  position: relative;
  overflow: hidden;
}
.reveal-color-wipe::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent-strong));
  z-index: 2;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-color-wipe.revealed::before {
  animation: colorWipeThrough 0.8s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
@keyframes colorWipeThrough {
  0% { transform: scaleX(0); transform-origin: left; }
  45% { transform: scaleX(1); transform-origin: left; }
  55% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* ---- Morphing blob background ---- */
.morph-blob {
  position: absolute;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(44, 195, 195, 0.06), transparent 60%);
  filter: blur(40px);
  animation: blobMorph 8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes blobMorph {
  0%, 100% { border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%; transform: translate(0, 0) scale(1); }
  25% { border-radius: 70% 30% 50% 50% / 30% 30% 70% 70%; transform: translate(20px, -20px) scale(1.1); }
  50% { border-radius: 50% 60% 30% 60% / 60% 40% 60% 40%; transform: translate(-15px, 15px) scale(0.95); }
  75% { border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%; transform: translate(10px, -10px) scale(1.05); }
}

/* ---- Flashy hover scale + shadow for any card ---- */
.hover-lift {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.hover-lift:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 32px 64px -16px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(44, 195, 195, 0.08);
}

/* ---- Shine sweep on hover ---- */
.hover-shine {
  position: relative;
  overflow: hidden;
}
.hover-shine::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transform: skewX(-20deg);
  transition: left 0.6s ease;
  pointer-events: none;
}
.hover-shine:hover::after {
  left: 130%;
}

/* ---- Animated gradient text ---- */
.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--accent-strong), var(--gold), var(--primary));
  background-size: 300% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientTextMove 5s ease infinite;
}
@keyframes gradientTextMove {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ---- Countdown / flip number animation ---- */
.flip-number {
  display: inline-block;
  perspective: 400px;
}
.flip-number.counting .flip-digit {
  animation: flipDigit 0.3s ease-in-out;
}
@keyframes flipDigit {
  0% { transform: rotateX(0); }
  50% { transform: rotateX(-90deg); opacity: 0.5; }
  100% { transform: rotateX(0); opacity: 1; }
}

/* ---- Heartbeat pulse for badges ---- */
.heartbeat {
  animation: heartbeat 1.5s ease-in-out infinite;
}
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.15); }
  30% { transform: scale(1); }
  45% { transform: scale(1.08); }
  60% { transform: scale(1); }
}

/* ---- Wobble on hover ---- */
.wobble-hover:hover {
  animation: wobble 0.6s ease-in-out;
}
@keyframes wobble {
  0% { transform: rotate(0); }
  15% { transform: rotate(-4deg); }
  30% { transform: rotate(3deg); }
  45% { transform: rotate(-2deg); }
  60% { transform: rotate(1deg); }
  75% { transform: rotate(-0.5deg); }
  100% { transform: rotate(0); }
}

/* ---- Spotlight cursor follow (for dark sections) ---- */
.spotlight-section {
  position: relative;
  overflow: hidden;
}
.spotlight-section .spotlight {
  position: absolute;
  width: 500px;
  height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44, 195, 195, 0.05), transparent 60%);
  pointer-events: none;
  transition: transform 0.15s linear, opacity 0.3s ease;
  opacity: 0;
  filter: blur(20px);
}
.spotlight-section:hover .spotlight {
  opacity: 1;
}

/* ---- Zigzag stagger (alternate left/right) ---- */
.stagger-zigzag.revealed > *:nth-child(odd) {
  opacity: 0;
  transform: translateX(-40px);
  animation: staggerZigzagLeft 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stagger-zigzag.revealed > *:nth-child(even) {
  opacity: 0;
  transform: translateX(40px);
  animation: staggerZigzagRight 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.stagger-zigzag.revealed > *:nth-child(1) { animation-delay: 0s; }
.stagger-zigzag.revealed > *:nth-child(2) { animation-delay: 0.08s; }
.stagger-zigzag.revealed > *:nth-child(3) { animation-delay: 0.16s; }
.stagger-zigzag.revealed > *:nth-child(4) { animation-delay: 0.24s; }
@keyframes staggerZigzagLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes staggerZigzagRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

/* ---- Typewriter reveal for text ---- */
.typewriter-reveal {
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid var(--primary);
  width: 0;
  animation: typeReveal 1.5s steps(30) forwards, blinkCaret 0.6s step-end infinite;
}
.typewriter-reveal.revealed {
  animation: typeReveal 1.5s steps(30) forwards, blinkCaret 0.6s step-end infinite;
}
@keyframes typeReveal {
  0% { width: 0; }
  100% { width: 100%; }
}
@keyframes blinkCaret {
  50% { border-color: transparent; }
}

/* ---- Explode in (from center outward) ---- */
.reveal-explode {
  opacity: 0;
  transform: scale(0.3);
  filter: blur(20px);
  will-change: transform, opacity, filter;
  transition: opacity 0.4s ease,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.5s ease;
}
.reveal-explode.revealed {
  opacity: 1;
  transform: scale(1);
  filter: blur(0);
}

/* ---- Slide from far right ---- */
.reveal-slide-far-right {
  opacity: 0;
  transform: translateX(120px);
  will-change: transform, opacity;
  transition: opacity 0.6s ease,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-slide-far-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Slide from far left ---- */
.reveal-slide-far-left {
  opacity: 0;
  transform: translateX(-120px);
  will-change: transform, opacity;
  transition: opacity 0.6s ease,
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal-slide-far-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* ---- Rotating border animation ---- */
.rotating-border {
  position: relative;
}
.rotating-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius) + 2px);
  background: conic-gradient(from 0deg, transparent, var(--accent-strong), transparent, var(--gold-light), transparent);
  z-index: -1;
  animation: rotateBorder 4s linear infinite;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.rotating-border:hover::before {
  opacity: 1;
}
@keyframes rotateBorder {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ---- Smooth scale up section backgrounds ---- */
.bg-scale-in {
  background-size: 110%;
  background-position: center;
  transition: background-size 12s ease-out;
}
.bg-scale-in.revealed {
  background-size: 100%;
}

/* ---- Enhanced footer link animations ---- */
.footer-links a {
  position: relative;
  padding-left: 0;
  transition: color 0.2s ease, padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.footer-links a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 0;
  height: 1px;
  background: var(--accent-strong);
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  transform: translateY(-50%);
}
.footer-links a:hover {
  padding-left: 14px;
}
.footer-links a:hover::before {
  width: 8px;
}

/* ---- Hero button group stagger ---- */
.hero-buttons > * {
  opacity: 0;
  transform: translateY(15px);
  animation: heroButtonIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-buttons > *:nth-child(1) { animation-delay: 0.4s; }
.hero-buttons > *:nth-child(2) { animation-delay: 0.55s; }

@keyframes heroButtonIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Product card body slide up on hover ---- */
.product-card-body {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover .product-card-body {
  transform: translateY(-4px);
}

/* ---- Product card add-to-cart button glow ---- */
.product-card .btn-primary {
  transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.product-card:hover .btn-primary {
  box-shadow: 0 4px 20px rgba(4, 116, 172, 0.35);
  transform: translateY(-1px);
}

/* ---- Announcement bar enhanced with gradient sweep ---- */
.announcement-bar {
  position: relative;
}
.announcement-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent);
  animation: announceSweep 6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes announceSweep {
  0% { left: -100%; }
  40%, 100% { left: 200%; }
}

/* ---- Category card icon spin on hover ---- */
.category-card:hover .category-card-icon svg {
  animation: iconSpin 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes iconSpin {
  0% { transform: rotate(0) scale(1); }
  30% { transform: rotate(-15deg) scale(1.15); }
  60% { transform: rotate(5deg) scale(1.05); }
  100% { transform: rotate(0) scale(1); }
}

/* ---- Why card icon slide in ---- */
.why-card h3 {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- Contact form card hover ---- */
.contact-form.card {
  transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.contact-form.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-2px);
}

/* ---- Premium loading bar for forms ---- */
.btn[disabled] {
  position: relative;
  overflow: hidden;
}
.btn[disabled]::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.6), transparent);
  animation: loadingBar 1s ease-in-out infinite;
}
@keyframes loadingBar {
  0% { left: -30%; }
  100% { left: 100%; }
}

/* ---- Accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

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

  .reveal-stagger > * {
    opacity: 1;
    transform: none;
  }

  /* Disable page transitions */
  html.page-leaving body { opacity: 1 !important; }

  /* Disable clip-path reveals */
  .clip-reveal, .clip-reveal-diagonal { clip-path: none !important; }

  /* Disable fly-to-cart */
  .fly-to-cart { display: none !important; }
}

/* =========================================================================
   2026 TRENDING ANIMATIONS
   ========================================================================= */

/* ---- Smooth Page Transitions ---- */
html { background: var(--bg, #f0f8fb); }
html body { opacity: 0; transition: opacity 0.3s ease; }
html.page-ready body { opacity: 1; }
html.page-leaving body { opacity: 0; transition: opacity 0.2s ease; }

/* ---- Gradient Button Hover Sweep ---- */
.btn-primary {
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.btn-primary::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s ease;
  z-index: -1;
}
.btn-primary:hover::before {
  left: 100%;
}
/* Glow pulse on CTA buttons */
.btn-lg.btn-primary:hover {
  box-shadow: 0 0 20px rgba(4, 116, 172, 0.4), 0 0 40px rgba(4, 116, 172, 0.15);
}

/* ---- Clip-Path Section Reveals ---- */
.clip-reveal {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.clip-reveal.revealed {
  clip-path: inset(0 0 0 0);
}
.clip-reveal-diagonal {
  clip-path: polygon(0 100%, 100% 100%, 100% 100%, 0 100%);
  transition: clip-path 1s cubic-bezier(0.22, 1, 0.36, 1);
}
.clip-reveal-diagonal.revealed {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* ---- Product Card Hover Overlay ---- */
.product-card {
  position: relative;
  overflow: hidden;
}
.product-card .card-hover-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(4, 116, 172, 0.95), rgba(4, 116, 172, 0.7));
  padding: 16px;
  transform: translateY(100%);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-card:hover .card-hover-overlay {
  transform: translateY(0);
}
.card-hover-overlay .btn {
  background: #fff;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 8px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

/* ---- Fly-to-Cart Animation ---- */
.fly-to-cart {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border-radius: 8px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
  opacity: 1;
}
.fly-to-cart.flying {
  opacity: 0;
  transform: scale(0.15);
}