/* ═══════════════════════════════════════════════════════════
   style.css  –  Vo Hon Dai Luc VNG Landing Page
   
   Table of Contents:
   1.  CSS Custom Properties (Design Tokens)
   2.  Reset & Base
   3.  Typography
   4.  Layout Utilities
   5.  Loading Screen
   6.  Particle Canvas
   7.  Header
   8.  Hero Section
   9.  Counter Box
  10.  Milestone Section
  11.  Overall Progress Bar
  12.  Milestone Cards
  13.  Countdown Timer
  14.  Registration Form
  15.  Popup
  16.  Footer
  17.  Admin Badge
  18.  Animations & Keyframes
  19.  Responsive – Tablet (≤ 900px)
  20.  Responsive – Mobile (≤ 480px)
═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────
   1. CSS CUSTOM PROPERTIES
───────────────────────────────────────────────────────── */
:root {
  /* Color palette */
  --clr-bg-deep:    #0d0120;
  --clr-bg-mid:     #1a0533;
  --clr-bg-card:    rgba(30, 5, 60, 0.85);
  --clr-purple:     #7b2fff;
  --clr-purple-lt:  #a855f7;
  --clr-gold:       #f5c842;
  --clr-gold-lt:    #ffe680;
  --clr-cyan:       #00e5ff;
  --clr-pink:       #ff4ddb;
  --clr-white:      #ffffff;
  --clr-text:       #d4b8ff;
  --clr-text-dim:   #8a6faa;
  --clr-success:    #4ade80;
  --clr-error:      #f87171;

  /* Glow effects */
  --glow-purple:    0 0 20px rgba(123, 47, 255, 0.6),
                    0 0 40px rgba(123, 47, 255, 0.3);
  --glow-gold:      0 0 20px rgba(245, 200, 66, 0.7),
                    0 0 40px rgba(245, 200, 66, 0.3);
  --glow-cyan:      0 0 20px rgba(0, 229, 255, 0.6);

  /* Gradients */
  --grad-bg:        linear-gradient(160deg, #0d0120 0%, #1a0533 40%, #0a0820 100%);
  --grad-gold:      linear-gradient(135deg, #f5c842, #ff9500, #f5c842);
  --grad-purple:    linear-gradient(135deg, #7b2fff, #c026d3);
  --grad-card:      linear-gradient(145deg, rgba(40,8,80,0.9), rgba(20,4,45,0.95));

  /* Borders */
  --border-card:    1px solid rgba(123, 47, 255, 0.3);
  --border-gold:    1px solid rgba(245, 200, 66, 0.5);

  /* Spacing */
  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  2rem;
  --space-lg:  4rem;
  --space-xl:  6rem;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: 40px;

  /* Transitions */
  --trans-fast:   0.2s ease;
  --trans-normal: 0.35s ease;
  --trans-slow:   0.6s ease;

  /* Font */
  --font-main: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-display: Georgia, 'Times New Roman', serif;
}

/* ─────────────────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-main);
  background: var(--grad-bg);
  color: var(--clr-text);
  min-height: 100vh;
  overflow-x: hidden;
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--clr-purple-lt);
  text-decoration: none;
  transition: color var(--trans-fast);
}
a:hover { color: var(--clr-gold); }

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

/* ─────────────────────────────────────────────────────────
   3. TYPOGRAPHY
───────────────────────────────────────────────────────── */
.section-title {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 700;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-sm);
}

.section-desc {
  text-align: center;
  color: var(--clr-text-dim);
  max-width: 600px;
  margin: 0 auto var(--space-md);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ─────────────────────────────────────────────────────────
   4. LAYOUT UTILITIES
───────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.hidden { display: none !important; }

.fade-in {
  animation: fadeIn 0.6s ease forwards;
}

/* ─────────────────────────────────────────────────────────
   5. LOADING SCREEN
───────────────────────────────────────────────────────── */
.loading-screen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity var(--trans-slow);
  background:
    linear-gradient(
      180deg,
      rgba(13, 1, 32, 0.55) 0%,
      rgba(13, 1, 32, 0.55) 100%
    ),
    url('../images/loading-bg.jpg') center center / cover no-repeat;
}


.loading-screen.fade-out {
  opacity: 0;
  pointer-events: none;
}

.loading-inner {
  text-align: center;
  width: 300px;
}

.loading-logo {
  margin-bottom: var(--space-md);
}
.loading-logo img {
  width: 100px;
  margin: 0 auto var(--space-sm);
}
/* ═══════════════════════════════════════════════
   LOADING SCREEN  –  Chữ Highlight Nổi Bật
   ═══════════════════════════════════════════════ */

/* Tiêu đề HASHIRA X LEGEND */
.loading-title {
  background:           linear-gradient(90deg,
                          #ffe066 0%,
                          #ff9900 30%,
                          #ff4ecd 60%,
                          #ffe066 100%);
  background-size:          250% auto;
  -webkit-background-clip:  text;
  -webkit-text-fill-color:  transparent;
  background-clip:          text;

  font-size:      2.2rem;
  font-weight:    900;
  letter-spacing: 0.2em;
  text-transform: uppercase;

  animation:
    loading-shine   2.5s linear infinite,
    loading-float   3s   ease-in-out infinite;

  filter: drop-shadow(0 0 18px rgba(255, 180, 0, 0.7));
}

/* Text "Loading world..." đổi màu dần */
.loading-text {
  font-size:      0.95rem;
  font-weight:    600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color:          #f0c040;
  animation:
    loading-text-pulse  1.6s ease-in-out infinite,
    loading-dots-fade   1.6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(240, 192, 64, 0.8));
}

/* ── Animations ── */
@keyframes loading-shine {
  0%   { background-position: 0%   center; }
  100% { background-position: 250% center; }
}

@keyframes loading-float {
  0%, 100% { transform: translateY(0px);  }
  50%       { transform: translateY(-5px); }
}

@keyframes loading-text-pulse {
  0%, 100% {
    opacity: 1;
    filter:  drop-shadow(0 0 8px  rgba(240,192,64,0.8));
  }
  50% {
    opacity: 0.5;
    filter:  drop-shadow(0 0 20px rgba(240,192,64,1));
  }
}

.loading-bar-wrap {
  width: 100%;
  height: 6px;
  background: rgba(123, 47, 255, 0.2);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: var(--space-sm);
}

.loading-bar {
  height: 100%;
  width: 0%;
  background: var(--grad-gold);
  border-radius: 99px;
  transition: width 0.15s ease;
  box-shadow: var(--glow-gold);
}



/* ─────────────────────────────────────────────────────────
   6. PARTICLE CANVAS
───────────────────────────────────────────────────────── */
#particle-canvas {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────
   7. HEADER
───────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(13, 1, 32, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(123, 47, 255, 0.2);
  padding: 0.75rem 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
}

.header-logo img {
  height: 40px;
  width: auto;
}
.logo-text {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.header-nav {
  display: flex;
  gap: var(--space-md);
}
.header-nav a {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--clr-text);
  text-transform: uppercase;
  transition: color var(--trans-fast);
  position: relative;
}
.header-nav a::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--grad-gold);
  border-radius: 2px;
  transition: width var(--trans-normal);
}
.header-nav a:hover {
  color: var(--clr-gold);
}
.header-nav a:hover::after {
  width: 100%;
}

