/* =====================================================================
   MANJI HERO PROTOTYPE (2026-09-08)
   Loaded only by manji.html. site.css is untouched.

   The footage is Shella's own, shot portrait at 720x1280. A portrait
   source cannot cover a wide desktop viewport and still show a horse:
   at 1920x900 a cover crop shows 26 percent of the frame height, which
   is a slab of hide and a boot. So the desktop hero is composed: the
   arena plate fills the viewport corner to corner (no matte anywhere),
   the live portrait frame stands full height on the right, and the
   statement reads in the space the plate gives us.

   On a phone the source is already the right shape, so it goes full
   bleed on all four edges and the statement sits under it.
   ===================================================================== */

.mhero {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  isolation: isolate;
  background: var(--sc-canvas);
  overflow: clip;
}

/* ---- the plate: real arena, corner to corner, never a matte ---- */
.mhero__plate {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.mhero__plate img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 42% 55%;
  display: block;
  filter: brightness(0.42) saturate(0.82);
  transform: scale(1.06);
}
.mhero__wash {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(97deg,
      color-mix(in oklab, var(--sc-canvas) 92%, transparent) 0%,
      color-mix(in oklab, var(--sc-canvas) 78%, transparent) 44%,
      color-mix(in oklab, var(--sc-canvas) 30%, transparent) 74%,
      transparent 100%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--sc-canvas) 70%, transparent) 0%,
      transparent 26%,
      transparent 66%,
      color-mix(in oklab, var(--sc-canvas) 74%, transparent) 100%);
}

/* ---- the live frame ---- */
.mhero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  display: grid;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.25rem);
  padding: calc(var(--hp-bar, 4.25rem) + 1rem) clamp(1rem, 4vw, 3.5rem) clamp(2rem, 4vh, 3.5rem);
}

