/* Editable service constellation based on the owner's current site. */
.universe {
  isolation: isolate;
  min-height: 640px;
  background:
    radial-gradient(ellipse 36% 30% at 50% 47%, rgba(172,32,27,.27), transparent 78%),
    radial-gradient(ellipse 70% 32% at 50% 105%, rgba(92,25,22,.38), transparent 75%),
    #050406;
  border-top: 1px solid rgba(255,145,130,.16);
}
.universe::before {
  content: '';
  position: absolute;
  inset: 47% -20% -40%;
  z-index: -1;
  opacity: .48;
  transform: perspective(520px) rotateX(67deg);
  transform-origin: center top;
  background-image:
    linear-gradient(rgba(232,88,74,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(232,88,74,.12) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(transparent, #000 37%, transparent 96%);
}
.universe::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 20%, rgba(0,0,0,.6));
}
.universe__ambient {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .5;
  background-image:
    radial-gradient(circle at 12% 22%, #e96d58 0 1px, transparent 3px),
    radial-gradient(circle at 78% 18%, #d36a59 0 1px, transparent 3px),
    radial-gradient(circle at 85% 73%, #ee8471 0 1px, transparent 3px),
    radial-gradient(circle at 27% 77%, #d86a5a 0 1px, transparent 3px),
    radial-gradient(circle at 59% 31%, #e09e8a 0 1px, transparent 3px);
  background-size: 360px 280px, 430px 340px, 520px 390px, 460px 340px, 580px 430px;
  animation: uniSparkle 8s ease-in-out infinite alternate;
}
.universe__ribbon {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 0 9px rgba(255,89,70,.84)) drop-shadow(0 0 24px rgba(210,36,28,.55));
}
.universe__ribbon path {
  fill: none;
  stroke: #ff786a;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1450 350;
  animation: uniTrace 14s linear infinite;
}
.universe__ribbon path + path {
  stroke: rgba(255,127,105,.35);
  stroke-width: 1;
  stroke-dasharray: 980 470;
  animation-duration: 19s;
  animation-direction: reverse;
}
.universe__title {
  top: clamp(28px, 5vh, 52px);
  width: min(620px, 80%);
  transform: translateX(-50%);
  opacity: 1;
  transition: none;
}
.universe.is-on .universe__title { transform: translateX(-50%); }
.universe__over, .universe__sub {
  font-family: var(--ui);
  text-transform: uppercase;
  letter-spacing: .34em;
  color: #c39083;
  font-size: clamp(9px, .75vw, 12px);
}
.universe__name {
  margin: 8px 0;
  font-family: 'Bodoni Moda', Georgia, serif;
  font-size: clamp(27px, 3.1vw, 48px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .12em;
  color: #f5ede8;
  text-shadow: 0 2px 18px #000;
}
.universe__sub { color: #c8aca4; letter-spacing: .23em; }
.universe__core {
  position: absolute;
  top: 51%;
  left: 50%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: clamp(220px, 24vw, 340px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(251,126,107,.16);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(176,37,29,.2), rgba(19,8,10,.75) 58%, transparent 69%);
  box-shadow: inset 0 0 65px rgba(231,65,50,.12), 0 0 90px rgba(182,33,26,.15);
  pointer-events: none;
}
.universe__core-ring {
  position: absolute;
  inset: 9%;
  z-index: 2;
  border: 1px solid rgba(247,111,90,.4);
  border-left-color: transparent;
  border-right-color: rgba(255,200,180,.1);
  border-radius: 50%;
  transform: rotate(-25deg);
  animation: uniOrbit 18s linear infinite;
}
.universe__portrait {
  position: absolute;
  inset: 9%;
  width: 82%;
  height: 82%;
  border-radius: 50%;
  object-fit: cover;
  object-position: 50% 18%;
  filter: saturate(.8) brightness(.82);
  box-shadow: 0 0 0 1px rgba(253,143,123,.36), 0 0 42px rgba(210,49,37,.28);
}
.universe__core-label {
  position: absolute;
  bottom: 12%;
  z-index: 3;
  padding: 6px 11px;
  border: 1px solid rgba(255,174,154,.5);
  border-radius: 999px;
  background: rgba(8,7,10,.87);
  box-shadow: 0 4px 18px rgba(0,0,0,.55);
  font-size: clamp(9px, .76vw, 12px);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #eab2a4;
}
.universe__cards { position: absolute; inset: 0; z-index: 4; }
.service-card {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: clamp(160px, 14.5vw, 225px);
  min-height: clamp(88px, 11vh, 116px);
  padding: clamp(12px, 1.25vw, 18px);
  border: 1px solid rgba(240,133,114,.35);
  border-radius: 13px;
  color: #f8f3f0;
  text-decoration: none;
  background: linear-gradient(142deg, rgba(45,25,25,.94), rgba(7,7,10,.94) 62%, rgba(50,18,17,.94));
  box-shadow: 0 16px 36px rgba(0,0,0,.68), inset 0 1px rgba(255,255,255,.09), 0 0 27px rgba(214,47,37,.12);
  backdrop-filter: blur(10px);
  transform: rotate(var(--r));
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.service-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, transparent, #ff8b74, transparent);
  opacity: .7;
}
.service-card:not(.service-card--static):hover, .service-card:focus-visible {
  z-index: 8;
  transform: translateY(-8px) rotate(0deg) scale(1.035);
  border-color: #ffa38e;
  box-shadow: 0 24px 48px rgba(0,0,0,.75), 0 0 35px rgba(229,60,47,.32);
  outline: none;
}
.service-card__no {
  color: #ef8e7d;
  font-size: clamp(8px, .65vw, 10px);
  font-weight: 600;
  letter-spacing: .21em;
}
.service-card strong {
  display: block;
  margin: 7px 0 4px;
  font-size: clamp(15px, 1.38vw, 21px);
  font-weight: 600;
  line-height: 1.17;
  letter-spacing: .01em;
}
.service-card__foot {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 6px;
  color: #bca6a0;
  font-size: clamp(9px, .7vw, 11px);
  line-height: 1.2;
}
.service-card__foot b { color: #ff8e7b; font-size: 17px; line-height: 1; }
.service-card--static { cursor: default; }
.service-card--center { border-color: rgba(255,161,139,.55); }
.universe.is-on .service-card { animation: uniArrive .7s var(--ease-out) var(--d) backwards; }
@keyframes uniArrive {
  from { opacity: 0; filter: blur(9px); translate: 0 24px; }
  to { opacity: 1; filter: blur(0); translate: 0 0; }
}
@keyframes uniTrace { to { stroke-dashoffset: -1800; } }
@keyframes uniOrbit { to { transform: rotate(335deg); } }
@keyframes uniSparkle { to { opacity: .9; transform: translateY(-12px); } }
@media (max-width: 900px) {
  .universe { height: auto; min-height: 100svh; padding: 42px 16px 58px; }
  .universe__title {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    transform: none;
  }
  .universe.is-on .universe__title { transform: none; }
  .universe__name { font-size: clamp(26px, 6vw, 42px); }
  .universe__sub { line-height: 1.5; }
  .universe__core {
    position: relative;
    top: auto;
    left: auto;
    width: 190px;
    margin: 28px auto 34px;
    transform: none;
  }
  .universe__core-label { bottom: 8%; }
  .universe__ribbon { height: 520px; top: 110px; }
  .universe__cards {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .service-card {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    min-height: 126px;
    transform: none;
  }
  .service-card strong { font-size: clamp(16px, 2.5vw, 21px); }
  .service-card__no { font-size: 9px; }
  .service-card__foot { font-size: 10px; }
  .service-card:not(.service-card--static):hover, .service-card:focus-visible { transform: translateY(-4px); }
  .service-card--center { grid-column: 1 / -1; }
}
@media (max-width: 360px) {
  .universe { padding-left: 12px; padding-right: 12px; }
  .universe__cards { gap: 9px; }
  .service-card { min-height: 140px; padding: 11px; }
  .service-card strong { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .universe__ambient, .universe__ribbon path, .universe__core-ring,
  .universe.is-on .service-card { animation: none; }
  .service-card { transition: none; }
}