/* ==========================================================================
   Components — one block per Figma component set.
   Figma variants → CSS states:
     state=hover           → :hover / :focus-visible
     state=selected        → [aria-expanded="true"], [aria-pressed="true"], [aria-current="page"], .is-selected
     state=selected-hover  → selected + :hover
     device=mobile         → tokens swap automatically below 76.8rem (see tokens.css)
   ========================================================================== */

/* ---- button ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--button-pad);
  border-radius: var(--radius-button);
  background: var(--color-button);
  color: var(--color-text-secondary);
  font-size: var(--type-button-size);
  line-height: var(--type-button-lh);
  letter-spacing: var(--type-button-ls);
  white-space: nowrap;
  transition: background-color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) { .btn:hover { background: var(--color-button-hover); } }
.btn[aria-expanded="true"],
.btn[aria-pressed="true"],
.btn[aria-current="page"],
.btn.is-selected { background: var(--color-button-selected); }
@media (hover: hover) { .btn[aria-expanded="true"]:hover, .btn[aria-pressed="true"]:hover, .btn[aria-current="page"]:hover, .btn.is-selected:hover { background: var(--color-button-selected-hover); } }

.btn-group { display: flex; gap: var(--dash-gap); }   /* buttons sit as close as the dashboard sections */
.btn-group--stack { flex-direction: column; align-items: flex-start; }
.btn-group--fill > .btn { flex: 1 1 0; min-width: 0; }

/* ---- dashboard-button (the ⋮ toggle) ----------------------------------- */
.dash-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: var(--dash-button-width);
  height: var(--carousel-height);
  border-radius: var(--radius-card);
  background: var(--color-surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-radius var(--dur-hover) var(--ease-out);
}
.dash-btn__dots { display: flex; flex-direction: column; gap: var(--dash-dot-gap); transition: gap var(--dur-hover) var(--ease-out); }
.dash-btn__dots i { width: var(--dash-dot); height: var(--dash-dot); border-radius: 50%; background: var(--color-dot); }

@media (hover: hover) { .dash-btn:hover { background: var(--color-surface); border-radius: var(--radius-dash-button-hover); } }
.dash-btn[aria-expanded="true"] .dash-btn__dots { gap: var(--dash-dot-gap-open); }
@media (hover: hover) { .dash-btn:hover .dash-btn__dots { gap: var(--dash-dot-gap-open); } }
.dash-btn[aria-expanded="true"] { background: var(--color-surface); border-radius: var(--radius-card); }
@media (max-width: 767px) {
  .dash-btn { border-radius: var(--radius-button); }
  .dash-btn[aria-expanded="true"] { border-radius: var(--radius-button); }
}
@media (hover: hover) { .dash-btn[aria-expanded="true"]:hover { border-radius: var(--radius-dash-button-hover); } }
@media (hover: hover) { .dash-btn[aria-expanded="true"]:hover .dash-btn__dots { gap: var(--dash-dot-gap); } }

/* ---- project-carousel ------------------------------------------------------
   Vertical, auto-rotating slides (Aker-style). The whole box is the link to
   the visible project; hidden slides are `inert`. */
.carousel {
  position: relative;
  flex: none;
  width: var(--carousel-width);
  height: var(--carousel-height);
  border-radius: var(--radius-card);
  background: var(--color-surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  overflow: hidden;
  isolation: isolate;
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-radius var(--dur-hover) var(--ease-out);
}
.carousel.is-solid { background: var(--color-surface); }
.carousel:focus-within { background: var(--color-surface); border-radius: var(--radius-carousel-hover); }
@media (hover: hover) { .carousel:hover { background: var(--color-surface); border-radius: var(--radius-carousel-hover); } }

.carousel__slide {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--carousel-gap);
  padding: var(--carousel-pad);
  color: var(--color-text-secondary);
  transform: translateY(calc(100% + 1rem));
  transition: transform var(--dur-slow) var(--ease-out);
}
.carousel__slide.is-active { transform: none; }
.carousel__slide.is-leaving {
  transform: translateY(calc(-100% - 1rem)) scale(0.92);
  transform-origin: center bottom;
  opacity: 0;                                   /* fades and shrinks slightly as it slides out */
  transition: transform var(--dur-slow) var(--ease-out), opacity 600ms var(--ease-out);
}
.carousel__slide:focus-visible { outline-offset: -0.4rem; }

.carousel__thumb {
  position: relative;
  flex: none;
  align-self: stretch;
  width: var(--carousel-thumb-width);
  border-radius: var(--radius-thumb);
  overflow: hidden;
  background: var(--color-placeholder);
  transition: border-radius var(--dur-hover) var(--ease-out);
}
.carousel:focus-within .carousel__thumb { border-radius: var(--radius-carousel-thumb-hover); }
@media (hover: hover) { .carousel:hover .carousel__thumb { border-radius: var(--radius-carousel-thumb-hover); } }

