:root {
  --motion-ease: cubic-bezier(.22, 1, .36, 1);
  --motion-ember: rgba(205, 117, 75, .72);
  --motion-paper: rgba(234, 223, 201, .7);
  --portal-shift-x: 0px;
  --portal-shift-y: 0px;
}

body {
  position: relative;
  overflow-x: hidden;
}

body::before {
  content: "";
  position: fixed;
  inset: -18vmax;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 26%, rgba(189, 104, 69, .095), transparent 26%),
    radial-gradient(circle at 78% 64%, rgba(134, 185, 178, .055), transparent 24%),
    radial-gradient(circle at 54% 48%, rgba(205, 178, 126, .035), transparent 32%);
  filter: blur(18px);
  transform: translate3d(0, 0, 0) scale(1.04);
  animation: ambientAurora 24s ease-in-out infinite alternate;
  transition: background 1.1s var(--motion-ease), filter 1.1s ease;
}

html[data-portal-world="trial"] body::before { background:radial-gradient(circle at 50% 24%,rgba(189,104,69,.18),transparent 31%),radial-gradient(circle at 22% 70%,rgba(189,104,69,.07),transparent 25%),#080604; filter:blur(13px) saturate(1.15); }
html[data-portal-world="graph"] body::before { background:radial-gradient(circle at 50% 24%,rgba(134,185,178,.15),transparent 31%),radial-gradient(circle at 78% 70%,rgba(134,185,178,.07),transparent 25%),#080604; filter:blur(13px) saturate(1.15); }
html[data-portal-world="encounter"] body::before { background:radial-gradient(circle at 50% 24%,rgba(205,178,126,.16),transparent 31%),radial-gradient(circle at 30% 72%,rgba(205,178,126,.07),transparent 25%),#080604; filter:blur(13px) saturate(1.15); }

.topbar,
main,
footer {
  position: relative;
  z-index: 2;
}

.ambient-field,
.motion-glow {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.ambient-particle {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: rgba(234, 223, 201, .72);
  box-shadow: 0 0 12px rgba(205, 178, 126, .42);
  opacity: 0;
  animation: particleDrift var(--duration) var(--delay) ease-in-out infinite;
}

.ambient-particle.particle-1 {
  background: rgba(134, 185, 178, .64);
  box-shadow: 0 0 14px rgba(134, 185, 178, .38);
}

.ambient-particle.particle-2 {
  background: rgba(205, 178, 126, .78);
  box-shadow: 0 0 16px rgba(205, 178, 126, .48);
}

.motion-glow {
  inset: auto;
  width: 30rem;
  height: 30rem;
  margin: -15rem 0 0 -15rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(189, 104, 69, .085), transparent 67%);
  opacity: 0;
  transition: opacity .6s ease;
  will-change: left, top;
}

.portal-burst {
  --burst-color: rgba(205, 178, 126, .72);
  --burst-scale: 24;
  position: fixed;
  z-index: 40;
  width: 24px;
  height: 24px;
  margin: -12px 0 0 -12px;
  border: 1px solid var(--burst-color);
  border-radius: 50%;
  box-shadow: 0 0 24px var(--burst-color), inset 0 0 14px var(--burst-color);
  pointer-events: none;
  animation: burstRing 1.15s var(--motion-ease) both;
}

.portal-burst::before,
.portal-burst::after {
  content: "";
  position: absolute;
  inset: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.portal-burst::before {
  width: 180%;
  height: 180%;
  border: 1px dashed var(--burst-color);
  animation: burstCounterspin 1.15s ease-out both;
}

.portal-burst::after {
  width: 12px;
  height: 12px;
  background: var(--burst-color);
  filter: blur(6px);
  animation: burstFlash .62s ease-out both;
}

.portal-burst.ignition,
.portal-burst.entry { --burst-scale: 44; }
.portal-burst.encounter { --burst-color: rgba(189, 104, 69, .82); --burst-scale: 30; }
.portal-burst.serendipity { --burst-color: rgba(134, 185, 178, .76); --burst-scale: 34; }
.portal-burst.success { --burst-color: rgba(205, 178, 126, .92); --burst-scale: 38; }
.portal-burst.failed { --burst-color: rgba(187, 103, 88, .82); --burst-scale: 20; }

#motionProgress {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 30;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--ember) 18%, var(--paper) 72%, transparent);
  box-shadow: 0 0 14px rgba(189, 104, 69, .5);
  transform: scaleX(0);
  transform-origin: left center;
  pointer-events: none;
}

.topbar {
  animation: topbarArrival .8s .05s var(--motion-ease) both;
}

.brand span {
  display: inline-block;
  transform-origin: 50% 52%;
  animation: returnOrbit 11s 1.2s var(--motion-ease) infinite;
}

.system-state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.system-state::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 0 currentColor;
  animation: statusSignal 2.8s ease-out infinite;
}

.hero {
  position: relative;
  isolation: isolate;
}

.hero > :not(.portal-aperture) {
  position: relative;
  z-index: 1;
}

.portal-aperture {
  position: absolute;
  left: 50%;
  top: 47%;
  z-index: -1;
  width: min(76vw, 820px);
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) scale(.9);
  filter: drop-shadow(0 0 42px rgba(189, 104, 69, .2));
  opacity: 0;
  will-change: transform;
}

.portal-awake .portal-aperture {
  animation: apertureIgnition 1.55s .08s var(--motion-ease) both;
}

.portal-ready .portal-aperture {
  opacity: 1;
  transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) scale(1);
}

