/* =============================================================
   INL261 — AI-Assisted Animated Lecturer Portfolio Website
   style.css — Main stylesheet
   Belgium Campus iTversity

   TABLE OF CONTENTS
   -----------------
   1.  Design Tokens (custom properties)
   2.  Base / Reset
   3.  Typography (system fonts — no CDN)
   4.  Layout utilities
   5.  Navigation (sticky header, hamburger)
   6.  Hero section (particles, avatar, name reveal)
   7.  About / Profile section (glow card, typing effect, badges)
   8.  Modules section (flip cards, scroll reveal)
   9.  Fun Facts section (reveal cards)
   10. Quotes section (carousel, fade transitions)
   11. Contact section (CTA pulse, info cards)
   12. Footer
   13. Utility / helper classes
   14. Responsive overrides
   15. Reduced-motion media query
============================================================= */


/* =============================================================
   1. DESIGN TOKENS
   CSS custom properties for colours, spacing, typography, radius.
   Edit PRIMARY colours here to re-theme the entire site.
============================================================= */
:root {
  /* -- Colour palette (teal/dark academic theme) ----------- */
  /* Primary brand colours — REPLACE if different branding is needed */
  --color-primary:           #01696F;  /* Belgium Campus teal */
  --color-primary-hover:     #0C4E54;  /* Deeper teal */
  --color-primary-active:    #0f3638;
  --color-primary-highlight: #1a5f65;
  --color-primary-glow:      rgba(1, 105, 111, 0.35);

  /* Accent colour for highlights */
  --color-accent:    #4fc3c9;
  --color-accent-2:  #f0c040;  /* Gold — used for graduation cap, badges */

  /* Surfaces (dark theme as default — see [data-theme="light"] below) */
  --color-bg:              #0d1b1e;
  --color-surface:         #112326;
  --color-surface-2:       #163030;
  --color-surface-offset:  #1a3a3e;
  --color-divider:         #1e3e42;
  --color-border:          #264d52;

  /* Text */
  --color-text:        #d6e8ea;
  --color-text-muted:  #7fa8ac;
  --color-text-faint:  #4a7478;
  --color-text-inverse:#0d1b1e;

  /* Status colours */
  --color-success: #4caf7d;
  --color-warning: #f0a832;
  --color-error:   #e05c7c;

  /* -- Typography ----------------------------------------- */
  /* Using system font stacks — no external CDN required */
  --font-display: 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'Consolas', 'Courier New', monospace;

  /* Fluid type scale — clamp(min, preferred, max) */
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-hero: clamp(2.5rem,   1rem    + 5vw,    5.5rem);

  /* -- Spacing (4px base unit) ----------------------------- */
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* -- Radius --------------------------------------------- */
  --radius-sm:   0.375rem;
  --radius-md:   0.5rem;
  --radius-lg:   0.75rem;
  --radius-xl:   1rem;
  --radius-2xl:  1.5rem;
  --radius-full: 9999px;

  /* -- Shadows -------------------------------------------- */
  --shadow-sm:  0 1px 3px  rgba(0,0,0,0.3);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.4);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.5);
  --shadow-glow:0 0 30px var(--color-primary-glow);

  /* -- Transitions ---------------------------------------- */
  --transition-fast:        180ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-normal:      300ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-slow:        500ms cubic-bezier(0.16, 1, 0.3, 1);
  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* -- Layout --------------------------------------------- */
  --content-narrow:  640px;
  --content-default: 960px;
  --content-wide:    1200px;

  /* -- Nav height (used for scroll-padding) --------------- */
  --nav-height: 64px;
}

/* LIGHT MODE overrides — toggled by data-theme="light" on <html> */
[data-theme="light"] {
  --color-bg:              #f5fafa;
  --color-surface:         #eaf4f5;
  --color-surface-2:       #deeef0;
  --color-surface-offset:  #d0e8ea;
  --color-divider:         #b8d8db;
  --color-border:          #9ac8cc;
  --color-text:            #0d2426;
  --color-text-muted:      #3a6a70;
  --color-text-faint:      #7aa8ac;
  --color-text-inverse:    #f5fafa;
  --color-primary-glow:    rgba(1, 105, 111, 0.2);
  --shadow-sm:  0 1px 3px  rgba(0,0,0,0.1);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.12);
  --shadow-lg:  0 12px 40px rgba(0,0,0,0.15);
}

