.motion-ready .motion-copy {
  --motion-delay: calc(var(--motion-order, 0) * 55ms);
  opacity: 0;
  transform: translate3d(0, 28px, 0) skewY(1.5deg);
  filter: blur(9px);
  will-change: transform, opacity, filter, clip-path;
}

.motion-ready .motion-copy.is-seen {
  animation: motionTextEnter 820ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: var(--motion-delay);
}

@keyframes motionTextEnter {
  0% {
    opacity: 0;
    transform: translate3d(0, 28px, 0) skewY(1.5deg);
    filter: blur(9px);
    clip-path: inset(0 0 100% 0);
  }
  58% { opacity: 1; }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) skewY(0);
    filter: blur(0);
    clip-path: inset(0);
  }
}

.motion-glyph {
  position: relative;
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, .65em, 0) rotateX(-70deg);
  transform-origin: 50% 100%;
}

.motion-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.is-seen .motion-glyph {
  animation: motionGlyphDecode 640ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--glyph-index) * 28ms + var(--motion-delay, 0ms));
}

.motion-glyph::before {
  content: attr(data-decoy);
  position: absolute;
  inset: 0;
  color: var(--glyph-color, var(--bf-blue));
  opacity: .8;
  transform: translateX(.13em);
}

.is-seen .motion-glyph::before {
  animation: motionGlyphGhost 430ms steps(3, end) both;
  animation-delay: calc(var(--glyph-index) * 28ms);
}

@keyframes motionGlyphDecode {
  0% { opacity: 0; transform: translate3d(0, .65em, 0) rotateX(-70deg); }
  45% { opacity: 1; color: var(--glyph-color, var(--bf-blue)); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0); }
}

@keyframes motionGlyphGhost {
  0%, 65% { opacity: .8; transform: translateX(.13em); }
  35% { color: var(--bf-red); transform: translateX(-.13em); }
  100% { opacity: 0; transform: translateX(0); }
}

.hero-display.is-seen > span {
  display: inline-block;
  animation: motionHeroLetter 980ms cubic-bezier(.16, 1, .3, 1) both;
}

.hero-display.is-seen > span:nth-child(2) { animation-delay: 70ms; }
.hero-display.is-seen > span:nth-child(3) { animation-delay: 140ms; }
.hero-display.is-seen > span:nth-child(4) { animation-delay: 210ms; }

@keyframes motionHeroLetter {
  0% { opacity: 0; transform: translate3d(0, 70px, 0) scale(.82); filter: blur(16px); text-shadow: 12px 0 var(--bf-red), -12px 0 var(--bf-blue); }
  48% { opacity: 1; text-shadow: 5px 0 var(--bf-orange), -5px 0 var(--bf-green); }
  100% { opacity: 1; transform: none; filter: none; text-shadow: none; }
}

.motion-magnet {
  --magnet-x: 0px;
  --magnet-y: 0px;
  translate: var(--magnet-x) var(--magnet-y);
  transition: translate 180ms cubic-bezier(.16, 1, .3, 1), color 180ms ease;
}

.motion-cursor-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 80;
  pointer-events: none;
}

.motion-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24px;
  height: 24px;
  z-index: 81;
  pointer-events: none;
  border: 1px solid var(--bf-blue);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-100px, -100px, 0) rotate(0deg);
  transition: width 180ms ease, height 180ms ease, border-color 180ms ease, opacity 120ms ease;
  animation: motionCursorSpectrum 2.4s steps(5, end) infinite;
}

.motion-cursor::before,
.motion-cursor::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.motion-cursor::before { width: 32px; height: 1px; }
.motion-cursor::after { width: 1px; height: 32px; }
.motion-cursor.is-visible { opacity: .9; }
.motion-cursor.is-interactive { width: 42px; height: 42px; border-color: var(--bf-red); }

@keyframes motionCursorSpectrum {
  0% { color: var(--bf-red); border-color: var(--bf-red); }
  20% { color: var(--bf-orange); border-color: var(--bf-orange); }
  40% { color: var(--bf-green); border-color: var(--bf-green); }
  60% { color: var(--bf-blue); border-color: var(--bf-blue); }
  80%, 100% { color: var(--bf-navy); border-color: var(--bf-navy); }
}

.motion-image-ghost {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 79;
  display: none;
  pointer-events: none;
  max-height: 96px;
  contain: layout paint;
}

.motion-image-shell {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --light-x: 50%;
  position: relative;
  display: block;
  max-width: 100%;
  overflow: hidden;
  isolation: isolate;
  perspective: 900px;
}

.brand .motion-image-shell { width: 92px; }
.foot-brand > a .motion-image-shell { width: 120px; }
.evidence-grid .motion-image-shell,
.textbook-image .motion-image-shell,
.contact-photo .motion-image-shell { width: 100%; }
.evidence-feature .motion-image-shell { max-width: 560px; }
.textbook-image .motion-image-shell,
.credential-icon .motion-image-shell { width: 100%; height: 100%; }
.mascot-callout .motion-image-shell { width: 80px; height: 80px; flex: 0 0 80px; }

