html, body {
    font-family: 'Poppins', sans-serif;
}

a, .btn-link {
    color: inherit;
}

/* Wraps between words first and only breaks inside a word when it doesn't fit on a line on its own,
   so long words (emails, URLs, names) never push the page wider than the screen.
   Set on <body>; overflow-wrap is inherited, so it applies everywhere. "anywhere" (unlike "break-word")
   also lets flex and grid items shrink below their longest word. */
.lag-text-wrap {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Like lagooon.ch: main headings in the turquoise accent. */
.mud-typography-h1 {
    color: var(--mud-palette-primary);
}

/* Small turquoise label above a section headline ("Next Event", "Latest Gallery", "Library", ...). */
.lagooon-label {
    color: var(--mud-palette-primary);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    line-height: 2;
}

@media (min-width: 600px) {
    .lagooon-label {
        font-size: 1.25rem;
    }
}

/* Main bar like lagooon.ch: fixed at the top, logo cell with a line on its right, menu toggle on the right. */
:root {
    --lagooon-color-line-height: 0.375rem;
    /* Header and footer waves are the same size. */
    --lagooon-header-wave-height: 3rem;
    --lagooon-footer-wave-height: 3rem;
    /* Header height: logo + LagSpacing.Normal padding (0.5rem mobile, 1rem from sm) + wave. */
    --lagooon-logo-height: 2rem;
    --lagooon-header-height: calc(var(--lagooon-logo-height) + 2 * 0.5rem + var(--lagooon-header-wave-height));
    --lagooon-shadow-color: rgba(28, 69, 96, 0.22);
    /* Corner rounding: outlined cards, and the smaller boxes and photos inside them. */
    --lagooon-radius: 1rem;
    --lagooon-radius-small: 0.5rem;
    /* Light shadow under the home page cards, tinted Deep Pool rather than grey. */
    --lagooon-card-shadow: 0 4px 16px -4px rgba(31, 69, 98, 0.18);
}

/* Home page cards lift slightly off the page. */
.lagooon-home :is(.lagooon-cover, .lagooon-events, .lagooon-artist-card, .lagooon-socials,
                  .lagooon-gallery-teaser, .lagooon-library, .lagooon-teaser) {
    box-shadow: var(--lagooon-card-shadow);
}

/* Rounded outlined cards. Clipped, so photos, players and dark strips that reach the edge follow
   the corners (the contact card isn't: it has nothing at its edge, and popovers may reach past it). */
.lagooon-cover,
.lagooon-events,
.lagooon-event-card,
.lagooon-artist-card,
.lagooon-socials,
.lagooon-gallery-teaser,
.lagooon-library,
.lagooon-library-player,
.lagooon-team-card,
.lagooon-team-vision,
.lagooon-teaser,
.lagooon-contact-card {
    border-radius: var(--lagooon-radius);
    background-color: var(--lagooon-card-background);
}

.lagooon-cover,
.lagooon-events,
.lagooon-event-card,
.lagooon-artist-card,
.lagooon-socials,
.lagooon-gallery-teaser,
.lagooon-library,
.lagooon-library-player,
.lagooon-team-card,
.lagooon-teaser {
    overflow: hidden;
}

/* Soft, blurred circles of the palette colours drifting slowly left and right behind the whole page.
   Fixed to the viewport and behind everything; the cards and strips cover them, the page around them shows them. */
.lagooon-orbs {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.lagooon-orb {
    position: absolute;
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0.5;
    filter: blur(4rem);
    animation: lagooon-orb-drift ease-in-out infinite alternate;
}

/* Each circle has its own colour, size, place, distance and pace, so they never move in step. */
.lagooon-orb:nth-child(1) {
    top: 8%;
    left: -6%;
    width: 22rem;
    background-color: var(--lagooon-orb-1);
    --lagooon-orb-distance: 35vw;
    animation-duration: 26s;
}

.lagooon-orb:nth-child(2) {
    top: 38%;
    right: -8%;
    width: 18rem;
    background-color: var(--lagooon-orb-2);
    --lagooon-orb-distance: -40vw;
    animation-duration: 32s;
}

.lagooon-orb:nth-child(3) {
    top: 62%;
    left: 10%;
    width: 16rem;
    background-color: var(--lagooon-orb-3);
    --lagooon-orb-distance: 30vw;
    animation-duration: 22s;
    animation-delay: -8s;
}

.lagooon-orb:nth-child(4) {
    top: 20%;
    left: 45%;
    width: 14rem;
    background-color: var(--lagooon-orb-4);
    --lagooon-orb-distance: -25vw;
    animation-duration: 28s;
    animation-delay: -12s;
}

.lagooon-orb:nth-child(5) {
    bottom: -6%;
    right: 15%;
    width: 20rem;
    background-color: var(--lagooon-orb-5);
    --lagooon-orb-distance: -30vw;
    animation-duration: 36s;
    animation-delay: -5s;
}

/* LagBubbles: a canvas over the whole screen, behind the page content like the background circles
   (later in the page, so painted over them); never in the way of clicks. */
.lagooon-bubbles {
    position: fixed;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

@keyframes lagooon-orb-drift {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(var(--lagooon-orb-distance));
    }
}

@media (prefers-reduced-motion: reduce) {
    .lagooon-orb {
        animation: none;
    }
}

.lagooon-events-date,
.lagooon-gallery-photo,
.lagooon-artist-row-photo,
.lagooon-artist-page-photo {
    border-radius: var(--lagooon-radius-small);
    overflow: hidden;
}

@media (min-width: 600px) {
    :root {
        --lagooon-logo-height: 2.75rem;
        --lagooon-header-wave-height: 4rem;
        --lagooon-footer-wave-height: 4rem;
        --lagooon-header-height: calc(var(--lagooon-logo-height) + 2 * 1rem + var(--lagooon-header-wave-height));
    }
}

/* Dark header, footer and artist card strips (Deep Pool with blush text, or the night sky with moonlight in dark mode),
   so the light drifting colours stand out.
   MudBlazor's palette variables are overridden inside them, so every rule and Mud component
   using those variables (lines, round arrows, hover fills, links, icon buttons) follows along. */
.lagooon-header,
.lagooon-footer,
.lagooon-artist-info {
    --mud-palette-background: var(--lagooon-strip-background);
    --mud-palette-surface: var(--lagooon-strip-background);
    --mud-palette-text-primary: var(--lagooon-strip-text);
    --mud-palette-text-secondary: color-mix(in srgb, var(--lagooon-strip-text) 70%, transparent);
    --mud-palette-action-default: var(--lagooon-strip-text);
    --mud-palette-action-default-hover: color-mix(in srgb, var(--lagooon-strip-text) 12%, transparent);
    --mud-palette-divider: color-mix(in srgb, var(--lagooon-strip-text) 30%, transparent);
}

.lagooon-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--mud-zindex-appbar);
    color: var(--mud-palette-text-primary);
    /* Behind the bar and the wave together: at some screen scales (e.g. iPad Pro 13") their heights round to
       fractions of a pixel, and a hairline seam between them would otherwise show the page through. Only the
       bar's height, so the menu below still reveals itself when it opens. */
    background: linear-gradient(var(--mud-palette-background), var(--mud-palette-background))
        top / 100% var(--lagooon-header-height) no-repeat;
    box-shadow: 0 12px 32px -8px var(--lagooon-shadow-color);
}

