:root {
    --doodle-width: calc(100% / 6 - 30px);
    --doodle-height: auto;
    --doodle-margin: 20px;
}

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

html,
body {
    width: 100%;
    height: 100%;
}

body {
    overflow: hidden;
    background-color: #111;
    background-size: cover;
    font-family: Arial, sans-serif;
    text-align: center;
}

.section,
.container-fluid {
    width: 100%;
    height: 100%;
}

.section {
    position: relative;
    z-index: 1;
}

.screen-qr-placeholder {
    position: fixed;
    top: clamp(28px, 4vh, 54px);
    left: clamp(20px, 4.2vw, 68px);
    z-index: 5;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    color: #fff;
    font-size: clamp(14px, 1.15vw, 20px);
    line-height: 1.3;
    text-align: left;
    text-transform: uppercase;
}

.screen-qr-placeholder__code {
    width: clamp(96px, 11.5vw, 184px);
    aspect-ratio: 1;
    flex: 0 0 auto;
    display: block;
    border: 7px solid #fff;
    background: #fff;
    object-fit: contain;
    box-shadow: 0 1px 8px #0005;
}

.ambient-effect-layer {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: block;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.ambient-effect-layer[hidden] {
    display: none;
}

#doodleDisplay {
    width: 100%;
    height: 100%;
}

#doodleDisplay img {
    object-fit: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* Fixed grid mode */
#doodleDisplay.fixed-mode {
    display: grid;
    transform: translateY(2vh);
    grid-template-columns: repeat(var(--fixed-grid-columns, 12), minmax(0, 1fr));
    grid-template-rows: repeat(var(--fixed-grid-rows, 2), minmax(0, 1fr));
    row-gap: var(--fixed-grid-row-gap, 0px);
    align-items: center;
    justify-items: center;
    padding: var(--fixed-grid-top-margin, 16.7vh) 20px var(--fixed-grid-bottom-margin, 1.85vh);
    box-sizing: border-box;
    overflow: hidden;
}

#doodleDisplay img.fixed-image {
    display: block;
    width: var(--doodle-width);
    height: var(--doodle-height);
    margin: var(--doodle-margin);
    max-width: 100%;
    max-height: 100%;
    min-width: 0;
    min-height: 0;
    background: transparent;
    filter: drop-shadow(-2px 6px 7px rgba(0, 0, 0, 0.24));
    transform-origin: 50% 0;
    animation: hangingSwing var(--swing-duration, 3.6s) ease-in-out var(--float-delay, 0s) infinite alternate;
}

@keyframes hangingSwing {
    from {
        transform: rotate(var(--swing-left, -3deg));
    }

    to {
        transform: rotate(var(--swing-right, 3deg));
    }
}

/* Flow mode */
#doodleDisplay.flow-mode {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

#doodleDisplay img.flow-image {
    position: absolute;
    bottom: -320px;
    left: var(--flow-left);
    width: var(--doodle-width);
    min-width: 150px;
    max-width: 280px;
    height: var(--doodle-height);
    opacity: 0;
    filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.22));
    transform: translateX(-50%);
    animation: flowBottomToTopOnly var(--flow-duration) linear var(--flow-delay) infinite;
}

@keyframes flowBottomToTopOnly {
    0% {
        bottom: -320px;
        opacity: 0;
    }

    8%,
    90% {
        opacity: 1;
    }

    100% {
        bottom: 110vh;
        opacity: 0;
    }
}

/* Sticky Wall mode */
.sticky-wire-layer {
    position: fixed;
    inset: 0;
    z-index: 1;
    display: none;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

body[data-display-animation="sticky"] .sticky-wire-layer {
    display: block;
}

.sticky-wire-line,
.sticky-wire-lights {
    fill: none;
    vector-effect: non-scaling-stroke;
}

/* .sticky-wire-line {
    stroke: rgba(35, 31, 26, 0.72);
    stroke-width: 3px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.22));
} */

/* .sticky-wire-lights {
    stroke: rgba(255, 219, 119, 0.95);
    stroke-width: 5px;
    stroke-linecap: round;
    stroke-dasharray: 1 22;
    filter: drop-shadow(0 0 5px rgba(255, 201, 71, 0.92));
    animation: stickyWireLights 2.8s linear var(--wire-light-delay, 0s) infinite;
} */

#doodleDisplay.sticky-mode {
    position: fixed;
    inset: 0;
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
}

