html.page-design,
.page-design body {
  height: 100vh;
  overflow: hidden;
}

/* CAROUSEL ANIMATION tokens (--carousel-duration, --carousel-ease,
   --carousel-scale-*, --carousel-opacity-*) now live in css/style.css's
   :root, since the About overlay's image gallery reuses the exact same
   values and style.css is the one stylesheet loaded on every page.
   ANIMATION_LOCK_MS in js/carousel.js should roughly match
   --carousel-duration so the input lock and the visual settle
   take the same amount of time. */

.carousel {
  position: fixed;
  inset: 0;
  overflow: hidden;
  cursor: grab;
  touch-action: none; /* we handle drag ourselves, don't let the browser scroll/zoom */
}

.carousel.is-dragging {
  cursor: grabbing;
}

/* Track holds one full-viewport-width slide per project, laid out side by side. */
.carousel-track {
  display: flex;
  height: 100%;
  padding-top: 20px;
  will-change: transform;
  transition: transform var(--carousel-duration) var(--carousel-ease);
}

/* While dragging, the track follows the pointer 1:1 with no transition. */
.carousel-track.is-dragging {
  transition: none;
}

/* Each slide is exactly the width of the carousel, so translating the
   track by whole multiples of that width always lands a slide dead
   center — no per-item width math needed. */
.carousel-item {
  flex: none;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The visible video box — this is what actually scales up/down.
   --item-aspect-ratio / --item-width are set inline per-slide from
   project.aspectRatio / project.width in js/carousel.js, for projects
   whose video isn't the default portrait shape (e.g. a landscape piece). */
.carousel-item-frame {
  width: var(--item-width, min(460px, 70vw));
  aspect-ratio: var(--item-aspect-ratio, 9 / 19.5);
  transform: scale(var(--carousel-scale-inactive));
  opacity: var(--carousel-opacity-inactive);
  transition: transform var(--carousel-duration) var(--carousel-ease), opacity var(--carousel-duration) var(--carousel-ease);
  cursor: none; /* the custom "Learn more" pill replaces the native cursor here */
}

.carousel.is-dragging .carousel-item-frame {
  cursor: grabbing; /* mid-drag, fall back to the normal grab cursor */
  transition: none; /* scale is driven 1:1 by the pointer during a drag, see js/carousel.js */
}

.carousel.has-open-tooltip .carousel-item-frame {
  cursor: default; /* tooltip is open — next click closes it, so drop the "Learn more" affordance */
}

.carousel-item-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none; /* let drags pass through to the carousel, no native video drag-ghost */
  -webkit-user-drag: none;
}

.carousel-item.is-active .carousel-item-frame {
  transform: scale(var(--carousel-scale-active));
  opacity: var(--carousel-opacity-active);
}

/* CAPTION_DURATION in js/carousel.js should match --caption-duration below,
   since that value also times the text swap between the leave/enter halves. */
:root {
  --caption-duration: 250ms;
}

.caption {
  position: fixed;
  left: 50%;
  bottom: 114px; /* clears the pill nav (bottom: 24px, ~59px tall) with room to spare */
  max-width: 320px;
  z-index: 5;
  text-align: center;
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  transition: transform var(--caption-duration) var(--carousel-ease), opacity var(--caption-duration) var(--carousel-ease);
}

/* Shared "hidden" state for both directions: added going out (slides down +
   fades out), removed coming back in (slides up into place + fades in).
   translateX(-50%) is repeated here since it's part of the same transform
   property as the translateY animation — dropping it would un-center the
   caption while it's transitioning. */
.caption.is-leaving {
  transform: translateX(-50%) translateY(20px);
  opacity: 0;
}

.caption-title {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 18px;
}

.caption-meta {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
}

.bottom-fade {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 420px;
  background: linear-gradient(to top, #ffffff 50%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
  z-index: 4;
}

@media (prefers-reduced-motion: reduce) {
  .carousel-track,
  .carousel-item-frame,
  .caption {
    transition-duration: 1ms;
  }
}

/* ================================================================
   CLICK-TO-DROP TOOLTIP — tweak these to change the reveal feel. The
   "Learn more" hover cursor itself is shared (js/hover-cursor.js,
   .hover-cursor rules in css/style.css) since the Music page uses the same
   component with a different label.
   ================================================================ */
:root {
  --tooltip-scale-duration: 350ms;
  --tooltip-text-reveal-duration: 550ms;
}

/* Tooltip "dropped" at the click point — grows from its bottom-left corner,
   like a comment pinned where the user clicked (it does not follow the cursor). */
.frame-tooltip {
  position: fixed;
  z-index: 60;
  box-sizing: border-box;
  padding: 16px;
  width: auto;
  max-width: 280px; /* longer captions wrap instead of stretching the box edge to edge */
  height: auto;
  background: #ffffff;
  border: 1px solid #f8f8f8;
  border-radius: 20px;
  transform-origin: bottom left;
  transform: scale(0);
  transition: transform var(--tooltip-scale-duration) var(--carousel-ease);
  pointer-events: none;
}

.frame-tooltip.is-visible {
  transform: scale(1);
}

.frame-tooltip-text {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  /* Starts fully clipped; reveals left-to-right once the box has finished
     scaling in. A simple "typing" stand-in that also works across the
     wrapped multi-line copy (a plain width transition only reveals cleanly
     on a single line). */
  clip-path: inset(0 100% 0 0);
  transition: clip-path var(--tooltip-text-reveal-duration) var(--carousel-ease);
}

.frame-tooltip.is-text-visible .frame-tooltip-text {
  clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
  .frame-tooltip,
  .frame-tooltip-text {
    transition-duration: 1ms;
  }
}

@media (max-width: 630px) {
  .carousel-track {
    padding-top: 80px;
  }
  .caption {
    bottom: 88px;
    width: 100%;
  }
  .bottom-fade {
  height: 300px;
  }
  .site-bio p + p {
    display: none;
  }
}