/* ── Reset ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Tokens ──────────────────────────────────────────── */
:root {
  --color-primary:   #000000;
  --color-secondary: #A0A0A0;
  --font:            'Inter', sans-serif;
  --text-size:       14px;
  --line-height:     20px;
  --body-width:      550px;
  --video-radius:    4px;
  --section-gap:     50px;
  --color-white:     #FFFFFF;
  --color-hover-bg:  #F5F8FF;
  --color-accent:    #3D71FF;

  /* ── Toast palette ────────────────────────────────── */
  --toast-1: #FF8617;
  --toast-2: #837BE2;
  --toast-3: #FAA300;
  --toast-4: #E965A9;
  --toast-5: #49581D;
  --pill-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.08);
}

/* ── Selection ───────────────────────────────────────── */
::selection {
  background-color: var(--selection-bg, #F9E7D6);
  color: var(--color-primary);
}

::-moz-selection {
  background-color: var(--selection-bg, #F9E7D6);
  color: var(--color-primary);
}

/* ── Base ────────────────────────────────────────────── */
html {
  font-family: var(--font);
  font-size: var(--text-size);
  font-weight: 400;
  line-height: var(--line-height);
  color: var(--color-primary);
  background-color: #ffffff;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  min-height: 100vh;
}

/* ── Layout ──────────────────────────────────────────── */
.page {
  width: var(--body-width);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--section-gap);
  padding-bottom: var(--section-gap);
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.page-projects {
  min-height: 100vh;
}

.page-projects #projects {
  flex: 1;
  display: flex;
  align-items: center;
}

.page-projects #projects .projects {
  width: 100%;
}

/* ── Typography ──────────────────────────────────────── */
p {
  text-align: left;
  color: var(--color-primary);
}

/* ── Links ───────────────────────────────────────────── */
a {
  color: var(--color-primary);
  text-decoration: none;
}

a.underline {
  border-bottom: 1px solid var(--color-primary);
  padding-bottom: 1px;
}

a.underline:hover {
  border-bottom-color: var(--color-secondary);
}

/* ── Utilities ───────────────────────────────────────── */
.text-secondary {
  color: var(--color-secondary);
}

/* ── Mobile ──────────────────────────────────────────── */
@media (max-width: 599px) {
  :root {
    --text-size: 16px;
  }

  .page {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── Nav ─────────────────────────────────────────────── */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

.nav-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-left-link {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-decoration: none;
}

.nav-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.nav-name {
  color: var(--color-primary);
  text-decoration: none;
}

.nav-location {
  text-decoration: none;
}

.nav-status {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.nav-status.online  { background-color: #28C840; }
.nav-status.offline { background-color: #FF5F57; }

.nav-clock {
  line-height: var(--line-height);
}

/* ── About picture ──────────────────────────────────── */
.about-picture-wrapper {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--video-radius);
  overflow: hidden;
}

.about-picture {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Video ───────────────────────────────────────────── */

.reel-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--video-radius);
  overflow: hidden;
  cursor: none;
  background-color: transparent;
}

.reel-wrapper.playing {
  cursor: default;
}

.reel-loop,
.reel-embed {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: opacity 0.4s ease;
}

.reel-loop video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reel-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.reel-embed {
  opacity: 0;
  display: none;
  pointer-events: none;
}

.reel-wrapper.playing .reel-loop {
  opacity: 0;
  pointer-events: none;
}

.reel-wrapper.playing .reel-embed {
  display: block;
  opacity: 1;
  pointer-events: all;
}



/* ── Projects ────────────────────────────────────────── */
.projects {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.projects-title {
  color: var(--color-primary);
}

.projects-list {
  list-style: none;
  width: 100%;
}

.project-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 45px;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease, padding 0.2s ease;
}

.project-item.is-hovered {
  padding: 0 10px;
}

.project-name,
.project-year {
  transition: color 0.2s ease, font-weight 0.2s ease;
}

.project-item.is-hovered .project-name,
.project-item.is-hovered .project-year {
  font-weight: 500;
}

.project-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

/* ── Clock colon blink ───────────────────────────────── */
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.clock-colon {
  animation: blink 1s step-start infinite;
}

/* ── Link icon ───────────────────────────────────────── */
.link-icon {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: middle;
  margin-bottom: 2px;
  stroke: currentColor;
  stroke-width: 2;
}

/* ── Email link ──────────────────────────────────────── */
.email-link {
  cursor: pointer;
}


a.underline-hover:hover {
  border-bottom-color: var(--color-primary);
}

/* ── Copy hover hint ─────────────────────────────────── */
@keyframes hint-in {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

.email-hint {
  position: fixed;
  display: none;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: var(--font);
  font-size: var(--text-size);
  font-weight: 400;
  line-height: 1;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
  box-shadow: var(--pill-shadow);
}

/* ── Reel hover hint ─────────────────────────────────── */
.reel-hint {
  position: fixed;
  display: none;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  background-color: transparent;
  color: var(--color-primary);
  font-family: var(--font);
  font-size: var(--text-size);
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  z-index: 1000;
  box-shadow: var(--pill-shadow);
}

/* ── Edge arrow cursor ───────────────────────────────── */
.edge-arrow {
  position: fixed;
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
}

@keyframes arrow-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.edge-arrow-icon {
  display: block;
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
}

body.hide-cursor {
  cursor: none;
}

body.hide-cursor * {
  cursor: none !important;
}

/* ── Copied toast ────────────────────────────────────── */
@keyframes toast {
  0%   { opacity: 0; transform: translateY(calc(-50% + 5px)); animation-timing-function: cubic-bezier(0.00, 0.60, 0.40, 1.00); }
  50%  { opacity: 1; transform: translateY(-50%);             animation-timing-function: cubic-bezier(0.50, 0.01, 0.50, 1.00); }
  100% { opacity: 0; transform: translateY(-50%); }
}

.email-wrapper {
  position: relative;
}

.email-copied {
  position: absolute;
  left: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 6px;
  background-color: transparent;
  color: var(--color-primary);
  font-family: var(--font);
  font-size: var(--text-size);
  font-weight: 500;
  line-height: 1;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  animation: toast 1s linear forwards;
  box-shadow: var(--pill-shadow);
}

/* ── Loader ───────────────────────────────────────────── */
@keyframes loader-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; }
}

.loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.loader.hidden {
  display: none;
}

.loader-gif {
  width: 150px;
  height: auto;
  display: block;
  user-select: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.loader-gif.visible {
  opacity: 1;
}

.loader.fading {
  animation: loader-fade-out 0.5s cubic-bezier(0, 0.6, 0.5, 1) forwards;
}

/* ── Section reveal ───────────────────────────────────── */
.section.reveal-hidden {
  opacity: 0;
  transform: translateY(10px);
}

.project-item.reveal-hidden {
  opacity: 0;
  transform: translateY(5px);
}

.section.reveal-in,
.project-item.reveal-in {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s cubic-bezier(0, 0.6, 0.5, 1),
              transform 0.5s cubic-bezier(0, 0.6, 0.5, 1);
}