/*
 * app.css — Custom styles that complement Tailwind
 *
 * This file handles things Tailwind can't easily do:
 *   - Scroll reveal animation base states
 *   - FAQ accordion icon transition
 *   - CSS columns masonry layout (social proof wall)
 *   - Smooth scrolling
 *   - Any keyframe animations
 *
 * DO NOT put layout or color styles here — use Tailwind classes in HTML.
 */


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

html {
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: border-box;
}


/* ============================================================
   SCROLL REVEAL ANIMATIONS
   Elements with [data-reveal] start invisible and slide up.
   JS in app.js adds .revealed when they enter the viewport.
   ============================================================ */

[data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}

[data-reveal].revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Variant: fade only (no upward movement) */
[data-reveal="fade"] {
    transform: none;
}

/* Variant: slide from left */
[data-reveal="left"] {
    transform: translateX(-30px);
}
[data-reveal="left"].revealed {
    transform: translateX(0);
}

/* Variant: slide from right */
[data-reveal="right"] {
    transform: translateX(30px);
}
[data-reveal="right"].revealed {
    transform: translateX(0);
}


/* ============================================================
   FAQ ACCORDION
   The .faq-icon chevron rotates when .faq-open is on the item.
   ============================================================ */

.faq-icon {
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.faq-content {
    transition: opacity 0.2s ease;
}


/* ============================================================
   GRADIENT TEXT UTILITY
   Usage: <span class="gradient-text">text</span>
   ============================================================ */

.gradient-text {
    background: linear-gradient(to right, #00A0FF, #0066CC);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-orange {
    background: linear-gradient(to right, #FF4D00, #FF6B00);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ============================================================
   SOCIAL PROOF WALL — masonry columns
   CSS columns creates the masonry layout natively.
   The Tailwind `columns-*` classes handle this on modern browsers,
   but this provides the gap behaviour cross-browser.
   ============================================================ */

.masonry-grid {
    column-count: 1;
    column-gap: 1rem;
}

@media (min-width: 768px) {
    .masonry-grid { column-count: 2; }
}
@media (min-width: 1024px) {
    .masonry-grid { column-count: 3; }
}
@media (min-width: 1280px) {
    .masonry-grid { column-count: 4; }
}

.masonry-grid > * {
    break-inside: avoid;
    margin-bottom: 1rem;
}


/* ============================================================
   HEADER SCROLL STATE
   .scrolled class added by app.js when window.scrollY > 20
   NOTE: Tailwind arbitrary value classes are also toggled
   in JS. This rule adds the blur effect as a CSS fallback.
   ============================================================ */

#site-header.scrolled {
    background-color: rgba(10, 22, 40, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}


/* ============================================================
   IMAGE MARQUEE (used on Home page)
   A horizontally scrolling strip of images, CSS-only.
   ============================================================ */

.marquee-track {
    display: flex;
    gap: 2rem;
    animation: marquee-scroll 30s linear infinite;
    width: max-content;
}

.marquee-track:hover {
    animation-play-state: paused;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}


/* ============================================================
   ANIMATED CTA GLOW PULSE
   Matches the React component's animate-pulse on the CTA block.
   ============================================================ */

@keyframes glow-pulse {
    0%, 100% { opacity: 0.15; }
    50%       { opacity: 0.3;  }
}

.cta-glow {
    animation: glow-pulse 3s ease-in-out infinite;
}


/* ============================================================
   UTILITY: aspect-video (fallback for older browsers)
   ============================================================ */

.aspect-video {
    position: relative;
    padding-bottom: 56.25%;
}

.aspect-video > iframe,
.aspect-video > video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}