/**
 * RTC Computer GmbH - Animation System
 * Inspired by carbo.tech / VALMAX Agency
 *
 * Features:
 * - Animation Tokens (timing, easing, durations)
 * - Hover Effects (cards, images, buttons)
 * - Scroll-triggered animations
 * - Navigation animations
 * - Reduced motion support
 */

/* ==========================================================================
   1. ANIMATION TOKENS
   ========================================================================== */

:root {
  /* Timing Functions - Smooth, professional easing */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out-cubic: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Durations */
  --duration-instant: 100ms;
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;
  --duration-page: 1000ms;

  /* Stagger delays */
  --stagger-xs: 30ms;
  --stagger-sm: 50ms;
  --stagger-md: 80ms;
  --stagger-lg: 120ms;

  /* Transform values */
  --hover-lift-sm: -4px;
  --hover-lift-md: -8px;
  --hover-lift-lg: -12px;
  --hover-scale: 1.02;
  --image-scale: 1.08;
}

/* ==========================================================================
   2. GPU-ACCELERATED BASE CLASSES
   ========================================================================== */

.animate-gpu {
  will-change: transform, opacity;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.animate-gpu.animation-complete {
  will-change: auto;
}

/* ==========================================================================
   3. NAVIGATION ANIMATIONS
   ========================================================================== */

/* Enhanced nav with scroll-aware behavior */
nav {
  transition:
    padding var(--duration-normal) var(--ease-out-quart),
    background-color var(--duration-normal) var(--ease-out-quart),
    box-shadow var(--duration-normal) var(--ease-out-quart),
    transform var(--duration-normal) var(--ease-out-quart);
}

/* Scrolled state - more compact */
nav.scrolled {
  padding: 0.5rem 5%;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 4px 20px rgba(0, 0, 0, 0.08);
}

/* Hidden state for hide/show behavior */
nav.nav-hidden {
  transform: translateY(-100%);
}

nav.nav-visible {
  transform: translateY(0);
}

/* Logo shrink animation */
.logo-image {
  transition: height var(--duration-normal) var(--ease-out-quart);
}

nav.scrolled .logo-image {
  height: 50px;
}

/* Nav link hover animation with underline */
.nav-links > li > a {
  position: relative;
  transition: color var(--duration-fast) var(--ease-out-quart);
}

.nav-links > li:not(.has-dropdown) > a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--color-primary, #2c2c2c);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--duration-normal) var(--ease-out-expo);
}

.nav-links > li:not(.has-dropdown) > a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* ==========================================================================
   4. CARD HOVER EFFECTS
   ========================================================================== */

/* Standard card lift effect */
.card,
.featured-item,
.benefit-card,
.stat-box,
.testimonial {
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    box-shadow var(--duration-slow) var(--ease-out-quart),
    border-color var(--duration-fast);
}

.card:hover,
.featured-item:hover,
.benefit-card:hover {
  transform: translateY(var(--hover-lift-md));
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.08),
    0 8px 16px rgba(0, 0, 0, 0.06);
}

.stat-box:hover,
.testimonial:hover {
  transform: translateY(var(--hover-lift-sm));
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
   5. IMAGE HOVER EFFECTS
   ========================================================================== */

/* Image container with overflow hidden */
.image-hover,
.featured-image {
  overflow: hidden;
  position: relative;
}

.image-hover img,
.featured-image img,
.featured-image picture img {
  transition:
    transform var(--duration-slow) var(--ease-out-expo),
    filter var(--duration-normal) var(--ease-out-quart);
}

.image-hover:hover img,
.featured-item:hover .featured-image img,
.featured-item:hover .featured-image picture img {
  transform: scale(var(--image-scale));
  filter: brightness(1.05);
}

/* Optional overlay reveal on hover */
.image-hover-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(44, 44, 44, 0.6) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease-out-quart);
  pointer-events: none;
}

.image-hover-overlay:hover::after {
  opacity: 1;
}

/* ==========================================================================
   6. BUTTON HOVER EFFECTS
   ========================================================================== */

/* Enhanced button with lift and glow */
.btn,
.cta-button,
.submit-button {
  position: relative;
  overflow: hidden;
  transition:
    transform var(--duration-fast) var(--ease-out-expo),
    box-shadow var(--duration-normal) var(--ease-out-quart),
    background-color var(--duration-fast),
    border-color var(--duration-fast);
}