/* Fixed height, so the bar always matches --lagooon-header-height and never covers the page. */
.lagooon-navbar {
    height: calc(var(--lagooon-header-height) - var(--lagooon-header-wave-height));
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-inline: 1rem;
    background-color: var(--mud-palette-background);
}

/* Light palette colours drifting slowly from right to left (logo, LagColorLine, footer wordmark).
   The gradient is two element-widths wide, so moving it by 200% is exactly one seamless loop. */
.lagooon-color-drift {
    background-image: var(--lagooon-light-gradient);
    background-size: 200% 100%;
    background-repeat: repeat-x;
    animation: lagooon-color-drift 20s linear infinite;
}

@keyframes lagooon-color-drift {
    from {
        background-position: 0% 0;
    }

    to {
        background-position: 200% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lagooon-color-drift {
        animation: none;
    }
}

/* LagColorLine: a thick line of drifting colours (between photo and text on the artist cards). */
.lagooon-color-line {
    height: var(--lagooon-color-line-height);
}

.lagooon-logo {
}

.lagooon-logo-mark {
    height: var(--lagooon-logo-height);
    aspect-ratio: 447.41 / 73.25;
    -webkit-mask: var(--lagooon-logo-url) center / contain no-repeat;
    mask: var(--lagooon-logo-url) center / contain no-repeat;
}

/* The splash on every click (MainLayout.razor.js): rings rippling out from where it landed, and small hearts.
   Fixed at the press position, centred on it, over everything in the header; never in the way of clicks. */
.lagooon-splash-ring,
.lagooon-splash-drop {
    position: fixed;
    z-index: 1;
    border-radius: 50%;
    pointer-events: none;
    translate: -50% -50%;
}

.lagooon-splash-ring {
    width: 12rem;
    height: 12rem;
    border: 2px solid currentColor;
    box-shadow: 0 0 12px currentColor, inset 0 0 12px currentColor;
}

/* A heart, cut out of the coloured box by a mask, so the background colour fills it. */
.lagooon-splash-drop {
    width: 0.75rem;
    height: 0.6875rem;
    border-radius: 0;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 10.3 20C4.2 14.5 0 10.7 0 6.1 0 2.7 2.7 0 6.1 0 8 0 9.9.9 12 3.3 14.1.9 16 0 17.9 0 21.3 0 24 2.7 24 6.1c0 4.6-4.2 8.4-10.3 13.9z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 22'%3E%3Cpath d='M12 21.6 10.3 20C4.2 14.5 0 10.7 0 6.1 0 2.7 2.7 0 6.1 0 8 0 9.9.9 12 3.3 14.1.9 16 0 17.9 0 21.3 0 24 2.7 24 6.1c0 4.6-4.2 8.4-10.3 13.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Light/dark switch and menu toggle, side by side on the right of the bar. */
.lagooon-navbar-actions {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    margin-inline-end: 1rem;
}

/* The large icon button is taller than the mobile bar; less padding keeps the icon size but fits it in. */
@media (max-width: 599.98px) {
    .lagooon-navbar-actions {
        gap: 0;
        margin-inline-end: 0.5rem;
    }

    .lagooon-menu-toggle.mud-icon-button {
        padding: 0.25rem;
    }
}

/* Full-screen menu opened by the toggle. */
.lagooon-menu {
    display: none;
    height: calc(100vh - var(--lagooon-header-height));
    overflow-y: auto;
    padding-block: 4rem;
    background-color: var(--mud-palette-background);
    text-transform: uppercase;
}

/* Link row with the round arrow on the right, which fills on hover (LagRedirectButton). */
.lagooon-redirect-button {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--mud-palette-divider);
    text-decoration: none;
}

.lagooon-redirect-button-label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.lagooon-redirect-button .lagooon-circle-arrow {
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.lagooon-redirect-button:hover .lagooon-circle-arrow {
    background-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    transform: translateX(0.25rem);
}

/* LagButton: outlined in the text colour, fills on hover with the arrow nudging right. */
.lagooon-button.mud-button-outlined {
    border-color: var(--mud-palette-text-primary);
    padding-inline: 1.5rem;
    letter-spacing: 0.1em;
    transition: background-color 0.2s, color 0.2s;
}

.lagooon-button.mud-button-outlined:hover:not(.mud-disabled) {
    background-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
}

.lagooon-button .mud-button-icon-end {
    transition: transform 0.2s;
}

.lagooon-button:hover:not(.mud-disabled) .mud-button-icon-end {
    transform: translateX(0.25rem);
}

/* Large redirect buttons in the full-screen menu. */
.lagooon-menu-item {
    padding: 1.5rem 2rem 2.25rem;
    font-family: 'Atelier', sans-serif;
    font-size: 1.875rem;
    text-decoration: none;
}

.lagooon-menu-item:first-child {
    border-top: 1px solid var(--mud-palette-divider);
}

@media (min-width: 1024px) {
    .lagooon-menu-item {
        padding-inline: 9rem;
    }
}

.lagooon-circle-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--mud-palette-text-primary);
    border-radius: 50%;
}

