/* ================================================================
   V103 // MNEMONIC RELIC GATE — MONUMENTAL DEPTH ART DIRECTION

   FRONT = carved blocks / occlusion
   MID   = inner masonry / illuminated threshold
   BACK  = stable aperture / depth / inward signal
   ================================================================ */

.about-memory-gate {
  --mg-cyan: 103, 235, 255;
  --mg-blue: 58, 154, 255;
  --mg-violet: 122, 90, 255;
  isolation: isolate;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  width: min(960px, 100%);
  min-height: clamp(700px, 78vw, 810px);
  margin-inline: auto;
  padding: clamp(1.4rem, 3.5vw, 2.5rem) clamp(.8rem, 3vw, 2rem) clamp(1.7rem, 4vw, 3rem);
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  border: 0;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(var(--mg-violet), .075), transparent 39%),
    radial-gradient(ellipse at 50% 62%, rgba(var(--mg-cyan), .055), transparent 58%);
  cursor: var(--cursor-pointer);
}

.about-memory-gate::before,
.about-memory-gate::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.about-memory-gate::before {
  inset: 10% 7% 4%;
  z-index: -2;
  background:
    linear-gradient(90deg, transparent, rgba(var(--mg-cyan), .06), transparent) 50% 12% / 62% 1px no-repeat,
    linear-gradient(90deg, transparent, rgba(var(--mg-violet), .045), transparent) 50% 91% / 78% 1px no-repeat;
}

.about-memory-gate::after {
  inset: auto 14% 1.2rem;
  height: 15%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .68), transparent 69%);
  opacity: .72;
}

.memory-gate-atmosphere,
.memory-gate-atmosphere i {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.memory-gate-atmosphere {
  z-index: -1;
  opacity: 0;
  transition: opacity 1.1s ease;
}

.memory-gate-atmosphere i {
  background-repeat: no-repeat;
}

.memory-gate-atmosphere i:nth-child(1) {
  background:
    radial-gradient(circle at 22% 43%, rgba(var(--mg-cyan), .24) 0 1px, transparent 2px),
    radial-gradient(circle at 77% 34%, rgba(var(--mg-violet), .22) 0 1px, transparent 2px),
    radial-gradient(circle at 31% 77%, rgba(var(--mg-cyan), .16) 0 1px, transparent 2px),
    radial-gradient(circle at 71% 72%, rgba(var(--mg-blue), .18) 0 1px, transparent 2px);
}

.memory-gate-atmosphere i:nth-child(2) {
  inset: 17% 18%;
  border: 1px solid rgba(var(--mg-cyan), .055);
  border-color: rgba(var(--mg-cyan), .055) transparent rgba(var(--mg-violet), .045);
  border-radius: 48% 52% 44% 56%;
}

.memory-gate-atmosphere i:nth-child(3) {
  inset: 28% 24% 10%;
  background: radial-gradient(ellipse, rgba(var(--mg-blue), .075), transparent 67%);
}

.about-memory-gate.is-in-view .memory-gate-atmosphere {
  opacity: 1;
}

.memory-gate-copy {
  position: relative;
  z-index: 20;
  display: grid;
  justify-items: center;
  gap: .55rem;
  width: min(660px, 100%);
  text-align: center;
}

.memory-gate-copy .about-module-kicker {
  margin: 0;
  color: rgba(155, 235, 255, .72);
  letter-spacing: .2em;
}

.memory-gate-copy strong {
  max-width: 720px;
  color: #edfaff;
  font-size: clamp(1.85rem, 4vw, 3.5rem);
  font-weight: 650;
  line-height: .98;
  letter-spacing: -.045em;
  text-shadow: 0 0 32px rgba(var(--mg-blue), .15);
}

.memory-gate-visual {
  position: relative;
  z-index: 10;
  display: block;
  width: 100%;
  max-width: 540px;
  height: clamp(500px, 59vw, 595px);
  margin-top: .7rem;
  perspective: 1050px;
  perspective-origin: 50% 47%;
}

.memory-gate-arrival,
.memory-gate-relic,
.memory-gate-motes {
  position: absolute;
  inset: 0;
}

.memory-gate-arrival {
  transform-style: preserve-3d;
}

.memory-gate-relic {
  transform-style: preserve-3d;
  transform: rotateX(1.6deg);
  transform-origin: 50% 92%;
}

.memory-gate-cast-shadow {
  position: absolute;
  left: 50%;
  bottom: 1.8%;
  z-index: -4;
  width: 76%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .9), rgba(0, 0, 0, .3) 56%, transparent 74%);
  transform: translateX(-50%) rotateX(72deg) translateZ(-38px);
}

.memory-gate-aura {
  position: absolute;
  inset: 9% 8% 3%;
  z-index: -5;
  border-radius: 50% 50% 27% 27%;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(var(--mg-cyan), .14), transparent 51%),
    radial-gradient(ellipse at 50% 44%, rgba(var(--mg-violet), .11), transparent 69%);
  opacity: 0;
}

/* BACK // fixed physical aperture, only its inner space travels. */
.memory-gate-aperture {
  position: absolute;
  left: 50%;
  top: 51.5%;
  z-index: 1;
  width: 54%;
  height: 69%;
  overflow: hidden;
  border-radius: 48% 48% 17% 17% / 34% 34% 8% 8%;
  background: #01040f;
  box-shadow:
    inset 0 0 0 1px rgba(164, 246, 255, .13),
    inset 0 0 38px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(0, 0, 0, .85);
  opacity: .18;
  transform: translate(-50%, -50%) translateZ(-38px);
  transition: opacity .8s ease, box-shadow 1.1s ease;
}

.memory-gate-depth {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 49%, transparent 0 2%, rgba(18, 20, 72, .28) 8%, transparent 22%),
    conic-gradient(from 22deg at 50% 49%, #020611, #07122f 10%, #090521 17%, #031222 27%, #01040e 38%, #0b0625 47%, #031321 61%, #02040e 73%, #080421 84%, #020611);
  opacity: .88;
}

.memory-gate-depth::before,
.memory-gate-depth::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.memory-gate-depth::before {
  background: repeating-conic-gradient(from 17deg at 50% 50%,
    transparent 0 9deg,
    rgba(87, 218, 255, .055) 10deg,
    transparent 12deg 31deg,
    rgba(136, 83, 255, .045) 32deg,
    transparent 35deg 47deg);
  clip-path: polygon(50% 50%, 3% 7%, 45% 48%, 29% 0, 49% 47%, 74% 0, 52% 48%, 100% 17%, 54% 50%, 100% 70%, 53% 52%, 72% 100%, 51% 54%, 25% 100%, 49% 53%, 0 78%, 47% 51%);
  opacity: .32;
}

.memory-gate-depth::after {
  inset: 14% 12%;
  background:
    linear-gradient(117deg, transparent 0 42%, rgba(107, 231, 255, .1) 44%, transparent 47%),
    linear-gradient(63deg, transparent 0 46%, rgba(135, 83, 255, .09) 48%, transparent 51%);
  clip-path: polygon(0 19%, 47% 48%, 12% 0, 50% 46%, 84% 0, 53% 48%, 100% 31%, 55% 51%, 91% 100%, 52% 54%, 17% 100%, 48% 52%);
  opacity: .22;
}

.memory-gate-vanishing {
  position: absolute;
  left: 50%;
  top: 49%;
  z-index: 2;
  width: 3px;
  height: 19%;
  border-radius: 50%;
  background:
    linear-gradient(180deg, transparent, rgba(161, 237, 255, .28) 18%, rgba(116, 88, 255, .82) 50%, rgba(109, 238, 255, .34) 78%, transparent);
  box-shadow:
    0 0 9px rgba(var(--mg-violet), .68),
    0 0 23px rgba(var(--mg-cyan), .26);
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(-92px) scaleY(.22);
  transform-origin: center;
}