/* ─────────────────────────────────────────────────────────
   8. HERO SECTION
───────────────────────────────────────────────────────── */
.hero-section {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px var(--space-md) var(--space-xl);
  overflow: hidden;
}

.hero-bg {
  position: absolute;
  inset: 0;
  background:
    url('../images/bg.jpg') center center / cover no-repeat,
    var(--grad-bg);
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.15)  0%,    /* tối hơn chút ở trên */
    rgba(13, 1, 32, 0.45) 40%,  /* thêm lớp tím tối ở giữa – nơi có chữ */
    rgba(13, 1, 32, 0.45) 65%,
    rgba(13, 1, 32, 0.90) 100%
  );
}



/* Character art – decorative */
.hero-char {
  position: absolute;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
}
.hero-char--left  { left: 0;  }
.hero-char--right { right: 0; }
.hero-char img {
  height: clamp(300px, 55vh, 650px);
  width: auto;
  filter: drop-shadow(0 0 30px rgba(123, 47, 255, 0.5));
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
}

.hero-eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--clr-gold);
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
  animation: fadeInDown 0.8s ease 0.2s both;
  text-shadow: 0 0 20px rgba(245, 200, 66, 0.9),
               0 2px 8px rgba(0, 0, 0, 0.9);   /* thêm dòng này */
}