.mhero__stagewrap {
  position: relative;
  justify-self: end;
  align-self: stretch;
  min-height: 0;
}
.mhero__stage {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: clip;
  background: #0b0906;
  border: 1px solid var(--sc-line, rgba(255, 255, 255, 0.14));
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55);
}
.mhero__stage video,
.mhero__stage .mhero__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 34%;
  display: block;
}
.mhero__poster { z-index: 1; }
.mhero__stage video { z-index: 2; }
.mhero__edge {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(11, 9, 6, 0.42) 0%, transparent 22%,
    transparent 72%, rgba(11, 9, 6, 0.62) 100%);
}
.mhero__tag {
  position: absolute;
  z-index: 4;
  left: 0.85rem;
  bottom: 0.8rem;
  margin: 0;
  font-family: var(--sc-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(244, 239, 232, 0.82);
}
.mhero__tag b {
  color: var(--sc-accent, #E85D1F);
  font-weight: 500;
}

/* ---- the statement ---- */
.mhero__copy {
  display: grid;
  gap: 0.9rem;
  justify-items: start;
  max-width: 30rem;
}
.mhero__copy .mhero__h {
  margin: 0;
  text-wrap: balance;
  max-width: 15ch;
}
.mhero__copy .mhero__lede {
  margin: 0;
  max-width: 40ch;
  color: var(--sc-ink-soft, #cdc4b8);
}
.mhero__cta { margin-top: 0.4rem; }

.mhero__marks {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 1.1rem 0 0;
  border-top: 1px solid var(--sc-hairline, rgba(255, 255, 255, 0.12));
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem clamp(1rem, 2vw, 2rem);
  width: 100%;
  max-width: 30rem;
}
.mhero__mark { display: grid; gap: 0.1rem; }
.mhero__name {
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 1.05vw, 1.1rem);
  line-height: 1.15;
  color: var(--sc-ink, #f4efe8);
}
.mhero__sub {
  font-family: var(--sc-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sc-ink-soft, #cdc4b8);
  line-height: 1.35;
}

/* ---- the proof: the real pad, its shield, and why it is on the horse ---- */
.mhero__proof {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.15rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--sc-hairline, rgba(255, 255, 255, 0.12));
  width: 100%;
  max-width: 30rem;
}
.mhero__padfig {
  margin: 0;
  overflow: clip;
  border: 1px solid var(--sc-line, rgba(255, 255, 255, 0.16));
  background: #0b0906;
  aspect-ratio: 4 / 3;
}
.mhero__padfig img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* framed on the shield, which is the point of showing it at all */
  object-position: 58% 52%;
  display: block;
}
.mhero__proofcopy { display: grid; gap: 0.2rem; }
.mhero__proofline {
  margin: 0;
  font-family: var(--sc-font-display);
  font-weight: 800;
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  line-height: 1.15;
  color: var(--sc-ink, #f4efe8);
}
.mhero__proofsub {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--sc-ink-soft, #cdc4b8);
}

/* ---- the scroll hint, so the hero says there is more ---- */
.mhero__more {
  position: absolute;
  z-index: 3;
  left: clamp(1rem, 4vw, 3.5rem);
  bottom: 1.15rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--sc-font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sc-ink-soft, #cdc4b8);
}
.mhero__more i {
  display: block;
  width: 2.4rem;
  height: 1px;
  background: var(--sc-accent, #E85D1F);
  transform-origin: 0 50%;
  animation: mheroPull 2.6s var(--hp-ease, cubic-bezier(.23, 1, .32, 1)) infinite;
}
@keyframes mheroPull {
  0%, 100% { transform: scaleX(0.35); opacity: 0.5; }
  46%      { transform: scaleX(1);    opacity: 1; }
}

/* =============================================== DESKTOP, 901 and up ==
   The stage is exactly the portrait aspect times a small zoom, so the
   crop stays shallow and the horse stays whole. Width is derived from
   the stage HEIGHT, which is what keeps it a tall window rather than a
   letterbox. */
@media (min-width: 901px) {
  .mhero {
    /* the clip is 4:5 now, so the frame is a third wider than the portrait cut
       at the same height and nothing has to be cropped to get there */
    --mh-zoom: 1.06;
    --mh-h: calc(100dvh - var(--hp-bar, 4.25rem) - 1.5rem);
  }
  .mhero__inner {
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: center;
    /* the picture runs off the right edge; only the reading side is padded */
    padding-right: 0;
    padding-bottom: 1.5rem;
  }
  .mhero__stagewrap {
    width: min(52vw, calc(var(--mh-h) * 0.8 * var(--mh-zoom)));
    height: var(--mh-h);
    align-self: center;
  }
  /* no rule on the bled edge, the picture simply leaves the screen */
  .mhero__stage { border-right: 0; }
  .mhero__copy { justify-self: start; }
}

@media (min-width: 1400px) {
  .mhero { --mh-zoom: 1.0; }
  .mhero__copy { max-width: 33rem; }
  .mhero__marks { max-width: 33rem; }
  .mhero__proof { max-width: 33rem; }
}

/* ==================================================== PHONE AND TABLET ==
   The source shape is the screen shape. Full bleed on all four edges,
   the statement under a scrim at the foot so it never sits on the horse. */
@media (max-width: 900px) {
  .mhero {
    min-height: 100vh;
    min-height: 100dvh;
  }
  .mhero__inner {
    /* the copy takes the height it needs, the picture takes the rest, so the
       hero is always exactly one screen and nothing is clipped */
    grid-template-rows: minmax(9rem, 1fr) auto;
    align-content: stretch;
    padding: 0;
    height: 100%;
  }
  .mhero__stagewrap {
    grid-row: 1;
    position: relative;
    width: 100%;
    height: 100%;
    justify-self: stretch;
    align-self: stretch;
  }
  .mhero__stage {
    border: 0;
    border-bottom: 1px solid var(--sc-line, rgba(255, 255, 255, 0.14));
    box-shadow: none;
  }
  /* full width, cover, biased up so the head and the orange sit in the band */
  .mhero__stage video,
  .mhero__stage .mhero__poster { object-position: 50% 42%; }
  /* the picture dissolves into the canvas instead of ending on a hard line */
  .mhero__edge {
    background: linear-gradient(180deg,
      rgba(11, 9, 6, 0.62) 0%, transparent 26%,
      transparent 62%, rgba(11, 9, 6, 0.55) 88%,
      color-mix(in oklab, var(--sc-canvas) 92%, transparent) 100%);
  }
  /* the statement reads on the canvas, never on the horse */
  .mhero__copy {
    grid-row: 2;
    align-self: start;
    max-width: none;
    padding: 1.05rem 1.1rem 1.25rem;
    gap: 0.6rem;
    z-index: 3;
    background: var(--sc-canvas);
  }
  .mhero__copy .mhero__h { max-width: 15ch; font-size: clamp(1.8rem, 7.6vw, 2.35rem); }
  /* the lede repeats what the proof line and the four marks already say, and on
     a phone that copy is what squeezes the picture. It goes; nothing is lost. */
  .mhero__copy .mhero__lede { display: none; }
  .mhero__cta { margin-top: 0.15rem; }
  .mhero__marks {
    max-width: none;
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    gap: 0.65rem 1rem;
  }
  .mhero__proof {
    max-width: none;
    grid-template-columns: 7.5rem minmax(0, 1fr);
    margin-top: 0.9rem;
    padding-top: 0.85rem;
    gap: 0.75rem;
  }
  .mhero__proofsub { font-size: 0.75rem; }
  .mhero__tag {
    left: auto;
    right: 0.8rem;
    bottom: 0.7rem;
  }
  .mhero__more { display: none; }
  .mhero__plate { display: none; }
}

@media (max-width: 560px) {
  .mhero__marks { grid-template-columns: 1fr 1fr; }
  .mhero__sub { font-size: 0.5625rem; }
  .mhero__name { font-size: 0.875rem; }
}

/* short phones: tighten the copy so the picture keeps a usable band */
@media (max-width: 900px) and (max-height: 720px) {
  .mhero__copy { padding-top: 0.9rem; gap: 0.55rem; }
  .mhero__copy .mhero__h { font-size: clamp(1.6rem, 6.6vw, 2rem); }
  .mhero__copy .mhero__lede { font-size: 0.875rem; }
  .mhero__marks { margin-top: 0.6rem; padding-top: 0.6rem; gap: 0.45rem 1rem; }
  .mhero__proof { margin-top: 0.6rem; padding-top: 0.6rem; grid-template-columns: 6rem minmax(0, 1fr); }
  .mhero__proofsub { font-size: 0.6875rem; }
}

/* ============================================================ REDUCED ==
   Nothing hides. The poster carries the picture, the pull line stops. */
@media (prefers-reduced-motion: reduce) {
  .mhero__more i { animation: none; transform: scaleX(1); opacity: 1; }
  .mhero__plate img { transform: none; }
}