/* "Галерия", "Снимки", "Видеа", an album and a video (templates/gallery.php, photos.php, videos.php,
   single-mch_album.php, single-mch_video.php, inc/gallery.php, assets/js/gallery.js).
   The albums are prints pinned with clothes pegs to a line: the line is strung when a row is seen, the prints drop
   onto it and swing, the pointer and the wind set them swinging again, the site's bird hops on the line. The videos are
   clapperboards that clap. An album is a slide show: a projector throws the photos onto a screen that rolls down, the
   slides wait in a box under it. A video plays in a little cinema whose curtains open. */

@property --u { syntax: '<number>'; inherits: true; initial-value: 1; }

.gl { position: relative; padding: 40px 0 110px; overflow-x: clip; }
.gl-wrap { padding: 0 30px; }
/* Cabin Sketch has no Cyrillic letters: the Bulgarian pages use Neucha, like the rest of the site */
.bg .gl .gl-head, .bg .gl .gp-title, .bg .gl .gl-print__title, .bg .gl .gl-slate__title { font-family: 'Neucha', Arial, sans-serif; }

.gl-part + .gl-part { margin-top: 100px; }
.gp + .gl-part, .gv + .gl-part { margin-top: 30px; }
.gp-title + .gl-part { margin-top: 60px; }
.gl .gl-head { display: flex; justify-content: center; margin: 0 0 26px; font: 400 46px/1.1 'Cabin Sketch', 'Neucha', Arial, sans-serif; color: #3c4741; }
.gl-head a, .gl-head > span { display: inline-flex; align-items: center; gap: 14px; color: inherit; text-decoration: none; transition: color .3s; }
.gl-head a:hover, .gl-head a:focus-visible { color: #ff5736; }
.gl-head__icon { flex: none; width: 50px; height: 40px; background: no-repeat center / contain; transition: rotate .4s cubic-bezier(.34, 1.6, .64, 1); }
.gl-head a:hover .gl-head__icon { rotate: -10deg; }
.gl-head--photos .gl-head__icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48' fill='none' stroke='%23ff5736' stroke-width='4' stroke-linejoin='round'%3E%3Cpath d='M6 14h12l5-7h18l5 7h12v28H6z'/%3E%3Ccircle cx='32' cy='27' r='10'/%3E%3Cpath d='M48 20h4'/%3E%3C/svg%3E"); }
.gl-head--videos .gl-head__icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48' fill='none' stroke='%2352aae8' stroke-width='4' stroke-linejoin='round'%3E%3Cpath d='M7 21h50v23H7z'/%3E%3Cpath d='m6 19-2-11 50-6 2 11z'/%3E%3Cpath d='m17 6 6 10m8-12 6 10m8-11 6 10'/%3E%3C/svg%3E"); }
.gl-all { margin: 56px 0 0; text-align: center; }
.gl-all + .gl-part { margin-top: 100px; }

/* ---------- The clothes line ---------- */
.gl-line { position: relative; padding: 0 34px; }
.gl-ropes { position: absolute; left: 0; top: 0; z-index: 0; overflow: visible; pointer-events: none; }
.gl-rope { fill: none; stroke: #b48a57; stroke-width: 2.6; stroke-linecap: round; }
/* the twist of the cord, once it is strung */
.gl-rope--twist { stroke: #e7d1a6; stroke-width: 1.2; stroke-dasharray: 2.5 4.5; opacity: 0; transition: opacity .5s .8s; }
.gl-rope--twist.is-drawn { opacity: 1; }
.gl-hook { fill: #fff; stroke: #8a7766; stroke-width: 2.5; }
.gl-js .gl-rope:not(.gl-rope--twist) { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.gl-js .gl-rope.is-drawn:not(.gl-rope--twist) { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.45, 0, .3, 1); }
.gl-js .gl-hook { opacity: 0; transition: opacity .3s; }
.gl-js .gl-hook.is-drawn { opacity: 1; }

.gl-prints { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 64px 40px; margin: 0; padding: 0; list-style: none; }
.gl-print { position: relative; margin: 0; padding: 46px 0 0; }
.gl-print::before { display: none; }
.gl-print__card { display: block; color: #3c4741; text-decoration: none; -webkit-tap-highlight-color: transparent; }
/* what swings: it hangs from the line (14px above the print), the peg and the print together */
.gl-print__hang { position: relative; display: block; rotate: var(--r, 0deg); transform-origin: 50% -14px; }
.gl-print__paper { position: relative; display: block; padding: 10px 10px 14px; background: #fff; box-shadow: 0 18px 24px -16px rgba(60, 40, 20, .55), 0 1px 3px rgba(60, 40, 20, .1); transform-origin: 50% 0; transition: scale .4s cubic-bezier(.34, 1.5, .64, 1), box-shadow .4s; }
.gl-print__card:hover .gl-print__paper, .gl-print__card:focus-visible .gl-print__paper { scale: 1.04; box-shadow: 0 28px 34px -18px rgba(60, 40, 20, .6), 0 1px 3px rgba(60, 40, 20, .1); }
.gl-print__pic { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: #eef3f6; }
.gl-print__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .3, 1); }
.gl-print__card:hover .gl-print__pic img { transform: scale(1.07); }
/* an album without pictures yet: a blank print in its peg's colour with a little camera */
.gl-print__pic--none { display: grid; place-items: center; background: color-mix(in srgb, var(--c) 14%, #fff); }
.gl-print__camera { width: 42%; height: auto; fill: none; stroke: color-mix(in srgb, var(--c) 70%, #fff); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; transition: rotate .5s cubic-bezier(.34, 1.6, .64, 1); }
.gl-print__card:hover .gl-print__camera { rotate: -8deg; }
.gl-print__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; min-height: 2.5em; margin: 12px 4px 0; font: 400 21px/1.25 'Cabin Sketch', 'Neucha', Arial, sans-serif; text-align: center; color: #3c4741; transition: color .3s; }
.gl-print__card:hover .gl-print__title { color: #ff5736; }

/* the clothes peg: two wooden halves in the site's colours and the spring */
.gl-peg { position: absolute; z-index: 3; left: 50%; top: -30px; width: 16px; height: 46px; margin-left: -8px; }
.gl-peg i { position: absolute; top: 0; width: 8px; height: 100%; border-radius: 3px 3px 4px 4px; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 82%, #000), var(--c) 45%, color-mix(in srgb, var(--c) 70%, #fff)); box-shadow: 0 2px 3px rgba(0, 0, 0, .18); transform-origin: 50% 40%; transition: rotate .25s cubic-bezier(.34, 1.6, .64, 1); }
.gl-peg i:first-child { left: 0; }
.gl-peg i:last-of-type { right: 0; }
.gl-peg b { position: absolute; left: -3px; right: -3px; top: 15px; height: 6px; border-radius: 3px; background: linear-gradient(#c9d1d6, #8b979f); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.gl-print__card:active .gl-peg i:first-child { rotate: 6deg; }
.gl-print__card:active .gl-peg i:last-of-type { rotate: -6deg; }

/* the prints drop onto the line one after another when their row is seen */
.gl-js .gl-print:not(.is-in) .gl-print__hang { opacity: 0; translate: 0 -70px; }
.gl-print.is-in .gl-print__hang { animation: gl-drop .55s cubic-bezier(.3, 1.45, .55, 1) var(--d, 0s) backwards; }
@keyframes gl-drop { from { opacity: 0; translate: 0 -70px; } 40% { opacity: 1; } to { opacity: 1; translate: 0 0; } }
/* a click: the peg opens and the print falls off the line */
.gl-print.is-off .gl-peg i:first-child { rotate: -16deg; }
.gl-print.is-off .gl-peg i:last-of-type { rotate: 16deg; }
.gl-print.is-off .gl-print__paper { translate: 0 60vh; rotate: 24deg; opacity: 0; transition: translate .7s cubic-bezier(.55, 0, .9, .45), rotate .7s cubic-bezier(.55, 0, .9, .45), opacity .3s .4s; }

/* without the script: a plain line through the pegs of each row */
html:not(.gl-js) .gl-line:not(.is-strung) .gl-print::after { content: ''; position: absolute; z-index: -1; left: -20px; right: -20px; top: 32px; height: 2px; background: #b48a57; }

/* ---------- The pulley line of "Галерия" (2026-11-11) ----------
   All the albums on one line over two wooden pulleys; the window between them shows four (three, two). More albums:
   the pulleys turn the line by a window's worth, or a hand pulls it along (gallery.js), the prints ride and swing. */
.gl-line--reel { --hub: 42px; padding: 0 84px; touch-action: pan-y; }
/* the window: the prints are cut off at the pulleys only (their pegs above and a falling print below stay whole) */
.gl-reel { clip-path: inset(-160px 0 -100vh 0); }
.gl-line--reel .gl-prints { display: flex; gap: 40px; }
.gl-line--reel .gl-print { flex: 0 0 calc((100% - 120px) / 4); min-width: 0; }
.gl-line--reel .gl-print__card, .gl-line--reel img { -webkit-user-drag: none; user-select: none; }
.gl-line--reel.is-pulling, .gl-line--reel.is-pulling .gl-print__card { cursor: grabbing; }
.gl-line--reel.is-reel .gl-hook { display: none; }
.gl-pulley { position: absolute; z-index: 4; left: 0; top: 0; display: none; width: 64px; height: 64px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: scale .35s cubic-bezier(.34, 1.6, .64, 1), opacity .3s; }
.gl-line--reel.is-reel .gl-pulley { display: block; }
/* a wooden wheel with spokes and a groove for the line; it turns as the line runs (--turn from gallery.js) */
.gl-pulley__wheel { position: absolute; inset: 0; width: 100%; height: 100%; rotate: var(--turn, 0deg); filter: drop-shadow(0 4px 4px rgba(60, 40, 20, .3)); }
.gl-pulley__rim { fill: #c99a62; stroke: #8a6a45; stroke-width: 3; }
.gl-pulley__groove { fill: #e9d3a8; stroke: #a87e4f; stroke-width: 2.5; }
.gl-pulley__spokes { fill: none; stroke: #a87e4f; stroke-width: 3; stroke-linecap: round; }
/* the hub that does not turn: which way it takes the line */
.gl-pulley__arrow { position: absolute; left: 50%; top: 50%; width: 36px; height: 36px; margin: -18px 0 0 -18px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #ff5736; box-shadow: 0 2px 4px rgba(60, 20, 10, .3); fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; transition: background-color .3s; }
/* a pulley that can still turn calls softly, so it is seen that more albums come from there (the client, 2026-11-12) */
.gl-line--reel.is-reel .gl-pulley:not(.is-end) .gl-pulley__arrow { animation: gl-call 2.4s ease-out infinite; }
@keyframes gl-call { 0% { box-shadow: 0 2px 4px rgba(60, 20, 10, .3), 0 0 0 0 rgba(255, 87, 54, .55); } 70%, 100% { box-shadow: 0 2px 4px rgba(60, 20, 10, .3), 0 0 0 14px rgba(255, 87, 54, 0); } }
.gl-pulley:hover { scale: 1.12; }
.gl-pulley:focus-visible { outline: 3px solid #ff5736; outline-offset: 3px; }
/* at an end: the hub turns grey (a click there only makes the line give a little) */
.gl-pulley.is-end { cursor: default; }
.gl-pulley.is-end:hover { scale: 1; }
.gl-pulley.is-end .gl-pulley__arrow { background: #b9ab9c; }

/* the site's bird on the line (the drawing looks left; it only hops and looks around) */
.gl-bird { position: absolute; z-index: 3; left: 0; top: 0; width: 70px; height: 67px; padding: 0; border: 0; background: url('../images/bird-sprite.svg') no-repeat 0 0 / 420px 67px; cursor: pointer; animation: gl-look 6s steps(1, end) infinite; transition: opacity .3s, translate .8s cubic-bezier(.3, 1.4, .5, 1); -webkit-tap-highlight-color: transparent; }
/* it comes down from the upper right (head first: it looks left) */
.gl-js .gl-bird:not(.is-in) { opacity: 0; translate: 70px -90px; }
.gl-bird.is-hop { animation: gl-hop .7s cubic-bezier(.3, 0, .4, 1), gl-look 6s steps(1, end) infinite; }
@keyframes gl-look { 0%, 70% { background-position: 0 0; } 74% { background-position: -70px 0; } 78% { background-position: -140px 0; } 82% { background-position: -210px 0; } 86% { background-position: -140px 0; } 90% { background-position: -70px 0; } 100% { background-position: 0 0; } }
@keyframes gl-hop { 0% { translate: 0 0; scale: 1 1; } 15% { translate: 0 3px; scale: 1.08 .9; } 45% { translate: 0 -38px; scale: .96 1.05; } 75% { translate: 0 0; scale: 1.06 .92; } 100% { translate: 0 0; scale: 1 1; } }

/* ---------- The clapperboards ---------- */
.gl-slates { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 56px 34px; margin: 0; padding: 30px 0 0; list-style: none; }
.gl-slate { margin: 0; padding: 0; }
.gl-slate::before { display: none; }
.gl-slate__card { position: relative; display: block; padding-top: 22px; color: #fff; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: translate .4s cubic-bezier(.34, 1.5, .64, 1); }
.gl-slate__card:hover, .gl-slate__card:focus-visible { translate: 0 -6px; }
/* the striped stick, hinged at the left */
.gl-slate__stick { position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 24px; border: 3px solid #262b2f; border-radius: 4px 4px 2px 2px; background: repeating-linear-gradient(-60deg, var(--c) 0 15px, #fff 15px 30px); transform-origin: 8px 100%; transition: rotate .35s cubic-bezier(.34, 1.6, .64, 1); }
.gl-slate__stick::before { content: ''; position: absolute; left: -2px; bottom: -6px; width: 12px; height: 12px; border-radius: 50%; background: #c9d1d6; box-shadow: 0 0 0 2px #262b2f; }
.gl-slate__card:hover .gl-slate__stick, .gl-slate__card:focus-visible .gl-slate__stick { rotate: -18deg; }
.gl-slate__board { position: relative; display: block; padding: 18px 0 16px; background: #2f3539; border: 3px solid #262b2f; border-top: 0; border-radius: 0 0 8px 8px; box-shadow: 0 24px 30px -20px rgba(30, 30, 30, .65); }
.gl-slate__board::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 18px; background: repeating-linear-gradient(60deg, var(--c) 0 15px, #fff 15px 30px); box-shadow: inset 0 -3px 0 #262b2f; }
.gl-slate__pic { position: relative; display: block; margin: 12px 12px 0; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 3px; background: #1d2124; box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
.gl-slate__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(.2, .7, .3, 1), filter .4s; }
.gl-slate__card:hover .gl-slate__pic img { transform: scale(1.06); filter: brightness(1.08); }
.gl-slate__play { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 6px 14px rgba(0, 0, 0, .35); transition: scale .35s cubic-bezier(.34, 1.6, .64, 1); }
.gl-slate__play::before { content: ''; position: absolute; left: 21px; top: 16px; border-style: solid; border-width: 11px 0 11px 17px; border-color: transparent transparent transparent #fff; }
.gl-slate__card:hover .gl-slate__play { scale: 1.15; }
/* the title written in chalk */
.gl-slate__title { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; min-height: 3.9em; margin: 12px 16px 0; font: 400 19px/1.3 'Cabin Sketch', 'Neucha', Arial, sans-serif; color: #f4f1e8; text-shadow: 0 0 1px rgba(255, 255, 255, .45); }

/* seen: the boards come up, the sticks clap one after another */
.gl-js .gl-slate:not(.is-in) .gl-slate__card { opacity: 0; translate: 0 40px; }
.gl-slate.is-in .gl-slate__card { animation: gl-rise .6s cubic-bezier(.3, 1.3, .5, 1) calc(var(--k, 0) * .14s) backwards; }
.gl-slate.is-in .gl-slate__stick { animation: gl-clap 1.3s linear calc(var(--k, 0) * .14s) backwards; }
.gl-slate.is-in .gl-slate__board { animation: gl-thud 1.3s linear calc(var(--k, 0) * .14s) backwards; }
@keyframes gl-rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes gl-clap { 0%, 52% { rotate: -32deg; animation-timing-function: cubic-bezier(.7, 0, 1, .6); } 64% { rotate: 2deg; } 72% { rotate: -5deg; } 80%, 100% { rotate: 0deg; } }
@keyframes gl-thud { 0%, 63% { translate: 0 0; } 66% { translate: 0 3px; } 72%, 100% { translate: 0 0; } }
/* a click: it claps once more, then the video opens */
.gl-slate.is-clap .gl-slate__stick { animation: gl-snap .22s cubic-bezier(.7, 0, 1, .6) forwards; }
@keyframes gl-snap { from { rotate: -26deg; } to { rotate: 0deg; } }

/* ---------- An album: the projector, the screen and the box of slides ---------- */
.gl .gp-title { max-width: 900px; margin: 0 auto 30px; font: 400 44px/1.15 'Cabin Sketch', 'Neucha', Arial, sans-serif; text-align: center; color: #3c4741; }
.gp { position: relative; margin-bottom: 90px; }
.gp-stage { position: relative; display: grid; grid-template-columns: 290px minmax(0, 760px); justify-content: center; align-items: end; gap: 0 96px; }

/* the light: a cone from the lens to the picture (gallery.js measures it), dust floating in it */
.gp-beam { position: absolute; left: 0; top: 0; z-index: 1; overflow: visible; pointer-events: none; opacity: 0; transition: opacity .5s; }
.gp-motes { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .8s .3s; }
.gp.is-lit .gp-beam, .gp.is-lit .gp-motes { opacity: 1; }
.gp.is-flick .gp-beam { animation: gp-flick .3s steps(3, end); }
@keyframes gp-flick { 0% { opacity: .2; } 50% { opacity: .9; } 100% { opacity: .5; } }
/* (gallery.js scatters them between the lens and the screen) */
.gp-motes i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fffbe6; box-shadow: 0 0 4px #fff3b0; animation: gp-mote 9s ease-in-out infinite alternate; }
.gp-motes i:nth-child(2n) { animation-delay: -2s; animation-duration: 11s; }
.gp-motes i:nth-child(3n) { animation-delay: -5s; animation-duration: 13s; }
.gp-motes i:nth-child(5n) { animation-delay: -7s; animation-duration: 10s; }
.gp-motes i:nth-child(7n) { animation-delay: -4s; animation-duration: 14s; }
@keyframes gp-mote { 0% { translate: 0 0; opacity: .3; } 30% { opacity: 1; } 60% { translate: 26px -22px; opacity: .6; } 100% { translate: -14px -46px; opacity: .9; } }

/* the screen rolls down from its roller (--u: how far it is down) */
.gp-screen { position: relative; z-index: 2; grid-column: 2; padding: 18px 0 22px; }
.gp-screen__roller { position: absolute; z-index: 2; left: -22px; right: -22px; top: 0; height: 20px; border-radius: 10px; background: linear-gradient(#f4f6f7, #c3cbd0 55%, #8e999f); box-shadow: 0 4px 8px rgba(40, 30, 20, .25); }
.gp-screen__roller::before, .gp-screen__roller::after { content: ''; position: absolute; top: -3px; width: 14px; height: 26px; border-radius: 4px; background: #4b555c; }
.gp-screen__roller::before { left: -6px; }
.gp-screen__roller::after { right: -6px; }
.gp-screen__cloth { position: relative; margin: 0; padding: 26px; background: #fdfdfa; box-shadow: 0 22px 34px -22px rgba(40, 30, 20, .55); clip-path: inset(0 0 calc((1 - var(--u)) * 100%) 0); touch-action: pan-y; }
.gp-screen__cloth::before { content: ''; position: absolute; inset: 12px; border: 3px solid #2f3437; pointer-events: none; }
/* the whole photo on the screen, never cut (the client, 2026-11-12: children without heads); a tall one leaves the
   white of the screen at its sides, as a projected slide would */
.gp-screen__img { display: block; width: 100%; height: auto; aspect-ratio: 800 / 540; object-fit: contain; background: none; user-select: none; -webkit-user-drag: none; transition: opacity .3s, filter .3s; }
/* the arrows and the count on the screen itself (on full screen too) */
.gp-nav { position: absolute; z-index: 3; top: 50%; display: grid; place-items: center; width: 54px; height: 54px; margin-top: -27px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .92); box-shadow: 0 4px 14px rgba(0, 0, 0, .28); cursor: pointer; transition: scale .3s cubic-bezier(.34, 1.6, .64, 1), opacity .4s, background-color .2s; -webkit-tap-highlight-color: transparent; }
.gp-nav svg { width: 30px; height: 30px; fill: none; stroke: #ff5736; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gp-nav--prev { left: 38px; }
.gp-nav--next { right: 38px; }
.gp-nav:hover { scale: 1.1; background: #fff; }
.gp-nav:active { scale: .94; }
.gp-nav:focus-visible { outline: 3px solid #ff5736; outline-offset: 3px; }
.gp-tally { position: absolute; z-index: 3; left: 50%; bottom: 36px; translate: -50% 0; padding: 4px 12px; border-radius: 999px; background: rgba(31, 36, 39, .72); font: 700 14px/1.3 'Open Sans', Arial, sans-serif; color: #fff; white-space: nowrap; pointer-events: none; transition: opacity .4s; }
.gl-js .gp:not(.is-lit) .gp-nav, .gl-js .gp:not(.is-lit) .gp-tally { opacity: 0; pointer-events: none; }
.gp-screen__cloth:fullscreen .gp-nav { width: 64px; height: 64px; margin-top: -32px; }
.gp-screen__cloth:fullscreen .gp-nav--prev { left: 24px; }
.gp-screen__cloth:fullscreen .gp-nav--next { right: 24px; }
.gp-screen__cloth:fullscreen .gp-tally { bottom: 22px; }
/* the slides in the box: their upper part, where the faces are */
.gp-slide img { object-position: 50% 25%; }
.gl-print__pic img { object-position: 50% 30%; }
.gl-js .gp:not(.is-lit) .gp-screen__img { opacity: 0; }
.gp.is-flick .gp-screen__img { opacity: .12; filter: brightness(1.6) blur(2px); transition-duration: .12s; }
/* the bar at the bottom of the screen with the ring to pull it down */
.gp-screen__rod { position: absolute; z-index: 2; left: -6px; right: -6px; top: calc(18px + var(--u) * (100% - 40px) - 6px); height: 12px; border-radius: 6px; background: linear-gradient(#e6eaec, #9aa5ac); box-shadow: 0 3px 6px rgba(40, 30, 20, .25); }
.gp-screen__rod i { position: absolute; left: 50%; top: 10px; width: 2px; height: 16px; background: #6d777d; }
.gp-screen__rod i::after { content: ''; position: absolute; left: -7px; top: 14px; width: 12px; height: 12px; border: 2px solid #6d777d; border-radius: 50%; }
.gl-js .gp:not(.is-on) .gp-screen { --u: 0; }
.gp.is-on .gp-screen { animation: gp-unroll 1.25s cubic-bezier(.55, 0, .3, 1.18) .1s backwards; }
@keyframes gp-unroll { from { --u: 0; } to { --u: 1; } }
.gp-full { position: absolute; z-index: 3; right: 30px; top: 30px; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .88); box-shadow: 0 3px 10px rgba(0, 0, 0, .25); cursor: pointer; opacity: 0; transition: opacity .3s, scale .3s cubic-bezier(.34, 1.6, .64, 1); }
.gp-full svg { width: 22px; height: 22px; fill: none; stroke: #2f3437; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.gp-screen__cloth:hover .gp-full, .gp-full:focus-visible { opacity: 1; }
.gp-full:hover { scale: 1.1; }
@media (hover: none) { .gp-full { opacity: 1; } }
/* a phone keeps the vertical scrolling of the page, while a sideways swipe over the photo is left to gallery.js (without
   this the browser takes the touch for itself and cancels the swipe) */
.gp-screen__cloth { touch-action: pan-y; }
.gp-screen__cloth:fullscreen { display: grid; place-items: center; padding: 0; background: #111; clip-path: none; }
.gp-screen__cloth:fullscreen::before { display: none; }
.gp-screen__cloth:fullscreen .gp-screen__img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: contain; background: none; }

/* the projector (side view, the lens to the screen): the round slide tray turns on top, the site's pinwheel is its fan */
.gp-projector { position: relative; z-index: 3; grid-column: 1; grid-row: 1; justify-self: end; width: 290px; height: 220px; margin-bottom: 4px; }
.gp-body { position: absolute; left: 0; bottom: 20px; width: 222px; height: 124px; border: 3px solid #2b5f86; border-radius: 16px; background: linear-gradient(#64bcf2, #3f97d4); box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .08), 0 20px 26px -18px rgba(20, 40, 60, .55); }
.gp-vent { position: absolute; left: 18px; top: 22px; display: grid; place-items: center; width: 70px; height: 70px; overflow: hidden; border: 3px solid #1f4566; border-radius: 50%; background: #2b5f86; }
.gp-vent img { width: 50px; height: auto; animation: gp-fan 1.4s linear infinite; animation-play-state: paused; }
.gp.is-lit .gp-vent img { animation-play-state: running; }
.gp-vent::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(transparent 0 6px, rgba(31, 69, 102, .75) 6px 8px); }
@keyframes gp-fan { to { rotate: 360deg; } }
.gp-count { position: absolute; right: 16px; top: 18px; padding: 5px 9px; border-radius: 6px; background: #1f2427; box-shadow: inset 0 2px 5px rgba(0, 0, 0, .7); font: 700 16px/1.1 'Courier New', monospace; letter-spacing: .04em; color: #ffe27a; white-space: nowrap; }
.gp-knob { position: absolute; bottom: 14px; width: 44px; height: 44px; padding: 0; border: 3px solid #1f4566; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff8d6 0 12%, #ffc000 14% 62%, #e29b00); box-shadow: 0 4px 0 #1f4566; cursor: pointer; transition: translate .1s, box-shadow .1s; -webkit-tap-highlight-color: transparent; }
.gp-knob::before { content: ''; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -6px 0 0 -7px; border: solid #1f4566; border-width: 0 3.5px 3.5px 0; rotate: -45deg; }
.gp-knob--prev { right: 76px; }
.gp-knob--prev::before { margin-left: -3px; rotate: 135deg; }
.gp-knob--next { right: 18px; }
.gp-knob:hover { translate: 0 -1px; box-shadow: 0 5px 0 #1f4566; }
.gp-knob:active { translate: 0 3px; box-shadow: 0 1px 0 #1f4566; }
.gp-lens { position: absolute; left: 216px; bottom: 74px; width: 58px; height: 46px; border: 3px solid #1f2427; border-radius: 6px 12px 12px 6px; background: linear-gradient(#5a636a, #2c3236 50%, #5a636a); }
.gp-lens::before { content: ''; position: absolute; left: 14px; top: -3px; bottom: -3px; width: 8px; background: repeating-linear-gradient(#1f2427 0 3px, #6d777d 3px 6px); }
.gp-lens::after { content: ''; position: absolute; right: -10px; top: 50%; width: 16px; height: 50px; margin-top: -25px; border-radius: 50%; background: radial-gradient(circle at 60% 50%, #fffbe6, #ffe27a 45%, #c9a23a 72%); border: 2px solid #1f2427; transition: box-shadow .4s; }
.gp.is-lit .gp-lens::after { box-shadow: 0 0 26px 12px rgba(255, 236, 150, .75); }
.gp.is-flick .gp-lens::after { box-shadow: 0 0 10px 4px rgba(255, 236, 150, .4); }
/* the round tray: a turning disc of slots seen from the side */
.gp-tray { position: absolute; left: 30px; bottom: 138px; width: 162px; height: 64px; }
.gp-tray::before { content: ''; position: absolute; left: 0; right: 0; top: 26px; height: 38px; border: 3px solid #2b3135; border-top: 0; border-radius: 0 0 81px 81px / 0 0 26px 26px; background: linear-gradient(90deg, #9aa5ac, #dfe5e8 45%, #9aa5ac); }
.gp-tray i { position: absolute; left: 0; top: -55px; width: 162px; height: 162px; border: 4px solid #2b3135; border-radius: 50%; background: radial-gradient(circle, #3d4448 0 17%, #c3cbd0 18% 21%, transparent 22%), repeating-conic-gradient(#eef1f3 0 6deg, #8e999f 6deg 9deg); transform: scaleY(.32) rotate(calc(var(--n, 0) * -9deg)); transition: transform .5s cubic-bezier(.34, 1.4, .64, 1); }
.gp-feet { position: absolute; left: 22px; bottom: 4px; width: 180px; height: 18px; }
.gp-feet::before, .gp-feet::after { content: ''; position: absolute; bottom: 0; width: 30px; height: 18px; border-radius: 0 0 6px 6px; background: #2b5f86; clip-path: polygon(15% 0, 85% 0, 100% 100%, 0 100%); }
.gp-feet::before { left: 0; }
.gp-feet::after { right: 0; }
.gl-js .gp:not(.is-on) .gp-projector { opacity: 0; translate: -60px 0; }
.gp.is-on .gp-projector { animation: gp-roll-in .8s cubic-bezier(.3, 1.3, .5, 1) .5s backwards; }
@keyframes gp-roll-in { from { opacity: 0; translate: -60px 0; } to { opacity: 1; translate: 0 0; } }
.gp.is-clack .gp-body, .gp.is-clack .gp-tray { animation: gp-clack .25s cubic-bezier(.3, 0, .4, 1); }
@keyframes gp-clack { 40% { translate: 0 3px; } }

/* the box of slides: the one in the projector leaves its slot empty */
.gp-box { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 16px 14px; max-width: 1060px; margin: 54px auto 0; padding: 26px 28px 28px; list-style: none; border-radius: 12px; background: repeating-linear-gradient(90deg, rgba(150, 100, 50, .07) 0 2px, transparent 2px 11px), linear-gradient(#f0dcb9, #e6cda3); box-shadow: inset 0 0 0 4px #cfae7d, inset 0 12px 20px rgba(120, 80, 30, .22), 0 20px 30px -24px rgba(80, 50, 20, .6); }
.gp-slot { position: relative; margin: 0; padding: 0; aspect-ratio: 1; }
.gp-slot::before { content: ''; position: absolute; inset: 0; border: 2px dashed rgba(120, 80, 30, .38); border-radius: 6px; }
.gp-slide { position: absolute; inset: 0; display: block; width: 100%; padding: 10px; border: 0; border-radius: 6px; background: #fdfcf8; box-shadow: 0 3px 0 #d6cab3, 0 7px 10px -5px rgba(80, 50, 20, .45); cursor: pointer; transition: translate .3s cubic-bezier(.34, 1.5, .64, 1), rotate .3s cubic-bezier(.34, 1.5, .64, 1), opacity .25s; -webkit-tap-highlight-color: transparent; }
.gp-slide img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; }
.gp-slide__n { position: absolute; left: 3px; top: 0; font: 700 9px/11px 'Courier New', monospace; color: #9a8f7c; }
.gp-slide:hover, .gp-slide:focus-visible { translate: 0 -7px; rotate: -4deg; }
.gp-slot.is-on .gp-slide { translate: 0 -40px; opacity: 0; pointer-events: none; }
.gl-js .gp:not(.is-on) .gp-slot:not(.is-on) .gp-slide { opacity: 0; }
.gp.is-on .gp-slot:not(.is-on) .gp-slide { animation: gl-rise .45s cubic-bezier(.3, 1.3, .5, 1) calc(1.3s + var(--k, 0) * .035s) backwards; }
/* the slide flying from the box into the projector */
.gp-flying { position: fixed; z-index: 60; margin: 0; padding: 8px; border-radius: 6px; background: #fdfcf8; box-shadow: 0 10px 20px rgba(0, 0, 0, .25); pointer-events: none; }
.gp-flying img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 3px; }

/* ---------- A video: the little cinema ---------- */
.gv { position: relative; max-width: 1000px; margin: 0 auto 100px; padding: 70px 70px 64px; border-radius: 20px 20px 10px 10px; background: radial-gradient(ellipse at 50% 30%, #6d3549, #3b1a27 72%); box-shadow: 0 30px 50px -30px rgba(40, 10, 20, .7); }
/* the scalloped valance with its golden edge */
.gv-valance { --sr: 25px; --sw: 60px; --sy: 26px; --band: 34px; position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: calc(var(--sy) + var(--sr) + 6px); border-radius: 20px 20px 0 0; background: radial-gradient(circle at 50% 0, #c8283a 0 var(--sr), #e8b64c calc(var(--sr) + 1px) calc(var(--sr) + 4px), transparent calc(var(--sr) + 5px)) 0 var(--sy) / var(--sw) calc(var(--sr) + 6px) repeat-x, linear-gradient(#9c1b2c, #c8283a) 0 0 / 100% var(--band) no-repeat, linear-gradient(#e8b64c, #e8b64c) 0 calc(var(--band) - 2px) / 100% 4px no-repeat; filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .35)); }
.gv-screen { position: relative; z-index: 1; aspect-ratio: 16 / 9; overflow: hidden; border: 8px solid #f6f1e6; border-radius: 4px; background: #111; box-shadow: 0 0 60px rgba(255, 240, 200, .22); }
.gv-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gv-poster { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: #111; cursor: pointer; }
.gv-poster img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(.2, .7, .3, 1), filter .4s; }
.gv-poster:hover img { transform: scale(1.04); filter: brightness(1.08); }
.gv-play { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; margin: -48px 0 0 -48px; border-radius: 50%; background: #ff5736; box-shadow: 0 0 0 6px rgba(255, 255, 255, .92), 0 10px 24px rgba(0, 0, 0, .45); transition: scale .35s cubic-bezier(.34, 1.6, .64, 1); }
.gv-play::before { content: ''; position: absolute; left: 37px; top: 28px; border-style: solid; border-width: 20px 0 20px 30px; border-color: transparent transparent transparent #fff; }
.gv-play::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, .8); animation: gv-ring 2.2s ease-out infinite; }
.gv-poster:hover .gv-play { scale: 1.1; }
@keyframes gv-ring { from { scale: 1; opacity: .9; } to { scale: 1.6; opacity: 0; } }
/* velvet curtains: drawn shut over the screen, they open to the sides and gather there */
.gv-curtain { position: absolute; z-index: 4; top: 30px; bottom: 34px; width: 52%; background: repeating-linear-gradient(90deg, #a5172a 0, #d02d42 12px, #b81d31 22px, #8f1022 34px); box-shadow: inset 0 -24px 30px -16px rgba(0, 0, 0, .45); scale: .13 1; transition: scale 1.9s cubic-bezier(.6, 0, .2, 1); }
.gv-curtain--l { left: 0; transform-origin: 0 50%; border-radius: 0 0 40% 0 / 0 0 12% 0; }
.gv-curtain--r { right: 0; transform-origin: 100% 50%; border-radius: 0 0 0 40% / 0 0 0 12%; }
.gl-js .gv:not(.is-open) .gv-curtain { scale: 1 1; }
.gv.is-open .gv-curtain { transition-delay: .4s; }
.gv.is-playing .gv-curtain { scale: .09 1; transition-duration: .9s; transition-delay: 0s; }
/* a row of seats in front */
.gv-seats { position: absolute; z-index: 6; left: 0; right: 0; bottom: -30px; display: flex; justify-content: center; gap: 12px; pointer-events: none; }
.gv-seats i { width: 112px; height: 62px; border-radius: 44px 44px 10px 10px; background: linear-gradient(#b52437, #7a1424); box-shadow: inset 0 6px 0 rgba(255, 255, 255, .14), 0 10px 14px -8px rgba(0, 0, 0, .5); }
/* the lights go down while it plays; a click beside the screen brings them back */
.gv-dim { position: fixed; z-index: 50; inset: 0; background: rgba(14, 8, 14, .84); opacity: 0; pointer-events: none; transition: opacity .9s; }
.gv-dim.is-on { opacity: 1; pointer-events: auto; cursor: pointer; }
.gv.is-playing { z-index: 51; }

/* ---------- Narrower screens ---------- */
@media only screen and (max-width: 1100px) {
	.gl-prints, .gl-slates { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.gl-line--reel .gl-print { flex-basis: calc((100% - 80px) / 3); }
	.gp-stage { grid-template-columns: 250px minmax(0, 1fr); gap: 0 60px; }
	.gp-projector { scale: .86; transform-origin: 100% 100%; }
}
@media only screen and (max-width: 768px) {
	.gl { padding: 26px 0 80px; }
	.gl-wrap { padding: 0 16px; }
	.gl .gl-head { font-size: 36px; }
	.gl-head__icon { width: 40px; height: 32px; }
	.gl .gp-title { font-size: 32px; }
	.gl-line { padding: 0 14px; }
	.gl-prints { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px 22px; }
	.gl-line--reel { --hub: 22px; padding: 0 44px; }
	.gl-line--reel .gl-prints { gap: 22px; }
	.gl-line--reel .gl-print { flex-basis: calc((100% - 22px) / 2); }
	.gl-pulley { width: 50px; height: 50px; }
	.gl-pulley__arrow { width: 30px; height: 30px; margin: -15px 0 0 -15px; stroke-width: 3.4; }
	.gl-print { padding-top: 40px; }
	.gl-print__paper { padding: 7px 7px 10px; }
	.gl-print__title { margin-top: 8px; font-size: 17px; }
	/* the pulley line's prints are narrower on a phone: a long word is broken, not cut off at the edge */
	.gl-line--reel .gl-print__title { -webkit-line-clamp: 3; min-height: 3.75em; margin: 6px 0 0; font-size: 15px; overflow-wrap: anywhere; hyphens: auto; }
	.gl-bird { width: 52px; height: 50px; background-size: 312px 50px; animation-name: gl-look-s; }
	.gl-bird.is-hop { animation-name: gl-hop, gl-look-s; }
	@keyframes gl-look-s { 0%, 70% { background-position: 0 0; } 74% { background-position: -52px 0; } 78% { background-position: -104px 0; } 82% { background-position: -156px 0; } 86% { background-position: -104px 0; } 90% { background-position: -52px 0; } 100% { background-position: 0 0; } }
	.gl-slates { grid-template-columns: minmax(0, 1fr); max-width: 400px; margin: 0 auto; gap: 44px; }
	/* the screen on top, the projector under it shining up into it */
	.gp-stage { grid-template-columns: minmax(0, 1fr); }
	.gp-screen { grid-column: 1; grid-row: 1; }
	.gp-screen__cloth { padding: 14px; }
	.gp-screen__cloth::before { inset: 6px; border-width: 2px; }
	.gp-screen__roller { left: -8px; right: -8px; }
	.gp-full { right: 18px; top: 18px; width: 36px; height: 36px; }
	.gp-nav { width: 42px; height: 42px; margin-top: -21px; }
	.gp-nav svg { width: 24px; height: 24px; }
	.gp-nav--prev { left: 20px; }
	.gp-nav--next { right: 20px; }
	.gp-tally { bottom: 20px; padding: 3px 10px; font-size: 12px; }
	.gp-projector { grid-row: 2; justify-self: start; margin: 26px 0 -62px; scale: .72; transform-origin: 0 0; }
	/* the box of slides becomes one strip to swipe along (it follows the slide in the projector) */
	.gp-box { display: flex; gap: 10px; margin-top: 40px; padding: 22px 16px 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; }
	.gp-box::-webkit-scrollbar { display: none; }
	.gp-slot { flex: 0 0 66px; scroll-snap-align: center; }
	.gp-slide { padding: 7px; }
	.gv { padding: 44px 14px 40px; border-radius: 14px 14px 8px 8px; }
	.gv-valance { --sr: 15px; --sw: 36px; --sy: 16px; --band: 22px; border-radius: 14px 14px 0 0; }
	.gv-screen { border-width: 5px; }
	.gv-curtain { top: 18px; bottom: 22px; }
	.gv-play { width: 70px; height: 70px; margin: -35px 0 0 -35px; }
	.gv-play::before { left: 27px; top: 20px; border-width: 15px 0 15px 22px; }
	.gv-seats { bottom: -22px; gap: 8px; }
	.gv-seats i { width: 74px; height: 42px; }
	.gv-seats i:nth-child(n+5) { display: none; }
}

@media only screen and (max-width: 400px) {
	/* (a long word as "Предучилищна" still fits a print of a small phone) */
	.gl-line--reel .gl-prints { gap: 16px; }
	.gl-line--reel .gl-print { flex-basis: calc((100% - 16px) / 2); }
	.gl-line--reel .gl-print__title { margin: 6px -2px 0; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
	.gp-motes, .gv-play::after { display: none; }
	.gl-line--reel.is-reel .gl-pulley:not(.is-end) .gl-pulley__arrow { animation: none; }
	.gp-vent img { animation: none; }
	.gv-curtain { transition: none; }
}