.lagooon-main {
    padding-top: var(--lagooon-header-height) !important;
}

.lagooon-content {
    margin-inline: auto;
}
.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}
/* Footer: thin lines like the main bar, three cells side by side on wide screens. */
.lagooon-footer {
    position: relative;
    isolation: isolate;
    margin-top: 6rem;
    box-shadow: 0 -12px 32px -8px var(--lagooon-shadow-color);
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-background);
}

/* LagCoral: the reef along the bottom of its box, behind the content (its box is its own stacking context). */
/* Down to the bottom edge, darkened as deep down. */
.lagooon-coral {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: -1;
    width: 100%;
    height: 15rem;
    opacity: 0.6;
    filter: brightness(0.65);
    pointer-events: none;
}

/* Deep water at the bottom of the footer: a short fade to dark. After the reef (and still behind the content),
   so it shades the coral's foot. */
.lagooon-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    height: 6rem;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.3) 0,
        transparent 100%);
    pointer-events: none;
}

/* Coral and seaweed sway gently from their foot, each at its own moment (animation-delay set per piece). */
.lagooon-coral-sway {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: lagooon-coral-sway 6s ease-in-out infinite alternate;
}

@keyframes lagooon-coral-sway {
    from {
        transform: rotate(-3deg);
    }

    to {
        transform: rotate(3deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lagooon-coral-sway {
        animation: none;
    }
}

@media (max-width: 599.98px) {
    .lagooon-coral {
        height: 10rem;
    }
}

.lagooon-footer-cell {
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.lagooon-footer-item {
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

@media (min-width: 960px) {
    .lagooon-footer-item + .lagooon-footer-item {
        border-inline-start: 1px solid var(--mud-palette-text-primary);
    }
}

.lagooon-footer-heading {
    margin-bottom: 0.75rem;
    color: var(--mud-palette-primary);
    font-weight: 500;
    letter-spacing: 0.2em;
}

.lagooon-footer-org {
    font-weight: 500;
}

.lagooon-footer-link {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    text-decoration: none;
    line-height: 1.5;
}

.lagooon-footer-link .mud-icon-root {
    margin-top: 0.15rem;
}

.lagooon-footer-link:hover span {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* The wordmark's letters ride slow waves up and down, each a little after the one before (delays in Footer.razor).
   Moved with top, not transform: the drifting colours are clipped to the text, and a transformed letter would
   drop out of that clip. */
.lagooon-footer-letter {
    position: relative;
    animation: lagooon-letter-wave 3s ease-in-out infinite;
}

@keyframes lagooon-letter-wave {
    0%,
    100% {
        top: -0.04em;
    }

    50% {
        top: 0.04em;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lagooon-footer-letter {
        animation: none;
    }
}

/* The wordmark is a "back to top" button: no button look, just the word. Clipped, so the jiggle (which
   stretches and tilts the word past the screen's edges for a moment) never makes the page scroll sideways. */
.lagooon-footer-top {
    display: block;
    width: 100%;
    padding: 0;
    overflow: clip;
    color: inherit;
    font: inherit;
}

.lagooon-footer-top:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -2px;
}

.lagooon-footer-wordmark {
    padding: 2rem;
    overflow: hidden;
    font-family: 'Atelier', sans-serif;
    /* One unbreakable word, sized to the screen width (lag-text-wrap would otherwise split it on mobile). */
    font-size: clamp(2rem, 16vw, 16rem);
    white-space: nowrap;
    overflow-wrap: normal;
    font-weight: 400;
    line-height: 0.85;
    letter-spacing: -0.02em;
    text-align: center;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
}

.lagooon-footer-bottom {
    border-top: 1px solid var(--mud-palette-text-primary);
}

.lagooon-footer-bottom .mud-typography {
    font-family: 'Share Tech Mono', monospace;
}

/* LagSocials: photo on the left third, text from the top on the right two thirds, in a thin outlined box.
   Below MudGrid's md breakpoint both take the full width, the photo on top. */
.lagooon-socials {
    border: 1px solid var(--mud-palette-text-primary);
}

.lagooon-socials-image {
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.lagooon-socials-image .mud-image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 3 / 2;
}

@media (min-width: 960px) {
    .lagooon-socials-image {
        border-bottom: none;
        border-inline-end: 1px solid var(--mud-palette-text-primary);
    }

    .lagooon-socials-image .mud-image {
        aspect-ratio: auto;
        min-height: 18rem;
    }
}

.lagooon-socials-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 2rem;
}

@media (max-width: 599.98px) {
    .lagooon-socials-buttons .lagooon-button {
        width: 100%;
    }
}

/* LagCover: welcome text on the left half, party photo on the right half, in a thin outlined box.
   Below MudGrid's md breakpoint the photo is hidden and the text takes the full width. */
.lagooon-cover {
    border: 1px solid var(--mud-palette-text-primary);
}

.lagooon-cover-content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.lagooon-cover-lead {
    font-weight: 500;
}

.lagooon-cover-genre.mud-chip {
    margin: 0;
    border-color: var(--mud-palette-text-primary);
}

.lagooon-cover-closing.mud-typography-h3 {
    color: var(--mud-palette-primary);
}

/* The photo is only shown from MudGrid's md breakpoint up; on mobile the text stands alone. */
.lagooon-cover-image {
    display: none;
}

@media (min-width: 960px) {
    .lagooon-cover-image {
        display: block;
        position: relative;
        border-inline-start: 1px solid var(--mud-palette-text-primary);
    }

    /* Taken out of the flow, so the text sets the row height and the photos fill it. */
    .lagooon-cover-image .lagooon-slideshow {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
    }
}

/* Gallery: one section per event, separated by a thin line; photos and videos as equal tiles
   in a thin outline, cropped to the same shape. */
.lagooon-gallery-item {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--mud-palette-text-primary);
}

.lagooon-gallery-description {
    max-width: 48rem;
}

.lagooon-gallery-empty {
    color: var(--mud-palette-text-secondary);
}

.lagooon-gallery-cover.lagooon-gallery-photo {
    max-width: 24rem;
}

/* Gallery list: one card per gallery, cover on top, title and photo count below; the whole card is the link. */
.lagooon-gallery-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--mud-palette-text-primary);
    border-radius: var(--lagooon-radius);
    background-color: var(--lagooon-card-background);
    box-shadow: var(--lagooon-card-shadow);
    text-decoration: none;
    transition: transform 0.3s ease;
}

.lagooon-gallery-card:hover {
    transform: translateY(-0.25rem);
}

.lagooon-gallery-card-cover {
    display: flex;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    transition: transform 0.5s ease;
}

.lagooon-gallery-card:hover .lagooon-gallery-card-cover {
    transform: scale(1.03);
}

.lagooon-gallery-card-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.5rem;
    /* Above the cover while it grows on hover. */
    position: relative;
    background-color: var(--lagooon-card-background);
}

