@import url('https://fonts.googleapis.com/css2?family=Metropolis:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Metropolis', sans-serif;
    font-weight: 400; /* Regular weight for everything by default */
}

html {
    scroll-behavior: smooth;
    background-color: #1a1a1a;
}

html, body {
    height: 100%;
}

body {
    background-image: url('assets/website_background.svg');
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-color: #1a1a1a;
    overflow-x: hidden; /* Disable horizontal scrolling */
    overflow-y: auto; /* Enable vertical scrolling */
    /* SVG is 1440x4625, so height = width * (4625/1440) = width * 3.21 */
    height: calc(100vw * 4625 / 1440);
    max-height: calc(100vw * 4625 / 1440);
    margin: 0;
    padding: 0;
}

/* Dark mode scrollbar styling */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: #1a1a1a;
}

::-webkit-scrollbar-thumb {
    background: #444;
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox scrollbar styling */
* {
    scrollbar-width: thin;
    scrollbar-color: #444 #1a1a1a;
}

/* Titles - bold weight */
h1, h2, h3, h4, h5, h6 {
    font-weight: 700; /* Bold for titles */
}

/* Content container to ensure scrolling works - exactly matches SVG height */
.content {
    width: 100%;
    /* Match the SVG height exactly - no scrolling past this */
    height: calc(100vw * 4625 / 1440);
    max-height: calc(100vw * 4625 / 1440);
    position: relative;
    background-color: transparent;
}

/* Title container - positioned down and slightly right with gentle floating */
.title-container {
    position: absolute;
    top: clamp(60px, 9.72vw, 140px);
    left: clamp(15px, 10.42vw, 150px);
    text-align: left;
}

/* Spring-themed floating petals */
.petal {
    position: fixed;
    width: clamp(20px, 2.78vw, 40px);
    height: clamp(20px, 2.78vw, 40px);
    pointer-events: none;
    z-index: 2;
    opacity: 0.7;
    animation-timing-function: linear;
    object-fit: contain;
}

.petal-1 {
    top: 10%;
    left: -50px;
    animation: floatPetals1 20s infinite;
}

.petal-2 {
    top: 30%;
    left: -50px;
    animation: floatPetals2 25s infinite;
    animation-delay: 2s;
}

.petal-3 {
    top: 50%;
    left: -50px;
    animation: floatPetals3 22s infinite;
    animation-delay: 5s;
}


@keyframes floatPetals1 {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateX(calc(100vw + 100px)) translateY(-200px) rotate(360deg);
        opacity: 0;
    }
}

@keyframes floatPetals2 {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateX(calc(100vw + 100px)) translateY(150px) rotate(-360deg);
        opacity: 0;
    }
}

@keyframes floatPetals3 {
    0% {
        transform: translateX(0) translateY(0) rotate(0deg);
        opacity: 0;
    }
    10% {
        opacity: 0.7;
    }
    90% {
        opacity: 0.7;
    }
    100% {
        transform: translateX(calc(100vw + 100px)) translateY(-100px) rotate(360deg);
        opacity: 0;
    }
}



/* "craft at" text */
.craft-at {
    font-size: clamp(24px, 3.82vw, 55px);
    font-weight: 700; /* Bold */
    color: white;
    line-height: 1.2;
    display: flex;
    align-items: center;
    font-family: 'Metropolis', sans-serif;
}

/* Word animation container - fixed position, only inner content moves */
.word-animation {
    display: inline-block;
    position: relative;
    overflow: hidden;
    height: clamp(29px, 4.58vw, 66px); /* Approximate line height for one word */
    vertical-align: middle;
    font-family: 'Metropolis', sans-serif;
    font-weight: 700;
}

/* Wrapper that moves - contains all words */
.words-wrapper {
    display: block;
    animation: slideWords 10s infinite;
    animation-timing-function: ease-in-out;
}

/* Individual words */
.word-animation .word {
    display: block;
    height: clamp(29px, 4.58vw, 66px);
    line-height: clamp(29px, 4.58vw, 66px);
    font-family: 'Metropolis', sans-serif;
    font-weight: 700;
}

