/* ==========================================================================
   Hilmas hemliga arv - reveal av sluttavlan
   --------------------------------------------------------------------------
   Laddas EFTER effects.css och styr hela finale-sekvensen i publikvyn.
   Koreografin drivs av klasser som screenOverlay.js satter pa
   .screen-overlay-finale:

     .is-armed     morkt rum, draperiet fordraget over hela skarmen
     .is-running   hela reveal-koreografin spelas upp en gang
     .is-settled   vilolage: levande ljus, damm och glod
     .is-instant   hoppa direkt till vilolaget, inget draperi

   Sista steget i koreografin ar bildtexten (6700ms + 1400ms = 8100ms).
   Andrar du tiderna har MASTE REVEAL_TOTAL_MS i screenOverlay.js andras.
   ========================================================================== */

.screen-overlay-finale {
    --reveal-gold: #e8c483;
    --reveal-gold-bright: #fff0cf;
    --reveal-velvet: #55151f;
    --reveal-velvet-deep: #24070d;
    --reveal-light: 255, 219, 158;
    overflow: hidden;
    isolation: isolate;
    background: #04050a;
    place-items: center;
}

/* Neutralisera de gamla finale-animationerna i effects.css.
   De ersatts helt av koreografin nedan. */
body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art,
body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art::before,
body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art::after,
.screen-overlay-finale::before,
.screen-overlay-finale::after {
    animation: none !important;
}

.screen-overlay-finale::before,
.screen-overlay-finale::after {
    content: none;
}

/* --------------------------------------------------------------------------
   Rummet
   -------------------------------------------------------------------------- */

.finale-room {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(ellipse 62% 50% at 50% 38%, rgba(78, 58, 46, 0.7), transparent 74%),
        radial-gradient(ellipse 90% 70% at 50% 30%, rgba(34, 27, 32, 0.9), transparent 78%),
        linear-gradient(180deg, #05060b 0%, #0e0a11 42%, #16111a 72%, #08070c 100%);
    opacity: 0;
}

.finale-floor {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 32%;
    z-index: 0;
    background:
        radial-gradient(ellipse 40% 100% at 50% 122%, rgba(var(--reveal-light), 0.26), transparent 66%),
        linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.68));
    opacity: 0;
}

/* --------------------------------------------------------------------------
   Ljuskeglan ovanifran
   -------------------------------------------------------------------------- */

.finale-beam {
    position: absolute;
    top: -12%;
    width: 58%;
    height: 122%;
    z-index: 1;
    transform: rotate(var(--beam-angle)) scaleX(0.35) scaleY(0.42);
    transform-origin: 50% 0;
    background: linear-gradient(
        180deg,
        rgba(var(--reveal-light), 0.4) 0%,
        rgba(var(--reveal-light), 0.19) 40%,
        rgba(var(--reveal-light), 0.05) 72%,
        rgba(var(--reveal-light), 0) 100%
    );
    filter: blur(18px);
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}

/* Två mjuka, korsande spotlights från salens övre hörn. */
.finale-beam-left {
    --beam-angle: -13deg;
    left: -10%;
    clip-path: polygon(14% 0, 30% 0, 97% 100%, 24% 100%);
}

.finale-beam-right {
    --beam-angle: 13deg;
    right: -10%;
    clip-path: polygon(70% 0, 86% 0, 76% 100%, 3% 100%);
}

/* --------------------------------------------------------------------------
   Damm i luften
   -------------------------------------------------------------------------- */

.finale-dust {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
}

.finale-dust span {
    position: absolute;
    inset: -25%;
    display: block;
    background-repeat: repeat;
    will-change: transform;
}

.finale-dust span:nth-child(1) {
    background-image:
        radial-gradient(circle at 18% 24%, rgba(255, 240, 210, 0.85) 0 1.1px, transparent 2px),
        radial-gradient(circle at 63% 11%, rgba(255, 232, 196, 0.65) 0 0.9px, transparent 1.8px),
        radial-gradient(circle at 81% 67%, rgba(255, 242, 216, 0.75) 0 1.2px, transparent 2.1px),
        radial-gradient(circle at 34% 82%, rgba(255, 230, 190, 0.55) 0 0.8px, transparent 1.7px);
    background-size: 340px 300px;
}

