:root {
  --aluen-card-ratio: 53.98 / 85.60;
  --aluen-card-width: clamp(16.5rem, 20vw, 19.5rem);
  --aluen-card-radius: 5.89% / 3.71%;
  --aluen-card-perspective: 110rem;
  --aluen-card-tilt: 6;
  --aluen-card-ease: cubic-bezier(.16, 1, .3, 1);
}

.forces.forces--portals {
  min-height: max(100svh, 58rem);
  display: block;
  padding: clamp(7.4rem, 11vh, 9rem) clamp(1rem, 4vw, 4rem) clamp(7rem, 12vh, 10rem);
  text-align: center;
}

.forces--portals .forces-inner {
  width: min(74rem, 100%);
  margin: 0 auto;
}

.forces-intro {
  position: relative;
  z-index: 2;
  display: grid;
  justify-items: center;
  max-width: 52rem;
  margin: 0 auto clamp(3.2rem, 6vh, 4.6rem);
  animation: forces-intro-in .9s var(--aluen-card-ease) both;
}

.forces--portals .forces-title {
  margin: 0;
  color: #f2f0f5;
  font-family: "Cinzel", serif;
  font-size: clamp(2.65rem, 5vw, 4.6rem);
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.04;
  text-wrap: balance;
  text-shadow: 0 0 2.5rem rgba(230, 168, 196, .09);
}

.forces-intro__copy {
  max-width: 46rem;
  margin: 1.35rem 0 0;
  color: rgba(228, 231, 239, .64);
  font-size: clamp(1.05rem, 1.48vw, 1.28rem);
  line-height: 1.55;
  text-wrap: balance;
}

.forces-intro__axis {
  width: 5rem;
  height: 1px;
  margin-top: 1.55rem;
  background: linear-gradient(90deg, transparent, rgba(228, 231, 239, .26), transparent);
  box-shadow: 0 0 .8rem rgba(230, 168, 196, .08);
}

.forces-deck {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(.9rem, 2vw, 1.7rem);
  margin: 0 auto;
  perspective: 120rem;
}

.force-portal {
  --card-accent: 230, 168, 196;
  --card-accent-deep: 107, 79, 163;
  --deck-lift: 0rem;
  --deck-scale: 1;
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --pointer-x: 50%;
  --pointer-y: 50%;
  --engagement: 0;
  container-type: inline-size;
  position: relative;
  z-index: 1;
  width: var(--aluen-card-width);
  aspect-ratio: var(--aluen-card-ratio);
  perspective: var(--aluen-card-perspective);
  isolation: isolate;
  color: #e4e7ef;
  text-align: left;
  text-decoration: none;
  outline: none;
  touch-action: pan-y;
  transform: translateY(var(--deck-lift)) scale(var(--deck-scale));
  transition: opacity .55s ease, filter .55s ease, transform .68s var(--aluen-card-ease);
  animation: force-portal-in .8s var(--aluen-card-ease) both;
  -webkit-tap-highlight-color: transparent;
}

.force-portal:nth-child(1) { animation-delay: .12s; }
.force-portal:nth-child(2) { animation-delay: .22s; }
.force-portal:nth-child(3) { animation-delay: .32s; }

.force-portal[data-force="fusion"] {
  --card-accent: 196, 177, 229;
  --card-accent-deep: 116, 82, 166;
}

.force-portal[data-force="connection"] {
  --card-accent: 173, 213, 220;
  --card-accent-deep: 70, 111, 139;
}

.force-portal:is(:hover, :focus-visible, [data-engaged="true"]) {
  --engagement: 1;
  --deck-lift: -.62rem;
  --deck-scale: 1.012;
  z-index: 4;
}

.forces-deck:has(.force-portal:is(:hover, :focus-visible, [data-engaged="true"]))
  .force-portal:not(:is(:hover, :focus-visible, [data-engaged="true"])) {
  --deck-scale: .99;
  opacity: 1;
  filter: none;
}

.force-portal.is-aluen-surface-magnet {
  --engagement: 1;
  --deck-lift: -.62rem;
  --deck-scale: 1.012;
  z-index: 4;
}

.force-portal__halo {
  position: absolute;
  z-index: -1;
  inset: 3% -16% -10%;
  border-radius: 35%;
  background: radial-gradient(ellipse at var(--pointer-x) var(--pointer-y), rgba(230, 168, 196, .28), rgba(var(--card-accent), .14) 38%, transparent 72%);
  filter: blur(2.1rem);
  opacity: calc(.12 + var(--engagement) * .68);
  transform: scale(calc(.92 + var(--engagement) * .1));
  transition: opacity .65s var(--aluen-card-ease), transform .65s var(--aluen-card-ease);
  pointer-events: none;
}

.force-portal__body {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(228, 231, 239, .17);
  border-radius: var(--aluen-card-radius);
  background: #07060d;
  box-shadow:
    0 .1rem .2rem rgba(0, 0, 0, .25),
    0 1.5rem 3.5rem rgba(0, 0, 0, .42),
    0 3.5rem 7rem rgba(0, 0, 0, .25),
    inset 0 1px rgba(255, 255, 255, .07);
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) translateZ(0);
  transition: border-color .6s var(--aluen-card-ease), box-shadow .6s var(--aluen-card-ease);
  will-change: transform;
}