.lagooon-gallery-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.lagooon-gallery-card-count {
    color: var(--mud-palette-text-secondary);
}

.lagooon-gallery-card .lagooon-circle-arrow {
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.lagooon-gallery-card:hover .lagooon-circle-arrow {
    background-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    transform: translateX(0.25rem);
}

/* A photo tile is a button that opens the photo full screen. */
.lagooon-gallery-open {
    display: block;
    width: 100%;
    padding: 0;
    cursor: zoom-in;
    border-radius: var(--lagooon-radius-small);
}

.lagooon-gallery-open .lagooon-gallery-photo {
    transition: transform 0.3s ease;
}

.lagooon-gallery-open:hover .lagooon-gallery-photo {
    transform: scale(1.02);
}

.lagooon-gallery-open:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Full screen photo (LagGalleryFiles): the photo as large as fits on a dark backdrop, download and close in the
   top right corner, arrows to the previous and next photo at the sides. Over everything, header included. */
.lagooon-lightbox {
    position: fixed;
    inset: 0;
    z-index: var(--mud-zindex-dialog);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4.5rem 1rem 1rem;
    outline: none;
    color: var(--lagooon-strip-text);
}

/* The page behind stays where it is while a photo is open. */
body:has(.lagooon-lightbox) {
    overflow: hidden;
}

.lagooon-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, var(--lagooon-strip-background) 94%, transparent);
    backdrop-filter: blur(6px);
    animation: lagooon-lightbox-fade 0.25s ease;
}

.lagooon-lightbox-image {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--lagooon-radius-small);
    box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.6);
    animation: lagooon-lightbox-photo 0.3s ease;
}

.lagooon-lightbox-bar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.lagooon-lightbox-counter {
    margin-inline-end: 0.5rem;
    font-size: 0.875rem;
    letter-spacing: 0.1em;
}

/* Round buttons in the header's colours, like the video's sound button. */
.lagooon-lightbox-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    color: inherit;
    background-color: color-mix(in srgb, var(--lagooon-strip-background) 70%, transparent);
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.lagooon-lightbox-button:hover {
    background-color: var(--lagooon-strip-text);
    color: var(--lagooon-strip-background);
    transform: scale(1.06);
}

