/* ==========================================================================
   ARQUIVO: css/landing.css
   LOVE IN CODE — LANDING PAGE PREMIUM
   ========================================================================== */

/* ==========================================================================
   FUNDO CINEMATOGRÁFICO
   ========================================================================== */
body {
    position: relative;
    background:
        radial-gradient(circle at top left,
            rgba(255, 181, 167, 0.22),
            transparent 30%),

        radial-gradient(circle at bottom right,
            rgba(114, 9, 183, 0.12),
            transparent 28%),

        linear-gradient(
            180deg,
            #ffffff 0%,
            #fff8f8 100%
        );

    overflow-x: hidden;
}

/* ==========================================================================
   GLOW DECORATIVO
   ========================================================================== */
body::before,
body::after {
    content: "";

    position: fixed;
    border-radius: 50%;

    pointer-events: none;
    z-index: -1;

    filter: blur(90px);
    opacity: 0.45;
}

body::before {
    width: 420px;
    height: 420px;

    background: rgba(230, 57, 70, 0.12);

    top: -120px;
    left: -120px;
}

body::after {
    width: 380px;
    height: 380px;

    background: rgba(114, 9, 183, 0.10);

    right: -100px;
    bottom: -100px;
}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
    position: relative;
}

.hero-content {
    position: relative;
    z-index: 2;
}

.hero-title {
    color: #1D3557;

    background:
        linear-gradient(
            135deg,
            #1D3557 0%,
            #E63946 45%,
            #7209B7 100%
        );

    background-clip: text;
    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: fadeHero 1s ease forwards;
}

@keyframes fadeHero {
    from {
        opacity: 0;
        transform: translateY(25px);
    }

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

/* ==========================================================================
   TYPEWRITER
   ========================================================================== */
.typewriter-box {
    display: flex;
    align-items: center;
    min-height: 34px;
}

.typewriter-text {
    font-weight: 700;
    color: var(--color-primary);

    letter-spacing: 0.2px;
}

.cursor {
    margin-left: 4px;
    font-weight: 700;

    animation: blinkCursor 1s infinite;
}

@keyframes blinkCursor {
    50% {
        opacity: 0;
    }
}

/* ==========================================================================
   HERO DESCRIPTION
   ========================================================================== */
.hero-description {
    color: #5A6B82;
}

/* ==========================================================================
   HERO BUTTONS
   ========================================================================== */
.hero-buttons .btn-primary {
    min-width: 230px;
}

.hero-buttons .btn-secondary {
    min-width: 190px;
}

/* ==========================================================================
   MOCKUP PREMIUM
   ========================================================================== */
.hero-visual {
    position: relative;
}

.hero-visual::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    background:
        radial-gradient(
            circle,
            rgba(230, 57, 70, 0.16),
            transparent 70%
        );

    border-radius: 50%;

    filter: blur(70px);

    z-index: 0;
}

.iphone-15-mockup {
    position: relative;
    z-index: 2;

    animation: floatPhone 5s ease-in-out infinite;
}

@keyframes floatPhone {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-12px);
    }

    100% {
        transform: translateY(0px);
    }
}

/* ==========================================================================
   TELA DO MOCKUP
   ========================================================================== */
.screen {
    position: relative;
    overflow: hidden;
}

.screen::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.10),
            transparent 35%
        );

    pointer-events: none;
}

/* ==========================================================================
   APP PHOTO
   ========================================================================== */
.app-photo {
    position: relative;
    overflow: hidden;
}

.app-photo::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.30),
            transparent 50%
        );
}

.app-photo::after {
    content: "LOVE IN CODE";

    position: absolute;
    bottom: 18px;
    left: 18px;

    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 2px;

    opacity: 0.85;
}

/* ==========================================================================
   PLAYER MOCKUP
   ========================================================================== */
.app-music {
    transition: var(--transition);
}

.app-music:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.play-btn {
    transition: var(--transition);
}

.play-btn:hover {
    transform: scale(1.06);
}

/* ==========================================================================
   MINI CARDS
   ========================================================================== */
.mini-card {
    transition: var(--transition);
}

.mini-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   FEEDBACK CAROUSEL
   ========================================================================== */
.feedbacks {
    position: relative;
}

.feedbacks::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    background:
        radial-gradient(
            circle,
            rgba(255, 181, 167, 0.14),
            transparent 70%
        );

    border-radius: 50%;

    top: 0;
    left: 50%;
    transform: translateX(-50%);

    filter: blur(70px);
}

.feedback-carousel {
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-slide {
    text-align: center;
}

.feedback-avatar {
    position: relative;
}

.feedback-avatar::before {
    content: "";

    position: absolute;
    inset: -5px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(230,57,70,0.25),
            rgba(114,9,183,0.18)
        );

    z-index: -1;
}

.feedback-text {
    font-style: italic;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.steps-section,
.benefits-section,
.pricing-section,
.faq-section {
    position: relative;
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.step-card,
.benefit-card,
.pricing-card,
.accordion-item {
    position: relative;
    overflow: hidden;
}

.step-card::before,
.benefit-card::before,
.pricing-card::before,
.accordion-item::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.35),
            transparent 40%
        );

    pointer-events: none;
}

.step-card:hover .step-icon,
.benefit-card:hover .benefit-icon {
    transform: scale(1.05);
}

.step-icon,
.benefit-icon {
    transition: var(--transition);
}

/* ==========================================================================
   PRICING PREMIUM
   ========================================================================== */
.pricing-card.premium {
    border: 1px solid rgba(230, 57, 70, 0.16);

    box-shadow:
        var(--shadow-lg),
        0 0 0 1px rgba(114, 9, 183, 0.08);
}

.price {
    line-height: 1;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.accordion-header {
    transition: var(--transition);
}

.accordion-item.active .accordion-header {
    color: var(--color-primary);
}

.accordion-item.active .icon {
    transform: rotate(45deg);
}

.icon {
    transition: transform 0.3s ease;
}

/* ==========================================================================
   CONTACT ICONS
   ========================================================================== */
.contact-icon svg {
    transition: var(--transition);
}

.contact-icon:hover svg {
    transform: scale(1.08);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
    position: relative;
}

.footer::before {
    content: "";

    position: absolute;
    top: 0;
    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(230,57,70,0.18),
            transparent
        );
}

/* ==========================================================================
   ANIMAÇÕES REVEAL
   ========================================================================== */
.reveal.delay-1 {
    transition-delay: 0.1s;
}

.reveal.delay-2 {
    transition-delay: 0.2s;
}

.reveal.delay-3 {
    transition-delay: 0.3s;
}

/* ==========================================================================
   EFEITO HOVER GLOBAL SUAVE
   ========================================================================== */
.step-card,
.benefit-card,
.pricing-card,
.contact-icon,
.accordion-item {
    will-change: transform;
}

/* ==========================================================================
   SAFE ZONE
   ========================================================================== */
section {
    overflow: hidden;
}