/*
  Home section 2 ("intro") — Figma frame 6791:179, y 1687–2798 at the 1920px
  reference. The six organic shapes are where the cover's colour blocks land
  (assets/js/shape-drop.js animates the fall + morph; until then the shapes are
  hidden). --u = 1px of the 1920 frame, with the same ~1000px floor the rest of
  the home page's clamp() values use.
*/
.intro {
  --u: clamp(0.5208px, calc(100vw / 1920), 1px);
  position: relative;
  max-width: var(--content-max-width);
  margin: 0 auto;
  height: calc(1111 * var(--u));
}

.intro__shapes {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.intro__shape {
  position: absolute;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u));
  height: calc(var(--h) * var(--u));
  overflow: visible;
  opacity: 0;
}
.intro__shape.is-landed { opacity: 1; }

/* Figma Rectangles 209–214 (shape n = where cover block n lands) */
.intro__shape--6 { --x: -262; --y: 0;   --w: 621.413; --h: 297.732; }
.intro__shape--5 { --x: -34;  --y: 683; --w: 522;     --h: 280; }
.intro__shape--4 { --x: 150;  --y: 93;  --w: 473.602; --h: 377.463; }
.intro__shape--3 { --x: 443;  --y: 559; --w: 263.977; --h: 205.271; }
.intro__shape--2 { --x: 570;  --y: 499; --w: 779.822; --h: 282.781; }
.intro__shape--1 { --x: 1229; --y: 620; --w: 172.774; --h: 203.21; }

/* Text column: right edge at x 1814 */
.intro__text {
  position: absolute;
  right: calc((1920 - 1814) * var(--u));
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  color: var(--color-cream);
}

.intro__lead {
  width: calc(953 * var(--u));
  margin: 0;
  font-family: var(--font-regular);
  font-size: calc(40 * var(--u));
  line-height: normal;
}
.intro__lead strong {
  font-family: var(--font-bold);
  font-size: 1.2em; /* 48 over the 40px lead */
  font-weight: normal;
}

.intro__name {
  margin: calc(77 * var(--u)) 0 0; /* Figma gap 80 over a 189px lead; ours renders 193 */
  font-family: var(--font-bold);
  font-size: calc(32 * var(--u));
  letter-spacing: 0.03em;
  line-height: normal;
}

.intro__role {
  margin: calc(13 * var(--u)) 0 0;
  font-family: var(--font-regular);
  font-size: calc(24 * var(--u));
  letter-spacing: 0.03em;
  line-height: normal;
}

/* Buttons row: "See case" (→ Layo) to the left of "Download CV", same size.
   Figma "Button / Primary" instance 6797:552: 280×49, label Poppins Regular 18.6 */
.intro__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: calc(24 * var(--u));
  margin-top: calc(49 * var(--u));
}
.intro__btn {
  --btn-bg: var(--color-pink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(280 * var(--u));
  height: calc(49 * var(--u));
  border-radius: calc(23.8 * var(--u));
  background-color: var(--btn-bg);
  color: var(--color-bg);
  font-family: var(--font-regular);
  font-size: calc(18.6 * var(--u));
  line-height: calc(19.8 * var(--u));
  letter-spacing: 0.005em;
  text-decoration: none;
  transition: transform 0.25s var(--ease-standard), box-shadow 0.25s var(--ease-standard);
}
.intro__btn--case { --btn-bg: var(--color-green-2); } /* #5f8f78, not the mint of "Contact me" */
.intro__btn:hover,
.intro__btn:focus-visible {
  color: var(--color-bg); /* base.css turns hovered links green */
  text-decoration: none;
  transform: translateY(-3px) scale(1.04);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

/* Overlay the falling blocks are drawn on while they travel (shape-drop.js) */
.drop-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}

/*
  Phones: the shapes sit behind the text as a background, in the same Figma
  composition scaled to the screen (--u = 100vw / 1460, like the cover collage),
  so each block still falls onto its own shape.
*/
@media (max-width: 767px) {
  .intro {
    --u: calc(100vw / 1460);
    height: auto;
    padding: 72px 20px 88px;
  }

  .intro__shapes {
    inset: 56px 0 auto 0;
    height: calc(963 * var(--u));
  }

  .intro__text {
    position: relative;
    right: auto;
    z-index: 1;
  }

  .intro__lead {
    width: auto;
    font-size: 1.25rem;
    line-height: 1.4;
  }
  .intro__name {
    margin-top: 32px;
    font-size: 1.05rem;
  }
  .intro__role {
    margin-top: 6px;
    font-size: 0.85rem;
    line-height: 1.5;
  }
  .intro__actions {
    justify-content: flex-end;
    gap: 12px;
    margin-top: 24px;
  }
  .intro__btn {
    width: auto;
    height: 46px;
    padding: 0 28px;
    border-radius: 23px;
    font-size: 1rem;
  }
}