/* This is designed as a mobile first layout. */
/* Last Updated: 2/18/2025 3:07 PM */

/* CSS Variables */
:root {
  /* Core Brand Colors in RGB - computed by JS */
  --color-brand-primary-rgb: 79, 119, 48;
  --color-brand-secondary-rgb: 98, 121, 91;
  --color-brand-accent-rgb: 0, 128, 128;
  
  /* Color System - derived from RGB values */
  --color-primary: rgb(var(--color-brand-primary-rgb));
  --color-secondary: rgb(var(--color-brand-secondary-rgb));
  --color-accent: rgb(var(--color-brand-accent-rgb));
  --color-text: rgb(51, 51, 51);
  --color-background: rgb(255, 255, 255);
  
  /* UI Element Colors - derived from RGB values */
  --color-surface: rgba(255, 255, 255, 0.6);
  --color-surface-accent: rgba(var(--color-brand-primary-rgb), 0.05);
  --color-border: rgba(255, 255, 255, 0.2);
  --color-shadow: rgba(0, 0, 0, 0.1);
  
  /* Gradient System */
  --color-gradient-1: rgba(var(--color-brand-primary-rgb), 0.4);
  --color-gradient-2: rgba(var(--color-brand-secondary-rgb), 0.35);
  --color-gradient-3: rgba(var(--color-brand-primary-rgb), 0.25);
  --color-gradient-4: rgba(var(--color-brand-accent-rgb), 0.15);
  
  /* Wave Colors - without opacity */
  --wave-1: rgb(var(--color-brand-primary-rgb));
  --wave-2: rgb(var(--color-brand-secondary-rgb));
  --wave-3: rgb(var(--color-brand-accent-rgb));
  --wave-4: rgb(var(--color-brand-primary-rgb));
  
  /* Top Wave Colors - variations of accent color */
  --wave-top-1: rgba(var(--color-brand-accent-rgb), 1);      /* Full accent */
  --wave-top-2: rgba(var(--color-brand-accent-rgb), 0.8);    /* 80% accent */
  --wave-top-3: rgba(var(--color-brand-accent-rgb), 0.6);    /* 60% accent */
  --wave-top-4: rgba(var(--color-brand-accent-rgb), 0.4);    /* 40% accent */
  
  /* Optional Background Image */
  --background-image: url('https://res.cloudinary.com/dbtcg826q/image/upload/T9/background-images/waves-bg.webp');

  /* Spacing */
  --space-sm: 0.5rem;    /* 8px */
  --space-md: 1rem;      /* 16px */
  --space-lg: 2rem;      /* 32px */
  
  /* Font Sizes */
  --font-xs: 0.625rem;   /* 10px */
  --font-sm: 0.875rem;   /* 14px */
  --font-md: 1rem;       /* 16px */
  --font-lg: 1.25rem;    /* 20px */
  
  /* Container Width */
  --container-width: 1200px;
  
  /* Default values that will be overwritten by JS */
  --delay-1: -3s;
  --delay-2: -2s;
  --delay-3: -1s;
  --delay-4: -4s;
  
  /* Default opacity values that will be randomized by JS */
  --opacity-1: 0.2;
  --opacity-2: 0.2;
  --opacity-3: 0.2;
  --opacity-4: 0.2;
  
  --header-height: 60px;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.5;
  color: var(--color-text);
}

/* Container */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
  position: relative;
  z-index: 1;
}

/* Header */
.header {
  background-color: white;
  padding: var(--space-md) 0;
  box-shadow: 0 2px 4px var(--color-shadow);
  height: var(--header-height);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
  display: flex;
  align-items: center;
}

.header__container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.header__left {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  height: 100%;
}

.header__logo {
  font-size: var(--font-md);
  font-weight: 500;
  text-decoration: none;
  color: var(--color-text);
}

.header__tagline {
  display: block;
}

/* Navigation */
.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 100%;
}

.nav__button {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  color: var(--color-text);
}

.nav__list {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  align-items: center;
}

.nav__item {
  display: flex;
  align-items: center;
  height: 100%;
}

.nav__link {
  text-decoration: none;
  color: var(--color-text);
  position: relative;
  cursor: pointer;
}

.nav__ola-seal {
  width: 56px;
  height: 56px;
}

/* Main Content */
.main {
  min-height: 500px;
  padding: var(--space-lg) 0;
  position: relative;
  overflow: hidden;
  background: rgba(var(--color-brand-primary-rgb), 0.05);
  background-image: var(--background-image); /* Add background image */
  background-size: cover; /* Ensure the image covers the area */
  background-position: center; /* Center the image */
  z-index: 1;
  padding-top: calc(var(--header-height) + var(--space-lg));
}

/* Main Content Grid */
.content-grid {
  display: grid;
  gap: var(--space-lg);
  padding: 0;
}

/* Form Container */
.content-grid__form {
  background: var(--color-surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  box-shadow: 
    0 4px 24px -1px var(--color-shadow),
    0 0 1px rgba(0, 0, 0, 0.1);
  padding: var(--space-lg);
  border-radius: 8px;
  min-height: 400px;
}

/* Steps Container */
.content-grid__steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  background: var(--color-surface);
  backdrop-filter: blur(12px);
  border: 1px solid var(--color-border);
  box-shadow: 
    0 4px 24px -1px var(--color-shadow),
    0 0 1px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: var(--space-lg);
}

