/* Global Variables */
:root {
    --primary-color: #3b82f6;
    --primary-dark: #2563eb;
    --secondary-color: #8b5cf6;
    --accent-color: #06b6d4;
    --brand-orange: #F37021;
    /* Chungkang University Orange */
    --dark-bg: #0f172a;
    --darker-bg: #020617;
    --card-bg: #1e293b;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --white: #ffffff;
    --gradient-main: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    --glass-bg: rgba(30, 41, 59, 0.7);
    --glass-border: rgba(255, 255, 255, 0.1);
    --transition: all 0.3s ease;
    --container-width: 1200px;
}

/* Reset & Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', 'Noto Sans KR', sans-serif;
    background-color: var(--dark-bg);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition);
}

ul {
    list-style: none;
}

button {
    cursor: pointer;
    border: none;
    font-family: inherit;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 20px;
}

/* Buttons */
.btn-primary {
    display: inline-block;
    padding: 12px 30px;
    background: var(--gradient-main);
    color: var(--white);
    border-radius: 50px;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
    transition: var(--transition);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(59, 130, 246, 0.6);
}

.btn-secondary {
    display: inline-block;
    padding: 12px 30px;
    background: transparent;
    color: var(--text-main);
    border: 1px solid var(--text-muted);
    border-radius: 50px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-secondary:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(59, 130, 246, 0.1);
}

.btn-primary-small {
    padding: 8px 20px;
    background: var(--gradient-main);
    color: var(--white);
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
}

.btn-primary-small:hover {
    opacity: 0.9;
}

/* Navbar */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(2, 6, 23, 0.8);
    backdrop-filter: blur(10px);
    z-index: 1000;
    border-bottom: 1px solid var(--glass-border);
    padding: 15px 0;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.5px;
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.logo .highlight {
    font-size: 0.8em;
    letter-spacing: 0;
}

.highlight {
    color: var(--primary-color);
    background: var(--gradient-main);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a:not(.btn-primary-small) {
    color: var(--text-muted);
    font-weight: 500;
}

.nav-links a:not(.btn-primary-small):hover {
    color: var(--white);
}

.lang-switch {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid var(--glass-border);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: var(--transition);
    margin-left: 10px;
}

.lang-switch:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    border-color: var(--white);
}

.mobile-menu-btn {
    display: none;
    font-size: 1.5rem;
    color: var(--text-main);
    cursor: pointer;
}

/* Hero Section */
.hero {
    position: relative;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    background-color: #000;

    /* Fallback/Behind Background Image */
    background-image: url('images/hero_bg.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;

    overflow: hidden;
}

#canvas-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    opacity: 1;
    /* Three.js will handle specific opacities/materials */
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient overlay for text readability */
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.8) 90%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
}

/* Hero Title Typography with Ambient Glow */
.hero-title {
    font-size: 4.5rem;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 20px;
    color: #ffffff;
    /* Solid White for maximum readability */
    text-transform: uppercase;
    letter-spacing: -2px;
    position: relative;
    z-index: 1;
    display: inline-block;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    /* Crisp shadow for contrast */
}

/* Ambient Glow Effect - Backlight */
.hero-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    z-index: -1;
    background: conic-gradient(from 0deg,
            rgba(79, 70, 229, 0.5),
            /* Indigo */
            rgba(139, 92, 246, 0.5),
            /* Violet */
            rgba(6, 182, 212, 0.5),
            /* Cyan */
            rgba(79, 70, 229, 0.5)
            /* Loop back */
        );
    filter: blur(100px);
    border-radius: 50%;
    animation: glow-breathe 8s ease-in-out infinite alternate, glow-rotate 20s linear infinite;
    opacity: 0.7;
}