.finale-dust span:nth-child(2) {
    background-image:
        radial-gradient(circle at 44% 38%, rgba(255, 244, 224, 0.8) 0 1.6px, transparent 2.8px),
        radial-gradient(circle at 12% 71%, rgba(255, 234, 202, 0.58) 0 1.3px, transparent 2.4px),
        radial-gradient(circle at 88% 29%, rgba(255, 238, 210, 0.66) 0 1.5px, transparent 2.6px);
    background-size: 470px 420px;
    opacity: 0.76;
}

.finale-dust span:nth-child(3) {
    background-image:
        radial-gradient(circle at 71% 52%, rgba(255, 248, 232, 0.9) 0 2.2px, transparent 3.6px),
        radial-gradient(circle at 26% 17%, rgba(255, 236, 206, 0.66) 0 1.9px, transparent 3.2px);
    background-size: 660px 590px;
    opacity: 0.58;
}

/* --------------------------------------------------------------------------
   Scenen: guldramen med tavlan
   -------------------------------------------------------------------------- */

.finale-stage {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    transform: translateY(16px) scale(0.9);
    will-change: transform;
}

/* Specificiteten matchar effects.css-regeln medvetet
   (body + #id + :not() + .class) sa att dessa varden vinner. */
body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art {
    position: relative;
    /* effects.css satter opacity 0 och forlitar sig pa sin egen animation.
       Har styrs synligheten av draperiet i stallet. */
    opacity: 1;
    transform: none;
    width: min(84vw, 1360px);
    max-width: calc(100vw - 40px);
    max-height: 84vh;
    aspect-ratio: auto;
    display: block;
    padding: clamp(11px, 1.35vw, 24px);
    border-radius: 3px;
    background:
        linear-gradient(132deg,
            #ffeed0 0%,
            #ddb46c 14%,
            #b1813e 38%,
            #d9ae65 56%,
            #94662b 78%,
            #c49a54 92%,
            #a2762f 100%),
        #b98f4c;
    box-shadow:
        0 54px 160px rgba(0, 0, 0, 0.78),
        0 12px 42px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(255, 231, 170, 0.42),
        inset 0 0 0 1px rgba(255, 255, 255, 0.5),
        inset 0 0 0 7px rgba(120, 79, 30, 0.34),
        inset 0 0 0 8px rgba(255, 233, 178, 0.3),
        inset 0 0 22px rgba(66, 38, 8, 0.45);
    z-index: 1;
}

.finale-art-plate {
    position: relative;
    /* Ligger over glansstraket sa sheen bara syns pa ramens kant. */
    z-index: 2;
    overflow: hidden;
    background: #fbf4e4;
    box-shadow:
        inset 0 0 0 1px rgba(88, 56, 22, 0.34),
        inset 0 0 34px rgba(64, 38, 14, 0.16);
    filter: brightness(0.26) saturate(0.4) contrast(0.92);
    will-change: filter;
}

body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art img {
    display: block;
    width: 100%;
    height: auto;
    max-height: calc(84vh - 62px);
    object-fit: contain;
    border: 0;
    background: #fbf4e4;
    box-shadow: none;
}

/* Morkret som ligger over duken innan reveal */
.finale-art-shade {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 68% 56% at 50% 34%, rgba(10, 7, 14, 0.7), rgba(4, 3, 7, 0.97) 78%),
        linear-gradient(180deg, rgba(4, 3, 7, 0.9), rgba(2, 2, 4, 0.98));
    opacity: 1;
    pointer-events: none;
}

.finale-frame-glow {
    position: absolute;
    inset: -11%;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 56% at 50% 46%, rgba(255, 219, 152, 0.62), transparent 62%),
        radial-gradient(ellipse 88% 80% at 50% 50%, rgba(222, 165, 78, 0.36), transparent 72%);
    filter: blur(30px);
    opacity: 0;
    pointer-events: none;
}

.finale-frame-sheen {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border-radius: 3px;
    pointer-events: none;
}

