/* ============================================================
   FOOTER.CSS — Cyberpunk Glass Footer
   INSANE炫酷 — Always-On Rainbow, Glow, Particles & Aberration
   ============================================================ */

.footer {
  position: relative;
  padding: 80px 24px 40px;
  overflow: hidden;
}

/* ── Rainbow Glow Line — ALWAYS CYCLING 1.5s, 4x Shadow ── */
.footer-glow-line {
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 4px;
  background: var(--grad-rainbow);
  background-size: 300% 100%;
  animation: footer-glow-sweep 1.5s linear infinite;
  box-shadow:
    0 0 40px var(--glow-cyan),
    0 0 120px var(--glow-purple),
    0 0 240px var(--glow-blue),
    0 0 400px var(--glow-pink);
  border-radius: 2px;
  filter: brightness(1.4);
}

@keyframes footer-glow-sweep {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

/* ── Footer Content Grid ── */
.footer-content {
  display: grid;
  grid-template-columns: 1.5fr 2fr;
  gap: 80px;
  max-width: var(--max-width);
  margin: 0 auto 48px;
  position: relative;
  z-index: 1;
}

/* ── Footer Brand — Holographic Shimmer ALWAYS ON ── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--glass-bg-light);
  backdrop-filter: blur(var(--glass-blur-light)) saturate(var(--glass-saturate));
  -webkit-backdrop-filter: blur(var(--glass-blur-light)) saturate(var(--glass-saturate));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 28px;
  position: relative;
  overflow: hidden;
  transition: all var(--transition-base);
  box-shadow:
    0 0 30px rgba(0, 229, 255, 0.15),
    0 0 60px rgba(180, 77, 255, 0.1),
    0 0 100px rgba(255, 92, 176, 0.05);
  transform: translateY(-2px);
}

.footer-brand::before {
  content: '';
  position: absolute;
  inset: -50%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(0, 229, 255, 0.12) 45deg,
    rgba(180, 77, 255, 0.12) 90deg,
    rgba(255, 92, 176, 0.12) 135deg,
    transparent 180deg,
    rgba(0, 255, 160, 0.12) 225deg,
    rgba(0, 229, 255, 0.12) 270deg,
    rgba(180, 77, 255, 0.12) 315deg,
    transparent 360deg
  );
  animation: footer-holo-rotate 4s linear infinite;
  pointer-events: none;
  z-index: 0;
}

@keyframes footer-holo-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.footer-brand:hover {
  background: var(--glass-bg-heavy);
  border-color: rgba(0, 229, 255, 0.3);
  box-shadow:
    0 0 60px rgba(0, 229, 255, 0.3),
    0 0 120px rgba(180, 77, 255, 0.2),
    0 0 200px rgba(255, 92, 176, 0.1);
  transform: translateY(-4px);
}

.footer-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* ── Footer Tagline — Chromatic Aberration ── */
.footer-tagline {
  font-size: 0.95rem;
  color: rgba(180, 200, 230, 0.45);
  line-height: 1.6;
  position: relative;
  z-index: 1;
  text-shadow:
    -1.2px 0 rgba(0, 229, 255, 0.35),
    1.2px 0 rgba(255, 92, 176, 0.35),
    0 0 10px var(--glow-purple),
    0 0 20px var(--glow-cyan);
  animation: footer-tagline-breathe 2s ease-in-out infinite;
}

@keyframes footer-tagline-breathe {
  0%, 100% { opacity: 1; filter: brightness(1); }
  50%      { opacity: 0.85; filter: brightness(1.2); }
}

/* ── Footer Links ── */
.footer-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* ── Footer Col h4 — ALWAYS-ON GLOW + BREATHE ── */
.footer-col h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(220, 235, 255, 0.85);
  margin-bottom: 20px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  text-shadow:
    0 0 10px var(--glow-blue),
    0 0 20px var(--glow-cyan),
    0 0 40px var(--glow-purple);
  animation: footer-h4-breathe 1.5s ease-in-out infinite;
  transition: text-shadow var(--transition-base);
}

@keyframes footer-h4-breathe {
  0%, 100% {
    text-shadow:
      0 0 10px var(--glow-blue),
      0 0 20px var(--glow-cyan),
      0 0 40px var(--glow-purple);
  }
  50% {
    text-shadow:
      0 0 20px var(--glow-blue),
      0 0 40px var(--glow-cyan),
      0 0 80px var(--glow-purple),
      0 0 120px var(--glow-pink);
    color: rgba(220, 235, 255, 0.95);
  }
}

/* ── Footer Col Links — ALWAYS-ON SUBTLE GLOW ── */
.footer-col a {
  display: block;
  font-size: 0.9rem;
  color: rgba(180, 200, 230, 0.55);
  padding: 6px 0;
  transition: all var(--transition-fast);
  cursor: none;
  text-shadow:
    0 0 4px var(--glow-cyan),
    0 0 8px var(--glow-blue);
}

