/* Gochi Hand (SIL Open Font License, see fonts/OFL.txt), served from here rather than Google Fonts.
   Cloudflare rewrites Google Fonts links into an inline style, which the page's security policy blocks */
@font-face {
    font-family: "Gochi Hand";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/gochi-hand.woff2") format("woff2");
}

:root {
    --ink: #4A0606;
    --line: #7E0B0B;
    --paper: #FFF8EC;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #24384A;
    color: var(--ink);
    font-family: "Gochi Hand", cursive;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---------- backdrop ---------- */

/* the volcano painting, with Reykjavík on top of it fading in as you scroll (see script.js) */
.backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

.scene {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-repeat: no-repeat;
}

.scene-volcano {
    background-image: url("hero.webp");
    /* keeps the volcano in view when the screen crops the painting */
    background-position: 65% 20%;
}

.scene-city {
    background-image: url("reykjavik-placeholder.svg");
    background-position: center;
    opacity: 0;
    will-change: opacity;
}

/* ---------- hero ---------- */

.hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    overflow: hidden;
    /* starts just below the Hack Club flag hanging from the top (the flag is 158/280 as tall as it is wide) */
    --top-space: calc(clamp(110px, 11vw, 170px) * 0.565 + 0.6rem);
    /* keeps the bottom free for the scroll hint, so the form and its error messages never end up under it */
    --bottom-space: calc(5vh + 4.6rem);
    /* how much of the screen the stickers, form and error message under the logo need */
    --below-logo: 250px;
    padding: var(--top-space) 7vw var(--bottom-space);
}

/* the Hack Club flag held by Orpheus, whose arm reaches in from the top edge like on other Hack Club sites */
.hc-flag {
    position: absolute;
    z-index: 3;
    top: 0;
    left: 1.5rem;
    width: clamp(110px, 11vw, 170px);
    transition: transform 0.2s ease;
    transform-origin: top left;
}

.hc-flag img {
    display: block;
    width: 100%;
    height: auto;
}

.hc-flag:hover,
.hc-flag:focus-visible {
    transform: rotate(-4deg);
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 1140px;
}

.logo {
    /* a little wider than the form under it, sticking out evenly on both sides */
    margin: 0 0 0 -4%;
    width: calc(min(1140px, 86vw, 100vh) * 1.08);
    align-self: flex-start;
    /* then nudged left, because the artwork looks heavier on the right */
    translate: -3% 0;
    line-height: 0;
}

.logo img {
    width: 100%;
    height: auto;
    /* on short screens the logo shrinks so everything under it still fits on the first screen */
    max-height: max(110px, calc(100svh - var(--top-space) - var(--bottom-space) - var(--below-logo)));
    object-fit: contain;
    object-position: center;
}

/* the date and the sponsor, like little stickers tucked under the logo */
.stickers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.8rem 1.4rem;
    justify-content: center;
    margin: 0.4rem 0 1.4rem;
}

.dates,
.sponsor {
    margin: 0;
    padding: 0.15rem 1.1rem;
    font-size: clamp(1.4rem, 3vw, 1.9rem);
}

.dates {
    transform: rotate(-3deg);
}

.sponsor {
    font-size: clamp(1.2rem, 2.4vw, 1.6rem);
    transform: rotate(2.5deg);
}

/* ---------- wobbly hand-drawn outlines, drawn by script.js ---------- */

.wobbly {
    position: relative;
    isolation: isolate;
}

.wobbly > .outline {
    position: absolute;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
}

.outline .fill {
    fill: var(--paper);
}

/* a bold ink line with a thinner, looser pencil line on top */
.outline .ink,
.outline .sketch {
    fill: none;
    stroke: var(--line);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke 0.2s;
}

.outline .ink {
    stroke-width: 5.5px;
}

.outline .sketch {
    stroke-width: 2.2px;
    opacity: 0.6;
}


/* ---------- form ---------- */

.rsvp {
    display: flex;
    align-items: center;
    gap: 1.6rem;
}

.field input {
    display: block;
    /* narrower on smaller windows, so the button stays clear of the volcano in the painting */
    width: min(440px, 30vw);
    padding: 0.35em 0.9em;
    border: none;
    background: transparent;
    color: var(--ink);
    font: inherit;
    /* small enough that a whole email address fits */
    font-size: clamp(1.3rem, 2.5vw, 2.2rem);
    outline: none;
}

.field input::placeholder {
    color: var(--line);
    opacity: 0.85;
}

.field:focus-within > .outline .ink,
.field:focus-within > .outline .sketch {
    stroke: #C2410C;
}

