/**
 * Sekaira — Dimensional portals (3D spatial gateways, not cards)
 */

/* —— Nexus chamber —— */
.nexus-chamber {
  position: relative;
  width: min(1280px, 100%);
  margin-inline: auto;
  min-height: min(94vh, 920px);
  overflow: visible;
  --safe-w: clamp(280px, 42vw, 520px);
  --safe-h: clamp(320px, 52vh, 520px);
}

.nexus-hero .nexus-chamber {
  background: none;
  border: 0;
  box-shadow: none;
}

.nexus-chamber--hub {
  min-height: auto;
  margin-top: 1rem;
  overflow: visible;
  padding-bottom: 1rem;
}

.nexus-chamber--hub .nexus-chamber__space {
  position: relative;
  inset: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  gap: clamp(1rem, 3vw, 2rem) clamp(0.75rem, 2vw, 1.5rem);
  align-items: end;
  justify-items: center;
  min-height: 0;
  padding: 1rem clamp(0.5rem, 2vw, 1rem) 2.5rem;
  perspective: none;
  overflow: visible;
}

.nexus-chamber--hub .dimensional-portal {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: min(100%, 260px) !important;
  margin: 0;
  transform: none !important;
  translate: none;
  opacity: 1 !important;
  filter: none !important;
}

.nexus-chamber--hub .dimensional-portal--cyberpunk { grid-column: 1; grid-row: 1; }
.nexus-chamber--hub .dimensional-portal--rsps { grid-column: 2; grid-row: 1; }
.nexus-chamber--hub .dimensional-portal--eastern { grid-column: 3; grid-row: 1; }
.nexus-chamber--hub .dimensional-portal--minecraft { grid-column: 1; grid-row: 2; }
.nexus-chamber--hub .dimensional-portal--jungle { grid-column: 2; grid-row: 2; }
.nexus-chamber--hub .dimensional-portal--rust { grid-column: 3; grid-row: 2; }

.nexus-chamber--hub .dimensional-portal--jungle {
  width: min(100%, 200px) !important;
  opacity: 0.72 !important;
}

.nexus-chamber__atmosphere {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: none;
}

.nexus-hero .nexus-chamber__atmosphere {
  background:
    radial-gradient(ellipse 70% 55% at 18% 62%, rgba(46, 200, 255, 0.05) 0%, transparent 65%),
    radial-gradient(ellipse 65% 50% at 82% 38%, rgba(216, 76, 255, 0.04) 0%, transparent 62%),
    radial-gradient(ellipse 50% 40% at 50% 88%, rgba(46, 200, 255, 0.04) 0%, transparent 55%);
}

.nexus-chamber--hub .nexus-chamber__atmosphere {
  background:
    radial-gradient(ellipse 80% 60% at 50% 80%, rgba(46, 200, 255, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 100% 40% at 50% 100%, rgba(0, 0, 0, 0.5) 0%, transparent 70%);
}

/* Central safe zone — portals must not intrude; soft glow only */
.nexus-chamber__safe-zone {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--safe-w);
  height: var(--safe-h);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 8;
  background:
    radial-gradient(ellipse 68% 62% at 50% 42%, rgba(46, 200, 255, 0.07) 0%, transparent 72%),
    radial-gradient(ellipse 55% 50% at 50% 48%, rgba(216, 76, 255, 0.04) 0%, transparent 78%);
}

.nexus-chamber__dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.45;
  background-image:
    radial-gradient(1px 1px at 12% 28%, rgba(255, 255, 255, 0.45), transparent),
    radial-gradient(1px 1px at 78% 18%, rgba(46, 200, 255, 0.5), transparent),
    radial-gradient(1px 1px at 88% 72%, rgba(216, 76, 255, 0.35), transparent),
    radial-gradient(1px 1px at 22% 82%, rgba(255, 255, 255, 0.3), transparent);
  animation: nexusDust 14s ease-in-out infinite;
}