.footer-col a:hover {
  color: var(--aero-cyan);
  transform: translateX(6px) scale(1.06);
  text-shadow:
    0 0 20px var(--glow-cyan),
    0 0 50px var(--glow-blue),
    0 0 100px var(--glow-purple),
    0 0 150px var(--glow-pink);
}

/* ── Footer Bottom — Pulsing Gradient Background ── */
.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.05);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.footer-bottom::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 229, 255, 0.08),
    rgba(180, 77, 255, 0.08),
    rgba(255, 92, 176, 0.08),
    transparent
  );
  filter: blur(8px);
  animation: footer-bottom-glow 1.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes footer-bottom-glow {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 1; }
}

.footer-bottom p {
  font-size: 0.8rem;
  color: rgba(180, 200, 230, 0.3);
  transition: color var(--transition-base);
  position: relative;
  z-index: 1;
}

.footer-bottom:hover p {
  color: rgba(180, 200, 230, 0.6);
}

/* ── Floating Particles (CSS-only) — 12 Total, Always Visible ── */

/* Base particle class */
.footer::before,
.footer::after,
.footer-content::before,
.footer-content::after,
.footer-links::before,
.footer-links::after,
.footer-bottom::after,
.footer-brand::after,
.footer-glow-line::before,
.footer-glow-line::after,
.footer-logo::before,
.footer-logo::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* Particle 1 — footer::before */
.footer::before {
  width: 4px; height: 4px;
  background: var(--glow-cyan);
  top: 15%;
  left: 12%;
  box-shadow:
    0 0 18px var(--glow-cyan),
    0 0 36px var(--glow-cyan),
    0 0 72px var(--glow-cyan);
  animation: footer-particle-1 3.5s ease-in-out infinite;
}

/* Particle 2 — footer::after */
.footer::after {
  width: 3px; height: 3px;
  background: var(--glow-purple);
  top: 35%;
  right: 15%;
  box-shadow:
    0 0 15px var(--glow-purple),
    0 0 30px var(--glow-purple),
    0 0 60px var(--glow-purple);
  animation: footer-particle-2 4.5s ease-in-out infinite;
}

/* Particle 3 — footer-content::before */
.footer-content::before {
  width: 5px; height: 5px;
  background: var(--glow-pink);
  top: 55%;
  left: -3%;
  box-shadow:
    0 0 24px var(--glow-pink),
    0 0 48px var(--glow-pink),
    0 0 96px var(--glow-pink);
  animation: footer-particle-3 5.5s ease-in-out infinite;
}

/* Particle 4 — footer-content::after */
.footer-content::after {
  width: 3px; height: 3px;
  background: var(--glow-green);
  top: 70%;
  left: 5%;
  box-shadow:
    0 0 15px var(--glow-green),
    0 0 30px var(--glow-green),
    0 0 60px var(--glow-green);
  animation: footer-particle-4 4s ease-in-out infinite;
}

/* Particle 5 — footer-links::before */
.footer-links::before {
  width: 6px; height: 6px;
  background: var(--glow-blue);
  top: -5%;
  right: 10%;
  box-shadow:
    0 0 24px var(--glow-blue),
    0 0 60px var(--glow-blue),
    0 0 120px var(--glow-blue);
  animation: footer-particle-5 5s ease-in-out infinite;
}

/* Particle 6 — footer-links::after */
.footer-links::after {
  width: 4px; height: 4px;
  background: var(--glow-orange);
  bottom: -10%;
  right: 40%;
  box-shadow:
    0 0 18px var(--glow-orange),
    0 0 36px var(--glow-orange),
    0 0 72px var(--glow-orange);
  animation: footer-particle-6 6s ease-in-out infinite;
}

/* Particle 7 — footer-bottom::after */
.footer-bottom::after {
  width: 5px; height: 5px;
  background: var(--glow-cyan);
  top: -20%;
  left: 25%;
  box-shadow:
    0 0 20px var(--glow-cyan),
    0 0 40px var(--glow-cyan),
    0 0 80px var(--glow-cyan);
  animation: footer-particle-7 3s ease-in-out infinite;
}

/* Particle 8 — footer-brand::after */
.footer-brand::after {
  width: 4px; height: 4px;
  background: var(--glow-purple);
  bottom: 10%;
  right: 5%;
  box-shadow:
    0 0 18px var(--glow-purple),
    0 0 36px var(--glow-purple),
    0 0 72px var(--glow-purple);
  animation: footer-particle-8 4s ease-in-out infinite;
}

/* Particle 9 — footer-glow-line::before */
.footer-glow-line::before {
  width: 3px; height: 3px;
  background: var(--glow-pink);
  top: 200%;
  left: 20%;
  box-shadow:
    0 0 15px var(--glow-pink),
    0 0 30px var(--glow-pink),
    0 0 60px var(--glow-pink);
  animation: footer-particle-9 5s ease-in-out infinite;
}