.lagooon-lightbox-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.lagooon-lightbox-previous,
.lagooon-lightbox-next {
    position: absolute;
    top: 50%;
    translate: 0 -50%;
}

.lagooon-lightbox-previous {
    left: 1rem;
}

.lagooon-lightbox-next {
    right: 1rem;
}

/* On phones the arrows move to the bottom corners, off the photo. */
@media (max-width: 599.98px) {
    .lagooon-lightbox {
        padding-bottom: 5rem;
    }

    .lagooon-lightbox-previous,
    .lagooon-lightbox-next {
        top: auto;
        bottom: 1rem;
        translate: none;
    }
}

@keyframes lagooon-lightbox-fade {
    from {
        opacity: 0;
    }
}

@keyframes lagooon-lightbox-photo {
    from {
        opacity: 0;
        transform: scale(0.97);
    }
}

@media (prefers-reduced-motion: reduce) {
    .lagooon-lightbox-backdrop,
    .lagooon-lightbox-image {
        animation: none;
    }
}

.lagooon-gallery-photo {
    object-fit: cover;
    background-color: var(--lagooon-strip-background);
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border: 1px solid var(--mud-palette-text-primary);
}

/* LagEvents: next event on the left two thirds, link to all events on the right third, in a thin outlined box.
   Below MudGrid's md breakpoint both take the full width, the link below the event. */
.lagooon-events {
    border: 1px solid var(--mud-palette-text-primary);
}

.lagooon-events-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 1.5rem;
}

.lagooon-events-row {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
}

/* Date block like a ticket stub: big day number in Atelier, month and year below. */
.lagooon-events-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    min-width: 5.5rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--mud-palette-text-primary);
}

.lagooon-events-day {
    font-family: 'Atelier', sans-serif;
    font-size: 3rem;
    line-height: 1;
    color: var(--mud-palette-primary);
}

.lagooon-events-month {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.lagooon-events-tickets {
    align-self: flex-start;
}

@media (max-width: 599.98px) {
    .lagooon-events-tickets {
        align-self: stretch;
    }
}

.lagooon-events-artist.mud-chip {
    margin: 0;
    border-color: var(--mud-palette-text-primary);
}

.lagooon-events-all {
    border-top: 1px solid var(--mud-palette-text-primary);
}

.lagooon-events-all .lagooon-events-content {
    justify-content: center;
}

@media (min-width: 960px) {
    .lagooon-events-all {
        border-top: none;
        border-inline-start: 1px solid var(--mud-palette-text-primary);
    }

    .lagooon-events-button {
        align-self: flex-start;
    }
}

/* Events page: one outlined card per event, stacked; past events quieter than upcoming ones. */
.lagooon-event-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.lagooon-event-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    border: 1px solid var(--mud-palette-text-primary);
}

.lagooon-event-card-past .lagooon-events-day {
    color: inherit;
}

@media (max-width: 599.98px) {
    .lagooon-events-row {
        flex-direction: column;
        gap: 1rem;
    }

    .lagooon-events-button {
        width: 100%;
    }
}

/* LagArtists: square photo cards in a row that scrolls sideways, snapping card by card. */
@media (max-width: 599.98px) {
    .lagooon-artists-button {
        width: 100%;
    }
}

/* The padding leaves room for the cards' shadows, which the scrolling row would otherwise cut off; the negative
   margin and scroll padding keep the cards themselves where they were, in line with the heading. */
.lagooon-artists-row {
    display: flex;
    gap: 1rem;
    margin: 0.75rem -0.75rem 0;
    padding: 0.75rem 0.75rem 1rem;
    scroll-padding-inline: 0.75rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-text-primary) transparent;
}

/* Square photo on top, the colour line, then the info strip below it; the card is the box
   the "More" link's stretched layer covers. */
.lagooon-artist-card {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 min(20rem, 80vw);
    scroll-snap-align: start;
    border: 1px solid var(--mud-palette-text-primary);
}

/* Clips the photo's hover zoom to the square. */
.lagooon-artist-photo-frame {
    aspect-ratio: 1;
    overflow: hidden;
}

.lagooon-artist-photo {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
}

.lagooon-artist-card:hover .lagooon-artist-photo {
    transform: scale(1.04);
}

.lagooon-artist-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lagooon-strip-background);
    color: var(--lagooon-strip-text);
}

/* Dark strip below the photo and colour line (strip theme, see .lagooon-artist-info above);
   it fills the rest of the card, so cards with longer names stay as tall as the others. */
.lagooon-artist-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem;
    color: var(--mud-palette-text-primary);
    background-color: var(--lagooon-strip-background);
}

.lagooon-artist-title {
    margin-top: 0.25rem;
    color: var(--mud-palette-text-secondary);
}

.lagooon-artist-more.mud-button-root {
    position: static;
    flex-shrink: 0;
    padding-inline: 1rem;
}

/* The whole card is clickable: the "More" link stretches an invisible layer over the card. */
.lagooon-artist-card {
    cursor: pointer;
}

/* The artist's text; keeps the line breaks and paragraphs of BodyText. */
.lagooon-artist-body {
    white-space: pre-line;
}

/* Artists page: one artist per row, the whole row a link with the round arrow on the right. */
/* Clipped sideways, so a pressed row sliding out to the right never makes the page scroll sideways. */
.lagooon-artist-list {
    border-top: 1px solid var(--mud-palette-text-primary);
    overflow-x: clip;
}