@keyframes nexusDust {
  0%, 100% { opacity: 0.35; transform: translateY(0); }
  50% { opacity: 0.55; transform: translateY(-6px); }
}

.nexus-chamber__floor-glow {
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: min(75vw, 680px);
  height: min(30vw, 240px);
  transform: translateX(-50%) rotateX(78deg);
  transform-origin: center bottom;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(46, 200, 255, 0.14) 0%, transparent 68%);
  opacity: 0.65;
  pointer-events: none;
  z-index: 1;
}

.nexus-chamber__space {
  position: absolute;
  inset: 0;
  perspective: 1500px;
  perspective-origin: 50% 40%;
  transform-style: preserve-3d;
  z-index: 2;
}

.nexus-chamber__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 12;
  text-align: center;
  width: min(88%, 26rem);
  pointer-events: none;
  background: none;
  border: 0;
  box-shadow: none;
}

.nexus-chamber__core .nexus-scene__emblem {
  filter: drop-shadow(0 0 40px rgba(46, 200, 255, 0.35));
}

.nexus-chamber__core .nexus-scene__title,
.nexus-chamber__core .nexus-scene__brand,
.nexus-chamber__core .nexus-scene__lede {
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.85), 0 0 40px rgba(5, 6, 12, 0.6);
}

.nexus-chamber__core .nexus-search {
  pointer-events: auto;
  width: 100%;
  max-width: 28rem;
  margin-inline: auto;
}

/* Hub portals — true-alpha artwork (no matte blend) */
.dimensional-portal--hub .dimensional-portal__gate {
  mix-blend-mode: normal;
}

.dimensional-portal--hub .dimensional-portal__body {
  background: none;
}

.dimensional-portal--hub {
  padding-bottom: 3.25rem;
}

.dimensional-portal--hub .dimensional-portal__body {
  filter: drop-shadow(0 20px 48px rgba(0, 0, 0, 0.45));
}

.dimensional-portal--hub.dimensional-portal--distant {
  filter: brightness(0.85);
}

/* Hero art PNGs ship with black matte — screen blend over environment */
.dimensional-portal--hero .dimensional-portal__gate {
  mix-blend-mode: screen;
}

.dimensional-portal--hero .dimensional-portal__body {
  background: none;
}

/* —— Portal object —— */
.dimensional-portal {
  position: absolute;
  width: var(--portal-w, clamp(200px, 28vw, 360px));
  opacity: var(--portal-opacity, 1);
  transform-style: preserve-3d;
  transform:
    translate(var(--portal-tx, 0), var(--portal-ty, 0))
    translate3d(0, 0, var(--portal-z, 0))
    rotateX(var(--portal-rx, 0deg))
    rotateY(var(--portal-ry, 0deg))
    rotateZ(var(--portal-rz, 0deg));
  z-index: var(--portal-layer, 3);
  transition:
    transform 0.65s cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 0.55s ease,
    filter 0.55s ease;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.dimensional-portal[data-portal-travel] {
  cursor: pointer;
}

.dimensional-portal--sealed {
  pointer-events: none;
  cursor: default;
}

.dimensional-portal--sealed .dimensional-portal__body {
  animation: none;
}

.dimensional-portal--sealed:hover .dimensional-portal__body,
.dimensional-portal--sealed:focus-visible .dimensional-portal__body {
  transform: none;
  filter: drop-shadow(0 24px 64px rgba(0, 0, 0, 0.5));
}

.dimensional-portal__gate {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  z-index: 3;
  transform: translateZ(0);
  background: transparent;
  mix-blend-mode: lighten;
  transition: filter 0.45s ease;
}

.dimensional-portal__body {
  position: relative;
  display: block;
  transform-style: preserve-3d;
  animation: portalFloat 9s ease-in-out infinite;
  animation-delay: var(--float-delay, 0s);
  will-change: transform;
  filter: drop-shadow(0 24px 64px rgba(0, 0, 0, 0.5));
  transition: filter 0.45s ease;
}

.dimensional-portal--float-a .dimensional-portal__body { --float-delay: 0s; animation-duration: 9s; }
.dimensional-portal--float-b .dimensional-portal__body { --float-delay: -1.8s; animation-duration: 10.5s; }
.dimensional-portal--float-c .dimensional-portal__body { --float-delay: -3.2s; animation-duration: 8.5s; }
.dimensional-portal--float-d .dimensional-portal__body { --float-delay: -4.5s; animation-duration: 11s; }
.dimensional-portal--float-e .dimensional-portal__body { --float-delay: -2.4s; animation-duration: 9.8s; }
.dimensional-portal--float-f .dimensional-portal__body { --float-delay: -5.1s; animation-duration: 10.2s; }

@keyframes portalFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -14px, 12px); }
}

