/* ---------- Tokens ---------- */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-red: #dc3517;
  --color-cream: #f7f6f3;

  --font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-serif: "Cormorant", Georgia, serif;

  --gutter: 34px;

  /* Text reveal timing (also used by the underlines and logo fade) */
  --reveal-duration: 0.7s;
  --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --reveal-stagger: 60ms;
  --section-pad: 64px;
}

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

* {
  margin: 0;
  padding: 0;
}

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

html,
body {
  height: 100%;
  overflow: hidden;
}

body {
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-weight: 500;
  line-height: 1.2;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

h1,
h2,
h3 {
  font: inherit;
}

/* ---------- Horizontal layout ---------- */
/* Lenis smooths the scroll of .panels; .panels__track is its content. */
.panels {
  height: 100vh;
  height: 100dvh;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior: none;
  scrollbar-width: none;
}

.panels::-webkit-scrollbar {
  display: none;
}

.panels__track {
  display: flex;
  width: max-content;
  height: 100%;
}

.panels__track > section {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100%;
  overflow: hidden;
}

/* ---------- Text reveal ----------
   Based on the tengilemalamala.com hero title: letters rise out of each
   word. JS splits every [data-reveal] element, numbers the visual
   lines of each section (--line) and adds .is-revealed when it comes into
   view, so the section reveals line by line. */
.u-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.has-reveal [data-reveal]:not(.is-split) {
  visibility: hidden;
}

.reveal-word {
  display: inline-block;
  padding-bottom: 0.05ch;
  white-space: nowrap;
  /* Clips like overflow: hidden at the bottom, but keeps the baseline
     and italic overhangs intact */
  clip-path: inset(-0.5em -0.3em 0 -0.3em);
}

.reveal-char {
  display: inline-block;
  transform: translateY(100%);
}

.is-revealed .reveal-char {
  transform: translateY(0%);
  transition: transform var(--reveal-duration) var(--reveal-ease);
  transition-delay: calc(var(--line, 0) * var(--reveal-stagger));
}

/* ---------- Shared ---------- */
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 600;
}

.display {
  font-size: 74px;
  font-weight: 500;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--color-black);
  color: var(--color-white);
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.hero__top,
.hero__wordmarks {
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  display: flex;
  justify-content: space-between;
}

.hero__top {
  top: var(--gutter);
  align-items: center;
}

.hero__wordmarks {
  top: 38.1%; /* 343px of 900px in the design */
  align-items: flex-start;
}

/* The blend sits on the wordmark wrappers, not the images: the wrappers clip
   for the reveal, which would otherwise cut the images off from the video. */
.hero__tagline,
.hero__logo img,
.hero__wordmark,
.hero__to-make {
  mix-blend-mode: exclusion;
}

.hero__tagline {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
}

.hero__wordmark,
.hero__to-make {
  display: block;
  clip-path: inset(-20% -10% 0 -10%);
}

/* Hero reveal: video fades up from black, the wordmarks rise out of their
   boxes like the text, then the logo fades in. Plays on load. */
.has-reveal .hero__bg {
  opacity: 0;
  transform: scale(1.08);
}

.has-reveal .hero__wordmark img,
.has-reveal .hero__to-make img {
  transform: translateY(100%);
}

.has-reveal .hero__logo img {
  opacity: 0;
}

.hero.is-revealed .hero__bg {
  opacity: 1;
  transform: none;
  transition:
    opacity 1.2s var(--reveal-ease),
    transform 1.8s var(--reveal-ease);
}

.hero.is-revealed .hero__wordmark img,
.hero.is-revealed .hero__to-make img {
  transform: none;
  transition: transform var(--reveal-duration) var(--reveal-ease) 0.25s;
}

.hero.is-revealed .hero__to-make img {
  transition-delay: 0.35s;
}

.hero.is-revealed .hero__logo img {
  opacity: 1;
  transition: opacity var(--reveal-duration) var(--reveal-ease) 0.45s;
}

/* ---------- Intro ---------- */
.intro {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--section-pad) var(--gutter);
  background: var(--color-white);
}

.intro__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 726px;
  max-width: 100%;
  font-size: 32px;
  text-align: center;
}

.intro__body {
  line-height: 1.1;
}

.intro__body .serif {
  font-size: 44px;
  line-height: 0.8; /* 35.2px, same as the 32px sans lines, so spacing stays even */
}

/* ---------- Faz Bem ---------- */
.faz-bem {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 145px;
  padding: var(--section-pad) var(--gutter);
  background: var(--color-black);
  color: var(--color-white);
}

/* Lenticular card. JS sets --tilt (-1 left … 1 right). Each frame is revealed
   through vertical slices aligned to the printed stripes: --reveal-left /
   --reveal-right (0–1) set how much of each slice the frame fills. */