.finale-frame-sheen::after {
    content: "";
    position: absolute;
    top: -20%;
    bottom: -20%;
    left: 0;
    width: 32%;
    background: linear-gradient(
        100deg,
        transparent 0%,
        rgba(255, 248, 226, 0.14) 26%,
        rgba(255, 252, 240, 0.85) 50%,
        rgba(255, 248, 226, 0.14) 74%,
        transparent 100%
    );
    transform: translateX(-160%) skewX(-14deg);
    mix-blend-mode: screen;
    opacity: 0;
}

/* --------------------------------------------------------------------------
   Draperiet - tacker hela skarmen sa halvorna kan lamna bilden helt
   -------------------------------------------------------------------------- */

.finale-drape {
    position: absolute;
    inset: 0;
    z-index: 6;
    pointer-events: none;
    overflow: hidden;
}

/* Det första ljuset landar på tyget — publiken ser orsaken innan draperiet
   börjar röra sig. */
.finale-drape::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    background: radial-gradient(
        ellipse 16% 72% at 50% 16%,
        rgba(255, 222, 166, 0.38) 0%,
        rgba(232, 170, 96, 0.13) 42%,
        transparent 78%
    );
    mix-blend-mode: screen;
    opacity: 0;
    pointer-events: none;
}

.finale-drape-rod {
    position: absolute;
    z-index: 3;
    top: clamp(4px, 0.6vh, 10px);
    left: 1.5%;
    right: 1.5%;
    height: clamp(9px, 0.9vh, 15px);
    border-radius: 999px;
    background: linear-gradient(180deg, #ffeec6 0%, #d9ad60 32%, #8a6027 70%, #c99f57 100%);
    box-shadow:
        0 7px 20px rgba(0, 0, 0, 0.7),
        inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.finale-drape-rod::before,
.finale-drape-rod::after {
    content: "";
    position: absolute;
    top: 50%;
    width: clamp(16px, 1.7vh, 26px);
    height: clamp(16px, 1.7vh, 26px);
    border-radius: 50%;
    transform: translateY(-50%);
    background: radial-gradient(circle at 34% 30%, #fff3d4, #d3a75a 46%, #7d5522 100%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.64);
}

.finale-drape-rod::before { left: calc(-1 * clamp(9px, 0.95vh, 15px)); }
.finale-drape-rod::after { right: calc(-1 * clamp(9px, 0.95vh, 15px)); }

.finale-drape-panel {
    position: absolute;
    z-index: 1;
    top: clamp(10px, 1.3vh, 20px);
    bottom: 0;
    width: 51%;
    overflow: hidden;
    background:
        /* varm kantljusning ovanifran */
        radial-gradient(ellipse 130% 34% at 50% -2%, rgba(255, 206, 148, 0.22), transparent 70%),
        /* breda veck som bryter upp regelbundenheten */
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.3) 0px,
            rgba(0, 0, 0, 0) 62px,
            rgba(255, 214, 180, 0.05) 104px,
            rgba(0, 0, 0, 0) 141px,
            rgba(0, 0, 0, 0.3) 187px
        ),
        /* veck */
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0.56) 0px,
            rgba(0, 0, 0, 0.18) 11px,
            rgba(255, 222, 190, 0.085) 28px,
            rgba(0, 0, 0, 0.22) 47px,
            rgba(0, 0, 0, 0.56) 62px
        ),
        /* djup */
        linear-gradient(180deg, #6b1c2b 0%, var(--reveal-velvet) 26%, #380d16 70%, var(--reveal-velvet-deep) 100%);
    box-shadow:
        inset 0 14px 30px rgba(0, 0, 0, 0.6),
        0 24px 66px rgba(0, 0, 0, 0.72);
    will-change: transform;
}

/* Sammetens mjuka lyster */
.finale-drape-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 62% 50% at 50% 22%, rgba(255, 190, 146, 0.23), transparent 72%),
        repeating-linear-gradient(96deg, transparent 0 13%, rgba(255, 216, 184, 0.07) 17%, transparent 24% 39%);
    mix-blend-mode: screen;
    transform-origin: top center;
    will-change: transform, opacity;
}

/* Guldgalon langst ner */
.finale-drape-panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: clamp(11px, 1.2vh, 20px);
    background:
        repeating-linear-gradient(90deg,
            rgba(122, 82, 30, 0.85) 0 3px,
            rgba(240, 208, 140, 0.9) 5px,
            rgba(122, 82, 30, 0.85) 8px),
        linear-gradient(180deg, #e6c17f, #8d6428);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.55);
}

