/* ═══════════════════════════════════════════
   HERO
   Layout: full-viewport, photo right side
   Photo: black bg removed via mix-blend-mode
═══════════════════════════════════════════ */

.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(64px + 2.5rem) 2.5rem 3rem;
}

/* Background dot-grid */
.hero-grid {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--gd) 1px, transparent 1px),
    linear-gradient(90deg, var(--gd) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ─────────────────────────────────────────
   PHOTO — right half of hero
   mix-blend-mode: multiply erases black bg
   in light mode (black × white = white)
   in dark mode: replaced by soft luminosity
───────────────────────────────────────── */
.hero-photo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* Coloured glow — sits BEHIND the photo */
.hero-glow {
  position: absolute;
  right: -5%;
  top: 5%;
  width: 60%;
  height: 90%;
  pointer-events: none;
  /* light mode: warm orange */
  background: radial-gradient(
    ellipse 60% 70% at 60% 45%,
    rgba(230, 100, 35, .32) 0%,
    rgba(220, 85, 20, .12) 35%,
    transparent 68%
  );
  transition: background .5s;
}
[data-theme=dark] .hero-glow {
  background: radial-gradient(
    ellipse 60% 70% at 60% 45%,
    rgba(0, 205, 125, .25) 0%,
    rgba(0, 180, 100, .08) 38%,
    transparent 68%
  );
}

/* The actual photo */
.hero-photo-img {
  position: absolute;
  right: 0;
  bottom: 0;
  /* show from head to just below tie — square crop so 100% height = full image */
  height: 92%;
  width: auto;
  max-width: 52%;
  object-fit: contain;
  object-position: bottom right;
  display: block;

  /* Remove black background in light mode */
  mix-blend-mode: multiply;

  /* Subtle contrast boost */
  filter: contrast(1.04) brightness(1.01);
  transition: opacity .01s ease;
}
[data-theme=dark] .hero-photo-img {
  mix-blend-mode: luminosity;
  filter: contrast(1.08) brightness(.7) grayscale(12%);
}

/* Fade wrapper in/out around the theme swap so the instant
   mix-blend-mode switch is hidden. Uses !important to override
   the entry animation's fill-forwards opacity. */
.hero-photo { transition: opacity .12s ease; }
body.theme-switching .hero-photo {
  opacity: 0 !important;
  animation: none !important;
  transition: opacity .01s ease !important;
}

/* Film-grain noise overlay on photo area */
.hero-photo-noise {
  position: absolute;
  right: 0; bottom: 0;
  width: 52%; height: 92%;
  pointer-events: none; z-index: 2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.78' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.11'/%3E%3C/svg%3E");
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: .65;
}

/* Subtle red-tinted grid over photo (like reference) */
.hero-photo-gridline {
  position: absolute;
  right: 0; bottom: 0;
  width: 52%; height: 92%;
  pointer-events: none; z-index: 3;
  background-image:
    linear-gradient(rgba(180,50,20,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(180,50,20,.06) 1px, transparent 1px);
  background-size: 44px 44px;
}

/* Seamless left-edge fade — blends photo into page */
.hero-photo-fade {
  position: absolute;
  right: 0; bottom: 0;
  width: 52%; height: 100%;
  pointer-events: none; z-index: 4;
  /* horizontal fade: photo side → transparent → bg */
  background: linear-gradient(
    to right,
    var(--bg) 0%,
    transparent 18%,
    transparent 82%,
    var(--bg) 100%
  );
  transition: background .1s;
}
/* Top fade */
.hero-photo-fade-top {
  position: absolute;
  right: 0; top: 0;
  width: 52%; height: 30%;
  pointer-events: none; z-index: 4;
  background: linear-gradient(to bottom, var(--bg) 0%, transparent 100%);
  transition: background .5s;
}

/* ─────────────────────────────────────────
   TEXT CONTENT — left side
───────────────────────────────────────── */
.hero-content {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 0;
  /* Stay left, photo on right */
  max-width: 62%;
}

.hero-title {
  font-family: var(--f-display);
  font-size: clamp(5rem, 12vw, 13.5rem);
  line-height: .84;
  letter-spacing: -.018em;
  margin-bottom: 3rem;
}
.hero-title .l1 { display: block; }
.hero-title .l2 {
  display: block;
  color: transparent;
  -webkit-text-stroke: 2px var(--fg);
  text-align: right;
}
.hero-title .slash {
  color: var(--ac);
  -webkit-text-stroke: 0;
}

/* Bottom bar */
.hero-bottom {
  padding-top: 1.5rem;
  border-top: 1px solid var(--bd);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.hero-status {
  display: flex; align-items: center; gap: .55rem;
  font-family: var(--f-mono); font-size: .63rem;
  letter-spacing: .1em; white-space: nowrap;
}
.hero-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gr); flex-shrink: 0;
  animation: pulse 2.2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(.7); }
}
.hero-links { display: flex; gap: 2.2rem; }
.hero-links a {
  font-family: var(--f-mono); font-size: .58rem;
  letter-spacing: .2em; text-transform: uppercase;
  text-decoration: none; color: var(--mu);
  transition: color .2s;
}
.hero-links a:hover { color: var(--fg); }

