/* ==========================================================================
   theme.css : Tema Visual "Classroom of the Elite" (ANHS S-System Aesthetic)
   Palet: Crimson Red (#ff1e42), Obsidian (#09070f), Imperial Gold (#f5c451),
          S-System Cyan (#00f0ff)
   ========================================================================== */
:root {
  --bg-deep: #08060e;
  --bg-mid: #120916;
  --bg-soft: #1f0d22;

  --crimson: #e11d48;
  --crimson-bright: #ff2a6d;
  --crimson-dark: #881337;
  --gold: #f5c451;
  --gold-soft: #fde68a;
  --neon-cyan: #00f0ff;
  --neon-pink: #ff2a6d;
  --slate: #94a3b8;

  --text: #f8fafc;
  --text-soft: #cbd5e1;
  --card: rgba(15, 11, 24, 0.80);
  --card-hover: rgba(24, 14, 34, 0.90);
  --card-border: rgba(225, 29, 72, 0.34);
  --card-border-gold: rgba(245, 196, 81, 0.42);
  --shadow: 0 20px 52px rgba(0, 0, 0, 0.72);
  --glow-crimson: 0 0 28px rgba(225, 29, 72, 0.55);
  --glow-gold: 0 0 26px rgba(245, 196, 81, 0.42);
  --glow-cyan: 0 0 24px rgba(0, 240, 255, 0.38);

  --font-display: 'Cinzel', 'Rajdhani', Georgia, serif;
  --font-tech: 'Rajdhani', system-ui, sans-serif;
  --font-body: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

body {
  background-color: var(--bg-deep);
  background-image: linear-gradient(160deg, #08060e 0%, #140818 52%, #1d091a 100%);
  color: var(--text);
  font-family: var(--font-body);
}

h1, h2, h3 {
  font-family: var(--font-display);
  letter-spacing: 0.02em;
}

h4, .btn, .nav-logo, .stage-tag, .chip, .section-kicker, .stat-num, .stat-kicker, .stage-lvl-badge, .dossier-tag, .hero-hello, .pill {
  font-family: var(--font-tech);
  letter-spacing: 0.05em;
}

/* ---------- Latar Belakang Classroom of the Elite ---------- */
.bg-scene {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(8, 6, 14, 0.82) 0%, rgba(18, 9, 22, 0.85) 55%, rgba(8, 6, 14, 0.93) 100%),
    url('../assets/images/bg/cote_classroom.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  filter: saturate(1.12) contrast(1.06);
  transform: scale(1.02);
}

/* Grid S-System & Papan Catur Taktis */
.bg-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(225, 29, 72, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245, 196, 81, 0.06) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(circle at 50% 35%, rgba(0, 0, 0, 0.9), transparent 85%);
  -webkit-mask-image: radial-gradient(circle at 50% 35%, rgba(0, 0, 0, 0.9), transparent 85%);
}

/* Siluet Karakter Resmi Classroom of the Elite (Suzune Horikita & Kei Karuizawa) */
.bg-char {
  position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  user-select: none;
}

.bg-char-horikita {
  right: -0.5vw;
  bottom: -2vh;
  width: clamp(240px, 30vw, 460px);
  height: clamp(320px, 72vh, 660px);
  background-image: url('../assets/images/bg/horikita.png');
  background-position: right bottom;
  opacity: 0.46;
  filter: drop-shadow(0 0 32px rgba(225, 29, 72, 0.6));
  animation: float-horikita 10s ease-in-out infinite alternate;
}

.bg-char-kei {
  left: -1vw;
  top: 14vh;
  width: clamp(190px, 23vw, 350px);
  height: clamp(280px, 60vh, 540px);
  background-image: url('../assets/images/bg/kei.png');
  background-position: left bottom;
  opacity: 0.36;
  filter: drop-shadow(0 0 28px rgba(245, 196, 81, 0.45));
  animation: float-kei 12s ease-in-out infinite alternate;
}

@keyframes float-horikita {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-10px, -14px, 0); }
}

@keyframes float-kei {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(10px, -12px, 0); }
}