.lagooon-artist-row {
    display: grid;
    grid-template-columns: 8rem 1fr auto;
    align-items: center;
    gap: 1.5rem;
    padding-block: 1.5rem;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    text-decoration: none;
}

.lagooon-artist-row-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 8rem;
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--mud-palette-text-primary);
    transition: transform 0.3s ease;
}

.lagooon-artist-row-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.lagooon-artist-row-title {
    color: var(--mud-palette-text-secondary);
}

/* The first paragraph of the text, cut to two lines. */
.lagooon-artist-row-intro {
    margin-top: 0.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lagooon-artist-row .lagooon-circle-arrow {
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.lagooon-artist-row:hover .lagooon-circle-arrow {
    background-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    transform: translateX(0.25rem);
}

.lagooon-artist-row:hover .lagooon-artist-row-photo {
    transform: scale(1.03);
}

@media (max-width: 599.98px) {
    .lagooon-artist-row {
        grid-template-columns: 5rem 1fr auto;
        gap: 1rem;
    }

    .lagooon-artist-row-photo {
        width: 5rem;
    }

    .lagooon-artist-row-intro {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lagooon-artist-row-photo {
        transition: none;
    }
}

/* Artist page. */
/* LagBackLink: "← Home" at the top of every page but the home page. */
.lagooon-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.lagooon-artist-page-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    aspect-ratio: 1;
    border: 1px solid var(--mud-palette-text-primary);
}

.lagooon-artist-gallery {
    margin-top: 3rem;
    padding-top: 3rem;
    border-top: 1px solid var(--mud-palette-text-primary);
}

.lagooon-artist-more.mud-button-root::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

/* Hovering anywhere on the card fills the "More" button too. */
.lagooon-artist-card:hover .lagooon-artist-more.mud-button-outlined {
    background-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
}

.lagooon-artist-card:hover .lagooon-artist-more .mud-button-icon-end {
    transform: translateX(0.25rem);
}

@media (prefers-reduced-motion: reduce) {
    .lagooon-artist-photo {
        transition: none;
    }
}

/* Team page: outlined cards with a square photo, name and role below, each a link to the member's page. */
/* Clickable like the gallery cards: a pointer, a slight lift and shadow on hover, and a round arrow that fills. */
.lagooon-team-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid var(--mud-palette-text-primary);
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    box-shadow: var(--lagooon-card-shadow);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lagooon-team-card:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 12px 28px -8px var(--lagooon-shadow-color);
}

.lagooon-team-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Name and role on the left, the arrow at the bottom right. */
.lagooon-team-card-text {
    flex: 1;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 0.75rem;
}

.lagooon-team-card-name {
    min-width: 0;
    align-self: flex-start;
}

.lagooon-team-card .lagooon-circle-arrow {
    width: 2rem;
    height: 2rem;
    transition: background-color 0.2s, color 0.2s, transform 0.2s;
}

.lagooon-team-card:hover .lagooon-circle-arrow {
    background-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    transform: translateX(0.25rem);
}

/* Clips the photo's hover zoom to the square. */
.lagooon-team-photo-frame {
    aspect-ratio: 1;
    overflow: hidden;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.lagooon-team-photo {
    display: block;
    width: 100%;
    height: 100%;
    transition: transform 0.4s ease;
}

.lagooon-team-card:hover .lagooon-team-photo {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
    .lagooon-team-photo {
        transition: none;
    }
}

/* The Vision & Outlook card below the team. */
.lagooon-team-vision {
    margin-top: 3rem;
    border: 1px solid var(--mud-palette-text-primary);
}

.lagooon-team-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--lagooon-strip-background);
    color: var(--lagooon-strip-text);
}

.lagooon-team-role {
    color: var(--mud-palette-text-secondary);
}

/* LagGallery: latest gallery, text on the left half and its cover on the right half, in a thin outlined box.
   Below MudGrid's md breakpoint both take the full width, the cover on top. */
.lagooon-gallery-teaser {
    border: 1px solid var(--mud-palette-text-primary);
}

.lagooon-gallery-teaser-content {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
}