/* System preference — users who haven't clicked the toggle yet */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    --color-bg:              #f5fafa;
    --color-surface:         #eaf4f5;
    --color-surface-2:       #deeef0;
    --color-surface-offset:  #d0e8ea;
    --color-divider:         #b8d8db;
    --color-border:          #9ac8cc;
    --color-text:            #0d2426;
    --color-text-muted:      #3a6a70;
    --color-text-faint:      #7aa8ac;
    --color-text-inverse:    #f5fafa;
    --color-primary-glow:    rgba(1, 105, 111, 0.2);
  }
}


/* =============================================================
   2. BASE / RESET
   Minimal reset for consistent cross-browser rendering.
============================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-height);
}

body {
  min-height: 100dvh;
  line-height: 1.6;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

ul[role="list"], ol[role="list"] {
  list-style: none;
}

input, button, textarea, select {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  line-height: 1.15;
  font-family: var(--font-display);
}

p, li, figcaption {
  text-wrap: pretty;
  max-width: 72ch;
}

a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

/* Selection highlight in brand colour */
::selection {
  background: rgba(1, 105, 111, 0.3);
  color: var(--color-text);
}

/* Focus ring — keyboard users */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}


/* =============================================================
   3. TYPOGRAPHY
   Using system font stacks throughout (no CDN required).
   Students can add a Google Font import if desired.
============================================================= */
.section-eyebrow {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
}

.section-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-4);
}

.section-desc {
  font-size: var(--text-base);
  color: var(--color-text-muted);
  max-width: 60ch;
  margin: 0 auto;
}


/* =============================================================
   4. LAYOUT UTILITIES
============================================================= */
.section {
  padding-block: clamp(var(--space-12), 8vw, var(--space-24));
}

.section-container {
  width: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
}

.section-header {
  text-align: center;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-16));
}

/* Alternating section backgrounds for visual rhythm */
.about-section   { background-color: var(--color-surface); }
.modules-section { background-color: var(--color-bg); }
.facts-section   { background-color: var(--color-surface); }
.quotes-section  { background-color: var(--color-bg); }
.contact-section { background-color: var(--color-surface); }


/* =============================================================
   5. NAVIGATION
   Sticky top nav with glass-morphism effect.
   Mobile: hamburger menu slides in from top.
============================================================= */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  background: rgba(13, 27, 30, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--color-divider);
  transition: box-shadow var(--transition-normal), background var(--transition-normal);
}

[data-theme="light"] .site-header {
  background: rgba(245, 250, 250, 0.88);
}

/* When scrolled — add depth shadow */
.site-header.is-scrolled {
  box-shadow: var(--shadow-md);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 4vw, var(--space-10));
  gap: var(--space-4);
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--text-sm);
  flex-shrink: 0;
  transition: opacity var(--transition-fast);
}
.nav-logo:hover { opacity: 0.8; }
.logo-svg { flex-shrink: 0; }
.nav-logo-text { display: none; }
@media (min-width: 480px) {
  .nav-logo-text { display: block; }
}

/* Desktop nav links */
.nav-links {
  display: none;
  align-items: center;
  gap: var(--space-6);
  list-style: none;
}
@media (min-width: 768px) {
  .nav-links { display: flex; }
}

.nav-link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: var(--space-1) 0;
  position: relative;
  transition: color var(--transition-fast);
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width var(--transition-normal);
}
.nav-link:hover,
.nav-link.is-active {
  color: var(--color-accent);
}
.nav-link:hover::after,
.nav-link.is-active::after {
  width: 100%;
}

/* Right controls row */
.nav-controls {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* Icon button base */
.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-lg);
  background: transparent;
  border: 1px solid var(--color-divider);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.icon-btn:hover {
  background: var(--color-surface-offset);
  color: var(--color-text);
  border-color: var(--color-border);
}

/* Hamburger button — mobile only */
.hamburger {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-lg);
}
@media (min-width: 768px) {
  .hamburger { display: none; }
}

