:root {
  --bg-1: #030303;
  --bg-2: #0a0a0c;
  --bg-3: #141111;
  --text-main: #eef7ff;
  --text-soft: rgba(232, 242, 255, 0.72);
  --glass-border: rgba(255, 255, 255, 0.16);
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --accent-cn: #ff9a49;
  --accent-en: #ff6d2c;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body.intro-active {
  overflow: hidden;
}

body {
  overflow: hidden;
  font-family: sans-serif, "Segoe UI", sans-serif;
  color: var(--text-main);
  background:
    radial-gradient(circle at 20% 20%, rgba(255, 155, 67, 0.12), transparent 28%),
    radial-gradient(circle at 80% 30%, rgba(255, 102, 0, 0.1), transparent 26%),
    radial-gradient(circle at 50% 80%, rgba(255, 196, 120, 0.08), transparent 24%),
    linear-gradient(135deg, var(--bg-1), var(--bg-2) 52%, var(--bg-3));
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  pointer-events: none;
}

body::before {
  background:
    conic-gradient(from 180deg at 50% 50%, rgba(255, 166, 87, 0.16), rgba(255, 109, 34, 0.1), rgba(255, 166, 87, 0.16));
  filter: blur(80px);
  animation: hue-spin 16s linear infinite;
}

body::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(circle at center, black 45%, transparent 85%);
  opacity: 0.35;
  animation: grid-breathe 8s ease-in-out infinite;
}

/* ======================== */
/* INTRO SCREEN - ENHANCED */
/* ======================== */
.intro-screen {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(255, 150, 72, 0.12), transparent 26%),
    radial-gradient(circle at 50% 56%, rgba(255, 104, 24, 0.08), transparent 42%),
    linear-gradient(180deg, rgba(5, 5, 6, 0.98), rgba(8, 8, 10, 0.98));
  transition: opacity 900ms cubic-bezier(0.4, 0, 0.2, 1), visibility 900ms, transform 900ms cubic-bezier(0.4, 0, 0.2, 1);
}

.intro-screen::before,
.intro-screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro-screen::before {
  background:
    radial-gradient(circle at center, rgba(255, 181, 120, 0.22), transparent 18%),
    radial-gradient(circle at center, rgba(255, 110, 38, 0.1), transparent 38%);
  filter: blur(36px);
  animation: intro-pulse 2.2s ease-in-out infinite;
}

.intro-screen::after {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  opacity: 0.25;
  mask-image: radial-gradient(circle at center, black 35%, transparent 82%);
  animation: grid-pulse 3s ease-in-out infinite;
}

.intro-screen.is-hidden {
  opacity: 0;
  visibility: hidden;
  transform: scale(1.08);
}

/* Energy ring waves */
.intro-energy-ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(255, 154, 73, 0);
  pointer-events: none;
  animation: energy-expand 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) infinite;
}

.intro-energy-ring:nth-child(1) {
  animation-delay: 0s;
}

.intro-energy-ring:nth-child(2) {
  animation-delay: 0.6s;
}

.intro-energy-ring:nth-child(3) {
  animation-delay: 1.2s;
}

.intro-orbit {
  position: absolute;
  border: 1px solid rgba(255, 164, 97, 0.22);
  border-radius: 50%;
  pointer-events: none;
}

.intro-orbit-a {
  width: min(54vw, 540px);
  aspect-ratio: 1;
  animation: intro-spin 10s linear infinite;
  border-style: dashed;
  border-color: rgba(255, 164, 97, 0.35);
}

.intro-orbit-b {
  width: min(68vw, 700px);
  aspect-ratio: 1;
  border-color: rgba(255, 117, 46, 0.18);
  animation: intro-spin-reverse 14s linear infinite;
  border-style: dotted;
}

/* Orbit dot indicators */
.intro-orbit::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 154, 73, 0.9);
  box-shadow: 0 0 12px rgba(255, 154, 73, 0.8), 0 0 30px rgba(255, 154, 73, 0.4);
  top: -4px;
  left: 50%;
  animation: orbit-dot-pulse 2s ease-in-out infinite;
}

