/* =====================================================
   HERO — full-bleed merged pirate background layout
===================================================== */

.about-section {
    padding: 5rem 0 4rem;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem;
}

.about-card {
    padding: 2rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    background: rgba(20, 14, 8, 0.6);
    border: 1px solid var(--border);
}

.card-badge {
    display: inline-block;
    padding: 0.45rem 0.9rem;
    border: 1px solid rgba(201, 144, 42, 0.3);
    color: var(--gold);
    border-radius: 999px;
    font-size: 0.8rem;
    letter-spacing: 0.2rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.about-list {
    margin-top: 1rem;
    display: grid;
    gap: 0.75rem;
}

.about-list li {
    position: relative;
    padding-left: 1.2rem;
    color: var(--white);
}

.about-list li::before {
    content: "✦";
    position: absolute;
    left: 0;
    color: var(--gold);
}

@media (max-width: 900px) {
    .about-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .about-section {
        padding: 3.5rem 0 3rem;
    }

    .about-card {
        padding: 1.4rem;
    }
}

#hero{

    position:relative;

    height:100vh;

    min-height:650px;

    max-height:1000px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    padding-top:0;

}

/* ── Merged Background Layer ── */

.hero-bg-layer{

    position:absolute;

    inset:0;

    z-index:0;

    display:flex;

    width:100%;

    height:100%;

    background:#040208;

}

/* Ship on the Left (55% width, fading right) */

.hero-bg-ship{

    position:absolute;

    top:0;

    left:0;

    width:58%;

    height:100%;

    z-index:1;

    -webkit-mask-image:linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0) 100%);

    mask-image:linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0) 100%);

}

.hero-bg-ship img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:left top;

    filter:brightness(.82) saturate(1.15) contrast(1.05);

}

/* Map on the Right (58% width, fading left) */

.hero-bg-map{

    position:absolute;

    top:0;

    right:0;

    width:58%;

    height:100%;

    z-index:1;

    -webkit-mask-image:linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0) 100%);

    mask-image:linear-gradient(270deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0.85) 60%, rgba(0,0,0,0) 100%);

}

.hero-bg-map img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:right center;

    filter:brightness(.58) saturate(.9) sepia(.25);

}

/* Floating particles container */

.hero-particles {

    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

}

/* Rolling ocean wave SVG wrapper at bottom */

.hero-waves-wrapper {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 160px;

    z-index: 4;

    pointer-events: none;

    overflow: hidden;

}

/* Each wave track sits at the bottom, animates in extra-animations.css */

.wave-track {

    position: absolute;

    bottom: 0;

    left: 0;

    width: 200%;

    height: 100%;

}

.hero-wave-svg {

    width: 100%;

    height: 100%;

    display: block;

}

/* Dark center vignette for text contrast */

.hero-bg-vignette{

    position:absolute;

    inset:0;

    z-index:5;

    pointer-events:none;

    background:
        radial-gradient(ellipse 65% 75% at 50% 50%,
            rgba(4, 2, 8, .92) 0%,
            rgba(4, 2, 8, .75) 45%,
            rgba(4, 2, 8, .20) 80%,
            transparent 100%
        ),
        linear-gradient(180deg,
            rgba(4,2,8,.75) 0%,
            transparent 20%,
            transparent 75%,
            rgba(4,2,8,.98) 100%
        );

}

/* =====================================================
   CENTER PANEL — compass ring + text
===================================================== */

.hero-center{

    position:relative;

    z-index:5;

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    max-width:900px;

    margin:0 auto;

}



/* ── Text content ── */

.hero-content{

    position:relative;

    z-index:2;

    text-align:center;

    padding:0 20px;

    animation:heroFade 1.4s cubic-bezier(.22,.61,.36,1) both;

}

.hero-eyebrow{

    font-family:"Cinzel", serif;

    font-size:1.22rem;

    font-weight:600;

    letter-spacing:8px;

    color:var(--white);

    text-transform:uppercase;

    margin-bottom:12px;

    opacity:.85;

    color:var(--gray);

}

