/*
  Home: cover ("Digital Interaction Designer" + colour blocks) and the later
  "Step into the Pixels" / "It's time to" / EXPERIENCE section. Values come from
  Figma (cover: frame 6791:179; text section: original node 6536:4068) at the fixed
  1920px reference width.
  Everything scales fluidly with vw (clamped at the 1920px value) so it matches Figma
  exactly at the reference width and shrinks proportionally on narrower desktop widths,
  same approach as the header. Below 768px this whole section switches to normal
  document flow (see the media query at the bottom).
*/

/*
  Background: dark → fog behind Highlights → back to dark. The stops are pinned to
  real content, measured in px by assets/js/hero-motion.js (--fog-* on .home), so
  they survive layout changes. Desktop keeps the original proportions: dark until
  344px above Highlights, full fog 697px into it, plateau until 206px before its
  end, dark again 882px after it. (Phones use their own stops, at the bottom.)
  The percentages are only a fallback until the script has measured.
*/
.home {
  position: relative;
  background: linear-gradient(
    to bottom,
    var(--color-bg) var(--fog-a, 38.438%),
    var(--color-bg-fog) var(--fog-b, 48%),
    var(--color-bg-fog) var(--fog-c, 70%),
    var(--color-bg) var(--fog-d, 80%)
  );
}

/* Flat --color-bg layer over the top of the page, down to where the fog begins. */
.home__bg-solid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--fog-a, 38%);
  background-color: var(--color-bg);
  pointer-events: none;
}

/* Cover — section 2 (organic shapes) starts at y 1687 in Figma */
.hero {
  position: relative;
  max-width: var(--content-max-width);
  margin: 0 auto;
  height: clamp(879px, 87.86vw, 1687px);
}

/* "Step into the Pixels" section, after All Projects (point 6 will restyle it) */
.pixels-intro {
  position: relative;
  max-width: var(--content-max-width);
  margin: 0 auto;
  height: clamp(773px, 77.34vw, 1485px);
}

.hero__eyebrow {
  position: absolute;
  left: clamp(70px, 9.58vw, 184px);
  top: clamp(205px, 20.52vw, 394px);
  width: clamp(220px, 28.33vw, 544px);
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-regular);
  font-size: clamp(17px, 1.667vw, 32px);
  letter-spacing: 0.03em;
}

.hero__title {
  position: absolute;
  left: clamp(219px, 21.93vw, 421px);
  top: clamp(52px, 5.21vw, 100px);
  width: clamp(678px, 67.86vw, 1303px);
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-medium);
  font-size: clamp(25px, 2.5vw, 48px);
  letter-spacing: 0.24em;
  text-align: right;
}

.experience-stack {
  --exp-font-size: clamp(50px, 6.25vw, 120px);
  position: absolute;
  left: clamp(70px, 9.58vw, 184px);
  top: clamp(236px, 23.65vw, 454px);
  display: flex;
  flex-direction: column;
}

/*
  Rows cascade with a ~69.17px step (at 1920px) between each row's TOP, not a gap
  between rows — each row visually overlaps the next by design, per the current
  Figma structure (node 6604:157, 12 groups with a real auto-layout step of
  69.17px). A flex `gap` would space them apart instead of overlapping them, so
  the step is done as a negative margin computed from the row's own font-size:
  step(69.17/120 of the row height) minus the full row height.
*/
.experience-stack__row:not(:first-child) {
  margin-top: calc(var(--exp-font-size) * (69.17 / 120 - 1));
}

