/* Remove browser default spacing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow-wrap: break-word;
}


/* Make sure page fills screen and no scrollbars cause offsets */
html, body {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: Arial, sans-serif;
  color: white;
  line-height: 1.6;
}

:root{
  /* default intro shift (no extra shift) */
  --intro-shift: 0px;
  /* Background overlay opacities (0 = transparent, 1 = opaque) */
  --bg-image-opacity: 0.60; /* controls #image-overlay on the homepage (darker by default for dark mode) */
  --page-dim-opacity: 0.45; /* controls the global page dim used when nav opens */
}

/* Background image */
#bg-image {
  position: fixed;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -2;
}

/* Dark overlay sitting above the background image. Reduce opacity so the
   background image reads through more. */
#image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  /* use a CSS variable so the background darkness can be tuned */
  background: rgba(0, 0, 0, var(--bg-image-opacity));
  z-index: -1;
}

/* Content on top */
body, header, section, footer {
  position: relative;
  z-index: 1;
}

/* Transparent glass header */
header {
  background-color: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(8px);
  color: white;
  padding: 1rem 2vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}

/* Logo + text */
.logo-container {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.logo {
  height: 8vh;
  width: auto;
}

/* Simple hamburger styles (mobile) */
.hamburger {
  display: none; /* shown at small widths */
  background: transparent;
  border: 0;
  padding: 6px;
  width: 32px; /* slightly shorter overall so bars are shorter */
  height: 32px; /* a bit taller to allow more vertical spacing */
  position: relative;
  cursor: pointer;
  z-index: 50;
}
.hamburger .bar {
  display: block;
  height: 2px;
  background: white;
  width: 86%; /* shorten bars slightly so they don't touch edges */
  transition: transform 240ms ease, opacity 180ms ease, top 200ms ease;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* center bars horizontally */
}
.hamburger .bar1 { top: 4px; }
.hamburger .bar2 { top: 50%; transform: translateX(-50%) translateY(-50%); }
.hamburger .bar3 { bottom: 4px; }

.hamburger.open .bar1 { top: 50%; transform: translateX(-50%) translateY(-50%) rotate(45deg); }
.hamburger.open .bar2 { opacity: 0; transform: translateX(-50%) translateY(-50%) scaleX(0); }
.hamburger.open .bar3 { top: 50%; transform: translateX(-50%) translateY(-50%) rotate(-45deg); }

@media (max-width: 768px) {
  .hamburger { display: block; position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); }

  /* keep nav present for transitions but move it offscreen */
  header nav {
    display: flex;
    flex-direction: column;
  position: absolute;
  /* align panel with viewport edge by compensating for header padding */
  right: calc(-2vw);
    top: 100%;
    left: auto;
    width: 85%;
    max-width: 360px;
    background: rgba(0,0,0,0.12);
    backdrop-filter: blur(8px);
    padding: 1rem;
    gap: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.6);
    z-index: 49;
    transform: translateX(110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 280ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease;
  }

  header nav a { color: white; display: block; padding: 0.6rem 0.4rem; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.04); }

  /* When open, nudge the panel slightly to the right to match the site-wide layout */
  header.nav-open nav { transform: translateX(15px); opacity: 1; pointer-events: auto; }
  /* make header opaque and maintain blur when nav is open */
  header.nav-open {
    background-color: rgba(0,0,0,0.95);
    backdrop-filter: blur(8px);
    z-index: 1000; /* raise header above fixed audio controls while open */
  }

  /* Stronger background and blur for the open navigation panel itself */
  header.nav-open nav {
    background: rgba(0, 0, 0, 0.945); /* near-opaque panel */
    box-shadow: 0 18px 48px rgba(0,0,0,0.85);
    transition: background 220ms ease, backdrop-filter 220ms ease, box-shadow 220ms ease;
    z-index: 1001; /* ensure nav panel sits above the dim overlay/header and audio controls */
  }

  /* Theme toggle disabled state (home page uses a disabled toggle while the crawl animates) */
  nav .theme-toggle[disabled],
  nav .theme-toggle[aria-disabled="true"]{
    opacity: 0.45;
    pointer-events: none;
    cursor: default;
  }

  /* While nav is open, send floating audio controls underneath the panel
     so they don't visually or interactively sit above the open menu. */
  header.nav-open ~ #audio-controls,
  header.nav-open ~ .page-wrapper #audio-controls {
    z-index: 20; /* below nav (60) and below page overlay */
    pointer-events: none; /* avoid accidental clicks while menu is open */
    transition: z-index 120ms ease;
  }
}


