/* Natthimlen i 3D: duken tonar in när första bilden är ritad, etiketten är riktig HTML */

.himmel-3d { opacity: 0; transition: opacity 1.6s cubic-bezier(.16, 1, .3, 1); }
.himmel-3d.himmel-klar { opacity: 1; }

.himmel-etiketter { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; contain: strict; }

.himmel-etikett {
  --sc: 243 238 226;
  --storlek: 22px;
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  will-change: transform;
  transition: opacity .6s ease;
}
.himmel-etikett.ut { opacity: 0; }

/* WebGL-instrumentet är belyst geometri; atlasringarna finns kvar som reserv. */
.med-objekt .he-ringar { visibility: hidden; }
.med-objekt .he-glod {
  left: -48px; top: -48px; width: 96px; height: 96px;
  background: radial-gradient(circle, #fff9e9 0, rgb(var(--sc) / .62) 3%,
    rgb(var(--sc) / .17) 12%, rgb(var(--sc) / .035) 39%, transparent 68%);
}
.med-objekt .he-namn {
  color: #fff4df;
  text-shadow: 0 1px 0 #a29379, 0 2px 1px #3a352f, 0 4px 10px #000c, 0 0 28px #edd4a523;
}

/* Stjärnans eget ljus kring den, i dess färg */
.he-glod {
  position: absolute; left: -36px; top: -36px; width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle, rgb(255 255 255 / .9) 0, rgb(var(--sc) / .75) 8%, rgb(var(--sc) / .2) 30%, rgb(var(--sc) / .06) 50%, rgb(var(--sc) / 0) 70%);
  mix-blend-mode: screen;
  opacity: 0; transform: scale(.3);
  transition: opacity 1s ease, transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.himmel-etikett:not(.med-glod) .he-glod, .himmel-etikett:not(.med-glod) .he-kors { display: none; }

.he-ringar, .he-ledare { position: absolute; overflow: visible; max-width: none; }
.he-ringar { left: -30px; top: -30px; }
.he-ring { fill: none; stroke: #c9a86a; stroke-width: 1.2; stroke-dasharray: 100; stroke-dashoffset: 100;
  transform: rotate(-90deg); transition: stroke-dashoffset 1.3s cubic-bezier(.65, 0, .35, 1) .1s; }
.he-ring2 { stroke-width: 1; opacity: .35; transition-delay: .3s; }
.he-kors { stroke: rgb(var(--sc) / .45); stroke-width: 1; opacity: 0; transition: opacity 1s ease .5s; }

.he-ledare { left: 0; top: -30px; }
.he-ledare path { fill: none; stroke: rgb(201 168 106 / .7); stroke-width: 1.2;
  stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .6s ease .55s; }
.himmel-etikett.vanster .he-ledare { left: -44px; transform: scaleX(-1); }

.he-namn {
  position: absolute; left: 46px; top: -26px; transform: translate(0, -50%);
  width: max-content; max-width: var(--namnbredd, none);
  /* Systemtypsnittet, som resten av gränssnittet (på Apple-enheter SF Pro) */
  font: 500 var(--storlek)/1 -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: normal; line-height: 1.25; letter-spacing: -.012em; color: #f5f5f7; white-space: normal;
  text-shadow: 0 0 14px rgb(0 0 0 / .9), 0 0 3px rgb(0 0 0 / .7);
  opacity: 0; transition: opacity .2s linear .7s, transform 1.1s var(--e-ut, cubic-bezier(.16, 1, .3, 1)) .7s;
}
/* Bokstäverna skrivs fram från ledarlinjen och utåt, som bläck som fäster */
.he-namn span { display: inline-block; white-space: pre; opacity: 0; transform: translateY(.28em);
  transition: opacity .6s ease calc(.72s + var(--i, 0) * 32ms), transform .9s var(--e-ut, cubic-bezier(.16, 1, .3, 1)) calc(.72s + var(--i, 0) * 32ms); }
.himmel-etikett.syns .he-namn span { opacity: 1; transform: none; }
.himmel-etikett:not(.vanster) .he-namn { transform: translate(-6px, -50%); }
.himmel-etikett.vanster .he-namn { left: auto; right: 46px; transform: translate(6px, -50%); }
.himmel-etikett.utan-text .he-ledare, .himmel-etikett.utan-text .he-namn { display: none; }

.himmel-etikett.syns .he-glod { opacity: 1; transform: none; animation: he-landar 1.6s var(--e-ut, cubic-bezier(.16, 1, .3, 1)) both; }
/* Stjärnan blixtrar till en gång när namnet landar, sedan lugnar den sig */
@keyframes he-landar { 0% { opacity: 0; transform: scale(.3); } 30% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: none; } }
.himmel-etikett.syns .he-ring { stroke-dashoffset: 0; }
.himmel-etikett.syns .he-kors { opacity: 1; }
.himmel-etikett.syns .he-ledare path { stroke-dashoffset: 0; }
.himmel-etikett.syns .he-namn { opacity: 1; transform: translate(0, -50%); }

@media (prefers-reduced-motion: reduce) {
  .himmel-3d, .himmel-etikett * { transition: none !important; animation: none !important; }
}