.lagooon-gallery-teaser-image {
    order: -1;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.lagooon-gallery-teaser-image .mud-image {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 3;
}

@media (min-width: 960px) {
    .lagooon-gallery-teaser-image {
        position: relative;
        order: 0;
        min-height: 24rem;
        border-bottom: none;
        border-inline-start: 1px solid var(--mud-palette-text-primary);
    }

    /* Taken out of the flow, so the text sets the row height and the cover fills it. */
    .lagooon-gallery-teaser-image .mud-image {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }
}

@media (max-width: 599.98px) {
    .lagooon-gallery-teaser-button {
        align-self: stretch;
    }
}

/* LagWave: a full-width colourful wave separator (animated by LagWave.razor.js). */
.lagooon-wave {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.lagooon-wave svg {
    display: block;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.lagooon-wave-flipped {
    transform: scaleY(-1);
}

/* LagWave EnableBlur. The waves reach past the box sideways (they slide), so the blur doesn't fade the side edges. */
.lagooon-wave-blurred svg {
    filter: blur(var(--lagooon-wave-blur));
}

/* In the fixed header the wave needs the bar's own background, or the page would show through behind it. */
.lagooon-header-wave {
    background-color: var(--mud-palette-background);
}

/* LagLibrary: newest tracks as link rows (LagRedirectButton) in two columns, in a thin outlined box. */
.lagooon-library {
    border: 1px solid var(--mud-palette-text-primary);
}

.lagooon-library-intro {
    max-width: 48rem;
}

.lagooon-library-item {
    padding-block: 1rem;
}

/* Embedded SoundCloud player for the newest items, framed like the other boxes. */
.lagooon-library-player {
    display: block;
    width: 100%;
    height: 166px;
    border: 1px solid var(--mud-palette-text-primary);
    background-color: var(--lagooon-strip-background);
}

@media (min-width: 960px) {
    .lagooon-library-list .mud-grid-item:nth-child(odd) .lagooon-library-item {
        margin-inline-end: 1rem;
    }

    .lagooon-library-list .mud-grid-item:nth-child(even) .lagooon-library-item {
        margin-inline-start: 1rem;
    }
}

.lagooon-library-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lagooon-library-title {
    font-weight: 500;
}

.lagooon-library-meta {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 599.98px) {
    .lagooon-library-button {
        width: 100%;
    }
}

/* Team page text: sections at a readable width, and the diversity statement set off by a turquoise line. */
.lagooon-team-section {
    max-width: 48rem;
    margin-top: 3rem;
}

.lagooon-team-statement {
    max-width: 48rem;
    margin-top: 2.5rem;
    padding-inline-start: 1.5rem;
    border-inline-start: 0.375rem solid var(--mud-palette-primary);
}

.lagooon-team-statement-title.mud-typography-h3 {
    color: var(--mud-palette-primary);
}

.lagooon-team-lead {
    font-weight: 500;
}

/* Compact teaser box (LagTeam, LagContact): text on the left and the link on the right; stacked on mobile. */
.lagooon-teaser {
    border: 1px solid var(--mud-palette-text-primary);
}

/* Home page: sections slide in from the sides while scrolling (Pages/Home/Page.razor.js);
   clipped so a section that is still off to the side never makes the page scroll sideways. */
.lagooon-home {
    overflow-x: clip;
}

/* Two teasers in one section: stacked, with the same space between them as between sections
   (twice LagSpacing's padding), and side by side at half width each from MudBlazor's md breakpoint. */
.lagooon-teaser-pair {
    display: grid;
    gap: 1rem;
}

@media (min-width: 600px) {
    .lagooon-teaser-pair {
        gap: 2rem;
    }
}

@media (min-width: 960px) {
    .lagooon-teaser-pair {
        grid-template-columns: 1fr 1fr;
    }
}

.lagooon-teaser-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.lagooon-teaser-text {
    flex: 1 1 24rem;
    max-width: 48rem;
}

.lagooon-teaser-button {
    flex-shrink: 0;
}

@media (max-width: 599.98px) {
    .lagooon-teaser-button {
        width: 100%;
    }
}

/* Contact page: link rows on the left, the organiser's card on the right; stacked on mobile. */
.lagooon-contact-intro {
    max-width: 48rem;
}

.lagooon-contact-list {
    border-top: 1px solid var(--mud-palette-text-primary);
}

.lagooon-contact-row {
    padding-block: 1.25rem;
}

.lagooon-contact-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.lagooon-contact-kind {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.lagooon-contact-value {
    font-size: 1.25rem;
}

.lagooon-contact-card {
    padding: 2rem;
    border: 1px solid var(--mud-palette-text-primary);
}

/* Contact form: kept off-screen (not display:none, which some bots skip) so only bots fill it in. */
.lagooon-contact-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

@media (max-width: 599.98px) {
    .lagooon-contact-send {
        width: 100%;
    }
}

/* ALTCHA widget on the contact form, in the site's colours instead of its default light theme. */
.lagooon-altcha altcha-widget {
    --altcha-color-base: transparent;
    --altcha-color-base-content: var(--mud-palette-text-primary);
    --altcha-color-primary: var(--mud-palette-primary);
    --altcha-color-primary-content: var(--mud-palette-background);
    --altcha-border-color: var(--mud-palette-text-primary);
    --altcha-border-radius: var(--lagooon-radius-small);
    --altcha-checkbox-border-color: var(--mud-palette-text-primary);
    --altcha-checkbox-border-radius: 0.25rem;
    --altcha-shadow: none;
}

/* LagVideo: players in a rounded outlined frame, themed in the site colours; background videos fill their box. */
.lagooon-video {
    position: relative;
    overflow: hidden;
}

.lagooon-video-player {
    --plyr-color-main: var(--mud-palette-primary);
    --plyr-video-background: var(--lagooon-strip-background);
    --plyr-font-family: inherit;
    border: 1px solid var(--mud-palette-text-primary);
    border-radius: var(--lagooon-radius);
    background-color: var(--lagooon-strip-background);
}

.lagooon-video-player .lagooon-video-element,
.lagooon-video-player .plyr {
    display: block;
    width: 100%;
    height: 100%;
}

.lagooon-video-player .lagooon-video-element {
    object-fit: contain;
}

/* Fills the box it's put in (give it a size, or place it absolutely behind content), cropping to cover. */
.lagooon-video-background {
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.lagooon-video-background .lagooon-video-element {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Click to pause and play (LagVideo.razor.js); content placed over the video still gets its own clicks. */
    pointer-events: auto;
    cursor: pointer;
}

/* Paused by a click: a round play button in the middle, in the menu bar's colours (circle, then the triangle). */
.lagooon-video-background[data-paused]::before,
.lagooon-video-background[data-paused]::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
}

.lagooon-video-background[data-paused]::before {
    width: 5rem;
    height: 5rem;
    border: 1px solid var(--lagooon-strip-text);
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--lagooon-strip-background) 70%, transparent);
    transform: translate(-50%, -50%);
}

.lagooon-video-background[data-paused]::after {
    width: 1.75rem;
    height: 2rem;
    background-color: var(--lagooon-strip-text);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    /* A bit right of the middle, so the triangle looks centred in the circle. */
    transform: translate(-40%, -50%);
}

/* Volume slider and sound on/off in the top right corner, side by side on a pill in the menu bar's colours. Both are
   large enough to hit with a finger (3rem high, a 2rem slider knob). The video box ignores the pointer (it sits
   behind content), the controls take it back. */
.lagooon-video-sound {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.75rem;
    pointer-events: auto;
}

.lagooon-video-sound-bar {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--lagooon-strip-background) 70%, transparent);
}