/* Navigation bar */
nav {
  display: flex;
  align-items: center;
  gap: 2vw;
  margin-right: 4vw;
}

nav a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
}

nav a:hover {
  color: #feda4a;
}

.fade {
  position: relative;
  width: 100%;
  min-height: 60vh;
  top: -2vh;
  /* remove the heavy black gradient so page content isn't darkened
     excessively; keep fully transparent to let the overlay/image show */
  background-image: none;
  z-index: 1;
}

/* Container for both buttons */
#audio-controls {
  position: fixed;
  top: 50%;
  right: 3vw;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column; /* stack vertically */
  align-items: center;
  gap: 1rem;               /* space between buttons */
  /* Keep audio controls visually above everything else (snitch, overlays). */
  z-index: 5000020;
}

/* Shared button style */

#audio-player button,
#restart-button,
#skip-button,
#pause-scroll,
#auto-skip-button {
  background-color: #343128;
  color: white;
  border: 0.05rem solid gold;
  border-radius: 50%;
  width: 8vh;
  height: 8vh;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0.1rem rgba(254, 218, 74, 0.6);
  transition: transform 0.2s ease, box-shadow 0.3s ease, opacity 0.3s ease;
  opacity: 0.7;
}


/* Ensure inline SVG icons inside control buttons scale to match glyph sizing */
#audio-player button svg,
#restart-button svg,
#skip-button svg,
#pause-scroll svg,
#auto-skip-button svg,
#audio-player button img,
#restart-button img,
#skip-button img,
#pause-scroll img,
#auto-skip-button img {
  width: 50%;
  height: 50%;
  display: block;
  object-fit: contain;
}

#audio-player button:hover,
#restart-button:hover,
#skip-button:hover,
#pause-scroll:hover,
#auto-skip-button:hover {
  opacity: 1;
  transform: scale(1.1);
  box-shadow: 0 0 0.2rem rgba(254, 218, 74, 0.8);
}

/* Ensure the Star Wars auto-skip button exactly matches the other control buttons
   (explicit sizing/padding to avoid any browser defaults or overrides) */
#auto-skip-button {
  width: 8vh;
  height: 8vh;
  padding: 0;
  margin: 0;
  border-radius: 50%;
  background-color: #343128;
  border: 0.05rem solid gold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0.1rem rgba(254, 218, 74, 0.6);
  font-size: 1.5rem;
}

#auto-skip-button img {
  width: 50%;
  height: 50%;
  display: block;
  object-fit: contain;
}

/* Disabled / grayed fast-forward (skip) button when photo is shown */
#skip-button.disabled,
#skip-button[disabled] {
  opacity: 0.45;
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* Disabled / grayed pause-scroll button (same visual treatment) */
#pause-scroll.disabled,
#pause-scroll[disabled] {
  opacity: 0.45;
  cursor: default;
  transform: none !important;
  box-shadow: none !important;
  pointer-events: none;
}

/* When auto-skip is enabled, grey out and disable all controls except the Star Wars auto-skip button */
/* When auto-skip is enabled, visually dim other controls but keep their
   original colors (no grayscale). Also fully disable pointer events so
   clicks cannot occur. The Star Wars auto-skip button remains active. */
body.auto-skip-enabled #audio-controls button:not(#auto-skip-button) {
  /* Slightly dim other controls when auto-skip is enabled, but keep them interactive */
  opacity: 0.45 !important;
  cursor: pointer !important; /* allow clicks */
  pointer-events: auto !important; /* keep interactive so audio controls still work */
  filter: none !important; /* keep original colors */
}

/* Also disable any anchor wrappers (e.g. restart link) inside the controls
   so clicking the parent link cannot bypass the disabled button. Match the
   same opacity so all deactivated controls look consistent. */
/* Keep anchor wrappers non-interactive but avoid changing opacity so child
   buttons don't compound opacity (which makes them much darker). */
body.auto-skip-enabled #audio-controls a {
  pointer-events: auto !important;
  cursor: pointer !important;
  opacity: 1 !important; /* keep anchor opacity neutral to avoid multiplying opacities */
}