.intro-scanline {
  position: absolute;
  width: min(60vw, 620px);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 174, 111, 0.95), transparent);
  box-shadow: 0 0 30px rgba(255, 150, 72, 0.7), 0 0 60px rgba(255, 150, 72, 0.3);
  animation: intro-scan 2.2s ease-in-out infinite;
}

.intro-core {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
}

.intro-logo-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: min(32vw, 250px);
  aspect-ratio: 484 / 458;
  animation: intro-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.intro-logo-glow {
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 158, 80, 0.5), rgba(255, 158, 80, 0));
  filter: blur(24px);
  animation: intro-pulse 1.8s ease-in-out infinite, glow-breathe 3s ease-in-out infinite;
}

.intro-logo {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  overflow: visible;
  animation: logo-float 4s ease-in-out infinite 3.5s;
}

.logo-path {
  fill: rgba(255, 255, 255, 0);
  stroke: rgba(255, 176, 108, 0.98);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1800;
  stroke-dashoffset: 1800;
  filter: drop-shadow(0 0 14px rgba(255, 156, 84, 0.5)) drop-shadow(0 0 40px rgba(255, 156, 84, 0.2));
  animation:
    logo-draw 1.6s cubic-bezier(0.65, 0, 0.35, 1) forwards,
    logo-fill 0.5s ease 1.3s forwards;
}

.logo-path:nth-child(1) {
  animation-delay: 0.02s, 1.32s;
}

.logo-path:nth-child(2) {
  animation-delay: 0.10s, 1.40s;
}

.logo-path:nth-child(3) {
  animation-delay: 0.18s, 1.48s;
}

.logo-path:nth-child(4) {
  animation-delay: 0.26s, 1.56s;
}

.logo-path:nth-child(5) {
  animation-delay: 0.34s, 1.64s;
}

.logo-path:nth-child(6) {
  animation-delay: 0.42s, 1.72s;
}

.logo-path:nth-child(7) {
  animation-delay: 0.50s, 1.80s;
}

.logo-path:nth-child(8) {
  animation-delay: 0.58s, 1.88s;
}

.logo-path:nth-child(9) {
  animation-delay: 0.66s, 1.96s;
}

.logo-path:nth-child(10) {
  animation-delay: 0.74s, 2.04s;
}

.logo-path:nth-child(11) {
  animation-delay: 0.82s, 2.12s;
}

.logo-path:nth-child(12) {
  animation-delay: 0.90s, 2.20s;
}

.logo-path:nth-child(13) {
  animation-delay: 0.98s, 2.28s;
}

.logo-path:nth-child(14) {
  animation-delay: 1.06s, 2.36s;
}

.logo-path:nth-child(15) {
  animation-delay: 1.14s, 2.44s;
}

.intro-tag {
  margin: 0;
  padding: 0 20px;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.34em;
  font-size: clamp(0.74rem, 1.5vw, 0.92rem);
  color: rgba(255, 206, 163, 0.88);
  animation: intro-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) both, tag-flicker 4s ease-in-out 1.5s infinite;
}

/* Loading progress bar in intro */
.intro-progress {
  width: 180px;
  height: 3px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  animation: intro-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.intro-progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(255, 154, 73, 0.6), rgba(255, 109, 44, 1));
  border-radius: 4px;
  box-shadow: 0 0 12px rgba(255, 154, 73, 0.6);
  animation: progress-fill 3s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}

/* ======================== */
/* PAGE SHELL & AMBIENT    */
/* ======================== */
.page-shell {
  position: relative;
  min-height: 100vh;
  padding: 56px 28px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
}

.ambient {
  position: absolute;
  border-radius: 999px;
  filter: blur(18px);
  opacity: 0.7;
  mix-blend-mode: screen;
  animation: drift 12s ease-in-out infinite;
}

.ambient-a {
  width: 380px;
  height: 380px;
  left: 5%;
  top: 8%;
  background: radial-gradient(circle, rgba(255, 153, 72, 0.8), rgba(255, 153, 72, 0));
  animation-duration: 10s;
}