/* "TURN ME ON!" under the controls while muted, dancing: a little hop with a sway, as if to the music it's
   asking for. Gone as soon as the sound is on. */
.lagooon-video-sound-hint {
    margin-right: 0.25rem;
    font-family: 'Atelier', sans-serif;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--lagooon-strip-text);
    text-shadow: 0 2px 8px color-mix(in srgb, var(--lagooon-strip-background) 80%, transparent);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    animation: lagooon-sound-hint-dance 1.2s ease-in-out infinite;
}

.lagooon-video-sound:has(.lagooon-video-mute[aria-pressed="true"]) .lagooon-video-sound-hint {
    display: none;
}

@keyframes lagooon-sound-hint-dance {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    15% { transform: translateY(-0.4rem) rotate(-6deg) scale(1.05); }
    30% { transform: translateY(0) rotate(0deg) scale(1); }
    45% { transform: translateY(-0.4rem) rotate(6deg) scale(1.05); }
    60% { transform: translateY(0) rotate(0deg) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .lagooon-video-sound-hint {
        animation: none;
    }
}

.lagooon-video-sound[hidden] {
    display: none;
}

.lagooon-video-mute {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 1px solid var(--lagooon-strip-text);
    border-radius: 50%;
    color: var(--lagooon-strip-text);
    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.2s;
}

.lagooon-video-mute:hover {
    background-color: var(--lagooon-strip-background);
    transform: scale(1.06);
}

.lagooon-video-mute:focus-visible,
.lagooon-video-volume:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.lagooon-video-mute[aria-pressed="true"] .lagooon-video-mute-off,
.lagooon-video-mute[aria-pressed="false"] .lagooon-video-mute-on {
    display: none;
}

/* The track is filled up to the volume (--lagooon-volume, set in LagVideo.razor.js); the whole slider is
   3rem high so the touch target is, while the drawn track stays thin. Dimmed while the sound is off. */
.lagooon-video-volume {
    --lagooon-volume: 25%;
    width: 8rem;
    height: 3rem;
    margin: 0 0 0 1rem;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    transition: opacity 0.2s;
}

.lagooon-video-volume[hidden] {
    display: none;
}

.lagooon-video-sound-bar:has(.lagooon-video-mute[aria-pressed="false"]) .lagooon-video-volume {
    opacity: 0.55;
}

.lagooon-video-volume::-webkit-slider-runnable-track {
    height: 0.5rem;
    border-radius: 999px;
    background: linear-gradient(to right, var(--lagooon-strip-text) var(--lagooon-volume),
        color-mix(in srgb, var(--lagooon-strip-text) 30%, transparent) var(--lagooon-volume));
}

.lagooon-video-volume::-moz-range-track {
    height: 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--lagooon-strip-text) 30%, transparent);
}

.lagooon-video-volume::-moz-range-progress {
    height: 0.5rem;
    border-radius: 999px;
    background: var(--lagooon-strip-text);
}

.lagooon-video-volume::-webkit-slider-thumb {
    width: 2rem;
    height: 2rem;
    margin-top: -0.75rem;
    border: none;
    border-radius: 50%;
    background: var(--lagooon-strip-text);
    -webkit-appearance: none;
}

.lagooon-video-volume::-moz-range-thumb {
    width: 2rem;
    height: 2rem;
    border: none;
    border-radius: 50%;
    background: var(--lagooon-strip-text);
}

@media (max-width: 599.98px) {
    .lagooon-video-sound {
        top: 0.75rem;
        right: 0.75rem;
    }

    .lagooon-video-volume {
        width: 7rem;
    }
}

/* LagHeroVideo: full width at the top of the page, 16:9 from MudBlazor's sm breakpoint and 9:16 below it, but never
   taller than the screen below the header (the video is then cropped to fill). The other format is display: none. */
.lagooon-hero-video {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100svh - var(--lagooon-header-height));
    background-color: var(--lagooon-strip-background);
}

.lagooon-hero-video-portrait {
    display: none;
}

@media (max-width: 599.98px) {
    .lagooon-hero-video {
        aspect-ratio: 9 / 16;
    }

    .lagooon-hero-video-landscape {
        display: none;
    }

    .lagooon-hero-video-portrait {
        display: block;
    }
}

/* LagSlideshow: pictures stacked in one box, only the active one visible; the others fade out as it fades in. */
.lagooon-slideshow {
    position: relative;
    overflow: hidden;
}

.lagooon-slideshow-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.lagooon-slideshow-active {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .lagooon-slideshow-image {
        transition: none;
    }
}