/* 
   Amsterdam Conference 2026 
   Core Styles - Dark Premium Aesthetic
*/

@font-face {
    font-family: 'SF Pro Display';
    src: url('sf-pro-display/SFPRODISPLAYREGULAR.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

:root {
    --primary: #000000;
    --primary-dark: #000000;
    --accent: #d4a853;
    /* Gold */
    --accent-glow: rgba(212, 168, 83, 0.4);
    --text-light: #f0f0f0;
    --text-dim: #a0a0a0;
    --glass-bg: rgba(255, 255, 255, 0.08);
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-blur: 20px;
    --font-heading: 'SF Pro Display', sans-serif;
    --font-body: 'SF Pro Display', sans-serif;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scroll-padding-top: 80px;
    /* Adjust for fixed navbar height */
    overflow-y: scroll;
}

/* Enable snap only on mobile/touch where JS handler is disabled */
@media (max-width: 1024px) {
    html {
        scroll-snap-type: y mandatory;
    }

    section,
    .hero,
    footer {
        scroll-snap-align: start;
        scroll-snap-stop: always;
    }
}

body {
    background-color: #000000;
    color: var(--text-light);
    font-family: var(--font-body);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    color: white;
}

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

ul {
    list-style: none;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* --- Buttons --- */
.btn-primary {
    display: inline-block;
    padding: 14px 32px;
    background: var(--accent);
    color: var(--primary-dark);
    font-weight: 600;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    border: 2px solid var(--accent);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary:hover {
    background: transparent;
    color: var(--accent);
    box-shadow: 0 0 20px var(--accent-glow);
}

.btn-secondary {
    display: inline-block;
    padding: 14px 32px;
    background: transparent;
    color: white;
    font-weight: 600;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.9rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    margin-left: 15px;
}

.btn-secondary:hover {
    border-color: white;
    background: rgba(255, 255, 255, 0.1);
}

.btn-primary.small {
    padding: 10px 24px;
    font-size: 0.8rem;
}

.btn-primary.full-width {
    width: 100%;
    text-align: center;
    margin-top: 20px;
}

/* --- Navigation --- */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    padding: 20px 0;
    transition: var(--transition);
    background: transparent;
}

.navbar.scrolled {
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(var(--glass-blur));
    padding: 15px 0;
    box-shadow: 0 4px 30px rgba(212, 168, 83, 0.1);
    border-bottom: 1px solid var(--glass-border);
}

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

.logo {
    font-family: var(--font-heading);
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: -1px;
    display: flex;
    align-items: center;
}

.navbar-logo {
    height: 28px;
    width: auto;
    margin: 0 8px;
}

.logo .highlight {
    color: var(--accent);
}

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

.nav-social-item {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: -10px;
    /* Slight adjustment */
}

.nav-social-item a {
    color: var(--text-light);
    font-size: 1.2rem;
    transition: var(--transition);
}

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

.nav-links a:not(.btn-primary) {
    font-size: 0.95rem;
    opacity: 0.8;
    position: relative;
    /* Smooth transition for text color and shadow */
    transition: all 0.5s ease;
}

.nav-links a:not(.btn-primary):hover,
.nav-links a:not(.btn-primary).active {
    opacity: 1;
    color: var(--accent);
    /* Text glows as if illuminated by the point below */
    text-shadow: 0 0 12px rgba(212, 168, 83, 0.6), 0 0 24px rgba(212, 168, 83, 0.3);
}

.nav-links a:not(.btn-primary)::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%) scale(0);
    width: 4px;
    height: 4px;
    /* White hot center for realistic light source look */
    background-color: #fff;
    border-radius: 50%;
    /* Intense golden glow layers */
    box-shadow:
        0 0 6px 2px var(--accent),
        0 0 14px 4px var(--accent),
        0 0 25px var(--accent-glow);
    /* Exit animation: smooth and slightly quicker fade out */
    transition: transform 0.3s ease-in, opacity 0.2s ease-in;
    opacity: 0;
}

.nav-links a:not(.btn-primary).active::after {
    transform: translateX(-50%) scale(1);
    opacity: 1;
    /* Enter animation: bouncy bloom with delay to create "disappear then reappear" effect */
    transition: transform 0.7s cubic-bezier(0.25, 1.6, 0.5, 1) 0.15s, opacity 0.5s ease-out 0.15s;
}

.nav-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

/* --- Hero Section --- */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Fixed background video container - stays on screen throughout scroll */
.video-container {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 60vw;
    height: 60vh;
    transform: translate(-50%, -50%);
    z-index: 0;
    pointer-events: none;
    will-change: transform, opacity;
    /* Mask to fade edges and specifically the bottom */
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 15%,
            rgba(0, 0, 0, 1) 85%,
            rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 1) 15%,
            rgba(0, 0, 0, 1) 85%,
            rgba(0, 0, 0, 0) 100%);
}

.video-container::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Soft vignette/gradient to blend all edges into black */
    background: radial-gradient(circle, transparent 20%, black 95%);
    z-index: 1;
}

#bg-video {
    width: 100%;
    height: 100%;
    object-fit: contain;
    opacity: 0.6;
    /* Extra blur on edges if needed, but mask is primary */
    filter: drop-shadow(0 0 20px black);
}

/* Overlay removed - video is now always visible in background */
.overlay {
    display: none;
}

/* Hero content responsive to video */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 800px;
    padding: 0 20px;
    will-change: transform, opacity;
}

.hero-date {
    display: block;
    font-size: 2.2rem;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 20px;
}

.hero-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
    line-height: 1.1;
    margin-bottom: 20px;
    letter-spacing: -2px;
}

.hero-subtitle {
    font-size: 1.4rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 40px;
}

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

.scroll-down {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 1.5rem;
    animation: bounce 2s infinite;
    opacity: 0.7;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    40% {
        transform: translateX(-50%) translateY(-10px);
    }

    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* --- Sections General --- */
.section {
    min-height: 100vh;
    padding: 100px 0;
    position: relative;
    z-index: 1;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

#schedule.section {
    padding: 60px 0;
}

.section-title {
    font-size: 3rem;
    margin-bottom: 60px;
    text-align: center;
    position: relative;
    display: block;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(to right, #fff, #999);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.section-subtitle {
    text-align: center;
    max-width: 600px;
    margin: -40px auto 60px;
    color: var(--text-dim);
    font-size: 1.1rem;
}

/* --- About Section --- */
.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    width: 100%;
}

.about-text .lead {
    font-size: 1.5rem;
    color: white;
    margin-bottom: 20px;
    font-weight: 300;
}

.about-text p {
    color: var(--text-dim);
    margin-bottom: 20px;
    font-size: 1.1rem;
}

.stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.stat-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    backdrop-filter: blur(var(--glass-blur));
    padding: 30px;
    text-align: center;
    border-radius: 20px;
    transition: var(--transition);
}

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

.stat-number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: var(--accent);
    font-family: var(--font-heading);
}

.stat-label {
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    color: var(--text-dim);
}

/* --- Speakers Section --- */
.speakers-section {
    background: transparent;
    padding: 20px 0;
    height: 100vh;
    max-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}

.speakers-section .section-title {
    font-size: 2rem;
    margin-bottom: 5px;
}

.speakers-section .section-subtitle {
    margin: 0 auto 10px;
    font-size: 0.9rem;
    max-width: 500px;
}

.speakers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 15px;
    margin: 0 auto;
    width: 100%;
    /* aspect-ratio will be applied within the media query where this fixed layout is guaranteed */
}

.speaker-card {
    background: #111;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    transform-origin: center center;
}

.speaker-card:nth-child(1) {
    transform: rotate(-6deg) translate(5px, 10px);
    z-index: 1;
}

