/* ============================================================
   HERO — FANUCAiLeadCV
   Full-viewport sailing photo background, dark gradient overlay,
   subtle scanline + grid texture, headline + title + CTAs.
   ============================================================ */

/* ----------------------------------------------------------
   HERO CONTAINER
---------------------------------------------------------- */

.hero {
  position:       relative;
  /* New stacking context — without this, .hero__bg (z-index:-1)
     paints BEHIND the body's opaque background and the photo is invisible */
  isolation:      isolate;
  min-height:     100svh;   /* small viewport height — safe on iOS */
  min-height:     100vh;    /* fallback */
  display:        flex;
  align-items:    center;
  overflow:       hidden;
  color:          var(--color-text-primary);
}

/* ----------------------------------------------------------
   BACKGROUND LAYERS
   Stacking order (bottom → top):
     1. hero__photo      — the sailing JPEG
     2. hero__overlay    — dark gradient veil (text legibility)
     3. hero__grid-texture — subtle grid (tech aesthetic)
     4. hero__scanlines  — moving horizontal lines
     5. hero__content    — text + CTAs
---------------------------------------------------------- */

.hero__bg {
  position: absolute;
  inset:    0;
  z-index:  var(--z-below);
}

/* The sailing photo.
   The image is PORTRAIT and the badge (reading "AI Lead — FANUC Europe")
   sits at ~2/3 height — it must stay visible. On mobile/portrait viewports
   cover shows the full height naturally. On wide viewports we switch to a
   right-side panel (see media query below) so face + badge + sail all fit. */
.hero__photo {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center 40%;   /* face + badge band */
}

/* Dark gradient overlay — radial from right (photo side), darker left (text side) */
.hero__overlay {
  position:   absolute;
  inset:      0;
  background:
    linear-gradient(
      105deg,
      rgba(10, 11, 15, 0.92) 0%,
      rgba(10, 11, 15, 0.72) 48%,
      rgba(10, 11, 15, 0.35) 100%
    ),
    linear-gradient(
      to bottom,
      rgba(10, 11, 15, 0.55) 0%,
      transparent             40%,
      rgba(10, 11, 15, 0.80) 100%
    );
  z-index:   1;
}

