/* ==================================================================
   Hero
   Title, rotating "I design ___" drum, stickers, Lottie line drawing, bio.
   Behaviour lives in js/hero.js; the title tilt lives in js/script.js.
   ================================================================== */

/* Clip sideways ONLY. Clipping both axes cut the top of the Lottie off in a
   hard line inside the body padding. `clip`, not `hidden`, so the other axis
   isn't forced to `auto` and this never becomes a scroll container (which
   would break position: sticky below). */
.hero {
  position: relative;
  overflow-x: clip;
  overflow-y: visible;
  color: #141118;
}

/* ---- Landing: exactly one screen. min-height subtracts body's top padding
   so the bottom lands on the viewport bottom, where the arrow sits. ---- */
.hero-landing {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 40px);
  min-height: calc(100svh - 40px);
}

/* ---- Lottie line drawing behind the title (positioned against the stage) ---- */
.hero-lottie {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 272px;
  width: 900px;
  height: 760px;
  pointer-events: none;
  transform: translate(calc(-50% + var(--par-x, 0px)), calc(-50% + var(--par-y, 0px)));
  transition: transform 400ms ease-out;
}
.hero-lottie svg { width: 100% !important; height: 100% !important; }

/* ---- Stage: title + rotating line; stickers are positioned against it ---- */
.hero-stage {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  /* Extra bottom room keeps the drum clear of the scroll arrow. */
  padding: 72px 24px 96px;
  text-align: center;
}

/* Shrink-wrapped around the title so the tilt in script.js measures the
   title itself, and so the 3D rotation has a perspective to render in. */
.hero-title-wrap {
  position: relative;
  z-index: 2;
  width: fit-content;
  margin: 0 auto;
  perspective: 1000px;
}

.hero-title {
  margin: 0;
  font-family: 'Instrument Serif', serif;
  font-weight: 400;
  font-size: clamp(56px, 10vw, 144px);
  line-height: 0.9;
  text-transform: uppercase;
  transition: transform 0.1s;
}
.hero-line { display: block; }
.hero-line--1 { transform: translateX(-0.7em); }
.hero-line--2 { transform: translateX(0.45em); }
.hero-line--3 { font-style: italic; }

/* ---- Stickers ---- */
.hero-stickers { position: absolute; inset: 0; z-index: 4; pointer-events: none; }

.hero-sticker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  opacity: 0;
  pointer-events: none;
  transform: rotate(var(--rot)) scale(0.3);
  transition: transform 560ms cubic-bezier(.34, 1.56, .64, 1), opacity 320ms ease;
  color: inherit;
  text-decoration: none;
  filter: drop-shadow(0 10px 18px rgba(20, 17, 24, 0.18));
}
.hero-sticker img,
.hero-sticker video { display: block; width: 100%; height: auto; }
.hero-sticker.is-on { opacity: 1; pointer-events: auto; transform: rotate(var(--rot)) scale(1); }
.hero-sticker.is-new { transform: rotate(var(--rot)) scale(1.06); }
.hero-sticker.is-on:hover,
.hero-sticker.is-on:focus-visible { transform: rotate(0deg) scale(1.12); }

/* While hero.js measures the fit: full-size, unrotated stickers and a still
   Lottie, with no transitions to animate the change back afterwards. */
.hero.is-fitting .hero-sticker,
.hero.is-fitting .hero-lottie { transition: none !important; }
.hero.is-fitting-transform .hero-sticker { transform: none !important; }
.hero.is-fitting-transform .hero-lottie { transform: translate(-50%, -50%) !important; }

/* Stand-in shown when a sticker's file is missing (hero.js swaps it in on
   load error). */
.hero-sticker__placeholder {
  display: block;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
  padding: 10px 16px;
  border: 3px solid var(--c);
  border-radius: 999px;
  background: #fff;
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 20px;
  line-height: 1.1;
  color: #141118;
  text-align: center;
}

/* ---- "I design ___" drum ---- */
.design-wheel {
  position: relative;
  z-index: 3;
  width: 440px;
  max-width: 100%;
  height: 160px;
  margin: 28px auto 0;
  perspective: 900px;
}
.design-wheel__lead {
  position: absolute;
  right: 56%;
  top: 50%;
  transform: translateY(-50%);
  font-family: 'Instrument Serif', serif;
  font-size: 40px;
  line-height: 1;
  white-space: nowrap;
}
.design-wheel__drum {
  position: absolute;
  left: 47%;
  right: 0;
  top: 0;
  bottom: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
          mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent);
}
.design-wheel__item {
  position: absolute;
  left: 0;
  top: 50%;
  height: 52px;
  margin-top: -26px;
  padding: 0;
  border: 0;
  background: none;
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Instrument Serif', serif;
  font-size: 40px;
  line-height: 1;
  white-space: nowrap;
  color: #6E6873;
  cursor: pointer;
  transform-origin: left center;
  transition: transform 620ms cubic-bezier(.2, .8, .2, 1), opacity 400ms ease, color 300ms ease;
}
.design-wheel__item.is-active { color: #141118; font-style: italic; }
.design-wheel__dot {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--dot);
  box-shadow: 0 0 0 1px rgba(20, 17, 24, 0.15);
  transform: scale(0);
  transition: transform 300ms ease;
}
.design-wheel__item.is-active .design-wheel__dot { transform: scale(1); }

/* ---- Bio: starts just below the landing screen ---- */
.hero-bio {
  position: relative;
  z-index: 4;
  box-sizing: border-box;
  max-width: 680px;
  margin: 0 auto;
  padding: 120px 24px 0;
  text-align: left;
  font-size: 16px;
  line-height: 1.55;
}
.hero-bio p { margin: 0 0 14px; }
.hero-bio p:last-child { margin-bottom: 0; }
.hero-bio a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- Tablet ---- */
@media (max-width: 1024px) {
  .hero-sticker { width: calc(var(--w) * 0.8); }
}

/* ---- Phone ---- */
@media (max-width: 768px) {
  .hero-landing { min-height: calc(100vh - 20px); min-height: calc(100svh - 20px); }
  .hero-lottie { top: 214px; width: 560px; height: 473px; }
  .hero-stage { padding: 64px 16px 88px; }
  .hero-sticker { left: var(--px, var(--x)); top: var(--py, var(--y)); width: calc(var(--w) * 0.55); }
  .hero-sticker[data-phone="hide"] { display: none; }
  .hero-sticker__placeholder { padding: 6px 10px; font-size: 14px; border-width: 2px; }
  .design-wheel { width: 330px; height: 130px; margin-top: 20px; }
  .design-wheel__lead,
  .design-wheel__item { font-size: 30px; }
  .design-wheel__item { height: 40px; margin-top: -20px; }
  .hero-bio { padding: 72px 16px 0; }
}

/* body padding drops to 16px here (styles.css) */
@media (max-width: 560px) {
  .hero-landing { min-height: calc(100vh - 16px); min-height: calc(100svh - 16px); }
}

/* and grows above 1800px */
@media (min-width: 1800px) {
  .hero-landing { min-height: calc(100vh - clamp(40px, 4vw, 60px)); min-height: calc(100svh - clamp(40px, 4vw, 60px)); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .hero-lottie,
  .hero-sticker,
  .design-wheel__item { transition: none; }
}