.hamburger-bar {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--color-text-muted);
  border-radius: var(--radius-full);
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  pointer-events: none;
}
/* Animate hamburger to X when open */
.hamburger.is-open .hamburger-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.is-open .hamburger-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger.is-open .hamburger-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  top: var(--nav-height);
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
  padding: var(--space-6);
  transform: translateY(-110%);
  opacity: 0;
  pointer-events: none;
  transition: transform var(--transition-normal), opacity var(--transition-normal);
  z-index: 90;
}
.mobile-menu.is-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: all;
}

.mobile-nav-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.mobile-nav-link {
  display: block;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), color var(--transition-fast);
}
.mobile-nav-link:hover {
  background: var(--color-surface-offset);
  color: var(--color-accent);
}


/* =============================================================
   6. HERO SECTION
   Full-screen banner with particle canvas, animated name,
   illustrated avatar, and scroll-down indicator.
============================================================= */
.hero {
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(145deg, #061518 0%, #0d2428 50%, #0a1e22 100%);
}
[data-theme="light"] .hero {
  background: linear-gradient(145deg, #e0f5f6 0%, #c0e8ea 50%, #d5eff0 100%);
}

/* Canvas covers the full hero area — particles are drawn on it via JS */
.particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Radial gradient overlay for depth */
.hero-gradient {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 50% 50%,
    rgba(1, 105, 111, 0.08) 0%,
    transparent 70%);
  pointer-events: none;
}

/* Main content wrapper */
.hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-8);
  padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
  text-align: center;
  max-width: var(--content-wide);
  padding-block: var(--space-20);
}

@media (min-width: 900px) {
  .hero-content {
    flex-direction: row;
    text-align: left;
    gap: var(--space-16);
    align-items: center;
    justify-content: center;
  }
}

/* ---- Avatar ---- */
.avatar-wrapper {
  position: relative;
  flex-shrink: 0;
  width: clamp(160px, 25vw, 240px);
}

.avatar-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 24px rgba(1, 105, 111, 0.4));
  animation: avatar-float 4s ease-in-out infinite;
}

/* Gentle floating animation for the avatar */
@keyframes avatar-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-12px); }
}

/* Pulsing ring around the avatar */
.avatar-ring {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 2px solid var(--color-primary);
  opacity: 0.5;
  animation: ring-pulse 2.5s ease-out infinite;
}
.avatar-ring::after {
  content: '';
  position: absolute;
  inset: -12px;
  border-radius: 50%;
  border: 1px solid var(--color-accent);
  opacity: 0.25;
  animation: ring-pulse 2.5s ease-out 0.8s infinite;
}

@keyframes ring-pulse {
  0%   { transform: scale(0.9); opacity: 0.5; }
  50%  { transform: scale(1.05); opacity: 0.2; }
  100% { transform: scale(0.9); opacity: 0.5; }
}

/* ---- Hero text ---- */
.hero-text {
  max-width: 580px;
}

.hero-subtitle--top {
  font-size: var(--text-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: var(--space-3);
  /* Fade in with delay */
  animation: fade-up 0.8s var(--ease-out) 0.2s both;
}

/* Hero name — letters are animated individually via JS */
.hero-name {
  font-size: var(--text-hero);
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.05;
  margin-bottom: var(--space-4);
  /* Gradient text effect */
  background: linear-gradient(135deg, var(--color-text) 30%, var(--color-accent) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Each span letter injected by JS */
.hero-name .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: letter-in 0.5s var(--ease-out) both;
}

@keyframes letter-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Placeholder shown before JS runs */
.name-placeholder {
  /* JS replaces this with individual .letter spans */
  opacity: 1;
}

.hero-role {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
  animation: fade-up 0.8s var(--ease-out) 1.2s both;
}

.hero-dept {
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-bottom: var(--space-8);
  animation: fade-up 0.8s var(--ease-out) 1.4s both;
}

/* CTA button group */
.hero-cta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  justify-content: center;
  animation: fade-up 0.8s var(--ease-out) 1.6s both;
}
@media (min-width: 900px) {
  .hero-cta-group { justify-content: flex-start; }
}

/* ---- Scroll indicator ---- */
.scroll-indicator {
  position: absolute;
  bottom: var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-text-faint);
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  animation: fade-up 1s var(--ease-out) 2s both;
}

.scroll-arrow {
  animation: scroll-bounce 1.8s ease-in-out infinite;
}