.speaker-card:nth-child(2) {
    transform: rotate(4deg) translate(-5px, 5px);
    z-index: 2;
}

.speaker-card:nth-child(3) {
    transform: rotate(-3deg) translate(-10px, 10px);
    z-index: 1;
}

.speaker-card:nth-child(4) {
    transform: rotate(5deg) translate(10px, -5px);
    z-index: 2;
}

.speaker-card:nth-child(5) {
    transform: rotate(-2deg) scale(1.05);
    z-index: 3;
}

.speaker-card:nth-child(6) {
    transform: rotate(7deg) translate(-5px, -10px);
    z-index: 2;
}

.speaker-card:nth-child(7) {
    transform: rotate(-5deg) translate(10px, -5px);
    z-index: 1;
}

.speaker-card:nth-child(8) {
    transform: rotate(3deg) translate(-5px, 10px);
    z-index: 2;
}

.speaker-card:nth-child(9) {
    transform: rotate(-4deg) translate(-10px, -5px);
    z-index: 1;
}

.speaker-card:nth-child(10) {
    transform: rotate(2deg) translate(-15px, -5px);
    z-index: 2;
}

.speaker-card:nth-child(11) {
    transform: rotate(-4deg) translate(-12px, 5px);
    z-index: 1;
}

.speaker-card:nth-child(12) {
    transform: rotate(5deg) translate(-15px, 8px);
    z-index: 2;
}

@media (min-width: 1101px) {
    .speakers-grid {
        aspect-ratio: 4 / 3;
        height: 70vh;
        max-height: 800px;
        width: auto;
    }

    .speaker-card:nth-child(10) {
        grid-area: 1 / 4;
    }

    .speaker-card:nth-child(11) {
        grid-area: 2 / 4;
    }

    .speaker-card:nth-child(12) {
        grid-area: 3 / 4;
    }
}

@media (max-width: 1100px) and (min-width: 769px) {
    .speakers-grid {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: auto;
        height: auto;
        max-height: none;
        aspect-ratio: auto;
        width: 100%;
        gap: 15px;
    }

    .speaker-card {
        height: min(260px, 32vw);
    }
}

.speaker-card:hover,
.speaker-card.hover-active {
    transform: scale(1.15) rotate(0deg) !important;
    border-color: var(--accent);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 20px var(--accent-glow);
    z-index: 100;
}

.speaker-card.is-expanding {
    transform: scale(3) rotate(0deg) !important;
    opacity: 0;
    z-index: 2500;
    pointer-events: none;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s ease;
}

.speaker-image {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.speaker-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: object-position 0.4s ease, transform 0.4s ease;
}

/* Individual eye‑focus adjustments */
/* Per‑speaker object‑position overrides removed – all images focus on the top (50% 0%) */

.speaker-card:hover .speaker-image img {
    transform: scale(1.05);
}

.speaker-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: var(--transition);
    padding: 15px;
    text-align: center;
}

.speaker-card:hover .speaker-overlay {
    opacity: 1;
}

.view-bio {
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    padding: 6px 15px;
    border: 1px solid white;
    border-radius: 50px;
    margin-top: 10px;
}

.speaker-info {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));
    padding: 15px 10px 10px;
    text-align: center;
    transition: var(--transition);
}

.speaker-card:hover .speaker-info {
    opacity: 0;
    transform: translateY(10px);
}

.speaker-info h3 {
    font-size: 1rem;
    margin-bottom: 2px;
    color: white;
}

.speaker-role {
    color: var(--accent);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

/* Speaker Bio Popup */
.speaker-bio-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(15px);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.speaker-bio-popup.active {
    opacity: 1;
    pointer-events: all;
}

.bio-content {
    background: rgba(15, 15, 15, 0.95);
    border: 1px solid var(--accent);
    padding: 60px;
    border-radius: 30px;
    max-width: 600px;
    width: 90%;
    position: relative;
    transform: scale(0.9) translateY(20px);
    opacity: 0;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease;
    box-shadow: 0 30px 100px rgba(0, 0, 0, 0.8), 0 0 40px var(--accent-glow);
}

.speaker-bio-popup.active .bio-content {
    transform: scale(1) translateY(0);
    opacity: 1;
}

.close-bio {
    position: absolute;
    top: 20px;
    right: 25px;
    background: none;
    border: none;
    color: white;
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
    transition: var(--transition);
}

.close-bio:hover {
    color: var(--accent);
    transform: rotate(90deg);
}

.bio-content h3 {
    font-size: 2.5rem;
    color: var(--accent);
    margin-bottom: 5px;
}

.role-highlight {
    color: white;
    font-weight: 500;
    margin-bottom: 25px;
    font-size: 1.1rem;
    display: block;
}

.bio-content p {
    color: var(--text-dim);
    line-height: 1.8;
    font-size: 1.1rem;
}



/* --- Media Section --- */

.media-section {
    background: transparent;
}

.media-section .container {
    width: 100%;
}

.gallery-container {
    position: relative;
    width: 100%;
    /* Allow cards to poke out slightly */
    padding: 20px;
    overflow: visible;
}

/* --- Masonry/Grid Square Layout Pyramidal --- */
.gallery-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 12px;

    /* Make the whole structure a square */
    aspect-ratio: 1 / 1;

    /* Fit in screen size (accounting for header & title) */
    height: 70vh;
    max-height: 800px;

    /* Center the square structure */
    margin: 0 auto;
    width: auto;
    /* Width calculated by aspect-ratio from height */
}

/* Ensure the grid doesn't overflow horizontally on narrow screens */
/* Ensure the grid keeps strictly square and fits on screen on all devices */
@media (max-width: 1024px) {
    .gallery-masonry {
        /* On tablets/smaller laptops, ensure it doesn't get too tall */
        height: auto;
        width: min(80vw, 65vh);
    }
}

@media (max-width: 600px) {
    .gallery-masonry {
        /* On mobile: 
           Use min() to ensure it fits in width (95vw) 
           AND fits in height (60vh) so header + square + footer don't overflow. 
        */
        width: min(95vw, 60vh);
        gap: 6px;
    }
}

.gallery-item {
    width: 100%;
    height: 100%;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, z-index 0s;
    background: #111;
    margin: 0;
    /* Base transform to be overridden by nth-child */
    transform-origin: center center;
    animation: floating-tile 8s ease-in-out infinite alternate;
    animation-delay: var(--delay, 0s);
    will-change: transform;
}

@keyframes floating-tile {
    from {
        transform: translate(var(--tx, 0), var(--ty, 0)) scale(var(--ts, 1));
    }

    to {
        transform: translate(calc(var(--tx, 0) + 10px), calc(var(--ty, 0) - 10px)) scale(calc(var(--ts, 1) + 0.03));
    }
}

/* "Floating Mosaic" Disposition - No rotations, just depth and shifts */
.gallery-item:nth-child(1) {
    --tx: -8px;
    --ty: 10px;
    --ts: 0.95;
    --delay: 0s;
    z-index: 1;
}

.gallery-item:nth-child(2) {
    --tx: 2px;
    --ty: -12px;
    --ts: 1.02;
    --delay: -1.5s;
    z-index: 2;
}

.gallery-item:nth-child(3) {
    --tx: 10px;
    --ty: 8px;
    --ts: 0.97;
    --delay: -3s;
    z-index: 1;
}

.gallery-item:nth-child(4) {
    --tx: -12px;
    --ty: -5px;
    --ts: 1.01;
    --delay: -4.5s;
    z-index: 2;
}

.gallery-item:nth-child(5) {
    --tx: 0px;
    --ty: 0px;
    --ts: 1.08;
    --delay: -1s;
    z-index: 4;
}

