* {
    margin: 0;
    box-sizing: border-box;
}

:root {
    --color-primary: #FF500A; 

    --color-primary2: #714796; 

    /* --color-primary-hover: rgb(214, 133, 255); */
    --color-secondary: #DEDAB5;
    --color-secondary2: rgba(222, 218, 181, 0.94);
    --color-tertiary: #EDA719;

    /* --color-tertiary: #00FB3F; */
    --color-tertiary-hover: hsl(155, 100%, 49%);
}
.bitcount {
    font-family: "Bitcount", system-ui;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
      "slnt" 0,
      "CRSV" 0.5,
      "ELSH" 0,
      "ELXP" 0;
  }
.blaka-regular {
    font-family: "Blaka", system-ui;
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "Strawberryfont";
    src: url("../fonts/black-tulip-itc-std.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-variation-settings:
      "slnt" 0,
      "CRSV" 0.5,
      "ELSH" 0,
      "ELXP" 0;
}

body {
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    min-height: 500px;
    font-size: 16px;
    font-family: "Bitcount", sans-serif;
    color: var(--color-primary);
    /* background-color: black; */
    background-color: var(--color-secondary);
    transition: 0.3s ease;
    /* letter-spacing: 0.05em; */
    letter-spacing: 0.2em;
    -webkit-tap-highlight-color: transparent;
}
h1 {
    font-size: 4rem;
    color: var(--color-secondary);
    text-shadow: 0 0 10px black;
    font-weight: 400;
}
a {
    color: var(--color-tertiary);
    text-decoration: none;
    transition: color 0.3s ease, text-decoration 0.3s ease;
    font-size: 2rem;
    touch-action: manipulation;
    &:hover,
    &:active {
        mix-blend-mode: difference;
        text-decoration: underline;
    }
}
.noise-overlay {
    z-index: 0;
    opacity: 0.08;
    background-image: url(/img/noise.gif);
    background-position: 0 0;
    background-size: 480px;
    background-attachment: fixed;
    position: fixed;
    inset: 0%;
    pointer-events: none;
  }
/* Icon links: real fill color (currentColor) — difference would scramble the palette */
.btn:hover,
.close-btn:hover {
    mix-blend-mode: normal;
    color: var(--color-secondary);
    text-decoration: none;
}
.btn:hover svg,
.close-btn:hover svg,
.btn:hover svg path,
.close-btn:hover svg path {
    color: var(--color-secondary);
    fill: var(--color-secondary);
}
.bg-hue {
    position: fixed;
    inset: 0;
    z-index: -100;
    overflow: hidden;
    pointer-events: none;
    contain: strict;
}

.background-rotator {
    position: absolute;
    /* Square large enough to cover the viewport diagonal while rotating */
    width: 150vmax;
    height: 150vmax;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center center;
    will-change: transform;
    animation: rotateBg 120s linear infinite;
}

.background-image {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    pointer-events: none;
    transition: opacity 2.02s ease;
}
.background-image-awake {
    opacity: 0;
}
html.bg-awake .background-image:not(.background-image-awake) {
    opacity: 0;
}
html.bg-awake .background-image-awake {
    opacity: 1;
}
/* Mobile: short crossfade — long dual-layer fade was too heavy */
.is-touch .background-image,
.reduce-effects .background-image {
    transition: opacity 0.45s ease;
}
@media (prefers-reduced-motion: reduce) {
    .background-image {
        transition: none;
    }
}

/* Desktop Chrome/Firefox: light static psychedelic (no animated noise) */
html:not(.reduce-effects) .background-image {
    filter: url(#psychedelic);
}

/* Desktop only: subtle hue shift */
@media (hover: hover) and (pointer: fine) {
    html:not(.reduce-effects) .bg-hue {
        animation: hueShift 40s linear infinite;
    }
}

@keyframes rotateBg {
    from {
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
    }
    to {
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
    }
}

@keyframes hueShift {
    from {
        filter: hue-rotate(0deg);
    }
    to {
        filter: hue-rotate(360deg);
    }
}

/* Touch / Safari: keep rotation, skip animated hue/filters */
.reduce-effects .bg-hue {
    animation: none;
    filter: none;
}

.reduce-effects .background-rotator {
    animation: rotateBg 180s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
    .bg-hue,
    .background-rotator {
        animation: none !important;
    }
}

.reduce-effects #eye-outside {
    filter: none;
}
.reduce-effects #eye-outside-path,
.reduce-effects #bubble-core {
    filter: none !important;
}
.reduce-effects #bubbles {
    display: none;
}
.eye-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transform: scale(0);
    transform-origin: center center;
    /* Default = hide (slower). .is-visible overrides for the pop-in. */
    transition:
        transform 1.05s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.85s ease,
        visibility 1.05s;
}
.eye-animation.is-visible {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition:
        transform 0.55s cubic-bezier(0.34, 1.45, 0.64, 1),
        opacity 0.35s ease,
        visibility 0.55s;
}
/* Mobile: opacity only — scaling huge SVGs is expensive */
.is-touch .eye-animation,
.reduce-effects .eye-animation {
    transform: none;
    transition: opacity 0.4s ease, visibility 0.4s;
}
.is-touch .eye-animation.is-visible,
.reduce-effects .eye-animation.is-visible {
    transform: none;
    transition: opacity 0.4s ease, visibility 0.4s;
}
@media (prefers-reduced-motion: reduce) {
    .eye-animation,
    .eye-animation.is-visible {
        transition: none;
    }
}
.handslayor {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(520px, 95vw);
    height: auto;
    z-index: 0;
    transform: translate3d(-50%, -50%, 0);
    transform-origin: center center;
    pointer-events: none;
    /* Both on one line — a second `animation` property would override the first */
    animation:
        rotateBg 120s linear infinite,
        hueShift 40s linear infinite;
}
.eye-box {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    width: 335px;
    height: 336px;
}
.eye-comp {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    height: auto;
    transform: translate(-50%, -50%);
    transform-origin: center;
    will-change: transform;
    pointer-events: none;
}
#eye-outside {
    width: 100%;
    z-index: 1;
    overflow: visible;
    filter: drop-shadow(0 0 20px black)
}
#eye-outside-inner {
    width: 71%;
    z-index: 2;
    overflow: visible;
}
#eye {
    width: 52%;
    z-index: 3;
}
#iris {
    width: 27%;
    z-index: 4;
}
#shine {
    width: 11%;
    z-index: 5;
}
/* .eye-animation img {
    width: 30%;
    height: auto;
    object-fit: cover;
} */
.typolayer {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100vw;
    height: 100vh;
    padding: 30px;
}
.navbox {
    position: relative;
    width: 100%;
    height: 100%;
}
.navlink {
    text-shadow: 0 0 10px black;
}
#audio {
    position: absolute;
    top: 0;
    left: 0;
}
#video {
    position: absolute;
    top: 0;
    right: 0;
}
#live {
    position: absolute;
    bottom: 0;
    left: 0;
}
#contact {
    position: absolute;
    bottom: 0;
    right: 0;
}
.eyeswitch {
    position: absolute;
    top: 13px;
    left: 50%;
    transform: translateX(-50%);
    width: 17px;
    height: 17px;
    display: flex;
    color: var(--color-tertiary);
    z-index: 5;
    touch-action: manipulation;
}
.eyeswitch svg {
    display: block;
    opacity: 1;
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px black);
}
/* Flying clone is a separate node — must repeat styles you want during the transition */
.eyeswitch-fly svg {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0.85;
    overflow: visible;
    shape-rendering: geometricPrecision;
    filter: drop-shadow(0 0 10px black);
}
.eyeswitch:hover,
.eyeswitch:active {
    mix-blend-mode: difference;
    text-decoration: none;
}
.eyeswitch:hover svg,
.eyeswitch:hover svg path {
    color: inherit;
    fill: currentColor;
}

