/*
 * abra.herba.bio — přihlašovací scéna „sušárna před rozsvícením".
 *
 * Protějšek scény na bmrc.cloud (tmavá místnost se svítidly na šňůrách)
 * a na abra.livingeconic.cz (sad před rozbřeskem): stejná mechanika —
 * zatažení za provázek scénu prosvětlí a odhalí přihlášení — jen tady visí
 * hlavou dolů svazky sušených bylin. Herba je bylina.
 *
 * Scéna je tmavá vždy, nezávisle na světlém/tmavém režimu appky: je to
 * záměrný obraz, ne rozhraní, a rozsvícení je pointa interakce.
 */

:root {
	--night: #060d0a;      /* nejtmavší, okraje scény */
	--night2: #0d1f16;     /* střed scény */
	--forest: #0c3b23;
	--green: #1c7a41;      /* interaktivní, 5,37:1 na bílé */
	--dawn: #ffd9a3;       /* teplé světlo rozbřesku */
	--fg: #eaf2ec;
	--muted: #9fb3a6;
	--line: rgba(180, 214, 192, .16);
	--radius: 18px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }

body {
	font-family: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
	color: var(--fg);
	line-height: 1.5;
	background: var(--night);
	min-height: 100%;
	display: flex;
	flex-direction: column;
}

a { color: var(--dawn); text-decoration: none; }
a:hover { text-decoration: underline; }


/* ── Scéna ────────────────────────────────────────────────
   Radiální podklad drží pozornost uprostřed; `.on` k němu přidá
   teplé světlo zleva shora, odkud „svítí" lampa nad sušárnou. */
.stage {
	position: relative;
	flex: 1;
	display: grid;
	place-items: center;
	overflow: hidden;
	background:
		radial-gradient(120% 90% at 30% 8%, var(--night2), var(--night) 68%);
}

.stage__glow {
	position: absolute; inset: -25%;
	pointer-events: none;
	opacity: 0;
	transition: opacity 1.2s ease;
	background:
		radial-gradient(40% 34% at 30% 26%, rgba(255, 202, 133, .26), transparent 74%),
		radial-gradient(64% 50% at 24% 8%, rgba(126, 176, 132, .08), transparent 78%);
}
.stage.on .stage__glow { opacity: 1; }

/* Mlha u země — v neosvětlené scéně skoro není vidět, po rozsvícení
   dostane sad hloubku a ovoce nevisí v prázdnu. */
.stage__haze {
	position: absolute; left: 0; right: 0; bottom: 0; height: 26%;
	pointer-events: none;
	opacity: .25;
	transition: opacity 1.2s ease;
	background: linear-gradient(180deg, transparent, rgba(150, 196, 162, .05) 60%, rgba(168, 204, 176, .09));
}
.stage.on .stage__haze { opacity: 1; }


/* ── Zavěšené ovoce ───────────────────────────────────────
   Sedí vlevo nahoře stejně jako svítidla na portálu; kartu s přihlášením
   pak scéna nechá vpravo, kde je klid. */
.drying { position: absolute; top: -30px; left: 2%; width: min(720px, 58vw); }
.drying svg { display: block; width: 100%; height: auto; }

