/* ========================================
   SINHOR GREEN - Improvements & New Components
   Frontend Aesthetics: Bebas Neue + Rajdhani
   ======================================== */

/* ========== TYPOGRAPHY UPGRADE ========== */
:root {
    --font-display: 'Bebas Neue', sans-serif;
    --font-heading:  'Rajdhani', sans-serif;
    /* Montserrat stays for body via --font-body in styles.css */
}

/* ---- Hero headlines → Bebas Neue ---- */
.hero__headline-main {
    font-family: var(--font-display) !important;
    font-size: clamp(3.5rem, 9vw, 7rem) !important;
    font-weight: 400 !important; /* Bebas is always bold by design */
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
}

.hero__headline-highlight {
    font-family: var(--font-display) !important;
    font-size: clamp(4rem, 11vw, 9rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    line-height: 0.95 !important;
}

/* ---- Section titles → Bebas Neue ---- */
.section__title,
.delay-info__title,
.final-cta__title,
.about__title {
    font-family: var(--font-display) !important;
    font-weight: 400 !important;
    letter-spacing: 0.05em !important;
}

/* ---- Card titles → Rajdhani ---- */
.arsenal__card-title,
.incluso__text h4,
.delay-info__item-text strong,
.oferta__badge,
.faq__question {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    letter-spacing: 0.04em !important;
}

/* ---- Badge, ticker, countdown → Rajdhani ---- */
.hero__badge,
.ticker__content span,
.hero__stat-label,
.oferta__countdown-label,
.countdown__unit span:last-child {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
}

/* ---- Hero stat numbers → Bebas Neue ---- */
.hero__stat-number {
    font-family: var(--font-display) !important;
    font-size: clamp(2.2rem, 5vw, 3.2rem) !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
}

/* ---- Countdown digits → Bebas Neue ---- */
.countdown__unit span:first-child {
    font-family: var(--font-display) !important;
    font-size: 2.4rem !important;
    font-weight: 400 !important;
    letter-spacing: 0.03em !important;
}

/* ---- CTA buttons → Rajdhani for crispness ---- */
.btn {
    font-family: var(--font-heading) !important;
    font-size: 1.15rem !important;
    letter-spacing: 0.12em !important;
}

/* ========== HERO STAGGER ENTRANCE ANIMATIONS ========== */
/* Every direct child of hero__content fades + rises in sequence */
.hero__content > * {
    opacity: 0;
    transform: translateY(24px);
    animation: heroReveal 0.75s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero__badge       { animation-delay: 0.05s; }
.hero__logo        { animation-delay: 0.20s; }
.hero__pretitle    { animation-delay: 0.35s; }
.hero__headline    { animation-delay: 0.48s; animation-duration: 0.85s; }
.hero__subheadline { animation-delay: 0.62s; }
.hero__features    { animation-delay: 0.74s; }
.hero__cta-wrapper { animation-delay: 0.88s; }
.hero__stats       { animation-delay: 1.05s; animation-duration: 0.9s; }

@keyframes heroReveal {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== BUTTON SHINE SWEEP ========== */
.btn--primary::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 55%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.32),
        transparent
    );
    transform: skewX(-18deg);
    pointer-events: none;
}

.btn--primary:hover::after {
    left: 160%;
    transition: left 0.55s ease;
}

/* ========== HERO GRAIN TEXTURE ========== */
/* Film-grain overlay gives depth and premium feel */
.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.72' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)' opacity='0.07'/%3E%3C/svg%3E");
    background-repeat: repeat;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
    opacity: 0.55;
}

/* ========== ENHANCED DIVIDER PULSE ========== */
.section-divider {
    animation: dividerPulse 4s ease-in-out infinite;
}

@keyframes dividerPulse {
    0%, 100% { box-shadow: 0 0 18px var(--color-accent-glow-strong), 0 2px 10px var(--color-accent-glow); }
    50%       { box-shadow: 0 0 40px var(--color-accent-glow-strong), 0 4px 22px var(--color-accent-glow); }
}

/* ========== CARD 3D HOVER ========== */
.arsenal__card {
    transform-style: preserve-3d;
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease !important;
}

.arsenal__card:hover {
    transform: translateY(-10px) rotate3d(1, 0.5, 0, 4deg) !important;
}

/* ========== TICKER FONT SCALE ========== */
.ticker__content span {
    font-size: 0.95rem !important;
    letter-spacing: 0.18em !important;
}