/* ─────────────────────────────────────────
   ENTRY ANIMATIONS
───────────────────────────────────────── */
.hero-title .l1,
.hero-title .l2,
.hero-bottom { opacity: 0; transform: translateY(22px); }

.hero-photo,
.hero-glow   { opacity: 0; }

body.loaded .hero-title .l1 { animation: fu .9s .08s cubic-bezier(.4,0,.2,1) forwards; }
body.loaded .hero-title .l2 { animation: fu .9s .2s  cubic-bezier(.4,0,.2,1) forwards; }
body.loaded .hero-bottom     { animation: fu .9s .38s cubic-bezier(.4,0,.2,1) forwards; }
body.loaded .hero-glow       { animation: fi 1.4s .1s ease forwards; }
body.loaded .hero-photo      { animation: fi 1.1s .15s cubic-bezier(.4,0,.2,1) forwards; }

@keyframes fu { to { opacity: 1; transform: translateY(0); } }
@keyframes fi { to { opacity: 1; } }

/* ═══════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════ */

/* Tablet */
@media (max-width: 1100px) and (min-width: 901px) {
  .hero { padding: calc(56px + 1.4rem) 1.6rem 1.8rem; min-height: 78vh; }
  .hero-content { max-width: 72%; }
  .hero-title { font-size: clamp(4rem, 10vw, 9rem); margin-bottom: 2rem; }
  .hero-photo-img { max-width: 58%; height: 82%; }
  .hero-photo-noise,
  .hero-photo-gridline { width: 58%; height: 82%; }
  .hero-photo-fade { width: 58%; }
  .hero-photo-fade-top { width: 58%; }
  .hero-glow { right: -4%; top: 8%; width: 62%; height: 78%; }
}

/* Mobile-tablet */
@media (max-width: 900px) {
  .hero {
    justify-content: flex-end;
    padding: calc(56px + 1rem) 1.2rem 1.4rem;
    min-height: 60svh;
  }

  .hero-content {
    max-width: 100%;
    position: relative; z-index: 10;
  }
  .hero-title {
    font-size: clamp(2.8rem, 13vw, 5.4rem);
    margin-bottom: 1.4rem;
  }

  /* Photo: bigger, centered, behind text */
  .hero-photo-img {
    height: auto;
    width: 82%;
    max-width: 82%;
    right: -8%;
    bottom: 0;
    opacity: .42;
  }
  .hero-photo-noise,
  .hero-photo-gridline {
    width: 82%;
    height: 70vw;
    right: -8%;
  }
  .hero-photo-fade { width: 82%; right: -8%; }
  .hero-photo-fade-top { width: 82%; right: -8%; height: 38%; }
  .hero-glow {
    width: 88%;
    height: 58%;
    right: -10%;
    top: auto;
    bottom: 0;
  }

  .hero-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: .9rem;
  }
  .hero-links { gap: 1.4rem; flex-wrap: wrap; }
}

/* Small mobile */
@media (max-width: 560px) {
  .hero { padding: calc(56px + .6rem) 1rem 1.1rem; min-height: 48svh; }
  .hero-title {
    font-size: clamp(2.4rem, 14.5vw, 4.4rem);
    margin-bottom: 1.1rem;
  }
  .hero-title .l2 { -webkit-text-stroke-width: 1.5px; }
  .hero-photo-img {
    width: 100%;
    max-width: 100%;
    right: -10%;
    opacity: .3;
  }
  .hero-photo-noise,
  .hero-photo-gridline { width: 100%; right: -10%; }
  .hero-photo-fade { width: 100%; right: -10%; }
  .hero-photo-fade-top { width: 100%; right: -10%; }
  .hero-glow { width: 110%; height: 55%; right: -15%; bottom: -5%; top: auto; }
  .hero-links a { font-size: .52rem; letter-spacing: .16em; }
  .hero-status { font-size: .58rem; }
}