.hero-title {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: var(--space-md);
  animation: fadeInDown 0.8s ease 0.4s both;
}
.hero-title--sub {
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  color: var(--clr-text);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 1),     /* thêm dòng này */
               0 0 30px rgba(0, 0, 0, 0.8);
  color: #f0e0ff;                                 /* sáng hơn */
}

.hero-title--main {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-shadow: none;
  filter: drop-shadow(0 0 25px rgba(245, 200, 66, 0.9))
          drop-shadow(0 3px 12px rgba(0, 0, 0, 1));   /* tăng shadow */
}

.hero-desc {
  color: var(--clr-text-dim);
  font-size: 1rem;
  margin-bottom: var(--space-md);
  animation: fadeInDown 0.8s ease 0.6s both;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.95);  /* thêm dòng này */
  color: #e8d5ff;                                /* sáng hơn */
}


/* ─────────────────────────────────────────────────────────
   9. COUNTER BOX
───────────────────────────────────────────────────────── */
.counter-box {
  display: inline-block;
  background: var(--grad-card);
  border: var(--border-gold);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-md);
  animation: fadeInDown 0.8s ease 0.8s both;
  box-shadow: var(--glow-gold);
}

.counter-label {
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--clr-gold);
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.counter-number {
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 900;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  letter-spacing: 0.04em;
}

.counter-sub {
  font-size: 0.75rem;
  color: var(--clr-text-dim);
  margin-top: 0.25rem;
  letter-spacing: 0.06em;
}

/* ─────────────────────────────────────────────────────────
   CTA BUTTON
───────────────────────────────────────────────────────── */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2.5rem;
  background: var(--grad-gold);
  color: #1a0533;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-xl);
  border: none;
  cursor: pointer;
  box-shadow: var(--glow-gold);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast);
  animation: fadeInDown 0.8s ease 1s both;
  text-decoration: none;
}
.btn-cta:hover {
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 0 30px rgba(245,200,66,0.8), 0 0 60px rgba(245,200,66,0.4);
  color: #1a0533;
}
.btn-cta:active {
  transform: translateY(0) scale(0.98);
}
.btn-cta__icon {
  font-size: 1.2rem;
}

/* Pulse animation for main CTA */
.pulse-btn {
  animation: fadeInDown 0.8s ease 1s both, pulseCTA 2.5s ease-in-out 2s infinite;
}

/* ─────────────────────────────────────────────────────────
   10. MILESTONE SECTION
───────────────────────────────────────────────────────── */
.milestones-section {
  position: relative;
  z-index: 1;
  padding: var(--space-xl) 0;
  background:
    /* Overlay gradient để chữ và card dễ đọc */
    linear-gradient(
      180deg,
      rgba(13, 1, 32, 0.75) 0%,
      rgba(20, 4, 50, 0.55) 20%,
      rgba(20, 4, 50, 0.55) 80%,
      rgba(13, 1, 32, 0.75) 100%
    ),
    /* Background image */
    url('../images/milestones-bg.jpg') center center / cover no-repeat;
}


.section-header {
  margin-bottom: var(--space-lg);
}

/* ─────────────────────────────────────────────────────────
   11. OVERALL PROGRESS BAR
───────────────────────────────────────────────────────── */
.overall-progress-wrap {
  max-width: 800px;
  margin: 0 auto var(--space-lg);
  padding: 0 var(--space-sm);
}

.overall-progress-track {
  position: relative;
  width: 100%;
  height: 10px;
  background: rgba(123, 47, 255, 0.15);
  border-radius: 99px;
  overflow: visible;
  border: 1px solid rgba(123, 47, 255, 0.2);
  margin-bottom: 0.5rem;
}

.overall-progress-fill {
  height: 100%;
  width: 0%;
  background: var(--grad-gold);
  border-radius: 99px;
  transition: width 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
}

