/* ═══════════════════════════════════════════════════
   ENGLISH CRAFT ACADEMY — Custom Styles
   Design Direction: Clean Premium / Bespoke
   ═══════════════════════════════════════════════════ */

/* ── Base ─────────────────────────────────────── */
::selection {
    background-color: #d4a03a;
    color: #0f1530;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden;
}

/* ── Navbar (always solid) ────────────────────── */

/* ── Scroll Reveal Animations ─────────────────── */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-on-scroll.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays for children */
.reveal-on-scroll[style*="animation-delay: 0.1s"] {
    transition-delay: 0.1s;
}
.reveal-on-scroll[style*="animation-delay: 0.15s"] {
    transition-delay: 0.15s;
}
.reveal-on-scroll[style*="animation-delay: 0.2s"] {
    transition-delay: 0.2s;
}
.reveal-on-scroll[style*="animation-delay: 0.3s"] {
    transition-delay: 0.3s;
}
.reveal-on-scroll[style*="animation-delay: 0.45s"] {
    transition-delay: 0.45s;
}

/* ── Testimonials Carousel ────────────────────── */
#testimonials-carousel {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

#testimonials-carousel::-webkit-scrollbar {
    display: none;
}

.testimonial-card {
    scroll-snap-align: start;
}

/* ── Comparison Table Mobile ──────────────────── */
@media (max-width: 640px) {
    #comparativo .grid-cols-3 {
        grid-template-columns: 1fr;
    }
    
    #comparativo .grid-cols-3 > div:nth-child(1) {
        font-weight: 600;
        background: rgba(15, 21, 48, 0.02);
        border-bottom: 1px solid rgba(15, 21, 48, 0.05);
    }
}

/* ── CTA Button Pulse Effect ──────────────────── */
@keyframes ctaPulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(212, 160, 58, 0.4);
    }
    50% {
        box-shadow: 0 0 0 12px rgba(212, 160, 58, 0);
    }
}

#hero-cta-primary,
#final-cta-whatsapp {
    animation: ctaPulse 3s ease-in-out infinite;
}

#hero-cta-primary:hover,
#final-cta-whatsapp:hover {
    animation: none;
}

/* ── Gold Accent Line ─────────────────────────── */
.gold-accent-line {
    position: relative;
}

.gold-accent-line::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 60px;
    height: 2px;
    background: linear-gradient(90deg, #d4a03a, transparent);
}

/* ── Stat Number Counter Animation ────────────── */
.stat-number {
    font-variant-numeric: tabular-nums;
}

/* ── Smooth Image Loading ─────────────────────── */
img {
    transition: opacity 0.5s ease;
}

img[loading="lazy"] {
    opacity: 0;
}

img[loading="lazy"].loaded {
    opacity: 1;
}

/* ── Focus Styles for Accessibility ───────────── */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #d4a03a;
    outline-offset: 3px;
    border-radius: 4px;
}

/* ── Custom Scrollbar (WebKit) ────────────────── */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #fdf9f0;
}

::-webkit-scrollbar-thumb {
    background: #b3b9db;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #8d96c9;
}

/* ── Hero Section Responsive Adjustments ──────── */
@media (max-width: 640px) {
    #hero {
        min-height: 100svh;
    }
}

/* ── Floating Badge Animation ─────────────────── */
@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

#arthur .absolute.-bottom-6 {
    animation: floatBadge 4s ease-in-out infinite;
}

/* ── Premium Divider ──────────────────────────── */
.premium-divider {
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(212, 160, 58, 0.3),
        rgba(212, 160, 58, 0.6),
        rgba(212, 160, 58, 0.3),
        transparent
    );
}

/* ── Loading Animation ────────────────────────── */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.shimmer {
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(212, 160, 58, 0.08) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: shimmer 3s ease-in-out infinite;
}