/* Primary color swap when eye is awake */
html.eye-awake {
    --color-primary: var(--color-primary2);
}
html.eye-awake,
html.eye-awake body {
    transition: color 0.45s ease, background-color 0.45s ease;
}

/* Flying flip clone during awaken transition */
.eyeswitch-fly {
    position: fixed;
    z-index: 10000;
    margin: 0;
    pointer-events: none;
    color: var(--color-tertiary);
    will-change: transform;
    /* Keep both faces visible during the flip (hidden backface made it vanish) */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
}
html.eye-awakening {
    cursor: wait;
}
html.eye-awakening .eyeswitch {
    visibility: hidden;
}
/* Pause rotator during transition — avoids animating two full-bleed layers at once */
.is-touch.eye-awakening .background-rotator,
.reduce-effects.eye-awakening .background-rotator {
    animation-play-state: paused;
}
/* Lightweight mobile flash instead of giant 3D SVG fly */
.eyeswitch-flash {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    background: var(--color-primary);
    opacity: 0;
    transition: opacity 0.22s ease;
}
.eyeswitch-flash.is-on {
    opacity: 0.55;
}
.eyeswitch-flash.is-out {
    opacity: 0;
    transition: opacity 0.28s ease;
}
.bernies {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    bottom: -15px;
    left: 0;
    right: 0;
    margin-inline: auto;
}
.bernies a{
    font-size: 0.45rem;
}
.quicklinks {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    gap: 10px;
    bottom: 5px;
    left: 0;
    right: 0;
    width: fit-content;
    margin-inline: auto;
    /* no transform here — it would create a stacking context and kill mix-blend-mode */
}
.quicklinks svg {
    filter: drop-shadow(0 0 10px black);
}
.quicklinks a {
    display: flex;
    line-height: 0;
}
.quicklinks a:hover,
.quicklinks a:active {
    mix-blend-mode: difference;
    text-decoration: none;
}
.quicklinks a:hover svg,
.quicklinks a:hover svg path {
    /* inherit link color; blend handles the invert like .navlink text */
    color: inherit;
    fill: currentColor;
}