/*
  Each row must paint in FRONT of the one below it (so the overlap reads as a
  staircase sliding under the row above, not the other way around) — the opposite
  of the default stacking order, where a later flex item would otherwise paint over
  an earlier one. Figma's own 12 groups carry this exact same decreasing z-index
  (12 down to 1, node 6604:157) rather than leaving it to paint order.
*/
.experience-stack__row:nth-child(1) { z-index: 12; }
.experience-stack__row:nth-child(2) { z-index: 11; }
.experience-stack__row:nth-child(3) { z-index: 10; }
.experience-stack__row:nth-child(4) { z-index: 9; }
.experience-stack__row:nth-child(5) { z-index: 8; }
.experience-stack__row:nth-child(6) { z-index: 7; }
.experience-stack__row:nth-child(7) { z-index: 6; }
.experience-stack__row:nth-child(8) { z-index: 5; }
.experience-stack__row:nth-child(9) { z-index: 4; }
.experience-stack__row:nth-child(10) { z-index: 3; }
.experience-stack__row:nth-child(11) { z-index: 2; }
.experience-stack__row:nth-child(12) { z-index: 1; }

.experience-stack__row {
  color: var(--color-pink);
  font-family: var(--font-bold);
  font-size: var(--exp-font-size);
  letter-spacing: 0.1em;
  line-height: 1;
  text-shadow:
    0 clamp(7px, 0.81vw, 15.5px) 0 var(--color-green-2),
    0 clamp(14px, 1.61vw, 31px) 0 var(--color-mint-2);
}

/*
  Wave loop (point 6): once the rows have dropped in, a small rise runs down the
  stack top to bottom (each row 0.11s after the one above), then rests and runs
  again — on an inner span, so it never fights GSAP's drop-in transform on the
  row. hero-motion.js adds .is-waving when the drop-in ends (removed when it
  resets) and .is-wave-paused while the stack is off screen.
*/
.experience-stack__wave {
  display: inline-block;
}
.experience-stack.is-waving .experience-stack__wave {
  animation: experience-wave 2.8s ease-in-out calc(var(--i) * 0.11s) infinite;
}
.experience-stack.is-wave-paused .experience-stack__wave {
  animation-play-state: paused;
}
@keyframes experience-wave {
  0%, 45%, 100% { transform: translateY(0); }
  15% { transform: translateY(-0.12em); }
  30% { transform: translateY(0.03em); }
}
@media (prefers-reduced-motion: reduce) {
  .experience-stack.is-waving .experience-stack__wave { animation: none; }
}

.digital-designer {
  position: absolute;
  left: clamp(4px, 0.47vw, 9px);
  top: clamp(109px, 10.885vw, 209px); /* Figma 6791:235 */
  width: clamp(720px, 98.75vw, 1896px);
  margin: 0;
  font-family: var(--font-regular);
  font-size: clamp(80px, 10.42vw, 200px);
  letter-spacing: 0.03em;
  text-align: right;
}

.digital-designer__letter {
  color: var(--color-mint-2);
  text-shadow: clamp(7px, 0.89vw, 17px) clamp(3px, 0.42vw, 8px) 0 var(--color-pink-2);
}

/*
  Shared by every per-letter hover effect on the site (currently "Digital
  Interaction Designer" here and "I'm Dani" in about.css) — assets/js/jelly-
  letters.js targets this class generically. Each letter deforms along the
  direction the mouse entered from: the script computes that angle on mouseenter
  and sets it as --jelly-angle, then toggles .is-jelly to (re)start the animation.
  Rotating into that axis, stretching/squishing, then rotating back is what lets a
  plain scale() stretch along an arbitrary direction, so every hover looks
  different depending on where the letter was touched — like poking a bag of
  liquid — instead of one generic wobble for all.
*/
.jelly-letter {
  display: inline-block;
  transform-origin: center;
  --jelly-angle: 0deg;
}

.jelly-letter.is-jelly {
  animation: jelly-wobble 1.8s ease-in-out 1;
}

@keyframes jelly-wobble {
  0% {
    transform: rotate(var(--jelly-angle)) scale(1, 1) rotate(calc(-1 * var(--jelly-angle)));
  }
  20% {
    transform: rotate(var(--jelly-angle)) scale(1.28, 0.78) rotate(calc(-1 * var(--jelly-angle)));
  }
  40% {
    transform: rotate(var(--jelly-angle)) scale(0.85, 1.18) rotate(calc(-1 * var(--jelly-angle)));
  }
  60% {
    transform: rotate(var(--jelly-angle)) scale(1.1, 0.93) rotate(calc(-1 * var(--jelly-angle)));
  }
  80% {
    transform: rotate(var(--jelly-angle)) scale(0.96, 1.04) rotate(calc(-1 * var(--jelly-angle)));
  }
  100% {
    transform: rotate(var(--jelly-angle)) scale(1, 1) rotate(calc(-1 * var(--jelly-angle)));
  }
}

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

