/*==========================================================
VPUI-001
Hero Impact Tokens
Version: 0.9.2
Status: Pilot
Dependencies: foundation.css
==========================================================*/

:root {
  /* Layout */
  --vpui-hero-min-height: 82vh;
  --vpui-hero-min-height-mobile: 86vh;
  --vpui-hero-card-width: 320px;
  --vpui-hero-content-width: 720px;
  --vpui-hero-text-width: 580px;
  --vpui-hero-stat-offset: 6%;

  /* Surfaces */
  --vpui-hero-card-surface: rgba(255, 255, 255, 0.92);
  --vpui-hero-stat-surface: rgba(255, 255, 255, 0.88);
  --vpui-hero-glass-blur: blur(14px);

  /* Overlay */
  --vpui-hero-overlay-default:
    linear-gradient(
      90deg,
      rgba(0, 39, 76, 0.82),
      rgba(0, 93, 130, 0.52),
      rgba(0, 0, 0, 0.18)
    );

  --vpui-hero-overlay-aqua: var(--vpui-hero-overlay-default);

  /* Text */
  --vpui-hero-text-color: var(--vpui-color-white);
  --vpui-hero-muted-text-color: rgba(255, 255, 255, 0.92);

  /* Particles */
  --vpui-particle-start-offset: -80px;
  --vpui-particle-border: 2px solid rgba(255, 255, 255, 0.45);
  --vpui-particle-surface: rgba(255, 255, 255, 0.08);
  --vpui-particle-travel-y: -110vh;

  --vpui-particle-1-x: 10%;
  --vpui-particle-1-size: 18px;

  --vpui-particle-2-x: 28%;
  --vpui-particle-2-size: 30px;

  --vpui-particle-3-x: 52%;
  --vpui-particle-3-size: 16px;

  --vpui-particle-4-x: 74%;
  --vpui-particle-4-size: 36px;

  --vpui-particle-5-x: 88%;
  --vpui-particle-5-size: 20px;

  /* Motion */
  --vpui-motion-particle-sm: 9s;
  --vpui-motion-particle-md: 11s;
  --vpui-motion-particle-lg: 14s;
  --vpui-motion-particle-xl: 16s;

  --vpui-motion-delay-xs: 1s;
  --vpui-motion-delay-sm: 2s;
  --vpui-motion-delay-md: 3s;
  --vpui-motion-delay-lg: 4s;

  /* Effects */
  --vpui-particle-scale-start: 1;
  --vpui-particle-scale-end: 1.3;
  --vpui-opacity-hidden: 0;
  --vpui-opacity-visible-soft: 0.75;
}