/* ==========================================================================
   RADish Fest — shared styles
   Loaded by index.html and sponsorship.html (cached once across both pages).

   Sections:
   1. Reset / root tokens / base
   2. Fonts
   3. Keyframes
   4. Wordmark animation (index only; selectors no-op elsewhere)
   5. Visibility helpers + reduced motion
   6. Focus states
   7. Components: nav links, buttons, burger menu, flip card
   8. Reusable patterns: .rf-link, .rf-eyebrow, .rf-card, .rf-tape, .rf-feat
   ========================================================================== */

/* 1. Reset / root tokens / base ------------------------------------------- */
* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: 5.5rem; /* keep anchor targets clear of the sticky nav */
    font-size: 100%;
}

:root {
    /* Palette. Colors used with transparency also expose an -rgb channel
       triplet; the solid hex is derived from it so there's one source of
       truth. Compose alpha with: rgba(var(--cream-rgb), .85). */
    --bg-rgb: 22, 18, 13;
    --cream-rgb: 243, 231, 201;
    --ink-rgb: 20, 16, 10;
    --red-rgb: 245, 32, 84;
    --green-rgb: 152, 157, 65;
    --blue-rgb: 123, 151, 187;
    --gold-rgb: 255, 156, 113;

    --bg: rgb(var(--bg-rgb));
    --bg2: #1f1a12;
    --panel: #211b12;
    --cream: rgb(var(--cream-rgb));
    --cream2: #f7eed6;
    --ink: rgb(var(--ink-rgb));
    --red: rgb(var(--red-rgb));
    --green: rgb(var(--green-rgb));
    --blue: rgb(var(--blue-rgb));
    --gold: rgb(var(--gold-rgb));
    --plum: #8d6fa0;

    /* Semantic one-offs that recur across the markup. */
    --shadow: #0c0a06;      /* drop-shadow black behind display headings */
    --ink-muted: #5a4a35;   /* muted-brown body text on cream cards */
    --tape: rgba(var(--cream-rgb), .34);

    --accent-font: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
}

body {
    margin: 0;
    background: var(--bg);
    color: var(--cream);
    font-family: 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* 2. Fonts ---------------------------------------------------------------- */
@font-face {
    font-family: 'Pain Circus';
    src: url('../fonts/PainCircus.woff2') format('woff2'),
         url('../fonts/PainCircus.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* 3. Keyframes ------------------------------------------------------------ */
@keyframes rf-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: .95; }
    50% { transform: scale(.55) rotate(20deg); opacity: .4; }
}

@keyframes rf-bounce {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-0.875rem) rotate(3deg); }
}

