/* ===================== BASE ===================== */
::selection {
  background-color: rgba(123, 208, 255, 0.2);
  color: #7bd0ff;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

html {
  scroll-behavior: smooth;
}

/* ===================== SCROLL REVEAL ANIMATIONS ===================== */
.reveal-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger children */
.reveal-up:nth-child(2) { transition-delay: 0.1s; }
.reveal-up:nth-child(3) { transition-delay: 0.2s; }
.reveal-up:nth-child(4) { transition-delay: 0.3s; }
.reveal-up:nth-child(5) { transition-delay: 0.4s; }
.reveal-up:nth-child(6) { transition-delay: 0.5s; }

/* ===================== NAVBAR ===================== */
#navbar {
  transition: background-color 0.5s, box-shadow 0.5s, padding 0.3s;
}

#navbar.scrolled {
  box-shadow: 0 1px 40px rgba(0, 0, 0, 0.4);
}

/* Active nav link */
.nav-link.active {
  color: #7bd0ff;
  font-weight: 600;
}

/* ===================== TIMELINE ===================== */
.timeline-item {
  position: relative;
}

.timeline-item .flex-1 {
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.timeline-item:hover .flex-1 {
  transform: translateY(-2px);
}

/* ===================== SPEAKING CARDS ===================== */
.speaking-card {
  transition: border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.speaking-card:hover {
  transform: translateY(-3px);
}

.speaking-card.hidden-card {
  display: none;
}

/* ===================== FILTER BUTTONS ===================== */
.filter-btn {
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-btn.active {
  background-color: rgba(123, 208, 255, 0.15) !important;
  color: #7bd0ff !important;
  border-color: #7bd0ff !important;
}

/* ===================== COUNTER ANIMATION ===================== */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.counter.animated {
  animation: countUp 0.4s ease-out forwards;
}

/* ===================== MOBILE MENU ===================== */
#mobile-menu {
  transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

#mobile-menu.open {
  max-height: 400px;
}

/* ===================== FORM STYLES ===================== */
input:focus,
textarea:focus {
  outline: none;
}

/* ===================== SMOOTH SCROLL OFFSET ===================== */
section[id] {
  scroll-margin-top: 80px;
}

/* ===================== LOADING ANIMATION ===================== */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #060e20;
  transition: opacity 0.6s ease, visibility 0.6s ease;
}

.page-loader.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-text {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: #7bd0ff;
  letter-spacing: 0.2em;
  opacity: 0;
  animation: loaderFade 1.2s ease forwards;
}

@keyframes loaderFade {
  0% { opacity: 0; transform: translateY(10px); }
  50% { opacity: 1; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ===================== HERO PHOTO THEME SWAP ===================== */
/* Dark (default): grayscale — hide color */
.hero-photo-color { display: none; }

/* Light: color — hide grayscale */
html:not(.dark) .hero-photo-bw   { display: none; }
html:not(.dark) .hero-photo-color { display: block; }

/* ===================== LIGHT MODE OVERRIDES ===================== */
/* Applied when html does NOT have the 'dark' class */
/* Greige/slate palette */
html:not(.dark) ::selection {
  background-color: #5a7684;
  color: #ffffff;
}

html:not(.dark) body {
  background-color: #f2f1ed;
  color: #2d3032;
}

/* Surface backgrounds */
html:not(.dark) .bg-surface                   { background-color: #f2f1ed; }
html:not(.dark) .bg-surface-container-lowest  { background-color: #f8f7f5; }
html:not(.dark) .bg-surface-container-low     { background-color: #e8e7e2; }
html:not(.dark) .bg-surface-container         { background-color: #dddad4; }
html:not(.dark) .bg-surface-container-high    { background-color: #d2cfc9; }
html:not(.dark) .bg-surface-container-highest { background-color: #c8c4be; }

/* Text */
html:not(.dark) .text-on-surface             { color: #2d3032; }
html:not(.dark) .text-on-surface-variant     { color: #5c6165; }
html:not(.dark) .text-on-secondary-container { color: #5c6165; }

/* Primary accent — muted slate blue replaces bright #7bd0ff */
html:not(.dark) .text-primary                { color: #5a7684; }
html:not(.dark) .border-primary              { border-color: #5a7684; }
html:not(.dark) .bg-primary                  { background-color: #5a7684; }
html:not(.dark) .from-primary                { --tw-gradient-from: #5a7684 var(--tw-gradient-from-position); }
html:not(.dark) .to-on-primary-container     { --tw-gradient-to: #7f8c7c var(--tw-gradient-to-position); }

/* Borders */
html:not(.dark) .border-outline-variant\/20  { border-color: rgba(176, 182, 186, 0.2); }
html:not(.dark) .border-outline-variant\/30  { border-color: rgba(176, 182, 186, 0.3); }
html:not(.dark) .border-outline-variant\/40  { border-color: rgba(176, 182, 186, 0.4); }

/* Navbar & mobile menu */
html:not(.dark) #navbar      { background-color: rgba(242, 241, 237, 0.85); }
html:not(.dark) #mobile-menu { background-color: #f2f1ed; }

/* Page loader */
html:not(.dark) .page-loader { background: #f2f1ed; }
html:not(.dark) .loader-text { color: #5a7684; }

/* Timeline dot ring */
html:not(.dark) .ring-surface { --tw-ring-color: #f2f1ed; }

/* Secondary color — dark theme is #b9c8de (near-white), invisible on light bg */
html:not(.dark) .text-secondary              { color: #5a7684; }
html:not(.dark) .bg-secondary-container\/30  { background-color: rgba(90, 118, 132, 0.12); }

/* Active nav link */
html:not(.dark) .nav-link.active { color: #5a7684; }

/* Filter button active state */
html:not(.dark) .filter-btn.active {
  background-color: rgba(90, 118, 132, 0.15) !important;
  color: #5a7684 !important;
  border-color: #5a7684 !important;
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 768px) {
  .speaking-card {
    transition-delay: 0s !important;
  }
}