.ambient-b {
  width: 420px;
  height: 420px;
  right: 6%;
  top: 14%;
  background: radial-gradient(circle, rgba(255, 112, 41, 0.7), rgba(255, 112, 41, 0));
  animation-delay: -4s;
  animation-duration: 13s;
}

.ambient-c {
  width: 340px;
  height: 340px;
  left: 35%;
  bottom: 2%;
  background: radial-gradient(circle, rgba(255, 205, 137, 0.5), rgba(255, 205, 137, 0));
  animation-delay: -7s;
  animation-duration: 11s;
}

.grid-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 18%),
    radial-gradient(circle at center, transparent 0 48%, rgba(255, 255, 255, 0.04) 80%, transparent 100%);
  pointer-events: none;
  animation: grid-shimmer 6s ease-in-out infinite;
}

/* ======================== */
/* HERO SECTION            */
/* ======================== */
.hero {
  position: relative;
  z-index: 2;
  max-width: 860px;
  margin: 0 auto 34px;
  text-align: center;
  opacity: 0;
  animation: hero-enter 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s forwards;
}

.eyebrow {
  margin: 0 0 14px;
  text-transform: uppercase;
  letter-spacing: 0.42em;
  font-size: 0.78rem;
  color: rgba(255, 183, 116, 0.92);
  animation: text-glow-pulse 3s ease-in-out infinite;
}

.hero h1 {
  margin: 0;
  font-family: sans-serif, sans-serif;
  font-size: clamp(2.6rem, 6vw, 5.4rem);
  line-height: 0.96;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-shadow: 0 0 28px rgba(255, 141, 54, 0.24);
  animation: title-shimmer 4s ease-in-out infinite;
}

.hero-copy {
  margin: 18px auto 0;
  max-width: 720px;
  font-size: clamp(1rem, 2vw, 1.1rem);
  line-height: 1.7;
  color: var(--text-soft);
}

/* ======================== */
/* PORTAL CARDS - ENHANCED */
/* ======================== */
.portal-layout {
  position: relative;
  z-index: 2;
  width: min(1200px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 28px;
}

.portal-card {
  --pointer-x: 50%;
  --pointer-y: 50%;
  position: relative;
  overflow: hidden;
  min-height: 430px;
  padding: 24px;
  border-radius: 30px;
  border: 1px solid var(--glass-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05));
  box-shadow: var(--shadow);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  text-decoration: none;
  color: inherit;
  transform-style: preserve-3d;
  transition: transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 320ms ease, box-shadow 320ms ease;
  opacity: 0;
  animation: card-enter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.portal-cn {
  animation-delay: 0.3s;
}

.portal-en {
  animation-delay: 0.45s;
}

.portal-card::before,
.portal-card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.portal-card::before {
  background:
    radial-gradient(circle at var(--pointer-x) var(--pointer-y), color-mix(in srgb, var(--accent) 58%, transparent) 0%, transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 32%, transparent 68%, rgba(255, 255, 255, 0.08));
  opacity: 0.92;
  transition: opacity 0.4s ease;
}

.portal-card:hover::before {
  opacity: 1;
}

.portal-card::after {
  inset: 1px;
  border-radius: 29px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color 0.4s ease;
}

.portal-card:hover::after {
  border-color: rgba(255, 255, 255, 0.15);
}

.portal-card:hover {
  transform: translateY(-12px) scale(1.02);
  border-color: color-mix(in srgb, var(--accent) 65%, white 18%);
  box-shadow:
    0 36px 100px rgba(0, 0, 0, 0.5),
    0 0 60px color-mix(in srgb, var(--accent) 30%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.portal-card:active {
  transform: translateY(-6px) scale(0.99);
  transition-duration: 100ms;
}

/* Animated shine sweep on hover */
.portal-card .card-shine {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}

.portal-card .card-shine::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -80%;
  width: 40%;
  height: 200%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.12), transparent);
  transform: rotate(25deg);
  transition: left 0.7s cubic-bezier(0.3, 0, 0.2, 1);
}

.portal-card:hover .card-shine::before {
  left: 140%;
}

.portal-cn {
  --accent: #ff9a49;
}