.aperture-ring,
.aperture-core {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  aspect-ratio: 1;
  border-radius: 50%;
}

.aperture-ring {
  background: conic-gradient(from 0deg, transparent 0 7%, rgba(189, 104, 69, .74) 10%, transparent 14% 29%, rgba(205, 178, 126, .5) 33%, transparent 38% 61%, rgba(134, 185, 178, .42) 66%, transparent 72% 88%, rgba(234, 223, 201, .5) 92%, transparent 96%);
  -webkit-mask: radial-gradient(circle, transparent 0 58%, #000 59% 61%, transparent 62% 68%, #000 69% 69.6%, transparent 71%);
  mask: radial-gradient(circle, transparent 0 58%, #000 59% 61%, transparent 62% 68%, #000 69% 69.6%, transparent 71%);
  mix-blend-mode: screen;
}

.ring-outer {
  width: 100%;
  opacity: .48;
  animation: apertureOrbit 32s linear infinite;
}

.ring-middle {
  width: 79%;
  opacity: .66;
  animation: apertureOrbitReverse 21s linear infinite;
}

.ring-inner {
  width: 58%;
  opacity: .82;
  animation: apertureOrbit 13s linear infinite;
}

.aperture-core {
  width: 32%;
  background:
    radial-gradient(circle, rgba(234, 223, 201, .17), rgba(189, 104, 69, .13) 24%, rgba(8, 6, 4, .88) 66%, transparent 70%);
  transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0);
  box-shadow: 0 0 58px rgba(189, 104, 69, .2), inset 0 0 42px rgba(205, 178, 126, .1);
  animation: apertureCore 5.8s ease-in-out infinite;
}

.hero::before,
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: -1;
  width: min(74vw, 760px);
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.hero::before {
  background: conic-gradient(from 25deg, transparent 0 13%, rgba(189, 104, 69, .48) 16%, transparent 20% 48%, rgba(205, 178, 126, .28) 52%, transparent 56% 82%, rgba(134, 185, 178, .2) 86%, transparent 90%);
  -webkit-mask: radial-gradient(circle, transparent 0 55%, #000 55.4% 55.7%, transparent 56.1% 64%, #000 64.25% 64.48%, transparent 64.8%);
  mask: radial-gradient(circle, transparent 0 55%, #000 55.4% 55.7%, transparent 56.1% 64%, #000 64.25% 64.48%, transparent 64.8%);
  opacity: .48;
  animation: portalOrbit 28s linear infinite;
}

.hero::after {
  background: radial-gradient(circle, rgba(189, 104, 69, .11), rgba(189, 104, 69, .025) 35%, transparent 67%);
  filter: blur(9px);
  animation: portalAura 7s ease-in-out infinite;
}

.hero .eyebrow,
.hero .thesis,
.hero .loop,
.hero .status,
.hero .hero-actions,
.hero .observatory-threshold {
  animation: riseIntoView .9s var(--motion-ease) both;
}

.hero .eyebrow { animation-delay: .18s; }
.hero h1 {
  animation:
    titleArrival 1.15s .28s var(--motion-ease) both,
    titleBreath 8s 1.5s ease-in-out infinite;
  text-shadow: 0 0 0 rgba(189, 104, 69, 0);
}
.hero .thesis { animation-delay: .5s; }
.hero .loop { animation-delay: .64s; }
.hero .status { animation-delay: .74s; }
.hero .hero-actions { animation-delay: .84s; }
.hero .observatory-threshold { animation-delay: .96s; }

.portal-entering .portal-aperture {
  animation: apertureOpen 1.35s var(--motion-ease) both;
}

.portal-entering .hero h1 {
  letter-spacing: .145em;
  text-shadow: 0 0 34px rgba(234, 223, 201, .26), 0 0 82px rgba(189, 104, 69, .36);
  transition: letter-spacing .8s var(--motion-ease), text-shadow .8s ease;
}

.portal-entering .hero::after {
  animation: portalEnterAura 1.35s var(--motion-ease) both;
}

.loop span {
  animation: loopSignal 8s ease-in-out infinite;
}
.loop span:nth-of-type(1) { animation-delay: 0s; }
.loop span:nth-of-type(2) { animation-delay: 1.25s; }
.loop span:nth-of-type(3) { animation-delay: 2.5s; }
.loop span:nth-of-type(4) { animation-delay: 3.75s; }
.loop i:last-child { animation: returnPulse 5s 4.5s ease-in-out infinite; }

.hero-actions button,
.generate {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: transform .28s var(--motion-ease), border-color .28s ease, background-color .28s ease, color .28s ease;
}

.world-threshold { transition:transform .42s var(--motion-ease),border-color .28s ease,background-color .42s ease,box-shadow .42s ease; }
.world-threshold.world-awake { animation:thresholdPassage .86s var(--motion-ease) both; }
.world-thresholds:has(.world-threshold:hover) .world-threshold:not(:hover),
.world-thresholds:has(.world-threshold:focus-visible) .world-threshold:not(:focus-visible) { opacity:.62; filter:saturate(.58); }

.hero-actions button::after,
.generate::after {
  content: "";
  position: absolute;
  inset: -35% auto -35% -70%;
  z-index: -1;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .42), transparent);
  transform: skewX(-18deg) translateX(-260%);
  animation: actionSweep 5.6s 1.8s ease-in-out infinite;
}

.hero-actions button:hover,
.hero-actions button:focus-visible,
.generate:hover,
.generate:focus-visible {
  transform: translateY(-3px);
}

.motion-section {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .85s var(--motion-ease), transform .85s var(--motion-ease);
}

.motion-section.is-visible {
  opacity: 1;
  transform: none;
}

.motion-section .index {
  transition: letter-spacing 1.1s var(--motion-ease), text-shadow 1.1s ease;
}

.motion-section.is-visible .index {
  letter-spacing: .28em;
  text-shadow: 0 0 18px rgba(189, 104, 69, .32);
}

.motion-item {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --glint-x: 50%;
  --glint-y: 50%;
  opacity: 0;
  transform: translateY(18px) scale(.985);
  transition:
    opacity .65s var(--motion-ease) var(--motion-delay, 0ms),
    transform .65s var(--motion-ease) var(--motion-delay, 0ms),
    border-color .28s ease,
    background-color .28s ease,
    box-shadow .28s ease;
}

.motion-item.is-visible {
  opacity: 1;
  transform: none;
}

.card,
.lens,
.experiment-card,
.evolution-event,
.evidence-grid article,
.transition,
.watch,
.phase {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
}

.card::before,
.lens::before,
.experiment-card::before,
.evolution-event::before,
.evidence-grid article::before,
.transition::before,
.watch::before,
.phase::before {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background: radial-gradient(circle at var(--glint-x) var(--glint-y), rgba(234, 223, 201, .15), transparent 38%);
  opacity: 0;
  transition: opacity .32s ease;
}

.is-kinetic::before {
  opacity: 1;
}

.card.motion-item.is-visible:hover,
.card.motion-item.is-visible:focus-visible,
.lens.motion-item.is-visible:hover,
.lens.motion-item.is-visible:focus-visible,
.experiment-card.motion-item.is-visible:hover,
.evolution-event.motion-item.is-visible:hover {
  transform: perspective(900px) translateY(-7px) rotateX(var(--tilt-y)) rotateY(var(--tilt-x)) scale(1.012);
  box-shadow: 0 22px 58px rgba(0, 0, 0, .3), 0 0 34px rgba(189, 104, 69, .065), inset 0 1px rgba(234, 223, 201, .08);
}

.graph {
  isolation: isolate;
  box-shadow: inset 0 0 90px rgba(189, 104, 69, .055), 0 24px 80px rgba(0, 0, 0, .2);
}

.graph::after {
  content: "";
  position: absolute;
  inset: 18%;
  z-index: -1;
  border: 1px dashed rgba(205, 178, 126, .08);
  border-radius: 50%;
  animation: graphOrbit 38s linear infinite;
}

.graph-scan {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  width: 72%;
  height: 1px;
  transform-origin: left center;
  background: linear-gradient(90deg, rgba(205, 178, 126, .58), rgba(189, 104, 69, .14) 45%, transparent 78%);
  box-shadow: 0 0 16px rgba(205, 178, 126, .24);
  opacity: .38;
  pointer-events: none;
  animation: graphScan 13s linear infinite;
}

.node {
  z-index: 2;
  animation:
    nodeAwaken .72s var(--node-entry-delay, 0ms) var(--motion-ease) both,
    nodeSignal 4.6s var(--node-delay, 0s) ease-in-out infinite;
}

.edge {
  z-index: 1;
  opacity: .3;
  animation:
    edgeAwaken .9s var(--edge-entry-delay, 0ms) var(--motion-ease) both,
    edgeCurrent 4.8s var(--edge-delay, 0s) ease-in-out infinite;
}

.graph-searching .graph {
  animation: graphSearch .72s var(--motion-ease) both;
}

.graph-searching .graph-scan {
  opacity: .82;
  animation-duration: .9s;
}

.curator {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.curator::after {
  content: "";
  position: absolute;
  inset: -35% -15%;
  z-index: -1;
  pointer-events: none;
  background: conic-gradient(from 180deg at 50% 50%, transparent 0 42%, rgba(189, 104, 69, .2) 48%, rgba(205, 178, 126, .11) 52%, transparent 58% 100%);
  opacity: 0;
}

.encounter-generating .curator::after {
  opacity: 1;
  animation: curatorSweep 2.2s linear infinite;
}

.encounter-generating .generate {
  animation: encounterCharge 1.05s ease-in-out infinite;
}

.encounter-generating .ring-outer { animation-duration: 4.5s; }
.encounter-generating .ring-middle { animation-duration: 3.2s; }
.encounter-generating .ring-inner { animation-duration: 2.2s; }

.encounter-created .portal-aperture {
  filter: drop-shadow(0 0 72px rgba(205, 178, 126, .58));
}

.drawer.open {
  animation: drawerArrival .58s var(--motion-ease) both;
}

.backdrop:not([hidden]) {
  animation: backdropArrival .34s ease-out both;
}

.drawer.open .drawer-shell {
  animation: drawerContents .55s .08s var(--motion-ease) both;
}

.motion-paused *,
.motion-paused *::before,
.motion-paused *::after {
  animation-play-state: paused !important;
}

@keyframes apertureIgnition {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) scale(.42) rotate(-12deg);
    filter: blur(18px) drop-shadow(0 0 0 rgba(189, 104, 69, 0));
  }
  52% { opacity: 1; filter: blur(0) drop-shadow(0 0 76px rgba(189, 104, 69, .48)); }
  76% { transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) scale(1.055) rotate(1deg); }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) scale(1) rotate(0);
    filter: blur(0) drop-shadow(0 0 42px rgba(189, 104, 69, .2));
  }
}