/* Star Dust Particles Effect - refined natural look */
.hero-title::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 200%;
    z-index: -1;
    /* varied small particles for natural random look */
    background-image:
        radial-gradient(circle, rgba(255, 255, 255, 0.9) 0.5px, transparent 0.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.7) 0.8px, transparent 0.8px),
        radial-gradient(circle, rgba(255, 255, 255, 0.6) 1px, transparent 1px),
        radial-gradient(circle, rgba(180, 220, 255, 0.8) 1.2px, transparent 1.2px),
        /* subtle blueish star */
        radial-gradient(circle, rgba(255, 255, 255, 0.5) 0.5px, transparent 0.5px),
        radial-gradient(circle, rgba(255, 255, 255, 0.8) 0.8px, transparent 0.8px);

    /* Irregular repeat sizes to minimize mechancial patterns */
    background-size:
        15vw 15vw,
        24vw 24vw,
        30vw 25vw,
        41vw 35vw,
        18vw 28vw,
        12vw 12vw;

    background-position:
        0 0,
        20px 40px,
        100px 50px,
        -50px -80px,
        60px 120px,
        -90px 40px;

    opacity: 0;
    mask-image: radial-gradient(circle, black 20%, transparent 60%);
    -webkit-mask-image: radial-gradient(circle, black 20%, transparent 60%);
    animation: stardust-burst 5s infinite;
}

@keyframes glow-rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes glow-breathe {
    0% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(0.9);
    }

    100% {
        opacity: 0.9;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes stardust-burst {
    0% {
        transform: translate(-50%, -50%) scale(0.8) rotate(0deg);
        opacity: 0;
    }

    15% {
        opacity: 0.8;
    }

    100% {
        transform: translate(-50%, -50%) scale(1.5);
        opacity: 0;
        background-position: 30px 30px, 50px 50px, -50px -50px;
    }
}

/* shift stars slightly outward */

.hero-subtitle-kr {
    font-size: 1.8rem;
    color: var(--accent-color);
    margin-bottom: 10px;
    font-weight: 500;
    letter-spacing: -0.5px;
}

.brand-orange {
    color: var(--brand-orange);
}

.hero-subtitle-large {
    font-size: 2rem;
    color: var(--white);
    margin-bottom: 20px;
    font-weight: 600;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--text-muted);
    margin-bottom: 40px;
    font-weight: 400;
    background: rgba(15, 23, 42, 0.6);
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Logo Section */
.logo-section {
    padding: 60px 0;
    background: var(--darker-bg);
    border-bottom: 1px solid var(--glass-border);
    position: relative;
    z-index: 5;
}

.logo-container {
    text-align: center;
}

.logo-title {
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
}

.logo-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background: var(--primary-dark);
    margin: 10px auto 0;
}

/* Infinite Marquee Wrapper */
.marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Fade Effect Mask */
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.marquee-track {
    display: flex;
    width: max-content;
    animation: scroll 30s linear infinite;
}

/* Pause animation on hover */
.marquee-wrapper:hover .marquee-track {
    animation-play-state: paused;
}

.logo-group {
    display: flex;
    align-items: center;
    gap: 4rem;
    padding-right: 4rem;
    /* Keeps gap at the end to match gap between items */
}

.company-logo {
    height: 48px;
    /* Increased by 120% from 40px */
    width: auto;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6);
    transition: all 0.3s ease;
    cursor: pointer;
}

.company-logo:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

.logo-sega {
    height: 96px;
}

/* 
   We have 4 identical groups to prevent gaps on wide screens.
   Group 1 width = 25% of total track width.
   We translate by -25% to loop seamlessly.
*/
@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-25%);
    }
}

.company-logo:hover {
    filter: grayscale(0%) opacity(1);
    transform: scale(1.1);
}

.logo-sega {
    height: 96px;
    /* 2x size of other logos (48px * 2) because it appears smaller */
}


/* Section Common */
.section {
    padding: 100px 0;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

.section-header h2 {
    font-size: 2.5rem;
    margin-bottom: 15px;
    position: relative;
    display: inline-block;
}

.section-header h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: var(--gradient-main);
    margin: 10px auto 0;
    border-radius: 2px;
}

.section-header p {
    color: var(--text-muted);
    font-size: 1.1rem;
}

.section-header .section-desc {
    margin-top: 20px;
    font-size: 1rem;
    line-height: 1.8;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-main);
}