/* Ensure the restart/reload control (which may be wrapped in an <a>)
   matches the same dim/disabled look as the pause button. */
body.auto-skip-enabled a.no-underline #restart-button,
body.auto-skip-enabled #restart-button {
  opacity: 0.45 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  box-shadow: none !important;
  transform: none !important;
}

/* small pulse/flash when user attempts to click while disabled by auto-skip */
.disabled-flash {
  animation: disabledFlash 220ms ease;
}
@keyframes disabledFlash {
  0% { transform: scale(1); }
  50% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* Keep the auto-skip button active and visually prominent */
body.auto-skip-enabled #auto-skip-button {
  opacity: 1 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  transform: none !important;
  box-shadow: 0 0 0.25rem rgba(254, 218, 74, 0.9) !important;
}

/* When auto-skip is enabled, allow a slightly larger hover zoom on the Star Wars button */
body.auto-skip-enabled #auto-skip-button:hover {
  transform: scale(1.12) !important;
  box-shadow: 0 0 0.28rem rgba(254, 218, 74, 1) !important;
  opacity: 1 !important;
}

/* Dark mode: invert the Star Wars SVG icon so it appears light on dark backgrounds */
body:not(.light-mode) #auto-skip-button img {
  filter: invert(1) brightness(1.05) contrast(1.1);
}

/* Ensure light mode keeps the original (non-inverted) icon */
body.light-mode #auto-skip-button img {
  filter: none;
}

/* Immersive hint box styling (appears after intro loads when auto-skip enabled) */
/* compact hint box */
/* place hint next to the Star Wars button using a local wrapper; wrapper sits inside #audio-controls */
#audio-controls { position: fixed; }
.hint-wrapper { position: relative; display: inline-block; }
.hint-wrapper #immersive-hint{
  position: absolute;
  right: calc(100% + 18px); /* sit to the left of the controls stack */
  top: 50%;
  transform: translateY(-50%);
  padding: 0.6rem 0.7rem;
  border-radius: 6px;
  font-size: 0.8rem;
  line-height: 1.25;
  width: 270px; /* force 3-line wrapping at this size */
  text-align: left;
  z-index: 2000; /* stay above most UI */
  transition: opacity 260ms ease, transform 260ms ease, max-height 320ms ease;
  opacity: 0;
  pointer-events: none; /* only active when auto-skip enabled */
  display: inline-block;
  border: 1px solid rgba(0,0,0,0.12);
  white-space: normal;
  word-break: break-word;
  overflow: hidden;
  max-height: 3.2rem; /* compact height (~3 lines) — keep alt-text hidden until hover */
}

/* animate in class */
/* show and auto-hide after 10s using CSS animation; hover pauses animation */
@keyframes hint-stay-hide {
  0% { opacity: 0.6; transform: translateY(-50%); }
  90% { opacity: 0.6; transform: translateY(-50%); }
  100% { opacity: 0; transform: translateY(-40%); }
}

@keyframes hint-in {
  from { opacity: 0; transform: translateY(-60%); }
  to { opacity: 0.6; transform: translateY(-50%); }
}

/* when auto-skip enabled, display hint and start the entrance + hide animations
   - entrance delayed by 3s, duration 800ms; then visible for 10s before hiding */
body.auto-skip-enabled #audio-controls .hint-wrapper #immersive-hint{
  opacity: 0; /* start hidden; hint-in brings to visible */
  pointer-events: auto;
  /* make hint appear 1s earlier: reduce entrance and hide delays by 1s */
  /* delay entrance by 1s, animate in over 1s, then keep visible for 10s before hiding */
  animation: hint-in 1000ms ease 1s forwards, hint-stay-hide 10000s linear 2s forwards;
}

/* pause hide animation while hovered */
/* pause hide animation while hovered */
#audio-controls .hint-wrapper #immersive-hint:hover{ animation-play-state: paused; }

/* dark theme: translucent black overlay, light yellow border, white text */

/* dark theme: translucent black overlay, light yellow border, white text */
body:not(.light-mode) #audio-controls .hint-wrapper #immersive-hint{
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-color: rgba(254, 218, 74, 0.9);
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}

/* light theme: translucent white overlay, dark yellow border, black text */
body.light-mode #audio-controls .hint-wrapper #immersive-hint{
  background: rgba(255,255,255,0.92);
  color: #111;
  border-color: rgba(140,102,12,0.95);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

