/* ==========================================================================
   Hero section — full-width 16:9 background, left-aligned overlay layout.
   ========================================================================== */

/* Hero container: full viewport, offset below fixed header */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--space-huge) + var(--space-xxl)) var(--space-huge) var(--space-huge);
  box-sizing: border-box;
  overflow: hidden;
  background-color: var(--c-canvas);
}

/* Background image layer — image kept unmodified, anchored right */
.hero__bg {
  position: absolute;
  inset: 0;
  background-image: url("../../assets/Hero/Gemini_Generated_Image_nvxja0nvxja0nvxj.jpeg");
  background-size: cover;
  background-position: 70% center;
  background-repeat: no-repeat;
}

/* Readability overlay — active-mode canvas fading left→right and to bottom */
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--c-canvas) 94%, transparent) 0%,
      color-mix(in srgb, var(--c-canvas) 80%, transparent) 40%,
      color-mix(in srgb, var(--c-canvas) 30%, transparent) 75%,
      color-mix(in srgb, var(--c-canvas) 10%, transparent) 100%
    ),
    linear-gradient(
      0deg,
      var(--c-canvas) 0%,
      transparent 25%
    );
}

/* Day Mode: stronger wash so dark artwork reads as light surface */
[data-theme="light"] .hero__overlay {
  background:
    linear-gradient(
      90deg,
      color-mix(in srgb, var(--c-canvas) 96%, transparent) 0%,
      color-mix(in srgb, var(--c-canvas) 88%, transparent) 40%,
      color-mix(in srgb, var(--c-canvas) 55%, transparent) 75%,
      color-mix(in srgb, var(--c-canvas) 40%, transparent) 100%
    ),
    linear-gradient(
      0deg,
      var(--c-canvas) 0%,
      transparent 25%
    );
}

/* Content column above background layers */
.hero__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 34em;
}

/* Typing headline: "I'm a" prefix + dynamic suffix — code-md */
.hero__typing {
  margin: 0;
  min-height: 1.5em;
  font-family: var(--font-code);
  font-size: 18px;      /* code-md */
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--c-text-secondary);
}

/* Dynamic phrase in readable accent */
.hero__typed {
  color: var(--c-accent-strong);
}

/* Typing cursor — blinks every 500ms */
.hero__cursor {
  color: var(--c-accent-strong);
  animation: hero-cursor-blink 1s steps(1, end) infinite;
}

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

/* Title — display-xxl, visually dominant */
.hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 48px;      /* display-xxl */
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -1.2px;
  color: var(--c-text-primary);
}

/* Second title clause — tonal step-down (screenshot cue) */
.hero__title-sub {
  display: block;
  color: var(--c-text-muted);
}

/* Subtitle — body-lg */
.hero__subtitle {
  margin: 0;
  max-width: 32em;
  font-family: var(--font-body);
  font-size: 18px;      /* body-lg */
  font-weight: 360;
  line-height: 1.55;
  color: var(--c-text-secondary);
}

/* Large tablet: display-xl title, reduced side padding */
@media (max-width: 1024px) {
  .hero {
    padding-left: var(--space-xxl);
    padding-right: var(--space-xxl);
  }

  .hero__title {
    font-size: 36px;    /* display-xl */
    line-height: 1.15;
    letter-spacing: -0.8px;
  }
}

/* Small tablet: extra top offset for two-row header, centered image */
@media (max-width: 768px) {
  .hero {
    align-items: flex-end;
    padding: calc(var(--space-huge) * 2) var(--space-lg) var(--space-huge);
  }

  .hero__bg {
    background-position: center;
  }

  /* Vertical overlay: image visible on top, text area solid at bottom */
  .hero__overlay,
  [data-theme="light"] .hero__overlay {
    background: linear-gradient(
      0deg,
      var(--c-canvas) 0%,
      color-mix(in srgb, var(--c-canvas) 90%, transparent) 45%,
      color-mix(in srgb, var(--c-canvas) 55%, transparent) 100%
    );
  }
}

/* Mobile: display-md title, body-md subtitle, code-sm typing */
@media (max-width: 480px) {
  .hero__content {
    gap: var(--space-lg);
  }

  .hero__typing {
    font-size: 15px;    /* code-sm */
    line-height: 1.45;
  }

  .hero__title {
    font-size: 22px;    /* display-md */
    line-height: 1.25;
    letter-spacing: -0.3px;
  }

  .hero__subtitle {
    font-size: 16px;    /* body-md */
    line-height: 1.5;
  }
}

/* Reduced motion: static cursor */
@media (prefers-reduced-motion: reduce) {
  .hero__cursor {
    animation: none;
  }
}