/* ═══════════════════════════════════════════════════════════════════════
   ΘΕΡΙΝΟ ΣΙΝΕΜΑ «ΤΑ ΚΑΝΑΛΙΑ» — τα βίντεο του χωριού κάτω από τα άστρα
   ═══════════════════════════════════════════════════════════════════════ */
.knl-cinema {
	--bulb: #ffd98a;
	position: relative; overflow: hidden; isolation: isolate; color: #efe7d4;
	padding: clamp(96px, 11vw, 150px) 0 clamp(70px, 8vw, 110px);
	background:
		radial-gradient(900px 420px at 50% 40%, rgba(255, 214, 140, .10), transparent 70%),
		radial-gradient(1200px 500px at 50% 110%, #1b2a22 0%, transparent 70%),
		linear-gradient(180deg, #05070d 0%, #0a0f1a 45%, #0e1712 100%);
}
.knl-cinema__stars { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.knl-cinema__inner { position: relative; }

/* ───── τα λαμπάκια της πλατείας, κρεμασμένα σε καμπύλη ───── */
.knl-cinema__garland { position: absolute; left: -2%; right: -2%; top: 14px; height: 90px; pointer-events: none; }
.knl-cinema__garland::before { content: ""; position: absolute; left: 0; right: 0; top: -44px; height: 110px; border-bottom: 1.5px solid rgba(60, 46, 32, .95); border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.knl-cinema__garland i {
	position: absolute; left: calc(var(--i) / 27 * 100%); top: calc(60px * sin(var(--i) / 27 * 180deg) + 10px);
	width: 9px; height: 13px; margin-left: -4px; border-radius: 50% 50% 45% 45%; background: var(--bulb);
	box-shadow: 0 0 10px 3px rgba(255, 200, 110, .55), 0 0 30px 8px rgba(255, 180, 80, .18);
	animation: knl-bulb 3.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.23s);
}
.knl-cinema__garland i::before { content: ""; position: absolute; left: 2px; top: -4px; width: 5px; height: 4px; background: #2a241c; border-radius: 1px; }
.knl-cinema__garland i:nth-child(3n) { --bulb: #ffb3a1; }
.knl-cinema__garland i:nth-child(4n) { --bulb: #b9e3ff; }
.knl-cinema__garland i:nth-child(5n) { --bulb: #c9f2b8; }

/* ───── η επιγραφή με τις λάμπες ───── */
.knl-cinema__head { text-align: center; }
.knl-marquee {
	position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: .15rem;
	padding: 1.4rem 2.6rem 1.25rem; border-radius: 22px; margin-bottom: 1.8rem;
	background: linear-gradient(180deg, #3b0f14, #25080c);
	box-shadow: 0 0 0 3px #1a0608, 0 0 0 5px #c9a14e, 0 0 60px rgba(255, 190, 90, .25), inset 0 0 40px rgba(0, 0, 0, .6);
	transform: perspective(900px) rotateX(6deg);
}
.knl-marquee__bulbs {
	position: absolute; inset: 6px; border-radius: 17px; padding: 8px; pointer-events: none;
	background: radial-gradient(circle, #fff3c8 0 2.5px, rgba(255, 210, 120, .45) 3.5px, transparent 5px) 0 0 / 18px 18px;
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
	filter: drop-shadow(0 0 4px rgba(255, 210, 120, .9));
	animation: knl-chase .6s steps(2) infinite;
}
.knl-marquee__small { font: 700 .7rem/1 var(--f-ui); letter-spacing: .5em; color: #f6d7a0; }
.knl-marquee__big { display: flex; font: 700 clamp(1.7rem, 5.4vw, 3.6rem)/1 var(--f-ui); letter-spacing: .08em; white-space: nowrap; }
.knl-marquee__big b {
	font-weight: 700; color: #fff4d8;
	text-shadow: 0 0 4px #fff, 0 0 12px #ffcf7a, 0 0 26px #ff9d3d, 0 0 48px rgba(255, 110, 60, .6);
	animation: knl-neon 6s linear infinite; animation-delay: calc(var(--i) * .11s);
}
.knl-marquee__big b:nth-child(4) { animation: knl-flicker 7s linear infinite; }
.knl-marquee__name { font: 700 clamp(1rem, 2.4vw, 1.5rem)/1 var(--f-ui); letter-spacing: .6em; margin: .5rem 0 0 .6em; color: #ffe7b3; text-shadow: 0 0 8px rgba(255, 200, 110, .8); }
.knl-cinema__title { font: italic 300 clamp(1.8rem, 3.8vw, 3rem)/1.15 var(--f-display); color: #fff5e0; margin: 0 0 .6rem; }
.knl-cinema__lead { max-width: 58ch; margin: 0 auto; color: rgba(239, 231, 212, .72); font-size: 1.1rem; }

/* ───── η σκηνή: το πανί ───── */
.knl-cinema__stage { position: relative; margin: clamp(34px, 5vw, 60px) auto 0; max-width: 1000px; padding-bottom: 70px; }
.knl-cinema__stage::before, .knl-cinema__stage::after {
	content: ""; position: absolute; top: -26px; bottom: 40px; width: 10px; border-radius: 3px;
	background: linear-gradient(90deg, #1c1510, #3a2c20 50%, #16110c); box-shadow: 0 10px 30px rgba(0, 0, 0, .6);
}
.knl-cinema__stage::before { left: -14px; }
.knl-cinema__stage::after { right: -14px; }
.knl-screen { position: relative; z-index: 2; padding: 10px; border-radius: 6px; background: linear-gradient(180deg, #d9d2c3, #a8a091); box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
.knl-screen__canvas { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 2px; background: #0c0c0c; }
.knl-screen__poster { position: absolute; inset: 0; background: var(--poster) center / cover no-repeat, #111; filter: sepia(.18) saturate(.92) contrast(1.05) brightness(.92); transform: scale(1.02); }
.knl-screen.is-swap .knl-screen__poster { animation: knl-projswap .9s ease-out; }
.knl-screen__vignette { position: absolute; inset: 0; pointer-events: none;
	background: radial-gradient(ellipse at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%), repeating-linear-gradient(0deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px); }
/* τα γράμματα της βιντεοκάμερας */
.knl-screen__osd { position: absolute; top: 14px; left: 18px; right: 18px; display: flex; justify-content: space-between; gap: 1rem; font: 700 clamp(.8rem, 1.6vw, 1.15rem)/1 ui-monospace, Consolas, 'Courier New', monospace; letter-spacing: .08em; pointer-events: none; }
.knl-screen__play-osd { color: #fff; text-shadow: 2px 2px 0 rgba(0, 0, 0, .6), 0 0 8px rgba(255, 255, 255, .6); animation: knl-osd 1.6s steps(2) infinite; }
.knl-screen__date { color: #ffb43c; text-shadow: 2px 2px 0 rgba(0, 0, 0, .65), 0 0 10px rgba(255, 170, 60, .8); }
.knl-screen__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: clamp(40px, 7vw, 90px) clamp(16px, 3vw, 30px) clamp(14px, 2.4vw, 24px); background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82)); display: flex; flex-direction: column; gap: .2rem; }
.knl-screen__caption small { font: 600 .68rem var(--f-ui); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-3); }
.knl-screen__caption strong { font: italic 400 clamp(1.3rem, 3.2vw, 2.4rem)/1.1 var(--f-display); color: #fff; text-shadow: 0 2px 14px rgba(0, 0, 0, .6); max-width: 68%; }
.knl-screen__caption a { color: rgba(255, 255, 255, .7); font: 500 .85rem var(--f-ui); text-decoration: none; max-width: 68%; }
.knl-screen__caption a:hover { color: var(--gold-3); text-decoration: underline; }
.knl-screen__play {
	position: absolute; right: clamp(16px, 3vw, 30px); bottom: clamp(16px, 2.6vw, 26px); z-index: 3; display: inline-flex; align-items: center; gap: .6rem;
	padding: .8rem 1.4rem .8rem 1rem; border: 0; border-radius: 999px; cursor: pointer; color: #1b1206;
	background: linear-gradient(135deg, #ffe2a0, #e2a948 55%, #b77a26); font: 700 .95rem var(--f-ui); letter-spacing: .04em;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .5); animation: knl-playpulse 2.4s ease-out infinite; transition: transform .3s var(--ease);
}
.knl-screen__play:hover { transform: scale(1.06); }
.knl-screen__play svg { width: 26px; height: 26px; fill: currentColor; }

/* ───── αντίστροφη μέτρηση φιλμ ───── */
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.knl-screen__leader { position: absolute; inset: 0; z-index: 4; display: none; place-items: center; background: radial-gradient(circle, #b9b1a1, #6f685d 75%); color: #1d1a16; filter: sepia(.35); }
.knl-screen.is-leader .knl-screen__leader { display: grid; }
.knl-screen__leader::before, .knl-screen__leader::after { content: ""; position: absolute; border: 3px solid rgba(20, 18, 15, .85); border-radius: 50%; }
.knl-screen__leader::before { width: 58%; aspect-ratio: 1; }
.knl-screen__leader::after { width: 46%; aspect-ratio: 1; }
.knl-screen__cross { position: absolute; inset: 0; background: linear-gradient(rgba(20, 18, 15, .8), rgba(20, 18, 15, .8)) center / 100% 2px no-repeat, linear-gradient(rgba(20, 18, 15, .8), rgba(20, 18, 15, .8)) center / 2px 100% no-repeat; }
.knl-screen__sweep { position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; background: conic-gradient(rgba(20, 18, 15, .45) var(--a), transparent var(--a)); }
.knl-screen__leader.is-tick .knl-screen__sweep { animation: knl-sweep .9s linear forwards; }
.knl-screen__leader b { position: relative; font: 700 clamp(4rem, 14vw, 10rem)/1 var(--f-ui); }
.knl-screen__player { position: absolute; inset: 0; z-index: 5; display: none; background: #000; }
.knl-screen.is-rolling .knl-screen__player { display: block; animation: knl-fade .6s; }
.knl-screen__player iframe, .knl-screen__player video { width: 100%; height: 100%; border: 0; display: block; }
.knl-screen__stop { position: absolute; top: 10px; right: 10px; z-index: 6; display: none; border: 0; border-radius: 999px; padding: .45rem .9rem; background: rgba(0, 0, 0, .7); color: #fff; font: 600 .8rem var(--f-ui); cursor: pointer; }
.knl-screen.is-leader .knl-screen__stop, .knl-screen.is-rolling .knl-screen__stop { display: block; }
.knl-screen__grain { position: absolute; inset: -50%; z-index: 4; pointer-events: none; opacity: .09; mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: knl-grain .5s steps(4) infinite; }
.knl-screen.is-rolling .knl-screen__grain { display: none; }

/* ───── ο προβολέας και η δέσμη του ───── */
.knl-projector { position: absolute; left: 0; right: 0; top: 10px; bottom: 0; z-index: 3; pointer-events: none; }
.knl-projector__beam {
	position: absolute; left: -2%; right: -2%; top: 0; bottom: 34px;
	clip-path: polygon(0 0, 100% 0, 53% 100%, 47% 100%);
	background: linear-gradient(0deg, rgba(255, 240, 200, .38), rgba(255, 240, 200, .05) 70%, rgba(255, 240, 200, .02));
	mix-blend-mode: screen; opacity: .45; animation: knl-beam 4s infinite; transition: opacity .8s;
}
.knl-cinema.is-playing .knl-projector__beam { opacity: 0; }
.knl-projector__beam canvas { width: 100%; height: 100%; display: block; }
.knl-projector__box { position: absolute; left: 50%; bottom: 0; width: 86px; height: 40px; margin-left: -43px; border-radius: 8px 8px 4px 4px; background: linear-gradient(180deg, #3b3530, #16130f); box-shadow: 0 8px 20px rgba(0, 0, 0, .6); }
.knl-projector__box span { position: absolute; left: 50%; top: -6px; width: 22px; height: 12px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle, #fff9e6 0 30%, #ffd98a 50%, transparent 72%); box-shadow: 0 0 20px 6px rgba(255, 230, 170, .6); }
.knl-projector__box i { position: absolute; top: -34px; width: 38px; height: 38px; border-radius: 50%; border: 3px solid #2b2621; background: repeating-conic-gradient(#2b2621 0 30deg, #4a423a 30deg 60deg); animation: knl-spin 3s linear infinite; animation-play-state: paused; }
.knl-projector__box i:first-child { left: -12px; }
.knl-projector__box i:nth-child(2) { right: -12px; animation-duration: 2.2s; }
.knl-cinema.is-playing .knl-projector__box i { animation-play-state: running; }

/* ───── η μπομπίνα: ταινία φιλμ με τρύπες ───── */
.knl-reel {
	position: relative; z-index: 4; margin-top: -28px; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; outline: none;
	padding: 26px 0;
	background:
		radial-gradient(circle, #05070b 0 3.5px, transparent 4.5px) 0 4px / 22px 14px repeat-x,
		radial-gradient(circle, #05070b 0 3.5px, transparent 4.5px) 0 calc(100% - 4px) / 22px 14px repeat-x,
		linear-gradient(180deg, #1d1712, #120e0b);
	border-top: 1px solid #2c241c; border-bottom: 1px solid #2c241c;
	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8);
	transform: perspective(1400px) rotateX(10deg); transform-origin: top center;
	-webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.knl-reel::-webkit-scrollbar { display: none; }
.knl-reel.is-dragging { cursor: grabbing; }
.knl-reel__track { display: flex; gap: 12px; width: max-content; padding: 0 40px; }
.knl-frame {
	position: relative; flex: none; width: clamp(170px, 19vw, 230px); aspect-ratio: 16 / 10; padding: 0; border: 0; border-radius: 3px; overflow: hidden; cursor: pointer;
	background: #0c0a08; color: #fff; text-align: left; filter: sepia(.35) brightness(.78);
	transition: transform .35s var(--ease), box-shadow .35s, filter .35s;
}
.knl-frame__img { position: absolute; inset: 0; background: #2a2119 center / cover no-repeat; transition: transform .8s var(--ease); }
.knl-frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .85)); }
.knl-frame__year { position: absolute; top: 7px; left: 8px; z-index: 1; font: 700 .82rem/1 ui-monospace, Consolas, monospace; color: #ffb43c; text-shadow: 1px 1px 0 #000, 0 0 8px rgba(255, 170, 60, .8); }
.knl-frame__title { position: absolute; left: 9px; right: 9px; bottom: 8px; z-index: 1; font: 500 .82rem/1.25 var(--f-ui); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.knl-frame:hover { filter: none; transform: translateY(-4px); }
.knl-frame:hover .knl-frame__img { transform: scale(1.08); }
.knl-frame.is-active { filter: none; box-shadow: 0 0 0 3px var(--gold-2), 0 0 30px rgba(255, 200, 110, .45); }
.knl-frame:focus-visible { outline: 3px solid var(--gold-2); outline-offset: 2px; }
.knl-cinema__more { text-align: center; margin: 2.4rem 0 0; }

/* ───── η σελίδα «Βίντεο» ───── */
.knl-category .knl-cinema { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.knl-filmlib { padding: clamp(50px, 7vw, 90px) 0 0; }
.knl-filmlib > .knl-wrap { width: 100%; }
.knl-filmlib__year { margin-bottom: 2.4rem; }
.knl-filmlib__year h3 { font: italic 300 clamp(2rem, 4vw, 3rem)/1 var(--f-display); color: var(--gold); margin: 0 0 1rem; display: flex; align-items: center; gap: 1rem; }
.knl-filmlib__year h3::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.knl-filmlib__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.knl-filmcard { display: flex; flex-direction: column; gap: .5rem; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; color: var(--ink); }
.knl-filmcard__img { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; background: #1a1612 center / cover no-repeat; box-shadow: var(--shadow); overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s; }
.knl-filmcard__img::after { content: ""; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: rgba(184, 132, 47, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5v14l11-7z' fill='%23fff'/%3E%3C/svg%3E") 55% 50% / 26px no-repeat; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s; }
.knl-filmcard:hover .knl-filmcard__img { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.knl-filmcard:hover .knl-filmcard__img::after, .knl-filmcard:focus-visible .knl-filmcard__img::after { opacity: 1; transform: none; }
.knl-filmcard__vhs { position: absolute; right: 8px; bottom: 7px; font: 700 .78rem/1 ui-monospace, Consolas, monospace; color: #ffb43c; text-shadow: 1px 1px 0 #000, 0 0 8px rgba(255, 170, 60, .8); }
.knl-filmcard__title { font: 500 1.05rem/1.3 var(--f-display); }

@keyframes knl-bulb { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@keyframes knl-chase { to { background-position: 9px 9px; } }
@keyframes knl-neon { 0%, 92%, 100% { opacity: 1; } 93% { opacity: .4; } 94% { opacity: 1; } 96% { opacity: .6; } }
@keyframes knl-flicker { 0%, 40%, 44%, 100% { opacity: 1; } 41% { opacity: .15; } 42% { opacity: .9; } 43% { opacity: .2; } }
@keyframes knl-projswap { 0% { opacity: 0; filter: brightness(2.2) blur(6px); } 12% { opacity: 1; } 20% { opacity: .4; } 30% { opacity: 1; filter: brightness(1.2) blur(0); } 100% { opacity: 1; } }
@keyframes knl-osd { 50% { opacity: 0; } }
@keyframes knl-playpulse { 0% { box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 0 rgba(255, 200, 110, .6); } 70%, 100% { box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 18px rgba(255, 200, 110, 0); } }
@keyframes knl-sweep { from { --a: 0deg; } to { --a: 360deg; } }
@keyframes knl-grain { 0% { transform: translate(0, 0); } 25% { transform: translate(-5%, 3%); } 50% { transform: translate(4%, -4%); } 75% { transform: translate(-3%, -2%); } 100% { transform: translate(2%, 5%); } }
@keyframes knl-beam { 0%, 47%, 100% { filter: brightness(1); } 48% { filter: brightness(1.25); } 50% { filter: brightness(.9); } 52% { filter: brightness(1.1); } }
@keyframes knl-spin { to { transform: rotate(360deg); } }

@media (max-width: 700px) {
	.knl-cinema { padding-top: 84px; }
	.knl-cinema__garland i:nth-child(odd) { display: none; }
	.knl-marquee { padding: 1rem 1.2rem .9rem; transform: none; }
	.knl-marquee__big { letter-spacing: .03em; }
	.knl-cinema__stage::before, .knl-cinema__stage::after { display: none; }
	.knl-cinema__stage { padding-bottom: 46px; }
	.knl-screen { padding: 5px; }
	.knl-screen__osd { top: 8px; left: 10px; right: 10px; }
	.knl-screen__caption { padding-bottom: 60px; }
	.knl-screen__caption strong { max-width: 100%; }
	.knl-screen__caption a { display: none; }
	.knl-screen__play { left: 50%; right: auto; transform: translateX(-50%); bottom: 12px; padding: .6rem 1.1rem .6rem .8rem; }
	.knl-screen__play:hover { transform: translateX(-50%) scale(1.05); }
	.knl-projector__box { width: 64px; height: 30px; margin-left: -32px; }
	.knl-projector__box i { width: 28px; height: 28px; top: -24px; }
	.knl-reel { transform: none; margin-top: -10px; padding: 22px 0; }
	.knl-frame { width: 150px; }
	.knl-filmlib__grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.knl-filmcard__title { font-size: .92rem; }
}
@media (max-width: 420px) {
	.knl-screen__caption { padding-top: 30px; }
	.knl-screen__caption strong { font-size: 1.15rem; }
}
@media (prefers-reduced-motion: reduce) {
	.knl-marquee__bulbs, .knl-marquee__big b, .knl-cinema__garland i, .knl-screen__play, .knl-projector__beam, .knl-screen__grain { animation: none !important; }
}