/* ==========================================================================
   Sheron Yang — main stylesheet
   ========================================================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   Loader
   -------------------------------------------------------------------------- */

.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-color);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  transition: opacity 0.3s ease;
}

.loader {
  font-family: "SpaceMono", monospace;
  font-size: 40px;
  font-weight: bold;
  color: var(--text-color);
  background: conic-gradient(var(--text-color) 0 0) 50% / 0 100% no-repeat text;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: l4 2.5s linear forwards;
}

.loader::before {
  content: "Sheron Yang";
}

@keyframes l4 {
  to {
    background-size: 120% 100%;
  }
}

.loader-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Fonts
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "SpaceMono";
  src: url("SF-Pro-Rounded-Light.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SpaceMonoBold";
  src: url("SF-Pro-Rounded-Medium.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Theme tokens
   -------------------------------------------------------------------------- */

:root {
  --index: calc(2.8vh);
  --i: calc(1vw + 1vh);
  --bg-color: #d1d1d1;
  --text-color: #1a1a1a;
  --line-color: #1a1a1a;
  --panel-border: #1a1a1a;
  --cursor-border: #1a1a1a;
  --canvas-bg: #d1d1d1;
}

[data-theme="dark"] {
  --bg-color: #131313;
  --text-color: #c6c6c6;
  --line-color: #c6c6c6;
  --panel-border: #c6c6c6;
  --cursor-border: #c6c6c6;
  --canvas-bg: #131313;
}

html,
body {
  background: var(--bg-color);
  color: var(--text-color);
  overflow: hidden;
  height: 100%;
  transition: background 0.4s ease, color 0.4s ease;
}

/* --------------------------------------------------------------------------
   Custom cursor
   -------------------------------------------------------------------------- */

.circle {
  --circle-size: 40px;
  position: fixed;
  height: var(--circle-size);
  width: var(--circle-size);
  border: 1px solid var(--cursor-border);
  border-radius: 100%;
  top: calc(var(--circle-size) / 2 * -1);
  left: calc(var(--circle-size) / 2 * -1);
  pointer-events: none;
  z-index: 9999;
}

/* --------------------------------------------------------------------------
   Top-level interactive labels
   -------------------------------------------------------------------------- */

.site-title,
.about-me,
.contact-me,
.light-mode,
.dark-mode,
.projects-button {
  color: var(--text-color);
  user-select: none;
  z-index: 10;
}

.site-title:hover,
.about-me:hover,
.contact-me:hover,
.light-mode:hover,
.dark-mode:hover,
.projects-button:hover,
.project-title:hover,
.hover-link:hover {
  opacity: 0.25;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* --------------------------------------------------------------------------
   Iframe (clipped between the top and bottom lines)
   -------------------------------------------------------------------------- */

.iframe-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; /* above iframe, captures mouse so the iframe stays inert */
  pointer-events: auto;
  background: transparent;
}

/* The container sits exactly between the top and bottom lines and clips
   anything that would extend past them. Using both `vh` and `dvh` keeps
   the bottom edge aligned to the line even when mobile browser chrome
   shows or hides. */
.iframe-mask-container {
  position: fixed;
  top: 15vh;
  top: 15dvh;
  left: 0;
  right: 0;
  bottom: 15vh;
  bottom: 15dvh;
  overflow: hidden;
}

/* The iframe is intentionally taller than the container so the wave keeps
   the same aspect ratio it had with the original `height: 90vh` setup —
   the container's `overflow: hidden` clips the parts that overflow. */
.iframe-mask-container iframe {
  position: absolute;
  top: -15vh;
  top: -15dvh;
  left: 0;
  width: 100%;
  height: 90vh;
  height: 90dvh;
  display: block;
  border: 0;
}

/* --------------------------------------------------------------------------
   Header / footer labels
   -------------------------------------------------------------------------- */

.site-title {
  font-family: "SpaceMono", monospace;
  font-size: calc(var(--index) * 1.7 + var(--i) * 0.5);
  position: fixed;
  font-weight: 1000;
  letter-spacing: 0.05em;
  top: 3vh;
  left: 2.5vw;
  pointer-events: auto;
  cursor: pointer;
}

.about-me,
.contact-me,
.light-mode,
.dark-mode,
.projects-button {
  font-family: "SpaceMonoBold", monospace;
  font-size: calc(var(--index) * 0.65);
  font-weight: 1000;
  position: fixed;
  cursor: pointer;
}

.about-me      { top: 11.3vh; right: 1.5vw;  }
.contact-me    { top: 11.3vh; right: 5.5vw;  }
.projects-button { top: 11.3vh; right: 10.4vw; }
.light-mode    { bottom: 11.3vh; right: 1.5vw; }
.dark-mode     { bottom: 11.3vh; right: 5vw;   }

.about-text {
  font-family: "SpaceMonoBold", monospace;
  font-size: calc(var(--index) * 0.65);
  font-weight: 1000;
  position: fixed;
  bottom: calc(15vh + 3vh);
  left: 2vw;
  color: var(--text-color);
  z-index: 10;
  user-select: none;
  transition: color 0.4s ease, opacity 0.4s ease;
}

.about-text.hidden {
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Lines
   -------------------------------------------------------------------------- */

.line {
  position: fixed;
  background: var(--line-color);
  z-index: 10;
  transition: background 0.4s ease;
}

.line-horizontal {
  height: 1px;
  width: 100vw;
  left: 0;
}

.top-line    { top: 15vh;    right: 0; }
.bottom-line { bottom: 15vh; right: 0; }

/* --------------------------------------------------------------------------
   Scroller (project list)
   -------------------------------------------------------------------------- */

.scroller-container {
  position: fixed;
  align-items: center;
  top: 15vh;
  left: 1.1vw;
  width: 70%;
  height: 70vh;
  overflow-y: auto;
  padding: 20px;
  background: transparent;
  scrollbar-width: none;
  opacity: 0;
  pointer-events: none;
  z-index: 9;
  transition: opacity 0.4s ease;
}

.scroller-container.show {
  opacity: 1;
  pointer-events: auto;
}

.scroller-container::-webkit-scrollbar {
  display: none;
}

.scroller-content div {
  font-family: "SpaceMono", monospace;
  font-size: calc(var(--index) * 2.3);
  margin-bottom: 30px;
  line-height: 1.75;
}

/* Per-row overrides (formerly inline styles). The compound selector beats
   the `.scroller-content div` base rule above. */
.scroller-content .scroller-spacer {
  font-size: calc(var(--index) * 2);
  line-height: 1.8;
}

.scroller-content .project-title {
  font-family: "SpaceMono", monospace;
  font-size: calc(var(--i) * 2);
  line-height: 1.05;
  cursor: pointer;
}

.scroller-content .project-meta {
  font-family: "SpaceMonoBold", monospace;
  font-size: calc(var(--i) * 0.6);
  font-weight: 900;
  line-height: 1.25;
  margin-top: -1.5em;
}

.scroller-content .project-gap {
  font-family: "SpaceMonoBold", monospace;
  font-size: calc(var(--i) * 0.6);
  font-weight: 900;
  line-height: 1.25;
}

/* --------------------------------------------------------------------------
   Side panels (About / Contact / Project detail)
   -------------------------------------------------------------------------- */

.about-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: 30vw;
  background: var(--bg-color);
  color: var(--text-color);
  border-left: 1px solid var(--panel-border);
  font-family: "SpaceMono", monospace;
  overflow: hidden;
  z-index: 8;
  transform: translateX(100%);
  padding: 0;
  transition: transform 0.8s ease, padding 0.8s ease, background 0.4s ease, color 0.4s ease, border-color 0.4s ease;
}

.about-panel.show {
  transform: translateX(0);
  font-weight: 900;
  padding: 17vh 3vw 2vh 4vw;
}

.about-content {
  opacity: 0;
  transform: translateX(30%);
  transition: opacity 0.6s ease 0.25s, transform 0.6s ease 0.25s, color 0.4s ease;
  font-size: calc(var(--i) * 0.65);
  line-height: 1.25;
  word-spacing: 0.05em;
  letter-spacing: 0.05em;
  font-weight: bold;
  color: var(--text-color);
}

.about-content h2 {
  font-family: "SpaceMonoBold", monospace;
  font-size: calc(var(--i) * 0.7);
  font-weight: bold;
  margin-bottom: 1rem;
  letter-spacing: 0em;
  word-spacing: 0em;
}

.about-panel.show .about-content {
  opacity: 1;
  transform: translateX(0);
}

a {
  color: inherit;
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 950px) {
  .about-me,
  .contact-me,
  .light-mode,
  .dark-mode,
  .projects-button {
    right: 1.2vw;
    font-size: calc(var(--index) * 0.6);
    transform: none;
  }

  .about-me      { top: 5.5vh; }
  .contact-me    { top: 8.5vh; }
  .projects-button { top: 11.5vh; }
  .light-mode    { bottom: 12vh; }
  .dark-mode     { bottom: 9vh;  }
}