/* "at" text with 60% opacity */
.at-text {
    opacity: 0.6;
    display: inline-block;
    vertical-align: middle;
    font-family: 'Metropolis', sans-serif;
    font-weight: 700;
    margin-left: clamp(3px, 1.04vw, 15px);
}

/* Animation keyframes - cycles through 3 words: craft, build, pitch, then loops back */
@keyframes slideWords {
    0%, 30% {
        transform: translateY(0);
    }
    33%, 63% {
        transform: translateY(clamp(-29px, -4.58vw, -66px));
    }
    66%, 96% {
        transform: translateY(clamp(-58px, -9.17vw, -132px));
    }
    100% {
        transform: translateY(clamp(-87px, -13.75vw, -198px));
    }
}

/* "Spark" title - SVG image */
.spark-title {
    display: block;
    height: clamp(60px, 9.03vw, 130px); /* Match SVG height */
    width: auto;
    margin-top: clamp(3px, 0.35vw, 5px);
}

/* Event date text */
.event-date {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bold */
    font-size: clamp(14px, 1.67vw, 24px);
    color: white;
    margin-top: clamp(10px, 2.08vw, 30px);
}

/* What is Spark container */
.what-is-spark-container {
    margin-top: clamp(30px, 43.06vw, 620px);
    margin-left: clamp(-100px, -6.94vw, 0px);
}

/* WDS Photos and description container */
.wds-photos-container {
    display: flex;
    align-items: flex-start;
    gap: clamp(15px, 2.78vw, 40px);
}

/* WDS Photos */
.wds-photos {
    display: block;
    width: auto;
    max-width: clamp(300px, 55.56vw, 800px);
    flex-shrink: 0;
}

/* Title and description wrapper */
.title-description-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    max-width: clamp(300px, 34.72vw, 500px);
}

/* What is Spark title */
.what-is-spark-title {
    font-family: 'Metropolis', sans-serif;
    font-weight: 700; /* Bold */
    font-size: clamp(24px, 3.33vw, 48px);
    color: white;
    margin: 0;
    margin-bottom: clamp(10px, 1.39vw, 20px);
    white-space: nowrap;
}

/* Spark description */
.spark-description {
    margin-top: 0;
    margin-left: 0;
}

.spark-description p {
    font-family: 'Metropolis', sans-serif;
    font-weight: 500; /* Medium */
    font-size: clamp(11px, 1.25vw, 18px);
    color: white;
    line-height: 1.6;
    margin-bottom: clamp(10px, 1.25vw, 18px);
}

.spark-description p:last-child {
    margin-bottom: 0;
}

/* WDS Team section */
.wds-team-section {
    margin-top: clamp(40px, 8.33vw, 120px);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-left: clamp(-100px, -6.94vw, 0px);
}

.wds-team-title {
    font-family: 'Metropolis', sans-serif;
    font-weight: 700; /* Bold */
    font-size: clamp(24px, 4.17vw, 60px);
    color: white;
    margin: 0;
    margin-bottom: clamp(20px, 2.78vw, 40px);
    margin-left: clamp(0px, 6.25vw, 90px);
}

/* Team carousel wrapper */
.team-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    max-width: clamp(100%, 97.22vw, 1400px);
    margin-left: clamp(0px, 6.25vw, 90px);
}

/* Team members container */
.team-members-container {
    display: flex;
    gap: clamp(30px, 20.83vw, 300px);
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    overflow: hidden;
    transition: transform 0.5s ease;
}


/* Team member */
.team-member {
    display: flex;
    align-items: center;
    gap: clamp(15px, 2.08vw, 30px);
    flex: 0 0 auto;
    min-width: clamp(200px, 34.72vw, 500px);
}

.team-member-left {
    justify-content: flex-start;
}

.team-member-right {
    justify-content: flex-end;
    flex-direction: row-reverse;
}

/* Team photo */
.team-photo {
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    background: transparent;
}

/* Team info */
.team-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.team-name {
    font-family: 'Metropolis', sans-serif;
    font-weight: 700; /* Bold */
    font-size: clamp(18px, 1.94vw, 28px);
    color: white;
    margin: 0;
    margin-top: clamp(-100px, -6.94vw, -50px);
}

