/* ============================================================
   AURORA SKIN · Theme C「棱镜极光 / Refraction」 — portfolio
   Loaded AFTER css/style.css. Same aurora DNA, 2026 execution:
   aurora mesh + film grain + cursor spotlight + rotating
   iridescent conic rings + shimmer display type.
   ============================================================ */

@property --cAng { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

:root {
  --bg-primary: #070511;
  --bg-secondary: #0b0819;
  --bg-card: rgba(16, 12, 34, .6);
  --bg-card-hover: rgba(24, 18, 48, .75);
  --purple: #a78bfa;
  --purple-dim: #8b6ee0;
  --purple-glow: rgba(167, 139, 250, .3);
  --cyan: #46e6ff;
  --cyan-dim: #2fc4dd;
  --cyan-glow: rgba(70, 230, 255, .3);
  --pink: #ff7ad9;
  --gold: #ffd479;
  --green: #34d399;
  --text-primary: #eceafb;
  --text-secondary: #9c97bd;
  --text-muted: #726d94;
  --text-body: #b9b4d6;
  --border: rgba(190, 180, 255, .13);
  --glass: rgba(7, 5, 17, .72);
  --card-border: 1px solid rgba(190, 180, 255, .15);
  --card-bg: linear-gradient(158deg, rgba(22, 16, 44, .8), rgba(12, 9, 26, .9));
}

/* ---- old particle field steps back; mesh leads ---- */
#particles-canvas { opacity: .22; }

/* ---- injected atmosphere layers (see js/aurora-skin.js) ---- */
.c2-mesh {
  position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  filter: blur(90px) saturate(1.2); opacity: .42;
  background:
    radial-gradient(38% 34% at 22% 20%, rgba(70, 230, 255, .5), transparent 70%),
    radial-gradient(30% 40% at 80% 16%, rgba(167, 139, 250, .45), transparent 70%),
    radial-gradient(42% 36% at 62% 82%, rgba(255, 122, 217, .26), transparent 70%),
    radial-gradient(28% 30% at 10% 80%, rgba(52, 211, 153, .28), transparent 70%);
  animation: c2Mesh 24s ease-in-out infinite alternate;
}
@keyframes c2Mesh {
  from { transform: rotate(0deg) scale(1); }
  to   { transform: rotate(8deg) scale(1.12); }
}
.c2-grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .3; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23g)' opacity='0.5'/%3E%3C/svg%3E");
}
.c2-spot {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 30%), rgba(120, 140, 255, .09), transparent 70%);
}
@media (hover: none) { .c2-spot { display: none; } }

/* ---- content sits above atmosphere ---- */
#navbar, .section, #hero, footer { position: relative; z-index: 2; }

/* ---- display type: shimmer, not static gradient ---- */
.hero-name {
  background: linear-gradient(100deg, var(--cyan), var(--purple) 40%, var(--pink) 75%, var(--green));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: c2Shimmer 7s ease infinite;
  letter-spacing: -.03em;
}
@keyframes c2Shimmer {
  0%, 100% { background-position: 0% 0; }
  50%      { background-position: 100% 0; }
}
.section-title { letter-spacing: -.02em; }
.section-line {
  background: linear-gradient(90deg, var(--cyan), var(--purple), transparent);
  height: 1px;
}

/* ---- nav: pill glass ---- */
#navbar {
  background: rgba(7, 5, 17, .7);
  backdrop-filter: blur(18px) saturate(1.3);
  border-bottom: 1px solid var(--border);
}
.nav-links a { border-radius: 999px; transition: .25s ease; }
.nav-links a:hover { background: rgba(255, 255, 255, .06); color: #fff; }

/* ---- iridescent ring (span.c2-ring injected into cards by JS) ---- */
.project-card, .tech-card, .rm-card, .principle, .interest-card { position: relative; }
.c2-ring {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.2px;
  pointer-events: none; opacity: 0; transition: opacity .35s ease; z-index: 5;
  background: conic-gradient(from var(--cAng), var(--cyan), var(--purple), var(--pink), var(--green), var(--cyan));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  animation: c2Spin 4s linear infinite;
}
@keyframes c2Spin { to { --cAng: 360deg; } }
.project-card:hover .c2-ring,
.tech-card:hover .c2-ring,
.rm-card:hover .c2-ring,
.principle:hover .c2-ring,
.interest-card:hover .c2-ring { opacity: 1; }

/* ---- cards: deeper glass, lifted hover ---- */
.project-card, .rm-card, .tech-card {
  background: var(--card-bg);
  border: var(--card-border);
  backdrop-filter: blur(14px);
  transition: transform .3s cubic-bezier(.2, .8, .3, 1), box-shadow .35s ease;
}
.project-card:hover, .rm-card:hover {
  box-shadow: 0 24px 70px rgba(80, 70, 180, .35);
}
.tech-card:hover { transform: translateY(-4px); box-shadow: 0 16px 44px rgba(80, 70, 180, .3); }
.tech-bar-fill { background: linear-gradient(90deg, var(--cyan), var(--purple)); }

/* ---- filter chips ---- */
.project-filter, .tech-filter {
  border-radius: 999px;
  transition: .25s ease;
}
.project-filter:hover, .tech-filter:hover { border-color: rgba(190, 180, 255, .4); }
.project-filter.active, .tech-filter.active {
  background: linear-gradient(120deg, var(--cyan), var(--purple));
  color: #08051a; border-color: transparent;
}

/* ---- primary CTAs ---- */
.hero-cta a, .btn-primary, .hero-social a {
  transition: .25s cubic-bezier(.2, .8, .3, 1);
}
.hero-social a:hover { transform: translateY(-3px); color: var(--cyan); }

/* ---- motion safety ---- */
@media (prefers-reduced-motion: reduce) {
  .c2-mesh, .c2-ring, .hero-name { animation: none; }
  .c2-spot { display: none; }
}