.hero-main-title{

    font-family:"Cinzel", serif;

    font-weight:800;

    font-size:clamp(3.8rem, 8vw, 6.5rem);

    line-height:.92;

    color:var(--white);

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:16px;

    text-shadow:
        0 4px 30px rgba(0,0,0,.90),
        0 0 80px rgba(201,144,42,.15);

}

.hero-fest-name{

    font-family:"Cinzel", serif;

    font-size:1.48rem;

    font-weight:700;

    letter-spacing:6px;

    color:var(--crimson-light);

    text-transform:uppercase;

    margin-bottom:16px;

    text-shadow:0 0 18px rgba(139,32,32,.50);

}

.hero-tagline{

    font-family:"Cinzel", serif;

    font-size:1.25rem;

    font-weight:600;

    letter-spacing:6px;

    color:var(--gray);

    text-transform:uppercase;

    margin-bottom:0;

}

.hero-diamond{

    color:var(--gold);

    font-size:.8rem;

    margin:20px 0 26px;

    opacity:.7;

    letter-spacing:6px;

}

/* ── CTA button override ── */

.hero-cta{

    font-size:.82rem;

    padding:15px 36px;

    letter-spacing:3px;

    border-radius:3px;

    box-shadow:
        0 6px 28px rgba(139,32,32,.55),
        0 0 0 1px rgba(201,144,42,.20);

}

/* =====================================================
   SCROLL INDICATOR DOTS
===================================================== */

.hero-dots{

    position:absolute;

    right:24px;

    top:50%;

    transform:translateY(-50%);

    display:flex;

    flex-direction:column;

    gap:12px;

    z-index:10;

}

.hero-dot{

    width:8px;

    height:8px;

    border-radius:50%;

    border:1px solid rgba(201,144,42,.40);

    background:transparent;

    display:block;

    transition:.3s;

}

.hero-dot--active{

    background:var(--gold);

    border-color:var(--gold);

    box-shadow:0 0 8px rgba(201,144,42,.55);

}



#challenges,
#schedule,
#contact{

    padding:90px 0;

}

.section-header{

    margin-bottom:60px;

}

/* =====================================================
   CHALLENGES section bg
===================================================== */

#challenges{

    position:relative;

    background:
        radial-gradient(ellipse 70% 50% at 50% 0%,
            rgba(139,32,32,.07),
            transparent 60%
        ),
        linear-gradient(180deg,
            #06040A 0%,
            #080610 50%,
            #06040A 100%
        );

}

/* top gold rule */

#challenges::before{

    content:"";

    position:absolute;

    left:50%;

    top:0;

    transform:translateX(-50%);

    width:160px;

    height:1px;

    background:linear-gradient(90deg,
        transparent,
        var(--gold),
        transparent
    );

}

/* =====================================================
   CHALLENGE CARDS
===================================================== */

.challenge-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:28px;

}

.challenge-card{

    position:relative;

    padding:38px 32px;

    border-radius:var(--radius-sm);

    overflow:hidden;

    background:rgba(16, 10, 4, .70);

    border:1px solid rgba(201,144,42,.14);

    transition:all .35s ease;

    min-height:280px;

    display:flex;

    flex-direction:column;

}

/* top accent line */

.challenge-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:linear-gradient(
        90deg,
        transparent,
        var(--crimson-mid),
        var(--gold),
        transparent
    );

    opacity:.55;

}

/* corner glow */

.challenge-card::after{

    content:"";

    position:absolute;

    width:200px;

    height:200px;

    background:radial-gradient(
        rgba(201,144,42,.07),
        transparent 70%
    );

    right:-100px;

    bottom:-100px;

    border-radius:50%;

    pointer-events:none;

}

.challenge-card:hover{

    transform:translateY(-10px);

    border-color:rgba(201,144,42,.40);

    background:rgba(20, 12, 5, .85);

    box-shadow:
        0 20px 50px rgba(0,0,0,.50),
        0 0 40px rgba(201,144,42,.06),
        inset 0 0 30px rgba(139,32,32,.04);

}