@keyframes scroll-bounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50%       { transform: translateY(8px); opacity: 1; }
}


/* =============================================================
   7. ABOUT / PROFILE SECTION
   Profile card with glow border, typing effect, badges grid.
============================================================= */
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  align-items: start;
}
@media (min-width: 900px) {
  .about-grid {
    grid-template-columns: 1fr 1.4fr;
  }
}

/* ---- Glowing profile card ---- */
.profile-card {
  background: var(--color-surface-2, var(--color-surface));
  border-radius: var(--radius-2xl);
  padding: var(--space-8);
  text-align: center;
  position: relative;
  /* Animated gradient border using @property trick */
  border: 2px solid transparent;
  background-clip: padding-box;
  box-shadow: var(--shadow-md), 0 0 40px rgba(1, 105, 111, 0.1);
}

/* Glowing border animation */
.glow-card {
  position: relative;
  z-index: 0;
  overflow: hidden; /* Contains the spinning gradient to the card boundary */
}
.glow-card::before {
  content: '';
  position: absolute;
  inset: -60%;           /* Oversized so rotation covers all edges */
  border-radius: 0;      /* Full rectangle — contained by overflow:hidden above */
  background: conic-gradient(
    from 0deg,
    var(--color-primary),
    var(--color-accent),
    #4fc3c9,
    var(--color-primary)
  );
  z-index: -1;
  animation: glow-spin 4s linear infinite;
}
.glow-card::after {
  content: '';
  position: absolute;
  inset: 2px;            /* 2px inset creates the border width */
  border-radius: calc(var(--radius-2xl) - 2px);
  background: var(--color-surface);
  z-index: -1;
}

@keyframes glow-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.profile-card__avatar {
  width: 80px;
  height: 80px;
  margin: 0 auto var(--space-4);
  border-radius: 50%;
  overflow: hidden;
}

.profile-card__name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}

/* Typing effect area */
.profile-card__tagline {
  font-size: var(--text-base);
  color: var(--color-accent);
  font-weight: 600;
  min-height: 1.6em;
  margin-bottom: var(--space-4);
}

/* Blinking cursor */
.typing-cursor {
  display: inline-block;
  color: var(--color-primary);
  animation: blink-cursor 0.85s step-end infinite;
  margin-left: 1px;
}
@keyframes blink-cursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.profile-divider {
  border: none;
  border-top: 1px solid var(--color-divider);
  margin-block: var(--space-5);
}

.profile-card__bio {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.7;
  text-align: left;
  margin-bottom: var(--space-6);
  max-width: 100%;
}

/* Qualification chips */
.profile-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  list-style: none;
}

.chip {
  display: inline-block;
  padding: var(--space-1) var(--space-3);
  background: var(--color-surface-offset, rgba(1,105,111,0.15));
  color: var(--color-accent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* ---- Badges panel ---- */
.badges-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.badges-title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--space-4);
}

.badge-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast);
}
.badge-item:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
}

.badge-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.badge-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.badge-desc {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  line-height: 1.5;
  max-width: 100%;
}


/* =============================================================
   8. MODULES SECTION — Flip cards
   Cards flip on :hover (desktop) or :focus (keyboard).
   Also toggled via .is-flipped class (for touch/mobile via JS).
============================================================= */
.modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
}

/* 3D perspective wrapper */
.module-card {
  perspective: 1200px;
  cursor: pointer;
  height: 260px;
  border-radius: var(--radius-xl);
}

/* Inner — this is what rotates */
.module-card__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style: preserve-3d;
}

/* Flip on hover (desktop) or .is-flipped class (JS for touch) */
.module-card:hover .module-card__inner,
.module-card:focus .module-card__inner,
.module-card.is-flipped .module-card__inner {
  transform: rotateY(180deg);
}

/* Front and back faces — shared base */
.module-card__front,
.module-card__back {
  position: absolute;
  inset: 0;
  padding: var(--space-6);
  border-radius: var(--radius-xl);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid var(--color-border);
}

/* Front face */
.module-card__front {
  background: linear-gradient(145deg, var(--color-surface), var(--color-surface-2, var(--color-surface)));
  align-items: flex-start;
}

