/* ============================================
   quangit.online — Landing Page
   ============================================ */

.landing {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* Force full-width when landing is rendered — override sidebar margin */
.main:has(.landing) {
  margin-left: 0 !important;
}

/* --- Particle Canvas --- */
.particle-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

.hero,
.skills-section,
.social-section,
.landing-footer {
  position: relative;
  z-index: 1;
}

/* --- Hero Section --- */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: var(--space-8);
  overflow: hidden;
}

.hero__container {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  max-width: 1100px;
  width: 100%;
  z-index: 1;
}

.hero__content {
  flex: 1;
}

.hero__greeting {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-6);
  animation: springScale 700ms cubic-bezier(0.34,1.56,0.64,1) forwards;
  opacity: 0;
}

.hero__greeting-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success-500);
  animation: pulse 2s ease-in-out infinite;
}

.hero__title {
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: var(--font-extrabold);
  line-height: 1.1;
  margin-bottom: var(--space-6);
  animation: springUp 800ms cubic-bezier(0.34,1.56,0.64,1) forwards;
  animation-delay: 150ms;
  opacity: 0;
}

.hero__subtitle {
  font-size: var(--text-lg);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 520px;
  margin-bottom: var(--space-8);
  animation: springUp 800ms cubic-bezier(0.22,1,0.36,1) forwards;
  animation-delay: 350ms;
  opacity: 0;
}

.hero__actions {
  display: flex;
  gap: var(--space-4);
  animation: springUp 800ms cubic-bezier(0.34,1.56,0.64,1) forwards;
  animation-delay: 500ms;
  opacity: 0;
}

.hero__btn {
  padding: var(--space-3) var(--space-8);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  border-radius: var(--radius-full);
  transition: all 400ms cubic-bezier(0.34,1.56,0.64,1);
  height: 52px;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  position: relative;
  overflow: hidden;
}

/* Shimmer sweep on hover */
.hero__btn::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent);
  transition: left 600ms ease;
}
.hero__btn:hover::after {
  left: 100%;
}

.hero__btn--primary {
  background: linear-gradient(135deg, var(--primary-500), var(--primary-700));
  color: white;
  box-shadow: 0 4px 24px rgba(108,99,255,0.4);
  animation: glowPulse 3s ease-in-out infinite;
}

.hero__btn--primary:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 40px rgba(108,99,255,0.55);
}

.hero__btn--primary:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 100ms;
}

.hero__btn--outline {
  border: 1px solid var(--border-strong);
  color: var(--text-primary);
  background: var(--glass-bg);
  backdrop-filter: blur(8px);
}

.hero__btn--outline:hover {
  background: var(--bg-hover);
  border-color: var(--primary-500);
  color: var(--primary-400);
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 8px 30px rgba(108,99,255,0.15);
}

.hero__btn--outline:active {
  transform: translateY(0) scale(0.97);
  transition-duration: 100ms;
}

/* Hero visual side */
.hero__visual {
  flex: 0 0 380px;
  animation: springRight 900ms cubic-bezier(0.34,1.56,0.64,1) forwards;
  animation-delay: 300ms;
  opacity: 0;
}

.hero__avatar-wrapper {
  position: relative;
  width: 320px;
  height: 320px;
  margin: 0 auto;
}

.hero__avatar-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-500), var(--secondary-500), var(--accent-500));
  animation: spin 8s linear infinite, breathe 4s ease-in-out infinite;
  opacity: 0.6;
  filter: blur(1px);
}

.hero__avatar-ring::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--bg-primary);
}

.hero__avatar {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  z-index: 1;
  border: 4px solid var(--bg-primary);
}

.hero__avatar-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: 1;
  border: 4px solid var(--bg-primary);
  background: linear-gradient(135deg, var(--primary-600), var(--accent-600));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 6rem;
  font-weight: var(--font-extrabold);
  color: white;
}