.memory-gate-depth-planes,
.memory-gate-flow,
.memory-gate-membrane {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.memory-gate-depth-planes {
  z-index: 1;
}

.memory-gate-depth-planes > i {
  position: absolute;
  inset: 5% 6% 4%;
  border: 1px solid rgba(var(--mg-cyan), .15);
  border-color: rgba(var(--mg-cyan), .2) rgba(var(--mg-violet), .05) rgba(var(--mg-violet), .13) rgba(var(--mg-cyan), .07);
  border-radius: 48% 52% 19% 15% / 32% 36% 8% 11%;
  clip-path: polygon(0 10%, 14% 1%, 87% 4%, 100% 18%, 97% 77%, 82% 99%, 17% 96%, 2% 80%);
  opacity: 0;
  transform: translateZ(60px) rotate(var(--depth-turn)) scale(1.08);
  animation: mg-depth-dive 12.2s linear var(--depth-delay) infinite paused;
}

.memory-gate-depth-planes > i:nth-child(2n) {
  border-style: dashed;
  border-color: rgba(var(--mg-violet), .18) transparent rgba(var(--mg-cyan), .08);
}

.memory-gate-flow {
  z-index: 3;
}

.memory-gate-flow > i {
  position: absolute;
  left: calc(50% + var(--flow-x));
  top: calc(50% + var(--flow-y));
  width: clamp(31px, 8vw, 64px);
  height: clamp(8px, 1.7vw, 14px);
  border-top: 1px solid rgba(145, 240, 255, .66);
  border-radius: 50%;
  box-shadow: 0 -2px 8px rgba(var(--mg-cyan), .12);
  opacity: 0;
  transform: translate(-50%, -50%) rotate(var(--flow-r)) scaleX(.8);
  transform-origin: center;
  animation: mg-flow-to-depth 10.8s cubic-bezier(.45, .05, .55, .95) var(--flow-delay) infinite paused;
}

.memory-gate-flow > i:nth-child(3n) {
  border-top-color: rgba(151, 111, 255, .7);
  box-shadow: 0 -2px 8px rgba(var(--mg-violet), .16);
}

.memory-gate-membrane {
  z-index: 5;
  overflow: hidden;
  border-radius: inherit;
  background:
    linear-gradient(112deg, transparent 29%, rgba(189, 248, 255, .035) 44%, transparent 59%),
    radial-gradient(ellipse at 47% 47%, rgba(var(--mg-cyan), .035), transparent 58%);
  opacity: 0;
}

.memory-gate-membrane::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(104deg, transparent 35%, rgba(204, 252, 255, .11) 48%, transparent 60%);
  transform: translateX(-125%) skewX(-10deg);
}

.memory-gate-membrane i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 74%;
  height: 54%;
  border: 1px solid transparent;
  border-top-color: rgba(var(--mg-cyan), .11);
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
}

.memory-gate-membrane i:nth-child(2) {
  width: 45%;
  height: 35%;
  border-top-color: rgba(var(--mg-violet), .12);
}

.memory-gate-membrane i:nth-child(3) {
  width: 24%;
  height: 19%;
}

.memory-gate-lily {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 6;
  width: 94px;
  height: 94px;
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(-8px);
}

.memory-gate-lily svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.memory-gate-lily__bloom path {
  fill: url(#memoryGatePetal);
  fill-opacity: .12;
  stroke: rgba(144, 239, 255, .64);
  stroke-width: .8;
}

.memory-gate-lily__bloom circle {
  fill: url(#memoryGateCore);
  opacity: .65;
}

.memory-gate-core {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 7;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d9fcff;
  box-shadow:
    0 0 8px rgba(var(--mg-cyan), .85),
    0 0 20px rgba(var(--mg-violet), .38);
  opacity: 0;
  transform: translate(-50%, -50%);
}

/* MID // the darkness is physically contained by old inner masonry. */
.memory-gate-inner-wall {
  position: absolute;
  left: 50%;
  top: 51.5%;
  z-index: 3;
  width: 61%;
  height: 75%;
  border: clamp(13px, 2.7vw, 22px) solid rgba(4, 11, 23, .96);
  border-radius: 49% 49% 17% 17% / 34% 34% 7% 7%;
  box-shadow:
    inset 9px 0 14px rgba(0, 0, 0, .72),
    inset -7px 0 13px rgba(66, 106, 151, .08),
    0 4px 0 rgba(0, 0, 0, .82),
    0 0 0 1px rgba(97, 220, 255, .08);
  opacity: .74;
  transform: translate(-50%, -50%) translateZ(-14px);
}

.memory-gate-archstone {
  position: absolute;
  left: 50%;
  top: 51.5%;
  z-index: 5;
  width: 71%;
  height: 82%;
  border: clamp(25px, 5.1vw, 40px) solid rgba(12, 28, 43, .96);
  border-bottom-width: clamp(18px, 3.2vw, 27px);
  border-radius: 49% 49% 14% 14% / 35% 35% 6% 6%;
  background: transparent;
  box-shadow:
    inset 8px 4px 12px rgba(113, 205, 231, .08),
    inset -11px -5px 14px rgba(0, 0, 0, .72),
    12px 11px 0 rgba(0, 0, 0, .56),
    18px 20px 28px rgba(0, 0, 0, .4),
    0 0 0 1px rgba(101, 205, 235, .1);
  opacity: 0;
  transform: translate(-50%, -50%) translateZ(0);
}

.memory-gate-archgrain {
  position: absolute;
  inset: calc(-1 * clamp(25px, 5.1vw, 40px));
  border-radius: inherit;
  background:
    linear-gradient(118deg, transparent 17%, rgba(138, 222, 242, .05) 18%, transparent 20%),
    linear-gradient(63deg, transparent 45%, rgba(0, 0, 0, .25) 46%, transparent 47%),
    repeating-linear-gradient(21deg, transparent 0 17px, rgba(137, 204, 222, .025) 18px, transparent 20px);
  mix-blend-mode: screen;
  pointer-events: none;
}

.memory-gate-crack {
  position: absolute;
  z-index: 2;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(99, 235, 255, .8), rgba(125, 86, 255, .54), transparent);
  box-shadow: 0 0 5px rgba(var(--mg-cyan), .5);
  opacity: 0;
  transform-origin: left;
}

.memory-gate-crack::after {
  content: "";
  position: absolute;
  right: 14%;
  top: -6px;
  width: 22px;
  height: 12px;
  border-right: 1px solid rgba(var(--mg-violet), .55);
  transform: rotate(37deg);
}

.memory-gate-crack--a { left: -8%; top: 18%; width: 43%; transform: rotate(21deg); }
.memory-gate-crack--b { right: -7%; top: 31%; width: 38%; transform: rotate(156deg); }
.memory-gate-crack--c { left: 8%; bottom: 12%; width: 34%; transform: rotate(-17deg); }

/* FRONT // thirteen separate carved blocks, never one smooth ring. */
.memory-gate-stones {
  position: absolute;
  inset: 0;
  z-index: 8;
  transform-style: preserve-3d;
  pointer-events: none;
}

.memory-gate-stones > i {
  position: absolute;
  display: grid;
  place-items: center;
  width: 15%;
  height: 11%;
  overflow: hidden;
  color: rgba(159, 235, 255, .42);
  font-style: normal;
  background:
    linear-gradient(148deg, rgba(53, 82, 104, .44), transparent 36%),
    linear-gradient(318deg, rgba(0, 0, 0, .62), rgba(14, 31, 46, .98) 52%, rgba(25, 53, 67, .92));
  border: 1px solid rgba(111, 207, 229, .13);
  box-shadow:
    inset 5px 4px 7px rgba(155, 226, 242, .045),
    inset -8px -7px 9px rgba(0, 0, 0, .5),
    6px 8px 0 rgba(0, 0, 0, .34),
    8px 12px 15px rgba(0, 0, 0, .24);
  clip-path: polygon(8% 7%, 87% 0, 100% 24%, 94% 90%, 68% 100%, 3% 88%, 0 29%);
  opacity: 0;
  transform: translateZ(22px) rotate(var(--stone-r, 0deg));
}

.memory-gate-stones > i::before,
.memory-gate-stones > i::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.memory-gate-stones > i::before {
  inset: 13% 9%;
  border-top: 1px solid rgba(var(--mg-cyan), .12);
  border-left: 1px solid rgba(var(--mg-violet), .06);
  transform: skewX(-12deg);
}

.memory-gate-stones > i::after {
  left: 10%;
  right: 15%;
  bottom: 18%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--mg-cyan), .36), transparent);
  opacity: 0;
}

.memory-gate-stones b {
  position: relative;
  z-index: 1;
  font: 600 clamp(.48rem, 1.25vw, .7rem)/1 var(--font-mono, monospace);
  letter-spacing: .12em;
  text-shadow: 0 0 8px rgba(var(--mg-cyan), .28);
  opacity: .25;
}

.memory-gate-stones img {
  width: 24px;
  height: 24px;
  object-fit: contain;
  opacity: .32;
  filter: hue-rotate(168deg) saturate(.8) brightness(1.25);
}