.btn:hover,
.cta-button:hover,
.submit-button:hover {
  transform: translateY(-2px);
}

.btn-primary:hover,
.cta-button:hover {
  box-shadow:
    0 10px 30px rgba(44, 44, 44, 0.25),
    0 4px 12px rgba(44, 44, 44, 0.15);
}

/* Ripple effect on click */
.btn::before,
.cta-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: currentColor;
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left;
  transition:
    transform var(--duration-normal) var(--ease-out-expo),
    opacity var(--duration-fast);
}

.btn:active::before,
.cta-button:active::before {
  transform: scaleX(1);
  opacity: 0.1;
}

/* Link arrow animation */
.link-arrow,
.featured-item a.link,
a[style*="Mehr erfahren"],
a[href*="→"] {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap var(--duration-fast) var(--ease-out-quart);
}

.link-arrow:hover,
.featured-item a.link:hover {
  gap: 0.75rem;
}

/* ==========================================================================
   6b. CARD BUTTON - WIPE HOVER EFFECT
   ========================================================================== */

/* Card button with left-to-right color invert wipe */
.card-btn {
  position: relative;
  display: inline-block;
  padding: 0.6rem 1.5rem;
  background: #2c2c2c;
  color: white;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9rem;
  font-weight: 500;
  overflow: hidden;
  z-index: 1;
  transition: color var(--duration-normal) var(--ease-out-quart);
}

/* Pseudo-element for wipe effect */
.card-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
  z-index: -1;
}

/* Hover state - wipe in from left */
.card-btn:hover {
  color: #2c2c2c;
}

.card-btn:hover::before {
  transform: scaleX(1);
}

/* Add border for better definition */
.card-btn {
  border: 1px solid #2c2c2c;
}

/* Featured item card layout for bottom-right button positioning */
.featured-item {
  position: relative;
  display: flex;
  flex-direction: column;
  padding-bottom: 3.5rem !important; /* Space for button */
}

.featured-item > p {
  flex-grow: 1;
}

/* Button wrapper - absolutely positioned at bottom-right corner */
.featured-item > .card-btn-wrapper {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0 !important;
  margin: 0 !important;
}

/* Button flush with bottom-right corner */
.featured-item .card-btn {
  border-radius: 0;
  border-bottom-right-radius: var(--radius-xl, 12px);
  margin: 0;
  display: block;
}

/* Article cards have 8px border-radius */
.article-card .card-btn {
  border-bottom-right-radius: 8px;
}

/* ==========================================================================
   6c. UNIVERSAL BUTTON WIPE EFFECTS
   ========================================================================== */

/*
 * Two variants:
 * .btn-wipe-dark  - Dark button, wipes to white on hover
 * .btn-wipe-light - White button, wipes to dark on hover
 */

/* Base styles for wipe buttons */
.btn-wipe-dark,
.btn-wipe-light {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;  /* Create stacking context for ::before pseudo-elements */
  transition: color var(--duration-normal) var(--ease-out-quart);
}

/* Dark button variant (dark bg -> white wipe) */
.btn-wipe-dark {
  background: #2c2c2c;
  color: white;
  border: 1px solid #2c2c2c;
}

.btn-wipe-dark::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
  z-index: -1;
}

.btn-wipe-dark:hover {
  color: #2c2c2c;
}

.btn-wipe-dark:hover::before {
  transform: scaleX(1);
}

/* Light button variant (white bg -> dark wipe) */
.btn-wipe-light {
  background: white;
  color: #2c2c2c;
  border: 1px solid white;
}

.btn-wipe-light::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
  z-index: -1;
}

.btn-wipe-light:hover {
  color: white;
}

.btn-wipe-light:hover::before {
  transform: scaleX(1);
}

/* Shared button styling for standalone buttons */
.btn-wipe-dark:not(.card-btn),
.btn-wipe-light:not(.card-btn) {
  padding: 0.8rem 2rem;
  text-decoration: none;
  border-radius: 4px;  /* Einheitlich 4px */
  font-weight: 500;
}

/* Larger variant for CTA buttons */
.btn-wipe-dark.btn-lg,
.btn-wipe-light.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1.1rem;
  border-radius: 8px;
}

