/* =====================================================================
   Michael Pérlin — Index (main site)
   Built точь-в-точь from Figma frame 2006:25456 (MacBook Pro 16" — 1728×4644).
   Everything is laid out in design pixels and scaled to the viewport via
   --k = 100vw / 1728, so the page renders 1:1 at 1728px wide and scales
   proportionally on any desktop width.
   ===================================================================== */

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

:root {
  /* Licensed face from the design; same neutral grotesk fallback as the stub. */
  --font: "Neue Montreal", "PP Neue Montreal", "Helvetica Neue", Helvetica,
    Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", SFMono-Regular, Menlo,
    monospace;

  /* The single scaling unit: 1 design-px = calc(1 * var(--k)). */
  --k: calc(100vw / 1728);

  --ink: #000;
  --muted: #797979; /* accent words inside the intro (Figma) */
  --line: rgba(0, 0, 0, 0.26); /* social pill outlines */
}

html {
  background: #fff;
  /* Native, 1:1 scrolling — no smoothing/inertia layered on top. */
  scroll-behavior: auto;
}

body {
  position: relative;
  width: 100%;
  /* Full document length of the (now taller) Figma frame: works → social →
     footer. Sized to the frame so the social block scrolls fully above the
     docked continuation copy and the final merge lands on clean white. */
  height: calc(6162 * var(--k));
  /* Keep the fixed + mix-blend overlays compositing against page content
     rather than the browser backdrop (avoids the Chromium whiteout bug). */
  isolation: isolate;
  background: #fff;
  font-family: var(--font);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* The scrolling document holds everything laid out at absolute Figma coords. */
.doc {
  position: relative;
  width: 100%;
  height: calc(6162 * var(--k));
}

/* ---------- Fixed top intro (scroll-start, docks with the bottom copy) ---- */
.intro {
  position: fixed;
  top: 0;
  left: calc(35 * var(--k));
  width: calc(1658 * var(--k));
  height: calc(207 * var(--k));
  z-index: 30;
  pointer-events: none;
  mix-blend-mode: exclusion;
}

.intro__p {
  position: absolute;
  bottom: 0;
  left: 0;
  width: calc(1657 * var(--k));
  font-weight: 500;
  text-transform: lowercase;
  font-size: calc(38 * var(--k));
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #fff; /* white + exclusion → reads black over white, inverts over art */
}

.intro__p .muted {
  color: var(--muted);
}

.intro__p a {
  color: inherit;
  text-decoration: none;
  pointer-events: auto;
}

/* ---------- Works list ---------------------------------------------------- */
.works {
  position: absolute;
  top: calc(349 * var(--k));
  left: calc(35 * var(--k));
  width: calc(1658 * var(--k));
  /* Media/work blocks ride ABOVE the fixed intro text (z-index 30): as the
     list scrolls, the images overlap and pass over the pinned copy, exactly
     as in the Figma layout. Kept below the gallery toggle (40). */
  z-index: 35;
}

/* lead portrait + its "01" label, exported as one cell */
.lead {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(167 * var(--k));
  height: auto;
  display: block;
}

.row {
  position: absolute;
  left: 0;
}

.row__nums {
  position: absolute;
  top: 0;
  left: 0;
  height: calc(21 * var(--k));
}

.row__num {
  position: absolute;
  top: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: calc(11 * var(--k));
  line-height: 1.03;
  letter-spacing: -0.0192em;
  text-transform: lowercase;
  color: var(--ink);
}

.row__strip {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  height: auto;
}

/* invisible per-project hit targets (each item is a case-study entry).
   `top` is set per row inline (offset from the baked-in number bar). */
.work {
  position: absolute;
  display: block;
  cursor: pointer;
}

/* ---------- Live media overlays (videos sit on top of the row posters) ---- */
.vid {
  position: absolute;
  display: block;
  object-fit: cover;
  background: #000;
  border-radius: calc(2 * var(--k));
  /* above the flattened row strips; clicks fall through to .work targets */
  z-index: 2;
  pointer-events: none;
}

/* One cell (Row X, "lebowski") shows a portrait phone capture rotated to lie
   in a landscape cell, exactly as in Figma. Rotate around centre and swap the
   box so the rotated video fills the cell. */
.vid--rot90 {
  transform: rotate(90deg);
  transform-origin: center center;
}

/* ---------- Fixed "gallery" toggle (centered, mix-blend exclusion) -------- */
.gallery {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(146 * var(--k));
  height: calc(40 * var(--k));
  z-index: 40;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  mix-blend-mode: exclusion;
  font: inherit;
}

/* three orbiting dots (default state) */
.gallery__dots {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity 0.45s ease;
}

.gallery__dot {
  position: absolute;
  width: calc(7 * var(--k));
  height: calc(7 * var(--k));
  border-radius: 50%;
  background: #fff; /* exclusion → black over white */
}

/* triangular cluster, centered in the button box */
.gallery__dot--1 {
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% - 3.5 * var(--k)), calc(-50% - 3.5 * var(--k)));
  animation: orbit1 3.2s ease-in-out infinite;
}
.gallery__dot--2 {
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + 4.5 * var(--k)), calc(-50% - 3.5 * var(--k)));
  animation: orbit2 3.6s ease-in-out infinite;
}
.gallery__dot--3 {
  left: 50%;
  top: 50%;
  transform: translate(calc(-50% + 0.5 * var(--k)), calc(-50% + 3.5 * var(--k)));
  animation: orbit3 3.0s ease-in-out infinite;
}