.memory-gate-stones > i:nth-child(1) { left: 17%; top: 21%; --stone-r: -31deg; }
.memory-gate-stones > i:nth-child(2) { left: 25%; top: 11%; --stone-r: -20deg; width: 14%; }
.memory-gate-stones > i:nth-child(3) { left: 36%; top: 5%; --stone-r: -9deg; height: 10%; }
.memory-gate-stones > i:nth-child(4) { left: 48%; top: 3%; --stone-r: 5deg; width: 13%; }
.memory-gate-stones > i:nth-child(5) { right: 28%; top: 8%; --stone-r: 16deg; width: 14%; }
.memory-gate-stones > i:nth-child(6) { right: 18%; top: 16%; --stone-r: 29deg; }
.memory-gate-stones > i:nth-child(7) { right: 12%; top: 29%; --stone-r: 9deg; width: 13%; height: 13%; }
.memory-gate-stones > i:nth-child(8) { left: 12%; top: 34%; --stone-r: -7deg; width: 13%; height: 13%; }
.memory-gate-stones > i:nth-child(9) { left: 10%; top: 49%; --stone-r: 3deg; width: 14%; height: 14%; }
.memory-gate-stones > i:nth-child(10) { right: 10%; top: 46%; --stone-r: -3deg; width: 14%; height: 15%; }
.memory-gate-stones > i:nth-child(11) { left: 10%; top: 65%; --stone-r: -2deg; width: 15%; height: 15%; }
.memory-gate-stones > i:nth-child(12) { right: 10%; top: 64%; --stone-r: 2deg; width: 15%; height: 15%; }
.memory-gate-stones > i:nth-child(13) { left: 42%; top: 83%; --stone-r: 1deg; width: 17%; height: 9%; }

.memory-gate-pillar {
  position: absolute;
  bottom: 5.8%;
  z-index: 9;
  width: 19%;
  height: 58%;
  color: rgba(130, 229, 248, .45);
  background: linear-gradient(90deg, rgba(5, 12, 21, .98), rgba(19, 39, 53, .98) 36%, rgba(9, 20, 31, .98) 73%, rgba(0, 0, 0, .86));
  border: 1px solid rgba(120, 217, 239, .12);
  box-shadow:
    inset 7px 0 7px rgba(138, 222, 240, .035),
    inset -10px 0 12px rgba(0, 0, 0, .5),
    10px 10px 0 rgba(0, 0, 0, .38),
    13px 17px 20px rgba(0, 0, 0, .28);
  opacity: 0;
  transform: translateZ(31px);
}

.memory-gate-pillar--left {
  left: 9.5%;
  clip-path: polygon(7% 0, 100% 3%, 94% 97%, 0 100%, 4% 54%);
}

.memory-gate-pillar--right {
  right: 9.5%;
  clip-path: polygon(0 3%, 93% 0, 97% 55%, 100% 100%, 6% 97%);
}

.memory-gate-pillar::after {
  content: "";
  position: absolute;
  left: 13%;
  right: 13%;
  bottom: -4%;
  height: 7%;
  background: #040a12;
  border: 1px solid rgba(116, 208, 229, .09);
  transform: perspective(80px) rotateX(18deg);
  box-shadow: 6px 8px 8px rgba(0, 0, 0, .45);
}

.memory-gate-pillar-blocks,
.memory-gate-pillar-blocks i {
  position: absolute;
  inset: 0;
}

.memory-gate-pillar-blocks i {
  height: 20%;
  border-bottom: 1px solid rgba(104, 210, 237, .095);
  background: linear-gradient(165deg, rgba(114, 208, 230, .025), transparent 41%, rgba(0, 0, 0, .13));
}

.memory-gate-pillar-blocks i:nth-child(2) { top: 20%; }
.memory-gate-pillar-blocks i:nth-child(3) { top: 40%; }
.memory-gate-pillar-blocks i:nth-child(4) { top: 60%; }
.memory-gate-pillar-blocks i:nth-child(5) { top: 80%; }

.memory-gate-pillar > b,
.memory-gate-pillar > i,
.memory-gate-pillar > small {
  position: absolute;
  left: 50%;
  z-index: 2;
  transform: translateX(-50%);
}

.memory-gate-pillar > b {
  top: 23%;
  color: rgba(136, 230, 250, .42);
  font: 600 clamp(.5rem, 1.2vw, .7rem)/1 var(--font-mono, monospace);
  letter-spacing: .12em;
}

.memory-gate-pillar > i {
  top: 47%;
  font-style: normal;
  font-size: clamp(.8rem, 2vw, 1.1rem);
  opacity: .38;
}

.memory-gate-pillar > small {
  bottom: 13%;
  font: 500 clamp(.37rem, .9vw, .5rem)/1 var(--font-mono, monospace);
  letter-spacing: .2em;
  opacity: .24;
}

.memory-gate-conduit {
  position: absolute;
  left: 50%;
  top: 8%;
  bottom: 8%;
  z-index: 1;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(var(--mg-cyan), .8), rgba(var(--mg-violet), .45), transparent);
  box-shadow: 0 0 7px rgba(var(--mg-cyan), .42);
  opacity: 0;
}

.memory-gate-motes {
  z-index: 12;
  pointer-events: none;
}

.memory-gate-motes i {
  position: absolute;
  left: calc(50% + var(--mx));
  top: calc(51% + var(--my));
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(154, 239, 255, .8);
  box-shadow: 0 0 8px rgba(var(--mg-cyan), .55);
  opacity: 0;
  animation: mg-mote-absorb 8.8s cubic-bezier(.48, .06, .56, .92) var(--delay) infinite paused;
}

.memory-gate-motes i:nth-child(3n) {
  width: 2px;
  height: 8px;
  border-radius: 0;
  background: rgba(148, 104, 255, .75);
}

.memory-gate-lower {
  position: relative;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 4vw, 3.2rem);
  width: min(760px, 100%);
  margin-top: -.55rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(var(--mg-cyan), .12);
}

.memory-gate-lower .about-module-text {
  max-width: 550px;
  margin: 0;
  color: rgba(196, 224, 231, .73);
  line-height: 1.55;
}

.memory-gate-action {
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 24px auto;
  align-items: center;
  gap: .65rem;
  min-width: 190px;
  padding: .8rem 1rem;
  color: #dffbff;
  border: 1px solid rgba(var(--mg-cyan), .25);
  background: rgba(3, 15, 27, .74);
  box-shadow: inset 0 0 20px rgba(var(--mg-blue), .035);
}

.memory-gate-action > i {
  position: relative;
  width: 21px;
  height: 21px;
  border: 1px solid rgba(var(--mg-cyan), .55);
  transform: rotate(45deg);
}

.memory-gate-action > i::after {
  content: "";
  position: absolute;
  inset: 5px;
  background: rgba(var(--mg-cyan), .72);
  box-shadow: 0 0 9px rgba(var(--mg-cyan), .62);
}

.memory-gate-action > span {
  font: 600 .68rem/1.2 var(--font-mono, monospace);
  letter-spacing: .12em;
}

.memory-gate-action small {
  grid-column: 2;
  color: rgba(139, 214, 231, .45);
  font: 500 .46rem/1 var(--font-mono, monospace);
  letter-spacing: .12em;
}

.memory-gate-action small b {
  color: rgba(126, 237, 255, .77);
  font: inherit;
}

.about-memory-gate:hover .memory-gate-action,
.about-memory-gate:focus-visible .memory-gate-action {
  border-color: rgba(var(--mg-cyan), .55);
  background: rgba(4, 27, 42, .85);
  box-shadow: inset 0 0 24px rgba(var(--mg-blue), .07), 0 0 24px rgba(var(--mg-cyan), .07);
}

.about-memory-gate:focus-visible {
  outline: 1px solid rgba(var(--mg-cyan), .65);
  outline-offset: 4px;
}

/* Activation choreography:
   one glyph → cracks → symbols → edge → depth → membrane. */
.about-memory-gate.is-in-view .memory-gate-archstone {
  animation: mg-reveal-stone 1.55s cubic-bezier(.18, .7, .2, 1) .1s both;
}

.about-memory-gate.is-in-view .memory-gate-pillar {
  animation: mg-reveal-pillar 1.35s cubic-bezier(.18, .72, .22, 1) .32s both;
}

.about-memory-gate.is-in-view .memory-gate-pillar--right {
  animation-delay: .44s;
}

.about-memory-gate.is-in-view .memory-gate-stones > i {
  animation: mg-reveal-block .78s cubic-bezier(.18, .72, .2, 1) both;
}