.steps-header {
  text-align: center;
}

.steps-header__title {
  font-size: var(--font-lg);
  margin-bottom: var(--space-sm);
  color: var(--color-primary);
  text-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
}

.steps-header__subtitle {
  font-size: var(--font-sm);
  color: var(--color-text);
  opacity: 0.8;
}

/* Steps List */
.steps-list {
  display: grid;
  gap: var(--space-md);
}

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

/* Step Item */
.step-item {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  opacity: 0;
  animation: fadeInUp 0.6s ease forwards;
  padding: var(--space-md);
  border-radius: 12px;
}

.step-item:nth-child(1) {
  animation-delay: 0.2s;
}

.step-item:nth-child(2) {
  animation-delay: 0.4s;
}

.step-item:nth-child(3) {
  animation-delay: 0.6s;
}

/* Hover effects */
@media (hover: hover) {
  .step-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .step-item:hover {
    transform: translateY(-5px);
    background: rgba(var(--color-brand-primary-rgb), 0.15);
    box-shadow: 
      0 8px 32px -1px rgba(0, 0, 0, 0.05),
      0 0 1px rgba(0, 0, 0, 0.1);
  }

  .step-item:hover .step-item__icon {
    transform: scale(1.05);
  }

  .nav__link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .start-button:hover {
    background: rgba(var(--color-brand-primary-rgb), 0.9);
  }
}

/* Step Item Icon & Content */
.step-item__icon {
  flex-shrink: 0;
  width: 55px;
  height: 55px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: transform 0.3s ease;
}

.step-item__icon-svg {
  width: 38px;
  height: 38px;
  fill: currentColor;
}

.step-item__content {
  flex-grow: 1;
}

.step-item__title {
  font-size: var(--font-md);
  margin-bottom: var(--space-sm);
  color: var(--color-primary);
}

.step-item__text {
  font-size: var(--font-sm);
  color: var(--color-text);
  opacity: 0.8;
}

/* Start Button */
.start-button {
  display: block;
  background: var(--color-primary);
  color: white;
  border: none;
  padding: var(--space-md) var(--space-lg);
  border-radius: 4px;
  font-size: var(--font-md);
  cursor: pointer;
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

/* Animation Styles */
/* Animation Base */
.background-animation {
  position: absolute;
  left: 0;
  right: 0;
  height: 200px;
  overflow: hidden;
  z-index: 0;
}

.background-animation--top {
  top: 0;
  transform: rotate(180deg);
}

.background-animation--bottom {
  bottom: 0;
}

/* Hide all animation types by default */
.animation-waves,
.animation-particles,
.animation-gradient,
.animation-geometric,
.animation-grid {
  display: none;
  opacity: var(--animation-opacity, 0.15);
}

/* Show active animation based on style */
.animation-style--waves .animation-waves,
.animation-style--particles .animation-particles,
.animation-style--gradient .animation-gradient,
.animation-style--geometric .animation-geometric,
.animation-style--grid .animation-grid {
  display: block;
}

/* Animation Keyframes */
@keyframes wave {
  2% { transform: translateX(1); }
  25% { transform: translateX(-25%); }
  50% { transform: translateX(-50%); }
  75% { transform: translateX(-25%); }
  100% { transform: translateX(1); }
}

@keyframes float {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(100px, 50px); }
}

@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes gridPulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

/* Waves */
.animation-waves {
  position: relative;
  height: 100%;
  width: 100%;
}

.animation-waves .wave {
  background: rgb(var(--color-brand-accent-rgb));
  filter: brightness(1);
  border-radius: 1000% 1000% 0 0;
  position: absolute;
  width: 200%;
  height: 12em;
  animation: wave var(--wave-duration) var(--delay-1) linear infinite;
  transform: translate3d(0, 0, 0);
  opacity: var(--opacity-1);
  bottom: 0;
  left: 0;
}

.animation-waves .wave:nth-of-type(2) {
  background: rgb(var(--color-brand-accent-rgb));
  filter: brightness(0.9) saturate(1.1);
  bottom: -1.25em;
  animation: wave var(--wave-duration) var(--delay-2) linear reverse infinite;
  opacity: var(--opacity-2);
}

.animation-waves .wave:nth-of-type(3) {
  background: rgb(var(--color-brand-accent-rgb));
  filter: brightness(0.8) saturate(1.2);
  bottom: -2.5em;
  animation: wave var(--wave-duration) var(--delay-3) reverse infinite;
  opacity: var(--opacity-3);
}

.animation-waves .wave:nth-of-type(4) {
  background: rgb(var(--color-brand-accent-rgb));
  filter: brightness(0.7) saturate(1.3);
  bottom: -3.75em;
  animation: wave var(--wave-duration) var(--delay-4) linear infinite;
  opacity: var(--opacity-4);
}

/* Wave color variations */
.background-animation--top .animation-waves .wave {
  background: rgb(var(--color-brand-accent-rgb));
}

