/* OBJECT etc – logoen: parentesene er en maske som lukker og åpner seg over «Object».
   Tider og kurve: --logo-variablene i style.css. Bare transform, opacity og clip-path. */

.obj-logo, .navbar__logo[data-logo] { position: relative; display: inline-block; -webkit-tap-highlight-color: transparent; }
.obj-logo__ord { display: inline-block; clip-path: inset(0 0 0 0); }

/* Hver parentes sitter i en ramme like bred som ordet: rammen flyttes 50 % = halve ordet */
.obj-logo__ramme { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.obj-logo__ramme > span { position: absolute; top: 0; }
.obj-logo__ramme--v > span { right: 100%; margin-right: var(--logo-luft); }
.obj-logo__ramme--h > span { left: 100%; margin-left: var(--logo-luft); }

/* «etc» bak logoen (hover på PC) */
.obj-logo__etc { position: absolute; left: 100%; top: 0; padding-left: 0.28em; white-space: pre; color: var(--logo-etc-farge); pointer-events: none; }

/* 1. Siden lastes: «()» åpner seg og avdekker ordet, så forsvinner parentesene */
@keyframes logo-ord-apne { from { clip-path: inset(0 50% 0 50%); } }
/* Parentesene: åpner seg i samme takt som ordet (første 2/3), toner så ut (siste 1/3) */
@keyframes logo-v-apne { from { transform: translateX(50%); opacity: 1; animation-timing-function: var(--logo-kurve); } 66.67% { transform: none; opacity: 1; animation-timing-function: ease; } to { transform: none; opacity: 0; } }
@keyframes logo-h-apne { from { transform: translateX(-50%); opacity: 1; animation-timing-function: var(--logo-kurve); } 66.67% { transform: none; opacity: 1; animation-timing-function: ease; } to { transform: none; opacity: 0; } }

.hand-js .navbar__logo[data-logo] .obj-logo__ord { animation: logo-ord-apne var(--logo-apne) var(--logo-kurve) var(--logo-start) backwards; }
.hand-js .navbar__logo[data-logo] .obj-logo__ramme--v { animation: logo-v-apne calc(var(--logo-apne) * 1.5) linear var(--logo-start) backwards; }
.hand-js .navbar__logo[data-logo] .obj-logo__ramme--h { animation: logo-h-apne calc(var(--logo-apne) * 1.5) linear var(--logo-start) backwards; }

/* 2. Klikk på en lenke (html.forlater): parentesene kommer frem og lukker seg til «()» */
.forlater .navbar__logo[data-logo] .obj-logo__ord,
.forlater .navbar__logo[data-logo] .obj-logo__ramme { animation: none; }
.forlater .navbar__logo[data-logo] .obj-logo__ord { clip-path: inset(0 50% 0 50%); transition: clip-path var(--bev-overgang-varighet) var(--logo-kurve); }
.forlater .navbar__logo[data-logo] .obj-logo__ramme { opacity: 1; transition: opacity 0.12s ease, transform var(--bev-overgang-varighet) var(--logo-kurve); }
.forlater .navbar__logo[data-logo] .obj-logo__ramme--v { transform: translateX(50%); }
.forlater .navbar__logo[data-logo] .obj-logo__ramme--h { transform: translateX(-50%); }
.forlater .obj-logo__etc { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
	.hand-js .navbar__logo[data-logo] .obj-logo__ord,
	.hand-js .navbar__logo[data-logo] .obj-logo__ramme { animation: none; }
	.forlater .navbar__logo[data-logo] .obj-logo__ord { clip-path: none; }
	.forlater .navbar__logo[data-logo] .obj-logo__ramme { opacity: 0; }
}