.challenge-number{

    position:absolute;

    right:24px;

    top:18px;

    font-size:3.2rem;

    font-weight:700;

    font-family:"Cinzel", serif;

    color:rgba(201,144,42,.09);

    user-select:none;

}

.challenge-card h3{

    margin-top:22px;

    margin-bottom:10px;

    color:var(--white);

    font-size:1.55rem;

    text-shadow:0 2px 8px rgba(0,0,0,.50);

}

.challenge-category{

    display:inline-block;

    margin-bottom:16px;

    color:var(--gold);

    font-size:.78rem;

    letter-spacing:3px;

    text-transform:uppercase;

    font-weight:600;

}

.challenge-card p{

    flex:1;

    color:var(--gray);

    line-height:1.8;

    margin-bottom:22px;

}

/* "View Challenge" link style (from .challenge-card a) */

.challenge-card a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    width:max-content;

    color:var(--gold);

    font-weight:600;

    transition:all .3s ease;

}

.challenge-card a:hover{

    gap:18px;

    color:var(--gold-light);

}

.challenge-card a::after{

    content:"→";

    transition:.3s;

}

/* =====================================================
   EVENT BTN (inside cards)
===================================================== */

.event-btn{

    margin-top:auto;

    background:none;

    border:none;

    color:var(--gold);

    cursor:pointer;

    font-weight:600;

    font-family:"Cinzel", serif;

    font-size:.85rem;

    letter-spacing:2px;

    text-transform:uppercase;

    transition:.3s;

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:0;

}

.event-btn::after{

    content:"→";

    transition:.3s;

}

.event-btn:hover{

    color:var(--gold-light);

    gap:0;

}

.event-btn:hover::after{

    transform:translateX(8px);

}

/* =====================================================
   SCHEDULE — parchment-dark bg
===================================================== */

#schedule{

    background:
        radial-gradient(ellipse 80% 50% at 50% 100%,
            rgba(201,144,42,.05),
            transparent 65%
        ),
        linear-gradient(180deg,
            #06040A 0%,
            #070508 100%
        );

}

.schedule-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:36px;

}

.schedule-card{

    padding:40px;

    border-radius:var(--radius-sm);

    background:rgba(14, 9, 4, .75);

    border:1px solid rgba(201,144,42,.15);

    transition:all .35s ease;

    position:relative;

    overflow:hidden;

}

/* aged-map corner mark */

.schedule-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:linear-gradient(90deg,
        var(--crimson),
        var(--gold),
        transparent
    );

    opacity:.45;

}

.schedule-card:hover{

    transform:translateY(-6px);

    border-color:rgba(201,144,42,.35);

    box-shadow:0 18px 40px rgba(0,0,0,.40);

}

.schedule-card h3{

    margin-bottom:28px;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:1.3rem;

    text-shadow:0 0 12px rgba(201,144,42,.25);

}

.schedule-card ul{

    display:flex;

    flex-direction:column;

    gap:16px;

}

.schedule-card li{

    display:flex;

    align-items:center;

    gap:14px;

    color:var(--gray);

    padding-bottom:14px;

    border-bottom:1px solid rgba(255,255,255,.04);

}

.schedule-card li:last-child{

    border:none;

    padding-bottom:0;

}

.schedule-card li::before{

    content:"⚓";

    color:var(--gold);

    font-size:1rem;

    flex-shrink:0;

}

/* =====================================================
   CONTACT
===================================================== */

#contact{

    background:
        radial-gradient(ellipse 70% 50% at 50% 0%,
            rgba(139,32,32,.06),
            transparent 60%
        ),
        linear-gradient(180deg,
            #06040A 0%,
            #080610 100%
        );

}

.contact-wrapper{

    display:grid;

    grid-template-columns:1fr 1.2fr;

    gap:60px;

    padding:55px;

    border-radius:var(--radius-sm);

    background:rgba(14, 9, 4, .70);

    border:1px solid rgba(201,144,42,.15);

    position:relative;

    overflow:hidden;

}

