/* Hero layout and motion. Requires styles.css design tokens. */
.hero {
  min-height: calc(100svh - var(--nav-h));
  display: grid;
  grid-template-columns: minmax(0, 46%) minmax(0, 54%);
  align-items: stretch;
  gap: 0;
  padding: 0;
  background-color: var(--bg-primary);
  overflow: hidden;
  isolation: isolate;
}

.hero__parallax,
.hero__parallax-alt {
  position: absolute;
  inset: -4.5%;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  transform: translate3d(0, 0, 0) scale(1.02);
  will-change: transform;
}

.hero__parallax {
  background-image: url("assets/hero-bg.webp");
  opacity: 1;
  transition: opacity 0.75s var(--ease);
}

.hero__parallax-alt {
  background-image: url("assets/hero-bg-alt.webp");
  opacity: 0;
  transition: opacity 0.75s var(--ease);
}

.hero.is-flipped .hero__parallax { opacity: 0; }
.hero.is-flipped .hero__parallax-alt { opacity: 1; }

.hero.is-flipped .hero__content {
  transform: translateX(var(--content-shift, 0px));
}

@media (max-width: 900px) {
  /* Touch / narrow: keep a single layout; mouse-driven flip is desktop-only. */
  .hero.is-flipped .hero__content {
    transform: none !important;
  }

  .hero.is-flipped .hero__parallax { opacity: 1 !important; }
  .hero.is-flipped .hero__parallax-alt { opacity: 0 !important; }
}

.watermark-grid,
.hero__mascot,
.hero__index {
  display: none;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      to bottom,
      rgba(250, 247, 245, 0.92) 0%,
      rgba(250, 247, 245, 0.72) 8%,
      rgba(250, 247, 245, 0.28) 22%,
      rgba(250, 247, 245, 0) 42%,
      rgba(250, 247, 245, 0) 72%,
      rgba(250, 247, 245, 0.18) 100%
    );
}

.hero__content {
  position: relative;
  z-index: 2;
  align-self: center;
  justify-self: start;
  width: min(100%, 580px);
  max-width: 580px;
  margin: -3vh 0 0 clamp(48px, 7vw, 140px);
  text-align: left;
  transform: translateX(0);
  transition: transform 0.75s var(--ease);
}

.hero__eyebrow,
.hero__title,
.hero__subtitle,
.hero__intro {
  opacity: 0;
  transform: translateY(22px);
  filter: blur(4px);
}

.hero.is-ready .hero__eyebrow,
.hero.is-ready .hero__title,
.hero.is-ready .hero__subtitle,
.hero.is-ready .hero__intro {
  animation: heroIn 0.9s var(--ease) forwards;
}

.hero.is-ready .hero__eyebrow { animation-delay: 0.05s; }
.hero.is-ready .hero__title { animation-delay: 0.16s; }
.hero.is-ready .hero__subtitle { animation-delay: 0.32s; }
.hero.is-ready .hero__intro { animation-delay: 0.46s; }

@keyframes heroIn {
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero__title .hero__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em) rotate(2deg);
  animation: charIn 0.7s var(--ease) forwards;
}

@keyframes charIn {
  to {
    opacity: 1;
    transform: translateY(0) rotate(0);
  }
}

.hero__eyebrow {
  display: inline-block;
  margin: 0 0 24px;
  padding: 0 36px 0 0;
  font-size: 10px;
  letter-spacing: 3px;
}

.hero__eyebrow::before { display: none; }
.hero__eyebrow::after { right: 0; width: 24px; }

.hero__title {
  margin: 0 0 12px;
  font-size: clamp(52px, 4.5vw, 78px);
  line-height: 1.16;
  letter-spacing: -.025em;
  background: none;
  -webkit-text-fill-color: currentColor;
}

.hero__subtitle {
  margin: 0;
  font-size: clamp(19px, 1.55vw, 25px);
  line-height: 1.55;
  font-style: normal;
  letter-spacing: .04em;
}

.hero__intro {
  max-width: 500px;
  margin-top: 22px;
  font-size: 15px;
  line-height: 1.9;
}

@media (max-width: 1280px) {
  .hero {
    grid-template-columns: minmax(0, 50%) minmax(0, 50%);
  }

  .hero__parallax {
    background-position: 56% center;
  }

  .hero__content {
    margin-left: clamp(36px, 5vw, 72px);
    max-width: 520px;
  }

  .hero__title { font-size: clamp(48px, 4.8vw, 66px); }
}

@media (max-width: 900px) {
  .hero {
    min-height: calc(100svh - var(--nav-h));
    display: flex;
    align-items: flex-start;
    padding: clamp(72px, 12vh, 120px) var(--gutter) 56px;
  }

  .hero__parallax {
    background-size: auto 100%;
    background-position: 62% center;
  }

  .hero__content {
    align-self: flex-start;
    width: min(100%, 560px);
    max-width: 560px;
    margin: 0;
  }
}

@media (max-width: 600px) {
  .hero {
    padding-top: 56px;
  }

  .hero__parallax {
    background-position: 66% center;
  }

  .hero__title { font-size: clamp(42px, 13vw, 56px); }
  .hero__subtitle { font-size: 18px; }
  .hero__intro { font-size: 14px; max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero__eyebrow,
  .hero__title,
  .hero__subtitle,
  .hero__intro,
  .hero__title .hero__char {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
  }

  .hero__parallax { transform: none !important; }
}