/* Glowing orb at the tip of the progress bar */
.overall-progress-glow {
  position: absolute;
  top: 50%;
  left: 0%;
  transform: translate(-50%, -50%);
  width: 18px;
  height: 18px;
  background: var(--clr-gold);
  border-radius: 50%;
  box-shadow: var(--glow-gold);
  transition: left 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  animation: glowPulse 1.8s ease-in-out infinite;
}

.overall-progress-labels {
  display: flex;
  justify-content: space-between;
  font-size: 0.75rem;
  color: var(--clr-text-dim);
  letter-spacing: 0.04em;
}

/* ─────────────────────────────────────────────────────────
   12. MILESTONE CARDS
───────────────────────────────────────────────────────── */
.milestones-track {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: var(--space-md) var(--space-sm) var(--space-lg);
  scrollbar-width: thin;
  scrollbar-color: rgba(123,47,255,0.4) transparent;
}

.milestones-track::-webkit-scrollbar {
  height: 4px;
}
.milestones-track::-webkit-scrollbar-track {
  background: transparent;
}
.milestones-track::-webkit-scrollbar-thumb {
  background: rgba(123,47,255,0.4);
  border-radius: 99px;
}

/* ── Single milestone card ── */
.milestone-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 0 0 auto;
  width: 180px;
  cursor: pointer;
  outline: none;
}
.milestone-card:focus-visible .milestone-node {
  outline: 2px solid var(--clr-gold);
  outline-offset: 4px;
}

/* ── Connector line between cards ── */
.milestone-connector {
  position: absolute;
  top: 28px; /* align with node center */
  left: calc(50% + 28px);
  width: calc(100% - 56px);
  height: 3px;
  background: rgba(123, 47, 255, 0.2);
  border-radius: 99px;
  z-index: 0;
  overflow: hidden;
}
.milestone-connector--lit {
  background: linear-gradient(90deg, var(--clr-gold), var(--clr-purple-lt));
  box-shadow: 0 0 8px rgba(245, 200, 66, 0.5);
  animation: connectorShimmer 2s linear infinite;
}

/* ── Node (circle indicator) ── */
.milestone-node {
  position: relative;
  z-index: 2;
  width: 56px;
  height: 56px;
  margin-bottom: var(--space-sm);
  flex-shrink: 0;
}

.milestone-node__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(123, 47, 255, 0.3);
  transition: border-color var(--trans-normal), box-shadow var(--trans-normal);
}
.milestone-node--lit .milestone-node__ring {
  border-color: var(--clr-gold);
  box-shadow: var(--glow-gold);
  animation: ringRotate 4s linear infinite;
}

.milestone-node__core {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--clr-bg-deep);
  border: 1px solid rgba(123, 47, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--clr-text-dim);
  transition: background var(--trans-normal), color var(--trans-normal);
}
.milestone-node--lit .milestone-node__core {
  background: radial-gradient(circle, rgba(245,200,66,0.2), rgba(13,1,32,0.9));
  color: var(--clr-gold);
  font-size: 1.2rem;
}

/* Pulsing ring for the "active" (most recently unlocked) milestone */
.milestone-node__pulse {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--clr-gold);
  opacity: 0;
  animation: pulseRing 1.8s ease-out infinite;
}

/* ── Card body ── */
.milestone-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  text-align: center;
}

.milestone-rank {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 0.2rem;
}

.milestone-target {
  font-size: 1rem;
  font-weight: 800;
  color: var(--clr-white);
  margin-bottom: var(--space-sm);
  letter-spacing: 0.04em;
}

/* ── Reward image frame ── */
.milestone-reward-wrap {
  position: relative;
  width: 100%;
  margin-bottom: var(--space-sm);
}
.milestone-reward-wrap--locked {
  filter: grayscale(0.6) brightness(0.7);
}

.milestone-img-frame {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto var(--space-xs);
  border-radius: var(--radius-md);
  background: var(--grad-card);
  border: var(--border-card);
  overflow: hidden;
  transition: transform var(--trans-normal), box-shadow var(--trans-normal);
}

.milestone-card:hover .milestone-img-frame {
  transform: translateY(-4px) scale(1.05);
  box-shadow: var(--glow-purple);
}
.milestone-card--unlocked:hover .milestone-img-frame {
  box-shadow: var(--glow-gold);
}