.carousel__text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--carousel-text-gap);
  padding-bottom: var(--carousel-text-pb);
  /* text trails the image slightly, like the reference */
  transition: transform var(--dur-slow) var(--ease-out) 60ms;
}
.carousel__title { color: var(--color-text-primary); }

/* image crop helper — reproduces Figma's "stretch + transform" crops */
.crop { position: absolute; inset: 0; overflow: hidden; }
.crop img {
  position: absolute;
  max-width: none;
  width: var(--crop-w, 100%);
  height: var(--crop-h, 100%);
  left: var(--crop-x, 0);
  top: var(--crop-y, 0);
}
@media (max-width: 767px) {
  .crop img {
    width: var(--crop-mw, var(--crop-w));
    height: var(--crop-mh, var(--crop-h));
    left: var(--crop-mx, var(--crop-x));
    top: var(--crop-my, var(--crop-y));
  }
}

@media (max-width: 767px) {
  .carousel { flex: 1 1 0; min-width: 0; border-radius: var(--radius-button); }
  .carousel__thumb { align-self: auto; height: 8.4rem; }
  /* phones: the carousel image is drawn exactly like the project-list tile image */
  .carousel__thumb .crop {
    transform: translateX(var(--tile-shift-m, 0%)) scale(var(--tile-zoom-m, 1));
    transform-origin: var(--tile-zoom-origin-m, 50% 50%);
  }
  .carousel__thumb .crop img { width: auto; left: calc(50% + var(--crop-mcx, 0rem)); transform: translateX(-50%); }
}

/* ---- dashboard info card ------------------------------------------------ */
.card {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  padding: var(--card-pad);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  min-width: 0;
}
.card__title { color: var(--color-text-primary); white-space: nowrap; }
.card__list { display: flex; flex-direction: column; gap: var(--list-gap); }
/* awards are two-line entries, so a little more air between them */
.card__list--awards { gap: 0.7em; }

/* ---- clock --------------------------------------------------------------- */
.clock { flex: none; width: var(--clock-size); height: var(--clock-size); overflow: visible; }
.clock__face { fill: none; stroke: var(--color-clock-face); stroke-width: 1; vector-effect: non-scaling-stroke; }
.clock__hand {
  stroke: var(--color-clock-face);
  stroke-width: 1;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  transform-box: view-box;
  transform-origin: 44px 44px;
}
.clock__hand--second { stroke: var(--color-clock-second); }

.time-readout { display: flex; flex-direction: column; white-space: nowrap; }

/* ---- project-list-tile --------------------------------------------------- */
.tile {
  display: flex;
  align-items: flex-end;
  gap: var(--tile-gap);
  height: var(--tile-height);
  padding: var(--tile-pad);
  border-radius: var(--radius-tile);
  background: var(--color-tile);
  font-size: var(--type-tile-size);
  line-height: var(--type-tile-lh);
  letter-spacing: var(--type-tile-ls);
  color: var(--color-text-secondary);
  transition:
    background-color var(--dur-hover) var(--ease-out),
    border-radius var(--dur-hover) var(--ease-out);
}
.tile__thumb {
  position: relative;
  flex: none;
  align-self: stretch;
  width: var(--tile-thumb);
  border-radius: var(--radius-thumb-tile);
  overflow: hidden;
  background: var(--color-placeholder);
  transition: border-radius var(--dur-hover) var(--ease-out);
}
/* wider tile thumbs: true proportions, same subject centered (see components.js) */
.tile__thumb .crop { transform: translateX(var(--tile-shift, 0%)) scale(var(--tile-zoom, 1)); transform-origin: var(--tile-zoom-origin, 50% 50%); }
.tile__thumb .crop img { width: auto; left: calc(50% + var(--crop-cx, 0rem)); transform: translateX(-50%); }
@media (max-width: 767px) {
  /* phones can use their own tile zoom (tileZoomMobile in content.js) */
  .tile__thumb .crop {
    transform: translateX(var(--tile-shift-m, var(--tile-shift, 0%))) scale(var(--tile-zoom-m, var(--tile-zoom, 1)));
    transform-origin: var(--tile-zoom-origin-m, var(--tile-zoom-origin, 50% 50%));
  }
  .tile__thumb .crop img { width: auto; left: calc(50% + var(--crop-mcx, var(--crop-cx, 0rem))); }
}
.tile__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 0.5rem; padding-bottom: 1rem; }
@media (max-width: 767px) { .tile__text { padding-bottom: 0.5rem; } }   /* phones: a little lower, like the carousel */
.tile__title { color: var(--color-text-primary); }

