/* Explain: Styles for UI components like buttons, textures, and section transitions. */
/* Hero headline — deep 3D extrude (chunky stepped side wall) */
/* Hero headline — solid flat extrude (stepped side wall, no gradient) */
.hero-title-3d {
    letter-spacing: 0.14em;
    color: #ffffff;
    text-shadow:
        2px 2px 0 #0ea5e9,
        4px 4px 0 #0ea5e9,
        6px 6px 0 #0ea5e9,
        8px 8px 0 #0ea5e9,
        10px 10px 0 #0ea5e9,
        12px 12px 0 #0ea5e9,
        14px 14px 0 #0ea5e9,
        16px 16px 0 #0ea5e9,
        18px 18px 0 #0ea5e9,
        20px 20px 0 #0ea5e9,
        22px 22px 0 #0ea5e9,
        24px 24px 0 #0ea5e9,
        26px 26px 0 #0ea5e9,
        28px 28px 0 #0ea5e9,
        30px 16px 26px rgba(0, 0, 0, 0.45);
}

/* Transparent streaming buttons with animated gradient border */
.gradient-border-btn {
    position: relative;
    background: transparent;
    border: 2px solid transparent;
    border-radius: 9999px;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)),
        linear-gradient(90deg, #1DB954, #0ea5e9, #f97316, #FA243C, #0ea5e9, #1DB954);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    background-size: 100% 100%, 200% 100%;
    background-position: 0% 50%, 0% 50%;
    animation: gradient-flow 4s linear infinite;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gradient-border-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(14, 165, 233, 0.4);
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%, 0% 50%;
    }
    100% {
        background-position: 0% 50%, 100% 50%;
    }
}

/* ---- Background / texture system ---- */

/* Fine grain you can drop onto any positioned block */
.grain-layer {
    background-image: var(--noise-url);
    background-size: 220px 220px;
    opacity: 0.09;
    mix-blend-mode: overlay;
}

/* Halftone dot fields — dark-on-light and light-on-dark */
.halftone-dots {
    background-image: radial-gradient(rgba(15, 23, 42, 0.10) 1px, transparent 1.6px);
    background-size: 18px 18px;
}
.halftone-dots-light {
    background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1.6px);
    background-size: 18px 18px;
}

/* Crumpled dark paper — matches the show poster */
.crumpled-dark {
    background-color: var(--ink-color);
    background-image:
        radial-gradient(120% 75% at 50% -10%, rgba(255, 255, 255, 0.07), transparent 60%),
        radial-gradient(90% 60% at 50% 120%, rgba(0, 0, 0, 0.55), transparent 65%),
        var(--noise-url);
    background-size: auto, auto, 200px 200px;
    background-blend-mode: normal, normal, overlay;
}

/* Torn-paper tape strip, from the poster title banner */
.paper-tape {
    display: inline-block;
    padding: 0.35rem 1.6rem;
    color: #1b1b1b;
    background: linear-gradient(180deg, var(--paper-color), var(--paper-shade));
    box-shadow: 0 8px 22px -8px rgba(0, 0, 0, 0.35);
    clip-path: polygon(1.5% 10%, 97% 0%, 100% 86%, 4% 100%, 0% 52%);
    transform: rotate(-1.2deg);
}

/* Framed show poster */
.poster-frame {
    box-shadow: 0 40px 70px -28px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.10) inset;
}

/* Very large watermark word */
.watermark {
    font-family: var(--font-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--primary-color);
    opacity: 0.05;
    user-select: none;
}

/* ---- Smooth cross-section fades ----
   Overlay strips blended at section boundaries so dark/light blocks
   dissolve into each other instead of ending on a hard cut. */
.fade-from-ink {
    background: linear-gradient(to bottom, var(--ink-color) 0%, color-mix(in srgb, var(--ink-color) 45%, transparent) 45%, transparent 100%);
}

.fade-from-bg {
    background: linear-gradient(to bottom, var(--background-color) 0%, color-mix(in srgb, var(--background-color) 45%, transparent) 45%, transparent 100%);
}

/* ---- Floating color-theme picker ---- */
.palette-swatch {
    position: relative;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 9999px;
    border: 2px solid rgba(255, 255, 255, 0.55);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.palette-swatch:hover {
    transform: scale(1.1);
}

.palette-swatch.is-active {
    box-shadow: 0 0 0 2px var(--ink-color), 0 0 0 4px var(--accent-color);
}

.palette-swatch:focus-visible {
    outline: 2px solid var(--accent-color);
    outline-offset: 3px;
}