/* Core card */
.gallery-item:nth-child(6) {
    --tx: 8px;
    --ty: -10px;
    --ts: 1.03;
    --delay: -2.2s;
    z-index: 2;
}

.gallery-item:nth-child(7) {
    --tx: -10px;
    --ty: 5px;
    --ts: 0.98;
    --delay: -5.1s;
    z-index: 1;
}

.gallery-item:nth-child(8) {
    --tx: 5px;
    --ty: 12px;
    --ts: 1.04;
    --delay: -3.7s;
    z-index: 2;
}

.gallery-item:nth-child(9) {
    --tx: -5px;
    --ty: -8px;
    --ts: 0.96;
    --delay: -0.8s;
    z-index: 1;
}

.gallery-item:hover,
.gallery-item.hover-active {
    /* Focus the card: clear floating animation, scale up, bring to front */
    animation: none !important;
    transform: scale(1.15) translate(0, 0) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.8), 0 0 30px var(--accent-glow);
    z-index: 500 !important;
    cursor: pointer;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient covers 100%, Image is small (34%) and at bottom center */
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)) center/cover no-repeat,
        url('pictures/carroussel/curious.PNG') center bottom/34% no-repeat;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.view-icon {
    color: white;
    font-size: 1.2rem;
    font-family: var(--font-heading);
    letter-spacing: 1px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    padding: 6px 12px;
    border-radius: 20px;
    backdrop-filter: blur(4px);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.gallery-item:hover .view-icon {
    transform: scale(1);
}

/* On very small mobile, keep structure square as requested */
@media (max-width: 480px) {
    .gallery-masonry {
        gap: 6px;
        width: 95%;
    }

    .view-icon {
        font-size: 0.8rem;
        padding: 4px 8px;
    }
}

/* Lightbox */
.lightbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.lightbox-content img {
    max-width: 90%;
    max-height: 90vh;
    border-radius: 5px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 30px;
    right: 30px;
    background: none;
    border: none;
    color: white;
    font-size: 2rem;
    cursor: pointer;
}

/* --- Schedule Section --- */
#schedule .section-title {
    margin-bottom: 30px;
}

.schedule-tabs {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 30px;
}

.tab-btn {
    background: transparent;
    border: none;
    color: var(--text-dim);
    font-size: 1.2rem;
    padding: 10px 20px;
    cursor: pointer;
    position: relative;
    font-family: var(--font-heading);
    transition: var(--transition);
}

.tab-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 2px;
    background: var(--accent);
    transition: var(--transition);
}

.tab-btn.active {
    color: white;
}

.tab-btn.active::after {
    width: 100%;
}

.schedule-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.day-schedule {
    display: none;
    width: 100%;
}

.day-schedule.active {
    display: block;
    animation: fadeIn 0.5s ease;
}

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

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

.timeline {
    position: relative;
    padding-left: 30px;
    border-left: 1px solid var(--glass-border);
}

.slot {
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 20px 25px;
    border-radius: 15px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: var(--transition);
}

.slot:hover {
    background: rgba(255, 255, 255, 0.08);
}

.slot::before {
    content: '';
    position: absolute;
    left: -36px;
    /* -30px padding + half dot width */
    top: 30px;
    width: 12px;
    height: 12px;
    background: var(--accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--accent-glow);
}

.slot-time {
    font-weight: 700;
    color: var(--accent);
    margin-bottom: 5px;
    font-size: 0.9rem;
}

.slot-content {
    padding-right: 40px;
}

.slot-content h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}

.speaker-highlight {
    color: var(--accent);
}

.slot-desc {
    color: var(--text-dim);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.slot.expanded .slot-desc {
    max-height: 200px;
    margin-top: 10px;
}

.slot-toggle {
    position: absolute;
    right: 25px;
    top: 25px;
    color: var(--text-dim);
    transition: var(--transition);
}

.slot.expanded .slot-toggle {
    transform: rotate(45deg);
    color: white;
}

/* --- Info Section --- */
.info-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 40px;
    height: 70vh;
    width: 100%;
}

.map-container {
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    filter: invert(90%) hue-rotate(180deg) contrast(90%);
    /* Dark map styling trick */
}

.info-details {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.info-card {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    padding: 30px;
    border-radius: 20px;
    flex: 1;
}

.info-card.highlight-card {
    border-color: var(--accent);
    background: linear-gradient(135deg, rgba(212, 168, 83, 0.1), transparent);
}

.info-card h3 {
    margin-bottom: 15px;
    color: white;
}

.info-card p {
    color: var(--text-dim);
    margin-bottom: 10px;
}

.social-links {
    margin-top: 15px;
    display: flex;
    gap: 15px;
}

.press-file-box {
    margin: 20px 0;
}

.press-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: white;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    width: fit-content;
}

.press-link i {
    color: var(--accent);
    font-size: 1.2rem;
}

.press-link:hover {
    background: rgba(212, 168, 83, 0.1);
    border-color: var(--accent);
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3), 0 0 15px var(--accent-glow);
}

.social-links a {
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.social-links a:hover {
    background: var(--accent);
    color: var(--primary);
}

footer {
    padding: 60px 0 30px;
    border-top: 1px solid var(--glass-border);
    color: var(--text-dim);
    font-size: 0.9rem;
    scroll-snap-align: start;
    min-height: 200px;
    /* Ensure it's a valid snap point */
}

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

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

/* --- Animations --- */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition);
}

.fade-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease;
}

.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

/* --- Angelic Effects --- */

/* Floating feathers container */
.feather-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
}

.feather {
    position: absolute;
    top: -40px;
    opacity: 0;
    color: rgba(255, 255, 255, 0.15);
    font-size: 18px;
    animation: featherFall linear infinite;
    filter: drop-shadow(0 0 6px rgba(212, 168, 83, 0.3));
    will-change: transform, opacity;
}

/* Diet Coke can particle */
.diet-coke-can {
    display: inline-block;
    color: transparent;
    filter: drop-shadow(0 0 4px rgba(212, 168, 83, 0.2));
}

.diet-coke-can svg {
    width: 100%;
    height: auto;
    animation: canTumble 4s ease-in-out infinite;
}

@keyframes canTumble {

    0%,
    100% {
        transform: rotate(-8deg);
    }

    25% {
        transform: rotate(5deg);
    }

    50% {
        transform: rotate(-4deg);
    }

    75% {
        transform: rotate(7deg);
    }
}

/* Volleyball particle */
.volleyball {
    display: inline-block;
    color: transparent;
    filter: drop-shadow(0 0 4px rgba(212, 168, 83, 0.2));
}

.volleyball svg {
    width: 100%;
    height: auto;
    animation: ballSpin 6s linear infinite;
}

@keyframes ballSpin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Coin particle */
.coin-particle {
    display: inline-block;
    color: transparent;
    filter: drop-shadow(0 0 5px rgba(212, 168, 83, 0.3));
}

.coin-particle svg {
    width: 100%;
    height: auto;
    animation: coinSpin 5s linear infinite;
}