.portal-en {
  --accent: #ff6d2c;
}

.card-glow {
  position: absolute;
  inset: auto auto -18% -10%;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 68%, white 8%), transparent 70%);
  filter: blur(20px);
  opacity: 0.42;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  animation: glow-drift 5s ease-in-out infinite;
}

.portal-card:hover .card-glow {
  opacity: 0.7;
  transform: scale(1.2);
}

.card-noise {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(transparent 0%, rgba(255, 255, 255, 0.045) 50%, transparent 100%),
    radial-gradient(rgba(255, 255, 255, 0.08) 0.6px, transparent 0.6px);
  background-size: 100% 100%, 16px 16px;
  opacity: 0.14;
  mix-blend-mode: screen;
  pointer-events: none;
}

.card-topline,
.card-footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.card-topline {
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(235, 244, 255, 0.72);
}

.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 14px var(--accent);
  animation: dot-pulse 2s ease-in-out infinite;
}

.status-text {
  margin-left: auto;
}

.card-content {
  position: relative;
  z-index: 2;
  margin-top: 56px;
}

.card-kicker {
  margin: 0 0 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 0.86rem;
  color: color-mix(in srgb, var(--accent) 72%, white 18%);
  animation: text-glow-pulse 3s ease-in-out infinite;
}

.card-content h2 {
  margin: 0;
  font-family: sans-serif, sans-serif;
  font-size: clamp(4.8rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: 0.08em;
  text-shadow: 0 0 30px color-mix(in srgb, var(--accent) 40%, transparent);
  transition: text-shadow 0.4s ease, transform 0.4s ease;
}

.portal-card:hover .card-content h2 {
  text-shadow: 0 0 50px color-mix(in srgb, var(--accent) 60%, transparent), 0 0 80px color-mix(in srgb, var(--accent) 30%, transparent);
  transform: translateZ(20px) scale(1.03);
}

.card-title {
  margin: 16px 0 12px;
  font-size: 1.5rem;
  font-weight: 700;
  transition: transform 0.3s ease;
}

.portal-card:hover .card-title {
  transform: translateX(4px);
}

.card-description {
  margin: 0;
  max-width: 30ch;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(236, 243, 255, 0.76);
  transition: color 0.3s ease;
}

.portal-card:hover .card-description {
  color: rgba(236, 243, 255, 0.9);
}

.card-footer {
  margin-top: 72px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.96rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: border-color 0.3s ease;
}

.portal-card:hover .card-footer {
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}

.arrow {
  font-size: 1.35rem;
  transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.portal-card:hover .arrow {
  transform: translateX(10px);
  animation: arrow-bounce 1s ease-in-out infinite;
}

/* ======================== */
/* FLOATING PARTICLES      */
/* ======================== */
.particles-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 154, 73, 0.6);
  box-shadow: 0 0 6px rgba(255, 154, 73, 0.4);
  animation: particle-float linear infinite;
}

/* ======================== */
/* KEYFRAMES               */
/* ======================== */

@keyframes drift {

  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }

  25% {
    transform: translate3d(32px, -22px, 0) scale(1.12);
  }

  50% {
    transform: translate3d(-18px, 28px, 0) scale(0.92);
  }

  75% {
    transform: translate3d(24px, 16px, 0) scale(1.06);
  }
}

@keyframes hue-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes grid-breathe {

  0%,
  100% {
    opacity: 0.35;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes grid-pulse {

  0%,
  100% {
    opacity: 0.2;
    transform: scale(1);
  }

  50% {
    opacity: 0.35;
    transform: scale(1.02);
  }
}

@keyframes intro-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes intro-spin-reverse {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

@keyframes intro-scan {

  0%,
  100% {
    transform: translateY(-130px);
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  50% {
    transform: translateY(0);
    opacity: 1;
  }

  85% {
    opacity: 1;
  }

  100% {
    transform: translateY(130px);
    opacity: 0;
  }
}

@keyframes intro-pulse {

  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.65;
  }

  50% {
    transform: scale(1.12);
    opacity: 1;
  }
}

@keyframes intro-rise {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.88);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes energy-expand {
  0% {
    width: 60px;
    height: 60px;
    border-color: rgba(255, 154, 73, 0.8);
    opacity: 1;
  }

  100% {
    width: min(80vw, 800px);
    height: min(80vw, 800px);
    border-color: rgba(255, 154, 73, 0);
    opacity: 0;
  }
}

@keyframes orbit-dot-pulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.9;
  }

  50% {
    transform: scale(1.5);
    opacity: 1;
  }
}

@keyframes glow-breathe {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.15);
  }
}