.contact-wrapper::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:2px;

    background:linear-gradient(90deg,
        var(--crimson),
        var(--gold),
        var(--crimson)
    );

    opacity:.5;

}

.contact-info h3{

    color:var(--gold);

    margin-top:28px;

    margin-bottom:8px;

    font-size:1rem;

    letter-spacing:2px;

    text-transform:uppercase;

}

.contact-info h3:first-child{

    margin-top:0;

}

.contact-info p{

    margin-bottom:8px;

    color:var(--gray);

}

.contact-form{

    display:flex;

    flex-direction:column;

    gap:18px;

}

.contact-form input,
.contact-form textarea{

    width:100%;

    background:rgba(10, 6, 2, .70);

    border:1px solid rgba(201,144,42,.14);

    border-radius:var(--radius-sm);

    padding:15px 18px;

    color:var(--white);

    transition:.3s;

}

.contact-form textarea{

    resize:vertical;

    min-height:160px;

}

.contact-form input:focus,
.contact-form textarea:focus{

    outline:none;

    border-color:var(--gold);

    box-shadow:0 0 0 4px rgba(201,144,42,.08);

}

.contact-form ::placeholder{

    color:var(--muted);

}

.contact-panel{
    background:rgba(3, 1, 1, 0.40);
    border:1px solid rgba(201,144,42,.15);
    border-radius:var(--radius-sm);
    padding:2.5rem;
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    position:relative;
}

.contact-panel h3{
    color:var(--gold);
    margin-bottom:0.8rem;
}

.panel-label{
    display:inline-block;
    color:var(--gold);
    text-transform:uppercase;
    letter-spacing:0.25rem;
    font-size:0.75rem;
    margin-bottom:0.65rem;
}

.crew-list{
    list-style:none;
    display:grid;
    gap:1.15rem;
    padding:0;
    margin:0;
}

.crew-list li{
    background:rgba(10, 6, 2, .55);
    border:1px solid rgba(201,144,42,.12);
    border-radius:var(--radius-sm);
    padding:1rem 1.2rem;
    color:var(--gray);
    line-height:1.6;
}

.crew-list li strong{
    color:var(--white);
}

.contact-details{
    display:grid;
    gap:1rem;
}

.contact-details > div{
    display:grid;
    gap:0.35rem;
    background:rgba(10, 6, 2, .55);
    border:1px solid rgba(201,144,42,.12);
    border-radius:var(--radius-sm);
    padding:1rem 1.2rem;
}

.contact-details span{
    display:inline-block;
    font-size:1.3rem;
}

.contact-details p{
    margin:0;
    color:var(--gray);
}

/* =====================================================
   FOOTER
===================================================== */

footer{

    padding:50px 0;

    border-top:1px solid rgba(201,144,42,.12);

    background:#040204;

    text-align:center;

}

footer p{

    color:var(--muted);

    font-size:.875rem;

    letter-spacing:1px;

}

/* =====================================================
   SMALL UTILITIES
===================================================== */

html{

    scroll-padding-top:90px;

}

section{

    scroll-margin-top:80px;

}

/* =====================================================
   EVENT MODAL
===================================================== */

body.modal-open{

    overflow:hidden;

}

.event-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    background:rgba(4, 2, 6, .70);

    backdrop-filter:blur(16px);

    -webkit-backdrop-filter:blur(16px);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9999;

}

.event-overlay.active{

    opacity:1;

    visibility:visible;

}

/* ================================= */

.event-modal{

    width:min(900px, 92vw);

    height:auto;

    max-height:88vh;

    background:
        linear-gradient(
            150deg,
            rgba(18, 12, 6, .98),
            rgba(8, 5, 2, .99)
        );

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);

    border-radius:12px;

    border:1px solid rgba(201,144,42,.30);

    position:relative;

    display:flex;

    flex-direction:column;

    transform:translateY(30px) scale(.96);

    transition:all .35s ease;

    box-shadow:
        0 25px 80px rgba(0,0,0,.85),
        0 0 50px rgba(201,144,42,.12);

}

