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

/*
 * Global Typography Baseline
 * Ensures consistent font rendering across all pages
 */
@layer base {
  html {
    font-family: 'Ruddy', 'Poppins', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  body {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
    font-weight: 400;
  }
  
  h1, h2, h3, h4, h5, h6 {
    font-family: 'Ruddy', system-ui, -apple-system, sans-serif;
    font-weight: 700;
  }
}

/*
 * Custom font utilities to ensure proper font-weight mapping
 * This ensures font-medium (500) uses Poppins-Medium.ttf correctly
 */
@layer utilities {
  .font-poppins {
    font-family: 'Poppins', sans-serif;
  }
  
  .font-ruddy {
    font-family: 'Ruddy', sans-serif;
  }
  
  /* Map font-inter to Poppins for backward compatibility */
  .font-inter {
    font-family: 'Poppins', sans-serif;
  }
  
  /* Ensure font-medium uses weight 500 (Poppins-Medium.ttf) */
  .font-medium {
    font-weight: 500;
  }
  
  /* Ensure font-normal uses weight 400 (Poppins-Regular.ttf) */
  .font-normal {
    font-weight: 400;
  }
  
  /* Ensure font-semibold uses weight 600 */
  .font-semibold {
    font-weight: 600;
  }
  
  /* Ensure font-bold uses weight 700 */
  .font-bold {
    font-weight: 700;
  }

  /*
   * Video / combo slider: guaranteed so desktop video shows without Tailwind CDN.
   * Compiled build can omit aspect-video; this ensures the about-section video has height.
   */
  .aspect-video {
    aspect-ratio: 16 / 9;
  }
}

/*
 * Big Brand Motion - Smooth transitions and micro-interactions
 * Uses GPU-friendly transforms (opacity, transform) instead of layout properties
 * Respects prefers-reduced-motion for accessibility
 */
@layer components {
  /* Button hover/active states - subtle scale + shadow */
  .btn-motion {
    @apply transition-all duration-200 ease-out;
    transform: translateZ(0); /* GPU acceleration */
  }
  
  .btn-motion:hover:not(:disabled) {
    transform: translateZ(0) scale(1.02);
  }
  
  .btn-motion:active:not(:disabled) {
    transform: translateZ(0) scale(0.98);
  }
  
  /* Card hover elevation (desktop only) */
  .card-motion {
    @apply transition-all duration-300 ease-out;
    transform: translateZ(0);
  }
  
  @media (hover: hover) and (pointer: fine) {
    .card-motion:hover {
      transform: translateZ(0) translateY(-2px);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    }
  }
  
  /* Modal/Drawer/Bottom sheet smooth open/close */
  .modal-enter {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
  }
  
  .modal-enter-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .modal-exit {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  
  .modal-exit-active {
    opacity: 0;
    transform: translateY(20px) scale(0.95);
    transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Bottom sheet specific (slides up from bottom) */
  .bottom-sheet-enter {
    opacity: 0;
    transform: translateY(100%);
  }
  
  .bottom-sheet-enter-active {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease-out, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .bottom-sheet-exit {
    opacity: 1;
    transform: translateY(0);
  }
  
  .bottom-sheet-exit-active {
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.2s ease-in, transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  /* Fade in for page/section reveals */
  .fade-in {
    opacity: 0;
    animation: fadeIn 0.6s ease-out forwards;
  }
  
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  
  /* Respect reduced motion preference */
  @media (prefers-reduced-motion: reduce) {
    .btn-motion,
    .card-motion,
    .modal-enter-active,
    .modal-exit-active,
    .bottom-sheet-enter-active,
    .bottom-sheet-exit-active,
    .fade-in {
      transition: none !important;
      animation: none !important;
      transform: none !important;
    }
    
    .btn-motion:hover:not(:disabled),
    .btn-motion:active:not(:disabled) {
      transform: none;
    }
    
    @media (hover: hover) and (pointer: fine) {
      .card-motion:hover {
        transform: none;
        box-shadow: none;
      }
    }
  }
}

/*
@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}
*/
@font-face {
    font-family: 'Poppins';
    src: url(/assets/Poppins/Poppins-Regular-4132d2d2b9443d42422ebb2769b3113c157e0cf08c91cfe555a6da5ac0a9c762.ttf) format('truetype');
    font-weight: normal;
    font-style: normal;
  }

  @font-face {
    font-family: 'Poppins';
    src: url(/assets/Poppins/Poppins-Medium-a0b175e6a264afe1ce1dd92dfed7dce5dc11456840b0485ba483b2af54814baf.ttf) format('truetype');
    font-weight: 500;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Poppins';
    src: url(/assets/Poppins/Poppins-Bold-542ca15de37ab3bcf41f3ee5fdb9a8a4ba3346a27998196101a9a01a0f4ce0d8.ttf) format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  
  @font-face {
    font-family: 'Ruddy';
    src: url(/assets/Ruddy/Ruddy-Bold-0adf6362811fe3b85ac42afd3d464d2addaeb73273a185d27bba1997822ba6d5.ttf) format('truetype');
    font-weight: bold;
    font-style: normal;
  }
  
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */