/* Staged site load — reserve layout early, reveal in place (no shift) */

/* About-section polka on first paint until #about halftone canvas takes over */
html.is-site-loading body {
  overflow: hidden;
  touch-action: none;
  user-select: none;
  pointer-events: none;
  background-color: #b8c0c8;
  background-image: none;
}

html.is-site-loading body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(96, 118, 138, 0.2) 1.5px, transparent 1.6px);
  background-size: 18px 18px;
}

html.is-site-loading body * {
  pointer-events: none !important;
}

html.is-site-loading.load-show-about-bg body::before {
  display: none;
}

/* Polka dots stay hidden until the end-of-hero halftone reveal (same as theme switch) */
html.is-site-loading:not(.load-dots-revealed) body::before,
html.is-site-loading:not(.load-dots-revealed) .halftone-cursor-canvas,
html.is-site-loading:not(.load-dots-revealed) .profile-photo-wrap .comic-dots-canvas {
  opacity: 0 !important;
}

html.is-site-loading.load-dots-revealed body::before,
html.is-site-loading.load-dots-revealed .halftone-cursor-canvas,
html.is-site-loading.load-dots-revealed .profile-photo-wrap .comic-dots-canvas {
  opacity: 1 !important;
}

html.is-site-loading #sideNav {
  visibility: hidden;
  pointer-events: none;
}

/* Hide all downstream sections from first paint until hero reserves/reveals them */
html.is-site-loading section.resume-section:not(#about):not([data-load-section].is-revealed),
html.is-site-loading #page-end-tear {
  visibility: hidden;
  pointer-events: none;
}

html.is-site-loading:not(.load-show-about-bg) #about {
  visibility: hidden;
  pointer-events: none;
}

html.is-site-loading.load-show-about-bg #about {
  visibility: visible;
}

html.is-site-loading.load-show-about-bg #about-section {
  visibility: hidden;
}

html.is-site-loading.load-show-about-content #about-section {
  visibility: visible;
}

html.is-site-loading.load-show-nav #sideNav {
  visibility: visible !important;
}

html.is-site-loading:not(.load-show-theme-toggle) #theme-toggle {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: scale(0.5) rotate(-10deg);
}

html.is-site-loading.load-show-theme-toggle #theme-toggle {
  visibility: visible !important;
  pointer-events: auto !important;
  animation: site-load-theme-toggle-in 0.37s cubic-bezier(0.22, 1.05, 0.36, 1) forwards;
}

html.is-site-loading.load-dots-revealed #theme-toggle.theme-toggle-real-reveal {
  animation: site-load-theme-toggle-real-in 0.37s cubic-bezier(0.22, 1.05, 0.36, 1) forwards;
}

/* Scrollspy may add .active early — keep sticker hidden until nav panel finishes popping in */
html.is-site-loading:not(.load-show-nav-active) #sideNav .nav-link.active {
  color: var(--text-soft);
  background: transparent !important;
  border-color: transparent !important;
  text-shadow: none;
  -webkit-text-stroke: 0.4px currentColor;
  transform: none;
  filter: none;
  box-shadow: none;
}

html.is-site-loading.load-show-nav-active #sideNav .nav-link.active[href="#about"] {
  animation: site-load-nav-active-in 0.27s cubic-bezier(0.22, 1.05, 0.36, 1) forwards;
}

html.is-site-loading[data-theme="noir"].load-show-nav-active #sideNav .nav-link.active[href="#about"] {
  animation: site-load-nav-active-in-noir 0.27s cubic-bezier(0.22, 1.05, 0.36, 1) forwards;
}

/* Hero target section stays fully hidden until its reveal starts */
html.is-site-loading.load-space-reserved section.resume-section[data-load-section]:not(.is-revealed) {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none;
}