.background-animation--bottom .animation-waves .wave {
  background: rgb(var(--color-brand-primary-rgb));
}

.background-animation--bottom .animation-waves .wave:nth-of-type(3),
.background-animation--bottom .animation-waves .wave:nth-of-type(4) {
  background: rgb(var(--color-brand-secondary-rgb));
}

/* Particles */
.animation-particles .particle {
  position: absolute;
  background: rgb(var(--color-brand-primary-rgb));
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: float 20s infinite;
}

/* Particle color variations */
.animation-particles .particle:nth-child(3n) {
  background: rgb(var(--color-brand-secondary-rgb));
}

.animation-particles .particle:nth-child(3n+1) {
  background: rgb(var(--color-brand-accent-rgb));
}

/* Gradient */
.animation-gradient {
  height: 100%;
  width: 100%;
  background: linear-gradient(
    var(--gradient-angle, 45deg),
    rgba(var(--color-brand-primary-rgb), 1),
    rgba(var(--color-brand-secondary-rgb), 1),
    rgba(var(--color-brand-accent-rgb), 1)
  );
  background-size: 400% 400%;
  animation: gradientShift var(--gradient-duration, 25s) ease infinite;
}

/* Geometric shapes container */
.animation-geometric {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Geometric shapes */
.animation-geometric .shape {
  position: absolute;
  background: rgba(var(--color-brand-primary-rgb), 1);
  animation: rotate 20s linear infinite;
  transform-origin: center center;
}

.animation-geometric .shape:nth-child(1) {
  width: 100px;
  height: 100px;
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

.animation-geometric .shape:nth-child(2) {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(var(--color-brand-secondary-rgb), 1);
}

.animation-geometric .shape:nth-child(3) {
  width: 60px;
  height: 60px;
  border-radius: 0;
  transform: rotate(45deg);
  background: rgba(var(--color-brand-accent-rgb), 1);
}

/* Grid */
.animation-grid {
  position: relative;
  height: 100%;
}

.grid-line {
  position: absolute;
}

/* Grid line animations */
.grid-line.horizontal,
.grid-line.vertical {
  animation: gridPulse 4s ease-in-out infinite;
}

/* Grid color variations */
.grid-line.horizontal {
  width: 100%;
}

.grid-line.vertical {
  height: 100%;
}

/* Home Content Section */
.home-content {
  padding: var(--space-lg) 0;
  background-color: var(--color-surface);
}

.home-content__grid {
  display: grid;
  gap: var(--space-lg);
}

.home-content__title {
  color: var(--color-primary);
  font-size: var(--font-lg);
  margin-bottom: var(--space-md);
}

.home-content__column p {
  margin-bottom: var(--space-md);
}

.home-content__column p:last-of-type {
  margin-bottom: 0;
}

.home-content__ola-logo {
  display: block;
  margin-top: var(--space-lg);
}

/* Footer */
.footer {
  background-color: var(--color-surface-accent);
  padding: var(--space-lg) 0;
  font-size: var(--font-sm);
}

.footer p {
  margin-bottom: 5px;
}

.footer-nav {
  margin: var(--space-md) 0;
  text-align: center;
}

.footer-nav__list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
}

.footer-nav__link {
  color: var(--color-text);
  text-decoration: underline;
  padding: 0 var(--space-sm);
  cursor: pointer;
}

.footer-nav__list li {
  position: relative;
}

.footer-nav__list li:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  height: 1em;
  width: 1px;
  background-color: var(--color-text);
}

.copyright {
  text-align: center;
  margin-top: var(--space-md);
}

.footer-nav__link:hover {
  text-decoration: underline;
}

/* Mobile (up to 480px) */
@media (max-width: 480px) {
  .header__tagline {
    display: none;
  }

  .nav__ola-seal {
    width: 48px;
    height: 48px;
  }

  .content-grid__steps-container {
    padding: var(--space-md);
  }

  .home-content__grid {
    padding: var(--space-md);
  }

  .content-grid__form {
    padding: 0;
    background: none;
    backdrop-filter: none;
    border: none;
    box-shadow: none;
  }

  .start-button {
    display: block;
    margin: 0 auto;
  }

  .footer {
    padding: var(--space-sm);
  }
}

/* Desktop (1200px and up) */
@media (min-width: 1200px) {
  /* Header */
  .header__left {
    gap: var(--space-lg);
  }
  
  .header__logo {
    font-size: var(--font-lg);
  }
  
  /* Navigation */
  .nav {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
  }
  
  .nav__list {
    display: flex;
    gap: var(--space-md);
    list-style: none;
  }
  
  .nav__ola-seal {
    display: block; 
    width: 56px;
    height: 56px;
  }
  
  .nav__button {
    display: none;
  }

  /* Content Grid */
  .content-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }

  .content-grid__form {
    order: 2;
  }

  .content-grid__steps {
    order: 1;
  }

  .steps-header {
    text-align: left;
  }

  .steps-header__title {
    font-size: calc(var(--font-lg) * 1.5);
  }

  .start-button {
    display: none;
  }

  /* Home Content */
  .home-content__grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}