.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(6) { animation-delay: .14s; }
.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(1) { animation-delay: .28s; }
.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(4) { animation-delay: .38s; }
.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(8) { animation-delay: .48s; }
.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(2) { animation-delay: .56s; }
.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(7) { animation-delay: .63s; }
.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(3) { animation-delay: .69s; }
.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(5) { animation-delay: .73s; }
.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(n+9) { animation-delay: .79s; }

.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(6) b {
  animation: mg-first-glyph .82s ease .2s both;
}

.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(1)::after,
.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(4)::after,
.about-memory-gate.is-in-view .memory-gate-stones > i:nth-child(8)::after {
  animation: mg-carving-current 1.25s ease .64s both;
}

.about-memory-gate.is-in-view .memory-gate-crack {
  animation: mg-crack-ignite 1.1s cubic-bezier(.3, .1, .18, 1) 1s both, mg-crack-idle 10s ease-in-out 2.1s infinite;
}

.about-memory-gate.is-in-view .memory-gate-crack--b { animation-delay: 1.12s, 2.22s; }
.about-memory-gate.is-in-view .memory-gate-crack--c { animation-delay: 1.25s, 2.35s; }

.about-memory-gate.is-in-view .memory-gate-conduit {
  animation: mg-conduit-rise 1.25s ease 1.08s both, mg-conduit-idle 7.8s ease-in-out 2.35s infinite;
}

.about-memory-gate.is-in-view .memory-gate-inner-wall {
  animation: mg-inner-edge 1.25s ease 1.34s both, mg-inner-wall-idle 9s ease-in-out 2.6s infinite;
}

.about-memory-gate.is-in-view .memory-gate-aperture {
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(164, 246, 255, .23),
    inset 0 0 42px rgba(0, 0, 0, .95),
    0 0 0 1px rgba(80, 193, 225, .14),
    0 0 18px rgba(var(--mg-cyan), .06);
  transition-delay: 1.45s;
}

.about-memory-gate.is-in-view .memory-gate-vanishing {
  animation: mg-vanishing-born 1.1s cubic-bezier(.16, .68, .2, 1) 1.52s both, mg-vanishing-idle 7.6s ease-in-out 2.62s infinite;
}

.about-memory-gate.is-in-view .memory-gate-membrane {
  animation: mg-membrane-born .9s ease 2.08s both, mg-membrane-idle 9.2s ease-in-out 2.98s infinite;
}

.about-memory-gate.is-in-view .memory-gate-lily {
  animation: mg-lily-born .9s ease 2.16s both, mg-lily-idle 8.4s ease-in-out 3.06s infinite;
}

.about-memory-gate.is-in-view .memory-gate-core {
  animation: mg-core-born .65s ease 2.26s both, mg-core-idle 5.8s ease-in-out 2.91s infinite;
}

.about-memory-gate.is-in-view .memory-gate-aura {
  animation: mg-aura-born 1.5s ease 1.74s both, mg-aura-idle 8.8s ease-in-out 3.24s infinite;
}

/* Every infinite layer is paused until actually intersecting. */
.memory-gate-idle,
.memory-gate-idle *,
.memory-gate-motes i,
.about-memory-gate .memory-gate-crack,
.about-memory-gate .memory-gate-conduit,
.about-memory-gate .memory-gate-inner-wall {
  animation-play-state: paused;
}

.about-memory-gate.is-in-view:not(.is-page-hidden) .memory-gate-idle,
.about-memory-gate.is-in-view:not(.is-page-hidden) .memory-gate-idle *,
.about-memory-gate.is-in-view:not(.is-page-hidden) .memory-gate-motes i,
.about-memory-gate.is-in-view:not(.is-page-hidden) .memory-gate-crack,
.about-memory-gate.is-in-view:not(.is-page-hidden) .memory-gate-conduit,
.about-memory-gate.is-in-view:not(.is-page-hidden) .memory-gate-inner-wall {
  animation-play-state: running;
}

.about-memory-gate.is-page-hidden *,
.about-memory-gate:not(.is-in-view) * {
  animation-play-state: paused !important;
}

@keyframes mg-reveal-stone {
  0% { opacity: 0; filter: brightness(.28); }
  45% { opacity: .55; filter: brightness(.7); }
  100% { opacity: 1; filter: brightness(1); }
}

@keyframes mg-reveal-pillar {
  0% { opacity: 0; transform: translateY(14px) translateZ(31px); }
  100% { opacity: 1; transform: translateY(0) translateZ(31px); }
}

@keyframes mg-reveal-block {
  0% { opacity: 0; transform: translateY(-7px) translateZ(52px) rotate(var(--stone-r)); }
  55% { opacity: .88; }
  100% { opacity: 1; transform: translateY(0) translateZ(22px) rotate(var(--stone-r)); }
}

@keyframes mg-first-glyph {
  0%, 25% { opacity: .08; text-shadow: none; }
  53% { opacity: 1; color: #cffaff; text-shadow: 0 0 14px rgba(var(--mg-cyan), .9); }
  100% { opacity: .58; }
}

@keyframes mg-carving-current {
  0% { opacity: 0; transform: scaleX(.08); transform-origin: left; }
  48% { opacity: 1; }
  100% { opacity: .35; transform: scaleX(1); transform-origin: left; }
}

@keyframes mg-crack-ignite {
  0% { opacity: 0; filter: brightness(.4); }
  52% { opacity: 1; filter: brightness(1.7); }
  100% { opacity: .34; filter: brightness(1); }
}

@keyframes mg-crack-idle {
  0%, 37%, 63%, 100% { opacity: .25; }
  43% { opacity: .72; }
  48% { opacity: .36; }
  52% { opacity: .61; }
}

@keyframes mg-conduit-rise {
  0% { opacity: 0; transform: scaleY(.08); }
  64% { opacity: .82; }
  100% { opacity: .28; transform: scaleY(1); }
}

@keyframes mg-conduit-idle {
  0%, 100% { opacity: .2; }
  48% { opacity: .46; }
}

@keyframes mg-inner-edge {
  0% { opacity: .35; box-shadow: inset 8px 0 14px rgba(0, 0, 0, .75); }
  55% { opacity: 1; box-shadow: inset 0 0 17px rgba(var(--mg-cyan), .23), 0 0 14px rgba(var(--mg-violet), .12); }
  100% { opacity: .82; }
}

@keyframes mg-inner-wall-idle {
  0%, 100% { box-shadow: inset 9px 0 14px rgba(0, 0, 0, .72), inset -7px 0 13px rgba(66, 106, 151, .08), 0 4px 0 rgba(0, 0, 0, .82), 0 0 0 1px rgba(97, 220, 255, .08); }
  50% { box-shadow: inset 7px 0 13px rgba(0, 0, 0, .68), inset -7px 0 15px rgba(var(--mg-cyan), .15), 0 4px 0 rgba(0, 0, 0, .82), 0 0 8px rgba(var(--mg-violet), .08); }
}

@keyframes mg-vanishing-born {
  0% { opacity: 0; transform: translate(-50%, -50%) translateZ(-92px) scaleY(.12); }
  62% { opacity: .96; }
  100% { opacity: .72; transform: translate(-50%, -50%) translateZ(-92px) scaleY(1); }
}

@keyframes mg-vanishing-idle {
  0%, 100% { opacity: .54; transform: translate(-50%, -50%) translateZ(-92px) scaleX(.72); }
  48% { opacity: .9; transform: translate(-50%, -50%) translateZ(-92px) scaleX(1.2); }
}

@keyframes mg-depth-dive {
  0% { opacity: 0; transform: translateZ(74px) rotate(var(--depth-turn)) scale(1.12); }
  14% { opacity: .42; }
  68% { opacity: .14; }
  100% { opacity: 0; transform: translateZ(-430px) rotate(calc(var(--depth-turn) + 22deg)) scale(.13); }
}

@keyframes mg-flow-to-depth {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--flow-r)) scaleX(.42); }
  15% { opacity: .72; }
  58% { opacity: .31; }
  100% {
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--flow-r) + 38deg)) scale(.08);
  }
}

@keyframes mg-membrane-born {
  0% { opacity: 0; }
  100% { opacity: .7; }
}

@keyframes mg-membrane-idle {
  0%, 39%, 64%, 100% { opacity: .56; }
  44% { opacity: .76; }
  47% { opacity: .59; }
}

.about-memory-gate.is-in-view .memory-gate-membrane::after {
  animation: mg-membrane-sheen 11s ease-in-out 3.4s infinite;
}

