/* Home page specific styles */

#intro { position: fixed; inset: 0; background: var(--c-white); z-index: 9999; overflow: hidden; }

.sticker {
  position: absolute;
  padding: 0.55rem 1.4rem;
  border-radius: 100px;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  user-select: none;
}
.sticker.purple   { background: var(--c-purple);   color: var(--c-purple-ink); }
.sticker.lime     { background: var(--c-lime);     color: var(--c-lime-ink); }
.sticker.bordeaux { background: var(--c-bordeaux); color: var(--c-bordeaux-ink); }
.sticker.salmon   { background: var(--c-salmon);   color: var(--c-salmon-ink); }
.sticker.outline  { background: var(--c-white); border: 2px solid var(--c-black); color: var(--c-black); }

.icon-dot {
  position: absolute;
  border-radius: 50%;
  border: 2.5px solid var(--c-black);
  background: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  flex-shrink: 0;
}
.icon-dot svg { stroke: var(--c-black); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-dot.purple   { border-color: var(--c-purple-ink); background: var(--c-purple); }
.icon-dot.purple svg { stroke: var(--c-purple-ink); }
.icon-dot.lime     { border-color: var(--c-lime-ink); background: var(--c-lime); }
.icon-dot.lime svg { stroke: var(--c-lime-ink); }
.icon-dot.bordeaux { border-color: var(--c-bordeaux); background: var(--c-bordeaux); }
.icon-dot.bordeaux svg { stroke: var(--c-bordeaux-ink); }
.icon-dot.salmon   { border-color: var(--c-salmon-ink); background: var(--c-salmon); }
.icon-dot.salmon svg { stroke: var(--c-salmon-ink); }
.icon-dot.outline  { border-color: var(--c-black); background: var(--c-white); }
.icon-dot.outline svg { stroke: var(--c-black); }

#tear {
  position: fixed; inset: 0; background: var(--c-white);
  clip-path: inset(0 100% 0 0);
  z-index: 10000;
  pointer-events: none;
}

#skip {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 10001;
  background: transparent; border: 1.5px solid var(--c-gray-light);
  border-radius: 100px; padding: 0.4rem 1.25rem;
  font-family: var(--font-display); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.06em; color: var(--c-gray); cursor: pointer; transition: all 0.2s;
}
#skip:hover { border-color: var(--c-black); color: var(--c-black); }

/* ---- hero ---- */
#hero {
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  opacity: 0;
  transition: opacity 0.6s ease;
}
#hero.in { opacity: 1; }

.hero-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 2rem; }

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 9vw, 7rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
}

.hero-tagline {
  font-family: var(--font-display);
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  color: var(--c-gray);
  max-width: 100%;
  line-height: 1.8;
  margin-top: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  opacity: 0;
  white-space: nowrap; /* always 1 line on desktop, however long the cycling word gets */
}
.hero-tagline.tw-fade-in { opacity: 1; transition: opacity 1s ease; }

/* on mobile the sentence is forced onto exactly 2 fixed lines (a hard break
   between tw-line1/tw-line2), so the layout never jumps between 1 and 2
   lines as the typewriter word changes length */
@media (max-width: 780px) {
  .hero-tagline { white-space: normal; max-width: 340px; margin-left: auto; margin-right: auto; }
  .tw-line1, .tw-line2 { display: block; }
}

.tw-cursor {
  display: inline-block;
  width: 2px;
  height: 0.85em;
  background: #D4E84A;
  vertical-align: -0.05em;
  animation: tw-blink 1s step-end infinite;
}
@keyframes tw-blink { 50% { opacity: 0; } }

.scroll-cue {
  margin-top: 3rem;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--c-gray);
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
}
.scroll-cue span { width: 1px; height: 28px; background: var(--c-gray-light); position: relative; overflow: hidden; }
.scroll-cue span::after {
  content: ''; position: absolute; top: -100%; left: 0; width: 100%; height: 100%;
  background: var(--c-black); animation: cue 1.8s ease-in-out infinite;
}
@keyframes cue { 0% { top: -100%; } 60%,100% { top: 100%; } }

/* ---- scroll-snap: one full screen per section ---- */
html { scroll-snap-type: y mandatory; overflow-y: scroll; }
.snap-section { scroll-snap-align: start; scroll-snap-stop: always; }
.full-page { min-height: 100vh; }

/* ---- featured projects: each one full-page, like the hero ---- */
.project-feature {
  position: relative;
  overflow: hidden;
  background: var(--c-black);
}

.project-feature-link {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

/* end-card palette: which brand color each project settles on once its video
   finishes. Lime is never used here — it's the site's cursor color, so a lime
   end card would make the cursor disappear. Each project's color must also
   differ from its own tag pill colors, or those labels would blend in and
   vanish too. Black is the fallback when no palette color is free. */
.project-feature.end-purple   { --end-bg: var(--c-purple);   --end-ink: var(--c-purple-ink); }
.project-feature.end-bordeaux { --end-bg: var(--c-bordeaux); --end-ink: var(--c-bordeaux-ink); }
.project-feature.end-salmon   { --end-bg: var(--c-salmon);   --end-ink: var(--c-salmon-ink); }
.project-feature.end-black    { --end-bg: var(--c-black);    --end-ink: var(--c-white); }

.project-feature.video-ended { background: var(--end-bg); }

.project-feature .mock-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
  transition: opacity 0.6s ease;
}
.project-feature.video-ended .mock-video { opacity: 0; }