/* ==========================================================================
   6d. PRODUCT LINK WIPE EFFECT
   ========================================================================== */

/*
 * Product links on product pages (security-compliance, infrastruktur-cloud, etc.)
 * Dark button that wipes to white on hover (same as btn-wipe-dark)
 * Uses TWO pseudo-elements to override security-compliance.min.css:
 * - ::before = static dark background (z-index: -2)
 * - ::after = animated white wipe (z-index: -1)
 */

.product-link {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color var(--duration-normal) var(--ease-out-quart);
  /* Make main background transparent so pseudo-elements show */
  background: transparent !important;
  /* Border to match btn-wipe-dark style */
  border: 1px solid #2c2c2c !important;
  /* Einheitliche Rundung wie alle anderen Buttons */
  border-radius: 4px !important;
}

/* Static dark background layer */
.product-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  z-index: -2;
  border-radius: inherit;
}

/* Animated white wipe layer */
.product-link::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
  z-index: -1;
  border-radius: inherit;
}

.product-link:hover {
  color: #2c2c2c;
  background: transparent !important;
}

.product-link:hover::after {
  transform: scaleX(1);
}

/* ==========================================================================
   6e. CTA BUTTON WIPE EFFECTS
   ========================================================================== */

/*
 * CTA buttons on security pages (managed-firewall, endpoint-protection, etc.)
 * These are pill-shaped buttons on dark backgrounds
 * - .cta-button-primary: White button that wipes to dark on hover
 * - .cta-button-secondary: Outline button that wipes to white on hover
 */

/* Primary CTA - White button with dark wipe on hover
 * Simplified approach: background on element, single ::before for wipe
 */
.cta-button-primary {
  position: relative;
  overflow: hidden;
  isolation: isolate;  /* Create stacking context for pseudo-elements */
  transition: color var(--duration-normal) var(--ease-out-quart),
              transform 0.3s ease,
              box-shadow 0.3s ease;
  background: white !important;
  color: #2c2c2c !important;
  border-radius: 8px !important;
  border: 1px solid white !important;
}

/* Animated dark wipe layer */
.cta-button-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
  z-index: -1;
  border-radius: inherit;
}

.cta-button-primary:hover {
  color: white !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.cta-button-primary:hover::before {
  transform: scaleX(1);
}

/* Secondary CTA - Outline button with white wipe
 * Uses TWO pseudo-elements:
 * - ::before = static transparent background (z-index: -2)
 * - ::after = animated white wipe (z-index: -1)
 */
.cta-button-secondary {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color var(--duration-normal) var(--ease-out-quart),
              transform 0.3s ease;
  background: transparent !important;
  border-radius: 8px !important;  /* Einheitlich wie btn-wipe-light btn-lg */
}

/* Animated white wipe layer */
.cta-button-secondary::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
  z-index: -1;
  border-radius: inherit;
}

.cta-button-secondary:hover {
  color: #2c2c2c;
  transform: translateY(-2px);
  background: transparent !important;
}

.cta-button-secondary:hover::before {
  transform: scaleX(1);
}

/* ==========================================================================
   6e-2. DARK OUTLINE BUTTON WIPE EFFECTS (for light backgrounds)
   ========================================================================== */

/*
 * Outline button on light backgrounds
 * - .btn-wipe-dark-outline: Transparent with dark border, wipes to dark on hover
 */

.btn-wipe-dark-outline {
  position: relative;
  display: inline-block;
  overflow: hidden;
  z-index: 1;
  isolation: isolate;
  background: transparent;
  color: #2c2c2c;
  border: 2px solid #2c2c2c;
  padding: 0.8rem 2rem;
  text-decoration: none;
  border-radius: 4px;
  font-weight: 500;
  transition: color var(--duration-normal) var(--ease-out-quart);
}

.btn-wipe-dark-outline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
  z-index: -1;
  border-radius: inherit;
}

.btn-wipe-dark-outline:hover {
  color: white;
}

.btn-wipe-dark-outline:hover::before {
  transform: scaleX(1);
}

.btn-wipe-dark-outline.btn-lg {
  padding: 1rem 2.5rem;
  font-size: 1rem;
}

/* ==========================================================================
   6f. REQUIREMENT LINK WIPE EFFECTS (NIS2 page)
   ========================================================================== */