/* ========== HERO PRETITLE STYLE ========== */
.hero__pretitle {
    font-family: var(--font-heading) !important;
    font-size: clamp(1rem, 2.5vw, 1.2rem) !important;
    letter-spacing: 0.15em !important;
    text-transform: uppercase !important;
    color: var(--color-text-muted) !important;
}

/* ========== MOBILE ADJUSTMENTS ========== */
@media (max-width: 768px) {
    .hero__headline-main      { font-size: clamp(2.8rem, 11vw, 4rem) !important; }
    .hero__headline-highlight { font-size: clamp(3.2rem, 13vw, 5rem) !important; }
    .section__title           { letter-spacing: 0.03em !important; }
    .countdown__unit span:first-child { font-size: 1.8rem !important; }
}

@media (max-width: 480px) {
    .hero__headline-main      { font-size: 2.6rem !important; }
    .hero__headline-highlight { font-size: 3rem !important; }
    .btn                      { font-size: 1rem !important; }
}

/* ========== SCROLL PROGRESS BAR ========== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 0%;
    background: linear-gradient(90deg,
        var(--color-accent-dark) 0%,
        var(--color-accent-light) 50%,
        var(--color-accent-dark) 100%);
    z-index: 9999;
    transition: width 0.08s linear;
    box-shadow: 0 0 12px var(--color-accent-glow-strong), 0 0 4px var(--color-accent);
}

/* ========== ANIMATIONS (moved from JS) ========== */
.animate-ready {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays */
.arsenal__card.animate-ready:nth-child(1) { transition-delay: 0.05s; }
.arsenal__card.animate-ready:nth-child(2) { transition-delay: 0.15s; }
.arsenal__card.animate-ready:nth-child(3) { transition-delay: 0.25s; }

.incluso__item.animate-ready:nth-child(1)  { transition-delay: 0.05s; }
.incluso__item.animate-ready:nth-child(2)  { transition-delay: 0.10s; }
.incluso__item.animate-ready:nth-child(3)  { transition-delay: 0.15s; }
.incluso__item.animate-ready:nth-child(4)  { transition-delay: 0.20s; }
.incluso__item.animate-ready:nth-child(5)  { transition-delay: 0.25s; }
.incluso__item.animate-ready:nth-child(6)  { transition-delay: 0.30s; }

.about__content.animate-ready       { transition-delay: 0.05s; }
.about__image-wrapper.animate-ready { transition-delay: 0.15s; }
.hero__stats.animate-ready          { transition-delay: 0.1s; }
.final-cta__box.animate-ready       { transition-delay: 0.1s; }

/* ========== HERO CTA SUBTITLE ========== */
.hero__cta-subtitle {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 14px;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
    font-weight: 500;
}

.hero__cta-subtitle span {
    color: var(--color-text-muted);
}

.hero__cta-subtitle strong {
    color: var(--color-text-secondary);
}

.hero__cta-subtitle .hero__check-icon {
    width: 15px;
    height: 15px;
    stroke: var(--color-accent);
    flex-shrink: 0;
}

/* ========== COUNTDOWN TIMER ========== */
.oferta__countdown {
    margin: var(--spacing-md) 0 var(--spacing-sm);
}

.oferta__countdown-label {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
}

.countdown__display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.5);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-lg);
    padding: 12px 20px;
    box-shadow: 0 0 25px var(--color-accent-glow), inset 0 1px 0 rgba(255, 215, 0, 0.1);
}

.countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 48px;
    gap: 2px;
}

.countdown__unit span:first-child {
    font-family: var(--font-heading);
    font-size: 1.9rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(135deg, var(--color-accent-light) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 12px var(--color-accent-glow-strong));
    min-width: 2ch;
    display: block;
    text-align: center;
}

.countdown__unit span:last-child {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--color-text-muted);
}

.countdown__sep {
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 900;
    color: var(--color-accent);
    margin-bottom: 14px;
    opacity: 1;
    animation: sep-blink 1s step-start infinite;
}

@keyframes sep-blink {
    50% { opacity: 0.2; }
}

/* ========== HERO STATS ========== */
/* The hero__stats styles already exist in styles.css, but we override the grid on mobile */
@media (max-width: 600px) {
    .hero__stats {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }
    .hero__stat-number {
        font-size: 1.4rem !important;
    }
    .hero__stat-label {
        font-size: 0.65rem !important;
    }
}

/* ========== FINAL CTA SECTION ========== */
.final-cta__content {
    position: relative;
    z-index: 2;
}

.final-cta__features {
    display: flex;
    justify-content: center;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-xl);
}

.final-cta__feature-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    background: rgba(244, 196, 48, 0.08);
    border: 1px solid var(--color-border-gold);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-secondary);
}

