/* OBJECT etc – passordfeltet over forsiden. Mål og farger: --pw-variablene øverst i style.css. */

/* Forsiden bak er låst: kan ikke scrolles, klikkes eller tabbes til (inert settes i passord.js) */
html:has(body.obj-laast), body.obj-laast { overflow: hidden; overscroll-behavior: none; }

.pw-side {
	--u: var(--obj-enhet);
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
	-webkit-tap-highlight-color: transparent;
	font-family: var(--hand-font);
}
/* Sløret over forsiden: litt mørkere og uskarpt, så det hvite feltet skiller seg ut */
.pw-side::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--pw-slor);
	-webkit-backdrop-filter: blur(var(--pw-blur));
	backdrop-filter: blur(var(--pw-blur));
}

/* Det hvite feltet */
.pw-panel {
	position: relative;
	width: calc(100% - 2 * var(--pw-marg));
	height: min(var(--pw-hoyde), calc(100svh - 2 * var(--pw-marg)));
	background: var(--pw-panel);
	color: var(--pw-tekst);
	font-family: var(--hand-font);
}

/* Topplinjen: logo · etikett · dato */
.pw-topp > * { position: absolute; top: var(--pw-luft); font-size: var(--pw-str-liten); line-height: 1.2; }
.pw-logo { left: var(--pw-luft); font-size: var(--pw-str-logo); line-height: 1; }
.pw-etikett { left: 50%; }
.pw-dato { right: var(--pw-innrykk); }

/* Passordfeltet */
.pw-skjema { position: absolute; left: 50%; right: var(--pw-linje-ende); top: 50%; transform: translateY(-50%); margin: 0; }
.pw-felt { position: relative; display: block; font-size: var(--pw-str-felt); line-height: 1.15; cursor: text; }
.pw-input {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0 calc(var(--pw-innrykk) - var(--pw-linje-ende) + var(--pw-pil) + 12px) 0 0;
	border: 0;
	border-radius: 0;
	outline: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.5em;                                  /* prikkene, mindre enn «Password» */
	height: calc(var(--pw-str-felt) * 1.15 + var(--pw-linje-luft));
	padding-top: calc(var(--pw-str-felt) * 0.5);
	letter-spacing: 0.12em;
	caret-color: var(--pw-tekst);
	-webkit-appearance: none;
	appearance: none;
}
.pw-hint {
	position: absolute;
	left: 0;
	top: 0;
	pointer-events: none;
	user-select: none;
	-webkit-user-select: none;
	transition: opacity 0.25s ease, transform 0.35s var(--pw-kurve);
}
.pw-felt:has(.pw-input:not(:placeholder-shown)) .pw-hint,
.pw-felt.har-tekst .pw-hint { opacity: 0; transform: translateY(-0.25em); }

.pw-pil {
	position: absolute;
	right: calc(var(--pw-innrykk) - var(--pw-linje-ende));
	top: 0;
	bottom: var(--pw-linje-luft);
	width: var(--pw-pil);
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	opacity: 0.25;
	touch-action: manipulation;
	transition: opacity 0.3s ease, transform 0.35s var(--pw-kurve);
}
.pw-pil::before { content: ""; position: absolute; inset: -14px; } /* større trykkflate */
.pw-pil svg { display: block; width: 100%; height: auto; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pw-felt:has(.pw-input:not(:placeholder-shown)) .pw-pil,
.pw-felt.har-tekst .pw-pil { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
	.pw-pil:hover { transform: translateX(4px); }
}
.pw-pil:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }

/* Linjen: grå grunnlinje, svart linje tegnes inn ved fokus */
.pw-linje { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--pw-linje); transform-origin: left; }
.pw-linje span { position: absolute; inset: 0; background: var(--pw-tekst); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--pw-kurve); }
.pw-felt:focus-within .pw-linje span { transform: scaleX(1); }

.pw-feil {
	position: absolute;
	left: 0;
	top: 100%;
	margin: var(--pw-feil-luft) 0 0;
	font-size: var(--pw-str-liten);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.3s ease, transform 0.3s var(--pw-kurve);
}
.pw-feil:not(:empty) { opacity: 1; transform: none; }

.pw-slagord { position: absolute; left: 50%; right: var(--pw-innrykk); bottom: var(--pw-luft); margin: 0; font-size: var(--pw-str-liten); line-height: 1.35; color: var(--pw-gra); }
.pw-slagord span { color: var(--pw-tekst); }