html.is-site-loading.load-space-reserved section.resume-section[data-load-section].is-revealed {
  display: flex !important;
  visibility: visible !important;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path, opacity;
  animation: site-load-section-wipe-down 0.53s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Tear ink on ::after stays off (baked into ::before via section-tear.js) */
html.is-site-loading.load-space-reserved section.resume-section[data-load-section]::after {
  opacity: 0 !important;
  visibility: hidden !important;
  background: none !important;
  background-image: none !important;
}

html.is-site-loading.load-space-reserved section.resume-section[data-load-section].is-revealed .halftone-cursor-canvas {
  visibility: visible;
}

/* Hero section title + list use the same hero pop-in as About content */
html.is-site-loading.load-space-reserved section.resume-section[data-load-section].is-revealed [data-load-reveal] {
  opacity: 0;
  transform: scale(0.9) translateY(10px);
  visibility: hidden;
  pointer-events: none;
}

html.is-site-loading.load-space-reserved section.resume-section[data-load-section].is-revealed [data-load-reveal].is-revealed {
  visibility: visible;
  animation: site-load-pop-in 0.27s cubic-bezier(0.22, 1.05, 0.36, 1) forwards;
}

/* Hero heading + list: instant pop-in (no stagger / no animation time) */
html.is-site-loading.load-space-reserved section.resume-section[data-load-section] [data-load-reveal].is-revealed,
html.is-site-loading section.resume-section[data-load-section] [data-load-reveal].is-revealed {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

html.is-site-loading.load-space-reserved section.resume-section[data-load-section].is-reveal-done [data-load-reveal].is-revealed {
  opacity: 1;
  transform: none;
  visibility: visible;
}

/* Noir intro: hero section wipes in, but panels/text/list stay hidden until theme reveal */
html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] [data-load-reveal],
html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] h2,
html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] #experience-list,
html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] #publications-list,
html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] .comic-entry,
html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] .comic-text,
html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] .comic-link,
html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] .pub-title,
html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] .resume-item {
  opacity: 0 !important;
  visibility: hidden !important;
  animation: none !important;
  transform: none !important;
  pointer-events: none !important;
}

html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] [data-load-reveal],
html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] h2,
html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] #experience-list,
html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] #publications-list,
html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] .comic-entry,
html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] .comic-text,
html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] .comic-link,
html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] .pub-title,
html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] .resume-item {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Background sections: rendered in DOM but excluded from hero layout/animation */
html.is-site-loading.load-space-reserved section.resume-section[data-load-bg-section],
html.is-site-loading.load-space-reserved #page-end-tear[data-load-bg-section] {
  display: none !important;
  visibility: hidden;
  pointer-events: none;
}

html.is-site-loading.load-bg-sections-visible section.resume-section[data-load-bg-section],
html.is-site-loading.load-bg-sections-visible #page-end-tear[data-load-bg-section] {
  display: flex !important;
  visibility: visible;
}

html.is-site-loading.load-bg-sections-visible #page-end-tear[data-load-bg-section] {
  display: block !important;
}

/* Hero pop-ins */
html.is-site-loading [data-load-reveal] {
  opacity: 0;
  transform: scale(0.9) translateY(10px);
  visibility: hidden;
}

html.is-site-loading [data-load-reveal].is-revealed {
  visibility: visible;
  animation: site-load-pop-in 0.27s cubic-bezier(0.22, 1.05, 0.36, 1) forwards;
}

html.is-site-loading #sideNav[data-load-reveal] {
  transform: translateX(-16px);
  opacity: 0;
}

html.is-site-loading #sideNav[data-load-reveal].is-revealed {
  visibility: visible !important;
  animation: site-load-nav-in 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@media (max-width: 991.98px) {
  html.is-site-loading #sideNav[data-load-reveal] {
    transform: translateY(-14px);
  }

  html.is-site-loading #sideNav[data-load-reveal].is-revealed {
    animation: site-load-nav-in-mobile 0.28s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  }
}