@keyframes orbit1 {
  0%,
  100% {
    transform: translate(calc(-50% - 3.5 * var(--k)), calc(-50% - 3.5 * var(--k)));
  }
  50% {
    transform: translate(calc(-50% - 6 * var(--k)), calc(-50% - 1 * var(--k)));
  }
}
@keyframes orbit2 {
  0%,
  100% {
    transform: translate(calc(-50% + 4.5 * var(--k)), calc(-50% - 3.5 * var(--k)));
  }
  50% {
    transform: translate(calc(-50% + 6.5 * var(--k)), calc(-50% + 1 * var(--k)));
  }
}
@keyframes orbit3 {
  0%,
  100% {
    transform: translate(calc(-50% + 0.5 * var(--k)), calc(-50% + 3.5 * var(--k)));
  }
  50% {
    transform: translate(calc(-50% + 0.5 * var(--k)), calc(-50% + 6 * var(--k)));
  }
}

.gallery__word {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  text-transform: lowercase;
  font-size: calc(38 * var(--k));
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #fff;
  opacity: 0;
  transform: scale(0.96);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

.gallery:hover .gallery__dots,
.gallery:focus-visible .gallery__dots {
  opacity: 0;
}
.gallery:hover .gallery__word,
.gallery:focus-visible .gallery__word {
  opacity: 1;
  transform: scale(1);
}

/* ---------- Social pills (overlapping rounded-rect outlines) -------------- */
.social {
  position: absolute;
  top: calc(3615 * var(--k));
  left: calc(41.67 * var(--k));
  width: calc(1643.66 * var(--k));
  height: calc(1084.46 * var(--k));
}

.pill {
  position: absolute;
  border: 1px solid var(--line);
  border-radius: calc(1141 * var(--k));
  background: transparent;
  text-decoration: none;
  display: block;
}

.pill__label {
  position: absolute;
  font-weight: 500;
  text-transform: lowercase;
  font-size: calc(41.125 * var(--k));
  line-height: 1.1;
  color: var(--ink);
  white-space: nowrap;
}

/* Shape geometry = Figma inset values (percent of the .social group box).
   Label positions are derived from the Figma absolute label coordinates and
   re-expressed as a percentage of each *pill* (the label's positioning parent),
   so each sits exactly where the design places it — not auto-centered. */
.pill--inst {
  inset: 0 62.02% 22.32% 0;
}
.pill--inst .pill__label {
  left: 40.9%; /* upper area, horizontally centred in the tall pill */
  top: 11.9%;
}
.pill--tg {
  inset: 14% 31.92% 21.22% 31.61%;
}
.pill--tg .pill__label {
  left: 26.6%; /* wide label reads centred in the big circle */
  top: 34.4%;
}
.pill--mail {
  inset: 60.12% 58.66% 22.32% 14.6%;
}
.pill--mail .pill__label {
  left: 52.9%; /* lower-right of the small capsule */
  top: 34.4%;
}
.pill--x {
  inset: 46.56% 1.19% 21.22% 58.24%;
}
.pill--x .pill__label {
  left: 23.8%; /* left-of-centre, as in the design */
  top: 22.3%;
}
.pill--arena {
  inset: 81% 0 0 0;
}
.pill--arena .pill__label {
  left: 66.45%; /* right-of-centre in the full-width bottom capsule */
  top: 34.4%;
}

.pill:hover {
  border-color: rgba(0, 0, 0, 0.6);
}

/* ---------- Bottom continuation copy (scrolls up & docks) ----------------- */
.continuation {
  position: fixed;
  /* `top` is set by JS to the exact y of the intro's last line, so the copy
     docks seamlessly onto it (font-independent). */
  top: 0;
  left: calc(35 * var(--k));
  width: calc(1657 * var(--k));
  z-index: 25;
  font-weight: 500;
  text-transform: lowercase;
  font-size: calc(38 * var(--k));
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--ink);
  /* starts off-screen below; JS slides it up to dock at the bottom of scroll */
  transform: translateY(110vh);
  pointer-events: none;
}

.continuation .indent {
  /* first-line indent so "i also like…" begins exactly where the intro's last
     line ends ("…vibecoder. "). Width is measured + set by JS. */
  display: inline-block;
  width: 0;
}

.continuation a {
  color: rgba(0, 0, 0, 0.5);
  text-decoration: underline;
  text-underline-offset: 0.12em;
  pointer-events: auto;
}

/* ---------- Bottom bar: showreel + credit + clock ------------------------ */
.endbar {
  position: absolute;
  left: calc(41.87 * var(--k));
  top: calc(5892.9 * var(--k));
  width: calc(1644 * var(--k));
  height: calc(208 * var(--k));
}

.showreel {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(370 * var(--k));
  height: calc(208 * var(--k));
  object-fit: cover;
  border-radius: calc(2 * var(--k));
  display: block;
  background: #000;
}

.endbar__meta {
  position: absolute;
  left: calc(629 * var(--k));
  top: calc(183 * var(--k));
  width: calc(1014 * var(--k));
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-weight: 500;
  text-transform: lowercase;
  font-size: calc(20 * var(--k));
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.endbar__clock {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__dot {
    animation: none !important;
  }
}