/* —— Visual layers (depth stack) —— */
.dimensional-portal__depth {
  position: absolute;
  inset: -20% -25%;
  z-index: 0;
  background: radial-gradient(ellipse at center, var(--portal-depth, rgba(46, 200, 255, 0.12)) 0%, transparent 70%);
  filter: blur(24px);
  opacity: 0.7;
  transform: translateZ(-40px);
  pointer-events: none;
}

.dimensional-portal__spill {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 130%;
  height: 90%;
  transform: translate(-50%, -50%) translateZ(-20px);
  background: radial-gradient(ellipse at center, var(--portal-spill, rgba(46, 200, 255, 0.28)) 0%, transparent 68%);
  filter: blur(20px);
  opacity: 0.5;
  transition: opacity 0.4s ease, transform 0.5s ease;
  pointer-events: none;
  z-index: 1;
}

.dimensional-portal__haze {
  position: absolute;
  inset: 15% 18% 22%;
  transform: translateZ(-10px);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.06) 0%, transparent 75%);
  opacity: 0.4;
  pointer-events: none;
  z-index: 2;
}

/* Split asset mode — animated world inside the gate opening */
.dimensional-portal__interior {
  position: absolute;
  left: 50%;
  top: 47%;
  width: 42%;
  height: 42%;
  transform: translate(-50%, -50%) translateZ(-5px);
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 58%, transparent 72%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 58%, transparent 72%);
}

.dimensional-portal__interior-img {
  display: block;
  width: 118%;
  height: 118%;
  margin: -9%;
  object-fit: cover;
  transform:
    translate(var(--portal-parallax-x, 0px), var(--portal-parallax-y, 0px))
    scale(1.08);
  animation: portalInteriorDrift 18s ease-in-out infinite;
  will-change: transform;
}

@keyframes portalInteriorDrift {
  0%, 100% {
    transform:
      translate(var(--portal-parallax-x, 0px), var(--portal-parallax-y, 0px))
      scale(1.08)
      translate(0, 0);
  }
  33% {
    transform:
      translate(var(--portal-parallax-x, 0px), var(--portal-parallax-y, 0px))
      scale(1.1)
      translate(1.5%, -0.8%);
  }
  66% {
    transform:
      translate(var(--portal-parallax-x, 0px), var(--portal-parallax-y, 0px))
      scale(1.09)
      translate(-1%, 0.6%);
  }
}

.dimensional-portal[data-portal-travel]:hover .dimensional-portal__interior-img,
.dimensional-portal[data-portal-travel]:focus-visible .dimensional-portal__interior-img {
  animation-duration: 12s;
}

.dimensional-portal--distant .dimensional-portal__body {
  filter: drop-shadow(0 14px 40px rgba(0, 0, 0, 0.4));
}