/* Floating tech badges */
.hero__float-badges {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero__float-badge {
  position: absolute;
  padding: var(--space-2) var(--space-3);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  white-space: nowrap;
  animation: orbFloat 6s ease-in-out infinite;
  box-shadow: var(--shadow-md);
}

.hero__float-badge:nth-child(1) { top: 10%; left: -20%; animation-delay: 0s; }
.hero__float-badge:nth-child(2) { top: 5%; right: -15%; animation-delay: -1.5s; }
.hero__float-badge:nth-child(3) { bottom: 25%; left: -25%; animation-delay: -3s; }
.hero__float-badge:nth-child(4) { bottom: 10%; right: -20%; animation-delay: -4.5s; }

/* --- Animated Characters (full-page traversal) --- */
.characters {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.char {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  opacity: 0.5;
  filter: grayscale(0.2);
  transition: opacity 0.3s;
}

.char__body { font-size: 1.8rem; line-height: 1; }
.char__item { font-size: 1rem; }
.char__trail { font-size: 0.9rem; opacity: 0.6; }
.char__fx { font-size: 0.8rem; animation: fxPulse 1s ease-in-out infinite; }

@keyframes fxPulse {
  0%, 100% { opacity: 0.3; transform: scale(0.8); }
  50% { opacity: 0.8; transform: scale(1.2); }
}

/* 1. Astronaut — flies diagonally across page */
.char--astro {
  top: 15%;
  left: -5%;
  animation: astroFly 25s linear infinite;
}
.char--astro .char__body { font-size: 2rem; }
.char--astro .char__trail { animation: trailFlicker 0.5s ease-in-out infinite alternate; }

@keyframes astroFly {
  0%   { transform: translate(0, 0) rotate(-20deg); opacity: 0; }
  5%   { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { transform: translate(110vw, -40vh) rotate(-20deg); opacity: 0; }
}

@keyframes trailFlicker {
  0% { opacity: 0.3; transform: scale(0.7); }
  100% { opacity: 0.8; transform: scale(1.1); }
}

/* 2. Coder — walks left to right at 70% height */
.char--coder {
  top: 70%;
  left: -5%;
  animation: walkLR 35s linear infinite;
}

@keyframes walkLR {
  0%   { transform: translateX(0); opacity: 0; }
  3%   { opacity: 0.5; }
  95%  { opacity: 0.5; }
  100% { transform: translateX(110vw); opacity: 0; }
}

/* walking bounce */
.char--coder .char__body {
  animation: walkBounce 0.6s ease-in-out infinite;
}
@keyframes walkBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

/* 3. Skateboarder — fast right to left at 50% */
.char--skater {
  top: 50%;
  right: -5%;
  animation: skateRL 18s linear infinite;
  animation-delay: 4s;
}
.char--skater .char__body { font-size: 2rem; }

@keyframes skateRL {
  0%   { transform: translateX(0) scaleX(-1); opacity: 0; }
  3%   { opacity: 0.5; }
  95%  { opacity: 0.5; }
  100% { transform: translateX(-110vw) scaleX(-1); opacity: 0; }
}

/* 4. Coffee person — slow stroll right to left at 85% */
.char--coffee {
  top: 85%;
  right: -5%;
  animation: coffeeWalk 45s linear infinite;
  animation-delay: 8s;
}

@keyframes coffeeWalk {
  0%   { transform: translateX(0) scaleX(-1); opacity: 0; }
  2%   { opacity: 0.4; }
  96%  { opacity: 0.4; }
  100% { transform: translateX(-110vw) scaleX(-1); opacity: 0; }
}

.char--coffee .char__body {
  animation: walkBounce 0.8s ease-in-out infinite;
}

/* 5. Shooter 1 — charges from left, stops at 40% */
.char--shooter1 {
  top: 60%;
  left: -5%;
  animation: charge1 20s ease-in-out infinite;
  animation-delay: 12s;
}

@keyframes charge1 {
  0%   { transform: translateX(0); opacity: 0; }
  5%   { opacity: 0.6; }
  40%  { transform: translateX(38vw); opacity: 0.6; }
  55%  { transform: translateX(38vw); opacity: 0.6; }
  60%  { transform: translateX(38vw); opacity: 0; }
  100% { transform: translateX(38vw); opacity: 0; }
}

.char--shooter1 .char__body {
  animation: runBounce 0.35s ease-in-out infinite;
}

@keyframes runBounce {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-5px) rotate(-3deg); }
}

/* 6. Shooter 2 — charges from right, stops at 60% */
.char--shooter2 {
  top: 60%;
  right: -5%;
  animation: charge2 20s ease-in-out infinite;
  animation-delay: 12s;
}

@keyframes charge2 {
  0%   { transform: translateX(0) scaleX(-1); opacity: 0; }
  5%   { opacity: 0.6; }
  40%  { transform: translateX(-38vw) scaleX(-1); opacity: 0.6; }
  55%  { transform: translateX(-38vw) scaleX(-1); opacity: 0.6; }
  60%  { transform: translateX(-38vw) scaleX(-1); opacity: 0; }
  100% { transform: translateX(-38vw) scaleX(-1); opacity: 0; }
}

.char--shooter2 .char__body {
  animation: runBounce 0.35s ease-in-out infinite;
}

/* 7. Butterfly — gentle floating path */
.char--butterfly {
  top: 30%;
  left: 10%;
  animation: butterflyPath 30s ease-in-out infinite;
  animation-delay: 6s;
}
.char--butterfly .char__body {
  font-size: 1.5rem;
  animation: butterflyWing 0.8s ease-in-out infinite;
}

@keyframes butterflyPath {
  0%   { transform: translate(0, 0); opacity: 0; }
  5%   { opacity: 0.5; }
  25%  { transform: translate(20vw, -8vh); }
  50%  { transform: translate(50vw, 5vh); }
  75%  { transform: translate(70vw, -12vh); }
  95%  { opacity: 0.5; }
  100% { transform: translate(85vw, 0); opacity: 0; }
}

@keyframes butterflyWing {
  0%, 100% { transform: scaleX(1) rotate(-5deg); }
  50% { transform: scaleX(0.7) rotate(5deg); }
}

/* 8. Rocket — shoots upward from bottom */
.char--rocket {
  bottom: 5%;
  left: 75%;
  animation: rocketLaunch 15s ease-in infinite;
  animation-delay: 20s;
}
.char--rocket .char__body {
  font-size: 2rem;
  transform: rotate(-45deg);
}

@keyframes rocketLaunch {
  0%   { transform: translateY(0); opacity: 0; }
  5%   { opacity: 0.6; }
  80%  { opacity: 0.5; }
  100% { transform: translateY(-120vh); opacity: 0; }
}

@media (max-width: 768px) {
  .char__body { font-size: 1.4rem; }
  .char--astro .char__body { font-size: 1.5rem; }
  .char { opacity: 0.35; }
}


/* --- Skills Section --- */
.skills-section {
  padding: var(--space-20) var(--space-8);
  position: relative;
}

.skills-section__title {
  text-align: center;
  font-size: var(--text-3xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-12);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-6);
  max-width: 1100px;
  margin: 0 auto;
}

