/* =========================================================
   Hero section

   How the image blends in:
   hero-image.png is an opaque photo (no transparency) whose
   backdrop is a dark charcoal (~#1a1a19 at the top, slightly
   darker lower-left) and whose bottom is a lighter warm desk.
   So instead of removing anything from the image we:
     1. paint the hero with the same charcoal, and
     2. fade the image's edges into it with a CSS mask.
   Result: no rectangle, no hard edge, original pixels intact.
   ========================================================= */

.hero {
  position: relative;
  overflow: clip; /* the image bleeds to the right edge; never cause sideways scroll */
  background:
    linear-gradient(180deg, var(--hero-bg-top) 0%, var(--hero-bg-bottom) 82%, var(--color-black) 100%);
}

.hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: center;
  padding-block: var(--section-space); /* 32px above and below */
}

/* ---------- Text column ---------- */
.hero__content {
  position: relative;
  z-index: 2;
  max-width: 600px;
}

.hero__eyebrow {
  margin: 0 0 1.25rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.hero__eyebrow span {
  margin-inline: 0.4em;
  color: var(--color-rose-dark);
}

.hero__title {
  margin: 0;
  font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--text-primary);
  text-wrap: balance;
}

.hero__title-accent {
  color: var(--color-rose-light); /* #FFE4E4 */
}

/* ---------- Typewriter (h1) ---------- */
.hero__typed {
  margin: 0.75rem 0 0;
  font-size: clamp(calc(2rem - 2px), calc(1.2rem + 2.4vw - 2px), calc(2.85rem - 2px));
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: #ff878d; /* typewriter text colour */
}

/* The typewriter reserves the space of its longest phrase
   (JS inserts an invisible "sizer" in the same grid cell), so nothing
   below it jumps while typing. On narrow screens the longest phrase
   wraps to two lines and that height is reserved too. */
.typewriter {
  position: relative;
  display: grid;
  align-items: start;
  max-width: 100%;
}

.typewriter > * {
  grid-area: 1 / 1;
}

.typewriter__sizer {
  visibility: hidden;
  padding-right: 0.5em; /* room for the cursor */
}

.typewriter__line {
  display: block;
  min-height: 1.12em;
}

.typewriter__cursor {
  display: inline-block;
  vertical-align: -0.12em;
  width: 0.08em;
  min-width: 3px;
  height: 1em;
  margin-left: 0.08em;
  border-radius: 2px;
  background: var(--color-rose);
  animation: cursor-blink 1.05s steps(1, end) infinite;
}

/* Solid cursor while characters are being typed or deleted */
.typewriter.is-busy .typewriter__cursor {
  animation: none;
  opacity: 1;
}

@keyframes cursor-blink {
  0%, 55% { opacity: 1; }
  56%, 100% { opacity: 0; }
}

.hero__lead {
  max-width: 30rem;
  margin: 1.25rem 0 0;
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  color: var(--text-secondary);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}

/* ---------- Image column ---------- */
.hero__visual {
  position: relative;
  z-index: 1;
  /* Bleed to the right edge of the viewport (past the container) */
  margin-right: calc(-1 * (var(--gutter) + max(0px, (100vw - var(--container)) / 2)));
  /* Slight overlap under the text column so the faded edge sits behind it */
  margin-left: -8%;
  /* Edge fades: left (into the text side), bottom (the lighter desk),
     a hairline at the top and a soft right edge for very wide screens. */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 10%, rgba(0,0,0,.8) 20%, #000 30%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 8%, #000 18%, #000 60%, rgba(0,0,0,.65) 74%, rgba(0,0,0,.25) 86%, transparent 97%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 10%, rgba(0,0,0,.8) 20%, #000 30%, #000 93%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 8%, #000 18%, #000 60%, rgba(0,0,0,.65) 74%, rgba(0,0,0,.25) 86%, transparent 97%);
  mask-composite: intersect;
}

.hero__image {
  width: 100%;
  height: auto;
  aspect-ratio: 1498 / 1050;
  object-fit: cover;
  object-position: 55% 40%;
}

/* ---------- Large screens: cap image width so it doesn't balloon ---------- */
@media (min-width: 1600px) {
  .hero__visual {
    margin-right: calc(-1 * var(--gutter));
  }
}

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .hero__visual {
    margin-left: -14%;
  }
}

/* ---------- Tablet portrait & mobile: stack ---------- */
@media (max-width: 900px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
    padding-block: var(--section-space);
  }

  .hero__content {
    max-width: 640px;
  }

  .hero__visual {
    /* full-bleed under the text */
    margin: 0.5rem calc(-1 * var(--gutter)) 0;
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 9%, #000 20%, #000 62%, rgba(0,0,0,.6) 78%, rgba(0,0,0,.2) 90%, transparent 100%);
    mask-image:
      linear-gradient(to right, transparent 0%, #000 9%, #000 91%, transparent 100%),
      linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.6) 9%, #000 20%, #000 62%, rgba(0,0,0,.6) 78%, rgba(0,0,0,.2) 90%, transparent 100%);
  }
}

@media (max-width: 480px) {
  .hero__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.16em;
  }

  .hero__eyebrow span {
    margin-inline: 0.25em;
  }

  .hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Zoom the photo a touch so the laptop stays the focal point */
  .hero__image {
    aspect-ratio: 4 / 3.3;
    object-position: 58% 45%;
  }
}

/* ---------- Reduced motion: static phrase list, no blinking ---------- */
.typewriter.is-static {
  white-space: normal;
}

.typewriter.is-static .typewriter__cursor {
  display: none;
}

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