.about-memory-gate.is-in-view .memory-gate-membrane i:nth-child(1) { animation: mg-membrane-ripple 11s ease-out 3.5s infinite; }
.about-memory-gate.is-in-view .memory-gate-membrane i:nth-child(2) { animation: mg-membrane-ripple 11s ease-out 3.62s infinite; }
.about-memory-gate.is-in-view .memory-gate-membrane i:nth-child(3) { animation: mg-membrane-ripple 11s ease-out 3.76s infinite; }

@keyframes mg-membrane-sheen {
  0%, 66% { transform: translateX(-125%) skewX(-10deg); opacity: 0; }
  72% { opacity: .7; }
  82%, 100% { transform: translateX(125%) skewX(-10deg); opacity: 0; }
}

@keyframes mg-membrane-ripple {
  0%, 67% { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
  72% { opacity: .34; }
  84%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.45); }
}

@keyframes mg-lily-born {
  0% { opacity: 0; filter: brightness(.5); }
  58% { opacity: .66; filter: brightness(1.45); }
  100% { opacity: .32; filter: brightness(1); }
}

@keyframes mg-lily-idle {
  0%, 100% { opacity: .24; filter: brightness(.82); }
  48% { opacity: .41; filter: brightness(1.14); }
}

@keyframes mg-core-born {
  0% { opacity: 0; }
  62% { opacity: 1; }
  100% { opacity: .78; }
}

@keyframes mg-core-idle {
  0%, 100% { opacity: .58; box-shadow: 0 0 8px rgba(var(--mg-cyan), .7), 0 0 18px rgba(var(--mg-violet), .28); }
  50% { opacity: 1; box-shadow: 0 0 11px rgba(var(--mg-cyan), 1), 0 0 27px rgba(var(--mg-violet), .5); }
}

@keyframes mg-aura-born {
  0% { opacity: 0; }
  100% { opacity: .62; }
}

@keyframes mg-aura-idle {
  0%, 100% { opacity: .45; transform: scale(.985); }
  50% { opacity: .72; transform: scale(1); }
}

@keyframes mg-mote-absorb {
  0% { opacity: 0; transform: translate(0, 0) scale(.5); }
  12% { opacity: .75; }
  74% { opacity: .22; }
  100% {
    left: 50%;
    top: 51%;
    opacity: 0;
    transform: translate(0, 0) scale(.12);
  }
}

/* ================================================================
   V103.2 // MEMORY VORTEX CHOREOGRAPHY

   The approved relic never changes size. The 28s score lives behind
   it: A memory draw, B deep surge, C signal fracture, D 4072 echo.
   ================================================================ */

.memory-gate-event-horizon,
.memory-gate-currents,
.memory-gate-fragments,
.memory-gate-lock {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* 1 // EVENT HORIZON: three different depths, not one flat gradient. */
.memory-gate-event-horizon {
  z-index: 2;
  opacity: 0;
  transform-style: preserve-3d;
}

.memory-gate-event-horizon__lens,
.memory-gate-event-horizon__well,
.memory-gate-event-horizon__star {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  border-radius: 50%;
}

.memory-gate-event-horizon__lens {
  width: 48%;
  height: 39%;
  background:
    conic-gradient(from 27deg,
      transparent 0 8%,
      rgba(76, 177, 255, .07) 11%,
      transparent 15% 33%,
      rgba(135, 79, 255, .08) 37%,
      transparent 42% 68%,
      rgba(85, 233, 255, .06) 72%,
      transparent 76%);
  clip-path: polygon(50% 0, 74% 11%, 94% 37%, 86% 70%, 61% 96%, 31% 87%, 6% 61%, 13% 28%);
  opacity: .44;
  transform: translate(-50%, -50%) translateZ(-150px) rotate(-9deg);
  animation: mg-horizon-lens 28s cubic-bezier(.45, .05, .55, .95) 3s infinite paused;
}

.memory-gate-event-horizon__well {
  width: 23%;
  height: 21%;
  background:
    conic-gradient(from 205deg,
      rgba(2, 5, 17, .98),
      rgba(18, 8, 53, .86) 21%,
      rgba(2, 18, 34, .92) 43%,
      rgba(6, 4, 22, .98) 69%,
      rgba(10, 17, 42, .9));
  clip-path: polygon(50% 0, 83% 17%, 100% 55%, 75% 92%, 35% 100%, 4% 67%, 13% 22%);
  box-shadow:
    inset 0 0 12px rgba(0, 0, 0, .95),
    0 0 13px rgba(var(--mg-violet), .13);
  opacity: .88;
  transform: translate(-50%, -50%) translateZ(-220px) rotate(14deg);
  animation: mg-horizon-well 17.4s ease-in-out 3s infinite paused;
}

.memory-gate-event-horizon__star {
  width: 4px;
  height: 4px;
  background: #e3fdff;
  box-shadow:
    0 0 5px rgba(211, 252, 255, 1),
    0 0 14px rgba(var(--mg-cyan), .95),
    0 0 36px rgba(var(--mg-violet), .64);
  opacity: .86;
  transform: translate(-50%, -50%) translateZ(-260px);
  animation: mg-horizon-star 28s ease-in-out 3s infinite paused;
}

.about-memory-gate.is-in-view .memory-gate-event-horizon {
  animation: mg-horizon-awaken 1.35s cubic-bezier(.18, .74, .18, 1) 1.18s both;
}

.about-memory-gate.is-in-view .memory-gate-depth-planes {
  animation: mg-depth-field-born 1.1s ease 1.36s both;
}

.about-memory-gate.is-in-view .memory-gate-depth {
  animation:
    mg-depth-awaken 1.45s ease 1.12s both,
    mg-depth-story 28s ease-in-out 3s infinite;
}

.about-memory-gate.is-in-view .memory-gate-depth::before {
  animation: mg-depth-rays 19s linear 2.5s infinite;
}

.about-memory-gate.is-in-view .memory-gate-depth::after {
  animation: mg-depth-fracture 28s steps(2, end) 3s infinite;
}

/* 2 // MEMORY CURRENT: irregular routes converge at independent speeds. */
.memory-gate-currents {
  z-index: 4;
  overflow: hidden;
  border-radius: inherit;
  opacity: 0;
}

.memory-gate-currents > i {
  position: absolute;
  display: block;
  width: clamp(38px, 11vw, 76px);
  height: clamp(13px, 3vw, 24px);
  border-top: 1.25px solid rgba(var(--current-color), .9);
  border-left: 1px solid rgba(var(--current-color), .28);
  border-radius: 58% 42% 46% 54%;
  box-shadow: 0 -2px 7px rgba(var(--current-color), .22);
  opacity: 0;
  transform-origin: center;
  animation: mg-current-draw var(--current-duration) cubic-bezier(.42, .03, .64, .98) var(--current-delay) infinite paused;
}

.memory-gate-currents > i:nth-child(1) { left: -13%; top: 16%; --current-r:-21deg; --current-mx:32%; --current-my:31%; }
.memory-gate-currents > i:nth-child(2) { left: 79%; top: 5%; --current-r:31deg; --current-mx:62%; --current-my:27%; }
.memory-gate-currents > i:nth-child(3) { left: -18%; top: 47%; --current-r:-66deg; --current-mx:31%; --current-my:49%; }
.memory-gate-currents > i:nth-child(4) { left: 88%; top: 38%; --current-r:73deg; --current-mx:70%; --current-my:48%; }
.memory-gate-currents > i:nth-child(5) { left: 4%; top: 78%; --current-r:-124deg; --current-mx:34%; --current-my:67%; }
.memory-gate-currents > i:nth-child(6) { left: 76%; top: 84%; --current-r:126deg; --current-mx:66%; --current-my:69%; }
.memory-gate-currents > i:nth-child(7) { left: 35%; top: -9%; --current-r:-4deg; --current-mx:45%; --current-my:25%; }
.memory-gate-currents > i:nth-child(8) { left: 55%; top: 103%; --current-r:177deg; --current-mx:55%; --current-my:73%; }
.memory-gate-currents > i:nth-child(9) { left: 101%; top: 66%; --current-r:109deg; --current-mx:72%; --current-my:59%; }

.about-memory-gate.is-in-view .memory-gate-currents {
  animation: mg-currents-born .95s ease 1.52s both;
}

/* 3 // FRACTURED MEMORY: only five meaningful fragments. */
.memory-gate-fragments {
  z-index: 6;
  overflow: hidden;
  border-radius: inherit;
}

.memory-fragment {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  display: grid;
  place-items: center;
  color: rgba(155, 235, 255, .78);
  font: 600 .52rem/1 var(--font-mono, monospace);
  font-style: normal;
  letter-spacing: .08em;
  text-shadow: 0 0 7px rgba(var(--mg-cyan), .55);
  opacity: 0;
}

.memory-fragment--feather {
  width: 25px;
  height: 25px;
  animation: mg-memory-draw-a 28s cubic-bezier(.42, .04, .68, 1) 3s infinite paused;
}

.memory-fragment--feather img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: hue-rotate(169deg) saturate(.85) brightness(1.25);
}