.milestone-img-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(245,200,66,0.15), transparent 70%);
  pointer-events: none;
  animation: imageGlow 2.5s ease-in-out infinite alternate;
}

.milestone-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--trans-normal);
}
.milestone-card:hover .milestone-img {
  transform: scale(1.08);
}

/* Lock overlay for locked milestones */
.milestone-lock-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 1, 32, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  backdrop-filter: blur(1px);
}

.milestone-title {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--clr-text);
  line-height: 1.4;
  padding: 0 0.25rem;
}
.milestone-card--unlocked .milestone-title {
  color: var(--clr-gold-lt);
}

/* ── Mini progress bar ── */
.milestone-mini-progress {
  width: 80%;
  height: 4px;
  background: rgba(123, 47, 255, 0.15);
  border-radius: 99px;
  overflow: hidden;
  margin: var(--space-xs) auto 0.25rem;
}
.milestone-mini-fill {
  height: 100%;
  background: var(--grad-gold);
  border-radius: 99px;
  transition: width 1.2s ease;
}

.milestone-mini-label {
  font-size: 0.65rem;
  color: var(--clr-text-dim);
  letter-spacing: 0.04em;
}

/* Unlocked badge */
.unlocked-badge {
  display: inline-block;
  background: rgba(74, 222, 128, 0.15);
  color: var(--clr-success);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 99px;
  padding: 0.1rem 0.5rem;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ── Card state: active (just unlocked) ── */
.milestone-card--active .milestone-body {
  position: relative;
}
.milestone-card--active .milestone-body::before {
  content: 'JUST UNLOCKED!';
  position: absolute;
  top: -1.4rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--clr-gold);
  white-space: nowrap;
  animation: floatLabel 2s ease-in-out infinite;
}

/* ─────────────────────────────────────────────────────────
   13. COUNTDOWN TIMER
───────────────────────────────────────────────────────── */
.countdown-section {
  position: relative;
  z-index: 1;
  padding: var(--space-xl) 0;
  text-align: center;
}

.countdown-wrap {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
}

.countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--grad-card);
  border: var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-sm) var(--space-md);
  min-width: 90px;
  box-shadow: var(--glow-purple);
  transition: transform var(--trans-fast);
}
.countdown-block:hover {
  transform: translateY(-3px);
}

.countdown-num {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.countdown-lbl {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clr-text-dim);
  margin-top: 0.3rem;
}

.countdown-sep {
  font-size: 2rem;
  font-weight: 900;
  color: var(--clr-gold);
  line-height: 1;
  margin-bottom: 1.2rem;
  animation: blink 1s step-end infinite;
}

.countdown-ended {
  color: var(--clr-text-dim);
  font-size: 1rem;
  padding: var(--space-md);
}

/* ─────────────────────────────────────────────────────────
   14. REGISTRATION FORM
───────────────────────────────────────────────────────── */
.form-section {
  position: relative;
  z-index: 1;
  padding: var(--space-xl) 0;
  background:
    linear-gradient(
      180deg,
      rgba(13, 1, 32, 0.75) 0%,
      rgba(20, 4, 50, 0.55) 30%,
      rgba(20, 4, 50, 0.55) 70%,
      rgba(13, 1, 32, 0.75) 100%
    ),
    url('../images/form-bg.jpg') center center / cover no-repeat;
}


.form-card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--grad-card);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md);
  box-shadow: 0 0 60px rgba(123, 47, 255, 0.2), 0 20px 60px rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
}

/* Decorative top glow strip */
.form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--grad-gold);
  box-shadow: var(--glow-gold);
}

.form-card__header {
  text-align: center;
  margin-bottom: var(--space-md);
}

.form-title {
  font-size: clamp(1.4rem, 3vw, 2rem);
  font-weight: 800;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.form-subtitle {
  font-size: 0.875rem;
  color: var(--clr-text-dim);
  line-height: 1.6;
}

/* ── Form fields ── */
.register-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.form-label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--clr-text);
  text-transform: uppercase;
}

.required {
  color: var(--clr-pink);
  margin-left: 2px;
}