.feature-top {
  position: relative;
  z-index: 2;
  padding: calc(var(--header-h) + 1.5rem) var(--gutter) 0;
  display: flex; align-items: center; justify-content: flex-end;
  gap: 1rem; flex-wrap: wrap;
}
.feature-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.feature-info {
  position: relative;
  z-index: 2;
  padding: 1.5rem var(--gutter) 3.5rem;
}

.feature-info h2,
.feature-info p {
  opacity: 0;
  transition: opacity 0.5s ease;
}
.project-feature.video-ended .feature-info h2,
.project-feature.video-ended .feature-info p {
  opacity: 1;
}
/* applied for one instant on replay click, see home.js — skips the reveal
   transition so the text disappears immediately instead of fading out over
   the replaying video */
.feature-info.no-transition h2,
.feature-info.no-transition p {
  transition: none;
}

.feature-info h2 { font-size: clamp(1.3rem, 3.7vw, 2.6rem); color: var(--end-ink, var(--c-white)); margin-bottom: 0.75rem; }
.feature-info p { font-size: calc(1rem - 2pt); color: var(--end-ink, var(--c-white)); max-width: 44ch; margin-bottom: 1.5rem; line-height: 1.7; }

.feature-cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--c-lime); color: var(--c-lime-ink);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.03em;
  padding: 0.85rem 1.6rem; border-radius: 100px;
  transition: transform 0.3s var(--ease-pop), background 0.2s, color 0.2s;
}
.feature-cta:hover { transform: translateX(4px); background: var(--c-black); color: var(--c-white); }

/* replay button: only appears once the video has ended. Bottom matches
   .feature-info's padding-bottom so it lines up with the CTA button, right
   matches the gutter so it lines up with the tag labels above. */
.video-replay {
  position: absolute;
  right: var(--gutter);
  bottom: 3.5rem;
  z-index: 3;
  width: 56px; height: 56px;
  border-radius: 50%;
  border: none;
  background: var(--c-black);
  color: var(--c-white);
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.3s var(--ease-pop);
}
.video-replay svg { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.video-replay:hover { transform: rotate(-75deg); }
.project-feature.video-ended .video-replay { opacity: 1; pointer-events: auto; }

/* ---- about + footer: combined into one final full-page screen ---- */
#about-footer-page {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.about-split {
  flex: 1;
  display: grid;
  grid-template-columns: 2fr 1fr; /* foto-kolom 25% kleiner dan voorheen (4/9 → 1/3 van de breedte) */
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
  /* this is the last snap-section, so — like the hero and each project-feature
     above it — its top content needs the sticky header's own height added to
     its padding, or the header (position: sticky, opaque bg) sits directly
     over the first lines of the heading once the section snaps to the top */
  padding-top: calc(var(--header-h) + 1rem);
  padding-bottom: 0.75rem;
}
.about-text-block { margin-top: 1.25rem; }
.about-text-block h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 1.5rem; }
.about-text-block p { color: var(--c-gray); max-width: 52ch; margin-bottom: 1.5rem; line-height: 1.7; }
.about-text-block p:last-child { margin-bottom: 0; }
.about-split .btn { margin-top: 1.5rem; }
.about-photo {
  width: 100%; /* fill the grid column; height derives from this via aspect-ratio, so the ratio always holds */
  aspect-ratio: 3 / 4;
  border-radius: 24px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--c-purple), var(--c-salmon));
}
.about-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* mobile: keep the snap (one section = one screen, with real anchor points
   while scrolling) instead of turning it off.
   dvh, not svh: svh is fixed to the SMALLEST possible viewport (address bar
   fully expanded). But iOS Safari collapses the address bar to a compact bar
   once you've scrolled down a bit — and keeps it collapsed at rest, not just
   mid-gesture — which makes the real, visible viewport taller than svh. A
   section sized with svh then falls short of the actual screen, leaving a
   gap at the bottom where the next section peeks in and the snap never
   quite looks like it's landed cleanly. dvh always tracks the CURRENT real
   viewport, collapsed or not, so a section always fills exactly what's
   visible, with no peek-through. It does mean the video resizes very
   slightly while the toolbar itself is animating, but that's far less
   noticeable on a full-bleed cover video than a leftover strip of the next
   project would be.
   Note: this is NOT minus --header-h. The sticky header only ever reserves
   its own real document-flow space once, right above the hero — after that
   it just floats (paints) over whatever section is currently scrolled
   beneath it, it doesn't push that section's content down or shrink it. */
@media (max-width: 780px) {
  #hero,
  .full-page,
  .project-feature-link {
    min-height: 100dvh;
  }

  .about-split { grid-template-columns: 1fr; }
  .about-photo { max-width: 360px; width: 100%; margin: 2rem 0 0; }
  .feature-tags .pill { font-size: 0.6rem; padding: 0.3rem 0.75rem; }
}