/* =========================================
   THE CURIOUS PIANO COLLECTIVE
   Music & Wonders of the Beatles
   ========================================= */

/* Custom Artwork Fonts */
@font-face {
    font-family: 'MisterLondonSans';
    src: url('fonts/MisterLondonSans-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sernes';
    src: url('fonts/Sernes-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Sernes';
    src: url('fonts/Sernes-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Yellowtail';
    src: url('fonts/Yellowtail-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Base Styles */
.font-display {
    font-family: 'Sernes', 'Playfair Display', serif;
    text-transform: uppercase;
}

.font-sans {
    font-family: 'Inter', sans-serif;
}

/* Artwork Logo Style - matches poster typography */
.logo-text {
    font-family: 'Sernes', 'Georgia', serif;
    font-weight: 600;
    font-size: 1.1rem;
    white-space: nowrap;
    letter-spacing: 0.04em;
    line-height: 1.2;
    transition: font-size 0.3s ease;
}

@media (min-width: 640px) {
    .logo-text {
        font-size: 1.8rem;
    }
}

/* Scrolled: logo smaller */
#mainNav.scrolled .logo-text {
    font-size: 1.15rem;
}

@media (min-width: 640px) {
    #mainNav.scrolled .logo-text {
        font-size: 1.35rem;
    }
}

/* Hero responsive height */
@media (max-width: 767px) {
    #home {
        min-height: 100svh !important;
    }
    #home picture img {
        object-position: center 20%;
    }
}

/* Hero Logo - Desktop only (mobile uses separate layout) */
.hero-logo {
    display: block;
    width: 100%;
    max-width: 32rem;
}

@media (min-width: 1024px) {
    .hero-logo { max-width: 36rem; }
}

@media (min-width: 1280px) {
    .hero-logo { margin-left: -40px; }
}

@media (min-width: 1536px) {
    .hero-logo { margin-left: -80px; }
}

@media (min-width: 1800px) {
    .hero-logo { margin-left: -120px; }
}

/* Hero Title - Matching Poster Artwork */
.hero-title {
    color: #c0392b;
    line-height: 0.95;
}

.hero-line {
    font-family: 'Sernes', serif;
    font-weight: 600;
    font-size: 4.5rem;
}

.hero-line-last {
    font-family: 'Sernes', serif;
    font-weight: 600;
    font-size: 5.5rem;
}

.hero-script {
    font-family: 'Yellowtail', cursive;
    font-weight: 400;
    font-size: 0.5em;
}

@media (min-width: 768px) {
    .hero-line { font-size: 6.5rem; }
    .hero-line-last { font-size: 8rem; }
}

@media (min-width: 1024px) {
    .hero-line { font-size: 8rem; }
    .hero-line-last { font-size: 10rem; }
}

@media (max-width: 480px) {
    .hero-line { font-size: 3rem; }
    .hero-line-last { font-size: 3.5rem; }
}

/* Artist Names - Bold poster typography */
.artist-firstname {
    font-family: 'Sernes', 'Playfair Display', serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 0.75rem;
    letter-spacing: 0.15em;
    color: #2c2c2c;
    line-height: 1;
    margin-bottom: 10px;
}

.artist-lastname {
    font-family: 'Sernes', 'Playfair Display', serif;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: 0.02em;
    color: #1a1a1a;
    line-height: 1;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .artist-firstname { font-size: 0.9rem; }
    .artist-lastname { font-size: 2rem; }
}

@media (min-width: 768px) {
    .artist-firstname { font-size: 1rem; }
    .artist-lastname { font-size: 2.5rem; }
}

@media (min-width: 1024px) {
    .artist-firstname { font-size: 1.1rem; }
    .artist-lastname { font-size: 3rem; }
}

/* Artist name staggered entrance */
.artist-name-group {
    opacity: 0;
    transform: translateY(20px);
    animation: artistReveal 0.6s ease forwards;
}

.artist-name-group:nth-child(1) { animation-delay: 1.5s; }
.artist-name-group:nth-child(2) { animation-delay: 1.8s; }
.artist-name-group:nth-child(3) { animation-delay: 2.1s; }

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

/* Smooth scrolling handled by scroll-smooth class on html */

/* =========================================
   NAVIGATION
   ========================================= */
#mainNav {
    background: rgba(253, 250, 245, 0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

#mainNav.scrolled {
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}

/* =========================================
   ANIMATIONS
   ========================================= */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

/* Staggered animations */
.animate-fade-in:nth-child(1) { animation-delay: 0s; }
.animate-fade-in:nth-child(2) { animation-delay: 0.15s; }
.animate-fade-in:nth-child(3) { animation-delay: 0.3s; }
.animate-fade-in:nth-child(4) { animation-delay: 0.45s; }

/* =========================================
   MOBILE MENU ANIMATION
   ========================================= */
.mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.mobile-menu.open {
    max-height: 400px;
}

.mobile-menu-item {
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.mobile-menu.open .mobile-menu-item {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu.open .mobile-menu-item:nth-child(1) { transition-delay: 0.05s; }
.mobile-menu.open .mobile-menu-item:nth-child(2) { transition-delay: 0.1s; }
.mobile-menu.open .mobile-menu-item:nth-child(3) { transition-delay: 0.15s; }
.mobile-menu.open .mobile-menu-item:nth-child(4) { transition-delay: 0.2s; }
.mobile-menu.open .mobile-menu-item:nth-child(5) { transition-delay: 0.25s; }

/* =========================================
   PHOTO CREDIT SLIDE-IN
   ========================================= */
@keyframes slideInFromRight {
    0% { transform: translateX(100%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

.photo-credit-slide {
    animation: slideInFromRight 0.6s ease-out 1s both;
}

/* =========================================
   MARQUEE SONG STRIP
   ========================================= */
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.marquee-track {
    animation: marquee 25s linear infinite;
    width: max-content;
}

.marquee-track:hover {
    animation-play-state: paused;
}

/* =========================================
   TOUR CARDS
   ========================================= */
.tour-card {
    transition: all 0.3s ease;
}

.tour-card:hover {
    border-color: #c0392b;
}

/* =========================================
   SCROLL REVEAL
   ========================================= */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* =========================================
   FOCUS & FORM STATES
   ========================================= */
input:focus,
textarea:focus,
button:focus {
    outline: none;
}

/* =========================================
   SELECTION COLOR
   ========================================= */
::selection {
    background: #c0392b;
    color: white;
}

/* =========================================
   CREAM PAPER GRAIN TEXTURE
   ========================================= */
.paper-grain {
    position: relative;
}

.paper-grain::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.4;
    pointer-events: none;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.5'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    mix-blend-mode: multiply;
}

.paper-grain > * {
    position: relative;
    z-index: 2;
}

/* =========================================
   RESPONSIVE
   ========================================= */
@media (max-width: 768px) {
    #mainNav.scrolled {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }

    /* Hero: flex-end on mobile so content sits at bottom over portrait image */
    #home {
        align-items: flex-end;
        min-height: 100svh;
    }

    /* Mobile hero image: portrait crop, center on faces */
    #home picture img {
        object-position: center 15%;
    }

    /* Smaller "of the" italic text on mobile */
    #home h1 .font-serif-display {
        font-size: 1.75rem;
    }

    /* Hero content: less bottom margin on mobile */
    #home .relative.z-10 {
        margin-bottom: 40px !important;
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    /* Hero logo: remove negative margin on mobile */
    .hero-logo {
        margin-left: 0;
    }

    /* Center all text on mobile */
    #show, #artiesten, #tour, #gallery, #contact, footer {
        text-align: center;
    }

    /* Center footer social icons on mobile */
    footer .flex {
        justify-content: center;
    }

    /* Uniform body text size on mobile */
    #show p, #artiesten p, #tour p, #gallery p, #contact p {
        font-size: 1rem;
        line-height: 1.7;
    }

    /* Center the feature cards text + icons */
    #show .grid-cols-1 {
        text-align: center;
    }
    #show .grid-cols-1 svg,
    #show .grid-cols-1 i {
        margin-left: auto;
        margin-right: auto;
    }

    /* Tour cards: tighter padding on mobile */
    .tour-card {
        padding: 1rem 1.25rem;
    }

    /* Gallery images: less rounded on mobile */
    #gallery .rounded-3xl {
        border-radius: 1rem;
    }

    /* Marquee slightly smaller */
    .marquee-track {
        font-size: 0.75rem;
        gap: 1.25rem;
    }

    /* Artist names strip: smaller on mobile */
    .artist-firstname {
        font-size: 0.55rem;
        margin-bottom: 4px;
    }
    .artist-lastname {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    /* Even smaller hero title */
    #home h1 {
        font-size: 2.25rem;
    }

    #home h1 .font-serif-display {
        font-size: 1.5rem;
    }

    /* Artist names even smaller on tiny screens */
    .artist-firstname {
        font-size: 0.45rem;
        margin-bottom: 3px;
    }
    .artist-lastname {
        font-size: 0.8rem;
    }
}