/* Subtle grid texture — tech/industrial aesthetic */
.hero__grid-texture {
  position:   absolute;
  inset:      0;
  z-index:    2;
  background-image:
    linear-gradient(rgba(255, 203, 6, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 203, 6, 0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* Scanline sweep — very subtle, horizontal stripes */
.hero__scanlines {
  position:   absolute;
  inset:      0;
  z-index:    3;
  background: repeating-linear-gradient(
    to bottom,
    transparent           0px,
    transparent           3px,
    rgba(0, 0, 0, 0.07)   3px,
    rgba(0, 0, 0, 0.07)   4px
  );
  pointer-events: none;
  animation: scanline 3s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .hero__scanlines  { animation: none; }
  /* Hero load animations — content must be instantly visible (M1) */
  .hero__eyebrow,
  .hero__title,
  .hero__statement,
  .hero__cta,
  .hero__scroll-hint { animation: none; opacity: 1; transform: none; }
}

/* ----------------------------------------------------------
   WIDE VIEWPORTS — SPLIT HERO
   A full-bleed portrait photo on a 16:9 screen can only show
   ~40% of its height (face OR badge, never both). Instead:
   text column left, photo as a tall right panel showing the
   (nearly) full frame — face, AI Lead badge and FANUC sail.
---------------------------------------------------------- */
@media (min-width: 1024px) {
  .hero__bg {
    left:   auto;
    right:  0;
    /* Panel matches the photo's aspect ratio (3:4) so the FULL frame
       shows — sail, face, badge AND hands on the ropes. Width derives
       from viewport height; capped so text keeps room on small laptops. */
    width:        auto;
    aspect-ratio: 3 / 4;
    max-width:    52%;
  }

  .hero__photo {
    object-position: center top;
  }

  /* Blend the panel's left edge into the page background and
     keep a light vignette so nav/text stay legible */
  .hero__overlay {
    background:
      linear-gradient(
        to right,
        var(--color-bg-base)     0%,
        rgba(10, 11, 15, 0.55)  14%,
        rgba(10, 11, 15, 0.10)  45%,
        rgba(10, 11, 15, 0.05) 100%
      ),
      linear-gradient(
        to bottom,
        rgba(10, 11, 15, 0.45)  0%,
        transparent             25%,
        transparent             80%,
        rgba(10, 11, 15, 0.55) 100%
      );
  }
}

/* ----------------------------------------------------------
   HERO CONTENT
---------------------------------------------------------- */

.hero__content {
  position:      relative;
  z-index:       4;
  display:       flex;
  align-items:   center;
  min-height:    100svh;
  min-height:    100vh;
  padding-block: var(--space-24) var(--space-16);
}

.hero__text {
  max-width: 680px;
}

/* Eyebrow label */
.hero__eyebrow {
  font-size:      var(--text-xs);
  font-weight:    var(--font-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color:          var(--color-accent);
  margin-block-end: var(--space-5);
  animation: slide-up-fade var(--duration-slow) var(--ease-out) 0.05s both;
}

/* Full name heading */
.hero__headline {
  font-size:      var(--text-hero);
  font-weight:    var(--font-black);
  line-height:    var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color:          var(--color-text-primary);
  margin-block-end: var(--space-4);
  /* Never hyphenate the name ("Sérgio Ro-drigues") — wrap whole
     words only, so narrow screens show Sérgio / Rodrigues */
  hyphens:        none;
  overflow-wrap:  normal;
}

/* The .word clip-path animation is in animations.css */

/* Title line — "AI Lead | FANUC Europe" */
.hero__title {
  font-size:    var(--text-2xl);
  font-weight:  var(--font-semibold);
  line-height:  var(--leading-snug);
  margin-block-end: var(--space-6);
  animation:    slide-up-fade var(--duration-slow) var(--ease-out) 0.3s both;
}

.hero__title-accent {
  color:          var(--color-accent);
  font-weight:    var(--font-bold);
}

.hero__title-separator {
  color:          var(--color-text-muted);
}

/* FANUC wordmark — white like the rest of the suffix
   (corporate red tested 2026-06-13: poor legibility on dark bg) */
.hero__title-brand {
  color:       var(--color-text-primary);
  font-weight: var(--font-bold);
}

.hero__title-suffix {
  color:          var(--color-text-primary);
}

/* Positioning statement */
.hero__statement {
  font-size:    var(--text-lg);
  line-height:  var(--leading-relaxed);
  color:        var(--color-text-secondary);
  max-width:    58ch;
  margin-block-end: var(--space-10);
  animation:    slide-up-fade var(--duration-slow) var(--ease-out) 0.45s both;
}

/* Short version: mobile only */
.hero__statement--short  { display: none; }
.hero__statement--full   { display: block; }

@media (max-width: 480px) {
  .hero__statement--full  { display: none; }
  .hero__statement--short { display: block; }
}

/* CTA button group */
.hero__cta {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--space-4);
  animation:   slide-up-fade var(--duration-slow) var(--ease-out) 0.60s both;
}

.hero__cta .btn {
  padding:   var(--space-4) var(--space-8);
  font-size: var(--text-base);
}

/* Off-screen canvas anchor for Phase 5.8 */
.hero__canvas {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  pointer-events: none;
  z-index:        3;
}

/* ----------------------------------------------------------
   SCROLL HINT
---------------------------------------------------------- */

.hero__scroll-hint {
  position:        absolute;
  /* High enough that line + label are fully visible without scrolling */
  bottom:          var(--space-20);
  left:            50%;
  transform:       translateX(-50%);
  z-index:         4;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  gap:             var(--space-2);
  opacity:         0.5;
  animation:       fade-in var(--duration-slow) var(--ease-out) 1.2s both;
}

.hero__scroll-line {
  display:          block;
  width:            1px;
  height:           40px;
  background:       linear-gradient(to bottom, transparent, var(--color-accent));
  animation:        scroll-line 2s ease-in-out infinite;
}

@keyframes scroll-line {
  0%   { transform: scaleY(0); transform-origin: top; }
  40%  { transform: scaleY(1); transform-origin: top; }
  60%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

.hero__scroll-label {
  font-size:      var(--text-xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color:          var(--color-text-muted);
}

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

/* ----------------------------------------------------------
   MOBILE ADJUSTMENTS
---------------------------------------------------------- */

@media (max-width: 640px) {
  .hero__content {
    padding-block: var(--space-32) var(--space-20);
    align-items:   flex-end;  /* push text toward bottom on small screens */
  }

  .hero__cta {
    flex-direction: column;
    align-items:    flex-start;
  }

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