/* ==========================================================================
   Seasonal overlay - public kiosk board (Christmas, National Day, Easter)
   Fixed layer above the page, never interactive, never part of a screenshot.
   ========================================================================== */

/* 1. Tokens */
:root {
    --seasonal-light-red:    #ff4d4d;
    --seasonal-light-gold:   #ffd24d;
    --seasonal-light-green:  #4dff88;
    --seasonal-light-blue:   #4da6ff;
    --seasonal-wire:         rgba(40, 40, 40, 0.55);

    /* Romanian tricolour */
    --seasonal-flag-blue:    #002b7f;
    --seasonal-flag-yellow:  #fcd116;
    --seasonal-flag-red:     #ce1126;

    /* Easter pastels */
    --seasonal-egg-pink:     #ff9ec4;
    --seasonal-egg-yellow:   #ffe066;
    --seasonal-egg-mint:     #8de8b4;
    --seasonal-egg-sky:      #8ccbff;
    --seasonal-egg-lilac:    #c9a8ff;
}

/* 2. Layer */
.SeasonalOverlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    overflow: hidden;
    pointer-events: none;
}

/* 3. Falling pieces: every theme shares the fall + sway/turn animation, only the look differs */
.SeasonalPiece {
    position: absolute;
    top: -12px;
    left: var(--piece-left);
    width: var(--piece-size);
    height: var(--piece-size);
    opacity: var(--piece-opacity);
    animation:
        SeasonalFall var(--piece-duration) linear var(--piece-delay) infinite,
        SeasonalSway var(--piece-sway-duration) ease-in-out var(--piece-delay) infinite alternate;
    will-change: transform;
}

@keyframes SeasonalFall {
    from { top: -12px; }
    to   { top: 105vh; }
}

/* The sway keyframes also turn the piece, so one transform drives both */
@keyframes SeasonalSway {
    from { transform: translateX(calc(var(--piece-sway) * -1)) rotate(0deg); }
    to   { transform: translateX(var(--piece-sway)) rotate(var(--piece-spin)); }
}

/* 3.1 Snowflake (Christmas): six arms, a pale blue underlay keeps the white visible on light backgrounds too */
.SeasonalPiece--snow {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke-linecap='round'%3E%3Cg stroke='%2394c4ff' stroke-width='3.6'%3E%3Cpath d='M12 2V22M12 5.5L9 3.5M12 5.5L15 3.5M12 18.5L9 20.5M12 18.5L15 20.5'/%3E%3Cpath transform='rotate(60 12 12)' d='M12 2V22M12 5.5L9 3.5M12 5.5L15 3.5M12 18.5L9 20.5M12 18.5L15 20.5'/%3E%3Cpath transform='rotate(120 12 12)' d='M12 2V22M12 5.5L9 3.5M12 5.5L15 3.5M12 18.5L9 20.5M12 18.5L15 20.5'/%3E%3C/g%3E%3Cg stroke='%23ffffff' stroke-width='1.8'%3E%3Cpath d='M12 2V22M12 5.5L9 3.5M12 5.5L15 3.5M12 18.5L9 20.5M12 18.5L15 20.5'/%3E%3Cpath transform='rotate(60 12 12)' d='M12 2V22M12 5.5L9 3.5M12 5.5L15 3.5M12 18.5L9 20.5M12 18.5L15 20.5'/%3E%3Cpath transform='rotate(120 12 12)' d='M12 2V22M12 5.5L9 3.5M12 5.5L15 3.5M12 18.5L9 20.5M12 18.5L15 20.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
}

/* 3.2 Confetti strip (National Day): tricolour paper strips */
.SeasonalPiece--confetti {
    height: calc(var(--piece-size) * 0.5);
    background: var(--piece-color);
    border-radius: 1px;
}

/* 4. Christmas light string */
.SeasonalLights {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    height: 22px;
}

.SeasonalLights::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--seasonal-wire);
}

.SeasonalBulb {
    position: relative;
    top: 4px;
    width: 9px;
    height: 13px;
    border-radius: 50% 50% 55% 55%;
    background: var(--bulb-color);
    box-shadow: 0 0 8px 2px var(--bulb-color);
    animation: SeasonalTwinkle var(--bulb-duration) ease-in-out var(--bulb-delay) infinite alternate;
}

@keyframes SeasonalTwinkle {
    from { opacity: 0.35; }
    to   { opacity: 1; }
}

/* 5. Bunting (National Day) and egg garland (Easter): a string along the top edge with hanging items */
.SeasonalBunting,
.SeasonalGarland {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-around;
    height: 30px;
}

/* The bunting is smaller than the garland: a shorter string with small pennants */
.SeasonalBunting { height: 17px; }

.SeasonalBunting::before,
.SeasonalGarland::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--seasonal-wire);
}

.SeasonalFlag {
    position: relative;
    top: 2px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 13px solid var(--flag-color);
    transform-origin: 50% 0;
    animation: SeasonalFlutter var(--flag-duration) ease-in-out var(--flag-delay) infinite alternate;
}

@keyframes SeasonalFlutter {
    from { transform: rotate(-4deg); }
    to   { transform: rotate(4deg); }
}