.btn-expand {
    background: transparent;
    border: 1px solid var(--primary);
    color: var(--primary);
    padding: 8px 20px;
    border-radius: 20px;
    margin-top: 15px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.btn-expand:hover {
    background: var(--primary);
    color: var(--white);
}

.expanded-content {
    display: none;
    margin-top: 20px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    background: rgba(255, 255, 255, 0.05);
    padding: 20px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
}

.expanded-content.visible {
    display: block;
    animation: fadeIn 0.5s ease;
}

.expanded-content p {
    margin-bottom: 15px;
    color: var(--text-muted);
    font-size: 0.95rem;
    line-height: 1.7;
}

.expanded-content p:last-child {
    margin-bottom: 0;
}

/* About Section */
.about-section {
    position: relative;
    overflow: hidden;
}

.video-background {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: 0;
    pointer-events: none;
}

/* Aspect ratio fix for iframe to cover */
.video-background iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;
    /* 16:9 ratio */
    min-height: 100%;
    min-width: 177.77vh;
    /* 16/9 * 100vh */
}

.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.85);
    /* Dark overlay */
    z-index: 1;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.feature-card {
    background: var(--card-bg);
    padding: 40px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    transition: var(--transition);
}

.feature-card:hover {
    transform: translateY(-10px);
    border-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.icon-box {
    width: 60px;
    height: 60px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--primary-color);
    margin-bottom: 20px;
}

.feature-card h3 {
    font-size: 1.5rem;
    margin-bottom: 15px;
}

.feature-card p {
    color: var(--text-muted);
}

/* Speakers Section */
.speakers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-bottom: 50px;
}

.hidden-speaker {
    display: none;
}

.speaker-card {
    background: #121212;
    /* Very Dark Grey */
    border-radius: 20px;
    overflow: hidden;
    /* Thin neon border logic - using box-shadow or border property */
    border: 1px solid rgba(6, 182, 212, 0.3);
    transition: all 0.3s ease-in-out;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    background-image: url('images/speaker_bg_wave.png');
    /* Background Graphic */
    background-size: cover;
    background-position: center;
    background-blend-mode: soft-light;
}

.speaker-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0 20px rgba(6, 182, 212, 0.6);
    /* Bright Cyan Neon Glow */
    border-color: #06b6d4;
}

.speaker-image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    background-color: #333;
    position: relative;
    /* B&W by default */
    filter: grayscale(100%);
    transition: all 0.3s ease-in-out;
    mix-blend-mode: normal;
}

/* Hover Animation: Color + Scale */
.speaker-card:hover .speaker-image {
    filter: grayscale(0%);
    transform: scale(1.05);
    /* Zoom effect */
}

.speaker-image::after {
    /* Removed old overlay to let the image shine more on hover, 
       or keep a subtle one if needed for text contrast, 
       but user asked for 'Ethereal blue digital wave BEHIND speaker',
       since image covers top, we put bg on card. 
       We remove the old gradient overlay on image itself to keep it clean 'cutout' feel.
    */
    display: none;
}

.speaker-info {
    padding: 20px;
    text-align: center;
    position: relative;
    z-index: 2;
    background: rgba(18, 18, 18, 0.9);
    /* Dark semi-transparent bg for readability */
    margin-top: -5px;
    /* adjust spacing */
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.speaker-info h3 {
    font-size: 1.4rem;
    margin-bottom: 5px;
    color: #fff;
}

.job-title {
    display: block;
    color: var(--accent-color);
    /* Cyan */
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.speaker-info p {
    font-size: 0.9rem;
    color: #94a3b8;
    margin-bottom: 15px;
    line-height: 1.4;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.social-icons a {
    color: #64748b;
    font-size: 1.1rem;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: var(--accent-color);
}

.view-all-container {
    text-align: center;
}

/* Schedule Section */
.schedule-section {
    position: relative;
    background: url('images/schedule_bg.png') no-repeat center center;
    background-size: cover;
    overflow: hidden;
}

.schedule-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.85);
    /* Dark overlay for readability */
    z-index: 0;
}

#schedule-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    /* Allow clicking on content */
    opacity: 0.6;
}