@keyframes apertureOrbit {
  from { transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) rotate(0deg); }
  to { transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) rotate(360deg); }
}

@keyframes apertureOrbitReverse {
  from { transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) rotate(360deg); }
  to { transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) rotate(0deg); }
}

@keyframes apertureCore {
  0%, 100% {
    transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) scale(.9);
    opacity: .46;
  }
  50% {
    transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) scale(1.14);
    opacity: .92;
  }
}

@keyframes apertureOpen {
  0% { opacity: 1; transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) scale(1); }
  42% { opacity: 1; transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) scale(.82) rotate(-4deg); filter: brightness(1.8) blur(0); }
  68% { opacity: 1; transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) scale(1.18) rotate(2deg); filter: brightness(1.35) blur(1px); }
  100% { opacity: 1; transform: translate(-50%, -50%) translate3d(var(--portal-shift-x), var(--portal-shift-y), 0) scale(1); filter: brightness(1) blur(0); }
}

@keyframes burstRing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.22) rotate(-18deg); }
  14% { opacity: .96; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(var(--burst-scale)) rotate(42deg); }
}

@keyframes burstCounterspin {
  from { opacity: .86; transform: translate(-50%, -50%) scale(.6) rotate(0); }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.5) rotate(-220deg); }
}