/* top crimson-gold accent bar */

.event-modal::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    right:0;

    height:3px;

    background:linear-gradient(90deg,
        var(--crimson),
        var(--gold),
        var(--crimson)
    );

    border-radius:12px 12px 0 0;

    z-index:1;

}

.event-overlay.active .event-modal{

    transform:translateY(0) scale(1);

}

/* ================================= */

.modal-header{

    padding:32px 36px 18px;

    border-bottom:1px solid rgba(255,255,255,.06);

    background:
        radial-gradient(
            ellipse at top right,
            rgba(139,32,32,.14),
            transparent 60%
        );

}

.modal-category{

    display:inline-block;

    color:var(--gold);

    text-transform:uppercase;

    letter-spacing:3px;

    font-size:.75rem;

    font-weight:700;

    margin-bottom:6px;

}

.modal-header h2{

    font-size:2.0rem;

    margin-bottom:6px;

    color:var(--white);

    text-shadow:0 2px 12px rgba(0,0,0,.80);

}

.modal-tagline{

    color:var(--gray);

    font-size:.95rem;

    font-style:italic;

}

/* ================================= */

.modal-grid{

    display:grid;

    grid-template-columns:1.5fr 1fr;

    gap:32px;

    padding:24px 36px;

    align-items:start;

}

/* ================================= */

.modal-left{

    padding:0;

    overflow:visible;

}

.modal-left h3{

    color:var(--gold);

    margin-bottom:10px;

    font-size:.85rem;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:700;

}

.modal-left p{

    line-height:1.65;

    color:rgba(220, 215, 205, .88);

    font-size:.92rem;

}

/* ================================= */

.modal-right{

    background:transparent;

    border-left:none;

    padding:0;

    display:flex;

    flex-direction:column;

    gap:14px;

    overflow:visible;

}

/* ================================= */

.info-card{

    background:rgba(255,255,255,.025);

    border:1px solid rgba(201,144,42,.16);

    border-radius:8px;

    padding:14px 18px;

}

.info-card h4{

    color:var(--gold);

    margin-bottom:6px;

    font-size:.75rem;

    letter-spacing:2px;

    text-transform:uppercase;

    font-weight:700;

}

.info-card p{

    color:var(--white);

    font-size:.92rem;

    font-weight:500;

    margin:0;

}

/* ================================= */

.coordinator-card{

    background:rgba(201,144,42,.06);

    border-radius:6px;

    padding:10px 14px;

    margin-bottom:8px;

    border:1px solid rgba(201,144,42,.12);

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.coordinator-card:last-child{

    margin-bottom:0;

}

.coordinator-card strong{

    display:inline-block;

    color:var(--white);

    font-size:.88rem;

    font-weight:600;

}

.coordinator-card a{

    color:var(--gold);

    font-size:.84rem;

    transition:.3s;

    font-weight:500;

}

.coordinator-card a:hover{

    color:var(--gold-light);

    text-decoration:underline;

}

/* ================================= */

.modal-footer{

    padding:18px 36px 28px;

    border-top:1px solid rgba(255,255,255,.06);

    background:rgba(6,3,1,.40);

    display:flex;

    justify-content:flex-end;

    align-items:center;

}

.modal-footer .btn{

    padding:12px 32px;

    font-size:.85rem;

    letter-spacing:2px;

}

/* ================================= */

.modal-close{

    position:absolute;

    right:20px;

    top:20px;

    width:36px;

    height:36px;

    border:1px solid rgba(201,144,42,.25);

    border-radius:50%;

    background:rgba(255,255,255,.04);

    color:var(--gray);

    font-size:1.3rem;

    cursor:pointer;

    transition:.3s;

    z-index:10;

    display:flex;

    align-items:center;

    justify-content:center;

    line-height:1;

}

.modal-close:hover{

    background:var(--crimson);

    border-color:var(--crimson-light);

    color:var(--white);

    transform:rotate(90deg);

}