#doodleDisplay img.sticky-image {
    position: absolute;
    z-index: 3;
    width: var(--sticky-card-size, 120px);
    height: var(--sticky-card-size, 120px);
    max-width: none;
    max-height: none;
    padding: 0;
    /* border: var(--sticky-border-size, 5px) solid rgba(255, 255, 255, 0.94);
    border-radius: 3px; */
    background: transparent;
    object-fit: contain;
    offset-anchor: center;
    offset-rotate: 0deg;
    box-shadow:
        0 12px 22px rgba(30, 24, 12, 0.25),
        0 2px 5px rgba(30, 24, 12, 0.2);
    transform-origin: center;
    animation:
        stickyWireSway var(--wire-sway-duration, 6s) ease-in-out var(--wire-sway-delay, 0s) infinite alternate;
    will-change: offset-distance, transform, opacity, translate, scale;
}

@keyframes stickyWireSway {
    from {
        transform:
            rotate(calc(var(--sticky-rotation, 0deg) + var(--sticky-tilt-from, -30deg)))
            scale(0.98);
    }

    to {
        transform:
            rotate(calc(var(--sticky-rotation, 0deg) + var(--sticky-tilt-to, 30deg)))
            scale(1.02);
    }
}

@keyframes stickyWireLights {
    from {
        stroke-dashoffset: 0;
    }

    to {
        stroke-dashoffset: -46;
    }
}

@supports not (offset-path: path("M 0 0 L 1 1")) {
    #doodleDisplay img.sticky-image {
        left: var(--fallback-left) !important;
        top: var(--fallback-top) !important;
        transform:
            translate(-50%, -50%)
            rotate(var(--sticky-rotation, 0deg));
        animation: stickyFallbackFloat 4.6s ease-in-out var(--wire-sway-delay, 0s) infinite alternate;
    }

    @keyframes stickyFallbackFloat {
        from {
            transform:
                translate(-50%, -50%)
                rotate(calc(var(--sticky-rotation, 0deg) + var(--sticky-tilt-from, -30deg)));
        }

        to {
            transform:
                translate(-50%, calc(-50% - 6px))
                rotate(calc(var(--sticky-rotation, 0deg) + var(--sticky-tilt-to, 30deg)));
        }
    }
}

.sticky-entry-image {
    z-index: 12 !important;
    scale: 0.72;
    filter:
        drop-shadow(0 16px 25px rgba(0, 0, 0, 0.34))
        brightness(1.1);
    transition:
        scale 480ms cubic-bezier(0.2, 0.85, 0.3, 1.12),
        filter 480ms ease;
}

.sticky-entry-image.is-visible {
    scale: 1;
    filter: drop-shadow(0 12px 22px rgba(30, 24, 12, 0.25));
}

#doodleDisplay img.sticky-image.sticky-new-card {
    z-index: 10;
    animation:
        stickyWireSway var(--wire-sway-duration, 6s) ease-in-out var(--wire-sway-delay, 0s) infinite alternate,
        stickyNewCardGlow 0.9s ease-in-out 0s 3;
}

@keyframes stickyNewCardGlow {
    0%, 100% {
        filter:
            drop-shadow(0 0 8px rgba(255, 197, 54, 0.72))
            drop-shadow(0 0 18px rgba(255, 166, 42, 0.38));
        box-shadow:
            0 12px 22px rgba(30, 24, 12, 0.25),
            0 0 12px rgba(255, 196, 56, 0.72);
    }

    50% {
        filter:
            drop-shadow(0 0 14px rgba(255, 231, 135, 1))
            drop-shadow(0 0 32px rgba(255, 166, 42, 0.86));
        box-shadow:
            0 12px 22px rgba(30, 24, 12, 0.25),
            0 0 24px rgba(255, 200, 67, 1);
    }
}

@media (prefers-reduced-motion: reduce) {
    #doodleDisplay img,
    .sticky-entry-image {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}