:root {
  /* Computated variable for the whole page's background */
  --current-background: var(--hero-background-color);

  /* Brand gradient — used sparingly as an accent (underline, indicator) */
  --hero-gradient: linear-gradient(
  90deg, #10326f, #1a4ba3, #0c53aa, #1a4ba3, #10326f);
  /* Airy hero field: pale blue so the colored ovals read through */
  --hero-background: linear-gradient(135deg, #EAF2FF 0%, #D8E7FF 100%);
  --hero-background-color: #E3EEFF;
  --background-color: #ECECEC;

  --surface: rgba(255, 255, 255, 0.55);
  --popup-background: rgba(255, 255, 255, 0.55);

  --info-popup-background: rgba(26, 75, 163, 0.12);

  /* Text colors (light theme) */
  --ink: #16233B;
  --ink-2: #46536B;
  --text-color-primary: var(--ink);
  --text-color-secondary: var(--ink-2);
  --text-color-accent: #1a4ba3;

  /* Radii */
  --radius-panel: 1.25rem;
  --radius-pill: 9999px;

  /* Elevation: exactly two levels */
  --shadow-soft: 0 2px 8px rgba(15, 30, 60, 0.08);
  --shadow-raised:
    0 16px 40px rgba(15, 30, 60, 0.12),
    0 2px 8px rgba(15, 30, 60, 0.08);
  /* Legacy alias (used by subpages) */
  --shadow: var(--shadow-raised);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Computated variable for the whole page's background */
    --current-background: var(--hero-background-color);

    /* Dark theme gradient */
    --hero-gradient: linear-gradient(90deg, #89f7fe, #66a6ff);
    /* Deep ink-navy hero: dark mode is its own look */
    --hero-background: linear-gradient(160deg, #0D1524 0%, #101E38 100%);
    --hero-background-color: #0F1B30;
    --background-color: #1E1E1E;

    --surface: rgba(48, 52, 62, 0.6);
    --popup-background: rgba(48, 52, 62, 0.6);

    --info-popup-background: rgba(26, 75, 163, 0.15);

     /* Text colors (dark theme) */
     --ink: #EAEFF7;
     --ink-2: #AEB9CB;
     --text-color-primary: var(--ink);
     --text-color-secondary: var(--ink-2);
     --text-color-accent: #6FB4FF;

     --shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.35);
     --shadow-raised:
        0 16px 40px rgba(0, 0, 0, 0.45),
        0 2px 8px rgba(0, 0, 0, 0.3);
     --shadow: var(--shadow-raised);
  }
}

@view-transition {
  navigation: auto;
}


/* Ensure full height and prevent overflow */
html, body {
  height: auto;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  overflow-x: hidden;
  /* `hidden` only clips visually — WebKit can still treat the page as
     horizontally scrollable when a `position: fixed` + `transform`
     element (HUDs, cursor-following sprites) extends past the edge,
     which eats Safari's edge-swipe back/forward gesture. `clip`
     forbids the box from becoming a scroll container at all. Falls
     back to `hidden` above in browsers that don't support it. */
  overflow-x: clip;

  flex-direction: column;
  background-color: var(--current-background);

  transition: background-color 0.4s ease;
  will-change: background-color;

  scroll-behavior: smooth;

  font-size: 16px;

  scrollbar-width: thin;
  scrollbar-color: gray transparent;
  scrollbar-gutter: stable;
}

@media (max-width: 600px) {
  html, body {
    font-size: 14px;
  }
}
  
/* Body already has flex centering, keep that */
body {
  font-family: "Nunito", -apple-system, BlinkMacSystemFont,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  box-sizing: border-box;

  -webkit-overflow-scrolling: touch;
}

.back-button-container {
  margin-left: 0;
  margin-right: auto;

  padding: 1.5rem;

  position: relative;
  z-index: 1;

  view-transition-name: top-element;
}

.back-button {
  height: fit-content;
  width: fit-content;

  padding: 0.75rem;
  border-radius: 6.25rem;

  background-color: var(--popup-background);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  display: inline-flex;
  align-items: center;
  gap: 0.5rem;

  text-decoration: none;
  color: var(--text-color-secondary);

  box-shadow: var(--shadow);
  transform: scale(1);
  transition: all 0.2s ease;

  z-index: 10;
}

.back-button:hover {
  color: white;
  transform: scale(1.1);
  box-shadow: var(--shadow-raised);
  transition: all 0.2s ease;
}

.back-button-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 1.75rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;

  color: var(--text-color-secondary);
}

.back-button-label {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.375rem;

  font-size: 1rem;
  font-weight: bold;
  color: var(--text-color);
}

.back-button-favicon {
  width: 1.5rem;
  height: 1.5rem;

  clip-path: circle();

  /* Shares the name assigned to whichever image (hero picture or nav logo)
     is active on the main page when navigating away, so the cross-document
     transition morphs into this icon instead of leaving it behind while
     `top-element` (navbar -> back-button) animates separately. */
  view-transition-name: profile-avatar;
}

.section {
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;

  padding-bottom: 1.25rem;

  /* Keep anchored section titles clear of the floating navbar */
  scroll-margin-top: 6rem;
}

.section-description {
  max-width: 25rem;
  margin: 0 auto;

  line-height: 1.6;
  text-align: left;

  background-color: var(--info-popup-background);
  padding: 1.25rem;
  border-radius: var(--radius-panel);

  box-shadow: var(--shadow-soft);
}

.section-description > p {
  color: var(--text-color-accent);
}

.section-description-text {
  font-size: 1rem;
}

.tab-bar-container {
  position: relative;
  background-color: var(--popup-background);

  margin: 1.25rem auto 0;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;

  width: fit-content;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;

  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);

  box-shadow: var(--shadow-raised);
}