.form-input {
  width: 100%;
  padding: 0.8rem 1rem;
  background: rgba(13, 1, 32, 0.6);
  border: 1px solid rgba(123, 47, 255, 0.3);
  border-radius: var(--radius-sm);
  color: var(--clr-white);
  font-size: 0.95rem;
  font-family: inherit;
  transition: border-color var(--trans-fast), box-shadow var(--trans-fast);
  outline: none;
  -webkit-appearance: none;
}
.form-input::placeholder {
  color: rgba(138, 111, 170, 0.5);
}
.form-input:focus {
  border-color: var(--clr-purple-lt);
  box-shadow: 0 0 0 3px rgba(123, 47, 255, 0.15), var(--glow-purple);
}
.form-input:hover {
  border-color: rgba(123, 47, 255, 0.5);
}

/* Select dropdown */
.form-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a855f7' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}
.form-select option {
  background: #1a0533;
  color: var(--clr-white);
}

/* Inline error messages */
.form-error {
  font-size: 0.75rem;
  color: var(--clr-error);
  min-height: 1rem;
  display: block;
}

/* ── Submit button ── */
.btn-submit {
  width: 100%;
  padding: 1rem;
  background: var(--grad-gold);
  color: #1a0533;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-xl);
  border: none;
  cursor: pointer;
  box-shadow: var(--glow-gold);
  transition: transform var(--trans-fast), box-shadow var(--trans-fast), opacity var(--trans-fast);
  margin-top: var(--space-xs);
  position: relative;
  overflow: hidden;
}
.btn-submit::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: rgba(255,255,255,0.25);
  transform: skewX(-20deg);
  transition: left 0.5s ease;
}
.btn-submit:hover::after {
  left: 120%;
}
.btn-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(245,200,66,0.8), 0 0 60px rgba(245,200,66,0.3);
}
.btn-submit:active {
  transform: translateY(0) scale(0.98);
}
.btn-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* Form result message */
.form-message {
  padding: 0.8rem 1rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
  margin-top: var(--space-xs);
  animation: fadeIn 0.3s ease;
}
.form-message--success {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: var(--clr-success);
}
.form-message--error {
  background: rgba(248, 113, 113, 0.1);
  border: 1px solid rgba(248, 113, 113, 0.3);
  color: var(--clr-error);
}

/* ─────────────────────────────────────────────────────────
   15. POPUP
───────────────────────────────────────────────────────── */
.popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 500;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  animation: fadeIn 0.25s ease;
}

.popup-box {
  position: relative;
  background: var(--grad-card);
  border: var(--border-gold);
  border-radius: var(--radius-lg);
  padding: var(--space-lg) var(--space-md) var(--space-md);
  max-width: 420px;
  width: 100%;
  text-align: center;
  box-shadow: var(--glow-gold), 0 30px 80px rgba(0,0,0,0.7);
  animation: popupSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
  overflow: hidden;
}

/* Rotating glow ring behind popup */
.popup-glow-ring {
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,200,66,0.15), transparent 70%);
  pointer-events: none;
  animation: glowPulse 2s ease-in-out infinite;
}

.popup-close {
  position: absolute;
  top: var(--space-sm);
  right: var(--space-sm);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(123, 47, 255, 0.2);
  border: 1px solid rgba(123, 47, 255, 0.3);
  color: var(--clr-text);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--trans-fast), color var(--trans-fast);
}
.popup-close:hover {
  background: rgba(248, 113, 113, 0.2);
  color: var(--clr-error);
}

