/* ============================================================
   Uplift Video
   Palette: Classic Black / Golden Pitch / Power Orange / Off White
   ============================================================ */

:root {
  --black:      #000000;
  --pitch:      #37342A;
  --pitch-deep: #201E17;
  --orange:     #FF3C00;
  --bone:       #EAE8D8;
  --bone-dim:   rgba(234, 232, 216, 0.52);

  --pad: clamp(20px, 5vw, 68px);
  --gap: clamp(10px, 1.4vw, 20px);
  --max: 1400px;

  /* Fallback wordmark size before script.js measures the real glyph width. */
  --wordmark-size: calc(min(var(--max), 100vw - (2 * var(--pad))) * 0.098);
}

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

html {
  scrollbar-gutter: stable;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--black);
  color: var(--bone);
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--orange); color: var(--black); }

.page {
  max-width: var(--max);
  margin-inline: auto;
  padding: clamp(30px, 6vw, 76px) var(--pad) clamp(64px, 10vw, 148px);
}

/* ---------- Masthead ---------- */

.masthead { overflow: clip; }

.wordmark {
  margin: 0;
  font-size: var(--wordmark-size);
  font-weight: 800;
  font-stretch: 125%;
  letter-spacing: -0.022em;
  line-height: 0.84;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone);
}

.wordmark__text { display: inline-block; }

/* Label + rule: the same 2px orange line used as the playhead on each film. */
.rule-row {
  display: flex;
  align-items: center;
  gap: clamp(12px, 1.6vw, 20px);
  margin-top: clamp(16px, 2.2vw, 26px);
}

.label {
  flex: 0 0 auto;
  font-family: "Martian Mono", ui-monospace, "SFMono-Regular", monospace;
  font-size: clamp(9px, 1.05vw, 11px);
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
}

.rule {
  flex: 1 1 auto;
  height: 2px;
  background: var(--orange);
}

/* ---------- Grid ---------- */

.grid {
  list-style: none;
  margin: clamp(40px, 6vw, 80px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap);
}

.tile {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: var(--pitch-deep);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.tile:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

.tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  filter: brightness(0.78) saturate(0.85);
  transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), filter 0.4s ease;
}

.tile.is-loaded .tile__img { opacity: 1; }

.tile:hover .tile__img,
.tile:focus-visible .tile__img {
  filter: none;
  transform: scale(1.045);
}

/* Transport: play glyph + playhead sweep */
.tile__play {
  position: absolute;
  left: clamp(10px, 1.2vw, 16px);
  bottom: clamp(12px, 1.4vw, 18px);
  width: 13px;
  height: 15px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tile__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.tile:hover .tile__play,
.tile:focus-visible .tile__play { opacity: 1; transform: translateY(0); }

.tile:hover .tile__bar,
.tile:focus-visible .tile__bar { transform: scaleX(1); }

/* ---------- Contact ---------- */

.contact { margin-top: clamp(68px, 10vw, 130px); }

.email {
  position: relative;
  display: inline-block;
  margin-top: clamp(16px, 2.2vw, 26px);
  font-size: clamp(1.05rem, 2.8vw, 1.85rem);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -0.008em;
  line-height: 1.05;
  color: var(--orange);
  text-decoration: none;
}

.email::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.1em;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.email:hover::after,
.email:focus-visible::after { transform: scaleX(1); }

.email:focus-visible { outline: 2px solid var(--bone); outline-offset: 6px; }

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.22s ease;
}

.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__stage {
  position: relative;
  width: min(1180px, 100%, calc(78vh * 16 / 9));
  aspect-ratio: 16 / 9;
  background: var(--black);
  transform: scale(0.985);
  transition: transform 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.lightbox.is-open .lightbox__stage { transform: scale(1); }

.lightbox__stage iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.lightbox__close {
  position: absolute;
  top: clamp(14px, 3vw, 34px);
  right: clamp(14px, 3vw, 34px);
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding: 10px 4px;
  border: 0;
  background: none;
  cursor: pointer;
  font-family: "Martian Mono", ui-monospace, "SFMono-Regular", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  transition: color 0.2s ease;
}

.lightbox__close span { font-size: 1.5em; line-height: 0.6; }
.lightbox__close:hover { color: var(--orange); }
.lightbox__close:focus-visible { outline: 2px solid var(--orange); outline-offset: 4px; color: var(--bone); }

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

@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .label { font-size: 9px; letter-spacing: 0.12em; }
  .lightbox { place-items: center; }
  .lightbox__close { top: auto; bottom: clamp(20px, 6vw, 40px); right: 50%; transform: translateX(50%); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
  .tile:hover .tile__img,
  .tile:focus-visible .tile__img { transform: none; }
}