.skill-card {
  padding: var(--space-6);
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  transition: all 400ms cubic-bezier(0.34,1.56,0.64,1);
  cursor: default;
  opacity: 0;
}

.skill-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--primary-500);
  box-shadow: 0 12px 40px rgba(108,99,255,0.2), 0 0 0 1px rgba(108,99,255,0.1);
}

.skill-card:hover .skill-card__icon {
  transform: scale(1.15) rotate(-3deg);
  transition: transform 400ms cubic-bezier(0.34,1.56,0.64,1);
}

.skill-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: var(--space-4);
}

.skill-card__name {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-2);
}

.skill-card__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  line-height: 1.6;
}

/* --- Social Links Section --- */
.social-section {
  padding: var(--space-16) var(--space-8);
  text-align: center;
}

.social-links {
  display: flex;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.social-link {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-secondary);
  transition: all var(--transition-base);
}

.social-link:hover {
  background: var(--primary-500);
  color: white;
  border-color: var(--primary-500);
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(108, 99, 255, 0.3);
}

/* --- Weather Widget (Landing) --- */
.weather-widget {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  padding: var(--space-3) var(--space-4);
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  z-index: 10;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  transition: all var(--transition-base);
}

.weather-widget:hover {
  border-color: var(--border-strong);
}

.weather-widget__temp {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  color: var(--text-primary);
}