@media (hover: hover) { .tile:hover { background: var(--color-tile-hover); border-radius: var(--radius-tile-hover); } }
@media (hover: hover) { .tile:hover .tile__thumb { border-radius: var(--radius-thumb-tile-hover); } }

/* ---- footer --------------------------------------------------------------- */
.site-footer {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--footer-height);
  padding: 0 var(--space-edge);
  /* floats over the top of the home video */
  position: absolute;
  top: 0; left: 0; right: 0;
  background: transparent;
  color: rgb(255 255 255 / 0.85);   /* white, slightly see-through */
  font-size: var(--type-footer-size);
  line-height: var(--type-footer-lh);
  letter-spacing: var(--type-footer-ls);
  white-space: nowrap;
  z-index: 3;
}
.site-footer a {
  text-decoration: underline;
  text-decoration-color: rgb(255 255 255 / 0.5);   /* softer than the text; inverts with it */
  text-underline-offset: 0.2rem;
}
@media (max-width: 767px) {
  /* phones: footer bar at the very top, above the video (the toggle sits just below it, over the video) */
  /* phones: no footer bar, white text floating over the top of the video */
  .site-footer {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: auto;
    justify-content: center;
    align-items: flex-end;
    padding: 0.5rem var(--space-edge) 0.6rem;   /* a little room above the text, just under Safari's bar */
    background: transparent;
    color: rgb(255 255 255 / 0.85);
  }
  .site-footer a { text-decoration-color: rgb(255 255 255 / 0.5); }
  .site-footer__time { display: none; }  /* mobile footer in Figma omits the clock */
}

/* ---- media (project images/videos) --------------------------------------- */
.media-stack { display: flex; flex-direction: column; gap: var(--space-project); }
.media-row { flex: none; display: flex; gap: var(--space-project); }
.media {
  position: relative;
  flex: none;
  min-width: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: var(--color-placeholder) center / cover no-repeat;
  aspect-ratio: 475 / 299;
  isolation: isolate;
  transform: translateZ(0);                                  /* Safari: stable compositing */
  -webkit-mask-image: -webkit-radial-gradient(white, black);  /* Safari: rounded clip on video */
}
.media-row .media { flex: 1 1 0; aspect-ratio: 810 / 1029; }
.media > img, .media > video {
  transition: none;                /* appear as soon as ready — no crossfade */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
@media (max-width: 767px) {
}

/* ---- theme switch (top left, every page) --------------------------------- */
.theme-switch {
  position: fixed;
  z-index: 50;
  top: 2rem;
  left: 2rem;
  /* fixed pixel size: identical in every viewport (not scaled with the layout) */
  width: 46px;
  height: 26px;
  padding: 4px;
  border-radius: 999px;
  background: var(--color-surface-glass);
  -webkit-backdrop-filter: blur(var(--blur-glass));
  backdrop-filter: blur(var(--blur-glass));
  transition: background-color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) { .theme-switch:hover { background: var(--color-surface); } }
/* home: lighter frosted track over the video */
.page--home .theme-switch { background: var(--color-switch-home); }
@media (hover: hover) { .page--home .theme-switch:hover { background: var(--color-switch-home-hover); } }
.theme-switch__knob {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-switch-knob);
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.18);   /* lifts the white knob off light backgrounds */
  transition: transform 520ms var(--ease-switch), background-color var(--dur-hover) var(--ease-out);
}
/* keep the slide during the theme color crossfade (which overrides other transitions) */
.theme-changing .theme-switch__knob {
  transition: transform 520ms var(--ease-switch), background-color 600ms var(--ease-out) !important;
}
.theme-switch[aria-checked="true"] .theme-switch__knob { transform: translateX(20px); }
/* on white project pages the track uses the button grey so it stays visible */
.page--project .theme-switch { top: 1.4rem; left: 1.4rem; background: var(--color-button); -webkit-backdrop-filter: none; backdrop-filter: none; }
@media (hover: hover) { .page--project .theme-switch:hover { background: var(--color-switch-hover); } }
@media (max-width: 767px) {
  .theme-switch { top: 1.2rem; left: 1.2rem; }
  .page--home .theme-switch { top: calc(var(--footer-height) + var(--space-project)); left: var(--space-project); }   /* just below the top footer, over the video; same inset as project pages */
  .page--project .theme-switch { top: var(--space-project); left: var(--space-project); }   /* as high as the page padding allows */
}

/* Dashboard open: carousel + ⋮ are solid white; hovering drops them back to frosted glass */
@media (hover: hover) { .carousel.is-solid:hover, .dash-btn[aria-expanded="true"]:hover { background: var(--color-surface-glass); } }

/* button label that can fade out/in when its text changes (email "Copied") */
.btn__label { transition: opacity 220ms var(--ease-out); }
.btn__label.is-hidden { opacity: 0; }