/* ALVISS — hero orbit visuals.
   Copied verbatim from design/Alviss hero (standalone Hero).html (unpacked bundle).
   The source page's tokens the orbit consumes are defined here under their
   original names and values (they don't collide with the v1 skin tokens). */
:root {
  --accent: #4055e3;
  --accent-bright: #6f86ff;
  --accent-ice: #b9c6ff;
  --accent-glow: rgba(64, 85, 227, 0.35);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

#plexus {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.85;
}

/* hero mark */
.hero-mark {
  position: relative;
  display: grid;
  place-items: center;
}
.hero-mark img {
  position: relative;
  z-index: 1;
  width: min(60%, 240px);
  filter: drop-shadow(0 0 60px rgba(64, 85, 227, 0.45)) drop-shadow(0 30px 60px rgba(0,0,0,0.6));
  animation: markFloat 7s ease-in-out infinite;
}
@keyframes markFloat {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-16px) rotate(0.8deg); }
}
.hero-mark::before {
  content: "";
  position: absolute;
  width: min(124%, 520px);
  aspect-ratio: 1;
  border: 1px solid rgba(111, 134, 255, 0.18);
  transform: rotate(45deg);
  animation: ringSpin 26s linear infinite;
}
.hero-mark::after {
  content: "";
  position: absolute;
  width: min(142%, 600px);
  aspect-ratio: 1;
  border: 1px dashed rgba(111, 134, 255, 0.1);
  transform: rotate(45deg);
  animation: ringSpin 40s linear infinite reverse;
}
@keyframes ringSpin {
  from { transform: rotate(45deg); }
  to { transform: rotate(405deg); }
}

/* orbiting satellites */
.orbits { position: absolute; z-index: 3; left: 50%; top: 50%; width: min(100%, 420px); aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-items: center; pointer-events: none; }
.orbit {
  position: absolute;
  width: var(--r);
  aspect-ratio: 1;
  animation: orbitSpin var(--dur) linear infinite;
  animation-delay: var(--delay);
}
.orbit.rev { animation-direction: reverse; }
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.sat {
  position: absolute;
  top: 0; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  display: grid;
  place-items: center;
  color: var(--accent-ice);
  background: rgba(11, 13, 21, 0.72);
  border: 1px solid rgba(111, 134, 255, 0.32);
  backdrop-filter: blur(3px);
  box-shadow: 0 0 20px rgba(64, 85, 227, 0.22);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  animation: satUpright var(--dur) linear infinite;
  animation-delay: var(--delay);
}
.orbit.rev .sat { animation-direction: reverse; }
@keyframes satUpright { to { transform: rotate(-360deg); } }
.sat svg { width: 20px; height: 20px; }
.orbit.o1 { --r: 80%; --dur: 26s; --delay: 0s; z-index: 2; }
.orbit.o2 { --r: 96%; --dur: 46s; --delay: -11s; z-index: 2; }
.orbit.o3 { --r: 100%; --dur: 40s; --delay: -26s; z-index: 1; }
.orbit.fixed { z-index: 2; }
/* SMS + telefon mot klokka, anmeldelser med klokka — passeringene blir korte, og SMS/telefon ligger øverst */
.orbit.o1, .orbit.o1 .sat, .orbit.o2, .orbit.o2 .sat { animation-direction: reverse; }

/* --- signal beams: satellite → logo → satellite --- */
.beam {
  position: absolute;
  top: 0; left: 50%;
  width: 2px; height: 50%;
  margin-left: -1px;
  pointer-events: none;
}
.beam::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(111,134,255,0.28), rgba(111,134,255,0));
  opacity: 0;
  transition: opacity 0.5s;
}
.orbit.ping-in .beam::before, .orbit.ping-out .beam::before { opacity: 1; }
/* radio-wave arcs: stacked curves travelling the radius */
.beam b {
  position: absolute;
  left: 50%;
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 2px solid transparent;
  border-radius: 50%;
  color: var(--accent-bright);
  opacity: 0;
}
.beam b.iw { border-bottom-color: currentColor; }
.beam b.ow { border-top-color: currentColor; }
.beam b.w2 { width: 25px; height: 25px; margin: -12.5px 0 0 -12.5px; border-width: 1.8px; }
.beam b.w3 { width: 17px; height: 17px; margin: -8.5px 0 0 -8.5px; border-width: 1.6px; }
.orbit.ping-in .beam b.iw { animation: arcIn 1s ease-out forwards; }
.orbit.ping-out .beam b.ow { animation: arcOut 1.05s ease-out forwards; }
.orbit.ping-in .beam b.iw.w2, .orbit.ping-out .beam b.ow.w2 { animation-delay: 0.1s; }
.orbit.ping-in .beam b.iw.w3, .orbit.ping-out .beam b.ow.w3 { animation-delay: 0.2s; }
@keyframes arcIn {
  0% { top: 0; opacity: 0; transform: scale(0.5); }
  20% { opacity: 0.95; }
  70% { opacity: 0.6; }
  100% { top: 42%; opacity: 0; transform: scale(1.3); }
}
@keyframes arcOut {
  0% { top: 42%; opacity: 0; transform: scale(1.3); }
  20% { opacity: 0.95; }
  70% { opacity: 0.6; }
  100% { top: 0; opacity: 0; transform: scale(0.5); }
}
.sat { transition: border-color 0.45s, box-shadow 0.45s, color 0.45s; }
.orbit.hot .sat {
  border-color: rgba(185, 198, 255, 0.85);
  color: #fff;
  box-shadow: 0 0 26px rgba(111, 134, 255, 0.75), inset 0 0 14px rgba(64, 85, 227, 0.4);
}