/* Particle 10 — footer-glow-line::after */
.footer-glow-line::after {
  width: 5px; height: 5px;
  background: var(--glow-blue);
  top: 300%;
  right: 30%;
  box-shadow:
    0 0 24px var(--glow-blue),
    0 0 48px var(--glow-blue),
    0 0 96px var(--glow-blue);
  animation: footer-particle-10 3.5s ease-in-out infinite;
}

/* Particle 11 — footer-logo::before */
.footer-logo::before {
  width: 3px; height: 3px;
  background: var(--glow-green);
  top: -10%;
  left: -15%;
  box-shadow:
    0 0 12px var(--glow-green),
    0 0 24px var(--glow-green),
    0 0 48px var(--glow-green);
  animation: footer-particle-11 4.5s ease-in-out infinite;
}

/* Particle 12 — footer-logo::after */
.footer-logo::after {
  width: 4px; height: 4px;
  background: var(--glow-orange);
  top: 50%;
  right: -10%;
  box-shadow:
    0 0 18px var(--glow-orange),
    0 0 36px var(--glow-orange),
    0 0 72px var(--glow-orange);
  animation: footer-particle-12 5.5s ease-in-out infinite;
}

/* ── All 12 Particle Keyframes ── */
@keyframes footer-particle-1 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  25%      { transform: translate(25px, -35px) scale(1.5); opacity: 1; }
  50%      { transform: translate(50px, 10px) scale(0.8); opacity: 0.8; }
  75%      { transform: translate(15px, -20px) scale(1.3); opacity: 0.9; }
}

@keyframes footer-particle-2 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  25%      { transform: translate(-30px, -25px) scale(1.4); opacity: 1; }
  50%      { transform: translate(-55px, 15px) scale(0.7); opacity: 0.7; }
  75%      { transform: translate(-10px, -15px) scale(1.2); opacity: 0.9; }
}

@keyframes footer-particle-3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  25%      { transform: translate(20px, -45px) scale(1.6); opacity: 1; }
  50%      { transform: translate(45px, 5px) scale(0.9); opacity: 0.7; }
  75%      { transform: translate(10px, -25px) scale(1.4); opacity: 0.9; }
}

@keyframes footer-particle-4 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  25%      { transform: translate(-20px, -30px) scale(1.3); opacity: 1; }
  50%      { transform: translate(-40px, 20px) scale(0.8); opacity: 0.7; }
  75%      { transform: translate(-8px, -15px) scale(1.1); opacity: 0.9; }
}

@keyframes footer-particle-5 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  25%      { transform: translate(-25px, 20px) scale(1.5); opacity: 1; }
  50%      { transform: translate(-50px, -30px) scale(0.7); opacity: 0.7; }
  75%      { transform: translate(-12px, 10px) scale(1.3); opacity: 0.9; }
}

@keyframes footer-particle-6 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  25%      { transform: translate(15px, 30px) scale(1.4); opacity: 1; }
  50%      { transform: translate(35px, -15px) scale(0.8); opacity: 0.7; }
  75%      { transform: translate(8px, 18px) scale(1.2); opacity: 0.9; }
}

@keyframes footer-particle-7 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  25%      { transform: translate(30px, -20px) scale(1.3); opacity: 1; }
  50%      { transform: translate(10px, 35px) scale(0.9); opacity: 0.8; }
  75%      { transform: translate(20px, -10px) scale(1.2); opacity: 0.9; }
}

@keyframes footer-particle-8 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  25%      { transform: translate(-35px, 15px) scale(1.5); opacity: 1; }
  50%      { transform: translate(-15px, -25px) scale(0.7); opacity: 0.7; }
  75%      { transform: translate(-20px, 8px) scale(1.3); opacity: 0.9; }
}

@keyframes footer-particle-9 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  25%      { transform: translate(10px, 25px) scale(1.4); opacity: 1; }
  50%      { transform: translate(-20px, -10px) scale(0.8); opacity: 0.7; }
  75%      { transform: translate(15px, 12px) scale(1.2); opacity: 0.9; }
}

@keyframes footer-particle-10 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  25%      { transform: translate(-15px, -30px) scale(1.3); opacity: 1; }
  50%      { transform: translate(25px, 5px) scale(0.9); opacity: 0.7; }
  75%      { transform: translate(-5px, -18px) scale(1.1); opacity: 0.9; }
}

@keyframes footer-particle-11 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.6; }
  25%      { transform: translate(20px, 15px) scale(1.5); opacity: 1; }
  50%      { transform: translate(-10px, -30px) scale(0.7); opacity: 0.7; }
  75%      { transform: translate(12px, 8px) scale(1.3); opacity: 0.9; }
}

@keyframes footer-particle-12 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  25%      { transform: translate(-20px, 25px) scale(1.4); opacity: 1; }
  50%      { transform: translate(15px, -15px) scale(0.8); opacity: 0.7; }
  75%      { transform: translate(-10px, 12px) scale(1.2); opacity: 0.9; }
}