/* Trám a motouzy: ve tmě jen naznačené, po rozsvícení dostanou dřevo barvu. */
.beam { fill: #101a13; stroke: rgba(190, 218, 198, .22); stroke-width: 1.4; transition: fill 1.1s ease, stroke 1.1s ease; }
.stage.on .beam { fill: url(#litBeam); stroke: rgba(255, 226, 178, .5); }

.cord { stroke: rgba(186, 214, 194, .32); stroke-width: 1.5; fill: none; }
.tie { fill: #16241a; stroke: rgba(190, 218, 198, .3); stroke-width: 1.2; transition: fill 1.1s ease; }
.stage.on .tie { fill: #b99a5f; stroke: rgba(255, 233, 190, .5); }

/* Stébla a lístky. Ve tmě je vidět jen obrys — rozsvícení je celá pointa. */
.herb { fill: none; stroke: rgba(190, 218, 198, .30); stroke-width: 1.5; stroke-linecap: round; transition: stroke 1.1s ease; }
.stage.on .herb { stroke: rgba(150, 196, 116, .78); }

.leaf { fill: #12241a; stroke: rgba(190, 218, 198, .24); stroke-width: 1; transition: fill 1.1s ease, stroke 1.1s ease; }
.stage.on .leaf { fill: url(#litLeaf); stroke: rgba(214, 236, 190, .5); }

.stage.on .leaf, .stage.on .herb { filter: drop-shadow(0 6px 22px rgba(255, 198, 128, .28)); }


/* ── Provázek, za který se tahá ───────────────────────────
   Záchytná plocha je nehybná; kdyby se hýbala s provázkem, kurzor by jí
   utekl a hover by se rozblikal (stejná past jako u šňůry na portálu). */
.pull { cursor: grab; }
.pull:active { cursor: grabbing; }
.pull__hit { fill: transparent; }

/* Prohlížeč kolem klikatelné skupiny kreslí obdélníkový fokusový rámeček —
   po kliknutí myší tam nemá co dělat. Klávesnici zvýrazníme úchyt. */
.pull, .pull:focus { outline: none; }
.pull .knob { fill: #cfe6d6; transition: r .18s ease, fill .18s ease; }
.pull:hover .knob { fill: #fff; r: 9; }
.pull:focus-visible .knob { fill: #fff; r: 10; filter: drop-shadow(0 0 8px rgba(255, 225, 180, .9)); }

.pull__tendril { transform-origin: 262px 49px; transition: transform .42s cubic-bezier(.2, 1.7, .4, 1); }
.stage.pulled .pull__tendril { transform: scaleY(1.2); }


/* ── Karta s přihlášením ──────────────────────────────────
   Zůstává skrytá, dokud se nerozsvítí — v tom je celá pointa scény.
   Rozsvítí se ale i samo (viz skript), takže na ni nikdo nečeká věčně. */
.signin {
	position: relative; z-index: 2;
	width: min(400px, 88vw);
	margin-left: auto; margin-right: 7%;
	background: rgba(11, 26, 19, .82);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 32px 30px;
	backdrop-filter: blur(7px);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .5);
	opacity: 0; transform: translateY(14px);
	transition: opacity .75s ease .25s, transform .75s ease .25s;
}
.stage.on .signin { opacity: 1; transform: none; }

/* Logo je tmavě zelená kresba na průhledu — na tmavé kartě by zmizelo,
   proto se z něj tady dělá bílá silueta. */
.signin__logo { display: block; width: 172px; height: auto; margin-bottom: 22px; filter: brightness(0) invert(1); opacity: .92; }
.signin__eyebrow { margin: 0 0 4px; font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--dawn); }
.signin__title { margin: 0 0 6px; font-size: 23px; font-weight: 650; color: #fff; }
.signin__lead { margin: 0 0 24px; color: var(--muted); font-size: 14px; }

.g-btn {
	display: flex; align-items: center; justify-content: center; gap: 10px;
	width: 100%; padding: 12px 18px;
	border-radius: 10px; border: 1px solid transparent;
	background: #fff; color: #0d1f16;
	font: inherit; font-size: 14.5px; font-weight: 600;
	transition: background .15s, transform .15s;
}
.g-btn:hover { background: #f1f5f2; text-decoration: none; transform: translateY(-1px); }
.g-btn svg { flex: none; }

.signin__note { margin: 18px 0 0; font-size: 12.5px; color: var(--muted); text-align: center; }

/* Nápověda sedí pod úchytem, ne v kartě: karta je ve tmě neviditelná, takže
   by nápověda, která má k interakci teprve navést, nebyla nikdy vidět.
   Procenta jsou vztažená k soustavě SVG (úchyt je na 262/560 a 308/470),
   takže drží i když se sušárna zmenší s oknem. Po rozsvícení doslouží a zmizí. */
.stage__hint {
	position: absolute;
	left: 46.8%; top: 73%;
	transform: translateX(-50%);
	margin: 0; white-space: nowrap;
	font-size: 12.5px; letter-spacing: .04em;
	color: #7f9788;
	pointer-events: none;
	transition: opacity .5s ease;
}
.stage.on .stage__hint { opacity: 0; }
@media (max-width: 860px) { .stage__hint { display: none; } }

.flash { padding: .6rem 1rem; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.flash.success { background: rgba(28, 122, 65, .22); color: #cdeeda; border: 1px solid rgba(120, 200, 155, .35); }
.flash.error { background: rgba(140, 30, 30, .25); color: #f6c9c9; border: 1px solid rgba(230, 130, 130, .35); }
.flash.info, .flash.warning { background: rgba(255, 217, 163, .14); color: #f4e2c4; border: 1px solid rgba(255, 217, 163, .3); }


@media (max-width: 860px) { .stage__hint { display: none; } }

.flash { padding: .6rem 1rem; border-radius: 10px; margin-bottom: 14px; font-size: 14px; }
.flash.success { background: rgba(28, 122, 65, .22); color: #cdeeda; border: 1px solid rgba(120, 200, 155, .35); }
.flash.error { background: rgba(140, 30, 30, .25); color: #f6c9c9; border: 1px solid rgba(230, 130, 130, .35); }
.flash.info, .flash.warning { background: rgba(255, 217, 163, .14); color: #f4e2c4; border: 1px solid rgba(255, 217, 163, .3); }



@media (max-width: 860px) {
	.stage { padding: 64px 20px 44px; gap: 22px; }
	.drying { position: static; width: 84%; margin: 0 auto 8px; }
	.signin { margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
	.stage__glow, .stage__haze, .signin, .beam, .tie, .herb, .leaf, .pull__tendril { transition: none; }
}

/* Přepínač jazyka na přihlašovací scéně. Karta je tmavá i ve světlém režimu,
   takže vlaječky drží vlastní kontrast a nedědí barvy z lišty. */
.signin .langswitch { display: inline-flex; gap: 2px; margin-bottom: 18px; }
.signin .langswitch__flag {
	display: grid; place-items: center;
	padding: 5px 6px; border: 1px solid transparent; border-radius: 8px;
	line-height: 0; opacity: .5; filter: grayscale(1); transition: opacity .12s, filter .12s;
}
.signin .langswitch__flag:hover { opacity: .9; filter: grayscale(.2); background: rgba(255, 255, 255, .08); }
.signin .langswitch__flag.is-active {
	opacity: 1; filter: none;
	border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1);
}
.signin .langswitch__flag svg { display: block; border-radius: 2px; }

/* Postranní vchod pro správce — nenápadný odkaz pod hlavním tlačítkem. */
.signin__admin { margin: 14px 0 0; text-align: center; font-size: 12.5px; }
.signin__admin a { color: var(--muted); }
.signin__admin a:hover { color: var(--dawn); }