.finale-drape-left {
    left: 0;
    transform-origin: left center;
}

.finale-drape-right {
    right: 0;
    transform-origin: right center;
    /* forskjut veckmonstret sa halvorna inte ser identiska ut */
    background-position: 41px 0, 17px 0, 17px 0, 0 0;
}

/* --------------------------------------------------------------------------
   Bildtext
   -------------------------------------------------------------------------- */

.finale-caption {
    position: absolute;
    left: 50%;
    bottom: clamp(10px, 2.2vh, 30px);
    z-index: 5;
    display: grid;
    justify-items: center;
    gap: 5px;
    transform: translate(-50%, 14px);
    text-align: center;
    opacity: 0;
    pointer-events: none;
}

.finale-caption strong {
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(15px, 1.9vh, 26px);
    font-weight: 500;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--reveal-gold-bright);
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.9), 0 0 44px rgba(235, 190, 110, 0.45);
}

.finale-caption span {
    font-size: clamp(9px, 1.05vh, 12px);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: rgba(236, 214, 176, 0.66);
}

.finale-caption::after {
    content: "";
    width: clamp(72px, 12vw, 190px);
    height: 1px;
    margin-top: 3px;
    background: linear-gradient(90deg, transparent, rgba(232, 196, 131, 0.85), transparent);
}

/* ==========================================================================
   KOREOGRAFI
   ========================================================================== */

/* --- Utgangslage --- */

.screen-overlay-finale.is-armed .finale-drape-left,
.screen-overlay-finale.is-armed .finale-drape-right {
    transform: none;
}

/* --- Sekvensen --- */

.screen-overlay-finale.is-running .finale-room {
    animation: hilma-reveal-room 1100ms ease-out both;
}

.screen-overlay-finale.is-running .finale-floor {
    animation: hilma-reveal-floor 2400ms ease-out 2800ms both;
}

.screen-overlay-finale.is-running .finale-drape-rod {
    animation:
        hilma-reveal-rod 1200ms ease-out 260ms both,
        hilma-reveal-rod-out 1600ms ease-in 3400ms both;
}

.screen-overlay-finale.is-running .finale-drape-left {
    animation: hilma-reveal-drape-left 3900ms cubic-bezier(0.36, 0.02, 0.2, 1) 520ms both;
}

.screen-overlay-finale.is-running .finale-drape-right {
    animation: hilma-reveal-drape-right 3900ms cubic-bezier(0.36, 0.02, 0.2, 1) 600ms both;
}

/* Vecken får en egen efterrörelse; det hindrar att sammeten läser som två
   stela, släta skivor när panelerna dras åt sidorna. */
.screen-overlay-finale.is-running .finale-drape-left::before {
    animation: hilma-reveal-velvet-left 3600ms cubic-bezier(0.28, 0.08, 0.18, 1) 620ms both;
}

.screen-overlay-finale.is-running .finale-drape-right::before {
    animation: hilma-reveal-velvet-right 3600ms cubic-bezier(0.28, 0.08, 0.18, 1) 700ms both;
}

/* Ett första, smalt ljus dröjer kvar på sammeten innan draperiet rör sig. */
.screen-overlay-finale.is-running .finale-drape::before {
    animation: hilma-reveal-curtain-light 2400ms ease-out 300ms both;
}

.screen-overlay-finale.is-running .finale-art-plate {
    animation: hilma-reveal-plate-light 2900ms cubic-bezier(0.3, 0.1, 0.24, 1) 2500ms both;
}

.screen-overlay-finale.is-running .finale-art-shade {
    animation: hilma-reveal-shade 2800ms cubic-bezier(0.32, 0.06, 0.26, 1) 2500ms both;
}

.screen-overlay-finale.is-running .finale-beam {
    animation: hilma-reveal-beam 4300ms cubic-bezier(0.26, 0.1, 0.3, 1) 300ms both;
}

.screen-overlay-finale.is-running .finale-dust {
    animation: hilma-reveal-dust-in 2200ms ease-out 3300ms both;
}