.popup-img-wrap {
  width: 140px;
  height: 140px;
  margin: 0 auto var(--space-sm);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--border-gold);
  box-shadow: var(--glow-gold);
  background: rgba(13,1,32,0.6);
}
.popup-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.popup-title {
  font-size: 1.2rem;
  font-weight: 800;
  background: var(--grad-gold);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.popup-desc {
  font-size: 0.875rem;
  color: var(--clr-text-dim);
  line-height: 1.6;
  margin-bottom: var(--space-sm);
}

.popup-status {
  margin-bottom: var(--space-sm);
  font-size: 0.85rem;
  font-weight: 700;
}
.popup-status--unlocked {
  color: var(--clr-success);
}
.popup-status--locked {
  color: var(--clr-text-dim);
}

.popup-cta {
  width: 100%;
  justify-content: center;
}

/* ─────────────────────────────────────────────────────────
   16. FOOTER
───────────────────────────────────────────────────────── */
.site-footer {
  position: relative;
  z-index: 1;
  padding: var(--space-md) 0;
  border-top: 1px solid rgba(123, 47, 255, 0.15);
  text-align: center;
}

.footer-copy {
  font-size: 0.8rem;
  color: var(--clr-text-dim);
  margin-bottom: 0.25rem;
}
.footer-legal {
  font-size: 0.7rem;
  color: rgba(138, 111, 170, 0.4);
}

/* ─────────────────────────────────────────────────────────
   17. ADMIN BADGE
───────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────────
   18. ANIMATIONS & KEYFRAMES
───────────────────────────────────────────────────────── */

/* Fade in from top */
@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Generic fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Popup slide in with spring */
@keyframes popupSlideIn {
  from { opacity: 0; transform: scale(0.85) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Pulsing glow */
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
  50%       { opacity: 1;   transform: translateX(-50%) scale(1.1); }
}

/* Pulsing ring for active milestone */
@keyframes pulseRing {
  0%   { transform: scale(1);   opacity: 0.8; }
  100% { transform: scale(1.6); opacity: 0;   }
}

/* CTA button pulse */
@keyframes pulseCTA {
  0%, 100% { box-shadow: var(--glow-gold); }
  50%       { box-shadow: 0 0 40px rgba(245,200,66,0.9), 0 0 80px rgba(245,200,66,0.5); }
}

/* Rotating ring on unlocked node */
@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Connector shimmer */
@keyframes connectorShimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Floating label */
@keyframes floatLabel {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(-4px); }
}

/* Image glow breathe */
@keyframes imageGlow {
  from { opacity: 0.4; }
  to   { opacity: 1; }
}

/* Soft pulse for loading text */
@keyframes pulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

/* Countdown colon blink */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}

/* ─────────────────────────────────────────────────────────
   19. RESPONSIVE – TABLET (≤ 900px)
───────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  .header-nav {
    gap: var(--space-sm);
  }

  .hero-char {
    opacity: 0.35;
  }
  .hero-char--left  { left: -40px; }
  .hero-char--right { right: -40px; }

  .milestones-track {
    justify-content: flex-start;
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }

  .milestone-card {
    width: 160px;
  }

  .countdown-block {
    min-width: 75px;
    padding: var(--space-sm);
  }
}

/* ─────────────────────────────────────────────────────────
   20. RESPONSIVE – MOBILE (≤ 480px)
───────────────────────────────────────────────────────── */
@media (max-width: 480px) {

  :root {
    --space-md: 1.25rem;
    --space-lg: 2.5rem;
    --space-xl: 3.5rem;
  }

  .header-nav {
    display: none; /* hide nav on very small screens */
  }

  .hero-section {
    padding-top: 80px;
    padding-bottom: var(--space-lg);
  }

  .hero-char {
    display: none; /* hide character art on mobile */
  }

  .hero-title--main {
    font-size: 1.8rem;
  }

  .counter-box {
    padding: var(--space-sm);
  }

  .milestones-track {
    gap: 0;
    padding: var(--space-sm) var(--space-sm) var(--space-md);
  }

  .milestone-card {
    width: 140px;
  }

  .milestone-img-frame {
    width: 80px;
    height: 80px;
  }

  .countdown-wrap {
    gap: 0.5rem;
  }
  .countdown-block {
    min-width: 64px;
    padding: 0.6rem 0.5rem;
  }
  .countdown-num {
    font-size: 1.6rem;
  }
  .countdown-sep {
    font-size: 1.4rem;
    margin-bottom: 1rem;
  }

  .form-card {
    padding: var(--space-md) var(--space-sm);
  }

  .popup-box {
    padding: var(--space-md) var(--space-sm) var(--space-sm);
  }
}
.loading-title__pre {
  display:        block;
  font-size:      1rem;
  letter-spacing: 0.45em;
  opacity:        0.85;
}

.loading-title__main {
  display:        block;
  font-size:      3rem;
  letter-spacing: 0.25em;
  line-height:    1;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .loading-title__main { font-size: 2.2rem; }
  .loading-title__pre  { font-size: 0.85rem; }
}