.motion-image-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, var(--bf-red) 0 20%, var(--bf-orange) 20% 40%, var(--bf-green) 40% 60%, var(--bf-blue) 60% 80%, var(--bf-navy) 80%);
  transform-origin: right;
}

.motion-image-shell::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: var(--light-x);
  width: 2px;
  pointer-events: none;
  opacity: 0;
  background: var(--bf-green);
  box-shadow: -7px 0 var(--bf-blue), 7px 0 var(--bf-red);
}

.motion-image {
  position: relative;
  z-index: 1;
  clip-path: inset(0 100% 0 0);
  transform: perspective(900px) rotateX(0) rotateY(0) scale(1);
  transform-origin: center;
  backface-visibility: hidden;
  transition: transform 260ms cubic-bezier(.16, 1, .3, 1), filter 180ms ease;
  will-change: transform, clip-path;
}

.motion-image-shell.is-seen::before {
  animation: motionColorShutter 900ms cubic-bezier(.76, 0, .24, 1) both;
  animation-delay: calc(var(--image-order) * 80ms);
}

.motion-image-shell.is-seen .motion-image {
  animation: motionImageReveal 920ms cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--image-order) * 80ms + 80ms);
}

.motion-image-shell.is-motion-hover .motion-image {
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y)) scale(1.045);
  filter: saturate(1.08) contrast(1.03);
}

.motion-image-shell.is-motion-hover::after {
  animation: motionImageScan 680ms cubic-bezier(.16, 1, .3, 1) both;
}

.motion-image.is-glitch { animation: motionImageGlitch 420ms steps(2, end); }

@keyframes motionColorShutter {
  0% { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

@keyframes motionImageReveal {
  0% { clip-path: inset(0 100% 0 0); filter: saturate(.3) contrast(1.35); scale: 1.12; }
  60% { clip-path: inset(0); filter: saturate(1.15) contrast(1.05); }
  100% { clip-path: inset(0); filter: none; scale: 1; }
}

@keyframes motionImageScan {
  0% { opacity: 0; transform: translateX(-34px); }
  28% { opacity: .85; }
  100% { opacity: 0; transform: translateX(34px); }
}

@keyframes motionImageGlitch {
  0%, 100% { clip-path: inset(0); filter: none; translate: 0; }
  20% { clip-path: inset(12% 0 62%); filter: saturate(1.8); translate: 7px 0; }
  42% { clip-path: inset(55% 0 18%); filter: contrast(1.4); translate: -6px 0; }
  64% { clip-path: inset(30% 0 42%); filter: saturate(1.4); translate: 4px 0; }
}

.motion-image-ghost.is-active {
  display: block;
  object-fit: cover;
  border: 1px solid var(--ghost-color);
  box-shadow: 8px 8px 0 var(--ghost-color);
  animation: motionGhost 600ms cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes motionGhost {
  0% { opacity: .8; transform: translate3d(0, 0, 0) rotate(-2deg) scale(.75); clip-path: inset(0 0 100%); }
  28% { opacity: .72; clip-path: inset(0); }
  100% { opacity: 0; transform: translate3d(22px, -38px, 0) rotate(4deg) scale(1.08); clip-path: inset(0); }
}

.motion-surface {
  --surface-x: 0deg;
  --surface-y: 0deg;
  transform-style: preserve-3d;
}

.motion-surface.is-motion-hover {
  z-index: 2;
  transform: perspective(1000px) rotateX(var(--surface-x)) rotateY(var(--surface-y)) translateY(-4px);
  box-shadow: 0 24px 54px var(--card-shadow);
}

.about.motion-active .history-timeline,
.about.motion-active .evidence-grid,
.ai.motion-active .learning-loop,
.ai.motion-active .textbook-item,
.ai.motion-active .ritual-card,
.singapore.motion-active .sg-tags,
.philosophy.motion-active .quote-cn,
.philosophy.motion-active .mascot-callout,
.contact.motion-active .contact-card { will-change: opacity, transform; }

@media (hover: hover) and (pointer: fine) {
  html.motion-pointer,
  html.motion-pointer a,
  html.motion-pointer button { cursor: none; }
}

@media (max-width: 820px) {
  .motion-ready .motion-copy {
    transform: translate3d(0, 16px, 0);
    filter: blur(5px);
  }
  .motion-cursor-canvas,
  .motion-cursor,
  .motion-image-ghost { display: none; }
  .motion-image-shell.is-motion-hover .motion-image,
  .motion-surface.is-motion-hover { transform: none; }
  .motion-signal { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-copy,
  .motion-glyph,
  .motion-image,
  .motion-image-shell,
  .motion-word,
  .motion-active * {
    opacity: 1;
    transform: none;
    filter: none;
    clip-path: none;
    animation: none;
    transition: none;
  }
  .motion-cursor-canvas,
  .motion-cursor,
  .motion-image-ghost { display: none; }
}