.memory-fragment--petal {
  width: 10px;
  height: 19px;
  border: 1px solid rgba(144, 239, 255, .66);
  border-radius: 70% 20% 70% 20%;
  background: linear-gradient(145deg, rgba(var(--mg-cyan), .34), rgba(var(--mg-violet), .16));
  animation: mg-memory-draw-b 28s cubic-bezier(.42, .04, .68, 1) 3s infinite paused;
}

.memory-fragment--glyph {
  animation: mg-memory-glyph 28s ease 3s infinite paused;
}

.memory-fragment--signal {
  color: rgba(167, 112, 255, .72);
  animation: mg-memory-signal 28s ease 3s infinite paused;
}

.memory-fragment--4072 {
  display: flex;
  gap: 2px;
  color: rgba(136, 232, 255, .66);
  letter-spacing: .04em;
  animation: mg-memory-4072 28s cubic-bezier(.4, .05, .62, 1) 3s infinite paused;
}

.memory-fragment--4072 b {
  font: inherit;
}

/* 4 // FRONT MEMBRANE: quiet spatial distortion, never water. */
.about-memory-gate.is-in-view .memory-gate-membrane {
  animation:
    mg-membrane-born .9s ease 2.04s both,
    mg-membrane-story 28s ease-in-out 3s infinite;
}

.about-memory-gate.is-in-view .memory-gate-membrane::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(88deg, transparent 34%, rgba(116, 235, 255, .09) 49%, transparent 63%),
    linear-gradient(101deg, transparent 42%, rgba(139, 83, 255, .08) 51%, transparent 59%);
  opacity: 0;
  transform: translateX(-7px);
  animation: mg-membrane-fracture 28s steps(2, end) 3s infinite;
}

.about-memory-gate.is-in-view .memory-gate-membrane::after {
  animation: mg-membrane-events 28s ease-in-out 3s infinite;
}

.about-memory-gate.is-in-view .memory-gate-membrane i:nth-child(1) { animation: mg-membrane-wave-a 28s ease-out 3s infinite; }
.about-memory-gate.is-in-view .memory-gate-membrane i:nth-child(2) { animation: mg-membrane-wave-b 28s ease-out 3s infinite; }
.about-memory-gate.is-in-view .memory-gate-membrane i:nth-child(3) { animation: mg-membrane-wave-c 28s ease-out 3s infinite; }

/* MEMORY LOCK: one strong activation beat, then gone. */
.memory-gate-lock {
  z-index: 10;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: inherit;
  background: rgba(0, 1, 8, 0);
  opacity: 0;
}

.memory-gate-lock i {
  position: absolute;
  inset: 6%;
  border: 1px solid transparent;
  border-color: rgba(var(--mg-cyan), .7) rgba(var(--mg-violet), .2) rgba(var(--mg-cyan), .15);
  clip-path: polygon(50% 0, 78% 8%, 100% 37%, 91% 73%, 66% 100%, 30% 92%, 0 63%, 8% 25%);
  opacity: 0;
}

.memory-gate-lock b {
  color: rgba(205, 251, 255, .78);
  font: 600 .42rem/1 var(--font-mono, monospace);
  letter-spacing: .2em;
  text-shadow: 0 0 8px rgba(var(--mg-cyan), .68);
  opacity: 0;
}

.about-memory-gate.is-in-view .memory-gate-lock {
  animation: mg-memory-lock 1.05s cubic-bezier(.18, .7, .24, 1) 2.23s both;
}

.about-memory-gate.is-in-view .memory-gate-lock i {
  animation: mg-memory-lock-edge 1.05s cubic-bezier(.18, .7, .24, 1) 2.23s both;
}

.about-memory-gate.is-in-view .memory-gate-lock b {
  animation: mg-memory-lock-label 1.05s steps(2, end) 2.23s both;
}

/* Long score also drives light back onto the approved masonry. */
.about-memory-gate.is-in-view .memory-gate-archstone {
  animation:
    mg-reveal-stone 1.55s cubic-bezier(.18, .7, .2, 1) .1s both,
    mg-stone-memory-response 28s ease-in-out 3s infinite;
}

.about-memory-gate.is-in-view .memory-gate-inner-wall {
  animation:
    mg-inner-edge 1.25s ease 1.34s both,
    mg-inner-wall-story 28s ease-in-out 3s infinite;
}

.about-memory-gate.is-in-view .memory-gate-crack {
  animation:
    mg-crack-ignite 1.1s cubic-bezier(.3, .1, .18, 1) 1s both,
    mg-crack-story 28s ease-in-out 3s infinite;
}

.about-memory-gate.is-in-view .memory-gate-crack--b { animation-delay: 1.12s, 3s; }
.about-memory-gate.is-in-view .memory-gate-crack--c { animation-delay: 1.25s, 3s; }

.about-memory-gate.is-in-view .memory-gate-conduit {
  animation:
    mg-conduit-rise 1.25s ease 1.08s both,
    mg-conduit-story 28s ease-in-out 3s infinite;
}

.about-memory-gate.is-in-view .memory-gate-lily {
  animation:
    mg-lily-born .9s ease 2.12s both,
    mg-lily-story 28s ease-in-out 3s infinite;
}

.about-memory-gate.is-in-view .memory-gate-lily__bloom path {
  animation: mg-lily-segment-story 28s ease-in-out 3s infinite;
}

.about-memory-gate.is-in-view .memory-gate-lily__bloom path:nth-child(2),
.about-memory-gate.is-in-view .memory-gate-lily__bloom path:nth-child(5) {
  animation-delay: 3.08s;
}

.about-memory-gate.is-in-view .memory-gate-core {
  animation:
    mg-core-born .65s ease 2.2s both,
    mg-core-story 28s ease-in-out 3s infinite;
}

/* Hover/focus raises response only; geometry and speed remain fixed. */
.about-memory-gate:is(:hover, :focus-visible) .memory-gate-event-horizon__star {
  filter: brightness(1.08);
}

.about-memory-gate:is(:hover, :focus-visible) .memory-gate-currents {
  opacity: 1;
}

.about-memory-gate:is(:hover, :focus-visible) .memory-gate-action > i::after {
  background: rgba(192, 249, 255, .9);
  box-shadow: 0 0 13px rgba(var(--mg-cyan), .84), 0 0 24px rgba(var(--mg-violet), .24);
}

.about-memory-gate:is(:hover, :focus-visible) .memory-gate-inner-wall {
  border-color: rgba(6, 17, 29, .96);
}

@keyframes mg-horizon-awaken {
  0%, 14% { opacity: 0; }
  55% { opacity: .46; }
  100% { opacity: 1; }
}