.force-portal__body::before,
.force-portal__body::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.force-portal__body::before {
  z-index: 3;
  background: radial-gradient(ellipse 68% 50% at var(--pointer-x) var(--pointer-y), rgba(255, 255, 255, calc(.035 + var(--engagement) * .105)), transparent 68%);
  mix-blend-mode: screen;
  opacity: calc(.18 + var(--engagement) * .82);
  transition: opacity .5s ease;
}

.force-portal__body::after {
  z-index: 8;
  border: 1px solid rgba(230, 168, 196, calc(.04 + var(--engagement) * .42));
  background: transparent;
  box-shadow: none;
  transition: border-color .55s ease, background .55s ease, box-shadow .55s ease;
}

.force-portal:is(:hover, :focus-visible, [data-engaged="true"], .is-aluen-surface-magnet) .force-portal__body {
  border-color: rgba(230, 168, 196, .58);
  box-shadow:
    0 .2rem .4rem rgba(0, 0, 0, .28),
    0 1.8rem 4rem rgba(0, 0, 0, .48),
    0 4rem 8rem rgba(0, 0, 0, .32),
    0 0 0 1px rgba(230, 168, 196, .08),
    0 0 4.6rem rgba(230, 168, 196, .18),
    inset 0 1px rgba(255, 255, 255, .11);
}

.force-portal:focus-visible .force-portal__body {
  outline: 2px solid rgba(230, 168, 196, .9);
  outline-offset: .3rem;
}

.force-portal__grain {
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: .08;
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");
}

.force-portal__header,
.force-portal__center,
.force-portal__footer {
  position: relative;
  z-index: 5;
  transform: translateZ(2rem);
}

.force-portal__header {
  z-index: 7;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 7.5cqi 8.5cqi 0;
}

.force-portal__center {
  position: absolute;
  z-index: 2;
  inset: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  transform: translateZ(0);
}

.force-portal__center::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(180deg, #07060d 0%, transparent 18%, transparent 55%, #07060d 96%),
    radial-gradient(ellipse at 50% 46%, transparent 30%, rgba(7, 6, 13, .16) 60%, rgba(7, 6, 13, .88) 100%);
  pointer-events: none;
}

.force-portal__art {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 35%;
  filter: none;
  opacity: 1;
  transform: scale(1.02);
  transition: filter .9s var(--aluen-card-ease), opacity .7s ease, transform 1.1s var(--aluen-card-ease);
}

.force-portal:is(:hover, :focus-visible, [data-engaged="true"], .is-aluen-surface-magnet) .force-portal__art {
  filter: brightness(1.035) contrast(1.015);
  opacity: 1;
  transform: scale(1.075) translateY(-1.2%);
}

.force-portal__footer {
  grid-row: 3;
  align-self: end;
  padding: 0 8.5cqi 8.5cqi;
}

.force-portal__rule {
  width: 30%;
  height: 1px;
  margin-bottom: 5cqi;
  background: linear-gradient(90deg, rgba(var(--card-accent), .76), transparent);
  transition: width .7s var(--aluen-card-ease), background .5s ease;
}

.force-portal:is(:hover, :focus-visible, [data-engaged="true"]) .force-portal__rule {
  width: 100%;
  background: linear-gradient(90deg, rgba(var(--card-accent), .88), rgba(255,255,255,.42), transparent);
}

.force-portal__force {
  display: block;
  color: rgba(var(--card-accent), .92);
  font-family: "Cinzel", serif;
  font-size: 3.55cqi;
  font-weight: 600;
  letter-spacing: .34em;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: 0 0 1.3rem rgba(var(--card-accent), .18);
  transition: color .5s ease, text-shadow .5s ease;
}

.force-portal:is(:hover, :focus-visible, [data-engaged="true"]) .force-portal__force {
  color: rgba(var(--card-accent), .98);
  text-shadow: 0 0 1.1rem rgba(var(--card-accent), .3);
}

.force-portal__title {
  display: block;
  color: #f5f3f7;
  font-family: "Cinzel", serif;
  font-size: 6.55cqi;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.08;
  text-transform: uppercase;
  text-wrap: balance;
}

.force-portal__copy {
  display: block;
  margin-top: 3.4cqi;
  color: rgba(228, 231, 239, .62);
  font-family: "EB Garamond", serif;
  font-size: 4.65cqi;
  line-height: 1.38;
  text-wrap: pretty;
}

@keyframes forces-intro-in {
  from { opacity: 0; transform: translateY(.8rem); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes force-portal-in {
  from { opacity: 0; filter: blur(.5rem); }
  to { opacity: 1; filter: blur(0); }
}

@media (max-width: 980px) {
  :root { --aluen-card-width: min(18.5rem, calc(100vw - 2.5rem)); }

  .forces.forces--portals { padding-top: 7.5rem; }
  .forces-intro { margin-bottom: 3.5rem; }
  .forces-deck {
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 2.75rem;
  }
  .forces-intro,
  .force-portal { animation: none; }
}

@media (max-width: 520px) {
  .forces.forces--portals { padding-inline: 1rem; padding-bottom: 4rem; }
  .forces-intro__copy { max-width: 21rem; font-size: 1.05rem; }
  .forces-deck { gap: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .forces-intro,
  .force-portal { animation: none; }
  .force-portal,
  .force-portal__body,
  .force-portal__art,
  .force-portal__halo,
  .force-portal__force { transition-duration: .01ms; }
  .force-portal__body { transform: none !important; }
}

@media (hover: none), (pointer: coarse) {
}