@font-face {
    font-family: 'Digitalo';
    src: url('fonts/digitalo.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('fonts/myriad-pro/MYRIADPRO-REGULAR.OTF') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('fonts/myriad-pro/MyriadPro-Light.otf') format('opentype');
    font-weight: 100; /* Forcing thinner weight if browser supports variable or synthesis */
    font-style: normal;
}

:root {
    --primary-red: #C71F1B;
    --primary-black: #000000;
    --text-color-on-red: #000000;
    --text-color-on-black: #C71F1B; /* Red text on black bg */
    --font-heading: 'Digitalo', 'Courier New', monospace;
    --font-body: 'Myriad Pro', sans-serif;
}

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

body {
    background-color: var(--primary-black);
    color: var(--text-color-on-black);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
    cursor: none; /* Hide default cursor */
}

.custom-cursor {
    position: fixed;
    width: 24px; /* Smaller cursor */
    height: 24px;
    pointer-events: none; 
    z-index: 99999;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%); /* Center the cursor element */
    transition: transform 0.1s ease-out; /* Smooth movement, but JS handles position lag better */
    will-change: left, top;
}

/* Create the cursor shape using mask */
.custom-cursor::after {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: #C71F1B; /* The color we want to appear on black */
    -webkit-mask-image: url('images/eye.png');
    mask-image: url('images/eye.png');
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* Background Noise Overlay */
/* REMOVED: Noise is now applied only to red sections */


/* Container for content margins - Removed all constraints */
.content-wrapper {
    width: 100%;
    margin: 0;
    padding: 0;
}

/* Inner Content Container */
.container {
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    padding: 0 4rem; /* Restored horizontal padding */
    position: relative;
    z-index: 10;
}

/* Header Bar */
.top-bar {
    background-color: var(--primary-black);
    color: var(--text-color-on-black);
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 4rem; /* Match content padding */
    width: 100%;
    position: relative;
    z-index: 50;
    box-sizing: border-box;
    font-family: var(--font-heading);
    font-size: 0.9rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em; /* Reduced from 0.12em */
    /* Ensure it's not hidden */
}

.bar-item {
    /* Optional: Ensure text is clearly visible */
    color: var(--text-color-on-black);
}



/* Noise Overlay */
.noise-overlay {
    display: none; /* Removed in favor of noisebgsm.jpg background */
}



.hero-visual {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1; /* Ensure eye is above pattern */
}

/* Binary Pattern Behind Eye */
/* REMOVED: User requested removal */

.eye-graphic-img {
    max-width: 100%;
    max-height: 80vh;
    width: auto;
    object-fit: contain;
    /* Blend mode might be cool, but standard display is safer first */
}

/* Hero Text Content */
.hero-content {
    flex: 1;
    display: flex;
    justify-content: center; /* Horizontally center */
    align-items: center; /* Vertically center */
    padding-left: 2rem; 
    z-index: 2; /* Above noise */
}

.hero-text-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 600px; /* Constrain width of text block */
    align-items: center; /* Center children horizontally */
}

.title-container {
    width: 100%;
    display: flex;
    justify-content: center; /* Center the image horizontally */
}

.title-img {
    width: 100%; /* Make image responsive */
    height: auto;
    /* max-width: 600px; removed max-width here, handled by wrapper */
}

.event-details {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-family: var(--font-heading);
    font-size: 1rem; 
    color: var(--text-color-on-red);
    margin-top: 2rem; 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.08em; /* Reduced from 0.12em */
}

.hero-experience-text {
    margin-top: 1.75rem;
    width: 100%;
    color: var(--text-color-on-red);
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.75;
    letter-spacing: 0.05em;
    text-align: justify;
    text-transform: uppercase;
}

.hero-experience-text-mobile {
    display: none;
}

.mobile-binary-bar {
    display: none;
}

/* Info Section */
.info {
    background-color: var(--primary-black);
    color: var(--text-color-on-black);
    display: block; /* Let container handle flex if needed */
    padding: 4rem 0; /* Vertical padding only */
    width: 100%;
    margin: 0; 
}

/* Info Content Flex Wrapper */
.info-inner {
    display: flex;
    flex-direction: row;
    gap: 4rem;
    align-items: flex-start; /* Ensure both start at the same top position */
}