/* Hover: small glow and pointer cursor */
/* Only allow hover/focus interactions when auto-skip mode is enabled */
body.auto-skip-enabled .hint-wrapper:hover #immersive-hint{ cursor: pointer; transform: translateY(-8px); box-shadow: 0 8px 28px rgba(0,0,0,0.35); }

/* small hint line styling with smooth fade/slide */
#audio-controls .hint-wrapper #immersive-hint .hint-line{
  display: block;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 260ms ease, transform 260ms ease;
}

/* strike-fun default (no strike) */
#audio-controls .hint-wrapper #immersive-hint .strike-fun{ text-decoration: none; }

/* reveal expanded alt-text and full opacity when wrapper is hovered or focused */
.hint-wrapper:focus-within #immersive-hint{ /* keep non-interactive when auto-skip off */
  max-height: 3.2rem; opacity: 0.6; pointer-events: none;
}
body.auto-skip-enabled .hint-wrapper:hover #immersive-hint, body.auto-skip-enabled .hint-wrapper:focus-within #immersive-hint{
  max-height: 240px; /* expand downward */
  opacity: 1 !important;
  pointer-events: auto;
}

/* show the alt text smoothly; initially hidden */
.hint-wrapper #immersive-hint .alt-text{
  max-height: 0; opacity: 0; overflow: hidden; transition: max-height 260ms ease, opacity 260ms ease, transform 260ms ease;
  margin-top: 6px; font-size: 0.82rem; color: inherit; transform: translateY(-6px);
}

/* On hover/focus: fade out the initial hint lines and fade in the alt text */
.hint-wrapper:focus-within #immersive-hint .hint-line{ opacity: 1; transform: translateY(0); }
.body-auto-skip-disabled .hint-wrapper #immersive-hint .hint-line{ opacity: 1; }
body.auto-skip-enabled .hint-wrapper:hover #immersive-hint .hint-line,
body.auto-skip-enabled .hint-wrapper:focus-within #immersive-hint .hint-line{
  opacity: 0; transform: translateY(-6px); pointer-events: none;
}
body.auto-skip-enabled .hint-wrapper:hover #immersive-hint .alt-text,
body.auto-skip-enabled .hint-wrapper:focus-within #immersive-hint .alt-text{
  max-height: 160px; opacity: 1; transform: translateY(0);
}

/* Mobile placement: below and slightly left of the button */
@media (max-width: 768px) {
  #audio-controls .hint-wrapper #immersive-hint{
    right: auto;
    left: 0;
    top: calc(100% + 8px);
    transform: none;
    width: 160px;
  }
}

/* Hide the <audio> tag itself */
#audio-player audio {
  display: none;
}


/* Crawl section */
.about {
  display: flex;
  justify-content: center;
  word-wrap: break-word;
  overflow-wrap: break-word;
  height: 100vh;
  width: 100vw;
  perspective: 400px;
  color: #feda4a;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 4vw;
  font-weight: 600;
  letter-spacing: 0.5vw;
  line-height: 150%;
  text-align: justify;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word; /* fallback for very long words */
  hyphens: auto; /* optional, adds nice hyphenation when needed */}

.about p {
  margin-top: 5em;
}

/* Animation */
@keyframes crawl {
  0% {
    top: 0;
    transform: rotateX(25deg) translateZ(0);
  }
  100% { 
    top: -6000px;
    transform: rotateX(25deg) translateZ(-2000px);
    opacity: 0;
  }
}

.crawl {
  position: relative;
  top: 9999px;
  transform-origin: 50% 100%;
  animation: crawl 40s linear forwards;
  transition: opacity 2s ease-in-out;
  opacity: 1;
}

.crawl > .title {
  font-size: 90%;
  text-align: center;
}

.crawl > .title h1 {
  margin: 0 0 10vh;
  text-transform: uppercase;
}

/* Intro Section */
.intro-section {
  position: fixed;
  top: 50%;
  left: 50%;
  /* shift the intro block vertically by an adaptive CSS variable
     so we can nudge it down on small screens without hardcoding top */
  transform: translate(-50%, calc(-50% + var(--intro-shift)));
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
  animation: fadeInContainer 2s ease forwards;
  animation-delay: 24s;
  z-index: 5;
}