/* --- reply waves radiating from the mark --- */
.waves {
  position: absolute;
  z-index: 2;
  left: 50%; top: 50%;
  width: min(100%, 420px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.waves span {
  position: absolute;
  inset: 0;
  border-radius: 2px;
  border: 1px solid var(--accent-bright);
  transform: rotate(45deg) scale(0.16);
  opacity: 0;
}
.hero-mark.reply .waves span { animation: waveOut 2.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards; }
.hero-mark.reply .waves span:nth-child(2) { animation-delay: 0.22s; }
.hero-mark.reply .waves span:nth-child(3) { animation-delay: 0.44s; }
@keyframes waveOut {
  0% { transform: rotate(45deg) scale(0.42); opacity: 0; }
  22% { opacity: 0.65; }
  100% { transform: rotate(45deg) scale(1.18); opacity: 0; }
}
.core-glow {
  position: absolute;
  z-index: 0;
  left: 50%; top: 50%;
  width: min(80%, 320px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, var(--accent-glow), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.hero-mark.reply .core-glow { animation: coreFlash 1.4s ease-out forwards; }
@keyframes coreFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.7); }
  16% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.24); }
}
.orbit.o2 .sat { animation-direction: reverse; }

/* --- google-review star boost: logo -> stjerne-satellitt --- */
/* the review chip is an anchor point; the chip itself grows with each star */
.orbit.o3 .sat {
  width: 0; height: 0; margin: 0;
  border: 0; background: none; box-shadow: none; backdrop-filter: none; clip-path: none;
  display: block; overflow: visible;
}
.orbit.o3 .chip {
  position: absolute;
  left: 0; top: 0;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  padding: 12px 14px;
  color: var(--accent-ice);
  background: rgba(11, 13, 21, 0.78);
  border: 1px solid rgba(111, 134, 255, 0.32);
  backdrop-filter: blur(3px);
  box-shadow: 0 0 20px rgba(64, 85, 227, 0.22);
  clip-path: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  transition: color 0.45s, border-color 0.45s, box-shadow 0.45s;
}
.rating { display: flex; align-items: center; }
.rating i {
  width: 0; height: 18px;
  overflow: hidden;
  opacity: 0;
  transition: width 0.55s var(--ease-out), margin-left 0.55s var(--ease-out), opacity 0.4s, color 0.4s, transform 0.4s;
}
.rating i svg { width: 18px; height: 18px; display: block; }
.rating i.in { width: 18px; opacity: 1; }
.rating i.in + i.in, .rating i.in ~ i.in { margin-left: 4px; }
.rating i.pop { transform: scale(1.35); }
.orbit.warm4 .chip { color: #e3c069; border-color: rgba(227, 192, 105, 0.55); box-shadow: 0 0 26px rgba(227, 192, 105, 0.32); }
.orbit.gold .chip { color: #ffc93c; border-color: rgba(255, 201, 60, 0.85); box-shadow: 0 0 36px rgba(255, 201, 60, 0.5), inset 0 0 16px rgba(255, 201, 60, 0.18); }
.orbit.gold .rating i.in { filter: drop-shadow(0 0 5px rgba(255, 201, 60, 0.8)); }
/* blå Alviss-puls i chipen når stjernen treffer */
.orbit.hit .chip { animation: chipHit 0.7s ease-out; }
@keyframes chipHit { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 28% { transform: translate(-50%, -50%) scale(1.05); border-color: rgba(185, 198, 255, 0.95); box-shadow: 0 0 32px rgba(111, 134, 255, 0.8), inset 0 0 14px rgba(64, 85, 227, 0.45); } }
.star-beam .shot {
  position: absolute;
  left: 50%; top: 42%;
  width: 16px; height: 16px;
  margin: -8px 0 0 -8px;
  color: var(--accent-ice);
  opacity: 0;
  text-decoration: none;
}
.star-beam .shot svg { width: 16px; height: 16px; display: block; filter: drop-shadow(0 0 8px currentColor); }
.orbit.warm4 .star-beam .shot { color: #e3c069; }
.orbit.gold .star-beam .shot { color: #ffc93c; }
.orbit.shooting .star-beam .shot { animation: starShot 1.05s cubic-bezier(0.3, 0, 0.5, 1) forwards; }
.orbit.shooting .beam::before { opacity: 1; }
@keyframes starShot {
  0% { top: 42%; opacity: 0; transform: scale(0.4) rotate(0deg); }
  20% { opacity: 1; transform: scale(1) rotate(70deg); }
  82% { opacity: 1; }
  100% { top: 0; opacity: 0; transform: scale(1.5) rotate(330deg); }
}
.orbit.o3 .ring {
  position: absolute;
  left: 50%; top: 0;
  width: 64px; height: 64px;
  margin: -32px 0 0 -32px;
  border: 1px solid rgba(255, 201, 60, 0.9);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.orbit.burst .ring { animation: starBurst 0.9s ease-out forwards; }
@keyframes starBurst {
  0% { opacity: 0.9; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.7); }
}

/* --- CRM: fixed satellite up-left, permanently beamed to the mark --- */
.orbit.fixed { --r: 122%; animation: none; transform: rotate(-46deg); }
.orbit.fixed .sat { animation: crmFloat 5.2s ease-in-out infinite; transform: rotate(46deg); width: 56px; height: 56px; margin: -28px 0 0 -28px; color: var(--accent-bright); background: rgba(28, 33, 52, 0.9); border-color: rgba(185, 198, 255, 0.5); box-shadow: 0 10px 28px rgba(64, 85, 227, 0.32), 0 0 22px rgba(111, 134, 255, 0.28); clip-path: polygon(11px 0, 100% 0, 100% calc(100% - 11px), calc(100% - 11px) 100%, 0 100%, 0 11px); }
@keyframes crmFloat { 0%, 100% { transform: rotate(46deg) translateY(0); } 50% { transform: rotate(46deg) translateY(-6px); } }
.orbit.fixed.hot .sat, .orbit.fixed.hot .sat svg { color: var(--accent-ice); }
.orbit.fixed .sat svg { width: 34px; height: 34px; }
.crm-beam::before { opacity: 1; background: linear-gradient(180deg, rgba(111,134,255,0.34), rgba(111,134,255,0.04)); }
.crm-beam em { position: absolute; left: 50%; opacity: 0; font-style: normal; }
.crm-beam .pulse {
  width: 2px; height: 26px;
  margin: -13px 0 0 -1px;
  border-radius: 2px;
  background: linear-gradient(0deg, rgba(185,198,255,0) 0%, var(--accent-bright) 55%, #fff 100%);
}
.orbit.dock-out .pulse { animation: crmPulseOut 0.85s cubic-bezier(0.4, 0, 0.5, 1) forwards; }
@keyframes crmPulseOut {
  0% { top: 42%; opacity: 0; }
  18% { opacity: 1; }
  82% { opacity: 1; }
  100% { top: 0; opacity: 0; }
}
.crm-beam .mini {
  width: 15px; height: 15px;
  margin: -7.5px 0 0 -7.5px;
  color: var(--accent-ice);
}
.crm-beam .mini svg { width: 15px; height: 15px; display: block; filter: drop-shadow(0 0 6px rgba(111, 134, 255, 0.9)); }

.orbit.docking .crm-beam .mini.m2 { animation-delay: 0.13s; }
.orbit.docking .crm-beam .mini.m3 { animation-delay: 0.26s; }
.orbit.docking .crm-beam .mini.m4 { animation-delay: 0.39s; }
.orbit.docking .crm-beam .mini.m5 { animation-delay: 0.52s; }
@keyframes crmDock {
  0% { top: 0; opacity: 0; transform: scale(1.1); }
  14% { opacity: 1; }
  76% { opacity: 1; transform: scale(0.8); }
  100% { top: 44%; opacity: 0; transform: scale(0.25); }
}
.orbit.fixed.hot .sat { border-color: rgba(185, 198, 255, 0.85); box-shadow: 0 12px 30px rgba(64, 85, 227, 0.4), 0 0 30px rgba(111, 134, 255, 0.5); }

/* --- kontakter som spawner ved CRM og flyr videre --- */
.contacts { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.contact {
  position: absolute;
  width: 17px; height: 17px;
  margin: -8.5px 0 0 -8.5px;
  color: var(--accent-ice);
}
.contact svg { width: 17px; height: 17px; display: block; filter: drop-shadow(0 0 6px rgba(111, 134, 255, 0.85)); }

@media (prefers-reduced-motion: reduce) {
  .hero-mark img, .hero-mark::before, .hero-mark::after { animation: none; }
  .orbit, .sat { animation: none; }
  .beam b, .waves span, .core-glow { animation: none !important; opacity: 0; }
}