/*
  Phones (vertical story):
  Cover — "Digital / Interaction / Designer" (one word per line, never broken
  mid-word) + the colour-block collage + signature, filling the first screen.
  After All Projects — "Step into the Pixels with Me!" (centred), then
  "It's time to" + the overlapping EXPERIENCE cascade (left-aligned).
  Type sizes are fitted to the column width (measured: "EXPERIENCE" = 6.96em,
  "Interaction" = 5.75em). Reveal motion: assets/js/hero-motion.js (mobile branch).
*/
@media (max-width: 767px) {
  .hero,
  .pixels-intro {
    --gutter: 20px;
    --col: calc(100vw - 2 * var(--gutter));
    height: auto;
    display: flex;
    flex-direction: column;
  }

  .hero {
    min-height: 100svh;
    justify-content: center;
    padding: calc(var(--header-height) + 24px) var(--gutter) 64px;
  }

  .pixels-intro { padding: 12svh var(--gutter) 96px; }

  .hero__eyebrow,
  .hero__title,
  .experience-stack,
  .digital-designer {
    position: static;
    width: auto;
    left: auto;
    top: auto;
  }

  /* Cover: Digital / Interaction / Designer */
  .digital-designer {
    font-size: calc(var(--col) / 5.85);
    line-height: 1.05;
    text-align: right;
  }
  .digital-designer__word {
    display: block;
    white-space: nowrap;
  }
  .digital-designer__word + .digital-designer__space { display: none; }
  .digital-designer__letter {
    text-shadow: 0.085em 0.04em 0 var(--color-pink-2);
  }

  /* After All Projects: title */
  .hero__title {
    font-size: clamp(21px, 6.2vw, 27px);
    line-height: 1.4;
    letter-spacing: 0.14em;
    text-align: center;
    text-wrap: balance;
    /* letter-spacing adds a trailing gap after the last letter; offset it so the
       centred lines are optically centred */
    margin-right: -0.14em;
  }

  /* eyebrow + EXPERIENCE */
  .hero__eyebrow {
    margin-top: 26svh;
    font-size: 1.15rem;
    text-align: left;
  }
  .experience-stack {
    --exp-font-size: calc(var(--col) / 7);
    margin-top: 24px;
    align-items: flex-start;
  }
  .experience-stack__row {
    text-shadow:
      0 calc(var(--exp-font-size) * 0.129) 0 var(--color-green-2),
      0 calc(var(--exp-font-size) * 0.258) 0 var(--color-mint-2);
  }
}

/*
  Phones: the dark → fog → 20% fog background is pinned to real content instead
  of page percentages (mobile heights differ too much): it starts 150px above the
  "Highlights" title at 0% fog (no visible edge), and ends just above the
  "All Projects" title at 20% fog over the dark base. --fog-start / --fog-end
  are measured in px from the top of .home by hero-motion.js.
*/
@media (max-width: 767px) {
  .home {
    --fog-20: color-mix(in srgb, var(--color-bg-fog) 20%, var(--color-bg));
    background: linear-gradient(
      to bottom,
      var(--color-bg) var(--fog-start, 45%),
      var(--color-bg-fog) calc(var(--fog-start, 45%) + (var(--fog-end, 60%) - var(--fog-start, 45%)) * 0.3),
      var(--color-bg-fog) calc(var(--fog-start, 45%) + (var(--fog-end, 60%) - var(--fog-start, 45%)) * 0.55),
      var(--fog-20) var(--fog-end, 60%)
    );
  }
  .home__bg-solid { display: none; }
}