/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom color scheme from peripheral-landing */
@layer base {
  :root {
    /* Main brand colors */
    --peripheral-navy: #2F3646;
    --peripheral-cream: #FEF7EC;
    --peripheral-warm: #FEF7EC;
  }

  body {
    @apply font-light;
  }
}

@layer utilities {
  /* Background utilities */
  .bg-peripheral-navy {
    background-color: var(--peripheral-navy);
  }

  .bg-peripheral-cream {
    background-color: var(--peripheral-cream);
  }

  .bg-peripheral-warm {
    background-color: var(--peripheral-warm);
  }

  /* Text color utilities */
  .text-peripheral-navy {
    color: var(--peripheral-navy);
  }

  .text-peripheral-cream {
    color: var(--peripheral-cream);
  }
}

/* Custom animations for homepage */
@layer utilities {
  @keyframes bounce-arrow {
    0%, 100% {
      transform: translateY(0);
      animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
    }
    50% {
      transform: translateY(-25%);
      animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
    }
  }

  .bounce-arrow {
    animation: bounce-arrow 2s infinite;
  }

  @keyframes cursor-blink {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }

  .cursor-blink {
    animation: cursor-blink 1s infinite;
  }

  /* Reveal up animation */
  .reveal-up {
    transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1), opacity 600ms ease;
  }

  /* Parallax image class */
  .parallax-image {
    will-change: transform;
  }
}

/* Ensure sections are fully opaque so hero doesn't show through */
@layer base {
  section {
    opacity: 1;
  }
}

/* Smooth scrolling for anchor links */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  /* Optimize rendering performance */
  .parallax-image,
  .reveal-up {
    will-change: transform;
  }
}

/* Intranet Navbar Styling */
@layer components {
  .intranet-nav {
    @apply bg-peripheral-navy shadow-lg;
  }
}

/* Accessibility: Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .bounce-arrow,
  .cursor-blink,
  .reveal-up,
  .parallax-image {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  /* Disable all our custom animations */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}