.dimensional-portal__particles {
  position: absolute;
  inset: 8% 10% 15%;
  z-index: 4;
  transform: translateZ(20px);
  background-image:
    radial-gradient(2px 2px at 25% 65%, rgba(255, 255, 255, 0.75), transparent),
    radial-gradient(1px 1px at 70% 30%, var(--portal-spill, rgba(46, 200, 255, 0.9)), transparent),
    radial-gradient(1px 1px at 45% 80%, rgba(216, 76, 255, 0.6), transparent);
  opacity: 0.35;
  animation: portalParticles 4s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: screen;
}

.dimensional-portal__rim {
  position: absolute;
  inset: -2%;
  z-index: 5;
  transform: translateZ(30px);
  border-radius: 50%;
  box-shadow:
    inset 0 0 40px var(--portal-rim, rgba(46, 200, 255, 0.15)),
    0 0 60px var(--portal-rim, rgba(46, 200, 255, 0.08));
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.dimensional-portal__distort {
  position: absolute;
  inset: 10% 12%;
  z-index: 6;
  transform: translateZ(15px);
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
  opacity: 0;
  animation: portalDistort 3s ease-in-out infinite;
  pointer-events: none;
  mix-blend-mode: overlay;
}

@keyframes portalParticles {
  0%, 100% { opacity: 0.25; transform: translateZ(20px) scale(1); }
  50% { opacity: 0.55; transform: translateZ(28px) scale(1.03); }
}

@keyframes portalDistort {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.35; }
}

/* —— Theme energy colors —— */
.gate--block {
  --portal-spill: rgba(46, 200, 255, 0.32);
  --portal-depth: rgba(46, 200, 255, 0.14);
  --portal-rim: rgba(46, 200, 255, 0.22);
}

.gate--wasteland {
  --portal-spill: rgba(255, 140, 60, 0.28);
  --portal-depth: rgba(255, 100, 40, 0.12);
  --portal-rim: rgba(255, 140, 60, 0.2);
}

.gate--fantasy {
  --portal-spill: rgba(216, 76, 255, 0.3);
  --portal-depth: rgba(180, 60, 255, 0.12);
  --portal-rim: rgba(216, 76, 255, 0.22);
}

.gate--default {
  --portal-spill: rgba(46, 200, 255, 0.25);
  --portal-depth: rgba(46, 200, 255, 0.1);
  --portal-rim: rgba(46, 200, 255, 0.18);
}

.dimensional-portal--cyberpunk {
  --portal-spill: rgba(0, 200, 255, 0.28);
  --portal-depth: rgba(0, 150, 255, 0.1);
}

.dimensional-portal--eastern {
  --portal-spill: rgba(255, 120, 180, 0.26);
  --portal-depth: rgba(255, 80, 160, 0.1);
}

.dimensional-portal--jungle {
  --portal-spill: rgba(120, 255, 80, 0.26);
  --portal-depth: rgba(80, 200, 60, 0.1);
}

.dimensional-portal--distant {
  filter: saturate(0.85) brightness(0.88);
}

.dimensional-portal[data-portal-travel]:hover .dimensional-portal__body,
.dimensional-portal[data-portal-travel]:focus-visible .dimensional-portal__body {
  filter:
    drop-shadow(0 32px 80px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 48px var(--portal-spill, rgba(46, 200, 255, 0.35)));
}
.dimensional-portal[data-portal-travel]:hover,
.dimensional-portal[data-portal-travel]:focus-visible {
  z-index: 20;
  transform:
    translate3d(0, -8px, calc(var(--portal-z, 0px) + 60px))
    rotateX(calc(var(--portal-rx, 0deg) - 2deg + var(--portal-tilt-x, 0deg)))
    rotateY(calc(var(--portal-ry, 0deg) + var(--portal-tilt-y, 0deg)))
    rotateZ(var(--portal-rz, 0deg))
    scale(1.05);
}

.dimensional-portal[data-portal-travel]:hover .dimensional-portal__body,
.dimensional-portal[data-portal-travel]:focus-visible .dimensional-portal__body {
  animation-play-state: paused;
}