@keyframes coinSpin {
    0% {
        transform: rotateY(0deg);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes featherFall {
    0% {
        opacity: 0;
        transform: translateY(0) rotate(0deg) translateX(0);
    }

    10% {
        opacity: 0.6;
    }

    50% {
        opacity: 0.4;
        transform: translateY(45vh) rotate(180deg) translateX(60px);
    }

    75% {
        opacity: 0.25;
    }

    100% {
        opacity: 0;
        transform: translateY(115vh) rotate(420deg) translateX(-50px);
    }
}

/* Golden halo glow behind section titles */
.section-title::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200%;
    height: 300%;
    background: radial-gradient(ellipse at center,
            rgba(212, 168, 83, 0.12) 0%,
            rgba(212, 168, 83, 0.05) 30%,
            transparent 60%);
    pointer-events: none;
    z-index: -1;
    animation: haloBreath 4s ease-in-out infinite;
}

@keyframes haloBreath {

    0%,
    100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

/* Hero divine light rays */
.hero::before {
    content: '';
    position: absolute;
    top: -30%;
    left: 50%;
    transform: translateX(-50%);
    width: 120%;
    height: 80%;
    background: conic-gradient(from 90deg at 50% 0%,
            transparent 0deg,
            rgba(212, 168, 83, 0.04) 15deg,
            transparent 30deg,
            rgba(255, 255, 255, 0.03) 50deg,
            transparent 70deg,
            rgba(212, 168, 83, 0.04) 100deg,
            transparent 120deg,
            rgba(255, 255, 255, 0.03) 150deg,
            transparent 170deg,
            rgba(212, 168, 83, 0.04) 200deg,
            transparent 220deg,
            rgba(255, 255, 255, 0.03) 260deg,
            transparent 290deg,
            rgba(212, 168, 83, 0.04) 320deg,
            transparent 345deg,
            transparent 360deg);
    pointer-events: none;
    z-index: 1;
    animation: divineRays 20s linear infinite;
    opacity: 0.8;
}

@keyframes divineRays {
    0% {
        transform: translateX(-50%) rotate(0deg);
    }

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

/* Shimmer sweep on buttons */
.btn-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.25),
            transparent);
    transition: none;
    animation: shimmerSweep 3s ease-in-out infinite;
    z-index: 2;
}

@keyframes shimmerSweep {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 150%;
    }
}

/* Sparkle dots floating up from gold elements */
.stat-card::before {
    content: '';
    position: absolute;
    top: -10px;
    right: -10px;
    width: 18px;
    height: 18px;
    background-image: url('transparentlogo.PNG');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0;
    animation: sparkleFloat 3s ease-in-out infinite;
    pointer-events: none;
}

.stat-card:nth-child(2)::before {
    animation-delay: 0.7s;
}

.stat-card:nth-child(3)::before {
    animation-delay: 1.4s;
}

.stat-card:nth-child(4)::before {
    animation-delay: 2.1s;
}

@keyframes sparkleFloat {

    0%,
    100% {
        opacity: 0;
        transform: translateY(0) scale(0.5);
    }

    30% {
        opacity: 0.8;
        transform: translateY(-12px) scale(1);
    }

    60% {
        opacity: 0.4;
        transform: translateY(-24px) scale(0.8);
    }

    90% {
        opacity: 0;
        transform: translateY(-36px) scale(0.3);
    }
}

/* Ethereal glow on hero title */
.hero-title {
    text-shadow:
        0 0 40px rgba(212, 168, 83, 0.15),
        0 0 80px rgba(212, 168, 83, 0.08);
}

/* Soft halo ring behind hero date */
.hero-date::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 250%;
    height: 400%;
    border: 1px solid rgba(212, 168, 83, 0.08);
    border-radius: 50%;
    pointer-events: none;
    animation: haloRing 5s ease-in-out infinite alternate;
}

.hero-date {
    position: relative;
}

@keyframes haloRing {
    0% {
        opacity: 0.3;
        transform: translate(-50%, -50%) scale(0.9);
        border-color: rgba(212, 168, 83, 0.08);
    }

    100% {
        opacity: 0.7;
        transform: translate(-50%, -50%) scale(1.1);
        border-color: rgba(212, 168, 83, 0.15);
    }
}

/* Angelic glow on schedule timeline */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -1px;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom,
            transparent,
            rgba(212, 168, 83, 0.5),
            rgba(212, 168, 83, 0.2),
            rgba(212, 168, 83, 0.5),
            transparent);
    animation: timelineGlow 4s ease-in-out infinite alternate;
}

@keyframes timelineGlow {
    0% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}

/* Flying angel silhouettes */
.angel-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 4;
    overflow: hidden;
}

.angel {
    position: absolute;
    width: 70px;
    height: 70px;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    filter: drop-shadow(0 0 10px rgba(212, 168, 83, 0.25));
}

.angel svg {
    width: 100%;
    height: 100%;
}

/* Flight path: ascending left to right */
@keyframes angelFlightLR {
    0% {
        opacity: 0;
        transform: translate(-60px, var(--start-y)) scale(var(--angel-scale)) scaleX(1) rotate(5deg);
    }

    8% {
        opacity: var(--angel-opacity);
    }

    25% {
        transform: translate(20vw, calc(var(--start-y) - 25vh)) scale(var(--angel-scale)) scaleX(1) rotate(-3deg);
    }

    50% {
        transform: translate(45vw, calc(var(--start-y) - 50vh)) scale(var(--angel-scale)) scaleX(1) rotate(4deg);
        opacity: var(--angel-opacity);
    }

    75% {
        transform: translate(70vw, calc(var(--start-y) - 70vh)) scale(var(--angel-scale)) scaleX(1) rotate(-2deg);
    }

    92% {
        opacity: var(--angel-opacity);
    }

    100% {
        opacity: 0;
        transform: translate(110vw, calc(var(--start-y) - 110vh)) scale(var(--angel-scale)) scaleX(1) rotate(5deg);
    }
}

/* Flight path: ascending right to left */
@keyframes angelFlightRL {
    0% {
        opacity: 0;
        transform: translate(105vw, var(--start-y)) scale(var(--angel-scale)) scaleX(-1) rotate(5deg);
    }

    8% {
        opacity: var(--angel-opacity);
    }

    25% {
        transform: translate(80vw, calc(var(--start-y) - 22vh)) scale(var(--angel-scale)) scaleX(-1) rotate(-4deg);
    }

    50% {
        transform: translate(55vw, calc(var(--start-y) - 48vh)) scale(var(--angel-scale)) scaleX(-1) rotate(3deg);
        opacity: var(--angel-opacity);
    }

    75% {
        transform: translate(30vw, calc(var(--start-y) - 68vh)) scale(var(--angel-scale)) scaleX(-1) rotate(-3deg);
    }

    92% {
        opacity: var(--angel-opacity);
    }

    100% {
        opacity: 0;
        transform: translate(-15vw, calc(var(--start-y) - 105vh)) scale(var(--angel-scale)) scaleX(-1) rotate(-3deg);
    }
}

/* Flight path: steep center ascension */
@keyframes angelFlightDiag {
    0% {
        opacity: 0;
        transform: translate(var(--start-x), var(--start-y)) scale(var(--angel-scale)) scaleX(1) rotate(-5deg);
    }

    8% {
        opacity: var(--angel-opacity);
    }

    30% {
        transform: translate(calc(var(--start-x) + 10vw), calc(var(--start-y) - 30vh)) scale(var(--angel-scale)) scaleX(1) rotate(6deg);
    }

    60% {
        transform: translate(calc(var(--start-x) - 5vw), calc(var(--start-y) - 55vh)) scale(var(--angel-scale)) scaleX(1) rotate(-4deg);
        opacity: var(--angel-opacity);
    }

    92% {
        opacity: var(--angel-opacity);
    }

    100% {
        opacity: 0;
        transform: translate(calc(var(--start-x) + 20vw), calc(var(--start-y) - 115vh)) scale(var(--angel-scale)) scaleX(1) rotate(5deg);
    }
}

/* Subtle wing flutter */
@keyframes wingFlutter {

    0%,
    100% {
        transform: scaleX(1);
    }

    50% {
        transform: scaleX(0.85);
    }
}

.angel .wing-left,
.angel .wing-right {
    animation: wingFlutter 0.8s ease-in-out infinite;
    transform-origin: center;
}