.screen-overlay-finale.is-running .finale-frame-glow {
    animation: hilma-reveal-frame-glow 2400ms ease-out 3200ms both;
}

.screen-overlay-finale.is-running .finale-frame-sheen::after {
    animation: hilma-reveal-sheen 1500ms cubic-bezier(0.24, 0.72, 0.2, 1) 4900ms both;
}

.screen-overlay-finale.is-running .finale-stage {
    animation: hilma-reveal-stage 2100ms cubic-bezier(0.22, 0.86, 0.24, 1) 4200ms both;
}

.screen-overlay-finale.is-running .finale-caption {
    animation: hilma-reveal-caption 1400ms ease-out 6700ms both;
}

/* Damm-lagren driver hela tiden nar de ar synliga */
.screen-overlay-finale.is-running .finale-dust span,
.screen-overlay-finale.is-settled .finale-dust span {
    animation: hilma-reveal-dust-drift linear infinite;
}

.screen-overlay-finale.is-running .finale-dust span:nth-child(1),
.screen-overlay-finale.is-settled .finale-dust span:nth-child(1) {
    animation-duration: 42s;
}

.screen-overlay-finale.is-running .finale-dust span:nth-child(2),
.screen-overlay-finale.is-settled .finale-dust span:nth-child(2) {
    animation-duration: 61s;
    animation-direction: reverse;
}

.screen-overlay-finale.is-running .finale-dust span:nth-child(3),
.screen-overlay-finale.is-settled .finale-dust span:nth-child(3) {
    animation-duration: 88s;
}

/* --- Vilolage --- */

.screen-overlay-finale.is-settled .finale-room { opacity: 1; }
.screen-overlay-finale.is-settled .finale-floor { opacity: 1; }
.screen-overlay-finale.is-settled .finale-dust { opacity: 0.38; }
.screen-overlay-finale.is-settled .finale-art-shade { opacity: 0; }
.screen-overlay-finale.is-settled .finale-caption { opacity: 1; transform: translate(-50%, 0); }
.screen-overlay-finale.is-settled .finale-stage { transform: none; }
.screen-overlay-finale.is-settled .finale-art-plate { filter: none; }

.screen-overlay-finale.is-settled .finale-drape-left {
    transform: translate3d(-104%, 0, 0) scaleX(0.82) rotate(-1.2deg);
}

.screen-overlay-finale.is-settled .finale-drape-right {
    transform: translate3d(104%, 0, 0) scaleX(0.82) rotate(1.2deg);
}

.screen-overlay-finale.is-settled .finale-drape-rod {
    opacity: 0.22;
}

.screen-overlay-finale.is-settled .finale-beam {
    opacity: 0.42;
    transform: rotate(var(--beam-angle)) scaleX(1) scaleY(1);
    filter: blur(16px) saturate(0.72);
    animation: hilma-reveal-beam-flicker 7200ms ease-in-out infinite;
}

.screen-overlay-finale.is-settled .finale-frame-glow {
    opacity: 0.4;
    animation: hilma-reveal-glow-breath 9400ms ease-in-out infinite;
}

/* --- Direktvisning utan koreografi --- */

.screen-overlay-finale.is-instant .finale-drape {
    display: none;
}

/* ==========================================================================
   INFOBOXAR UNDER SJALVA REVEAL-OGONBLICKET
   ========================================================================== */

#screenOverlay.reveal-running .screen-overlay-panel,
#screenOverlay.reveal-running .screen-overlay-timer,
#screenOverlay.reveal-running .screen-overlay-watermark {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 520ms ease;
}

#screenOverlay .screen-overlay-watermark {
    transition: opacity 900ms ease;
}

/* Vinjetteringen ska inte ata upp tavlan i slutlaget */
body.screen-mode-end #screenOverlay .screen-overlay-vignette {
    opacity: 0.55;
}

/* ==========================================================================
   KEYFRAMES
   ========================================================================== */