/*
 * Requirement links on NIS2 compliance page
 * Dark text button that wipes to dark background on hover
 */

.requirement-link {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color var(--duration-normal) var(--ease-out-quart);
  /* Einheitliche Rundung */
  border-radius: 4px !important;
}

.requirement-link::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
  z-index: -1;
  border-radius: inherit;
}

.requirement-link:hover {
  color: white;
}

.requirement-link:hover::before {
  transform: scaleX(1);
}

/* ==========================================================================
   6g. ISC BUTTON WIPE EFFECTS (IT-Security-Check page)
   ========================================================================== */

/*
 * ISC buttons on IT-Security-Check page
 * Dark button that wipes to white on hover (same as btn-wipe-dark)
 */

#it-security-check-app .isc-button {
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color var(--duration-normal) var(--ease-out-quart),
              background-color 0s; /* Override default transition */
  background: transparent !important;
  border: 1px solid #2c2c2c !important;
  border-radius: 4px !important;
}

/* Static dark background layer */
#it-security-check-app .isc-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #2c2c2c;
  z-index: -2;
  border-radius: inherit;
}

/* Animated white wipe layer */
#it-security-check-app .isc-button::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out-expo);
  z-index: -1;
  border-radius: inherit;
}

#it-security-check-app .isc-button:hover:not(:disabled) {
  color: #2c2c2c !important;
  background: transparent !important;
}

#it-security-check-app .isc-button:hover:not(:disabled)::after {
  transform: scaleX(1);
}

/* Disabled state */
#it-security-check-app .isc-button:disabled {
  opacity: 0.6;
}

/* ==========================================================================
   7. SCROLL-REVEAL ANIMATIONS
   ========================================================================== */

/*
 * IMPORTANT: Elements are visible by default for accessibility.
 * Animations only activate when JavaScript adds .js-animations-ready to body.
 * This ensures content is always visible even if JS fails to load.
 */

/* Base reveal state - ONLY hide when JS is ready */
.js-animations-ready .reveal,
.js-animations-ready .reveal-fade,
.js-animations-ready .reveal-slide-up,
.js-animations-ready .reveal-slide-left,
.js-animations-ready .reveal-slide-right,
.js-animations-ready .reveal-scale {
  opacity: 0;
  transition:
    opacity var(--duration-slower) var(--ease-out-quart),
    transform var(--duration-slower) var(--ease-out-expo);
}

/* Fade up (default) - ONLY transform when JS is ready */
.js-animations-ready .reveal,
.js-animations-ready .reveal-slide-up {
  transform: translateY(40px);
}

.reveal.revealed,
.reveal-slide-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Fade only */
.js-animations-ready .reveal-fade {
  transform: none;
}

.reveal-fade.revealed {
  opacity: 1;
}

/* Slide from left */
.js-animations-ready .reveal-slide-left {
  transform: translateX(-40px);
}

.reveal-slide-left.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Slide from right */
.js-animations-ready .reveal-slide-right {
  transform: translateX(40px);
}

.reveal-slide-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up */
.js-animations-ready .reveal-scale {
  transform: scale(0.95);
}

.reveal-scale.revealed {
  opacity: 1;
  transform: scale(1);
}

/* Stagger delays for grid items */
.reveal-stagger > *:nth-child(1) { transition-delay: calc(var(--stagger-sm) * 1); }
.reveal-stagger > *:nth-child(2) { transition-delay: calc(var(--stagger-sm) * 2); }
.reveal-stagger > *:nth-child(3) { transition-delay: calc(var(--stagger-sm) * 3); }
.reveal-stagger > *:nth-child(4) { transition-delay: calc(var(--stagger-sm) * 4); }
.reveal-stagger > *:nth-child(5) { transition-delay: calc(var(--stagger-sm) * 5); }
.reveal-stagger > *:nth-child(6) { transition-delay: calc(var(--stagger-sm) * 6); }
.reveal-stagger > *:nth-child(7) { transition-delay: calc(var(--stagger-sm) * 7); }
.reveal-stagger > *:nth-child(8) { transition-delay: calc(var(--stagger-sm) * 8); }
.reveal-stagger > *:nth-child(9) { transition-delay: calc(var(--stagger-sm) * 9); }

/* ==========================================================================
   8. HERO ANIMATIONS
   ========================================================================== */