.SeasonalGarlandEgg {
    position: relative;
    top: 3px;
    width: 14px;
    height: 19px;
    background:
        linear-gradient(to bottom, transparent 38%, rgba(255, 255, 255, 0.85) 38%, rgba(255, 255, 255, 0.85) 54%, transparent 54%),
        var(--egg-color);
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.12);
    transform-origin: 50% 0;
    animation: SeasonalFlutter var(--egg-duration) ease-in-out var(--egg-delay) infinite alternate;
}

/* 6. Easter meadow along the bottom edge: scalloped grass, fixed eggs and flowers, a walking bunny */
.SeasonalMeadow {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 26px;
    background:
        radial-gradient(circle at 50% 100%, #54b95f 0 8px, transparent 9px) 0 100% / 22px 16px repeat-x,
        linear-gradient(to top, #3f9b4a 0 6px, transparent 6px);
}

.SeasonalMeadowEgg {
    position: absolute;
    bottom: 5px;
    width: 14px;
    height: 19px;
    background:
        linear-gradient(to bottom, transparent 38%, rgba(255, 255, 255, 0.85) 38%, rgba(255, 255, 255, 0.85) 54%, transparent 54%),
        var(--egg-color);
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    box-shadow: inset -2px -2px 0 rgba(0, 0, 0, 0.12);
}

.SeasonalFlower {
    position: absolute;
    bottom: 7px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: radial-gradient(circle, #ffe066 0 2px, var(--flower-color) 2.5px);
}

/* Bunny: the outer span walks across the screen, the middle one flips it to face left, the inner one hops */
.SeasonalBunny {
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 44px;
    height: 37px;
    will-change: transform;
}

.SeasonalBunny--right { animation: SeasonalBunnyWalkRight 180s linear infinite; }
.SeasonalBunny--left  { animation: SeasonalBunnyWalkLeft 180s linear infinite; }
.SeasonalBunny--left .SeasonalBunnyFlip { transform: scaleX(-1); }

.SeasonalBunnyFlip,
.SeasonalBunnyHop {
    display: block;
    width: 100%;
    height: 100%;
}

.SeasonalBunnyHop {
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 40'%3E%3Cg fill='%23ffffff' stroke='%23d9dee5' stroke-width='1'%3E%3Ccircle cx='7' cy='27' r='4'/%3E%3Cellipse cx='22' cy='27' rx='15' ry='9'/%3E%3Cellipse cx='12' cy='35' rx='7' ry='4'/%3E%3Cellipse cx='31' cy='35' rx='5' ry='3.5'/%3E%3Ccircle cx='37' cy='20' r='8'/%3E%3Cellipse cx='33' cy='8' rx='3.2' ry='9' transform='rotate(-10 33 8)'/%3E%3Cellipse cx='40' cy='8' rx='3.2' ry='9' transform='rotate(12 40 8)'/%3E%3C/g%3E%3Cellipse cx='33' cy='9' rx='1.5' ry='6' fill='%23ffb3cf' transform='rotate(-10 33 9)'/%3E%3Cellipse cx='40' cy='9' rx='1.5' ry='6' fill='%23ffb3cf' transform='rotate(12 40 9)'/%3E%3Ccircle cx='40' cy='19' r='1.4' fill='%23333333'/%3E%3Ccircle cx='45' cy='21.5' r='1.6' fill='%23ff8fb5'/%3E%3C/svg%3E") center / contain no-repeat;
    animation: SeasonalBunnyHop 0.7s ease-in-out infinite;
}

@keyframes SeasonalBunnyHop {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-14px) rotate(-6deg); }
}

/* 180s cycle: 60s across, 30s resting off-screen, then the other direction */
@keyframes SeasonalBunnyWalkRight {
    0%      { transform: translateX(-80px); }
    33.33%  { transform: translateX(100vw); }
    100%    { transform: translateX(100vw); }
}

@keyframes SeasonalBunnyWalkLeft {
    0%      { transform: translateX(100vw); }
    50%     { transform: translateX(100vw); }
    83.33%  { transform: translateX(-80px); }
    100%    { transform: translateX(-80px); }
}

/* 6.1 Compact meadow (Bloc Operator): everything fits the 20px margin the board leaves under the room cards, so no space is lost and no text is covered */
.SeasonalMeadow--compact {
    height: 20px;
    background:
        radial-gradient(circle at 50% 100%, #54b95f 0 4px, transparent 5px) 0 100% / 12px 8px repeat-x,
        linear-gradient(to top, #3f9b4a 0 3px, transparent 3px);
}

.SeasonalMeadow--compact .SeasonalMeadowEgg {
    bottom: 2px;
    width: 8px;
    height: 11px;
}

.SeasonalMeadow--compact .SeasonalFlower {
    bottom: 3px;
    width: 7px;
    height: 7px;
}

.SeasonalMeadow--compact .SeasonalBunny {
    bottom: 2px;
    width: 19px;
    height: 16px;
}

.SeasonalMeadow--compact .SeasonalBunnyHop {
    animation-name: SeasonalBunnyHopSmall;
}

@keyframes SeasonalBunnyHopSmall {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* 7. Reduced motion: keep the top decoration static, no falling pieces */
@media (prefers-reduced-motion: reduce) {
    .SeasonalPiece { display: none; }
    .SeasonalBulb,
    .SeasonalFlag,
    .SeasonalGarlandEgg,
    .SeasonalBunnyHop   { animation: none; }

    /* The bunny sits still at the left of the meadow */
    .SeasonalBunny--right { animation: none; transform: translateX(24px); }
    .SeasonalBunny--left  { display: none; }
}