.headerlogo {
    width: 100%;
    height: auto;
    color: var(--color-primary);
    /* &:hover {
        mix-blend-mode: difference;
    } */
}
.headerlogo svg {
    fill: var(--color-primary);
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 0 5px var(--color-secondary));
}

.subline {
    width: 100%;
    height: auto;
    color: var(--color-secondary);
    /* color: white; */
    /* mix-blend-mode: difference; */
}
.subline-desktop {
    display: block;
    width: 100%;
    height: auto;
    fill: var(--color-secondary);
    filter: drop-shadow(0 0 5px black);
}
.subline-mobile {
    display: none;
    width: 100%;
    height: auto;
    fill: var(--color-secondary);
    filter: drop-shadow(0 0 5px black);
}


.modal {
    /* Follows --color-primary so eye-awake swaps orange → purple */
    background-color: color-mix(in srgb, var(--color-primary) 85%, transparent);
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 30px;
    padding: max(16px, env(safe-area-inset-top, 0px))
        max(16px, env(safe-area-inset-right, 0px))
        max(16px, env(safe-area-inset-bottom, 0px))
        max(16px, env(safe-area-inset-left, 0px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    -webkit-overflow-scrolling: touch;
    transition: opacity 0.35s ease, visibility 0.35s ease, background-color 0.45s ease;
}
.modal.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
}
.modal-inner {


    /*
    --modal-grain-gradient: linear-gradient(
        /* 135deg,
        /* #9b6bc4 0%,
        #714796 55%,
        #3d2458 100% *//*
        #3d2458 0%,
        #000000 100%

    );
    background: var(--modal-grain-gradient); */
    /* background-color: var(--color-secondary2); */
    /* color: black; */
    /* background-color: rgba(0, 0, 0, 0.502); */
    color: var(--color-secondary);
    position: relative;
    overflow: visible;
    /* overflow: hidden;
    overflow-y: auto; */
    -webkit-overflow-scrolling: touch;
    isolation: isolate;
    width: 68%;
    max-width: 600px;
    height: auto;
    border-radius: 3px;
    font-size: 1.5rem;
    text-align: center;
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform: translate3d(0, 100%, 0);
    /* border: solid 2px var(--color-secondary2); */
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.modal.is-open .modal-inner {
    transform: translate3d(0, 0, 0);
}
.reduce-effects .modal,
.reduce-effects .modal-inner {
    transition-duration: 0.25s;
}
.modal-inner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* background: var(--modal-grain-gradient);
    filter: url(#svg-grain); */
    pointer-events: none;
    z-index: 0;
}
.modal-inner > * {
    position: relative;
    z-index: 1;
}
.modal-audio {
    /* background-image: url("../img/shahblah-left.jpg"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.modal-contact {
    /* background-image: url("../img/shahblah-right.jpg"); */
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.modal-video {
    max-width: 820px;
}



.close-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 5px;
    /* padding: 5px 6px 5px 8px; */
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    z-index: 120;
    top: 20px;
    right: 20px;
    font-size: 1rem;

    /* background-color: var(--color-tertiary);
    color: var(--color-primary); */
    border-radius: 50px;

    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
}
.close-btn svg {
    width: 16px;
    height: 16px;
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: rgba(0, 0, 0, 0.5);
    /* background-color: var(--color-tertiary); */
    /* color: var(--color-primary); */
    padding: 10px 16px 10px 16px;
    border-radius: 32px;
    margin: 0 auto;
    /* max-width: 300px; */
    text-decoration: none;
    font-size: 2rem;
    font-weight: 300;
    text-align: center;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn p {
    margin-bottom: -4px;
}
.btn-streaming {
    font-size: 1.5rem;
}
.bandsintown {
    font-family: "Bitcount";
    width: 100%;
    max-height: min(55vh, 420px);
    overflow-y: auto;
    text-align: left;
    font-size: 1rem;
    background-color: rgb(0, 0, 0, 0.4);
    /* background-color: var(--color-secondary2); */
    border-radius: 18px;
    padding: 10px;
}
.bandsintown .bit-widget-initializer {
    display: block;
    width: 100%;
}
.bit-widget .bit-date, .bit-widget .bit-mobile-date, .bit-widget .bit-vertical-date {
    font-size: 1rem;
}
.bit-widget .bit-event {
    line-height: 1 !important;
}
/* NAVI UPCOMING / PAST */
.bit-widget .bit-nav-bar-container .bit-nav-bar {
    font-family: "Bitcount";
    color: var(--color-tertiary);
}
/* ORT */
.bit-widget.bit-layout-ipad .bit-event {
    font-family: "Bitcount";
    color: var(--color-secondary);
}
/* DATE */
.bit-widget .bit-event .bit-details a, .bit-widget .bit-event .bit-offers-menu a{
    color: var(--color-primary);
}
/* NAME */
.bit-widget .bit-titleWrapper .bit-venue {
    color: var(--color-secondary) !important;
}
/* TEXT IN BUTTON */
.bit-widget .bit-event .bit-offers-text {
    color: var(--color-secondary);
}
/* BUTTONS PAST SHOWS */
.bit-widget.bit-layout-ipad .bit-event .bit-button {
    background-color: var(--color-primary);
    color: var(--color-secondary);
}



.videosection {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.videocarousel {
    position: relative;
    width: 100%;
    height: min(52dvh, 380px);
    perspective: 520px;
    perspective-origin: 50% 45%;
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
.videocarousel.is-dragging {
    cursor: grabbing;
}
.videocarousel-scene {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
}
.videocarousel-cube {
    position: relative;
    width: min(92%, 440px);
    aspect-ratio: 4 / 3;
    transform-style: preserve-3d;
    will-change: transform;
    -webkit-transform-style: preserve-3d;
}
.videobox {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 10px solid var(--color-primary);
    border-radius: 18px;
    background: #1a1024;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
}
.videobox-thumb,
.videobox-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: cover;
    pointer-events: none;
}
.videobox.is-front .videobox-frame {
    pointer-events: auto;
}
.videobox:not(.is-front) {
    opacity: 0.85;
    filter: brightness(0.85);
}
.videocarousel.is-dragging .videobox-frame,
.videocarousel.is-dragging .videocarousel-live .videobox-frame {
    pointer-events: none !important;
}
.videocarousel-live {
    display: none;
    position: absolute;
    z-index: 2;
    overflow: hidden;
    border: 10px solid var(--color-primary);
    border-radius: 18px;
    background: #1a1024;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.45);
    box-sizing: border-box;
}
/* Mobile: flat 2D slider with left/right peeks + playable center iframe */
.videocarousel.is-flat-player {
    perspective: none;
    touch-action: pan-y;
    overflow: hidden;
}
.videocarousel.is-flat-player .videocarousel-scene {
    transform-style: flat;
    overflow: visible;
}
.videocarousel.is-flat-player .videocarousel-cube {
    transform: none !important;
    transform-style: flat;
    will-change: auto;
    position: relative;
    width: 72%;
    max-width: 340px;
    margin: 0 auto;
    overflow: visible;
}
.videocarousel.is-flat-player .videobox {
    position: absolute;
    inset: 0;
    transform-style: flat;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    filter: none;
    opacity: 0;
    pointer-events: none;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
    transition: none;
}
.videocarousel.is-flat-player .videobox.is-visible {
    opacity: 1;
}
.videocarousel.is-flat-player .videobox.is-side {
    opacity: 0.72;
}
.videocarousel.is-flat-player .videobox.is-front {
    opacity: 1;
    pointer-events: auto;
    box-shadow: none;
}
.videocarousel.is-flat-player .videobox-thumb {
    z-index: 1;
}
/* Preloaded iframes sit under thumbs while sliding; front iframe is playable when idle */
.videocarousel.is-flat-player .videobox-frame {
    z-index: 2;
    opacity: 0;
    pointer-events: none !important;
}
.videocarousel.is-flat-player:not(.is-dragging):not(.is-sliding) .videobox.is-front .videobox-frame {
    opacity: 1;
    pointer-events: auto !important;
}
.videocarousel.is-flat-player .videocarousel-live {
    display: none !important;
}
.videonav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.videonav a {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    touch-action: manipulation;
}
.videonav a:hover {
    mix-blend-mode: normal;
    color: var(--color-secondary);
    text-decoration: none;
}
.videonav a:hover svg,
.videonav a:hover svg path {
    color: var(--color-secondary);
    fill: var(--color-secondary);
}




/* media queries */
@media (max-width: 768px) {
    .subline-mobile {
        display: block;
    }
    .subline-desktop {
        display: none;
    }

    .quicklinks svg {
        width: 16px;
        height: 16px;
    }
    .eyeswitch {
        top: 0;
    }
    .btn {
        font-size: 1.5rem;
    }
    .btn svg {
        width: 22px;
        height: 22px;
    }
    .modal {
        padding: 0px;
    }
    .modal-inner {
        width: 100%;
        gap: 12px;
    }
    .modal-video {
        padding: 20px 0px !important;
    }
    .navlink {
        font-size: 1.2rem;
    }

}




@media (max-width: 500px) {
.quicklinks {
    justify-content: end;
    width: auto;
}
.bernies {
    justify-content: flex-start;
    bottom: 4px;
}
#live {
bottom: 30px;
}
#contact {
bottom: 30px;
}
}


@media (max-width: 400px) {
    .btn {
        font-size: 1rem;
    }
    .bit-event {
        font-size: 0.8rem;
    }
    .bit-widget .bit-date, .bit-widget .bit-mobile-date, .bit-widget .bit-vertical-date {
        font-size: 0.8rem;
    }
    .bit-widget a {
        font-size: 1.4rem;
    }
    .modal-contact .close-btn {
        top: 0px;
    }
}