@keyframes mg-depth-field-born {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes mg-depth-awaken {
  0% { opacity: .16; filter: brightness(.48) saturate(.72); }
  52% { opacity: .72; filter: brightness(.9) saturate(.92); }
  100% { opacity: .94; filter: brightness(1) saturate(1); }
}

@keyframes mg-depth-story {
  0%, 30%, 50%, 72%, 100% { opacity: .9; filter: brightness(.96) saturate(.98); }
  36% { opacity: .96; filter: brightness(1.08) saturate(1.06); }
  40% { opacity: 1; filter: brightness(1.28) saturate(1.14); }
  45% { opacity: .93; filter: brightness(1.04) saturate(1.02); }
  63% { opacity: .82; filter: brightness(.82) saturate(1.18); }
  66% { opacity: 1; filter: brightness(1.2) saturate(1.25); }
  69% { opacity: .9; filter: brightness(.98) saturate(1); }
  86% { opacity: .78; filter: brightness(.84) saturate(.9); }
  89% { opacity: 1; filter: brightness(1.23) saturate(1.14); }
  94% { opacity: .91; filter: brightness(1) saturate(1); }
}

@keyframes mg-depth-rays {
  0% { opacity: .2; transform: rotate(0deg); }
  47% { opacity: .34; }
  100% { opacity: .2; transform: rotate(360deg); }
}

@keyframes mg-depth-fracture {
  0%, 61%, 70%, 100% { opacity: .18; transform: translate(0, 0); }
  63% { opacity: .5; transform: translate(-2px, 1px); }
  65% { opacity: .16; transform: translate(3px, -1px); }
  67% { opacity: .54; transform: translate(-1px, 0); }
  69% { opacity: .22; transform: translate(0, 0); }
}

@keyframes mg-currents-born {
  0% { opacity: 0; }
  100% { opacity: .78; }
}

@keyframes mg-horizon-lens {
  0%, 31%, 52%, 76%, 100% { opacity: .25; transform: translate(-50%, -50%) translateZ(-150px) rotate(-9deg); }
  38% { opacity: .43; transform: translate(-50%, -50%) translateZ(-146px) rotate(-5deg); }
  44% { opacity: .3; transform: translate(-50%, -50%) translateZ(-152px) rotate(-7deg); }
  63% { opacity: .22; transform: translate(-49.3%, -50.2%) translateZ(-150px) rotate(-7deg); }
  66% { opacity: .42; transform: translate(-50.7%, -49.8%) translateZ(-148px) rotate(-11deg); }
  69% { opacity: .27; transform: translate(-50%, -50%) translateZ(-151px) rotate(-9deg); }
  85% { opacity: .18; }
  89% { opacity: .39; }
}

@keyframes mg-horizon-well {
  0%, 100% { opacity: .78; transform: translate(-50%, -50%) translateZ(-220px) rotate(14deg); }
  46% { opacity: .94; transform: translate(-50%, -50%) translateZ(-224px) rotate(21deg); }
}

@keyframes mg-horizon-star {
  0%, 31%, 51%, 76%, 100% { opacity: .64; box-shadow: 0 0 5px #dffcff, 0 0 14px rgba(var(--mg-cyan), .8), 0 0 29px rgba(var(--mg-violet), .42); }
  39% { opacity: 1; box-shadow: 0 0 8px #effeff, 0 0 22px rgba(var(--mg-cyan), 1), 0 0 44px rgba(var(--mg-violet), .74); }
  45% { opacity: .72; }
  63% { opacity: .5; }
  66% { opacity: .95; }
  69% { opacity: .63; }
  86% { opacity: .25; }
  89% { opacity: 1; }
  94% { opacity: .58; }
}

@keyframes mg-current-draw {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--current-r)) scale(.75);
  }
  12% { opacity: .62; }
  47% {
    left: var(--current-mx);
    top: var(--current-my);
    opacity: .46;
    transform: translate(-50%, -50%) rotate(calc(var(--current-r) + 24deg)) scale(.58);
  }
  79% { opacity: .22; }
  100% {
    left: 50%;
    top: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) rotate(calc(var(--current-r) + 52deg)) scale(.04);
  }
}

@keyframes mg-memory-draw-a {
  0%, 7% { opacity: 0; transform: translate(-128px, -126px) rotate(-25deg) scale(.86); }
  9% { opacity: .72; }
  12% { opacity: .82; transform: translate(-93px, -87px) rotate(-8deg) scale(.74); }
  16% { opacity: .38; transform: translate(-38px, -28px) rotate(28deg) scale(.42); }
  18%, 100% { opacity: 0; transform: translate(0, 0) rotate(61deg) scale(.06); }
}

@keyframes mg-memory-draw-b {
  0%, 10% { opacity: 0; transform: translate(112px, 102px) rotate(21deg) scale(.92); }
  12% { opacity: .68; }
  15% { opacity: .76; transform: translate(66px, 59px) rotate(-14deg) scale(.68); }
  18% { opacity: .26; transform: translate(23px, 16px) rotate(-47deg) scale(.28); }
  20%, 100% { opacity: 0; transform: translate(0, 0) rotate(-72deg) scale(.04); }
}

@keyframes mg-memory-glyph {
  0%, 34% { opacity: 0; transform: translate(96px, -74px) scale(.9); }
  37% { opacity: .6; }
  42% { opacity: .74; transform: translate(46px, -31px) scale(.52); }
  47%, 100% { opacity: 0; transform: translate(0, 0) scale(.03); }
}

@keyframes mg-memory-signal {
  0%, 61% { opacity: 0; transform: translate(-112px, 44px) skewX(0) scale(.84); }
  63% { opacity: .62; transform: translate(-95px, 37px) skewX(-12deg) scale(.78); }
  65% { opacity: .2; transform: translate(-70px, 28px) skewX(18deg) scale(.66); }
  67% { opacity: .75; transform: translate(-39px, 16px) skewX(-8deg) scale(.39); }
  70%, 100% { opacity: 0; transform: translate(0, 0) skewX(0) scale(.04); }
}

@keyframes mg-memory-4072 {
  0%, 83% { opacity: 0; transform: translate(72px, -55px) rotate(3deg) scale(.86); }
  85% { opacity: .28; }
  87% { opacity: .74; transform: translate(54px, -38px) rotate(-4deg) scale(.72); }
  88% { opacity: .2; transform: translate(47px, -31px) skewX(16deg) scale(.65); }
  89% { opacity: .82; transform: translate(35px, -22px) skewX(-9deg) scale(.52); }
  91% { opacity: .34; transform: translate(12px, -7px) scaleX(.26) scaleY(.36); }
  93%, 100% { opacity: 0; transform: translate(0, 0) scale(.02); }
}

@keyframes mg-membrane-story {
  0%, 31%, 51%, 61%, 72%, 83%, 100% { opacity: .52; }
  39% { opacity: .7; }
  64% { opacity: .38; }
  66% { opacity: .78; }
  69% { opacity: .55; }
  88% { opacity: .62; }
}

@keyframes mg-membrane-events {
  0%, 35% { opacity: 0; transform: translateX(-125%) skewX(-10deg); }
  40% { opacity: .54; }
  46%, 59% { opacity: 0; transform: translateX(125%) skewX(-10deg); }
  63% { opacity: 0; transform: translateX(-22%) skewX(18deg); }
  66% { opacity: .72; transform: translateX(8%) skewX(-22deg); }
  69%, 84% { opacity: 0; transform: translateX(21%) skewX(4deg); }
  88% { opacity: .38; transform: translateX(-12%) skewX(-8deg); }
  93%, 100% { opacity: 0; transform: translateX(30%) skewX(0); }
}

@keyframes mg-membrane-fracture {
  0%, 62%, 70%, 100% { opacity: 0; transform: translateX(-7px); }
  64% { opacity: .62; transform: translateX(2px); }
  66% { opacity: .28; transform: translateX(-3px); }
  68% { opacity: .7; transform: translateX(1px); }
}

@keyframes mg-membrane-wave-a {
  0%, 36% { opacity: 0; transform: translate(-50%, -50%) scale(.45); }
  40% { opacity: .38; }
  48%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.38); }
}

@keyframes mg-membrane-wave-b {
  0%, 64% { opacity: 0; transform: translate(-50%, -50%) scale(.58) skewX(0); }
  66% { opacity: .44; transform: translate(-49%, -50%) scale(.8) skewX(8deg); }
  70%, 100% { opacity: 0; transform: translate(-51%, -50%) scale(1.22) skewX(-5deg); }
}

@keyframes mg-membrane-wave-c {
  0%, 86% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  89% { opacity: .32; }
  94%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.32); }
}

@keyframes mg-memory-lock {
  0%, 12% { opacity: 0; background: rgba(0, 1, 8, 0); }
  18%, 27% { opacity: 1; background: rgba(0, 1, 8, .72); }
  35% { opacity: 1; background: rgba(17, 15, 58, .18); }
  56% { opacity: .78; background: rgba(4, 24, 42, .06); }
  100% { opacity: 0; background: rgba(0, 1, 8, 0); }
}

@keyframes mg-memory-lock-edge {
  0%, 25% { opacity: 0; filter: brightness(.7); }
  38% { opacity: 1; filter: brightness(1.7); }
  63% { opacity: .32; filter: brightness(1); }
  100% { opacity: 0; }
}

@keyframes mg-memory-lock-label {
  0%, 31% { opacity: 0; }
  39%, 52% { opacity: .72; }
  53%, 100% { opacity: 0; }
}

