/* The selected portal entrance, scoped to the five existing homepage boxes. */
body.home #hero .tugan-service-cards[data-tugan-portals] > .reveal-card {
  position: relative;
  isolation: isolate;
  --portal-color: #d19aff;
  --portal-rgb: 209, 154, 255;
}
body.home #hero .tugan-portal-content {
  position: relative;
  z-index: 2;
  transform-style: preserve-3d;
}
body.home #hero [data-tugan-portal-state="waiting"] > .tugan-portal-content { opacity: 0; }
body.home #hero [data-tugan-portal-state="playing"] > .tugan-portal-content { will-change: transform, opacity, filter; }
body.home #hero .tugan-portal-fx { position: absolute; pointer-events: none; opacity: 0; z-index: 3; }
body.home #hero .tugan-portal-ring,
body.home #hero .tugan-portal-inner {
  left: 50%; top: 37%; width: min(98%, 230px); aspect-ratio: 1;
  border-radius: 50%; border: 2px solid var(--portal-color);
  box-shadow: 0 0 18px rgba(var(--portal-rgb), .75), inset 0 0 18px rgba(var(--portal-rgb), .6);
}
body.home #hero .tugan-portal-ring::before,
body.home #hero .tugan-portal-ring::after {
  content: ""; position: absolute; inset: -10px; border-radius: inherit;
  border: 1px dashed rgba(var(--portal-rgb), .7);
}
body.home #hero .tugan-portal-ring::after { inset: 8px; border-style: solid; opacity: .5; }
body.home #hero .tugan-portal-inner {
  z-index: 0; width: min(84%, 194px); border-width: 1px;
  background: radial-gradient(circle, rgba(var(--portal-rgb), .2), rgba(57, 14, 91, .08) 58%, rgba(var(--portal-rgb), .3) 75%, transparent);
}
body.home #hero .tugan-portal-ground {
  z-index: 0; left: 8%; right: 8%; bottom: -10px; height: 22px;
  border: 1px solid rgba(var(--portal-rgb), .8); border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--portal-rgb), .22), transparent 68%);
  box-shadow: 0 0 22px rgba(var(--portal-rgb), .3), inset 0 0 14px rgba(var(--portal-rgb), .22);
}