.final-cta__feature-tag svg {
    width: 16px;
    height: 16px;
    stroke: var(--color-accent);
    flex-shrink: 0;
}

/* Responsive countdown */
@media (max-width: 480px) {
    .countdown__display {
        padding: 10px 14px;
        gap: 4px;
    }

    .countdown__unit {
        min-width: 40px;
    }

    .countdown__unit span:first-child {
        font-size: 1.5rem;
    }

    .oferta__countdown-label {
        font-size: 0.8rem;
    }

    .hero__cta-subtitle {
        font-size: 0.78rem;
        gap: 7px;
    }

    .final-cta__features {
        flex-direction: column;
        align-items: center;
    }
}

/* ========================================
   FOTO — TRATAMENTO CINEMATOGRÁFICO DOURADO
   ======================================== */

/* Container: brilho intenso e escala suave */
.about__photo-container {
    border: 3px solid var(--color-accent) !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    position: relative !important;
    box-shadow:
        0 0 0 1px rgba(255, 215, 0, 0.15),
        0 0 40px rgba(244, 196, 48, 0.55),
        0 0 90px rgba(244, 196, 48, 0.25),
        0 25px 60px rgba(0, 0, 0, 0.6) !important;
    transition: box-shadow 0.4s ease, transform 0.4s ease !important;
    isolation: isolate;
}

.about__photo-container:hover {
    transform: scale(1.03) !important;
    box-shadow:
        0 0 0 2px rgba(255, 215, 0, 0.3),
        0 0 65px rgba(244, 196, 48, 0.75),
        0 0 130px rgba(244, 196, 48, 0.35),
        0 30px 80px rgba(0, 0, 0, 0.7) !important;
}

/* Imagem: filtro warm cinematográfico — gold grade */
.about__photo {
    display: block !important;
    width: 100% !important;
    max-width: 380px !important;
    height: auto !important;
    filter:
        contrast(1.18)
        brightness(1.08)
        saturate(1.35)
        sepia(0.30)
        hue-rotate(-10deg)
        drop-shadow(0 0 20px rgba(244, 196, 48, 0.35)) !important;
    transition: filter 0.5s ease !important;
}

.about__photo-container:hover .about__photo {
    filter:
        contrast(1.25)
        brightness(1.12)
        saturate(1.5)
        sepia(0.38)
        hue-rotate(-10deg)
        drop-shadow(0 0 35px rgba(244, 196, 48, 0.6)) !important;
}

/* ::before — overlay de cor dourada (coloriza em gold) */
.about__photo-container::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        145deg,
        rgba(255, 190, 20, 0.22) 0%,
        rgba(244, 196, 48, 0.10) 45%,
        rgba(180, 100, 0, 0.18) 100%
    ) !important;
    mix-blend-mode: color !important;
    z-index: 2 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
}

/* ::after — vinheta inferior + left gradient, integra na página escura */
.about__photo-container::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(to bottom,
            transparent 45%,
            rgba(10, 10, 10, 0.55) 100%),
        linear-gradient(to right,
            rgba(10, 10, 10, 0.15) 0%,
            transparent 30%);
    z-index: 3 !important;
    pointer-events: none !important;
    border-radius: inherit !important;
}

/* Corner accents — detalhes dourados nos cantos */
.about__photo-container .about__photo ~ .photo-corner {
    display: none;
}

/* Cantos decorativos via box inset */
.about__photo-container {
    --corner: 14px;
    --corner-w: 2px;
}

.about__photo-container::before {
    /* sobrescreve só o background, mantém o mix-blend */
}

/* Label "FRANK · SINHOR GREEN" flutuando sobre a foto */
.about__image-wrapper {
    position: relative;
}

.about__image-wrapper::before {
    content: 'FRANK · SINHOR GREEN';
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-heading, 'Rajdhani', sans-serif);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.24em;
    color: var(--color-accent);
    text-shadow:
        0 0 16px rgba(244, 196, 48, 0.9),
        0 2px 8px rgba(0, 0, 0, 0.8);
    z-index: 10;
    white-space: nowrap;
    pointer-events: none;
}

/* Logo de fundo: mais visível e animada */
.about__logo-bg {
    opacity: 0.08 !important;
    filter: grayscale(0) brightness(1.5) sepia(0.5) !important;
    animation: float 7s ease-in-out infinite !important;
}

/* Responsivo */
@media (max-width: 768px) {
    .about__photo {
        max-width: 300px !important;
    }
    .about__photo-wrapper::before {
        font-size: 0.65rem;
        letter-spacing: 0.15em;
    }
}