@keyframes mg-stone-memory-response {
  0%, 30%, 50%, 72%, 100% {
    box-shadow:
      inset 8px 4px 12px rgba(113, 205, 231, .08),
      inset -11px -5px 14px rgba(0, 0, 0, .72),
      12px 11px 0 rgba(0, 0, 0, .56),
      18px 20px 28px rgba(0, 0, 0, .4),
      0 0 0 1px rgba(101, 205, 235, .1);
  }
  39% {
    box-shadow:
      inset 8px 4px 14px rgba(var(--mg-cyan), .16),
      inset -11px -5px 14px rgba(0, 0, 0, .67),
      12px 11px 0 rgba(0, 0, 0, .56),
      18px 20px 28px rgba(0, 0, 0, .4),
      0 0 9px rgba(var(--mg-violet), .12);
  }
  66% {
    box-shadow:
      inset 4px 4px 11px rgba(var(--mg-violet), .13),
      inset -8px -4px 12px rgba(var(--mg-cyan), .11),
      12px 11px 0 rgba(0, 0, 0, .56),
      18px 20px 28px rgba(0, 0, 0, .4),
      0 0 5px rgba(var(--mg-cyan), .08);
  }
  88% {
    box-shadow:
      inset 8px 4px 13px rgba(var(--mg-cyan), .13),
      inset -11px -5px 14px rgba(0, 0, 0, .69),
      12px 11px 0 rgba(0, 0, 0, .56),
      18px 20px 28px rgba(0, 0, 0, .4),
      0 0 7px rgba(var(--mg-violet), .1);
  }
}

@keyframes mg-inner-wall-story {
  0%, 30%, 50%, 72%, 100% { opacity: .82; filter: brightness(1); }
  39% { opacity: 1; filter: brightness(1.24); }
  66% { opacity: .9; filter: brightness(1.14); }
  88% { opacity: .94; filter: brightness(1.18); }
}

@keyframes mg-crack-story {
  0%, 31%, 50%, 72%, 100% { opacity: .22; }
  38% { opacity: .74; }
  41% { opacity: .37; }
  64% { opacity: .5; }
  66% { opacity: .76; }
  69% { opacity: .28; }
  87% { opacity: .55; }
  90% { opacity: .24; }
}

@keyframes mg-conduit-story {
  0%, 32%, 49%, 71%, 100% { opacity: .18; }
  39% { opacity: .56; }
  66% { opacity: .42; }
  88% { opacity: .38; }
}

@keyframes mg-lily-story {
  0%, 31%, 51%, 72%, 100% { opacity: .25; filter: brightness(.86); }
  39% { opacity: .44; filter: brightness(1.22); }
  64% { opacity: .19; filter: brightness(.72); }
  68% { opacity: .38; filter: brightness(1.16); }
  88% { opacity: .34; filter: brightness(1.1); }
}

@keyframes mg-lily-segment-story {
  0%, 61%, 69%, 100% { opacity: 1; }
  64% { opacity: .18; }
  66% { opacity: .72; }
  67% { opacity: .34; }
}

@keyframes mg-core-story {
  0%, 31%, 51%, 72%, 100% { opacity: .62; box-shadow: 0 0 7px rgba(var(--mg-cyan), .72), 0 0 19px rgba(var(--mg-violet), .3); }
  39% { opacity: 1; box-shadow: 0 0 12px rgba(var(--mg-cyan), 1), 0 0 34px rgba(var(--mg-violet), .66); }
  64% { opacity: .42; }
  66% { opacity: .95; box-shadow: 0 0 11px rgba(var(--mg-violet), .92), 0 0 31px rgba(var(--mg-cyan), .48); }
  69% { opacity: .58; }
  88% { opacity: .9; }
}

/* New long-running layers obey the existing viewport/page lifecycle. */
.memory-gate-event-horizon *,
.memory-gate-currents *,
.memory-gate-fragments *,
.about-memory-gate .memory-gate-membrane::before,
.about-memory-gate .memory-gate-membrane::after {
  animation-play-state: paused;
}

.about-memory-gate.is-in-view:not(.is-page-hidden) .memory-gate-event-horizon *,
.about-memory-gate.is-in-view:not(.is-page-hidden) .memory-gate-currents *,
.about-memory-gate.is-in-view:not(.is-page-hidden) .memory-gate-fragments *,
.about-memory-gate.is-in-view:not(.is-page-hidden) .memory-gate-membrane::before,
.about-memory-gate.is-in-view:not(.is-page-hidden) .memory-gate-membrane::after {
  animation-play-state: running;
}

.about-memory-gate.is-page-hidden *,
.about-memory-gate.is-page-hidden *::before,
.about-memory-gate.is-page-hidden *::after,
.about-memory-gate:not(.is-in-view) *,
.about-memory-gate:not(.is-in-view) *::before,
.about-memory-gate:not(.is-in-view) *::after {
  animation-play-state: paused !important;
}

html.visual-soft .memory-gate-depth-planes > i:nth-child(n+4),
html.visual-soft .memory-gate-flow > i:nth-child(n+6),
html.visual-soft .memory-gate-motes i:nth-child(n+6),
html.visual-soft .memory-gate-currents > i:nth-child(n+6),
html.visual-soft .memory-fragment--glyph,
html.visual-soft .memory-fragment--signal {
  display: none;
}

html.visual-soft .memory-gate-atmosphere i:nth-child(2) {
  display: none;
}

@media (max-width: 760px) {
  .about-memory-gate {
    min-height: 680px;
    padding-inline: .35rem;
  }

  .memory-gate-copy {
    padding-inline: .75rem;
  }

  .memory-gate-copy strong {
    font-size: clamp(1.75rem, 8vw, 2.45rem);
  }

  .memory-gate-visual {
    width: 100%;
    max-width: 470px;
    height: 510px;
    margin-top: .45rem;
  }

  .memory-gate-aperture { width: 55%; height: 66%; }
  .memory-gate-inner-wall { width: 62%; height: 72%; }
  .memory-gate-archstone { width: 73%; height: 79%; }
  .memory-gate-pillar { height: 55%; }

  .memory-gate-lower {
    grid-template-columns: 1fr;
    justify-items: center;
    width: calc(100% - 1.5rem);
    margin-inline: auto;
    margin-top: 0;
    text-align: center;
  }

  .memory-gate-lower .about-module-text {
    margin-inline: auto;
  }

  .memory-gate-action {
    justify-self: center;
    margin-inline: auto;
    width: min(260px, 100%);
  }
}

/* A phone held horizontally is wider than the portrait breakpoint, but the
   portal still needs the compact reading order: relic, copy, centred CTA. */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 960px) {
  .memory-gate-lower {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    width: calc(100% - 1.5rem);
    margin-inline: auto;
    margin-top: 0;
    text-align: center;
  }

  .memory-gate-lower .about-module-text {
    max-width: 620px;
    margin-inline: auto;
  }

  .memory-gate-action {
    justify-self: center;
    margin-inline: auto;
    width: min(280px, 100%);
  }
}

@media (max-width: 460px) {
  .about-memory-gate {
    min-height: 620px;
  }

  .memory-gate-visual {
    height: 450px;
  }

  .memory-gate-stones img {
    width: 17px;
    height: 17px;
  }

  .memory-gate-flow > i:nth-child(n+6),
  .memory-gate-motes i:nth-child(n+6),
  .memory-gate-currents > i:nth-child(n+7) {
    display: none;
  }

  .memory-gate-pillar > small {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-memory-gate *,
  .about-memory-gate *::before,
  .about-memory-gate *::after {
    animation: none !important;
    transition: none !important;
  }

  .memory-gate-atmosphere { opacity: .72; }
  .memory-gate-aura { opacity: .55; }
  .memory-gate-archstone,
  .memory-gate-pillar,
  .memory-gate-stones > i { opacity: 1; }
  .memory-gate-aperture { opacity: 1; }
  .memory-gate-inner-wall { opacity: .82; }
  .memory-gate-vanishing {
    opacity: .68;
    transform: translate(-50%, -50%) translateZ(-92px) scaleY(1);
  }
  .memory-gate-depth-planes > i:nth-child(1) {
    opacity: .24;
    transform: translateZ(-120px) rotate(-7deg) scale(.54);
  }
  .memory-gate-event-horizon { opacity: 1; }
  .memory-gate-event-horizon__lens { opacity: .3; }
  .memory-gate-event-horizon__well { opacity: .88; }
  .memory-gate-event-horizon__star { opacity: .76; }
  .memory-gate-currents { opacity: .65; }
  .memory-gate-currents > i { opacity: .32; }
  .memory-gate-fragments .memory-fragment { opacity: 0; }
  .memory-gate-lock { opacity: 0; }
  .memory-gate-flow > i { opacity: .24; }
  .memory-gate-membrane { opacity: .58; }
  .memory-gate-lily { opacity: .33; }
  .memory-gate-core { opacity: .8; }
  .memory-gate-crack { opacity: .32; }
  .memory-gate-conduit { opacity: .27; }
  .memory-gate-motes i { opacity: .3; }
}