/* While the crawl is running the intro is not interactive. We enable
   pointer events only when the intro becomes visible by adding the
   `.visible` class from JavaScript. This prevents clicks while the
   crawl animates and the intro is off-screen. */
.intro-section { pointer-events: none; }
.intro-section.visible { pointer-events: auto; }

.intro-photo {
  width: 30vw;
  height: 30vw;
  max-width: 300px;
  max-height: 300px;
  border-radius: 50%;
  border: 0.25rem solid #ffffff; /* white border */
  object-fit: cover;
  margin-bottom: 4vh; /* increased space between photo and intro text */
  /* no glow - keep the border clean and white */
  opacity: 0;
  animation: fadeInPhoto 2s ease forwards;
  animation-delay: 24s;
}

.intro-text {
  color: #feda4a;
  font-family: 'Pathway Gothic One', sans-serif;
  font-size: 2rem;
  line-height: 1.5;
  opacity: 0;
  animation: fadeInText 2s ease forwards;
  animation-delay: 26s;
}
/* Social buttons stacked below the tagline */
.social-buttons {
  display: flex;
  flex-direction: row; /* horizontal layout */
  gap: 1px;
  margin-top: 1rem;
  justify-content: center; /* center the icons under the photo/tagline */
  align-items: center;
}

  /* Snitch win box styles (match site link boxes) */
  .snitch-win {
    position: absolute;
    z-index: 1000000;
    pointer-events: auto;
    padding: 14px 16px;
    background: rgba(52, 49, 40, 0.45);
    color: white;
    border: 0.05rem solid gold;
    border-radius: 6px;
    box-shadow: 0 0 0.08rem rgba(254, 218, 74, 0.5);
    font-family: "Poppins", "Montserrat", sans-serif;
    font-weight: 200;
    font-size: 15px;
    line-height: 1.25;
    max-width: calc(100% - 32px);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 200ms ease, box-shadow 180ms ease;
  }
  .snitch-win.show { opacity: 1; transform: translateY(0); box-shadow: 0 0 0.18rem rgba(254,218,74,0.9); }
  /* center content and style points */
  .snitch-win .hint-line { margin-bottom: 8px; text-align: center; }
  .snitch-win .hint-line .snitch-points { font-weight: 700; color: gold; display: inline-block; }

  /* Play again button: center and style to match site-link visual weight */
  .snitch-play-again {
    display: inline-block;
    margin: 12px auto 0;
    padding: 8px 12px;
    background: rgba(52, 49, 40, 0.6);
    border: 0.05rem solid gold;
    border-radius: 6px;
    cursor: pointer;
    color: white;
    font-weight: 700;
    text-align: center;
    display: block; /* ensure it centers via margin auto */
    max-width: 160px;
  }
  .snitch-play-again:hover { box-shadow: 0 0 0.18rem rgba(254, 218, 74, 0.9); filter: brightness(.98); }

  /* Light-mode variant: mirror dark-mode but match site-link light styling */
  body.light-mode .snitch-win {
    background: rgba(255,255,255,0.92);
    color: #111;
    border-color: rgba(140,102,12,0.95);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  }
  body.light-mode .snitch-win .hint-line { color: #111; }
  body.light-mode .snitch-win .hint-line .snitch-points { color: rgba(140,102,12,0.95); }
  body.light-mode .snitch-play-again {
    background: rgba(255,255,255,0.92);
    color: #111;
    border-color: rgba(140,102,12,0.95);
    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
    filter: none;
  }

/* Snitch smooth appear: fade + slight lift + deblur for a "thin air" effect */
@keyframes snitch-appear {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.96);
    filter: blur(6px);
  }
  60% {
    opacity: 0.92;
    transform: translateY(-6px) scale(1.02);
    filter: blur(2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

/* attach animation when the slot receives the class */
#snitch-slot.snitch-appear {
  animation: snitch-appear 520ms cubic-bezier(.2,.9,.2,1) both;
  pointer-events: none; /* slot stays non-interactive; image controls pointer-events */
}

/* gentle image settle after appearing */
@keyframes snitch-image-settle {
  0% { transform: scale(1.06); }
  60% { transform: scale(0.98); }
  100% { transform: scale(1); }
}
#snitch-slot.snitch-appear img#snitch-runner {
  /* run the one-off settle animation AND keep the ongoing twitch animation
     so the snitch continues its twitching motion after appearing */
  animation: snitch-image-settle 120ms ease 160ms both, snitch-twitch 5ms linear infinite;
}