.dimensional-portal[data-portal-travel]:hover .dimensional-portal__spill,
.dimensional-portal[data-portal-travel]:focus-visible .dimensional-portal__spill {
  opacity: 0.95;
  transform: translate(-50%, -50%) translateZ(10px) scale(1.12);
}

.dimensional-portal[data-portal-travel]:hover .dimensional-portal__rim,
.dimensional-portal[data-portal-travel]:focus-visible .dimensional-portal__rim {
  opacity: 1;
}

.dimensional-portal[data-portal-travel]:hover .dimensional-portal__particles,
.dimensional-portal[data-portal-travel]:focus-visible .dimensional-portal__particles {
  opacity: 0.75;
}

/* —— Floating labels (not cards) —— */
.dimensional-portal__whisper {
  position: absolute;
  left: 50%;
  bottom: -0.5rem;
  transform: translateX(-50%) translateZ(40px);
  font-family: var(--font-display);
  font-size: clamp(0.72rem, 1.4vw, 0.88rem);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow:
    0 0 20px var(--portal-spill, rgba(46, 200, 255, 0.5)),
    0 2px 8px rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.4s ease;
  pointer-events: none;
}

.dimensional-portal[data-portal-travel]:hover .dimensional-portal__whisper,
.dimensional-portal[data-portal-travel]:focus-visible .dimensional-portal__whisper {
  opacity: 1;
  transform: translateX(-50%) translateZ(50px) translateY(4px);
}

.dimensional-portal__caption {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%) translateZ(30px);
  text-align: center;
  pointer-events: none;
  white-space: nowrap;
  width: max-content;
  max-width: calc(var(--portal-w, 360px) + 2rem);
}

.dimensional-portal__env {
  display: block;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sekaira-cyan);
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.9);
}

.dimensional-portal__name {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(0.95rem, 2vw, 1.15rem);
  font-weight: 500;
  color: var(--sekaira-text);
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.95);
}

.dimensional-portal__tagline {
  display: block;
  font-size: 0.72rem;
  color: var(--sekaira-muted);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.9);
  margin-top: 0.15rem;
}

/* —— Pre-departure: selected portal dominates —— */
.nexus-chamber.is-portal-departing .dimensional-portal:not(.is-selected) {
  opacity: 0.08 !important;
  transform:
    translate3d(0, 0, calc(var(--portal-z, 0px) - 180px))
    rotateX(var(--portal-rx, 0deg))
    rotateY(var(--portal-ry, 0deg))
    rotateZ(var(--portal-rz, 0deg))
    scale(0.82);
  filter: blur(6px) brightness(0.5);
  transition-duration: 0.5s;
}

.nexus-chamber.is-portal-departing .dimensional-portal.is-selected {
  z-index: 100 !important;
  opacity: 1 !important;
  transform:
    translate3d(0, -20px, calc(var(--portal-z, 0px) + 200px))
    rotateX(0deg)
    rotateY(0deg)
    rotateZ(0deg)
    scale(1.2);
  filter: none;
}

.nexus-chamber.is-portal-departing .dimensional-portal.is-selected .dimensional-portal__body {
  animation: none;
}

.nexus-chamber.is-portal-departing .nexus-chamber__core {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.92);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.dimensional-portal.is-traveling {
  opacity: 0;
  pointer-events: none;
}

/* —— Hub chamber —— */
.nexus-scene-wrap--chamber.section-scene {
  overflow: visible;
  padding-bottom: 4.5rem;
}

.nexus-scene-wrap--chamber .section-head {
  position: relative;
  z-index: 5;
}

/* —— Discover: single large portal —— */
.nexus-discover__viewport {
  position: relative;
  min-height: min(58vh, 520px);
  perspective: 1200px;
  overflow: hidden;
}

.nexus-discover__slide {
  display: none;
  justify-content: center;
  align-items: center;
  min-height: min(58vh, 520px);
}

.nexus-discover__slide.is-active {
  display: flex;
}

