/*
 * Landing-page-specific styles (SITE-01), sourced from vigie_pdf_ref.html.
 * Only values that don't belong in the shared app-wide theme
 * (app/assets/tailwind/application.css / daisyui-theme.js) live here --
 * everything else (the reference's locked half-pixel type sizes, 26px card
 * padding, 28px gutters, ...) is expressed directly as Tailwind arbitrary-
 * value utility classes in the view partials.
 *
 * No @apply (tailwind-daisyui.md: v4 idiom is plain CSS + theme variables).
 * Auto-included in the compiled application.css bundle via Sprockets'
 * `require_tree .` in app/assets/stylesheets/application.css.
 */

@keyframes vg-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

@keyframes vg-scan {
  0%   { transform: translateY(-8%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateY(1150%); opacity: 0; }
}

@keyframes vg-pulse {
  0%, 100% { opacity: .3; }
  50%      { opacity: 1; }
}

.vg-hero-demo {
  animation: vg-float 7s ease-in-out infinite;
}

.vg-scan-line {
  animation: vg-scan 2.3s ease-in-out infinite;
}

@layer components {
  /* Locked primary/secondary button padding (UI-SPEC Spacing Scale
     exceptions: 14px 24px / 14px 22px) -- diverges from daisyUI's default
     .btn sizing, so it's defined here rather than reused from daisyUI. */
  .vg-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--color-primary);
    color: #fff;
    padding: 14px 24px;
    font-size: 15px;
    font-weight: 600;
    box-shadow: 0 8px 24px rgba(37, 71, 224, .32);
    transition: background .2s, transform .2s;
  }
  .vg-btn-primary:hover {
    background: #1b37b5;
    transform: translateY(-2px);
  }

  .vg-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: transparent;
    color: var(--color-base-content);
    padding: 14px 22px;
    font-size: 15px;
    font-weight: 600;
    border: 1px solid rgba(16, 20, 28, .18);
    transition: background .2s, border-color .2s;
  }
  .vg-btn-secondary:hover {
    background: rgba(16, 20, 28, .05);
    border-color: rgba(16, 20, 28, .32);
  }

  .vg-card {
    background: #fff;
    border: 1px solid rgba(16, 20, 28, .08);
    border-radius: 16px;
    padding: 26px;
    transition: transform .25s, box-shadow .25s, border-color .25s;
  }
  .vg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(16, 20, 28, .09);
    border-color: rgba(16, 20, 28, .14);
  }

  .vg-eyebrow {
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-primary);
  }
}
/*
 * 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.
 *


 */