@media (max-width: 767px) {
  .bg-char-horikita {
    opacity: 0.22;
    width: 210px;
    height: 300px;
    right: -20px;
  }
  .bg-char-kei {
    opacity: 0.16;
    width: 165px;
    height: 260px;
    left: -20px;
    top: 22vh;
  }
}

.bg-aurora {
  position: absolute;
  border-radius: 50%;
  filter: blur(95px);
  opacity: 0.38;
  animation: drift 22s ease-in-out infinite alternate;
}
.aurora-1 { width: 48vw; height: 48vw; left: -14vw; top: -12vw; background: var(--crimson); }
.aurora-2 { width: 44vw; height: 44vw; right: -12vw; top: 26vh; background: #991b1b; animation-duration: 28s; opacity: 0.32; }
.aurora-3 { width: 50vw; height: 50vw; left: 22vw; bottom: -24vw; background: var(--gold); animation-duration: 34s; opacity: 0.22; }

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  100% { transform: translate3d(6vw, 5vh, 0) scale(1.14); }
}

/* ---------- Navigasi Mengambang ANHS ---------- */
.nav {
  background: rgba(12, 9, 20, 0.86);
  border: 1px solid var(--card-border);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.65), inset 0 1px 0 rgba(245, 196, 81, 0.22);
}
.logo-crest {
  color: var(--gold);
  font-size: 1.35rem;
  filter: drop-shadow(0 0 8px rgba(245, 196, 81, 0.6));
}
.nav-logo {
  color: #fff;
  letter-spacing: 0.08em;
}
.nav-links a { color: var(--text-soft); text-transform: uppercase; letter-spacing: 0.06em; }
.nav-links a:hover, .nav-links a.is-active {
  background: linear-gradient(135deg, var(--crimson), #9f1239);
  color: #fff;
  box-shadow: 0 4px 18px rgba(225, 29, 72, 0.55);
  border: 1px solid rgba(245, 196, 81, 0.45);
}

/* ---------- Hero Dossier ---------- */
.hero-card {
  background:
    radial-gradient(circle at 86% 18%, rgba(225, 29, 72, 0.22), transparent 46%),
    radial-gradient(circle at 12% 88%, rgba(245, 196, 81, 0.12), transparent 46%),
    var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(245, 196, 81, 0.25);
}

.pill {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--text);
  text-transform: uppercase;
}
.pill-crimson { background: rgba(225, 29, 72, 0.22); border-color: rgba(255, 42, 109, 0.6); color: #fecdd3; }
.pill-gold    { background: rgba(245, 196, 81, 0.16); border-color: rgba(245, 196, 81, 0.55); color: var(--gold-soft); }
.pill-cyan    { background: rgba(0, 240, 255, 0.12); border-color: rgba(0, 240, 255, 0.45); color: #a5f3fc; }

.hero-hello {
  color: var(--gold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero-name {
  background: linear-gradient(90deg, #ffffff 0%, var(--gold-soft) 32%, #ff4d6d 68%, #ffffff 100%);
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: shimmer 7s linear infinite;
  filter: drop-shadow(0 6px 24px rgba(225, 29, 72, 0.48));
}
@keyframes shimmer { to { background-position: 250% center; } }

.hero-role { color: var(--neon-cyan); font-family: var(--font-tech); letter-spacing: 0.04em; }
.caret { animation: blink 1s steps(2) infinite; color: var(--crimson-bright); }
@keyframes blink { 50% { opacity: 0; } }

.cote-quote {
  margin: 0 0 1rem;
  padding: 0.75rem 1.1rem;
  border-left: 3px solid var(--crimson);
  background: rgba(225, 29, 72, 0.09);
  border-radius: 0 12px 12px 0;
  font-style: italic;
  font-size: 0.95rem;
  color: #f1f5f9;
}

.stats-strip {
  background: rgba(12, 9, 20, 0.86);
  border: 1px solid var(--card-border-gold);
  box-shadow: var(--shadow);
}
.stat-kicker {
  font-size: 0.72rem;
  color: var(--crimson-bright);
  letter-spacing: 0.12em;
  font-weight: 700;
}
.stat-num {
  background: linear-gradient(90deg, #fff, var(--gold), #ff6b8b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.stat-label { color: var(--text-soft); }

/* ---------- Tombol Taktis ---------- */
.btn-primary {
  background: linear-gradient(135deg, var(--crimson), #9f1239);
  border: 1px solid rgba(245, 196, 81, 0.55);
  color: #fff;
  box-shadow: var(--glow-crimson);
  text-transform: uppercase;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #f43f5e, var(--crimson));
  box-shadow: 0 0 36px rgba(225, 29, 72, 0.85);
}
.btn-ghost {
  background: rgba(245, 196, 81, 0.08);
  border: 1.5px solid var(--gold);
  color: var(--gold-soft);
  text-transform: uppercase;
}
.btn-ghost:hover { background: rgba(245, 196, 81, 0.2); box-shadow: var(--glow-gold); }
.btn-small {
  background: linear-gradient(135deg, rgba(225, 29, 72, 0.25), rgba(136, 19, 55, 0.4));
  border: 1px solid rgba(245, 196, 81, 0.45);
  color: var(--text);
  text-transform: uppercase;
}
.btn-small:hover {
  background: linear-gradient(135deg, var(--crimson), #9f1239);
  color: #fff;
  box-shadow: var(--glow-crimson);
}

/* Bingkai Avatar Dossier */
.avatar-frame::before {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 26px;
  background: conic-gradient(from 0deg, var(--crimson), var(--gold), var(--neon-cyan), var(--crimson));
  opacity: 0.72;
  filter: blur(14px);
  z-index: -1;
  animation: spin-slow 14s linear infinite;
}
@keyframes spin-slow { to { transform: rotate(360deg); } }

.avatar-frame img {
  border: 3px solid var(--gold);
  box-shadow: var(--shadow), 0 0 0 6px rgba(225, 29, 72, 0.28);
  background: var(--bg-mid);
}
.dossier-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: linear-gradient(135deg, var(--crimson), #881337);
  border: 1.5px solid var(--gold);
  color: var(--gold-soft);
  padding: 0.18rem 0.9rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: var(--glow-crimson);
}

.orbit {
  background: rgba(12, 9, 20, 0.92);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.65);
  animation: float 4s ease-in-out infinite;
}
.o1 { animation-delay: 0s; } .o2 { animation-delay: -1s; } .o3 { animation-delay: -2s; } .o4 { animation-delay: -3s; }
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.scroll-hint { color: var(--gold); animation: bounce 1.6s ease-in-out infinite; }
@keyframes bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 10px); } }

/* ---------- Heading & Kicker ---------- */
.section-kicker {
  background: rgba(225, 29, 72, 0.18);
  border: 1px solid rgba(245, 196, 81, 0.45);
  color: var(--gold-soft);
  text-transform: uppercase;
}
.section-head p { color: var(--text-soft); }
.section-head h2, .contact h2 {
  background: linear-gradient(90deg, #fff, var(--gold-soft), #ff4d6d);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ---------- Kartu Timeline & Panel OAA ---------- */
.journey::before {
  background: linear-gradient(180deg, var(--crimson), var(--gold), var(--neon-cyan), var(--crimson));
  box-shadow: var(--glow-crimson);
}
.stage-node {
  background: linear-gradient(135deg, var(--crimson), #7f1d1d);
  color: var(--gold-soft);
  box-shadow: var(--glow-crimson);
  border: 2px solid var(--gold);
  font-family: var(--font-tech);
}
.stage-card, .skill, .badge, .modal-box, .section-panel, .contact {
  background: var(--card);
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.stage-card:hover {
  background: var(--card-hover);
  border-color: var(--gold);
  box-shadow: var(--shadow), var(--glow-crimson);
}
.stage-card-boss {
  background:
    radial-gradient(circle at 90% 12%, rgba(225, 29, 72, 0.22), transparent 44%),
    radial-gradient(circle at 10% 90%, rgba(245, 196, 81, 0.14), transparent 45%),
    rgba(16, 11, 26, 0.88);
  border: 1.5px solid var(--card-border-gold);
}

/* Panel OAA dengan key visual Classroom of the Elite */
.section-panel-cote {
  background-image:
    linear-gradient(135deg, rgba(12, 9, 20, 0.92) 0%, rgba(22, 11, 28, 0.88) 65%, rgba(12, 9, 20, 0.82) 100%),
    url('../assets/images/bg/cote_panel.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.stage-img img { border: 2px solid rgba(245, 196, 81, 0.65); }
.stage-lvl-badge {
  background: rgba(10, 7, 18, 0.92);
  border: 1.5px solid var(--neon-cyan);
  color: var(--neon-cyan);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
}
.stage-lvl-max {
  border-color: var(--gold);
  color: var(--gold);
}
.stage-tag {
  background: rgba(225, 29, 72, 0.22);
  border: 1px solid rgba(225, 29, 72, 0.55);
  color: #fecdd3;
  text-transform: uppercase;
}
.stage-tag-boss {
  background: linear-gradient(135deg, var(--crimson), #881337);
  border: 1px solid var(--gold);
  color: var(--gold-soft);
}

.repair {
  background: rgba(10, 7, 18, 0.78);
  border: 1px solid rgba(225, 29, 72, 0.3);
}
.repair:hover {
  border-color: var(--gold);
  box-shadow: var(--glow-gold);
}
.repair h4 { color: var(--gold); text-transform: uppercase; }
.repair li::marker { color: var(--crimson-bright); }

/* ---------- Bar OAA & Skill ---------- */
.xp-bar { background: rgba(5, 3, 10, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); }
.xp-bar i, .skill-bar i {
  background: linear-gradient(90deg, var(--crimson), var(--gold), var(--neon-cyan));
  box-shadow: var(--glow-crimson);
}
.xp-bar i::after, .skill-bar i::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.65) 50%, transparent 70%);
  animation: sheen 2.6s ease-in-out infinite;
}
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

.chip {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--card-border);
  color: var(--text);
  text-transform: uppercase;
}
.chip:hover { background: rgba(225, 29, 72, 0.2); border-color: var(--gold); }
.chip.is-active {
  background: linear-gradient(135deg, var(--crimson), #9f1239);
  border-color: var(--gold);
  box-shadow: var(--glow-crimson);
}

.skill, .badge { background: rgba(11, 8, 20, 0.82); }
.skill:hover, .badge:hover {
  background: rgba(26, 13, 35, 0.92);
  border-color: var(--gold);
  box-shadow: var(--shadow), var(--glow-crimson);
}
.badge .badge-icon { filter: drop-shadow(0 0 10px rgba(245, 196, 81, 0.65)); }

/* ---------- Maskot Pojok (Arisu Sakayanagi - Class A) ---------- */
.mascot-bubble {
  background: rgba(12, 9, 20, 0.95);
  border: 1.5px solid var(--gold);
  color: var(--text);
  box-shadow: var(--glow-crimson);
}

/* ---------- Modal, Footer & Lainnya ---------- */
.modal::backdrop { background: rgba(6, 4, 12, 0.82); backdrop-filter: blur(8px); }
.modal-box {
  background: linear-gradient(160deg, rgba(26, 12, 34, 0.98), rgba(11, 8, 20, 0.99));
  border: 1.5px solid var(--gold);
  color: var(--text);
}
.modal-close { background: rgba(225, 29, 72, 0.25); border: 1px solid var(--gold); color: #fff; }
.modal-close:hover { background: var(--crimson); }

.to-top { background: linear-gradient(135deg, var(--crimson), #881337); border: 1.5px solid var(--gold); color: var(--gold-soft); box-shadow: var(--glow-crimson); }
.contact-link { background: rgba(225, 29, 72, 0.16); border: 1px solid var(--gold); color: var(--text); }
.contact-link:hover { background: var(--crimson); color: #fff; }
.footer { color: var(--text-soft); border-top: 1px solid var(--card-border); background: rgba(8, 6, 14, 0.85); }

.sparkle { color: var(--gold); text-shadow: 0 0 10px var(--crimson); }
:focus-visible { outline: 3px solid var(--neon-cyan); outline-offset: 3px; }
.skip-link { background: var(--gold); color: #120916; }