@keyframes site-load-pop-in {
  0% {
    opacity: 0;
    transform: scale(0.9) translateY(10px);
  }
  65% {
    transform: scale(1.03) translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes site-load-theme-toggle-in {
  0% {
    opacity: 0;
    transform: scale(0.45) rotate(-12deg);
  }

  55% {
    opacity: 1;
    transform: scale(1.14) rotate(4deg);
  }

  78% {
    transform: scale(0.96) rotate(-2deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes site-load-theme-toggle-real-in {
  0% {
    opacity: 0.55;
    transform: scale(0.84) rotate(-5deg);
  }

  55% {
    opacity: 1;
    transform: scale(1.12) rotate(3deg);
  }

  78% {
    transform: scale(0.97) rotate(-1deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes site-load-nav-in {
  0% {
    opacity: 0;
    transform: translateX(-16px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes site-load-nav-in-mobile {
  0% {
    opacity: 0;
    transform: translateY(-14px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes site-load-nav-active-in {
  0% {
    color: var(--text-soft);
    background: transparent;
    border-color: transparent;
    -webkit-text-stroke: 0.4px currentColor;
    transform: scale(0.9);
    filter: none;
  }
  65% {
    transform: rotate(-2deg) skewX(-6deg) scale(1.08);
  }
  100% {
    color: var(--panel-text);
    background: var(--about-nav-tint, #eef6ff);
    border-color: var(--ink);
    -webkit-text-stroke: 0;
    transform: rotate(-2deg) skewX(-6deg) scale(1.05);
    filter: drop-shadow(3px 3px 0 var(--ink));
  }
}

@keyframes site-load-nav-active-in-noir {
  0% {
    color: var(--text-soft);
    background: transparent;
    border-color: transparent;
    -webkit-text-stroke: 0.4px currentColor;
    transform: scale(0.9);
    filter: none;
  }
  65% {
    transform: rotate(-2deg) skewX(-6deg) scale(1.08);
  }
  100% {
    color: var(--panel-text);
    background: var(--about-nav-tint, #dde1e5);
    border-color: var(--ink);
    -webkit-text-stroke: 0;
    transform: rotate(-2deg) skewX(-6deg) scale(1.05);
    filter: drop-shadow(3px 3px 0 var(--ink));
  }
}

@keyframes site-load-section-wipe-down {
  0% {
    clip-path: inset(0 0 100% 0);
    opacity: 0.96;
  }
  100% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  html.is-site-loading body::before,
  html.is-site-loading .halftone-cursor-canvas,
  html.is-site-loading .profile-photo-wrap .comic-dots-canvas {
    opacity: 1 !important;
  }

  html.is-site-loading.load-show-nav #sideNav,
  html.is-site-loading.load-show-nav-active #sideNav .nav-link.active[href="#about"],
  html.is-site-loading.load-show-theme-toggle #theme-toggle,
  html.is-site-loading.load-dots-revealed #theme-toggle.theme-toggle-real-reveal,
  html.is-site-loading [data-load-reveal],
  html.is-site-loading #sideNav[data-load-reveal] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  html.is-site-loading.load-space-reserved section.resume-section[data-load-section].is-reveal-done,
  html.is-site-loading.load-space-reserved section.resume-section[data-load-section].is-reveal-done::before,
  html.is-site-loading.load-bg-sections-visible section.resume-section[data-load-bg-section],
  html.is-site-loading.load-bg-sections-visible #page-end-tear[data-load-bg-section] {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  html.is-site-loading.load-space-reserved section.resume-section[data-load-section].is-reveal-done [data-load-reveal].is-revealed,
  html.is-site-loading.load-space-reserved section.resume-section[data-load-section].is-reveal-done .halftone-cursor-canvas {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] [data-load-reveal],
  html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] h2,
  html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] #experience-list,
  html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] #publications-list,
  html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] .comic-entry,
  html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] .comic-text,
  html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] .comic-link,
  html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] .pub-title,
  html.is-site-loading[data-theme="noir"] section.resume-section[data-load-section] .resume-item {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] [data-load-reveal],
  html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] h2,
  html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] #experience-list,
  html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] #publications-list,
  html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] .comic-entry,
  html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] .comic-text,
  html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] .comic-link,
  html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] .pub-title,
  html.is-site-loading.load-dots-revealed section.resume-section[data-load-section] .resume-item {
    opacity: 1 !important;
    visibility: visible !important;
  }

}