.angel .wing-right {
    animation-delay: 0.1s;
}


/* --- Enter/Splash Landing Page --- */
body.enter-active {
    overflow: hidden;
}

.enter-page {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: #000;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.enter-page.exit {
    pointer-events: none;
    background: transparent !important;
    transition: background 1.2s ease 0.4s;
}

/* Cards scatter outward on exit */
.enter-page.exit .enter-card:nth-child(1) {
    animation: cardScatter1 0.9s cubic-bezier(0.55, 0, 1, 0.45) forwards !important;
}

.enter-page.exit .enter-card:nth-child(2) {
    animation: cardScatter2 0.9s cubic-bezier(0.55, 0, 1, 0.45) 0.05s forwards !important;
}

.enter-page.exit .enter-card:nth-child(3) {
    animation: cardScatter3 0.9s cubic-bezier(0.55, 0, 1, 0.45) 0.1s forwards !important;
}

.enter-page.exit .enter-card:nth-child(4) {
    animation: cardScatter4 0.9s cubic-bezier(0.55, 0, 1, 0.45) 0.08s forwards !important;
}

.enter-page.exit .enter-card:nth-child(5) {
    animation: cardScatter5 0.9s cubic-bezier(0.55, 0, 1, 0.45) 0.12s forwards !important;
}

.enter-page.exit .enter-card:nth-child(6) {
    animation: cardScatter6 0.9s cubic-bezier(0.55, 0, 1, 0.45) 0.06s forwards !important;
}

@keyframes cardScatter1 {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.6) translate(-120%, -80%) rotate(-18deg);
        filter: blur(8px);
    }
}

@keyframes cardScatter2 {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.5) translate(10%, -130%) rotate(12deg);
        filter: blur(10px);
    }
}

@keyframes cardScatter3 {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.6) translate(130%, -70%) rotate(20deg);
        filter: blur(8px);
    }
}

@keyframes cardScatter4 {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.5) translate(-140%, 90%) rotate(15deg);
        filter: blur(10px);
    }
}

@keyframes cardScatter5 {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.6) translate(0%, 140%) rotate(-10deg);
        filter: blur(8px);
    }
}

@keyframes cardScatter6 {
    0% {
        opacity: 1;
        transform: scale(1) translate(0, 0) rotate(0deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.5) translate(150%, 80%) rotate(-22deg);
        filter: blur(10px);
    }
}

/* Logo bursts with golden light on exit */
.enter-page.exit .enter-logo {
    animation: logoBurst 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes logoBurst {
    0% {
        opacity: 1;
        transform: scale(1);
        filter: drop-shadow(0 0 20px rgba(212, 168, 83, 0.4));
    }

    40% {
        opacity: 1;
        transform: scale(1.8);
        filter: drop-shadow(0 0 60px rgba(212, 168, 83, 1)) brightness(2);
    }

    100% {
        opacity: 0;
        transform: scale(3);
        filter: drop-shadow(0 0 100px rgba(212, 168, 83, 0.8)) brightness(3) blur(10px);
    }
}

/* Text and buttons fade up and out */
.enter-page.exit .enter-info {
    animation: exitFadeUp 0.5s ease forwards;
}

.enter-page.exit .enter-buttons {
    animation: exitFadeUp 0.5s ease 0.05s forwards;
}

@keyframes exitFadeUp {
    0% {
        opacity: 1;
        transform: translateY(0);
    }

    100% {
        opacity: 0;
        transform: translateY(-30px);
        filter: blur(4px);
    }
}

/* Golden flash overlay (injected via JS) */
.enter-flash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(212, 168, 83, 0.6), rgba(212, 168, 83, 0.2), transparent 70%);
    opacity: 0;
    animation: goldenFlash 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes goldenFlash {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }

    25% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }

    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

/* Horizontal golden wipe line (injected via JS) */
.enter-wipe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10001;
    pointer-events: none;
    overflow: hidden;
}

.enter-wipe::before {
    content: '';
    position: absolute;
    top: 0;
    left: -10%;
    width: 6px;
    height: 100%;
    background: linear-gradient(180deg, transparent, rgba(212, 168, 83, 0.9), rgba(255, 255, 255, 0.8), rgba(212, 168, 83, 0.9), transparent);
    box-shadow: 0 0 40px 15px rgba(212, 168, 83, 0.5), 0 0 80px 30px rgba(212, 168, 83, 0.2);
    animation: wipeAcross 0.8s cubic-bezier(0.45, 0, 0.55, 1) 0.3s forwards;
}

@keyframes wipeAcross {
    0% {
        left: -10%;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        left: 110%;
        opacity: 0;
    }
}

/* Final fade of the whole enter page backdrop */
.enter-page.exit .enter-vignette {
    animation: vignetteFade 1s ease 0.6s forwards;
}

@keyframes vignetteFade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* Particle canvas accelerate and fade */
.enter-page.exit #enter-canvas {
    animation: canvasFade 1.2s ease 0.3s forwards;
}

@keyframes canvasFade {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: scale(1.3);
    }
}

#enter-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.enter-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(ellipse at center, transparent 30%, rgba(0, 0, 0, 0.75) 100%);
    opacity: 0;
    animation: vignetteFadeIn 1.5s ease 0.1s forwards;
}

@keyframes vignetteFadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.enter-wrapper {
    position: relative;
    z-index: 2;
    width: 90%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    text-align: center;
}

