/* Entren (js/entre.js): forsta oppningen varje dag. Loggan (bild och namn,
   samma klasser som i sidhuvudet) syns stort i mitten med en halsning,
   glider sedan upp och krymper till sin plats i sidhuvudet (--dx/--dy, matt
   av skriptet) medan fonden tonar bort och sidan tonar fram under. Loggan i
   sidhuvudet ar dold tills den flygande landat exakt ovanpa, och ugglan i
   hornet gor sin vanliga intagningsstuds forst nar allt ar klart.
   Allt pa en tidslinje (--entre-t), procent i nyckelbilderna. Overlagret
   slapper igenom klick. html.entre-hoppa: ett klick eller en tangent tonar
   bort allt direkt. Laddas sist av stilmallarna, sa reglerna har vinner. */

html.entre-pa { --entre-t: 1800ms; }

.entre { display: none; }
html.entre-pa .entre {
  --es: 2.4;
  --dx: 0px;
  --dy: 0px;
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2000;
  pointer-events: none;
  transition: opacity 160ms ease;
}
html.entre-hoppa .entre { opacity: 0; }

.entre-fond {
  position: absolute;
  inset: 0;
  background: var(--bg);
  animation: entre-fond var(--entre-t) ease both;
}

.entre-logga {
  position: absolute;
  left: 50%;
  top: calc(50% - 16px);
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(var(--es));
  animation: entre-logga var(--entre-t) both;
}
.entre-logga .brand-mark { animation: entre-mark var(--entre-t) both; }
.entre-logga .brand-name { animation: entre-namn var(--entre-t) both; }

.entre-halsning {
  position: absolute;
  left: 16px;
  right: 16px;
  top: calc(50% + 40px);
  margin: 0;
  text-align: center;
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text-soft);
  animation: entre-halsning var(--entre-t) both;
}
html[data-dygn="morgon"] .entre-halsning::before { content: "God morgon"; }
html[data-dygn="formiddag"] .entre-halsning::before { content: "God f\00F6rmiddag"; }
html[data-dygn="eftermiddag"] .entre-halsning::before { content: "God eftermiddag"; }
html[data-dygn="kvall"] .entre-halsning::before { content: "God kv\00E4ll"; }

/* Sidan bakom */
html.entre-pa .topbar .brand-mark,
html.entre-pa .topbar .brand-name,
html.entre-pa .maskot { visibility: hidden; }
html.entre-pa .maskot-knapp { animation: none; }
html.entre-pa main.shell,
html.entre-pa .announce,
html.entre-pa .topbar-right { animation: entre-sida var(--entre-t) both; }
html.entre-hoppa main.shell,
html.entre-hoppa .announce,
html.entre-hoppa .topbar-right { animation: none; }

@media (max-width: 520px) {
  html.entre-pa .entre { --es: 2.1; }
  .entre-halsning { top: calc(50% + 34px); }
}

@media (prefers-reduced-motion: reduce) {
  html.entre-pa .entre { display: none; }
  html.entre-pa .topbar .brand-mark,
  html.entre-pa .topbar .brand-name,
  html.entre-pa .maskot { visibility: visible; }
  html.entre-pa main.shell,
  html.entre-pa .announce,
  html.entre-pa .topbar-right { animation: none; }
}

/* Tidslinjen, 1800 ms: loggan och halsningen in 0-430, star still till 1100
   (Renwar 2026-10-21: "behover stanna upp lite till"), flyger upp 1100-1690
   medan fonden tonar bort och sidan tonar fram. */
@keyframes entre-fond { 0%, 61% { opacity: 1; } 92%, 100% { opacity: 0; } }
@keyframes entre-logga {
  0% { opacity: 0; filter: blur(6px); transform: translate(-50%, -50%) scale(calc(var(--es) * 0.94)); }
  17% { opacity: 1; filter: blur(0); transform: translate(-50%, -50%) scale(var(--es)); }
  61% { opacity: 1; transform: translate(-50%, -50%) scale(var(--es)); animation-timing-function: cubic-bezier(0.65, 0, 0.25, 1); }
  94%, 100% { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); }
}
@keyframes entre-mark {
  0% { transform: scale(0.8) rotate(-6deg); animation-timing-function: cubic-bezier(0.34, 1.4, 0.64, 1); }
  18%, 100% { transform: none; }
}
@keyframes entre-namn {
  0%, 5% { opacity: 0; transform: translateX(-6px); clip-path: inset(-20% 100% -20% 0); }
  22%, 100% { opacity: 1; transform: none; clip-path: inset(-20% 0 -20% 0); }
}
@keyframes entre-halsning {
  0%, 12% { opacity: 0; transform: translateY(6px); }
  24%, 54% { opacity: 1; transform: none; }
  61%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes entre-sida {
  0%, 61% { opacity: 0; transform: translateY(10px); }
  96%, 100% { opacity: 1; transform: none; }
}