/* [linnuriigi_plakatid] — poster scenes between the Kava and the bird cast.

   Two stagings:
   - .lr-poster-scene--branch : the event's own poster, hung from a branch on two
     clothespins. Big, no ground.
   - .lr-poster-scene--ground : a guest poster, small, on stakes in the grass.

   Column rhythm follows .lr-kava (880px, 28px side padding). Colours fall back to
   plain values when the landing vars are absent. */

.lr-posters {
    max-width: 880px;
    margin: 0 auto;
    padding: 24px 28px 80px;
}

.lr-poster-scene {
    --lr-poster-tilt: 0deg;
    position: relative;
}

.lr-poster-scene + .lr-poster-scene {
    margin-top: 56px;
}

/* ------------------------------------------------------- shared: the sign --- */

.lr-poster {
    position: relative;
    z-index: 2;
    margin: 0;
}

.lr-poster-sign {
    position: relative;
    margin: 0 auto;
    transform: rotate(var(--lr-poster-tilt));
}

.lr-poster-zoom,
.lr-poster-link {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    border-radius: 14px;
    cursor: pointer;
    transition: transform .22s ease;
}

.lr-poster-zoom:hover,
.lr-poster-zoom:focus-visible,
.lr-poster-link:hover,
.lr-poster-link:focus-visible {
    transform: translateY(-4px);
}

.lr-poster-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 14px;
    /* A hint of a board edge so it reads as a printed sheet, not a background. */
    box-shadow:
        0 0 0 6px var(--lr-card, #fffaf0),
        0 0 0 8px rgba(122, 86, 56, .35),
        0 22px 34px -20px rgba(46, 36, 24, .65);
}

.lr-poster-hint {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%) translateY(6px);
    padding: 7px 16px;
    border-radius: 999px;
    background: rgba(46, 36, 24, .82);
    color: #f4e7cd;
    font-size: 13px;
    white-space: nowrap;
    opacity: 0;
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