/* Back face — rotated 180° behind the front */
.module-card__back {
  background: linear-gradient(145deg, var(--color-primary-hover), var(--color-primary));
  transform: rotateY(180deg);
  color: #fff;
  border-color: transparent;
}

.module-card__code {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--color-accent);
  background: rgba(79, 195, 201, 0.12);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  display: inline-block;
}
.module-card__code--back {
  color: rgba(255,255,255,0.7);
  background: rgba(255,255,255,0.15);
}

.module-card__name {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-text);
  flex: 1;
  display: flex;
  align-items: center;
  margin-block: var(--space-3);
}

.module-card__hint {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
}

.module-card__icon {
  font-size: 2rem;
  line-height: 1;
  align-self: flex-end;
  opacity: 0.6;
}

.module-card__desc {
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
  flex: 1;
  margin-top: var(--space-3);
  max-width: 100%;
}

.module-card__meta {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.8);
  margin-top: var(--space-3);
}


/* =============================================================
   9. FUN FACTS SECTION — Reveal cards
   JS adds .is-revealed class when clicked.
   CSS handles the visual transition between front/back.
============================================================= */
.facts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--space-5);
}

.fact-card {
  position: relative;
  min-height: 200px;
  border-radius: var(--radius-xl);
  border: 2px solid var(--color-border);
  background: var(--color-surface);
  cursor: pointer;
  overflow: hidden;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  text-align: center;
}
.fact-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md), 0 0 20px rgba(1,105,111,0.15);
}

/* Front face — always visible until revealed */
.fact-card__front,
.fact-card__back {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-6);
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.fact-card__front {
  opacity: 1;
  transform: translateY(0);
}
.fact-card__back {
  opacity: 0;
  transform: translateY(16px);
  background: linear-gradient(145deg, var(--color-surface-offset, #1a3a3e), var(--color-surface));
}

/* Revealed state — JS toggles this class */
.fact-card.is-revealed .fact-card__front {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}
.fact-card.is-revealed .fact-card__back {
  opacity: 1;
  transform: translateY(0);
}
.fact-card.is-revealed {
  border-color: var(--color-accent);
  background: var(--color-surface-2, var(--color-surface));
}

.fact-icon {
  font-size: 3rem;
  line-height: 1;
}
.fact-reveal-icon {
  font-size: 2rem;
  line-height: 1;
}

.fact-label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}

.fact-tap-hint {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
}

.fact-card__back p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 100%;
  text-wrap: pretty;
}


/* =============================================================
   10. QUOTES SECTION — Auto-rotating carousel
   JS adds .is-active and .is-exiting classes.
   CSS handles the fade in/fade out transitions.
============================================================= */
.quotes-carousel {
  position: relative;
  max-width: 820px;
  margin-inline: auto;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.quote-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-8);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease-out);
  gap: var(--space-6);
}

/* Active slide — visible */
.quote-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative;
}

/* Exiting slide — fades out */
.quote-slide.is-exiting {
  opacity: 0;
  position: absolute;
}

.quote-text {
  font-size: var(--text-lg);
  font-style: italic;
  font-weight: 500;
  color: var(--color-text);
  line-height: 1.7;
  max-width: 70ch;
  position: relative;
}

/* Large decorative opening quote mark */
.quote-text::before {
  content: '\201C';
  position: absolute;
  top: -0.3em;
  left: -0.4em;
  font-size: 4em;
  color: var(--color-primary);
  opacity: 0.2;
  font-style: normal;
  line-height: 1;
  pointer-events: none;
}

.quote-attribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
}

.quote-attribution cite {
  font-style: normal;
  font-weight: 600;
  color: var(--color-accent);
  font-size: var(--text-sm);
}

.quote-context {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  font-style: italic;
}

/* Carousel dots */
.carousel-dots {
  position: absolute;
  bottom: -var(--space-8);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-6);
  bottom: 0;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-border);
  border: none;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast), width var(--transition-normal);
  padding: 0;
}
.carousel-dot.is-active {
  background: var(--color-primary);
  width: 24px;
}
.carousel-dot:hover {
  background: var(--color-accent);
}

/* Prev/next buttons */
.carousel-controls {
  position: absolute;
  inset: auto 0 auto;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  top: 50%;
  transform: translateY(-50%);
  padding-inline: var(--space-2);
}