/* Photo wrapper positions the sunglasses overlay */
.photo-wrapper{
  position: relative;
  display: inline-block;
}

/* Sunglasses overlay (hidden by default) */
.sunglasses{
  position: absolute;
  left:47%;
  top: 46%;
  transform: translate(-50%, -50%) scale(0.9) rotate(-6deg);
  width: 45%;
  max-width: 220px;
  pointer-events: none;
  opacity: 0;
  /* slow fade for hover reveal; transform snaps slightly faster for a gentle pop */
  transition: opacity 1.2s ease-in-out, transform 420ms cubic-bezier(.2,.9,.2,1);
  filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45));
}

/* When auto-skip is enabled we keep the sunglasses hidden/disabled. When
   auto-skip is OFF (no body.auto-skip-enabled class) the normal hover reveal
   behavior is active. This ensures the accessory only appears in immersive
   (non-auto-skip) mode. */
body.auto-skip-enabled .photo-wrapper .sunglasses {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -50%) scale(0.9) rotate(-6deg) !important;
}

/* Hover only: slowly fade in sunglasses on hover, but only when auto-skip is disabled */
body:not(.auto-skip-enabled) .photo-wrapper:hover .sunglasses {
  transform: translate(-50%, -50%) scale(1) rotate(0deg);
  opacity: 1;
}

.social-link {
  display: inline-flex;
  width: 48px;
  height: 48px;
  align-items: center;
  justify-content: center;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.social-link img {
  width: 60%;
  height: auto;
  display: block;
  filter: invert(1) brightness(1.2); /* works for dark icons; remove if your icons are colored */
}

.social-link:hover,
.social-link:focus {
  transform: scale(1.0);
  filter: brightness(0.8);
  outline: none;
}

/* Site navigation buttons under social icons */
.site-links {
  display: flex;
  flex-direction: row;
  gap: 0.5rem;
  margin-top: 0.9rem;
  align-items: center;
}

.site-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8rem; /* wide enough for labels */
  height: 4.5rem;
  padding: 0 0.6rem;
  background: rgba(52, 49, 40, 0.45); /* semi-transparent fill */
  color: white;
  text-decoration: none;
  border: 0.05rem solid gold;
  border-radius: 6px;
  font-family: "Poppins", "Montserrat", sans-serif;
  font-weight: 200;
  font-size: 15px;
  box-shadow: 0 0 0.08rem rgba(254, 218, 74, 0.5);
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.15s ease;
}

.site-link:hover,
.site-link:focus {
  box-shadow: 0 0 0.18rem rgba(254, 218, 74, 0.9);
  background: rgba(52, 49, 40, 0.6);
  border: 0.5rem solid gold(0, 0, 0);
  transition: transform 0.15s ease, box-shadow 0.2s ease, border 0.15s ease;

}

@media (max-width: 768px) {
  .site-link {
    width: 8.5rem;
    height: 2.4rem;
    font-size: 0.95rem;
  }
}

/* On phones: lay out the site-links as 2 rows x 2 columns and increase vertical size */
@media (max-width: 768px) {
  .site-links {
    display: grid;
    grid-template-columns: repeat(2, minmax(140px, 1fr));
    gap: 0.7rem 0.8rem; /* vertical then horizontal spacing */
    justify-content: center;
    align-items: center;
    width: 90%;
    max-width: 480px;
    margin: 0.8rem auto 0;
  }

  .site-link {
    width: 100%;
    height: 4rem; /* increased vertical length */
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.8rem;
  }

}



/* On phones and small tablets: show social icons in a single centered row */
@media (max-width: 768px) {
  .social-buttons {
    display: flex;
    flex-direction: row;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    margin-top: 1rem;
  }

  .social-link {
    width: 40px;
    height: 40px;
  }
}