.team-title {
    font-family: 'Metropolis', sans-serif;
    font-weight: 400; /* Regular */
    font-size: clamp(14px, 1.53vw, 22px);
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    transform: scale(1.2);
    margin-left: clamp(3px, 1.04vw, 15px);
}

/* Sponsor section */
.sponsor-section {
    margin-top: clamp(40px, 61.11vw, 880px);
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: clamp(20px, 2.78vw, 40px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: clamp(300px, 55.56vw, 800px);
}

/* Sponsor title */
.sponsor-title {
    font-family: 'Metropolis', sans-serif;
    font-weight: 700; /* Bold */
    font-size: clamp(24px, 5.69vw, 82px);
    color: white;
    margin: 0;
}

/* Sponsor description */
.sponsor-description {
    margin-top: clamp(15px, 2.08vw, 30px);
    max-width: clamp(300px, 55.56vw, 800px);
}

.sponsor-description p {
    font-family: 'Metropolis', sans-serif;
    font-weight: 500; /* Medium */
    font-size: clamp(12px, 1.25vw, 18px);
    color: white;
    line-height: 1.6;
    margin-bottom: clamp(10px, 1.39vw, 20px);
}

.sponsor-description p:last-child {
    margin-bottom: 0;
}

.sponsor-email {
    color: white;
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

.sponsor-email:hover {
    opacity: 0.7;
}

/* Sponsor button */
.sponsor-button-link {
    display: inline-block;
    margin-top: clamp(20px, 2.78vw, 40px);
    transition: transform 0.3s ease;
}

.sponsor-button-link:hover {
    transform: scale(1.05);
}

.sponsor-button {
    display: block;
    width: auto;
    height: auto;
    max-width: clamp(200px, 20.83vw, 300px);
}

/* Navbar */
.navbar {
    position: fixed;
    top: clamp(5px, 1.04vw, 15px);
    left: clamp(5px, 0.35vw, 5px);
    width: 100%;
    display: flex;
    align-items: center;
    padding: clamp(10px, 1.39vw, 20px) clamp(12px, 2.78vw, 40px);
    z-index: 1000;
}

.navbar-logo {
    height: clamp(24px, 2.78vw, 40px);
    width: auto;
    margin-right: clamp(12px, 2.78vw, 40px);
}

.navbar-menu {
    display: flex;
    gap: clamp(12px, 2.08vw, 30px);
    align-items: center;
}

.navbar-link {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Thin */
    font-size: clamp(14px, 1.74vw, 25px);
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    transition: opacity 0.3s ease;
}

.navbar-link:hover {
    opacity: 0.7;
}

.navbar-link.active {
    font-weight: 550; /* Bold when active */
    opacity: 1;
}

/* Mobile Responsive Styles */
@media screen and (max-width: 768px) {
    /* Layout adjustments only - all sizing handled by clamp() */
    
    /* Navbar layout */
    .navbar {
        left: 0;
    }
    
    /* Title container layout */
    .title-container {
        left: clamp(15px, 2.6vw, 20px);
    }
    
    /* What is Spark container - layout */
    .what-is-spark-container {
        margin-left: 0;
    }
    
    /* WDS Photos container - layout */
    .wds-photos-container {
        flex-direction: column;
    }
    
    /* WDS Photos - layout */
    .wds-photos {
        max-width: 100%;
    }
    
    /* Title and description wrapper - layout */
    .title-description-wrapper {
        max-width: 100%;
    }
    
    /* Spark description - layout */
    .spark-description {
        max-width: 100%;
    }
    
    /* WDS Team section - layout */
    .wds-team-section {
        margin-left: 0;
    }
    
    /* Team carousel wrapper - layout */
    .team-carousel-wrapper {
        margin-left: 0;
        max-width: 100%;
    }
    
    /* Team members container - layout */
    .team-members-container {
        flex-direction: column;
        align-items: center;
    }
    
    .team-member {
        min-width: auto;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    
    .team-member-right {
        flex-direction: column;
    }
    
    /* Sponsor section - layout */
    .sponsor-description {
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    /* Make background much more zoomed in on mobile */
    body {
        background-size: 250% auto;
        background-position: center top;
    }
    
    /* Layout adjustments only - all sizing handled by clamp() */
    
    /* Navbar layout */
    .navbar {
        flex-wrap: wrap;
    }
    
    .navbar-menu {
        flex-wrap: wrap;
    }
    
    /* Title container layout */
    .title-container {
        left: clamp(15px, 3.13vw, 15px);
        right: clamp(15px, 3.13vw, 15px);
    }
    
    /* What is Spark container - layout */
    .what-is-spark-container {
        margin-left: 0;
    }
    
    /* WDS Photos container - layout */
    .wds-photos-container {
        flex-direction: column;
    }
    
    /* WDS Photos - layout */
    .wds-photos {
        max-width: 100%;
    }
    
    /* Title and description wrapper - layout */
    .title-description-wrapper {
        max-width: 100%;
    }
    
    /* Spark description - layout */
    .spark-description {
        max-width: 100%;
    }
    
    /* WDS Team section - layout */
    .wds-team-section {
        margin-left: 0;
    }
    
    /* Team carousel wrapper - layout */
    .team-carousel-wrapper {
        margin-left: 0;
        max-width: 100%;
    }
    
    /* Team members container - layout */
    .team-members-container {
        flex-direction: column;
        align-items: center;
    }
    
    .team-member {
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: auto;
    }
    
    .team-member-right {
        flex-direction: column;
    }
    
    /* Sponsor section - layout */
    .sponsor-description {
        max-width: 100%;
    }
    
    /* Sponsor section - reduce gap on mobile */
    .sponsor-section {
        margin-top: 40px;
    }
}

/* Tablet animation keyframes */
@keyframes slideWordsTablet {
    0%, 30% {
        transform: translateY(0);
    }
    33%, 63% {
        transform: translateY(-48px);
    }
    66%, 96% {
        transform: translateY(-96px);
    }
    100% {
        transform: translateY(-144px);
    }
}

/* Mobile animation keyframes - adjusted for bigger heights */
@keyframes slideWordsMobile {
    0%, 30% {
        transform: translateY(0);
    }
    33%, 63% {
        transform: translateY(-29px);
    }
    66%, 96% {
        transform: translateY(-58px);
    }
    100% {
        transform: translateY(-87px);
    }
}

/* Loading Screen */
.loading-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    opacity: 1;
    transition: opacity 0.5s ease-out;
}

.loading-screen.fade-out {
    opacity: 0;
    pointer-events: none;
}

.loading-content {
    display: flex;
    justify-content: center;
    align-items: center;
}

.loading-flower {
    width: 80px;
    height: 80px;
    animation: loadingSpin 2s linear infinite;
}

@keyframes loadingSpin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* FAQ Section */
.faq-section {
    margin-top: clamp(60px, 27.78vw, 400px);
    margin-bottom: 0;
    margin-left: auto;
    margin-right: auto;
    max-width: clamp(300px, 62.5vw, 900px);
    padding: 0 clamp(20px, 2.78vw, 40px);
    padding-bottom: clamp(40px, 4.17vw, 60px);
}

.faq-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Bold */
    font-size: clamp(48px, 6.25vw, 90px);
    color: white;
    text-align: center;
    margin: 0;
    margin-bottom: clamp(40px, 5.56vw, 80px);
    text-transform: uppercase;
}

.faq-list {
    display: flex;
    flex-direction: column;
}

.faq-item {
    border-bottom: 1px solid white;
    padding: clamp(15px, 1.74vw, 25px) 0;
}

.faq-item:last-child {
    border-bottom: none;
}

.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.faq-question-text {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500; /* Regular */
    font-size: clamp(14px, 1.67vw, 24px);
    color: white;
    flex: 1;
}

.faq-toggle {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(24px, 2.22vw, 32px);
    color: white;
    margin-left: clamp(10px, 1.39vw, 20px);
    transition: transform 0.3s ease;
}

.faq-item.active .faq-toggle {
    transform: rotate(45deg);
}

.faq-answer {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: clamp(12px, 1.25vw, 18px);
    color: white;
    line-height: 1.6;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0;
}

.faq-item.active .faq-answer {
    max-height: 500px;
    padding-top: clamp(15px, 1.39vw, 20px);
}