.enter-main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.enter-logo {
    width: 150px;
    height: auto;
    opacity: 0;
    transform: scale(0.5) translateY(10px);
    filter: drop-shadow(0 0 0px rgba(212, 168, 83, 0));
    animation: enterLogoReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

@keyframes enterLogoReveal {
    0% {
        opacity: 0;
        transform: scale(0.5) translateY(10px);
        filter: drop-shadow(0 0 0px rgba(212, 168, 83, 0));
    }

    50% {
        opacity: 1;
        transform: scale(1.15) translateY(-5px);
        filter: drop-shadow(0 0 40px rgba(212, 168, 83, 0.8));
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
        filter: drop-shadow(0 0 20px rgba(212, 168, 83, 0.4));
    }
}

/* ── Arc Spread Layout (absolute, no overlap, true ratios) ── */
.enter-mosaic {
    position: relative;
    width: 100%;
    max-width: 820px;
    height: 320px;
    margin: 0 auto;
    perspective: 1200px;
}

.enter-card {
    position: absolute;
    border-radius: 10px;
    overflow: hidden;
    opacity: 0;
    filter: blur(12px);
    border: 1px solid rgba(212, 168, 83, 0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    will-change: transform, opacity, filter;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* After entrance animation finishes, JS adds this class */
.enter-card.arc-ready {
    animation: none !important;
    opacity: 1;
    filter: blur(0);
    border-color: rgba(212, 168, 83, 0.15);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
}

/* Mobile Random Expansion */
@media (max-width: 768px) {

    /* Use high specificity to override resting transforms */
    .enter-card.arc-ready.mobile-peek {
        z-index: 100 !important;
        transform: scale(2.2) rotate(0deg) !important;
        box-shadow: 0 24px 80px rgba(0, 0, 0, 0.7), 0 0 40px rgba(212, 168, 83, 0.3) !important;
        border-color: rgba(212, 168, 83, 0.6) !important;
        filter: blur(0) !important;
    }

    /* Keep edge cards within screen and above info text during expansion */
    .enter-card.arc-ready.mobile-peek:nth-child(1) {
        transform: scale(2.2) rotate(0deg) translateX(30px) translateY(-40px) !important;
    }

    .enter-card.arc-ready.mobile-peek:nth-child(6) {
        transform: scale(2.2) rotate(0deg) translateX(-30px) translateY(-40px) !important;
    }
}

/* Resting transforms for each card once animation completes */
.enter-card.arc-ready:nth-child(1) {
    transform: rotate(-3deg) scale(1);
}

.enter-card.arc-ready:nth-child(2) {
    transform: rotate(1deg) scale(1);
}

.enter-card.arc-ready:nth-child(3) {
    transform: rotate(2deg) scale(1);
}

.enter-card.arc-ready:nth-child(4) {
    transform: rotate(-2deg) scale(1);
}

.enter-card.arc-ready:nth-child(5) {
    transform: rotate(2deg) scale(1);
}

.enter-card.arc-ready:nth-child(6) {
    transform: rotate(-2deg) scale(1);
}

/* ── Card 1: IMG_2986 — far left, low ── */
.enter-card:nth-child(1) {
    width: 14%;
    aspect-ratio: 880 / 1168;
    left: 0;
    bottom: 3%;
    transform: translateX(-80px) rotate(-4deg) scale(0.7);
    animation: arcIn1 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.9s forwards;
}

/* ── Card 2: IMG_2987 — left-center, mid ── */
.enter-card:nth-child(2) {
    width: 27%;
    aspect-ratio: 1024 / 559;
    left: 16%;
    bottom: 18%;
    transform: translateY(-50px) rotate(1deg) scale(0.7);
    animation: arcIn2 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.15s forwards;
}

/* ── Card 3: IMG_3033 — center-left, high ── */
.enter-card:nth-child(3) {
    width: 13%;
    aspect-ratio: 904 / 1280;
    left: 44.5%;
    bottom: 31%;
    transform: translateY(-60px) rotate(2deg) scale(0.7);
    animation: arcIn3 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.4s forwards;
}

/* ── Card 4: photo-output 14 — center-right, high ── */
.enter-card:nth-child(4) {
    width: 13.5%;
    aspect-ratio: 1636 / 2048;
    left: 59.5%;
    bottom: 28%;
    transform: translateY(50px) rotate(-2deg) scale(0.7);
    animation: arcIn4 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.65s forwards;
}

/* ── Card 5: photo-output 15 — right-center, mid ── */
.enter-card:nth-child(5) {
    width: 12.8%;
    aspect-ratio: 1366 / 2046;
    left: 75.3%;
    bottom: 12.5%;
    transform: translateX(60px) rotate(3deg) scale(0.7);
    animation: arcIn5 1.1s cubic-bezier(0.16, 1, 0.3, 1) 1.9s forwards;
}

/* ── Card 6: photo-output 33 — far right, low ── */
.enter-card:nth-child(6) {
    width: 11.5%;
    aspect-ratio: 2526 / 4096;
    left: 90%;
    bottom: 0;
    transform: translateX(80px) rotate(-3deg) scale(0.7);
    animation: arcIn6 1.1s cubic-bezier(0.16, 1, 0.3, 1) 2.15s forwards;
}

/* ── Arc Entrance Keyframes ── */
@keyframes arcIn1 {
    0% {
        opacity: 0;
        transform: translateX(-80px) rotate(-4deg) scale(0.7);
        filter: blur(12px);
        border-color: rgba(212, 168, 83, 0);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    80% {
        border-color: rgba(212, 168, 83, 0.4);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(212, 168, 83, 0.15);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(-3deg) scale(1);
        filter: blur(0);
        border-color: rgba(212, 168, 83, 0.15);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    }
}

@keyframes arcIn2 {
    0% {
        opacity: 0;
        transform: translateY(-50px) rotate(1deg) scale(0.7);
        filter: blur(12px);
        border-color: rgba(212, 168, 83, 0);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    80% {
        border-color: rgba(212, 168, 83, 0.4);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(212, 168, 83, 0.15);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(1deg) scale(1);
        filter: blur(0);
        border-color: rgba(212, 168, 83, 0.15);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    }
}

@keyframes arcIn3 {
    0% {
        opacity: 0;
        transform: translateY(-60px) rotate(2deg) scale(0.7);
        filter: blur(12px);
        border-color: rgba(212, 168, 83, 0);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    80% {
        border-color: rgba(212, 168, 83, 0.4);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(212, 168, 83, 0.15);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(2deg) scale(1);
        filter: blur(0);
        border-color: rgba(212, 168, 83, 0.15);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    }
}

@keyframes arcIn4 {
    0% {
        opacity: 0;
        transform: translateY(50px) rotate(-2deg) scale(0.7);
        filter: blur(12px);
        border-color: rgba(212, 168, 83, 0);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    80% {
        border-color: rgba(212, 168, 83, 0.4);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(212, 168, 83, 0.15);
    }

    100% {
        opacity: 1;
        transform: translateY(0) rotate(-2deg) scale(1);
        filter: blur(0);
        border-color: rgba(212, 168, 83, 0.15);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    }
}

@keyframes arcIn5 {
    0% {
        opacity: 0;
        transform: translateX(60px) rotate(3deg) scale(0.7);
        filter: blur(12px);
        border-color: rgba(212, 168, 83, 0);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    80% {
        border-color: rgba(212, 168, 83, 0.4);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(212, 168, 83, 0.15);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(2deg) scale(1);
        filter: blur(0);
        border-color: rgba(212, 168, 83, 0.15);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    }
}

@keyframes arcIn6 {
    0% {
        opacity: 0;
        transform: translateX(80px) rotate(-3deg) scale(0.7);
        filter: blur(12px);
        border-color: rgba(212, 168, 83, 0);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    80% {
        border-color: rgba(212, 168, 83, 0.4);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35), 0 0 20px rgba(212, 168, 83, 0.15);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotate(-2deg) scale(1);
        filter: blur(0);
        border-color: rgba(212, 168, 83, 0.15);
        box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    }
}

.enter-card.arc-ready:hover {
    transform: scale(2) rotate(0deg) !important;
    border-color: rgba(212, 168, 83, 0.6);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6),
        0 0 40px rgba(212, 168, 83, 0.2);
    z-index: 20;
    cursor: pointer;
}

.enter-card-inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.enter-card-inner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: enterKenBurns 20s ease-in-out infinite alternate;
}

.enter-card:nth-child(even) .enter-card-inner img {
    animation-direction: alternate-reverse;
    animation-delay: -5s;
}

.enter-card:nth-child(3n) .enter-card-inner img {
    animation-delay: -10s;
}

@keyframes enterKenBurns {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.15) translate(-2%, -1%);
    }
}

/* Shimmer sweep across cards */
.enter-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(105deg, transparent 20%, rgba(212, 168, 83, 0.06) 45%, rgba(255, 255, 255, 0.08) 50%, rgba(212, 168, 83, 0.06) 55%, transparent 80%);
    animation: enterShimmer 6s ease-in-out infinite;
    animation-delay: calc(2s + var(--i) * 0.7s);
    z-index: 2;
    pointer-events: none;
}

@keyframes enterShimmer {

    0%,
    100% {
        left: -100%;
    }

    50% {
        left: 200%;
    }
}

/* Bottom gradient on cards */
.enter-card-inner::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    pointer-events: none;
}

/* Event Info */
.enter-info {
    display: flex;
    align-items: center;
    gap: 18px;
}

.enter-info-item {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--accent);
    text-shadow: 0 0 20px rgba(212, 168, 83, 0.3);
    opacity: 0;
    transform: translateY(15px);
    filter: blur(4px);
    animation: enterInfoReveal 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.enter-info-item:nth-child(1) {
    animation-delay: 2.8s;
}

.enter-info-item:nth-child(3) {
    animation-delay: 3.1s;
}

.enter-info-item:nth-child(5) {
    animation-delay: 3.4s;
}

.enter-info-sep {
    color: rgba(255, 255, 255, 0.25);
    font-size: 1rem;
    opacity: 0;
    animation: enterInfoReveal 0.6s ease forwards;
}

.enter-info-sep:nth-child(2) {
    animation-delay: 3.0s;
}

.enter-info-sep:nth-child(4) {
    animation-delay: 3.3s;
}

@keyframes enterInfoReveal {
    0% {
        opacity: 0;
        transform: translateY(15px);
        filter: blur(4px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes enterFadeUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Buttons */
.enter-buttons {
    display: flex;
    gap: 20px;
    align-items: center;
}

.enter-btn-main {
    padding: 16px 50px;
    background: transparent;
    border: 2px solid var(--accent);
    color: var(--accent);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 4px;
    text-transform: uppercase;
    border-radius: 50px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 20px rgba(212, 168, 83, 0.15);
    opacity: 0;
    transform: translateY(15px) scale(0.9);
    animation: enterBtnReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 3.7s forwards,
        enterBtnPulse 2.5s ease-in-out 4.7s infinite;
}

.enter-btn-tickets {
    opacity: 0;
    transform: translateY(15px) scale(0.9);
    animation: enterBtnReveal 1s cubic-bezier(0.16, 1, 0.3, 1) 3.95s forwards;
    font-size: 0.9rem;
}

@keyframes enterBtnReveal {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(0.9);
        filter: blur(4px);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}


.enter-btn-main:hover {
    background: #fff;
    color: #000;
    border-color: #fff;
    box-shadow: 0 0 40px rgba(255, 255, 255, 0.4);
}

@keyframes enterBtnPulse {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(212, 168, 83, 0.15);
    }

    50% {
        box-shadow: 0 0 35px rgba(212, 168, 83, 0.35), 0 0 60px rgba(212, 168, 83, 0.1);
    }
}

/* Shimmer on Enter button */
.enter-btn-main::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmerSweep 3s ease-in-out infinite;
    z-index: 2;
}

/* Enter page responsive */
@media (max-width: 768px) {
    .enter-wrapper {
        gap: 22px;
        justify-content: center;
        height: 100dvh;
        padding: 20px 0;
        box-sizing: border-box;
    }

    .enter-logo {
        width: 112px;
        margin-bottom: auto;
        transform: translateY(-25%);
    }

    .enter-main-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 22px;
        width: 100%;
        margin-bottom: auto;
    }

    .enter-mosaic {
        width: 100%;
        max-width: 620px;
        height: min(260px, 40vh);
    }

    .enter-info {
        gap: 10px;
    }

    .enter-info-item {
        font-size: 0.8rem;
        letter-spacing: 2px;
    }

    .enter-info-sep {
        font-size: 0.8rem;
    }

    .enter-buttons {
        flex-direction: column;
        gap: 12px;
        width: 100%;
        align-items: center;
    }

    .enter-btn-main {
        padding: 14px 44px;
        font-size: 1rem;
        letter-spacing: 3px;
        width: 80%;
        max-width: 280px;
    }

    .enter-btn-tickets {
        width: 80%;
        max-width: 280px;
        text-align: center;
    }
}

@media (max-width: 400px) {
    .enter-mosaic {
        height: min(210px, 35vh);
    }

    .enter-wrapper {
        gap: 16px;
    }

    .enter-info-item {
        font-size: 0.7rem;
        letter-spacing: 1.5px;
    }

    .hero-title br {
        display: none;
    }
}

/* --- Responsive --- */

/* Tablet and below */
@media (max-width: 1024px) {
    .section-title {
        font-size: 2.5rem;
    }

    .info-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .map-container {
        height: 400px;
    }
}

/* Mobile landscape and portrait */
@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .info-grid {
        grid-template-columns: 1fr;
        height: auto;
    }

    .map-container {
        height: 350px;
    }
}

/* Mobile optimizations */
@media (max-width: 768px) {

    /* Optimize video for mobile */
    .video-container {
        width: 84vw;
        height: 84vw;
        opacity: 0.5;
    }

    /* Navigation - Beautiful slide-in menu */
    .nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        height: 100vh;
        width: 80%;
        max-width: 300px;
        background: rgba(0, 0, 0, 0.98);
        backdrop-filter: blur(20px);
        flex-direction: column;
        justify-content: center;
        gap: 30px;
        transition: var(--transition);
        box-shadow: -5px 0 30px rgba(0, 0, 0, 0.8);
        padding: 40px;
        z-index: 999;
    }

    .nav-links.active {
        right: 0;
    }

    .nav-links li {
        opacity: 0;
        transform: translateX(20px);
        transition: all 0.3s ease;
    }

    .nav-links.active li {
        opacity: 1;
        transform: translateX(0);
    }

    .nav-links.active li:nth-child(1) {
        transition-delay: 0.1s;
    }

    .nav-links.active li:nth-child(2) {
        transition-delay: 0.2s;
    }

    .nav-links.active li:nth-child(3) {
        transition-delay: 0.3s;
    }

    .nav-links.active li:nth-child(4) {
        transition-delay: 0.4s;
    }

    .nav-links.active li:nth-child(5) {
        transition-delay: 0.5s;
    }

    .nav-links.active li:nth-child(6) {
        transition-delay: 0.6s;
    }

    .nav-links li.nav-social-item {
        position: absolute;
        bottom: 50px;
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        gap: 30px;
        margin: 0;
        /* Ensure it's centered horizontally */
    }

    .nav-links li.nav-social-item a {
        font-size: 1.5rem;
    }

    .nav-links a {
        font-size: 1.2rem;
        display: block;
        padding: 10px 0;
    }

    .nav-toggle {
        display: block;
        z-index: 1001;
        font-size: 1.8rem;
        padding: 10px;
        transition: var(--transition);
    }

    .nav-toggle:active {
        transform: scale(0.95);
    }

    /* Hero section mobile */
    .hero {
        min-height: 100dvh;
        /* Dynamic viewport height for better mobile feel */
        padding-top: 80px;
        /* Account for navbar */
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .hero-date {
        font-size: 1.2rem;
        letter-spacing: 2px;
        margin-bottom: 15px;
        white-space: nowrap;
    }

    .hero-subtitle {
        font-size: clamp(1rem, 3vw, 1.2rem);
        margin-bottom: 30px;
        padding: 0 10px;
        line-height: 1.6;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 15px;
        padding: 0 20px;
        align-items: center;
    }

    .btn-primary,
    .btn-secondary {
        width: 100%;
        max-width: 280px;
        margin: 0;
        padding: 16px 32px;
        font-size: 0.95rem;
    }

    .btn-secondary {
        margin-left: 0;
    }

    /* Sections */
    .section {
        padding: 60px 0;
    }

    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
        left: auto;
        transform: none;
        display: block;
        width: 100%;
        text-align: center;
    }

    .section-subtitle {
        font-size: 1rem;
        margin: -30px auto 40px;
        padding: 0 20px;
        text-align: center;
    }

    /* About section centering */
    .about-text {
        text-align: center;
    }

    .about-text .lead {
        font-size: 1.2rem;
        text-align: center;
    }

    .about-text p {
        font-size: 1rem;
        text-align: center;
    }

    .stats-grid {
        justify-content: center;
    }

    .stat-card {
        padding: 25px 20px;
    }

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

    .stat-label {
        font-size: 0.75rem;
    }

    /* Gallery styles removed - using main grid definition */

    /* Schedule mobile centering */
    .schedule-tabs {
        gap: 10px;
        margin-bottom: 30px;
        justify-content: center;
    }

    .tab-btn {
        font-size: 1rem;
        padding: 12px 20px;
        text-align: center;
    }

    .timeline {
        padding-left: 20px;
    }

    .slot {
        padding: 20px 15px;
        margin-bottom: 15px;
    }

    .slot::before {
        left: -26px;
        width: 10px;
        height: 10px;
    }

    .slot-time {
        font-size: 0.85rem;
    }

    .slot-content h3 {
        font-size: 1.1rem;
    }

    .slot-desc {
        font-size: 0.95rem;
    }

    /* Info section mobile centering */
    .info-card {
        padding: 25px 20px;
        text-align: center;
    }

    .info-card h3 {
        font-size: 1.2rem;
        text-align: center;
    }

    .info-card p {
        font-size: 0.95rem;
        text-align: center;
    }

    .social-links {
        justify-content: center;
    }

    .press-file-box {
        display: flex;
        justify-content: center;
        margin: 15px 0;
    }

    .social-links a {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    /* Footer */
    .footer-content {
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

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

/* Small mobile devices */
@media (max-width: 480px) {

    /* Even more compact video */
    .video-container {
        width: 96vw;
        height: 96vw;
        opacity: 0.4;
    }

    .container {
        width: 95%;
        padding: 0 15px;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .stat-card {
        padding: 15px 10px;
    }

    .stat-number {
        font-size: 1.8rem;
    }

    .stat-label {
        font-size: 0.85rem;
    }

    /* Gallery item styles removed */

    .schedule-tabs {
        flex-direction: column;
        align-items: stretch;
    }

    .tab-btn {
        width: 100%;
        text-align: center;
    }

    .map-container {
        height: 300px;
    }

    .btn-primary,
    .btn-secondary {
        padding: 14px 28px;
        font-size: 0.9rem;
    }

    /* Force lightbox centering on mobile */
    .lightbox-content {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .lightbox-content img {
        margin: 0 auto;
        display: block;
        max-width: 95%;
        /* Slightly wider on mobile */
    }
}

/* Landscape mobile optimization */
@media (max-width: 900px) and (orientation: landscape) {
    .section {
        min-height: auto;
        padding: 80px 0;
    }

    .hero {
        min-height: 100vh;
    }

    .video-container {
        width: 48vh;
        height: 48vh;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .btn-primary,
    .btn-secondary,
    .control-btn,
    .tab-btn,
    .slot {
        min-height: 44px;
    }

    /* Show captions by default on touch devices */
    .gallery-caption {
        transform: translateY(0);
        opacity: 0.95;
    }

    /* Disable parallax on touch devices for better performance */
    .video-container {
        transform: translate(-50%, -50%) !important;
    }
}

/* --- Scroll Indicator (Computer Version Only) --- */
.scroll-indicator {
    display: none;
    /* Hidden by default (mobile) */
}

@media (min-width: 1024px) {
    .scroll-indicator {
        display: flex;
        flex-direction: column;
        gap: 20px;
        position: fixed;
        left: 40px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 100;
        pointer-events: none;
        /* Make container click-through */
    }

    .scroll-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, 0.3);
        background: transparent;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;
        pointer-events: auto;
        /* Enable clicks on dots */
        position: relative;
    }

    .scroll-dot:hover {
        border-color: var(--accent);
        transform: scale(1.2);
    }

    .scroll-dot.active {
        background: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 0 15px var(--accent-glow);
        transform: scale(1.3);
    }

    /* Optional: Tooltip on hover */
    .scroll-dot::after {
        content: attr(aria-label);
        position: absolute;
        left: 25px;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(0, 0, 0, 0.8);
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 0.75rem;
        color: var(--text-light);
        opacity: 0;
        transition: opacity 0.3s ease, transform 0.3s ease;
        pointer-events: none;
        white-space: nowrap;
        border: 1px solid var(--glass-border);
    }

    .scroll-dot:hover::after {
        opacity: 1;
        transform: translateY(-50%) translateX(5px);
    }

    /* Speakers Responsive */
    .bio-content {
        padding: 40px 30px;
        width: 95%;
    }

    .bio-content h3 {
        font-size: 1.8rem;
    }
}

@media (max-width: 1024px) {
    .speakers-section {
        padding: 100px 0;
        height: auto;
        max-height: none;
        overflow: visible;
        display: block;
    }
}

@media (max-width: 768px) {
    .speakers-grid {
        display: block;
        width: 100%;
        height: auto;
        max-height: none;
        aspect-ratio: auto;
        margin: 0 auto;
        padding-top: 20px;
        position: relative;
    }

    .speaker-card {
        height: 44px;
        width: 105%;
        margin-left: -2.5%;
        /* Slightly wider for horizontal staggering */
        margin-bottom: 4px;
        /* Added space between cards */
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
    }

    .speaker-card {
        height: 44px;
        /* Compact for better spacing with 12 items */
        width: 105%;
        margin-left: -2.5%;
        margin-bottom: 4px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
        overflow: hidden;
        position: relative;
        background-image: var(--bg-img);
        background-size: cover;
        background-position: center;
        display: block;
        border: 1px solid var(--glass-border);
    }

    .speaker-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        z-index: 1;
    }

    .speaker-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 44px;
        /* matches height */
        height: 44px;
        z-index: 2;
        border-right: 1px solid var(--glass-border);
        overflow: hidden;
    }

    .speaker-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transform: none !important;
        filter: none !important;
        object-position: center !important;
    }

    /* Adjust info for the square-on-left look with centered text */
    .speaker-info {
        position: relative;
        z-index: 3;
        display: flex !important;
        flex-direction: column;
        justify-content: center;
        text-align: center !important;
        padding-left: 44px !important;
        /* Offset for thumb on left */
        padding-right: 0 !important;
        height: 100%;
        background: none !important;
    }

    .speaker-info h3 {
        font-size: 0.95rem;
        margin: 0;
        color: #fff;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .speaker-role {
        font-size: 0.65rem;
        margin: 0;
        opacity: 0.8;
    }

    .speakers-section {
        padding: 40px 0;
        /* Minimized padding to maximize vertical space */
        height: auto;
        max-height: none;
        overflow: visible;
        display: block;
    }

    /* View Bio button adjustments for mobile strips */
    .speaker-overlay {
        display: none;
        /* Hide overlay button on mobile to emphasize strip design, or keep it subtle */
    }

    /* Refined staggering for mobile to fix name visibility */
    .speaker-card:nth-child(1) {
        transform: rotate(-2deg) translateX(-5px);
        z-index: 10;
    }

    .speaker-card:nth-child(2) {
        transform: rotate(1.5deg) translateX(10px);
        z-index: 9;
    }

    .speaker-card:nth-child(3) {
        transform: rotate(-1deg) translateX(-8px);
        z-index: 8;
    }

    .speaker-card:nth-child(4) {
        transform: rotate(2deg) translateX(5px);
        z-index: 7;
    }

    .speaker-card:nth-child(5) {
        transform: rotate(-1.5deg) translateX(-12px);
        z-index: 6;
    }

    .speaker-card:nth-child(6) {
        transform: rotate(1deg) translateX(8px);
        z-index: 5;
    }

    .speaker-card:nth-child(7) {
        transform: rotate(-2deg) translateX(-5px);
        z-index: 4;
    }

    .speaker-card:nth-child(8) {
        transform: rotate(1.5deg) translateX(10px);
        z-index: 3;
    }

    .speaker-card:nth-child(9) {
        transform: rotate(-1deg) translateX(-8px);
        z-index: 2;
    }

    .speaker-card:nth-child(10) {
        transform: rotate(2deg) translateX(6px);
        z-index: 1;
    }

    .speaker-card:nth-child(11) {
        transform: rotate(-1.5deg) translateX(-10px);
        z-index: 1;
    }

    .speaker-card:nth-child(12) {
        transform: rotate(1deg) translateX(8px);
        z-index: 1;
    }
}