/* Fade-in animations */
@keyframes fadeInContainer {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInPhoto {
  from { opacity: 0; transform: translateY(3vh); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInText {
  from { opacity: 0; transform: translateY(2vh); }
  to { opacity: 1; transform: translateY(0); }
}

/* Heading styles */
h2, h3 {
  display: inline-block;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
}

h2 {
  font-size: 2.5rem;
  color: #feda4a;
  font-weight: 1000;
  margin-right: 1vw;
}

h3 {
  font-size: 2.5rem;
  font-weight: 200;
  color: #feda4a;
}

#tagline {
  font-family: monospace;
  font-size: 1.5rem;
  margin-top: 1rem;
  color: white;
  font-weight: 200;
}

#tagline2 {
  font-family: monospace;
  font-size: 1rem;
  margin-top: 0.8rem;
  color: rgb(124, 124, 124);
  font-weight: 200;
}

/* Footer (match repositories styling for consistent look across pages) */
footer {
  background: transparent;
  color: #ffffff;
  text-align: center;
  margin: 0;
  padding: 28px 0;
}





/* ================================================
   📱 MOBILE OPTIMIZATION
   For screens up to 768px wide
   ================================================ */
@media (max-width: 768px) {

  /* General text scaling */
  body {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* Header adjustments */
  header {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 15px;
  }

  nav {
    gap: 15px;
    margin-right: 0;
    flex-wrap: wrap;
  }

  nav a {
    font-size: 0.9rem;
  }

  /* Crawl text smaller */
  .about {
    font-size: 160%;   /* smaller crawl text for mobile */
    letter-spacing: 2px;
    line-height: 140%;
    padding: 0 10px;   /* small side padding */
    width: 140%;        /* reduce width to fit better */
    margin-left: -20%; /* center the 140% width (half of the extra 40%) */
    text-align: justify;
    overflow-wrap: break-word;
    word-wrap: break-word;
    word-break: break-word; /* fallback for very long words */
    hyphens: auto; /* optional, adds nice hyphenation when needed */}
  }

  /* Skip + audio + restart buttons smaller and closer in */
  #skip-button,
  #audio-player button,
  #restart-button,
  #pause-scroll,
  #auto-skip-button {
    width: 50px;
    height: 50px;
    font-size: 16px;
  }

  /* Place audio controls horizontally directly under the header on phones */
  #audio-controls {
    position: fixed;
    top: 64px; /* sits just under typical header height on mobile */
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row; /* horizontal layout */
    align-items: center;
    gap: 0.5rem;
    z-index: 60; /* sit above most content but below an open nav which raises z-index */
  }

  /* Slightly smaller buttons on phones when placed under header */
  #skip-button,
  #audio-player button,
  #restart-button,
  #pause-scroll,
  #auto-skip-button {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }

  .no-underline {
  text-decoration: none;
}

  /* Intro section adjustments */
  .intro-section {
    width: 90%;
    /* nudge down by a variable amount on mobile */
    --intro-shift: 40px;
  }

  .intro-photo {
    width: 200px;
    height: 200px;
  margin-bottom: 3vh;
  border: 0.26rem solid #ffffff;
  }

  .intro-text {
    font-size: 1.3rem;
  }

  h2, h3 {
    font-size: 1.8rem;
  }

  #tagline {
    font-size: 0.8rem;
  }

  #tagline2 {
    font-size: 0.8rem;
  }

  footer {
    font-size: 0.8rem;
    padding: 8px 0;
  }

/* ================================================
   📱 EXTRA SMALL DEVICES (phones ≤ 480px)
   ================================================ */
@media (max-width: 480px) {

  .about {
    font-size: 140%;   /* even smaller crawl for very small screens */
    letter-spacing: 1.5px;
    line-height: 130%;
  }

  .intro-photo {
    width: 200px;
    height: 200px;
  margin-bottom: 2.5vh;
  border: 0.22rem solid #ffffff;
  }

  /* extra-small phones: increase the shift a bit more */
  .intro-section {
    --intro-shift: 60px;
  }

  .intro-text {
    font-size: 1.1rem;
  }

  h2, h3 {
    font-size: 1.5rem;
  }

  /* Reduce the tagline (PhD Candidate line) on very small phones for better fit */
  #tagline {
    font-size: 0.85rem;
  }

  #skip-button {
    top: 25%;
    right: 10px;
  }
  /* On very small phones, show social icons in a single centered row */
  .social-buttons {
    display: flex !important;
    flex-direction: row;
    gap: 0.4rem;
    justify-content: center;
    align-items: center;
    margin-top: 0.6rem;
  }
  /* Larger touch targets for social icons on phones */
  .social-link {
    width: 56px !important;
    height: 56px !important;
  }
  .social-link img {
    width: 85%;
    height: auto;
    display: block;
  }
}

