/**
 * cinematic-storytelling.css
 * Ροή: Open → Highlight → Reveal → Immersive World
 * Όχι stack από cards. Σκηνές ταινίας.
 */

/* ═══════════════════════════════════════════════════════════
   1) OPEN — Κάποια επαγγέλματα… (χωρίς card, cinematic)
   ═══════════════════════════════════════════════════════════ */
.invisible-professions-section {
    padding: 48px 2rem 32px;
    margin-bottom: 0;
    padding-bottom: 0;
    position: relative;
}

.invisible-professions-container {
    max-width: 900px;
    margin: 0 auto;
}

/* Αφαίρεση card — open cinematic section */
.invisible-professions-banner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0;
    position: relative;
}

.invisible-professions-banner::before {
    /* Subtle haze behind text */
    content: '';
    position: absolute;
    inset: -15% -20% -15% -25%;
    background: radial-gradient(
        ellipse 90% 100% at 30% 50%,
        rgba(57, 242, 255, 0.05) 0%,
        transparent 55%
    );
    filter: blur(50px);
    -webkit-filter: blur(50px);
    pointer-events: none;
    z-index: -1;
}

.invisible-professions-banner::after {
    display: none;
}

/* Μεγαλύτερη τυπογραφική έμφαση στον τίτλο */
.invisible-professions-section .invisible-professions-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 1.75rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 30px rgba(57, 242, 255, 0.08);
}

.invisible-professions-intro,
.invisible-professions-main {
    text-align: left;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
}

/* Connector — λεπτή γραμμή προς το Highlight */
.invisible-professions-section::after {
    content: '';
    display: block;
    height: 1px;
    margin: 28px auto 0;
    max-width: 350px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(57, 242, 255, 0.2) 30%,
        rgba(155, 93, 255, 0.25) 50%,
        rgba(57, 242, 255, 0.2) 70%,
        transparent 100%
    );
    opacity: 0.6;
}

/* ═══════════════════════════════════════════════════════════
   2) HIGHLIGHT — Γιατί έχει σημασία (πρώτο emphasis card)
   ═══════════════════════════════════════════════════════════ */
.features-section {
    padding: 24px 2rem 36px;
    margin-top: 0;
}

.features-section::after {
    opacity: 0;
}

.features-section .features-header {
    max-width: 820px;
    margin: 0 auto;
    padding: 24px 40px 28px;
    border-radius: 20px;
    background: linear-gradient(
        135deg,
        rgba(125, 214, 255, 0.18) 0%,
        rgba(155, 93, 255, 0.22) 50%,
        rgba(125, 214, 255, 0.15) 100%
    );
    border: 1px solid rgba(125, 214, 255, 0.25);
    box-shadow: 
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(125, 214, 255, 0.15),
        0 0 60px rgba(57, 242, 255, 0.12),
        0 0 100px rgba(155, 93, 255, 0.08);
    position: relative;
    isolation: isolate;
}

/* Πιο έντονο glow */
.features-section .features-header::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(95, 183, 255, 0.2) 0%, rgba(155, 93, 255, 0.1) 40%, transparent 70%);
    filter: blur(40px);
    opacity: 0.8;
    z-index: -1;
}

.features-section .features-header::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        135deg,
        rgba(8, 18, 35, 0.4) 0%,
        rgba(8, 18, 35, 0.3) 100%
    );
    pointer-events: none;
    z-index: -1;
}

.features-subtitle {
    text-align: left;
    max-width: 60ch;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.75;
}

/* ═══════════════════════════════════════════════════════════
   3) REVEAL — AI section (light beam από δεξιά)
   ═══════════════════════════════════════════════════════════ */
.ai-explainer-section {
    position: relative;
    overflow: hidden;
}

/* Light beam effect από δεξιά */
.ai-explainer-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -15%;
    width: 50%;
    height: 140%;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(57, 242, 255, 0.04) 55%,
        rgba(155, 93, 255, 0.06) 70%,
        transparent 85%
    );
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
}

.ai-explainer-container {
    position: relative;
    z-index: 1;
}

/* Μεγαλύτερος τίτλος — preserve gradient over contrast overrides */
.ai-explainer-section .ai-explainer-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    margin-bottom: 0.5rem !important;
    background: linear-gradient(90deg, #7DD6FF 0%, #5FA8FF 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4), 0 0 25px rgba(57, 242, 255, 0.1) !important;
}

.ai-explainer-section .ai-explainer-subhead {
    font-size: clamp(1.1rem, 1.8vw, 1.35rem) !important;
    margin-bottom: 2rem !important;
}

/* Μείωση body width — reveal feel */
.ai-explainer-section .ai-explainer-intro-wrapper {
    max-width: 52ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: 2.5rem !important;
}

.ai-explainer-section .ai-explainer-intro {
    font-size: clamp(1rem, 1.2vw, 1.125rem) !important;
    line-height: 1.75 !important;
}

/* ═══════════════════════════════════════════════════════════
   4) IMMERSIVE — Gaming (κορύφωση αφήγησης)
   ═══════════════════════════════════════════════════════════ */
.gaming-section {
    padding: 72px 2rem 80px !important;
    position: relative;
    overflow: hidden;
}

/* Subtle parallax glow */
.gaming-section::before {
    content: '';
    position: absolute;
    inset: -10% -5%;
    background: radial-gradient(
        ellipse 80% 80% at 50% 50%,
        rgba(107, 60, 255, 0.08) 0%,
        rgba(57, 242, 255, 0.04) 40%,
        transparent 70%
    );
    filter: blur(60px);
    pointer-events: none;
    z-index: 0;
}

.gaming-section .gaming-container {
    position: relative;
    z-index: 1;
}

/* Ίδιο style με invisible-professions-title */
.gaming-section .gaming-title {
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    margin-bottom: 1.75rem !important;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3), 0 0 30px rgba(57, 242, 255, 0.08) !important;
}

.gaming-section .gaming-description {
    font-size: clamp(1rem, 1.8vw, 1.2rem) !important;
    line-height: 1.75 !important;
    max-width: 60ch !important;
}

/* Parallax hint — ελαφρύ transform on scroll (via JS ή prefers-reduced-motion) */
@media (prefers-reduced-motion: no-preference) {
    .gaming-section {
        will-change: transform;
    }
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .invisible-professions-section {
        padding: 32px 1rem 24px;
    }

    .invisible-professions-section .invisible-professions-title {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
    }

    .invisible-professions-intro,
    .invisible-professions-main,
    .features-subtitle {
        text-align: center;
        max-width: 100%;
    }

    .features-section {
        padding: 20px 1rem 28px;
    }

    .features-section .features-header {
        padding: 20px 24px 24px;
    }

    .ai-explainer-section .ai-explainer-title {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
        /* Solid white on mobile for readability (override gradient) */
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
        background: none !important;
        -webkit-background-clip: unset !important;
        background-clip: unset !important;
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6), 0 0 24px rgba(255, 255, 255, 0.15) !important;
    }

    .ai-explainer-section .ai-explainer-intro-wrapper {
        max-width: 100% !important;
    }

    .gaming-section {
        padding: 48px 1rem 56px !important;
    }

    .gaming-section .gaming-title {
        font-size: clamp(1.75rem, 5vw, 2.25rem) !important;
    }
}