/* ================================================================
   PREMIUM SECTIONS — Plastomer 2026 A+ Design System
   Shared classes for parallax, glass, reveals, dividers, blobs
   ================================================================ */

/* ===== PARALLAX MAGAZINE BACKGROUNDS ===== */
.section-parallax {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.section-parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 10, 30, 0.75) 0%,
            rgba(0, 20, 50, 0.5) 50%,
            rgba(0, 10, 30, 0.85) 100%);
    z-index: 1;
}

.section-parallax>* {
    position: relative;
    z-index: 2;
}

/* Mobile: disable fixed attachment (causes issues on iOS) */
@media (max-width: 768px) {
    .section-parallax {
        background-attachment: scroll;
    }
}

/* ===== GRADIENT SECTION DIVIDERS ===== */
.section-divider {
    height: 100px;
    background: linear-gradient(180deg,
            var(--divider-from, #0a1628) 0%,
            var(--divider-to, #0d1d3a) 100%);
    position: relative;
}

.section-divider::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent,
            rgba(212, 175, 55, 0.25),
            transparent);
}

/* Thin version */
.section-divider-thin {
    height: 60px;
    background: linear-gradient(180deg,
            var(--divider-from, #0a1628) 0%,
            var(--divider-to, #0d1d3a) 100%);
}

/* ===== COLOR-SHIFTING SECTION BACKGROUNDS ===== */
.section-navy {
    background: linear-gradient(180deg, #0a1628 0%, #0d1d3a 100%);
}

.section-charcoal {
    background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
}

.section-midnight {
    background: linear-gradient(180deg, #0f0f23 0%, #1a1a3e 100%);
}

.section-deep-ocean {
    background: linear-gradient(180deg, #0b1120 0%, #112240 100%);
}

/* ===== SCROLL REVEAL ANIMATIONS ===== */

/* Fade up (default) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    animation: revealFallback 0s 4s forwards;
    /* safety: auto-show after 4s */
}

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

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
    animation: none;
}

/* Slide from left */
.reveal-left {
    opacity: 0;
    transform: translateX(-60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* Slide from right */
.reveal-right {
    opacity: 0;
    transform: translateX(60px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-left.revealed,
.reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
}

/* Scale up */
.reveal-scale {
    opacity: 0;
    transform: scale(0.85);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
}

/* Stagger children */
.reveal-stagger>* {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.reveal-stagger.revealed>*:nth-child(1) {
    transition-delay: 0.05s;
}

.reveal-stagger.revealed>*:nth-child(2) {
    transition-delay: 0.12s;
}

.reveal-stagger.revealed>*:nth-child(3) {
    transition-delay: 0.19s;
}

.reveal-stagger.revealed>*:nth-child(4) {
    transition-delay: 0.26s;
}

.reveal-stagger.revealed>*:nth-child(5) {
    transition-delay: 0.33s;
}

.reveal-stagger.revealed>*:nth-child(6) {
    transition-delay: 0.40s;
}

.reveal-stagger.revealed>*:nth-child(7) {
    transition-delay: 0.47s;
}

.reveal-stagger.revealed>*:nth-child(8) {
    transition-delay: 0.54s;
}

.reveal-stagger.revealed>* {
    opacity: 1;
    transform: translateY(0);
}

/* Clip-path text reveal (wipe from left) */
.text-wipe {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: clip-path 1s cubic-bezier(0.4, 0, 0.2, 1);
    animation: textWipeFallback 0s 3s forwards;
    /* safety: auto-reveal after 3s */
}

.text-wipe.revealed {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    animation: none;
    /* cancel fallback once properly revealed */
}

@keyframes textWipeFallback {
    to {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    }
}

/* ===== GLASSMORPHISM CARDS — TIER 2 (Frosted Industrial) ===== */
.glass-card {
    position: relative;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    overflow: hidden;
    color: white;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -1px 0 rgba(0, 0, 0, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Gold accent line on top */
.glass-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #D4AF37, transparent);
    opacity: 0.4;
    transition: opacity 0.4s;
}

.glass-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, 0.2);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 0 20px rgba(212, 175, 55, 0.06);
}

.glass-card:hover::before {
    opacity: 1;
}

/* ===== GLASS CARD — TIER 4 (Animated Gradient Border) ===== */
.glass-card-premium {
    position: relative;
    border-radius: 18px;
    padding: 2px;
    background: linear-gradient(var(--gradient-angle, 0deg),
            #D4AF37,
            #3B82F6,
            #8B5CF6,
            #D4AF37);
    background-size: 300% 300%;
    animation: gradientBorderRotate 6s linear infinite;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 0 15px rgba(212, 175, 55, 0.08);
    transition: box-shadow 0.4s ease;
}

.glass-card-premium:hover {
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.4),
        0 0 30px rgba(212, 175, 55, 0.15);
}

.glass-card-premium-inner {
    background: rgba(10, 15, 35, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 16px;
    padding: 2rem;
    height: 100%;
}

@keyframes gradientBorderRotate {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

/* ===== HERO FROSTED BLOB ===== */
.hero-blob {
    padding: 50px 80px;
    background: rgba(0, 20, 60, 0.35);
    backdrop-filter: blur(25px) saturate(1.4);
    -webkit-backdrop-filter: blur(25px) saturate(1.4);
    border-radius: 50% 40% 60% 35% / 45% 55% 35% 50%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
        inset 0 0 80px rgba(255, 255, 255, 0.05);
    animation: blobMorph 12s ease-in-out infinite;
    position: relative;
    z-index: 2;
}

@keyframes blobMorph {
    0% {
        border-radius: 50% 40% 60% 35% / 45% 55% 35% 50%;
    }

    25% {
        border-radius: 40% 55% 35% 60% / 55% 35% 50% 45%;
    }

    50% {
        border-radius: 55% 35% 50% 40% / 35% 50% 45% 55%;
    }

    75% {
        border-radius: 35% 50% 45% 55% / 50% 40% 55% 35%;
    }

    100% {
        border-radius: 50% 40% 60% 35% / 45% 55% 35% 50%;
    }
}

/* ===== PAGE HERO BANNERS (Inner Pages) ===== */
.page-hero {
    min-height: 45vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
}

.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(0, 10, 30, 0.35) 0%,
            rgba(0, 20, 50, 0.55) 100%);
    z-index: 1;
}

/* Ken Burns slow zoom animation */
.page-hero-bg {
    position: absolute;
    inset: -5%;
    width: 110%;
    height: 110%;
    background-size: cover;
    background-position: center;
    animation: kenBurns 25s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes kenBurns {
    0% {
        transform: scale(1) translate(0, 0);
    }

    100% {
        transform: scale(1.12) translate(-1.5%, -1%);
    }
}

.page-hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 3rem 2rem;
}

.page-hero-title {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 3rem;
    font-weight: 700;
    color: white;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 1rem;
    opacity: 0;
    transform: translateY(20px);
    animation: heroTitleIn 1s 0.5s ease-out forwards;
}

.page-hero-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 2px;
    text-transform: uppercase;
    max-width: 600px;
    margin: 0 auto;
    opacity: 0;
    transform: translateY(15px);
    animation: heroTitleIn 1s 0.8s ease-out forwards;
}

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

/* ===== ANIMATED COUNTER STATS ===== */
.stats-bar {
    display: flex;
    justify-content: center;
    gap: 4rem;
    padding: 3rem 2rem;
    flex-wrap: wrap;
}

.stat-item {
    text-align: center;
}

.stat-value {
    font-family: 'Oswald', 'Inter', sans-serif;
    font-size: 3.5rem;
    font-weight: 700;
    color: #D4AF37;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.stat-label {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.5);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ===== STICKY CTA BAR ===== */
.sticky-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(90deg, #1E40AF 0%, #0D2B6B 50%, #1E3A8A 100%);
    padding: 0.75rem 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    z-index: 9999;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.4);
    border-top: 1px solid rgba(212, 175, 55, 0.2);
}

.sticky-cta.visible {
    transform: translateY(0);
}

.sticky-cta-text {
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 1px;
}

.sticky-cta-btn {
    display: inline-block;
    padding: 0.6rem 1.8rem;
    background: linear-gradient(135deg, #D4AF37, #B8942F);
    color: #0a0a1a;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.sticky-cta-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

.sticky-cta-phone {
    color: #D4AF37;
    font-weight: 700;
    text-decoration: none;
    font-size: 1rem;
    letter-spacing: 1px;
}

.sticky-cta-phone:hover {
    color: #F5D76E;
}

/* ===== IMAGE ZOOM ON HOVER ===== */
.img-zoom {
    overflow: hidden;
    border-radius: inherit;
}

.img-zoom img {
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-zoom:hover img {
    transform: scale(1.08);
}

/* ===== SPLIT SCREEN LAYOUT ===== */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 50vh;
    align-items: center;
    gap: 0;
}

.split-section-image {
    height: 100%;
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

.split-section-content {
    padding: 4rem;
}

@media (max-width: 768px) {
    .split-section {
        grid-template-columns: 1fr;
    }

    .split-section-image {
        min-height: 250px;
    }

    .split-section-content {
        padding: 2rem;
    }
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */
@media (max-width: 768px) {
    .page-hero {
        min-height: 35vh;
    }

    .page-hero-title {
        font-size: 2rem;
        letter-spacing: 2px;
    }

    .stats-bar {
        gap: 2rem;
    }

    .stat-value {
        font-size: 2.5rem;
    }

    .sticky-cta {
        flex-direction: column;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
    }
}

/* ===== GLOBAL DARK SECTION TEXT READABILITY FIX =====
   Kim's #1 recurring complaint: gray text too hard to read
   on dark backgrounds. This catches ALL dark premium sections
   and boosts paragraph/text opacity to meet WCAG contrast.
   ===================================================== */

/* Boost body text in all dark premium sections */
.section-parallax p,
.section-parallax li,
.section-parallax .section-text,
.section-parallax .feature-text,
.section-parallax .card-text,
[class*="-section"] p,
[style*="background: linear-gradient"]>.container p,
.history-text p,
.facilities-text,
.apart-text,
.apart-note {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Boost stat labels and secondary info text */
.section-parallax .stat-label,
[class*="-section"] .stat-label,
.vc-sl,
.vc-bi ul li {
    color: rgba(255, 255, 255, 0.65) !important;
}

/* Boost list items in dark sections */
.section-parallax ul li,
.feature-list-dark li,
.eng-list li,
.psa-checklist li {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Boost section subtitles on dark backgrounds */
.section-parallax .section-subtitle,
[class*="-section"] .section-subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
}