/* Hero parallax background */
.hero {
  position: relative;
  overflow: hidden;
}

.hero-bg-parallax {
  position: absolute;
  inset: -20%;
  background-size: cover;
  background-position: center;
  will-change: transform;
  z-index: 0;
}

/* Hero content entrance animation */
.hero-content,
.product-hero > div {
  opacity: 0;
  transform: translateY(30px);
  animation: heroFadeIn 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Ensure product-hero text is always white */
.product-hero,
.product-hero > div,
.product-hero h1,
.product-hero .subtitle,
.product-hero .tagline,
.product-hero p {
  color: #ffffff !important;
}

/* Ensure CTA section text is always white */
.cta-section,
.cta-section h2,
.cta-section p {
  color: #ffffff !important;
}

/* Ensure contact-hero text is always white */
.contact-hero,
.contact-hero > div,
.contact-hero h1,
.contact-hero .subtitle,
.contact-hero .tagline,
.contact-hero p {
  color: #ffffff !important;
}

@keyframes heroFadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Hero title character animation (for GSAP SplitText) */
.hero h1 .char {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%) rotateX(-90deg);
}

.hero h1.animated .char {
  animation: charReveal 0.8s var(--ease-out-expo) forwards;
}

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

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  animation: scrollBounce 2s var(--ease-in-out-cubic) infinite;
}

@keyframes scrollBounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
  }
  50% {
    transform: translateX(-50%) translateY(10px);
    opacity: 0.5;
  }
}

/* ==========================================================================
   9. SECTION TRANSITIONS
   ========================================================================== */

/* Section title animation - ONLY hide when JS is ready */
.js-animations-ready .section-title,
.js-animations-ready .section-subtitle {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity var(--duration-slow) var(--ease-out-quart),
    transform var(--duration-slow) var(--ease-out-expo);
}

.section-title.revealed,
.section-subtitle.revealed {
  opacity: 1;
  transform: translateY(0);
}

.js-animations-ready .section-subtitle {
  transition-delay: 100ms;
}

/* ==========================================================================
   10. FOOTER LINK ANIMATIONS
   ========================================================================== */

.footer-links a {
  position: relative;
  transition:
    color var(--duration-fast) var(--ease-out-quart),
    transform var(--duration-fast) var(--ease-out-quart);
}

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

.footer-links a::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 4px;
  background: currentColor;
  border-radius: 50%;
  opacity: 0;
  transition: opacity var(--duration-fast);
}

.footer-links a:hover::before {
  opacity: 0.5;
}

/* ==========================================================================
   11. EMOJI GRAYSCALE FIX (Nitpick)
   ========================================================================== */

/* All emojis in benefit cards should be grayscale per STYLE-GUIDE.md */
.benefit-card h3 span,
.feature-card h3 span,
[style*="filter: grayscale"] {
  filter: grayscale(100%);
}

/* Emoji class for consistent styling */
.emoji-gray {
  filter: grayscale(100%);
  display: inline-block;
}

/* ==========================================================================
   12. LOADING SKELETON
   ========================================================================== */

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-gray-100, #f3f4f6) 0%,
    var(--color-gray-50, #f9fafb) 50%,
    var(--color-gray-100, #f3f4f6) 100%
  );
  background-size: 200% 100%;
  animation: skeletonShimmer 1.5s ease-in-out infinite;
  border-radius: var(--radius-md, 8px);
}

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

/* ==========================================================================
   13. PAGE LOAD ANIMATION
   ========================================================================== */

/* Initial page load sequence */
.page-loading {
  opacity: 0;
}

.page-loaded {
  animation: pageLoad var(--duration-slow) var(--ease-out-quart) forwards;
}

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

/* ==========================================================================
   14. REDUCED MOTION SUPPORT (Accessibility)
   ========================================================================== */

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

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

  .hero-content,
  .product-hero > div {
    animation: none;
    opacity: 1;
    transform: none;
  }

  .scroll-indicator {
    animation: none;
  }
}

/* ==========================================================================
   15. PRINT STYLES
   ========================================================================== */

@media print {
  .reveal,
  .reveal-fade,
  .reveal-slide-up,
  .reveal-slide-left,
  .reveal-slide-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
  }

  * {
    animation: none !important;
    transition: none !important;
  }
}