@keyframes logo-float {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-6px) rotate(0.5deg);
  }

  75% {
    transform: translateY(-3px) rotate(-0.5deg);
  }
}

@keyframes logo-draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes logo-fill {
  0% {
    fill: rgba(255, 255, 255, 0);
    stroke: rgba(255, 176, 108, 0.98);
  }

  100% {
    fill: rgba(255, 248, 242, 0.98);
    stroke: rgba(255, 176, 108, 0);
  }
}

@keyframes tag-flicker {

  0%,
  100% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  94% {
    opacity: 0.6;
  }

  96% {
    opacity: 1;
  }

  98% {
    opacity: 0.8;
  }
}

@keyframes progress-fill {
  0% {
    width: 0%;
  }

  20% {
    width: 25%;
  }

  45% {
    width: 48%;
  }

  70% {
    width: 72%;
  }

  90% {
    width: 92%;
  }

  100% {
    width: 100%;
  }
}

@keyframes hero-enter {
  from {
    opacity: 0;
    transform: translateY(40px);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@keyframes card-enter {
  from {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes title-shimmer {

  0%,
  100% {
    text-shadow: 0 0 28px rgba(255, 141, 54, 0.24);
  }

  50% {
    text-shadow: 0 0 40px rgba(255, 141, 54, 0.4), 0 0 80px rgba(255, 141, 54, 0.15);
  }
}

@keyframes text-glow-pulse {

  0%,
  100% {
    opacity: 0.92;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 12px currentColor;
  }
}

@keyframes dot-pulse {

  0%,
  100% {
    box-shadow: 0 0 14px var(--accent);
    transform: scale(1);
  }

  50% {
    box-shadow: 0 0 24px var(--accent), 0 0 40px color-mix(in srgb, var(--accent) 50%, transparent);
    transform: scale(1.3);
  }
}

@keyframes arrow-bounce {

  0%,
  100% {
    transform: translateX(10px);
  }

  50% {
    transform: translateX(14px);
  }
}

@keyframes glow-drift {

  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(12px, -8px);
  }
}

@keyframes particle-float {
  0% {
    transform: translateY(100vh) translateX(0) scale(0);
    opacity: 0;
  }

  10% {
    opacity: 1;
    transform: translateY(90vh) translateX(10px) scale(1);
  }

  90% {
    opacity: 0.6;
  }

  100% {
    transform: translateY(-10vh) translateX(-20px) scale(0.5);
    opacity: 0;
  }
}

@keyframes grid-shimmer {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.85;
  }
}

/* ======================== */
/* RESPONSIVE              */
/* ======================== */
@media (max-width: 860px) {
  body {
    overflow: auto;
  }

  .page-shell {
    padding: 36px 18px 28px;
  }

  .intro-logo-wrap {
    width: min(46vw, 220px);
  }

  .intro-tag {
    letter-spacing: 0.2em;
    line-height: 1.6;
  }

  .portal-layout {
    grid-template-columns: 1fr;
  }

  .portal-card {
    min-height: 360px;
  }

  .card-content {
    margin-top: 42px;
  }

  .card-footer {
    margin-top: 44px;
  }

  .particles-container {
    display: none;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ===== 全站字体统一：数字/西文/中文一律优先微软雅黑 ===== */
body,
body button,
body input,
body select,
body textarea,
body optgroup,
body label,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body p,
body span,
body a,
body li,
body td,
body th,
body div,
body ul,
body ol {
  font-family: "Microsoft YaHei", "Microsoft YaHei UI", "PingFang SC", sans-serif;
}