/* A neve pertence ao documento e sai da tela junto com o conteúdo. */
body { position: relative; }
.page-snow {
    position: absolute;
    inset: 0;
    z-index: 10;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
    contain: strict;
}
.page-snow .snowflake {
    color: #fff;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(100, 126, 136, .55), 0 0 5px rgba(255, 255, 255, .65);
    animation-name: page-snowfall;
}
.page-snow.is-paused .snowflake { animation-play-state: paused; }
@keyframes page-snowfall {
    0% { opacity: 0; transform: translate3d(0, -35vh, 0) rotate(0deg); }
    15%, 80% { opacity: var(--snow-opacity, .4); }
    100% { opacity: 0; transform: translate3d(var(--snow-drift, 20px), 35vh, 0) rotate(180deg); }
}

/* Pisca-pisca com fio fino e lâmpadas pequenas nas transições. */
.christmas-trim {
    position: relative;
    height: 72px;
    overflow: hidden;
    pointer-events: none;
    user-select: none;
}
.showcase > .christmas-trim--backdrop { position: absolute; top: 22px; inset-inline: 0; height: 80px; z-index: 0; }
.showcase > .container { position: relative; z-index: 1; }
.christmas-lights {
    position: absolute;
    inset: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    height: 56px;
}
.christmas-wire { position: absolute; inset: 0; width: 100%; height: 48px; overflow: visible; }
.christmas-wire path { fill: none; stroke: #405647; stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round; opacity: .8; vector-effect: non-scaling-stroke; }
.christmas-bulb {
    --bulb-color: #ffd079;
    --bulb-rgb: 255, 208, 121;
    position: relative;
    width: 9px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 22px;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 3px 3px 55% 55%;
    background: radial-gradient(ellipse at 32% 22%, #fffdf2 0 8%, rgba(255, 255, 255, .35) 24%, transparent 48%), linear-gradient(100deg, var(--bulb-color), rgba(var(--bulb-rgb), .85));
    box-shadow: inset -1px -2px 2px rgba(105, 66, 24, .18), 0 0 6px 1px rgba(var(--bulb-rgb), .8), 0 0 17px 4px rgba(var(--bulb-rgb), .24);
    transform: rotate(8deg);
    animation: christmas-bulb-glow 4.8s ease-in-out infinite;
}
.christmas-bulb::before {
    content: "";
    position: absolute;
    bottom: calc(100% - 1px);
    left: calc(50% - 2px);
    width: 4px;
    height: 7px;
    border-radius: 1px;
    background: linear-gradient(90deg, #304938, #64795b, #304938);
}
.christmas-bulb::after {
    content: "";
    position: absolute;
    inset: -13px -15px -16px;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(var(--bulb-rgb), .2), rgba(var(--bulb-rgb), .06) 42%, transparent 70%);
    pointer-events: none;
}
.christmas-bulb:nth-of-type(6n + 2), .christmas-bulb:nth-of-type(6n + 5) { margin-top: 31px; }
.christmas-bulb:nth-of-type(6n + 3), .christmas-bulb:nth-of-type(6n + 4) { margin-top: 36px; }
.christmas-bulb:nth-of-type(even) { transform: rotate(-8deg); animation-delay: -2.4s; }
.christmas-bulb:nth-of-type(4n + 1) { --bulb-color: #f28a77; --bulb-rgb: 242, 138, 119; animation-delay: -1.2s; }
.christmas-bulb:nth-of-type(4n + 3) { --bulb-color: #a5d494; --bulb-rgb: 165, 212, 148; animation-delay: -3.6s; }
@keyframes christmas-bulb-glow {
    0%, 100% { opacity: .68; }
    35%, 55% { opacity: 1; }
    75% { opacity: .85; }
}
@keyframes christmas-glow {
    from { opacity: .55; }
    to { opacity: 1; }
}
.site-footer .christmas-trim { height: 72px; }
html[data-theme="dark"] .christmas-wire path { stroke: #81917c; }

/* Pequenos enfeites nas margens acompanham as seções mais compridas. */
:is(.showcase, .facts-section, .content-strip, .evento-content, .programacao-section, .patrocinadores-section, .galeria-section) { position: relative; }
:is(.showcase, .facts-section, .content-strip, .evento-content, .programacao-section, .patrocinadores-section, .galeria-section)::before,
:is(.showcase, .facts-section, .content-strip, .evento-content, .programacao-section, .patrocinadores-section, .galeria-section)::after {
    content: "";
    position: absolute;
    inset: 70px auto 0 0;
    width: clamp(28px, 4vw, 80px);
    background: url("../img/christmas-sprinkles.svg") center top / 100% auto repeat-y;
    pointer-events: none;
    opacity: .8;
}
:is(.showcase, .facts-section, .content-strip, .evento-content, .programacao-section, .patrocinadores-section, .galeria-section)::after {
    inset: 140px 0 0 auto;
    transform: scaleX(-1);
}
:is(.facts-section, .content-strip, .evento-content, .programacao-section, .patrocinadores-section, .galeria-section) > .container { position: relative; z-index: 1; }
.christmas-interlude {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 82px;
    overflow: hidden;
    pointer-events: none;
    background: radial-gradient(ellipse, rgba(255, 211, 130, .1), transparent 66%);
}
.christmas-interlude::before, .christmas-interlude::after { content: ""; height: 1px; width: min(22vw, 240px); background: linear-gradient(90deg, transparent, #d5ac66); }
.christmas-interlude::after { transform: scaleX(-1); }
.christmas-interlude > span { width: 15px; height: 15px; background: #ffe2a1; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%); animation: christmas-glow 3.8s ease-in-out infinite alternate; }
.christmas-interlude > span:nth-child(2) { width: 28px; height: 28px; animation-delay: -1.9s; }
.christmas-interlude > span:nth-child(3) { animation-delay: -2.8s; }

@media (max-width: 640px) {
    .page-snow .snowflake { text-shadow: none; }
    .christmas-trim, .site-footer .christmas-trim { height: 60px; }
    .christmas-bulb { animation: none; box-shadow: 0 0 6px 1px rgba(var(--bulb-rgb), .75); height: 13px; width: 8px; }
    .christmas-bulb::after { display: none; }
    .christmas-bulb:nth-of-type(even) { display: none; }
    .christmas-bulb:nth-of-type(odd) { margin-top: 27px; }
    .christmas-bulb:nth-of-type(6n + 3) { margin-top: 37px; }
    .christmas-interlude { height: 64px; }
    .christmas-interlude > span { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .page-snow { display: none; }
    .christmas-bulb, .christmas-interlude > span { animation: none; }
}
@media print {
    .page-snow, .christmas-trim, .christmas-interlude { display: none; }
}