.carousel-btn {
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  transition: background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}
.carousel-btn:hover {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
  transform: scale(1.1);
}


/* =============================================================
   11. CONTACT SECTION
   Three info cards + animated CTA button with pulse/glow.
============================================================= */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-16);
}

.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-8);
  background: var(--color-surface-2, var(--color-surface));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  transition: box-shadow var(--transition-normal), border-color var(--transition-fast), transform var(--transition-fast);
}
.contact-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-primary);
  transform: translateY(-3px);
}

.contact-card__icon {
  font-size: 2rem;
  line-height: 1;
}

.contact-card__title {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text);
}

.contact-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.contact-card__note {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  margin-top: auto;
}

.contact-card__link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent);
  text-decoration: none;
  transition: opacity var(--transition-fast);
  margin-top: auto;
}
.contact-card__link:hover { opacity: 0.75; text-decoration: underline; }

/* CTA wrapper — centred */
.contact-cta-wrapper {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
}

.contact-cta-text {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  font-weight: 500;
}


/* =============================================================
   12. BUTTONS
   .btn             — base button style
   .btn--primary    — filled primary
   .btn--ghost      — outlined ghost
   .btn--cta        — large filled CTA
   .btn--pulse      — adds pulse glow animation
============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    box-shadow var(--transition-fast),
    transform var(--transition-fast);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  box-shadow: 0 6px 24px rgba(1,105,111,0.4);
}

.btn--ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}
.btn--ghost:hover {
  color: var(--color-text);
  border-color: var(--color-primary);
  background: rgba(1,105,111,0.08);
}

.btn--cta {
  padding: var(--space-4) var(--space-10);
  font-size: var(--text-base);
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn--cta:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Pulse/glow animation for the main CTA button */
.btn--pulse {
  position: relative;
}
.btn--pulse::before,
.btn--pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--color-primary);
  z-index: -1;
  animation: btn-pulse 2.2s ease-out infinite;
}
.btn--pulse::after {
  animation-delay: 1.1s;
}

@keyframes btn-pulse {
  0%   { transform: scale(1);    opacity: 0.6; }
  70%  { transform: scale(1.35); opacity: 0; }
  100% { transform: scale(1.35); opacity: 0; }
}


/* =============================================================
   13. FOOTER
============================================================= */
.site-footer {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  padding-block: var(--space-8);
}

.footer-container {
  max-width: var(--content-wide);
  margin-inline: auto;
  padding-inline: clamp(var(--space-4), 5vw, var(--space-12));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  text-align: center;
}

.footer-text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  max-width: 100%;
}

.footer-credit {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  max-width: 100%;
}

.footer-nav {
  display: flex;
  gap: var(--space-5);
  flex-wrap: wrap;
  justify-content: center;
}
.footer-nav a {
  font-size: var(--text-xs);
  color: var(--color-text-faint);
  text-decoration: none;
  transition: color var(--transition-fast);
}
.footer-nav a:hover {
  color: var(--color-accent);
}


/* =============================================================
   14. UTILITY / HELPER CLASSES
============================================================= */

/* Scroll-reveal: elements start invisible, JS adds .is-visible */
.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s var(--ease-out), transform 0.65s var(--ease-out);
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Screen-reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border-width: 0;
}

/* Keyframe: generic fade-up (used by hero text elements) */
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =============================================================
   15. RESPONSIVE OVERRIDES
   Mobile-first approach — overrides above add desktop layout.
   These rules handle edge cases at specific breakpoints.
============================================================= */

/* Small mobile: shrink padding */
@media (max-width: 400px) {
  .hero-cta-group {
    flex-direction: column;
    width: 100%;
  }
  .btn { width: 100%; justify-content: center; }
  .badges-grid { grid-template-columns: 1fr 1fr; }
}

/* Medium screens: two-column contact grid */
@media (min-width: 600px) {
  .facts-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Large screens */
@media (min-width: 1024px) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}


/* =============================================================
   16. REDUCED-MOTION
   Disables all animations for users who prefer no motion.
   This is a WCAG 2.1 accessibility requirement.
============================================================= */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Ensure scroll-reveal elements are visible without animation */
  .fade-in {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Ensure hero name letters are visible */
  .hero-name .letter {
    opacity: 1 !important;
    transform: none !important;
  }
}