.go {
    flex: none;
    height: 4.2rem;
    padding: 0 1.3rem;
    border: none;
    background: transparent;
    color: var(--ink);
    font: inherit;
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.go:hover,
.go:focus-visible {
    transform: scale(1.06) rotate(-3deg);
    outline: none;
}

.go:hover > .outline .ink,
.go:hover > .outline .sketch,
.go:focus-visible > .outline .ink,
.go:focus-visible > .outline .sketch {
    stroke: #C2410C;
}

.go:active {
    transform: scale(0.94);
}

.go:disabled {
    cursor: default;
}

.message {
    min-height: 2.2em;
    margin: 1.2rem 0 0;
    text-align: center;
    font-size: 1.6rem;
}

/* sits on the painting, so it gets a little paper behind it to stay readable */
.message.error {
    display: inline-block;
    padding: 0.1rem 0.7rem;
    border-radius: 0.6rem;
    background: var(--paper);
    color: #B42318;
}

.rsvp.shake {
    animation: nope 0.4s ease;
}

/* replaces the form once someone has RSVP'd */
/* after RSVPing the form is hidden but keeps its width, so the logo stays the same size */
.rsvp.done {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

/* the thank you note sits in the middle, under the logo */
.message.done {
    align-self: stretch;
}

.thanks {
    display: inline-block;
    padding: 0.8rem 1.6rem;
    font-size: clamp(1.6rem, 3.6vw, 2.4rem);
    animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.thanks small {
    display: block;
    font-size: 0.65em;
    color: var(--line);
}

/* ---------- scroll hint ---------- */

.scroll-hint {
    position: absolute;
    z-index: 2;
    bottom: 5vh;
    /* to the right of the little cabin in the painting */
    left: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.2rem 1rem 0.1rem;
    color: var(--ink);
    font-size: 1.7rem;
    line-height: 1.1;
    text-decoration: none;
    /* the whole label bobs, text and outline together */
    animation: bob 1.6s ease-in-out infinite;
}

.scroll-hint > svg {
    width: 2.2rem;
}

.scroll-hint > svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 4px;
    stroke-linecap: round;
}

/* ---------- about ---------- */

/* ---------- footer ---------- */

/* centred at the bottom of the page */
.site-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.2rem;
    padding: 0 7vw 3rem;
    color: var(--paper);
    font-size: 1.35rem;
}

.footer-about {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.2rem;
    max-width: 30rem;
}

.footer-about img {
    flex: none;
    width: 7.5rem;
    height: auto;
}

.footer-about p {
    margin: 0;
    line-height: 1.3;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem 1.2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer-links a {
    display: inline-block;
    padding: 0.25rem 0.9rem;
    color: var(--ink);
    text-decoration: none;
}

.footer-links a:hover,
.footer-links a:focus-visible {
    color: #C2410C;
    outline: none;
}

/* tall enough that there's room to scroll the whole way into Reykjavík */
.about {
    display: grid;
    place-items: center;
    min-height: 100vh;
    min-height: 100svh;
    padding: 12vh 7vw;
}

.about-card {
    max-width: 640px;
    padding: 2rem 2.4rem;
    font-size: 1.6rem;
    line-height: 1.35;
}

.about-card h2 {
    margin: 0 0 0.6rem;
    font-size: 2.6rem;
}

.about-card p {
    margin: 0;
}

/* ---------- animations ---------- */

@keyframes bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(7px); }
}

@keyframes nope {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-10px) rotate(-1deg); }
    40% { transform: translateX(9px) rotate(1deg); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(4px); }
}

@keyframes pop-in {
    from { transform: scale(0.6) rotate(-4deg); opacity: 0; }
    to { transform: scale(1) rotate(0); opacity: 1; }
}

/* on wider screens the logo is exactly as wide as the email field and RSVP button below it:
   the content box shrinks to fit the form, and the logo (which doesn't count towards that size) fills it */
@media (min-width: 761px) {
    .hero-content {
        width: fit-content;
    }

    /* error messages and the thank you note wrap to fit too, instead of making the logo jump bigger */
    .logo,
    .message {
        contain: inline-size;
        width: 100%;
    }

    .logo {
        width: 108%;
    }
}

/* ---------- small screens ---------- */

@media (max-width: 760px) {
    /* the volcano fills the middle of the screen here, so the form goes down onto the snow
       instead of covering the lava, and the logo stays up in the sky */
    .hero {
        display: flex;
        flex-direction: column;
        /* the stickers stack and error messages wrap onto two lines here */
        --below-logo: 300px;
    }

    /* less bigger and less nudged than on wider screens, so it stays clear of the screen edge */
    .logo {
        margin-left: -2%;
        width: calc(min(1140px, 86vw, 100vh) * 1.04);
        translate: -2% 0;
    }

    .hero-content {
        display: flex;
        flex: 1;
        flex-direction: column;
        align-items: center;
    }

    .footer-about {
        flex-direction: column;
        text-align: center;
    }

    .stickers {
        gap: 0.8rem;
        margin: 0.7rem 0 auto;
    }

    .rsvp {
        width: 100%;
        margin-top: 1.6rem;
    }

    .message {
        min-height: 0;
    }

    .rsvp {
        gap: 1.1rem;
    }

    .field {
        flex: 1;
        min-width: 0;
    }

    .field input {
        width: 100%;
    }

    /* the cabin is cropped out on narrow screens */
    .scroll-hint {
        left: 7vw;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .scroll-hint {
        animation: none;
    }
}