/* Home page */

.hero { position: relative; padding-top: calc(96 * var(--u)); }

.hero-top { display: grid; }
.hero-head { grid-area: 1 / 1; margin: 0; font-weight: 500; font-size: calc(118 * var(--u)); line-height: 1.02; letter-spacing: -0.025em; }
.hero-head .hl { display: block; white-space: nowrap; }
.hero-head .accent { color: var(--pink); }
.hero-head .nb { white-space: nowrap; }
.hero-line { grid-area: 2 / 1; justify-self: start; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.28em; margin-top: calc(28 * var(--u)); font-weight: 300; font-size: calc(56 * var(--u)); line-height: 1.12; letter-spacing: -0.015em; }
.hero-stack { list-style: none; margin: 0; padding: 0; display: grid; }
.hero-stack li { grid-area: 1 / 1; white-space: nowrap; opacity: 0; color: var(--pink); animation: tag-cycle 17.6s cubic-bezier(0.22, 0.61, 0.36, 1) infinite both; animation-delay: calc(0.5s + var(--i, 0) * 2.2s); }
/* each line rises in pink, settles to ink, then flushes pink again as it leaves */
@keyframes tag-cycle {
  0%      { opacity: 0; transform: translateY(calc(34 * var(--u))); color: var(--pink); }
  2.6%    { opacity: 1; transform: translateY(0); color: var(--pink); }
  4.9%    { opacity: 1; transform: translateY(0); color: var(--ink); }
  8.6%    { opacity: 1; transform: translateY(0); color: var(--ink); }
  11.4%   { opacity: 0; transform: translateY(calc(-12 * var(--u))); color: var(--pink); }
  100%    { opacity: 0; transform: translateY(calc(-12 * var(--u))); color: var(--pink); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-stack li { animation: none; opacity: 1; color: var(--ink); grid-area: auto; }
  .hero-stack li:not(:first-child) { display: none; }
}
.about-copy { width: calc(812 * var(--u)); max-width: 100%; margin-top: calc(26 * var(--u)); }
.about-copy p + p { margin-top: calc(17.1 * var(--u)); }
.about-copy .accent { color: var(--pink); font-weight: 500; }

.hero-star {
  position: absolute;
  top: calc(71 * var(--u));
  right: calc(105 * var(--u));
  width: calc(65 * var(--u));
  height: auto;
}

/* ---------------- Looping video marquee ---------------- */

.marquee {
  position: relative;
  height: calc(316 * var(--u));
  margin-top: calc(84 * var(--u));
  overflow: hidden;
  --marquee-gap: calc(50 * var(--u));
}
.marquee-gap { position: absolute; width: var(--marquee-gap); height: 0; visibility: hidden; }

.marquee-card {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(560 * var(--u));
  height: 100%;
  background: #1b1916;
  will-change: transform;
  cursor: pointer;
}
.marquee-card video {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.marquee-veil, .marquee-title { z-index: 5; }

/* Soft white veil over every clip; it lifts on hover and a small title appears */
.marquee-veil {
  position: absolute;
  inset: 0;
  background: rgba(255, 253, 248, 0.4);
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.marquee-title {
  position: absolute;
  left: calc(20 * var(--u));
  bottom: calc(20 * var(--u));
  max-width: calc(100% - 40 * var(--u));
  padding: calc(9 * var(--u)) calc(14 * var(--u));
  background: var(--cream);
  color: var(--ink);
  font-weight: 500;
  font-size: calc(18 * var(--u));
  line-height: 1.1;
  opacity: 0;
  transform: translateY(calc(6 * var(--u)));
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}
.marquee-card:hover .marquee-veil,
.marquee-card:focus-visible .marquee-veil { opacity: 0; }
.marquee-card:hover .marquee-title,
.marquee-card:focus-visible .marquee-title { opacity: 1; transform: none; }
/* touch screens have no hover: keep clips clear, no veil */
@media (hover: none) { .marquee-veil, .marquee-title { display: none; } }

/* Fallback when scrolling can't run (reduced motion): plain swipeable strip */
.marquee.is-static { overflow-x: auto; display: flex; gap: var(--marquee-gap); scrollbar-width: none; }
.marquee.is-static::-webkit-scrollbar { display: none; }
.marquee.is-static .marquee-card { position: relative; flex: none; }

/* ---------------- Featured work ---------------- */

.featured { padding-top: calc(138.7 * var(--u)); }

.section-title {
  font-weight: 500;
  font-size: calc(29.6 * var(--u));
  line-height: 1.325;
}

.featured .card-grid { margin-top: calc(58.1 * var(--u)); }

.see-more {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(306 * var(--u));
  height: calc(105 * var(--u));
  margin-top: calc(69 * var(--u));
  border: 1px solid var(--ink);
  font-weight: 500;
  font-size: calc(29.6 * var(--u));
  line-height: 1;
  transition: color 0.18s ease, border-color 0.18s ease;
}
.see-more:hover,
.see-more:focus-visible { color: var(--pink); border-color: var(--pink); }

main:has(.featured) + .site-footer { margin-top: calc(182 * var(--u)); }

@media (max-width: 900px) {
  .hero { padding-top: 74px; }
  .hero-top { row-gap: 26px; }
  .hero-head { grid-area: auto; font-size: 40px; }
  .hero-head .hl { display: inline; white-space: normal; }
  .hero-line { grid-area: auto; margin-top: 0; font-size: 26px; }
  .about-copy { width: auto; }
  .about-copy p { font-size: 18px; line-height: 1.35; }
  .about-copy p + p { margin-top: 14px; }
  .hero-star { top: 18px; right: 22px; width: 38px; }

  .marquee { height: 124px; margin-top: 40px; --marquee-gap: 12px; touch-action: pan-y; }
  .marquee-card { width: 220px; }
  .marquee-title { left: 10px; bottom: 10px; padding: 5px 8px; font-size: 12px; }
  .marquee.is-static { padding-inline: 22px; }

  .featured { padding-top: 64px; }
  .section-title { font-size: 22px; }
  .featured .card-grid { margin-top: 26px; }
  .see-more { width: 190px; height: 66px; margin-top: 36px; font-size: 20px; }
  main:has(.featured) + .site-footer { margin-top: 90px; }
}