@media (hover: hover) {
    .lr-poster-zoom:hover .lr-poster-hint,
    .lr-poster-zoom:focus-visible .lr-poster-hint {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.lr-poster-caption {
    margin: 18px 2px 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--lr-ink-soft, #5a4a32);
    text-align: center;
}

/* ================================ branch scene ============================= */

.lr-poster-scene--branch {
    --lr-branch-h: 110px;
    --lr-branch-top: 56px;
    padding-top: 150px;
}

/* Full bleed: the branch runs the whole window, not just the 880px column.
   --lr-sbw is the scrollbar width, set once by frontend.js, so 100vw does not
   push a horizontal scrollbar on desktop. The art is a seamless tile, so it
   repeats instead of stretching on wide screens. */
.lr-poster-scene--branch .lr-poster-branch {
    position: absolute;
    top: var(--lr-branch-top);
    left: 50%;
    width: calc(100vw - var(--lr-sbw, 0px));
    transform: translateX(-50%);
    height: var(--lr-branch-h);
    z-index: 3;
    pointer-events: none;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: center top;
    filter: drop-shadow(0 10px 14px rgba(46, 36, 24, .14));
}

/* Perched on the limb, big enough to read as a character rather than a sticker. */
/* Anchored to the middle of the window, not to a percentage of the full-bleed
   branch, so the bird stays over the poster column on any screen width. */
.lr-poster-bird {
    position: absolute;
    top: -51px;
    left: calc(50% + 110px);
    width: 118px;
    height: auto;
    filter: drop-shadow(0 8px 12px rgba(46, 36, 24, .22));
    animation: lr-poster-bob 5.5s ease-in-out infinite;
}

@keyframes lr-poster-bob {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 -5px; }
}

.lr-poster-scene--branch .lr-poster-sign {
    width: 84%;
    transform-origin: 50% 0;
}

/* The pegs hang off the limb, not off the poster: the sign is tilted but the
   branch is not, so pegs riding along with the sign would lift off at one end.
   Anchored to the branch they stay upright and both keep hold of the sheet. */
.lr-poster-peg {
    position: absolute;
    top: calc(var(--lr-branch-top) + var(--lr-branch-h) * 0.43 - 13px);
    z-index: 4;
    width: 42px;
    height: 78px;
    pointer-events: none;
}

.lr-poster-peg--a { left: 20%; transform: rotate(-4deg); }
.lr-poster-peg--b { right: 20%; transform: rotate(5deg); }

/* ================================ ground scene ============================= */

.lr-poster-scene--ground {
    --lr-ground-h: 44px;
    padding-bottom: var(--lr-ground-h);
}

.lr-poster-scene--ground .lr-poster-sign {
    width: 46%;
    max-width: 300px;
    transform-origin: 50% 100%;
}

.lr-poster-scene--ground.lr-poster-scene--left .lr-poster-sign { margin-left: 8%; }
.lr-poster-scene--ground.lr-poster-scene--right .lr-poster-sign { margin-right: 8%; }

/* Keep the caption in the sign's own column so it never runs through the bird. */
.lr-poster-scene--ground .lr-poster-caption {
    width: 46%;
    max-width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.lr-poster-scene--ground.lr-poster-scene--left .lr-poster-caption { margin-left: 8%; }
.lr-poster-scene--ground.lr-poster-scene--right .lr-poster-caption { margin-right: 8%; }

.lr-poster-scene--ground .lr-poster-img {
    border-radius: 10px;
    box-shadow:
        0 0 0 5px var(--lr-card, #fffaf0),
        0 0 0 6px rgba(122, 86, 56, .35),
        0 16px 26px -16px rgba(46, 36, 24, .6);
}

/* The stakes live outside the rotated sign, so both meet the soil line at exactly
   the same height instead of one poking out below the grass. --lr-ground-h * 0.286
   is where muru.svg's soil edge sits inside the strip. */
.lr-poster-stakes {
    position: relative;
    height: 0;
    width: 46%;
    max-width: 300px;
    margin: 0 auto;
}

.lr-poster-scene--left .lr-poster-stakes { margin-left: 8%; }
.lr-poster-scene--right .lr-poster-stakes { margin-right: 8%; }

.lr-poster-stake {
    position: absolute;
    top: -6px;
    width: 14px;
    height: calc(var(--lr-ground-h) * 0.714 + 6px);
    border-radius: 0 0 1px 1px;
    background: linear-gradient(180deg, #a97c4e 0%, #8a5f38 62%, #7a5638 100%);
    box-shadow: inset -2px 0 0 rgba(46, 36, 24, .22);
}

.lr-poster-stake--a { left: 18%; }
.lr-poster-stake--b { right: 18%; }

/* A small bird keeping the guest poster company. Its feet are ~84% down the SVG,
   so bottom:0 lands them just inside the blades instead of hovering above them. */
.lr-poster-groundbird {
    position: absolute;
    bottom: 0;
    width: 64px;
    height: auto;
    z-index: 2;
    filter: drop-shadow(0 6px 9px rgba(46, 36, 24, .2));
}

.lr-poster-scene--left .lr-poster-groundbird { right: 16%; }
.lr-poster-scene--right .lr-poster-groundbird { left: 16%; transform: scaleX(-1); }

.lr-poster-ground {
    position: absolute;
    left: 50%;
    width: calc(100vw - var(--lr-sbw, 0px));
    transform: translateX(-50%);
    bottom: 0;
    height: var(--lr-ground-h);
    z-index: 1;
    background-repeat: repeat-x;
    background-size: auto 100%;
    background-position: left bottom;
}

/* ============================ Fullscreen viewer ============================ */

.lr-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(29, 22, 14, .93);
}

.lr-lightbox[hidden] { display: none; }

body.lr-lightbox-open { overflow: hidden; }

.lr-lightbox-stage {
    margin: 0;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lr-lightbox-img {
    max-width: 100%;
    max-height: calc(100vh - 96px);
    width: auto;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
}

.lr-lightbox-close,
.lr-lightbox-nav {
    flex: none;
    border: 0;
    background: rgba(244, 231, 205, .14);
    color: #f4e7cd;
    cursor: pointer;
    border-radius: 999px;
    line-height: 1;
    transition: background .18s ease;
}

.lr-lightbox-close:hover,
.lr-lightbox-nav:hover,
.lr-lightbox-close:focus-visible,
.lr-lightbox-nav:focus-visible {
    background: rgba(244, 231, 205, .28);
}

.lr-lightbox-close {
    position: absolute;
    top: 16px;
    right: 18px;
    width: 46px;
    height: 46px;
    font-size: 30px;
}

/* Floated over the backdrop, so the poster itself gets the full width. */
.lr-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    font-size: 34px;
}

.lr-lightbox-prev { left: 12px; }
.lr-lightbox-next { right: 12px; }
.lr-lightbox-nav[hidden] { display: none; }

.lr-lightbox-counter {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(244, 231, 205, .75);
    font-size: 14px;
    letter-spacing: .06em;
}

/* ============================ Responsive ============================ */

@media (max-width: 720px) {
    .lr-posters { padding: 16px 20px 56px; }

    .lr-poster-scene + .lr-poster-scene { margin-top: 40px; }

    .lr-poster-scene--branch {
        --lr-branch-h: 78px;
        --lr-branch-top: 40px;
        padding-top: 108px;
    }

    .lr-poster-bird { width: 84px; top: -36px; left: calc(50% + 30px); }
    .lr-poster-scene--branch .lr-poster-sign { width: 92%; }

    .lr-poster-peg { width: 34px; height: 62px; }
    .lr-poster-peg--a { left: 14%; }
    .lr-poster-peg--b { right: 14%; }

    .lr-poster-scene--ground {
        --lr-ground-h: 34px;
    }
    .lr-poster-scene--ground .lr-poster-sign { width: 58%; }
    .lr-poster-stakes { width: 58%; }
    .lr-poster-scene--ground .lr-poster-caption { width: 58%; }
    .lr-poster-groundbird { width: 50px; }

    .lr-lightbox { padding: 12px; }
    .lr-lightbox-nav { width: 40px; height: 40px; font-size: 26px; }
    .lr-lightbox-prev { left: 4px; }
    .lr-lightbox-next { right: 4px; }
    .lr-lightbox-img { max-height: calc(100vh - 120px); }
}

@media (prefers-reduced-motion: reduce) {
    .lr-poster-bird { animation: none; }
    .lr-poster-zoom,
    .lr-poster-link,
    .lr-poster-hint { transition: none; }
    .lr-poster-zoom:hover,
    .lr-poster-zoom:focus-visible,
    .lr-poster-link:hover,
    .lr-poster-link:focus-visible { transform: none; }
}