.nexus-discover__slide[hidden] {
  display: none !important;
}

.nexus-discover__viewport .dimensional-portal {
  position: relative;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  width: min(92vw, 440px) !important;
  margin-inline: auto;
  transform:
    translate3d(0, 0, 80px)
    rotateX(-4deg)
    rotateY(0deg);
  opacity: 1 !important;
  filter: none !important;
}

.nexus-discover__viewport .dimensional-portal__caption {
  bottom: 0;
}

/* —— Tablet: shrink portals, push to edges, widen safe zone —— */
@media (max-width: 1200px) and (min-width: 901px) {
  .nexus-chamber {
    --safe-w: clamp(300px, 46vw, 500px);
    --safe-h: clamp(340px, 54vh, 520px);
  }

  .dimensional-portal--hero.dimensional-portal--minecraft {
    left: -16% !important;
    top: 50% !important;
  }

  .dimensional-portal--hero.dimensional-portal--rust {
    right: -14% !important;
    width: clamp(200px, 26vw, 360px) !important;
  }

  .dimensional-portal--hero.dimensional-portal--rsps {
    right: -10% !important;
    top: -10% !important;
    width: clamp(170px, 22vw, 300px) !important;
  }

  .dimensional-portal--hero.dimensional-portal--eastern {
    right: -8% !important;
    top: 4% !important;
    width: clamp(120px, 15vw, 200px) !important;
  }
}

/* —— Mobile —— */
@media (max-width: 900px) {
  .nexus-chamber {
    min-height: auto;
    display: flex;
    flex-direction: column;
    padding: 1.5rem 0.75rem 2.5rem;
    overflow: visible;
  }

  .nexus-chamber__space {
    position: relative;
    inset: auto;
    min-height: 0;
    perspective: none;
    display: contents;
  }

  .nexus-chamber__atmosphere,
  .nexus-chamber__floor-glow {
    display: none;
  }

  .nexus-chamber__core {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    order: -1;
    width: 100%;
    margin-bottom: 1.5rem;
  }

  .dimensional-portal--hero {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: min(100%, 300px) !important;
    margin-inline: auto;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
  }

  .dimensional-portal--hero.dimensional-portal--distant,
  .dimensional-portal--hero.dimensional-portal--rsps {
    display: none;
  }

  .dimensional-portal--hero .dimensional-portal__body {
    animation: none;
  }

  .nexus-chamber--hub {
    min-height: auto;
  }

  .nexus-chamber--hub .nexus-chamber__space {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 2rem;
    padding-bottom: 1rem;
  }

  .nexus-chamber--hub .dimensional-portal,
  .nexus-chamber--hub .dimensional-portal--cyberpunk,
  .nexus-chamber--hub .dimensional-portal--rsps,
  .nexus-chamber--hub .dimensional-portal--eastern,
  .nexus-chamber--hub .dimensional-portal--minecraft,
  .nexus-chamber--hub .dimensional-portal--jungle,
  .nexus-chamber--hub .dimensional-portal--rust {
    grid-column: 1;
    grid-row: auto;
    width: min(100%, 320px) !important;
    margin-inline: auto;
  }

  .dimensional-portal--hub {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    width: min(100%, 320px) !important;
    margin-inline: auto;
    transform: none !important;
    translate: none;
  }

  .dimensional-portal--hub.dimensional-portal--rsps {
    translate: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .dimensional-portal__body,
  .dimensional-portal__particles,
  .dimensional-portal__distort,
  .dimensional-portal__interior-img {
    animation: none !important;
  }

  .dimensional-portal[data-portal-travel]:hover,
  .dimensional-portal[data-portal-travel]:focus-visible {
    transform: translate3d(0, 0, var(--portal-z, 0))
      rotateX(var(--portal-rx, 0deg))
      rotateY(var(--portal-ry, 0deg))
      rotateZ(var(--portal-rz, 0deg));
  }
}