/* ---------- Parentesene rundt feltet ---------- */
.pw-klammer { position: relative; }
.pw-felt { clip-path: inset(0 0 0 0); }
.pw-ramme { position: absolute; inset: 0; pointer-events: none; font-size: var(--pw-str-felt); line-height: 1.15; }
.pw-ramme > span { position: absolute; top: 0; }
.pw-ramme--v > span { right: 100%; margin-right: var(--pw-klammer-luft); }
.pw-ramme--h > span { left: 100%; margin-left: var(--pw-klammer-luft); }
.pw-bject {
	position: absolute;
	left: 50%;
	top: 0;
	padding-left: calc(var(--pw-klammer-luft) + 0.32em);
	font-size: var(--pw-str-felt);
	line-height: 1.15;
	white-space: pre;
	pointer-events: none;
}

/* ---------- Bevegelse (transform, opacity og clip-path) ---------- */
/* Lasting: «()» står lukket midt i feltet, så åpner det seg og passordfeltet kommer frem */
@keyframes pw-felt-apne { from { clip-path: inset(0 50% 0 50%); } }
@keyframes pw-v-apne { from { transform: translateX(50%); } }
@keyframes pw-h-apne { from { transform: translateX(-50%); } }
.pw-felt { animation: pw-felt-apne var(--pw-klammer-apne) var(--pw-klammer-kurve) var(--pw-klammer-start) backwards; }
.pw-ramme--v { animation: pw-v-apne var(--pw-klammer-apne) var(--pw-klammer-kurve) var(--pw-klammer-start) backwards; }
.pw-ramme--h { animation: pw-h-apne var(--pw-klammer-apne) var(--pw-klammer-kurve) var(--pw-klammer-start) backwards; }

/* Riktig passord: parentesene lukker seg over feltet → «()», så skrives «bject» */
.er-lukker .pw-felt { animation: none; clip-path: inset(0 50% 0 50%); transition: clip-path var(--pw-klammer-lukk) var(--pw-klammer-kurve); }
.er-lukker .pw-ramme { animation: none; transition: transform var(--pw-klammer-lukk) var(--pw-klammer-kurve); }
.er-lukker .pw-ramme--v { transform: translateX(50%); }
.er-lukker .pw-ramme--h { transform: translateX(-50%); }
.er-lukker .pw-feil { opacity: 0; }

@keyframes pw-slor-inn { from { opacity: 0; } }
@keyframes pw-opp { from { opacity: 0; transform: translateY(var(--pw-glid)); } }
@keyframes pw-tegn { from { transform: scaleX(0); } }
@keyframes pw-rist { 20% { transform: translateX(-10px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(2px); } }
@keyframes pw-puls { to { opacity: 0.3; } }

.pw-side::before { animation: pw-slor-inn 0.8s ease backwards; }

.pw-panel { animation: pw-opp 0.9s var(--pw-kurve) 0.15s backwards; }
.pw-inn { animation: pw-opp 0.8s var(--pw-kurve) calc(0.45s + var(--i, 0) * 0.07s) backwards; }
.pw-etikett { --i: 1; } .pw-dato { --i: 2; } .pw-klammer { --i: 3; } .pw-slagord { --i: 5; }

.pw-felt.er-feil { animation: pw-rist 0.45s ease-out; }
.er-sender .pw-pil { animation: pw-puls 0.6s ease-in-out infinite alternate; }

/* Riktig passord: man «går gjennom» feltet og inn i siden.
   Feltet vokser litt mot deg og toner ut, sløret letter og forsiden blir skarp. Bare transform og opacity. */
.er-inne .pw-panel { opacity: 0; transform: scale(var(--pw-inn-skala)); transition: opacity 0.5s ease 0.05s, transform 0.95s var(--pw-inn-kurve); }
.er-inne .pw-side::before { opacity: 0; transition: opacity 0.85s var(--pw-inn-kurve) 0.1s; }
.er-inne .pw-side { pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
	.pw-side { --pw-glid: 0px; --pw-inn-skala: 1; }
	.pw-felt.er-feil { animation: none; }
	.pw-hint, .pw-pil { transition-property: opacity; }
	.pw-felt, .pw-ramme { animation: none !important; transition: none !important; }
	.pw-ramme { transform: none !important; }
}

/* Mobil */
@media (max-width: 767px) {
	.pw-side { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
	.pw-panel { height: min(var(--pw-hoyde-mobil), calc(100svh - 2 * var(--pw-marg) - env(safe-area-inset-top) - env(safe-area-inset-bottom))); }
	.pw-etikett { left: auto; right: var(--pw-luft); }
	.pw-dato { display: none; }
	.pw-skjema, .pw-slagord { left: var(--pw-luft); right: var(--pw-luft); }
	.pw-input { padding-right: calc(var(--pw-pil) + 12px); }
	.pw-pil { right: 0; }
}