@keyframes hilma-reveal-room {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hilma-reveal-floor {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes hilma-reveal-rod {
    0% { opacity: 0; transform: translateY(-16px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes hilma-reveal-rod-out {
    0% { opacity: 1; }
    100% { opacity: 0.22; }
}

@keyframes hilma-reveal-drape-left {
    0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    13% { transform: translate3d(0.6%, 1.25%, 0) scaleX(1.012) scaleY(1.025) rotate(0.16deg); }
    25% { transform: translate3d(-2.8%, 0.25%, 0) scaleX(0.994) scaleY(1.008) rotate(-0.35deg); }
    39% { transform: translate3d(-14%, 0.4%, 0) scaleX(0.972) scaleY(0.995) rotate(-0.7deg); }
    58% { transform: translate3d(-47%, -0.2%, 0) scaleX(0.925) scaleY(1.01) rotate(-1.15deg); }
    76% { transform: translate3d(-80%, 0.1%, 0) scaleX(0.86) scaleY(0.995) rotate(-1.45deg); }
    100% { transform: translate3d(-104%, 0, 0) scaleX(0.82) rotate(-1.2deg); }
}

@keyframes hilma-reveal-drape-right {
    0% { transform: translate3d(0, 0, 0) scale(1) rotate(0deg); }
    13% { transform: translate3d(-0.5%, 1%, 0) scaleX(1.009) scaleY(1.021) rotate(-0.12deg); }
    25% { transform: translate3d(2.2%, 0.42%, 0) scaleX(0.997) scaleY(1.007) rotate(0.28deg); }
    39% { transform: translate3d(12%, -0.15%, 0) scaleX(0.974) scaleY(1.005) rotate(0.58deg); }
    58% { transform: translate3d(44%, 0.28%, 0) scaleX(0.93) scaleY(0.992) rotate(1.02deg); }
    76% { transform: translate3d(78%, 0, 0) scaleX(0.87) scaleY(1.006) rotate(1.3deg); }
    100% { transform: translate3d(104%, 0, 0) scaleX(0.82) rotate(1.2deg); }
}

@keyframes hilma-reveal-velvet-left {
    0% { opacity: 0.28; transform: translateX(0) skewX(0deg) scaleX(1); }
    24% { opacity: 0.92; transform: translateX(4%) skewX(-2deg) scaleX(1.07); }
    52% { opacity: 0.64; transform: translateX(-10%) skewX(3deg) scaleX(0.94); }
    78% { opacity: 0.38; transform: translateX(-23%) skewX(-1deg) scaleX(1.03); }
    100% { opacity: 0.12; transform: translateX(-32%) skewX(0deg) scaleX(1); }
}

@keyframes hilma-reveal-velvet-right {
    0% { opacity: 0.26; transform: translateX(0) skewX(0deg) scaleX(1); }
    22% { opacity: 0.84; transform: translateX(-5%) skewX(2deg) scaleX(1.05); }
    54% { opacity: 0.6; transform: translateX(9%) skewX(-2.5deg) scaleX(0.95); }
    80% { opacity: 0.34; transform: translateX(20%) skewX(1deg) scaleX(1.025); }
    100% { opacity: 0.1; transform: translateX(30%) skewX(0deg) scaleX(1); }
}

@keyframes hilma-reveal-curtain-light {
    0% { opacity: 0; transform: scaleX(0.42); }
    20% { opacity: 0.56; transform: scaleX(0.68); }
    58% { opacity: 0.7; transform: scaleX(1); }
    100% { opacity: 0; transform: scaleX(1.45); }
}

@keyframes hilma-reveal-shade {
    0% { opacity: 1; }
    66% { opacity: 0.18; }
    100% { opacity: 0; }
}

/* Duken gar fran morker till fullt museiljus */
@keyframes hilma-reveal-plate-light {
    0% { filter: brightness(0.26) saturate(0.4) contrast(0.92); }
    58% { filter: brightness(0.95) saturate(0.95) contrast(1.02); }
    82% { filter: brightness(1.07) saturate(1.04) contrast(1); }
    100% { filter: brightness(1) saturate(1) contrast(1); }
}

@keyframes hilma-reveal-beam {
    0% { opacity: 0; transform: rotate(var(--beam-angle)) scaleX(0.35) scaleY(0.42); }
    16% { opacity: 0.18; transform: rotate(var(--beam-angle)) scaleX(0.5) scaleY(0.58); }
    48% { opacity: 0.42; transform: rotate(var(--beam-angle)) scaleX(0.8) scaleY(0.82); }
    72% { opacity: 0.58; transform: rotate(var(--beam-angle)) scaleX(1.03) scaleY(1); }
    100% { opacity: 0.42; transform: rotate(var(--beam-angle)) scaleX(1) scaleY(1); }
}

@keyframes hilma-reveal-beam-flicker {
    0%, 100% { opacity: 0.42; }
    18% { opacity: 0.46; }
    37% { opacity: 0.38; }
    54% { opacity: 0.45; }
    71% { opacity: 0.4; }
    88% { opacity: 0.44; }
}

@keyframes hilma-reveal-dust-in {
    from { opacity: 0; }
    to { opacity: 0.46; }
}

@keyframes hilma-reveal-dust-drift {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(-6%, -13%, 0); }
}

@keyframes hilma-reveal-frame-glow {
    0% { opacity: 0; }
    58% { opacity: 0.78; }
    100% { opacity: 0.4; }
}

@keyframes hilma-reveal-glow-breath {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.48; }
}

@keyframes hilma-reveal-sheen {
    0% { opacity: 0; transform: translateX(-160%) skewX(-14deg); }
    18% { opacity: 0.95; }
    82% { opacity: 0.9; }
    100% { opacity: 0; transform: translateX(380%) skewX(-14deg); }
}

@keyframes hilma-reveal-stage {
    0% { transform: translateY(16px) scale(0.9); }
    72% { transform: translateY(-2px) scale(1.012); }
    100% { transform: translateY(0) scale(1); }
}

@keyframes hilma-reveal-caption {
    0% { opacity: 0; transform: translate(-50%, 14px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

/* ==========================================================================
   ANPASSNINGAR
   ========================================================================== */

/* Projektorer i 4:3 eller lag hojd - ge tavlan mer bredd */
@media (max-aspect-ratio: 4 / 3) {
    body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art {
        width: min(94vw, 1320px);
    }
}

/* Kort skarm: krymp ram och bildtext sa inget klipps */
@media (max-height: 760px) {
    body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art {
        max-height: 82vh;
    }

    body.screen-mode-end #screenOverlay:not(.has-reveal-video) .screen-finale-art img {
        max-height: calc(82vh - 46px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .screen-overlay-finale.is-running .finale-room,
    .screen-overlay-finale.is-running .finale-floor,
    .screen-overlay-finale.is-running .finale-drape-left,
    .screen-overlay-finale.is-running .finale-drape-right,
    .screen-overlay-finale.is-running .finale-drape::before,
    .screen-overlay-finale.is-running .finale-drape-rod,
    .screen-overlay-finale.is-running .finale-art-plate,
    .screen-overlay-finale.is-running .finale-art-shade,
    .screen-overlay-finale.is-running .finale-beam,
    .screen-overlay-finale.is-running .finale-dust,
    .screen-overlay-finale.is-running .finale-dust span,
    .screen-overlay-finale.is-running .finale-frame-glow,
    .screen-overlay-finale.is-running .finale-frame-sheen::after,
    .screen-overlay-finale.is-running .finale-stage,
    .screen-overlay-finale.is-running .finale-caption,
    .screen-overlay-finale.is-settled .finale-beam,
    .screen-overlay-finale.is-settled .finale-frame-glow,
    .screen-overlay-finale.is-settled .finale-dust span {
        animation: none !important;
    }

    .screen-overlay-finale.is-running .finale-room,
    .screen-overlay-finale.is-running .finale-floor { opacity: 1; }
    .screen-overlay-finale.is-running .finale-art-shade { opacity: 0; }
    .screen-overlay-finale.is-running .finale-art-plate { filter: none; }
    .screen-overlay-finale.is-running .finale-beam { opacity: 0.42; transform: rotate(var(--beam-angle)) scaleX(1) scaleY(1); }
    .screen-overlay-finale.is-running .finale-frame-glow { opacity: 0.52; }
    .screen-overlay-finale.is-running .finale-caption { opacity: 1; transform: translate(-50%, 0); }
    .screen-overlay-finale.is-running .finale-stage { transform: none; }
    .screen-overlay-finale.is-running .finale-drape { display: none; }
}