.lenticular {
  --pitch: calc(313px / 48);
  --cream: #dfdacb;
  --grey: #474540;
  --tilt: 0;
  --reveal-left: 0;
  --reveal-right: 0;

  position: relative;
  width: 313px;
  height: 412px;
  overflow: hidden;
  transform: perspective(900px) rotateY(calc(var(--tilt) * 9deg));
}

/* Reveal: every stripe grows from a hairline to full width, so the card
   resolves out of its own lens slices. --lens-reveal is registered so the
   mask percentage can transition. */
@property --lens-reveal {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

.has-reveal .lenticular {
  --lens-reveal: 0%;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 var(--lens-reveal), transparent var(--lens-reveal) 100%) 0 0 / var(--pitch) 100%;
  mask: repeating-linear-gradient(90deg, #000 0 var(--lens-reveal), transparent var(--lens-reveal) 100%) 0 0 / var(--pitch) 100%;
}

.faz-bem.is-revealed .lenticular {
  --lens-reveal: 100%;
  transition: --lens-reveal 1s var(--reveal-ease);
}

.lenticular__base {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lenticular__frame {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(90deg, var(--cream) 0 35%, var(--grey) 35% 100%) 0 0 / var(--pitch) 100%;
}

/* Lens ridges: thin dark lines that keep the artwork reading as printed strips */
.lenticular__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 70%, rgb(0 0 0 / 0.55) 70% 100%) 0 0 / var(--pitch) 100%;
}

.lenticular__frame img {
  height: auto;
}

.lenticular__frame--left img {
  width: 224px;
}

.lenticular__frame--right img {
  width: 255px;
}

/* Slices grow from the left edge of each lens for the left frame… */
.lenticular__frame--left {
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 calc(var(--reveal-left) * 100%), transparent calc(var(--reveal-left) * 100%) 100%) 0 0 / var(--pitch) 100%;
  mask: repeating-linear-gradient(90deg, #000 0 calc(var(--reveal-left) * 100%), transparent calc(var(--reveal-left) * 100%) 100%) 0 0 / var(--pitch) 100%;
}

/* …and from the right edge for the right frame. */
.lenticular__frame--right {
  -webkit-mask: repeating-linear-gradient(90deg, transparent 0 calc((1 - var(--reveal-right)) * 100%), #000 calc((1 - var(--reveal-right)) * 100%) 100%) 0 0 / var(--pitch) 100%;
  mask: repeating-linear-gradient(90deg, transparent 0 calc((1 - var(--reveal-right)) * 100%), #000 calc((1 - var(--reveal-right)) * 100%) 100%) 0 0 / var(--pitch) 100%;
}

.lenticular__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgb(255 255 255 / 0.18) 50%, transparent 70%) calc(50% - var(--tilt) * 60%) 0 / 250% 100%;
  opacity: calc(0.25 + (var(--reveal-left) + var(--reveal-right)) * 0.75);
  pointer-events: none;
}

.faz-bem__text {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 368px;
  max-width: 100%;
  font-weight: 600;
  text-align: center;
}

.faz-bem__title {
  font-size: 28px;
  letter-spacing: 0.56px;
}

.faz-bem__body {
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.48px;
}

.faz-bem__body .serif {
  font-size: 28px;
  line-height: 1.03; /* 28.8px, matches the 24px sans lines */
  letter-spacing: 0.56px;
}

/* ---------- We Make ---------- */
.we-make {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 119px;
  padding: var(--section-pad) 0;
  background: var(--color-white);
}

.we-make__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding-inline: var(--gutter);
  text-align: center;
}

.we-make__modus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  letter-spacing: 0.48px;
}

.we-make__label {
  font-size: 24px;
  text-transform: uppercase;
}

.we-make__body {
  width: 466px;
  max-width: 100%;
  font-size: 24px;
  font-weight: 400;
}

.we-make__body .serif {
  font-size: 28px;
  line-height: 1.03; /* 28.8px, matches the 24px sans lines */
  letter-spacing: 0.56px;
}

.services {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-inline: var(--gutter);
}

.services__col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.services__col--right {
  align-items: flex-end;
}

.services__col li {
  position: relative;
  display: flex;
  min-width: 465px;
  padding-top: 14px;
  padding-bottom: 15.5px; /* 14px + the 1.5px underline */
  font-size: 32px;
  line-height: 1.08;
  white-space: nowrap;
}

/* Underline: draws out from the column's outer edge in time with the text */
.services__col li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--color-black);
  transform-origin: left;
}

.services__col--right li {
  justify-content: flex-end;
}

.services__col--right li::after {
  transform-origin: right;
}

.has-reveal .services__col li::after {
  transform: scaleX(0);
}

.is-revealed .services__col li::after {
  transform: scaleX(1);
  transition: transform var(--reveal-duration) var(--reveal-ease) calc(var(--line, 0) * var(--reveal-stagger));
}

/* Client logos marquee */
.clients {
  width: 100%;
  overflow: hidden;
}

/* Fades in as the last line of text in the section arrives */
.has-reveal .clients {
  opacity: 0;
}