@keyframes burstFlash {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(5); }
}

@keyframes ambientAurora {
  0% { transform: translate3d(-2%, -1%, 0) scale(1.04) rotate(-2deg); opacity: .72; }
  50% { transform: translate3d(2%, 1.5%, 0) scale(1.1) rotate(1deg); opacity: 1; }
  100% { transform: translate3d(-1%, 2%, 0) scale(1.06) rotate(3deg); opacity: .78; }
}

@keyframes particleDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(.65); opacity: .06; }
  35% { opacity: .42; }
  55% { transform: translate3d(var(--drift-x), var(--drift-y), 0) scale(1); opacity: .22; }
  78% { opacity: .5; }
}

@keyframes topbarArrival {
  from { opacity: 0; transform: translateY(-14px); }
  to { opacity: 1; transform: none; }
}

@keyframes returnOrbit {
  0%, 78%, 100% { transform: rotate(0deg); }
  88% { transform: rotate(380deg); }
}

@keyframes statusSignal {
  0% { box-shadow: 0 0 0 0 currentColor; opacity: .95; }
  60%, 100% { box-shadow: 0 0 0 7px transparent; opacity: .45; }
}

@keyframes portalOrbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes portalAura {
  0%, 100% { transform: translate(-50%, -50%) scale(.88); opacity: .42; }
  50% { transform: translate(-50%, -50%) scale(1.08); opacity: .9; }
}