/* Medium-size phones and small tablets: slightly smaller than extra-small phones */
@media (max-width: 768px) {
  .social-link {
    width: 55px !important;
    height: 55px !important;
  }
  .social-link img {
    width: 70%;
  }
}

/* Mobile tweak: make the crawl shorter on phones (40s) */
@media (max-width: 768px) {
  /* Reduce crawl animation duration on mobile so the intro appears faster on small screens */
  .crawl {
    animation-duration: 55s;
  }
}

/* Desktop / larger screens: ensure the audio controls are vertically stacked on the right
   and use the original (larger) sizes. This overrides any mobile rules. */
@media (min-width: 769px) {
  #audio-controls {
    position: fixed;
    top: 50%;
    right: 3vw;
    left: auto;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    z-index: 50;
    pointer-events: auto;
  }

  #skip-button,
  #audio-player button,
  #pause-scroll,
  #restart-button,
  #auto-skip-button {
    width: 7vh;
    height: 7vh;
    font-size: 1.5rem;
  }
}




/* Home page-specific mobile nav overrides to match Research page
   - Remove nav panel shadow
   - Make the panel overlay the header (position: fixed; top: 0)
   This file is intentionally narrow in scope and is only loaded on index.html.
*/


@media (max-width: 768px) {
  button img,
  nav .theme-toggle img {
    filter: brightness(0) saturate(100%) !important;
  }

  header nav {
    /* overlay the header instead of sitting under it */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    height: 100vh !important;
    /* keep the same width as the shared mobile nav */
    width: 85% !important;
    max-width: 360px !important;
    /* start offscreen to the right */
    transform: translateX(100%) !important;
    z-index: 1002 !important; /* sit above header */
  }

  /* Remove the heavy open-state shadow to match Research page */
  header.nav-open nav {
    box-shadow: none !important;
    transform: translateX(15px) !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Home-specific visual tweaks requested by the user:
     - Lower all elements inside the mobile nav by 20px so the links
       sit visually lower on the page.
     - Increase spacing between nav elements by 3px.
     - Make the hamburger "cross" icon (when open) white in dark mode. */
  header nav {
    /* preserve existing padding but add 20px vertical offset */
    padding-top: calc(1rem + 50px) !important;
    /* increase gap between items by 3px (was 0.5rem in shared rules) */
    gap: calc(0.5rem + 3px) !important;
  }

  /* Also increase each link's vertical padding slightly so the visual spacing
     between touch targets grows by ~3px (top + bottom combined). */
  header nav a {
    padding: calc(0.6rem + 3px) 0.4rem !important;
  }

  /* Cross icon color in dark mode: ensure the close (X) is white when the
     hamburger is open. This is scoped to dark-mode (when body does NOT have
     the .light-mode class). */
  body:not(.light-mode) header .hamburger.open .bar {
    background-color: #ffffff !important;
  }

  /* Ensure the header itself doesn't get pushed above the panel while open */
  header.nav-open { z-index: 1001 !important; }

  /* Remove any box-shadow entirely and prevent box-shadow from animating
     during the open/close transition. We explicitly limit transitions to
     transform and opacity so no shadow interpolation appears. */
  header,
  header nav,
  header.nav-open,
  header.nav-open nav {
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    transition: transform 280ms cubic-bezier(.2,.9,.2,1), opacity 220ms ease !important;
  }

  /* Homepage-only: ensure the logo sits at the left edge on small screens
     and the hamburger stays right. This forces a familiar left-logo layout
     for the homepage similar to Research. */
  header {
    justify-content: space-between !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }



  /* Lower audio controls so they appear below the header on mobile home page.
     We remove the vertical centering transform and place controls beneath the
     header height estimate (header ~ 8vh + 2rem padding) so they don't overlap. */
  #audio-controls {
    top: calc(8vh + 2rem + 8px) !important;
    transform: none !important;
    right: 3vw !important;
  }
}

/* Index-page mobile overrides: hide audio controls and disable hover reveals on phones */
@media (max-width: 768px) {
  /* Hide floating audio controls on small screens (index page wants immersive only) */
  #audio-controls {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Disable hover-based reveals (sunglasses) on mobile to avoid accidental reveals */
  .photo-wrapper .sunglasses,
  .photo-wrapper:hover .sunglasses {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(0.9) rotate(-6deg) !important;
  }
}