@keyframes rf-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rf-ticker {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

@keyframes rf-ticker2 {
    from { transform: translateX(-50%); }
    to { transform: translateX(0); }
}

@keyframes rf-stroke {
    0% { -webkit-text-stroke-color: #f52054; }
    16% { -webkit-text-stroke-color: #f0883a; }
    33% { -webkit-text-stroke-color: #e3c14a; }
    50% { -webkit-text-stroke-color: #989d41; }
    66% { -webkit-text-stroke-color: #7b97bb; }
    83% { -webkit-text-stroke-color: #b160a8; }
    100% { -webkit-text-stroke-color: #f52054; }
}

/* 4. Wordmark animation (index hero) ------------------------------------- */
#top h1 [data-base] { animation: rf-stroke 17s linear infinite; }
#top h1 [data-base]:nth-child(1) { animation-duration: 16s; animation-delay: -1s; }
#top h1 [data-base]:nth-child(2) { animation-duration: 18.5s; animation-delay: -3s; }
#top h1 [data-base]:nth-child(3) { animation-duration: 15.5s; animation-delay: -2s; }
#top h1 [data-base]:nth-child(4) { animation-duration: 19s; animation-delay: -4s; }
#top h1 [data-base]:nth-child(5) { animation-duration: 16.8s; animation-delay: -0.5s; }
#top h1 [data-base]:nth-child(6) { animation-duration: 17.6s; animation-delay: -5s; }

@media (prefers-reduced-motion: reduce) {
    #top h1 [data-base] { transition: none !important; }
}

/* 5. Visibility helpers + reduced motion --------------------------------- */
[data-mb] { display: none !important; }

@media (max-width: 880px) {
    [data-dt] { display: none !important; }
    [data-mb] { display: flex !important; }

    footer a, [data-mb], nav a[href="#tickets"], nav a[data-cta] {
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

[data-af], nav a[href^="#"] {
    font-family: var(--accent-font) !important;
}

/* 6. Focus states -------------------------------------------------------- */
*:focus:not(:focus-visible) { outline: none; }

a:focus-visible, button:focus-visible {
    outline: 3px solid var(--ink);
    outline-offset: 2px;
    box-shadow: 0 0 0 6px var(--gold);
    border-radius: 3px;
}

/* Skip-to-content link: off-screen until focused by keyboard */
.rf-skip {
    position: absolute;
    left: 0.75rem;
    top: -4rem;
    z-index: 9999;
    background: var(--cream);
    color: var(--ink);
    font-family: var(--accent-font);
    font-weight: 700;
    font-size: 0.9375rem;
    padding: 0.6rem 1rem;
    border: 2.5px solid var(--ink);
    border-radius: 0.5rem;
    text-decoration: none;
    transition: top .18s ease;
}

.rf-skip:focus {
    top: 0.75rem;
}

/* 7. Components ---------------------------------------------------------- */

/* Nav hover: a piece of tape slaps in behind the link */
.rf-navlink {
    position: relative;
    z-index: 0;
    transition: color .16s ease;
}

.rf-navlink::before {
    content: "";
    position: absolute;
    left: -0.6rem;
    right: -0.6rem;
    top: -0.22rem;
    bottom: -0.28rem;
    background: var(--tape);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
    transform: rotate(-2.5deg) scale(.72);
    opacity: 0;
    transition: opacity .15s ease, transform .22s cubic-bezier(.34, 1.5, .5, 1);
    z-index: -1;
    pointer-events: none;
}

.rf-navlink:nth-of-type(even)::before {
    transform: rotate(2.5deg) scale(.72);
}

/* Buttons: square corners; lift / deepen shadow on hover */
.rf-btn {
    cursor: pointer;
    transition: transform .18s cubic-bezier(.34, 1.4, .5, 1), box-shadow .18s ease, background-color .18s ease, color .18s ease;
}

/* Press feedback — fires on touch too, gives a tap response */
.rf-btn:active {
    transform: translateY(-1px) rotate(0deg) !important;
    box-shadow: 2px 3px 0 rgba(0, 0, 0, .5) !important;
}

/* Hover effects ONLY on devices with a real pointer (mouse/trackpad).
   Touchscreens report hover:none, so taps stay single-tap and the
   hover state can never "stick". */
@media (hover: hover) {
    .rf-navlink:hover::before {
        opacity: 1;
        transform: rotate(-2.5deg) scale(1);
    }

    .rf-navlink:nth-of-type(even):hover::before {
        transform: rotate(2.5deg) scale(1);
    }

    .rf-navlink:hover {
        color: var(--ink) !important;
    }

    .rf-btn:hover {
        transform: translateY(-3px) rotate(-1deg) !important;
        box-shadow: 6px 9px 0 rgba(0, 0, 0, .5) !important;
    }

    .rf-btn-ghost:hover {
        background: var(--cream) !important;
        color: var(--ink) !important;
    }

    /* Footer / plain links: shift to their accent colour on hover.
       Set per-link with style="--hov: var(--red)". Replaces the old
       non-functional style-hover="" attributes. */
    a.rf-link:hover { color: var(--hov, var(--gold)); }
}

/* Burger menu */
.rf-burger {
    position: relative;
    width: 1.75rem;
    height: 1.375rem;
}

.rf-row {
    position: absolute;
    left: 0;
    right: 0;
    height: 0.4375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .4s cubic-bezier(.5, .05, .18, 1);
}

.rf-row-1 { top: 0; }
.rf-row-2 { top: 50%; transform: translateY(-50%); }
.rf-row-3 { bottom: 0; }

.rf-bar {
    position: absolute;
    width: 100%;
    height: 0.3125rem;
    border-radius: 0.3125rem;
    transition: opacity .24s ease;
}

.rf-bone-ico {
    position: absolute;
    width: 150%;
    left: -25%;
    display: block;
    opacity: 0;
    transition: opacity .28s ease;
    filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .35));
}

.rf-bone-ico svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

button[aria-expanded="true"] .rf-row-1 {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}

button[aria-expanded="true"] .rf-row-3 {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%) rotate(-45deg);
}

button[aria-expanded="true"] .rf-row-2 {
    opacity: 0;
    transform: translateY(-50%) scale(.2);
}

button[aria-expanded="true"] .rf-bar { opacity: 0; }

button[aria-expanded="true"] .rf-bone-ico { opacity: 1; }

/* Location flip card (index) */
/* Perspective lives on the cover wrapper only, so the live map sibling
   (#rf-map) is never distorted by the 3D context. The wrapper is transparent
   to pointer events so the map underneath stays interactive when open; only
   the card itself catches clicks (to open when closed, close when open). */
.rf-cover {
    perspective: 1600px;
    pointer-events: none;
}

.rf-flip-card {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    transition: transform .8s cubic-bezier(.34, 1.05, .38, 1), box-shadow .8s ease;
    transform-origin: top center;
    transform: none;
    transform-style: preserve-3d;
    box-shadow: 0 12px 22px -14px rgba(0, 0, 0, .5);
    cursor: pointer;
}

/* Desktop hover = a small "peek" (clean hinge from the top edge, no twist) */
@media (hover: hover) and (min-width: 881px) {
    .rf-flip:not(.is-open) .rf-flip-card:hover {
        transform: rotateX(20deg);
        box-shadow: 0 22px 34px -18px rgba(0, 0, 0, .6);
    }
}

/* Click/tap opens it fully — a clean hinge from the top edge (like a book cover
   standing up), revealing the live map underneath. The lifted cover stays
   clickable so clicking it closes the map again. */
.rf-flip.is-open .rf-flip-card {
    transform: rotateX(110deg);
    box-shadow: 0 34px 44px -18px rgba(0, 0, 0, .6);
}

@media (prefers-reduced-motion: reduce) {
    .rf-flip-card { transition: none; }
}

/* 8. Reusable patterns --------------------------------------------------- */

/* Plain text link (nav + footer). Pair with .rf-navlink for the tape slap. */
.rf-link {
    font-family: var(--accent-font);
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--cream);
    text-decoration: none;
}

/* Small uppercase kicker above a heading. Set colour inline:
   style="color: var(--gold)". Override size/spacing inline when needed. */
.rf-eyebrow {
    font-family: var(--accent-font);
    font-weight: 700;
    font-size: 0.875rem;
    letter-spacing: .2em;
    text-transform: uppercase;
}

/* Cream "paper" card. Rotation per instance via style="--rot: -1.5deg". */
.rf-card {
    background: var(--cream);
    color: var(--ink);
    transform: rotate(var(--rot, 0deg));
}

/* Strip of masking tape. Position + rotation stay inline per instance. */
.rf-tape {
    position: absolute;
    background: var(--tape);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}

/* Checklist row used in tiers / reach / "what's on" lists.
   The bullet is .rf-feat-i; set its colour inline. */
.rf-feat {
    display: flex;
    gap: 0.625rem;
    font-family: var(--accent-font);
    font-size: 0.9375rem;
    line-height: 1.45;
    font-weight: 600;
}

.rf-feat-i {
    font-weight: 800;
    flex: 0 0 auto;
}

/* ============================================================== */
/* 9. Pizazz: view transitions, polaroid develop, tape peel, map  */
/* ============================================================== */

/* Cross-document view transitions (progressive; no-op where unsupported).
   The nav radish carries view-transition-name: rf-logo on both pages, so it
   morphs across the index <-> sponsorship navigation. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) { animation: none !important; }
}

/* Lineup photo "develops" like instant film as it scrolls into view.
   The resting state is the intended B&W; unsupported browsers just show that. */
@keyframes rf-develop {
    from { opacity: .15; filter: grayscale(1) brightness(1.7) contrast(.5) blur(7px); }
    to   { opacity: 1;   filter: grayscale(1) contrast(1.35) brightness(1.02); }
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .rf-develop {
            animation: rf-develop linear both;
            animation-timeline: view();
            animation-range: entry 5% cover 38%;
        }
    }
}

/* Masking tape stays put (it's sticky). The class just positions each strip,
   keeping its own tilt via --rot. */
.rf-tape-peel {
    transform: translateX(-50%) rotate(var(--rot, 0deg));
    transform-origin: top center;
}

/* ---- Live map (Leaflet), filtered to a B&W zine / photocopy look ---- */
#rf-map {
    background: #d8d2c4;
    cursor: grab;
}

#rf-map:active { cursor: grabbing; }

.rf-map-zine .leaflet-tile {
    filter: grayscale(1) contrast(1.45) brightness(1.08);
}

.leaflet-container {
    background: #d8d2c4;
    font-family: var(--accent-font);
}

.leaflet-control-attribution {
    background: rgba(243, 231, 201, .85) !important;
    color: var(--ink) !important;
    font-size: 10px;
}

.leaflet-control-attribution a { color: var(--ink-muted) !important; }

.leaflet-bar a {
    background: var(--cream) !important;
    color: var(--ink) !important;
    border-bottom-color: rgba(20, 16, 10, .2) !important;
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
    background: var(--cream);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 3px 4px 0 rgba(0, 0, 0, .4);
}

.leaflet-popup-content {
    font-family: var(--accent-font);
    font-weight: 600;
    margin: 0.6rem 0.85rem;
}

/* radish "you are here" marker */
.rf-pin {
    width: 2.5rem;
    height: 2.5rem;
    filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .5));
    animation: rf-bounce 4.4s ease-in-out infinite;
    transform-origin: center bottom;
}

/* (flip-back button and cover hint removed — clicking the lifted cover closes it) */