/**
 * Veridion Security Landing Page - Custom Styles
 *
 * This stylesheet contains custom styles for the Veridion Security landing page
 * including gradients, animations, and responsive design overrides.
 *
 * @author Veridion Security Inc.
 * @version 1.0.0
 */

/* ============================================
   GLOBAL STYLES
   ============================================ */

/**
 * Enable smooth scrolling for anchor links throughout the page
 */
html {
  scroll-behavior: smooth;
}

/* ============================================
   GRADIENT BACKGROUNDS
   ============================================ */

/**
 * Pastel gradient used in hero, services, and about sections
 * Creates a soft pink-to-cream gradient
 */
.bg-gradient-pastel {
  background: linear-gradient(90deg, #F6D5F7, #FBE9D7);
}

/**
 * Purple gradient used for CTA buttons and interactive elements
 * Creates a vibrant purple gradient
 */
.bg-gradient-purple {
  background: linear-gradient(90deg, #640cfc, #A78BFA);
}

/* ============================================
   HERO SECTION - ANIMATED HEADING
   ============================================ */

/**
 * Hero heading with gradient text effect and 3D shadow
 * Note: This class is not currently used but kept for potential future use
 */
.hero-heading {
    position: relative;
    font-family: 'Kalam', cursive;
    font-variation-settings: 'RSEC' 60.00;
    animation: draw 4s forwards;
    background: linear-gradient(to bottom, #a67d83 0%, #616cd3 20%, #84fafc 43%, #fdfbf3 60%, #f9f697 82%, #f4d186 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/**
 * Creates a 3D shadow effect behind the hero heading
 * Uses multiple text-shadow layers to simulate depth
 */
.hero-heading::before {
    content: attr(data-text);
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
    text-shadow: -1px -1px 0 #1d2b38, 1px -1px 0 #1d2b38, -1px 1px 0 #1d2b38,
        1px 1px 0 #1d2b38, 1px 0px 0px #1d2b38, 0px 1px 0px #1d2b38, 2px 1px 0px #1d2b38,
        1px 2px 0px #1d2b38, 3px 2px 0px #1d2b38, 2px 3px 0px #1d2b38, 4px 3px 0px #1d2b38,
        3px 4px 0px #1d2b38, 5px 4px 0px #1d2b38, 3px 5px 0px #1d2b38,
        6px 5px 0px #1d2b38, -1px 2px 0 #1d2b38, 0 3px 0 #1d2b38, 1px 4px 0 #1d2b38,
        2px 5px 0px #1d2b38, 2px -1px 0 #1d2b38, 3px 0 0 #1d2b38, 4px 1px 0 #1d2b38,
        5px 2px 0px #1d2b38, 6px 3px 0 #1d2b38, 7px 4px 0 #1d2b38, 7px 5px 0 #1d2b38;
}

/**
 * Creates a secondary gradient layer behind the hero heading
 * Adds additional depth with offset positioning
 */
.hero-heading::after {
    content: attr(data-text);
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(10px, 5px);
    z-index: -2;
    background: linear-gradient(to bottom, #a67d83 0%, #616cd3 20%, #84fafc 43%, #fdfbf3 60%, #f9f697 82%, #f4d186 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: draw 4.1s forwards;
}

/**
 * Animation for drawing effect on hero heading
 * Uses variable font 'DRAW' axis to animate text appearance
 */
@keyframes draw {
    0% { font-variation-settings: 'DRAW' 1000; }
    100% { font-variation-settings: 'DRAW' 0; }
}

/* ============================================
   RESPONSIVE STYLES - MOBILE OPTIMIZATION
   ============================================ */

/**
 * Hero Section Mobile Styles
 * Centers all text and buttons on tablet and mobile devices (< 1024px)
 */
@media (max-width: 1023px) {
  /* Center hero heading on mobile */
  #hero h1 {
    text-align: center !important;
  }

  /* Center hero description text on mobile */
  #hero .max-w-xl p {
    text-align: center !important;
  }

  /* Center CTA buttons on mobile */
  #hero .mt-10.flex.items-center.gap-x-6 {
    justify-content: center !important;
  }
}

/**
 * Client Logos Mobile Styles
 * Optimizes logo display for small screens (< 640px)
 */
@media (max-width: 639px) {
  /* Increase container height for better logo visibility */
  #clients .grid > div {
    height: 120px !important;
    padding: 1.5rem !important;
  }

  /* Optimize logo sizing for mobile */
  #clients .grid img {
    max-height: 60px !important;
    width: auto !important;
    object-fit: contain;
  }

  /**
   * Special handling for 5th logo (Object Security)
   * Spans 2 columns and centers on mobile to maintain visual balance
   */
  #clients .grid > div:nth-child(5) {
    grid-column: span 2 !important;
    display: flex !important;
    justify-content: center !important;
  }

  /* Constrain 5th logo width for better proportion */
  #clients .grid > div:nth-child(5) > div {
    max-width: 50% !important;
  }
}