/* Hero Section */
.hero {
    background-image: url('images/noisebgsm.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex; /* Changed from block to flex */
    flex-direction: column;
    justify-content: center; /* Vertical centering */
    align-items: center; /* Horizontal centering */
    min-height: auto; /* Allow auto height based on content padding */
    padding: 6rem 0; /* Significant vertical padding to create breathing room without forcing height */
    position: relative;
    overflow: hidden;
    width: 100%; 
    margin: 0; 
}

/* Hero Content Flex Wrapper */
.hero-inner {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center; /* Vertically center content */
    transform: translateY(-40px); /* Move 40px up */
}

.ticket-container {
    width: 40%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 0; /* Removed padding to align with text top */
}

.ticket-buttons-wrapper {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.ticket-row {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.ticket-label {
    font-family: var(--font-heading);
    color: var(--text-color-on-black);
    font-size: 1rem;
    letter-spacing: 2px;
    min-width: 100px;
}

/* Ticket Button */
.btn-tickets {
    display: inline-block;
    padding: 0.5rem 3rem; /* Adjusted for row layout */
    font-family: var(--font-heading);
    font-size: 1.2rem;
    color: var(--text-color-on-black);
    text-decoration: none;
    background: transparent;
    border: 1px solid var(--text-color-on-black);
    border-radius: 4px; /* Tiny rounding */
    font-weight: lighter;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 6px; /* Wide kerning restored */
}

.btn-tickets:hover {
    background-color: var(--text-color-on-black);
    color: var(--primary-black);
}

.btn-tickets:hover {
    background-color: var(--text-color-on-black);
    color: var(--primary-black);
}

/* Description Text */
.description {
    font-family: var(--font-heading);
    font-size: 1.2rem; /* Reduced from 1.5rem */
    line-height: 1.5; /* Increased from 1.2 to give more breathing room */
    color: var(--text-color-on-black);
    width: 60%; 
    min-height: 250px; 
    font-weight: lighter; /* Thinner font weight */
    -webkit-font-smoothing: antialiased;
}

.description p {
    margin-bottom: 2rem; /* Increased spacing between paragraphs */
    min-height: 1.2em; 
}

/* Compiling Cursor Effect - REPLACED WITH MATRIX EFFECT */
.binary-bar {
    position: relative;
    /* ... existing styles ... */
}

/* Container for matrix effect numbers */
.matrix-effect {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--primary-black);
    font-family: var(--font-heading);
    font-size: 1.2rem;
    z-index: 2;
    background-color: var(--primary-red); /* Cover scrolling text behind it */
    padding: 0 5px;
}

/* Pseudo-element for cursor on the RIGHT side of the bar - REMOVED */

@keyframes blink {
    50% { opacity: 0; }
}

/* Typewriter Cursor */
.typewriter-cursor {
    display: inline-block;
    width: 0.6em;
    height: 1.1em;
    background-color: var(--text-color-on-black);
    /* Adjust vertical alignment significantly */
    vertical-align: middle; 
    transform: translateY(-0.1em); /* Fine tune */
    animation: blink 1s step-end infinite;
    margin-left: 2px;
    position: relative;
    top: -2px; /* Lowered slightly from -4px */
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Footer */
footer {
    background-color: var(--primary-black);
    color: var(--text-color-on-black);
    padding: 1rem 0;
    overflow: hidden;
    width: 100%; /* Ensure full width */
}

.pilot-info {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0 4rem 1rem;
    color: var(--text-color-on-black);
}

.pilot-info p {
    font-family: var(--font-heading);
    font-size: 1rem;
    line-height: 1.5;
    margin: 0;
    text-transform: uppercase;
}

.binary-bar {
    background-color: var(--primary-red);
    color: var(--primary-black);
    padding: 0.5rem 0;
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 2rem;
    position: relative;
    width: 100vw; /* Force viewport width */
    margin-left: calc(-50vw + 50%); /* Center it if parent has width constraint, though footer shouldn't */
}

/* Binary Animation Speed Up */
.binary-content {
    display: inline-block;
    padding-left: 0;
    animation: scroll 45s linear infinite; /* 25% faster than 60s (60 * 0.75 = 45s) */
    font-family: var(--font-heading);
    font-size: 1.0rem; /* Reduced from 1.2rem */
}

/* Duplicate content for seamless scroll */
.binary-content::after {
    /* "ORAKEL WILL CONTROL YOU" in binary (approx): 
       01001111 01010010 01000001 01001011 01000101 01001100 00100000 01010111 01001001 01001100 01001100 00100000 01000011 01001111 01001110 01010100 01010010 01001111 01001100 00100000 01011001 01001111 01010101
       Repeated multiple times to fill the bar
    */
    content: " 01001111 01010010 01000001 01001011 01000101 01001100 00100000 01010111 01001001 01001100 01001100 00100000 01000011 01001111 01001110 01010100 01010010 01001111 01001100 00100000 01011001 01001111 01010101 00100000 01001111 01010010 01000001 01001011 01000101 01001100 00100000 01010111 01001001 01001100 01001100 00100000 01000011 01001111 01001110 01010100 01010010 01001111 01001100 00100000 01011001 01001111 01010101 00100000 01001111 01010010 01000001 01001011 01000101 01001100 00100000 01010111 01001001 01001100 01001100 00100000 01000011 01001111 01001110 01010100 01010010 01001111 01001100 00100000 01011001 01001111 01010101 00100000 01001111 01010010 01000001 01001011 01000101 01001100 00100000 01010111 01001001 01001100 01001100 00100000 01000011 01001111 01001110 01010100 01010010 01001111 01001100 00100000 01011001 01001111 01010101";
}

@keyframes scroll {
    0% { transform: translate(0, 0); }
    100% { transform: translate(-50%, 0); } /* Move half width because of duplication */
}

/* Logos */
.logos {
    display: flex;
    justify-content: space-between;
    align-items: center; /* Center vertically */
    padding: 2rem 4rem; /* More horizontal padding */
    background-color: var(--primary-black);
    /* border-top: 1px solid #333; Removed white line as requested */
    width: 100%; /* Ensure full width */
    max-width: none; /* Removed max width */
    margin: 0; 
}

.logo-group {
    text-align: center;
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo-group.center {
    justify-content: center;
}

.logo-group.right {
    justify-content: center; /* Changed to center for even spacing */
}

.logo-img {
    max-height: 75px; /* 150% desktop scaling */
    max-width: 225px; /* 150% desktop scaling */
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 1rem;
}

/* Specific Logo Tweaks */
.logo-wilmink, .logo-kitt {
    max-height: 38px; /* 150% desktop scaling */
}

.logo-trimotion {
    max-height: 93px; /* 150% desktop scaling */
}

/* If images are not transparent PNGs/SVGs, this filter will look weird (it will colorize the white background too). 
   Assuming they are transparent. If trimotion.jpg has a background, we might need mix-blend-mode.
*/

/* Responsive Design */
@media (max-width: 900px) {
    /* Remove custom cursor on mobile */
    body {
        cursor: auto;
    }
    .custom-cursor {
        display: none;
    }

    /* Header/Top Bar */
    .top-bar {
        padding: 0.5rem 1rem; /* Reduced horizontal padding */
        flex-direction: row; 
        flex-wrap: nowrap; /* Force same line */
        justify-content: space-between; 
        align-items: center;
        gap: 0.25rem; /* Reduced gap */
        font-size: 0.75rem; /* Slightly smaller font to ensure fit */
    }
    
    .bar-item {
        white-space: nowrap;
    }
    
    /* Container Padding */
    .container {
        padding: 0 2rem;
    }

    /* Hero Section */
    .hero-inner {
        flex-direction: column;
    }
    
    .hero {
        min-height: auto; /* Allow auto height on mobile to fit content naturally */
        padding-bottom: 2rem; /* Reduce bottom padding on mobile */
    }

    .hero-visual, .hero-content {
        width: 100%;
        margin-bottom: 2rem;
        padding-left: 0; /* Remove desktop padding */
    }

    .hero-visual {
        justify-content: center;
        margin-bottom: 1rem;
    }
    
    .eye-graphic-img {
        max-width: 90%; /* Increased further to be roughly 30% larger than previous mobile size */
    }
    
    .hero-text-wrapper {
        align-items: center;
        text-align: center;
    }

    .event-details {
        font-size: 0.9rem;
        flex-direction: column; /* Stack details on very small screens? Or keeping row but smaller */
        gap: 0.5rem;
        align-items: center;
        margin-top: 1rem;
    }

    .hero-experience-text {
        display: none;
    }

    /* Info Section */
    .info-inner {
        flex-direction: column-reverse; /* Put description on top, ticket button below? Or standard column */
        flex-direction: column;
        align-items: center;
    }
    
    .info {
        padding: 2rem 0;
    }

    .ticket-container {
        width: 100%;
        justify-content: center;
        margin-bottom: 1.5rem;
        text-align: center;
    }

    .hero-experience-text-mobile {
        display: block;
        width: 100%;
        margin: 0 0 1.25rem;
        color: var(--text-color-on-black);
        font-family: var(--font-heading);
        font-size: 0.8rem;
        line-height: 1.75;
        letter-spacing: 0.05em;
        text-align: justify;
        text-transform: uppercase;
    }

    .mobile-binary-bar {
        display: block;
        background-color: var(--primary-red);
        color: var(--primary-black);
        padding: 0.45rem 0;
        white-space: nowrap;
        overflow: hidden;
        width: 100%;
        margin: 0 0 1.5rem;
    }

    .description {
        margin-top: 0;
    }
    
    .description {
        width: 100%;
        font-size: 1.1rem;
        min-height: auto; /* Allow auto height on mobile */
    }
    
    /* Logos */
    .logos {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1rem;
        padding: 2rem;
    }

    .logo-group {
        width: 100%;
        min-height: 52px;
    }
    
    .logo-img {
        height: auto;
        max-height: 44px;
        max-width: 170px;
        width: auto;
        margin: 0 auto;
    }

    /* Houd desktop-balansering aan, maar mobiel iets groter voor leesbaarheid */
    .logo-metropool {
        max-height: 52px;
    }

    .logo-wilmink {
        max-height: 32px;
    }

    .logo-kitt {
        max-height: 32px;
    }

    .logo-trimotion {
        max-height: 60px;
    }

    .pilot-info {
        padding: 0 2rem 0.75rem;
    }

    .pilot-info p {
        font-size: 0.8rem;
        text-align: justify;
    }
}

@media (max-width: 480px) {
    .top-bar {
        padding: 0.5rem 1rem;
    }
    
    .container {
        padding: 0 1rem;
    }

    .pilot-info {
        padding: 0 1rem 0.75rem;
    }
    
    .btn-tickets {
        padding: 0.5rem 3rem;
        font-size: 1.2rem;
        width: 100%; /* Full width button on small screens */
        text-align: center;
    }
}