.weather-widget__icon {
  display: inline-flex;
  align-items: center;
  color: var(--primary-400);
}

/* --- Footer --- */
.landing-footer {
  padding: var(--space-8);
  text-align: center;
  border-top: 1px solid var(--border-subtle);
  color: var(--text-tertiary);
  font-size: var(--text-sm);
}

/* --- Responsive: Tablet (≤ 900px) --- */
@media (max-width: 900px) {
  .hero__container {
    flex-direction: column-reverse;
    text-align: center;
    gap: var(--space-8);
  }

  .hero__visual { flex: none; }
  .hero__avatar-wrapper { width: 220px; height: 220px; }
  .hero__subtitle { max-width: 100%; }
  .hero__actions { justify-content: center; flex-wrap: wrap; }
  .hero__float-badges { display: none; }

  .skills-section { padding: var(--space-12) var(--space-4); }
  .skills-section__title { font-size: var(--text-2xl); margin-bottom: var(--space-8); }
  .skills-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }

  .social-section { padding: var(--space-10) var(--space-4); }
  .social-links { flex-wrap: wrap; }

  .weather-widget {
    top: var(--space-3);
    right: var(--space-3);
    padding: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    gap: var(--space-2);
  }
  .weather-widget__temp { font-size: var(--text-lg); }
}

/* --- Responsive: Mobile (≤ 600px) --- */
@media (max-width: 600px) {
  .landing { overflow-x: hidden; }

  .hero {
    padding: var(--space-4) var(--space-3);
    min-height: auto;
    padding-top: calc(var(--space-16) + var(--space-4));
  }

  .hero__container {
    gap: var(--space-6);
  }

  .hero__title {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
  }

  .hero__subtitle {
    font-size: var(--text-base);
    line-height: 1.6;
  }

  .hero__greeting {
    font-size: var(--text-xs);
    padding: var(--space-1) var(--space-3);
    margin-bottom: var(--space-4);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-3);
  }

  .hero__btn {
    width: 100%;
    justify-content: center;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    height: 46px;
  }

  .hero__avatar-wrapper { width: 180px; height: 180px; }
  .hero__avatar-placeholder { font-size: 3.5rem; }

  /* Weather widget — compact on mobile */
  .weather-widget {
    position: relative;
    top: auto;
    right: auto;
    margin: var(--space-3) auto 0;
    width: fit-content;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    border-radius: var(--radius-full);
  }

  /* Skills */
  .skills-section { padding: var(--space-8) var(--space-3); }
  .skills-section__title { font-size: var(--text-xl); margin-bottom: var(--space-6); }
  .skills-grid { grid-template-columns: 1fr; gap: var(--space-3); }
  .skill-card { padding: var(--space-4); }
  .skill-card__icon { width: 40px; height: 40px; font-size: 1.2rem; margin-bottom: var(--space-3); }

  /* Social */
  .social-section { padding: var(--space-8) var(--space-3); }
  .social-section .skills-section__title { font-size: var(--text-xl); }
  .social-links { gap: var(--space-3); }
  .social-link { width: 44px; height: 44px; }

  /* Characters — smaller and less visible on mobile */
  .characters { display: none; }

  /* Footer */
  .landing-footer { padding: var(--space-6) var(--space-3); }
}

/* --- Responsive: Small Mobile (≤ 400px) --- */
@media (max-width: 400px) {
  .hero__title { font-size: 1.6rem; }
  .hero__subtitle { font-size: var(--text-sm); }
  .hero__avatar-wrapper { width: 150px; height: 150px; }
  .hero__avatar-placeholder { font-size: 3rem; }
  .weather-widget { font-size: 11px; gap: var(--space-2); }
}

/* --- Auth Pages --- */
.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.auth-card {
  width: 100%;
  max-width: 420px;
  padding: var(--space-8);
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  animation: scaleIn 400ms ease forwards;
}

.auth-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-8);
}

.auth-card__title {
  text-align: center;
  font-size: var(--text-2xl);
  font-weight: var(--font-bold);
  margin-bottom: var(--space-2);
}

.auth-card__subtitle {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-secondary);
  margin-bottom: var(--space-8);
}

.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.auth-form .input {
  height: 48px;
}