.tab-indicator {
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0;
  width: 0;
  border-radius: 9999px;
  background: var(--text-color-primary);
  opacity: 0.1;
  transition: all 0.3s ease;
  z-index: 0;
}

.tab-icon {
  font-family: 'Material Symbols Outlined';
  font-size: 1.25rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tab {
  font-size: 1rem;
  font-weight: 500;

  margin: 0;
  padding: 0.5rem;
  border-radius: 9999px;

  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;

  cursor: pointer;
  z-index: 1;

  transition: transform 0.2s ease, color 0.2s ease;
}

.tab > p {
  margin: 0.25rem 0;
}

.tab:hover {
  transform: scale(1.05);
}

.tab-text {
  margin: 0;
  line-height: 1;
}

/* Content area */
.tab-content {
  display: none;
  padding: 1.25rem;
}

.tab-content.active-tab {
  display: block;
}

/* Keyframes */
@keyframes scaleIn {
  60% {
    transform: scale(1.1);
    opacity: 0.6;
    filter: blur(2px);
  }
  80% {
    transform: scale(0.95);
    opacity: 0.8;
    filter: blur(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes scaleInBlur {
  60% {
    transform: scale(1.1);
    opacity: 0.6;
    filter: blur(2px);
  }
  80% {
    transform: scale(0.95);
    opacity: 0.8;
    filter: blur(0);
  }
  100% {
    transform: scale(1);
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes slideFadeIn {
  to {
    transform: translateX(0);
    opacity: 1;
    filter: blur(0);
  }
}
  
  /* Responsive headings */
  h1 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-color-primary);
  }

  h2 {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text-color-primary);
  }

  h3 {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--text-color-primary);
  }

  h4 {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--text-color-primary);
  }

  p {
    font-size: 1rem;
    color: var(--text-color-primary);
  }

  a {
    color: var(--text-color-accent);
  }

  .body-text {
    font-size: 1rem;
    color: var(--text-color-primary);
  }

  .body-small-text {
    font-size: 0.85rem;
    color: var(--text-color-primary);
  }

  .caption-text {
    font-size: 0.75rem;
    color: var(--text-color-primary);
  }

  label {
    font-size: 0.75rem;
    font-weight: medium;
    color: var(--text-color-primary);
  }

  .quote-text {
    font-size: 1rem;
    font-style: italic;
    color: var(--text-color-primary);
  }

  .button-text {
    font-size: 0.8rem;
    font-weight: medium;
    color: var(--text-color-primary);
  }

.secondary {
  opacity: 0.7;
}

.section-title-bar {
  text-align: left;
  width: auto;
  padding: 0 1.75rem;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.section-heading {
  display: flex;
  flex-direction: column;
}

.section-title-bar h1,
.section-title-bar h2 {
  margin: 0;
}

.section-subtitle {
  margin: 0.25rem 0 0;

  font-size: 0.95rem;
  font-weight: 400;

  color: var(--text-color-secondary);
  opacity: 0.8;
}

.icon-large {
  font-family: 'Material Symbols Outlined';
  font-size: 4rem;
  line-height: 1;
  margin: 0;

  display: flex;

  justify-content: center;
}

.see-all-link {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  gap: 0.15rem;

  padding: 0.5rem 0.7rem 0.5rem 0.9rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface);
  box-shadow: var(--shadow-soft);

  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-color-primary);

  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.see-all-link .link-icon {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 1.2rem;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
}

.see-all-link:hover {
  background-color: var(--popup-background);
  box-shadow: var(--shadow-raised);
  transform: translateY(-1px);
}

.see-all-link:active {
  transform: translateY(0);
}

.see-all-link p {
  margin: 0;
  line-height: 1;
}

.navbar {
    position: fixed;
    top: 1.25rem;
    left: 50%;
    translate: -50% 0;
    z-index: 100;

    display: flex;
    flex-direction: row;

    justify-content: space-between;
    align-items: center;
    gap: 0.125rem;
    padding: 0.375rem;

    background-color: var(--popup-background);
    border-radius: var(--radius-pill);
    backdrop-filter: blur(20px) saturate(1.6);
    -webkit-backdrop-filter: blur(20px) saturate(1.6);

    box-shadow: var(--shadow);

    opacity: 0;
    transform: translateY(-2.5rem);
    transition: opacity 0.35s ease, transform 0.35s ease;

    view-transition-name: top-element;
  }

  .navbar.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  }

  .nav-item {
    position: relative;
    z-index: 1;

    display: flex;
    align-items: center;
    justify-content: start;
    gap: 0.5rem;
    width: fit-content;
    white-space: nowrap;

    text-decoration: none;
    font-weight: 600;
    color: var(--text-color-secondary);

    font-size: 0.95rem;
    padding: 0.5625rem 0.875rem;
    border-radius: var(--radius-pill);

    transition: color 0.2s ease;
  }

  .nav-item-enabled {
    color: var(--text-color-primary);
  }

  .nav-logo-image {
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    object-fit: cover;
  }

  /* Shared name lets the hero picture morph cross-document into a subpage's
     back-button-favicon via the View Transitions API (the same-document hero
     <-> nav-logo morph itself is now JS-driven, see initNavBar() in
     script.js). The hero picture owns the name by default, in plain CSS, so
     it's guaranteed to be present at first paint — no reliance on script.js
     (deferred, may not have run yet) having assigned it before the browser
     captures an incoming page's state. script.js only suppresses it once
     scrolled and grants it to the nav logo instead. */
  .profile-picture {
    view-transition-name: profile-avatar;
  }

  .profile-picture.avatar-morph-suppressed {
    view-transition-name: none;
  }

  .avatar-morph-target {
    view-transition-name: profile-avatar;
  }

  ::view-transition-group(profile-avatar),
  ::view-transition-old(profile-avatar),
  ::view-transition-new(profile-avatar),
  ::view-transition-group(top-element),
  ::view-transition-old(top-element),
  ::view-transition-new(top-element) {
    animation-duration: 0.5s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Ghost elements used by the JS-driven hero-avatar/name <-> navbar-logo
     morph (see initNavBar() in script.js). They're the only things that
     actually fly across the screen; the real elements just fade in place. */
  .morph-ghost {
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    pointer-events: none;
    opacity: 0;
    will-change: transform;
    transform-origin: 0 0;
    z-index: 150;
  }

  .avatar-ghost {
    border-radius: 50%;
    object-fit: cover;
  }

  .name-ghost {
    display: block;
    white-space: nowrap;
  }

  .nav-item-desktop {
    display: flex;
  }

  .nav-item-mobile {
    display: none;
  }

  @media (max-width: 600px) {

    .nav-item-desktop {
      display: none;
    }

    .nav-item-mobile {
      display: flex;
    }

    .nav-item {
      gap: 0.25rem;
      padding: 0.5rem 0.75rem;
    }

    .nav-logo-image {
      height: 1.5rem;
      width: 1.5rem;
    }

  }

  .nav-item:hover {
   color: var(--text-color-primary);
  }

  .nav-indicator {
  position: absolute;
  top: 0.375rem;
  bottom: 0.375rem;
  left: 0;
  z-index: 0;
  width: 0;

  background: color-mix(in srgb, var(--text-color-accent) 16%, var(--surface));
  border-radius: var(--radius-pill);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18);

  transition: all 0.3s ease;
}

@media (prefers-color-scheme: dark) {
  .nav-indicator {
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.12),
      inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  }
}

/* Keyboard focus */
:focus-visible {
  outline: 2px solid var(--text-color-accent);
  outline-offset: 2px;
  border-radius: 0.375rem;
}

/* Reduced motion: show everything immediately, stop ambient animation */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  html, body {
    scroll-behavior: auto;
  }

  .blurred-oval,
  .scrolling-container-forward,
  .scrolling-container-backward {
    animation: none !important;
  }

  .profile-picture,
  .hero-title,
  .hero-subtitle-line,
  .hero-badge,
  .about-me-popup,
  .profile-picture-small {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* Hide icon elements until Material Symbols font is loaded, preventing raw string artifacts */
.material-symbols-outlined,
.material-icons {
    visibility: hidden;
}

html.icons-ready .material-symbols-outlined,
html.icons-ready .material-icons {
    visibility: visible;
}