/* ═══════════════════════════════════════════════════════════════════════
   Η κορυφή της αρχικής: η αληθινή κοιλάδα των Καναλίων + μεγεθυντικός φακός.
   Η φωτογραφία αλλάζει φως με την πραγματική ώρα (sky.js → data-phase)
   και με τον καιρό (is-rain, is-snow, is-fog).
   ═══════════════════════════════════════════════════════════════════════ */
.knl-hero { background: #0f1b15; }
.knl-hero__photo {
	position: absolute; inset: 0; z-index: 0;
	background: var(--photo) center center / cover no-repeat, #1d2b22;
	transform: none; transform-origin: 50% 55%;
	transition: transform 1.4s var(--ease), filter 2s;
	animation: knl-photo-in 2.4s var(--ease) both;
}
.knl-hero__tint {
	position: absolute; inset: 0; z-index: 1; pointer-events: none; transition: opacity 2s;
	background:
		linear-gradient(90deg, rgba(6, 16, 12, .6) 0%, rgba(6, 16, 12, .28) 32%, rgba(6, 16, 12, 0) 55%),
		linear-gradient(180deg, rgba(6, 16, 12, .55) 0%, rgba(6, 16, 12, 0) 20%, rgba(6, 16, 12, 0) 80%, rgba(6, 16, 12, .45) 100%);
}
.knl-hero__tint::after { content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity 2s, background 2s; }

/* ώρα της ημέρας στα Κανάλια */
.knl-hero[data-phase="night"] .knl-hero__photo { filter: brightness(.42) saturate(.55) contrast(1.05) hue-rotate(8deg); }
.knl-hero[data-phase="night"] .knl-hero__tint::after { opacity: 1; background: linear-gradient(180deg, rgba(8, 14, 42, .72), rgba(8, 14, 42, .35) 55%, rgba(8, 14, 42, .5)); }
.knl-hero[data-phase="dawn"] .knl-hero__photo, .knl-hero[data-phase="dusk"] .knl-hero__photo { filter: brightness(.82) saturate(1.1) sepia(.18); }
.knl-hero[data-phase="dawn"] .knl-hero__tint::after, .knl-hero[data-phase="dusk"] .knl-hero__tint::after { opacity: 1; background: linear-gradient(180deg, rgba(255, 146, 80, .34), rgba(150, 70, 110, .14) 50%, rgba(20, 20, 40, .2)); }
/* καιρός */
.knl-hero.is-rain .knl-hero__photo { filter: brightness(.78) saturate(.75) contrast(.95); }
.knl-hero.is-snow .knl-hero__photo { filter: brightness(1.05) saturate(.55) contrast(.9); }
.knl-hero.is-fog .knl-hero__photo { filter: brightness(1.05) saturate(.7) contrast(.8) blur(1.2px); }
.knl-hero.is-fog .knl-hero__tint::after { opacity: 1; background: linear-gradient(180deg, rgba(235, 240, 245, .45), rgba(235, 240, 245, .25)); }

/* τα άστρα και η σελήνη βγαίνουν μόνο τη νύχτα, στον ουρανό της φωτογραφίας */
.knl-hero__sky { z-index: 1; pointer-events: none; }
.knl-hero__stars { -webkit-mask-image: linear-gradient(180deg, #000 0 24%, transparent 40%); mask-image: linear-gradient(180deg, #000 0 24%, transparent 40%); }
.knl-hero:not([data-phase="night"]) .knl-hero__stars { opacity: 0; }
.knl-hero__moon { top: 12% !important; }

/* σημάδια πάνω στη φωτογραφία */
.knl-hero__marks { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; }
.knl-hero__marks .knl-labels { font-size: 30px; }
.knl-hero__marks .knl-label path { stroke: rgba(255, 244, 220, .9); stroke-width: 2.5; stroke-dasharray: 6 8; }
.knl-hero__marks .knl-label circle { fill: #fff4dc; filter: drop-shadow(0 0 6px rgba(255, 220, 150, .9)); }
.knl-hero__marks .knl-label text { fill: #fff8ea; stroke: rgba(0, 0, 0, .45); stroke-width: 6px; }
.knl-hero__marks .knl-label--river text { font-size: 44px; }

/* ───── ο μεγεθυντικός φακός ───── */
.knl-hero__lens {
	--r: 160px;
	position: absolute; inset: auto; left: var(--x, 50%); top: var(--y, 60%); z-index: 3;
	width: calc(var(--r) * 2); height: calc(var(--r) * 2); margin: calc(var(--r) * -1) 0 0 calc(var(--r) * -1);
	border-radius: 50%; pointer-events: none; opacity: var(--o, 0);
	transform: scale(calc(.6 + var(--o, 0) * .4));
	background-image: var(--photo); background-repeat: no-repeat; background-color: #1d2b22; image-rendering: auto;
	-webkit-mask-image: none; mask-image: none; filter: none;
	border: 3px solid rgba(241, 209, 138, .9);
	box-shadow: 0 0 0 7px rgba(20, 16, 10, .35), 0 0 0 8px rgba(241, 209, 138, .35), 0 24px 60px rgba(0, 0, 0, .55), inset 0 0 40px rgba(0, 0, 0, .35);
	will-change: left, top, opacity, background-position;
}
.knl-hero__lens::after { content: none; }
.knl-hero__glass { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 34%), radial-gradient(circle at 70% 80%, rgba(255, 230, 170, .12), transparent 45%); }
.knl-hero__glass::after { /* η λαβή του φακού */
	content: ""; position: absolute; right: -44px; bottom: -40px; width: 70px; height: 16px; border-radius: 8px;
	background: linear-gradient(180deg, #d8b068, #8a6428); transform: rotate(45deg); transform-origin: left center;
	box-shadow: 0 6px 14px rgba(0, 0, 0, .45);
}

@keyframes knl-photo-in { from { opacity: 0; transform: scale(1.06); filter: blur(8px); } to { opacity: 1; } }

@media (max-width: 900px) {
	/* όρθια οθόνη: η φωτογραφία ολόκληρη σε πλάτος, κάτω· από πάνω η ίδια θολή */
	.knl-hero__photo { --fit: width-bottom; bottom: var(--now-h, 200px); height: auto; background: #1d2b22; overflow: hidden; }
	.knl-hero__photo::before { content: ""; position: absolute; inset: -20px; background: var(--photo) center 40% / cover no-repeat; filter: blur(18px) brightness(.55) saturate(.9); }
	.knl-hero__photo::after { content: ""; position: absolute; inset: 0; background: var(--photo) center bottom / 100% auto no-repeat;
		-webkit-mask-image: linear-gradient(180deg, transparent calc(100% - 75vw - 10px), #000 calc(100% - 75vw + 40px));
		mask-image: linear-gradient(180deg, transparent calc(100% - 75vw - 10px), #000 calc(100% - 75vw + 40px)); }
	.knl-hero__tint { bottom: var(--now-h, 200px); height: auto; background: linear-gradient(180deg, rgba(6, 16, 12, .55) 0%, rgba(6, 16, 12, .3) 45%, rgba(6, 16, 12, 0) 72%, rgba(6, 16, 12, .35) 100%); }
	.knl-hero__marks { display: none; }
	.knl-hero__content { padding-bottom: calc(75vw + 10px); }
	.knl-hero__lens { --r: 110px; }
	.knl-hero__glass::after { right: -30px; bottom: -28px; width: 46px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) { .knl-hero__photo { animation: none; } }