.is-revealed .clients {
  opacity: 1;
  transition: opacity var(--reveal-duration) var(--reveal-ease) calc((var(--lines, 1) - 1) * var(--reveal-stagger));
}

.clients__track {
  display: flex;
  width: max-content;
  animation: marquee 40s linear infinite;
}

.clients__list {
  display: flex;
  align-items: center;
  gap: 69px;
  padding-right: 69px;
}

.clients__list li {
  flex-shrink: 0;
}

.covrly {
  display: flex;
  align-items: center;
  gap: 8.5px;
}

.covrly span {
  font-family: "Cabinet Grotesk", var(--font-sans);
  font-size: 25.806px;
  font-weight: 800;
  line-height: normal;
  letter-spacing: -0.516px;
  text-transform: capitalize;
}

.laps {
  position: relative;
  width: 113.66px;
  height: 30px;
}

.laps img {
  position: absolute;
}

.laps__mark {
  left: 0;
  top: 0.1px;
}

.laps__word {
  left: 36.19px;
  top: 0;
}

.laps__foundation {
  left: 33.09px;
  top: 15.71px;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

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

/* ---------- The Makers ---------- */
.makers {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 134px;
  padding: var(--section-pad) var(--gutter);
  /* Placeholder halftone until the background video is added */
  background-color: var(--color-white);
  background-image: radial-gradient(circle, #e8432f 1.2px, transparent 1.6px);
  background-size: 6px 6px;
}

/* Typewriter word in "The makers." — JS reserves the longest word's width
   so the heading doesn't shift while typing. */
.typewriter {
  display: inline-block;
  text-align: left;
  white-space: nowrap;
}

.typewriter__caret {
  display: inline-block;
  width: 0.06em;
  height: 0.72em;
  margin-left: 0.06em;
  background: currentColor;
  animation: caret-blink 1s steps(1) infinite;
}

.typewriter.is-typing .typewriter__caret {
  animation: none;
}

@keyframes caret-blink {
  50% {
    opacity: 0;
  }
}

.makers__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.makers .display,
.note {
  position: relative;
}

.note {
  width: 477px;
}

.note__tape {
  position: absolute;
  left: 129px;
  top: -27px;
  z-index: 1;
}

.note__paper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  height: 476px;
  padding-inline: 54px;
  overflow: hidden;
  background: var(--color-white);
  text-align: center;
}

.note__paper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/img/paper-texture.png") center / cover;
  mix-blend-mode: difference;
  opacity: 0.3;
  pointer-events: none;
}

.note__title,
.note__body {
  position: relative;
}

.note__title {
  font-size: 28px;
  font-weight: 600;
  letter-spacing: 0.56px;
  text-transform: uppercase;
}

.note__title .serif {
  font-size: 38px;
  line-height: 0.884; /* 33.6px, matches the 28px sans line */
  letter-spacing: 0.76px;
  text-transform: none;
}

.note__body {
  font-size: 24px;
}

/* ---------- Let's Make ---------- */
.lets-make {
  display: flex;
  align-items: center;
  padding-inline: var(--gutter);
  background: var(--color-black);
  color: var(--color-white);
}

/* Three items with equal gaps (303px at 1440px in the design) */
.lets-make__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 84px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.lets-make__lets {
  text-transform: uppercase;
}

.lets-make__arrow {
  transform: scaleX(-1); /* the export points left; flipped in Figma */
  transition: translate 0.6s var(--reveal-ease);
}

/* Arrow reveal: paints in left to right, just after the text starts */
.has-reveal .lets-make__arrow {
  clip-path: inset(0 0 0 100%); /* right inset, mirrored by the flip */
}

.lets-make.is-revealed .lets-make__arrow {
  clip-path: inset(0 0 0 0);
  transition:
    clip-path 0.9s var(--reveal-ease) 0.15s,
    translate 0.6s var(--reveal-ease);
}

/* "make" link: on hover the serif slides up and out while MAKE in the
   LET'S font slides up into its place. Both sit in one grid cell, aligned
   on the baseline and to the right edge. */
.lets-make__link {
  display: grid;
  align-items: baseline;
  justify-items: end;
  clip-path: inset(0 -0.4em);
}

.lets-make__make,
.lets-make__make-hover {
  grid-area: 1 / 1;
  transition: transform 0.6s var(--reveal-ease);
}

.lets-make__make {
  color: var(--color-cream);
  font-size: 110px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 1.1px;
}

.lets-make__make-hover {
  text-transform: uppercase;
  transform: translateY(100%);
}

.lets-make__link:hover .lets-make__make,
.lets-make__link:focus-visible .lets-make__make {
  transform: translateY(-100%);
}

.lets-make__link:hover .lets-make__make-hover,
.lets-make__link:focus-visible .lets-make__make-hover {
  transform: none;
}

.lets-make__row:has(.lets-make__link:hover, .lets-make__link:focus-visible) .lets-make__arrow {
  translate: 16px 0;
}

.lets-make__link:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 12px;
}