.schedule-tabs {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 40px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

.tab-btn {
    padding: 10px 30px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--glass-border);
    border-radius: 30px;
    color: var(--text-muted);
    font-weight: 600;
    transition: var(--transition);
}

.tab-btn:hover,
.tab-btn.active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3);
}

.schedule-content {
    display: none;
    animation: fadeIn 0.5s ease;
}

.schedule-content.active {
    display: block;
}

/* Day 1 Specific Styling */
#day1 {
    background: rgba(6, 182, 212, 0.05);
    /* Light sky blue tint */
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(6, 182, 212, 0.1);
}

/* Day 2 Specific Styling */
#day2 {
    background: rgba(255, 255, 255, 0.05);
    /* Light gray tint */
    border-radius: 20px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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

.schedule-item {
    display: flex;
    background: var(--card-bg);
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 15px;
    border-left: 4px solid var(--primary-color);
    align-items: center;
}

.schedule-item .time {
    min-width: 140px;
    font-weight: 700;
    color: var(--accent-color);
    font-size: 1.1rem;
}

.schedule-item .details h4 {
    font-size: 1.2rem;
    margin-bottom: 5px;
}

.schedule-item .details p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

/* CTA Section */
.cta-section {
    background: var(--darker-bg);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.15), transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.cta-container {
    text-align: center;
    position: relative;
    z-index: 1;
}

.cta-container h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-form {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.cta-form input {
    padding: 12px 25px;
    border-radius: 50px;
    border: 1px solid var(--glass-border);
    background: rgba(255, 255, 255, 0.1);
    color: var(--white);
    width: 350px;
    font-size: 1rem;
    outline: none;
    transition: var(--transition);
}

.cta-form input:focus {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.15);
}

/* Footer */
.footer {
    background: #000;
    padding: 80px 0 30px;
    border-top: 1px solid var(--glass-border);
}

.footer-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 50px;
}

.footer-logo p {
    color: var(--text-muted);
    margin-top: 15px;
    font-size: 0.9rem;
}

.footer-links {
    display: flex;
    gap: 60px;
    flex-wrap: wrap;
}

.link-group h4 {
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.link-group a {
    display: block;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.link-group a:hover {
    color: var(--primary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    color: #64748b;
    font-size: 0.9rem;
}

.footer-bottom-logo {
    height: 40px;
    opacity: 0.8;
    transition: var(--transition);
}

.footer-bottom-logo:hover {
    opacity: 1;
}

/* Responsive */
@media (max-width: 900px) {
    .navbar-container {
        padding: 0 20px;
    }

    .hero-title {
        font-size: 3rem;
    }

    .schedule-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .schedule-item .time {
        margin-bottom: 10px;
    }
}

@media (max-width: 768px) {
    .nav-links {
        display: none;
        /* Hide for now, JS toggles */
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: rgba(2, 6, 23, 0.95);
        flex-direction: column;
        padding: 20px;
        border-bottom: 1px solid var(--glass-border);
    }

    .nav-links.active {
        display: flex;
    }

    .mobile-menu-btn {
        display: block;
    }

    .hero-title {
        font-size: 2.5rem;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        text-align: center;
    }

    .cta-form input {
        width: 100%;
    }

    .footer-content {
        flex-direction: column;
    }

    .footer-links {
        gap: 30px;
        flex-direction: column;
    }
}

/* Schedule Sub-categories and Breaks */
.session-category {
    font-size: 1.5rem;
    color: var(--primary-color);
    margin: 40px 0 20px 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--glass-border);
}

.break-time {
    display: flex;
    background: rgba(255, 255, 255, 0.03);
    padding: 15px 25px;
    border-radius: 15px;
    margin-bottom: 15px;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--glass-border);
    color: var(--text-muted);
}

.break-time .time {
    margin-right: 20px;
    font-weight: 700;
    color: var(--text-muted);
}

/* Scroll Animation */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, visibility;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: none;
}