/* Component-Specific Styles */

/* ─── Ultimate Guide: Cinematic Reveal ─── */
.cinematic-reveal-card {
    box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.8);
}

.ug-first-chapter {
    padding-top: 6rem !important;
    padding-bottom: 8rem !important;
}

@media (max-width: 1023px) {
    .ug-first-chapter {
        padding-top: 10vh !important;
        padding-bottom: 12vh !important;
    }
}

@media (hover: hover) and (pointer: fine) {
    .cinematic-reveal {
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        transform-style: preserve-3d;
    }
}

@media (hover: none), (max-width: 1023px) {
    .cinematic-reveal {
        transform-style: flat;
        backface-visibility: visible;
        -webkit-backface-visibility: visible;
    }
}

.ug-bg-layer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-color: var(--surface-container-lowest);
    overflow: hidden;
    clip-path: inset(0);
    isolation: isolate;
}

.ug-bg-img-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: scale(1.05);
    transition: transform 3s ease-out;
}

@media (hover: hover) and (pointer: fine) {
    .group:hover .ug-bg-img-wrap {
        will-change: transform;
    }
}

@media (hover: none), (max-width: 1023px) {
    .ug-bg-img-wrap {
        transform: scale(1);
        transition: none;
    }
}

.group\/zp:hover .ug-bg-img-wrap,
.group:hover .ug-bg-img-wrap {
    transform: scale(1);
}

.ug-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.ug-bg-img--security {
    filter: grayscale(60%) brightness(0.75);
}

.dark .ug-bg-img--security {
    filter: grayscale(80%) brightness(0.5);
}

@media (hover: hover) and (pointer: fine) {
    .overlay-vignette {
        background: linear-gradient(to right,
                var(--background) 0%,
                var(--background) 15%,
                color-mix(in srgb, var(--background) 80%, transparent) 45%,
                transparent 100%);
        opacity: 0.92;
        pointer-events: none;
    }

    html:not(.dark) .overlay-vignette {
        background: linear-gradient(to right,
                var(--background) 0%,
                var(--background) 45%,
                color-mix(in srgb, var(--background) 50%, transparent) 75%,
                transparent 100%);
        opacity: 0.98;
    }
}

.cinematic-reveal h3 {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
    letter-spacing: -0.01em;
}

html:not(.dark) .cinematic-reveal h3 {
    text-shadow: 0 4px 12px rgba(255, 255, 255, 0.4);
}

.cinematic-reveal p {
    color: var(--on-background) !important;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

html:not(.dark) .cinematic-reveal p {
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.3);
}

@media (hover: none), (max-width: 1023px) {
    .overlay-vignette {
        background: linear-gradient(to bottom,
                rgba(0, 0, 0, 0.95) 0%,
                rgba(0, 0, 0, 0.5) 35%,
                rgba(0, 0, 0, 0.5) 65%,
                rgba(0, 0, 0, 0.95) 100%);
        opacity: 1;
        pointer-events: none;
    }

    html:not(.dark) .overlay-vignette {
        background: linear-gradient(to bottom,
                rgba(255, 255, 255, 0.98) 0%,
                rgba(255, 255, 255, 0.75) 35%,
                rgba(255, 255, 255, 0.75) 65%,
                rgba(255, 255, 255, 0.98) 100%);
        opacity: 1;
    }

    .cinematic-reveal {
        padding-bottom: 5vh;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ug-bg-img-wrap {
        transform: scale(1);
        transition: none;
    }
}

/* ── FAQ: Accordion Interaction ── */
.faq-item[data-state="open"] .faq-content {
    max-height: 1000px; /* Sufficient height for dynamic content */
}

.faq-item[data-state="open"] .faq-icon {
    transform: rotate(180deg);
}

.faq-item[data-state="open"] {
    background-color: var(--surface-container) !important;
}

.faq-item[data-state="open"] .faq-trigger {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Hero Subheadline: Premium Aesthetic Styling ── */
#hero-gemini p.hero-subheadline {
    font-family: 'Inter', 'DM Sans', system-ui, sans-serif;
    font-size: clamp(1rem, 1.8vw, 1.2rem);
    font-weight: 650;
    letter-spacing: 0.018em;
    line-height: 1.8;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;

    /* Gradient text — warm amber-to-rose, echoes the background glow */
    background: linear-gradient(
        135deg,
        rgba(30, 14, 6, 0.80) 0%,
        rgba(160, 60, 10, 0.75) 50%,
        rgba(30, 14, 6, 0.80) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;

    /* Subtle warm glow under text */
    filter: drop-shadow(0 1px 10px rgba(252, 120, 60, 0.18));

    /* Smooth fade-up entrance */
    animation: hero-sub-fadein 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
    animation-delay: 0.25s;
}

/* Dark mode — cooler, lighter gradient for contrast */
.dark #hero-gemini p.hero-subheadline {
    background: linear-gradient(
        135deg,
        rgba(255, 220, 190, 0.90) 0%,
        rgba(255, 160, 100, 0.80) 50%,
        rgba(255, 220, 190, 0.90) 100%
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 1px 12px rgba(252, 120, 60, 0.25));
}

@keyframes hero-sub-fadein {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    #hero-gemini p.hero-subheadline {
        animation: none;
    }
}