@keyframes portalEnterAura {
  0% { transform: translate(-50%, -50%) scale(.82); opacity: .35; filter: blur(9px); }
  46% { transform: translate(-50%, -50%) scale(1.34); opacity: 1; filter: blur(4px); }
  100% { transform: translate(-50%, -50%) scale(.96); opacity: .5; filter: blur(9px); }
}

@keyframes riseIntoView {
  from { opacity: 0; transform: translateY(18px); filter: blur(5px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes titleArrival {
  from { opacity: 0; transform: translateY(24px) scale(.94); filter: blur(9px); letter-spacing: .19em; }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes titleBreath {
  0%, 100% { transform: scale(1); text-shadow: 0 0 0 rgba(189, 104, 69, 0); }
  50% { transform: scale(1.012); text-shadow: 0 0 42px rgba(189, 104, 69, .16); }
}

@keyframes loopSignal {
  0%, 12%, 100% { color: var(--ember); text-shadow: none; }
  5% { color: var(--paper); text-shadow: 0 0 14px rgba(234, 223, 201, .42); }
}

@keyframes returnPulse {
  0%, 74%, 100% { color: var(--fade); transform: rotate(0deg); }
  84% { color: var(--paper); transform: rotate(360deg); }
}

@keyframes actionSweep {
  0%, 58% { transform: skewX(-18deg) translateX(-260%); }
  76%, 100% { transform: skewX(-18deg) translateX(720%); }
}

@keyframes thresholdPassage {
  0% { transform:translateY(0) scale(1); filter:brightness(1); }
  34% { transform:translateY(-7px) scale(.985); filter:brightness(1.65); }
  68% { transform:translateY(-2px) scale(1.018); filter:brightness(1.2); }
  100% { transform:translateY(0) scale(1); filter:brightness(1); }
}

@keyframes graphOrbit {
  from { transform: rotate(0deg) scale(.94); opacity: .35; }
  50% { transform: rotate(180deg) scale(1.04); opacity: .75; }
  to { transform: rotate(360deg) scale(.94); opacity: .35; }
}

@keyframes graphScan {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes nodeAwaken {
  0% { opacity: 0; transform: scale(.15); filter: brightness(2.6) blur(3px); }
  58% { opacity: 1; transform: scale(1.55); filter: brightness(1.7) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1) blur(0); }
}

@keyframes edgeAwaken {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to { clip-path: inset(-8px 0 -8px 0); opacity: .32; }
}

@keyframes graphSearch {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  36% { transform: scale(.985); filter: brightness(1.55) saturate(1.35); }
  68% { transform: scale(1.012); filter: brightness(1.18) saturate(1.18); }
}

@keyframes nodeSignal {
  0%, 100% { box-shadow: 0 0 0 0 rgba(208, 173, 132, 0), 0 0 10px rgba(189, 104, 69, .08); }
  48% { box-shadow: 0 0 0 5px rgba(208, 173, 132, .035), 0 0 20px rgba(189, 104, 69, .22); }
}

@keyframes edgeCurrent {
  0%, 100% { opacity: .2; filter: brightness(.8); }
  50% { opacity: .56; filter: brightness(1.25); }
}

@keyframes curatorSweep {
  from { transform: rotate(0deg) scale(.88); }
  to { transform: rotate(360deg) scale(1.08); }
}

@keyframes encounterCharge {
  0%, 100% { box-shadow: 0 0 0 rgba(189, 104, 69, 0), inset 0 0 0 rgba(234, 223, 201, 0); }
  50% { box-shadow: 0 0 36px rgba(189, 104, 69, .4), inset 0 0 18px rgba(234, 223, 201, .22); }
}

@keyframes drawerArrival {
  from { transform: translateY(110%); filter: blur(4px); }
  72% { transform: translateY(-1.5%); filter: blur(0); }
  to { transform: translateY(0); filter: blur(0); }
}

@keyframes backdropArrival {
  from { opacity: 0; backdrop-filter: blur(0); }
  to { opacity: 1; backdrop-filter: blur(3px); }
}

@keyframes drawerContents {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 760px) {
  body::before { inset: -8rem; filter: blur(24px); }
  .hero::before, .hero::after { width: min(118vw, 620px); }
  .portal-aperture { width: min(126vw, 680px); top: 45%; }
  .motion-glow { display: none; }
  .motion-section { transform: translateY(22px); }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  .ambient-field,
  .motion-glow,
  .portal-aperture,
  .portal-burst,
  .atmosphere-frame,
  .graph-scan,
  #motionProgress,
  .hero::before,
  .hero::after {
    display: none !important;
  }

  .motion-section,
  .motion-item {
    opacity: 1 !important;
    transform: none !important;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
}