/* Landing hero (front/landing/partials/hero.blade.php).
   ----------------------------------------------------------------------
   A rounded navy panel: photo underneath, a gradient over it for the
   text, and two tilted rows of photos sliding in opposite directions
   along the bottom. The theme's header is absolutely positioned over the
   top of the page, so the panel's top padding is what keeps the heading
   clear of it. Shared by both branches. */

.mt-hero {
  --mt-navy: #262261;
  --mt-navy-deep: #15123d;
  --mt-accent: #7a6ad8;
  --mt-gold: #f9a932;
  --gutter: 12px;
  /* The whole panel fits the first screen, so the wall is sized from the
     viewport height (narrow phones cap it by width). --wall-h is how much
     of it shows above the panel's bottom edge: two rows of 16:9 photos
     and a gap, less the part pushed below by --wall-drop. */
  --wall-w: clamp(140px, min(24vh, 55vw), 210px);
  --wall-gap: 14px;
  --wall-drop: calc(var(--wall-w) * -.3);
  --wall-h: calc(var(--wall-w) * .85 + var(--wall-gap));
  padding: var(--gutter) var(--gutter) 0;
}

.mt-hero__panel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  /* A screen too short for the content lets the panel grow rather than
     clip it. */
  min-height: calc(100vh - var(--gutter));
  min-height: calc(100svh - var(--gutter));
  /* Top: clears the theme's header, which floats over the panel. Bottom:
     the wall is tilted, so its high end climbs past --wall-h. */
  padding: clamp(90px, 13vh, 120px) 20px calc(var(--wall-h) + 40px);
  border-radius: 28px;
  background: var(--mt-navy-deep);
  color: #fff;
}

/* No strip photos in the settings: no room kept for them. */
.mt-hero__panel--bare {
  padding-bottom: clamp(48px, 8vh, 96px);
}

.mt-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: mt-hero-zoom 2.4s cubic-bezier(.16, 1, .3, 1) backwards;
}

.mt-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(60% 50% at 50% 100%, rgba(122, 106, 216, .35) 0%, rgba(122, 106, 216, 0) 70%),
    linear-gradient(180deg, rgba(21, 18, 61, .86) 0%, rgba(38, 34, 97, .76) 50%, rgba(21, 18, 61, .92) 100%);
}

.mt-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1100px;
  text-align: center;
}

.mt-hero__inner > * {
  animation: mt-hero-rise .8s cubic-bezier(.16, 1, .3, 1) backwards;
}

.mt-hero__inner > :nth-child(2) { animation-delay: .1s; }
.mt-hero__inner > :nth-child(3) { animation-delay: .2s; }
.mt-hero__inner > :nth-child(4) { animation-delay: .3s; }

.mt-hero__eyebrow {
  margin: 0 0 clamp(10px, 2vh, 18px);
  padding: 6px 16px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  color: var(--mt-gold);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
}

.mt-hero__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.5rem, min(4.6vw, 6.2vh), 3.4rem);
  font-weight: 700;
  line-height: 1.25;
}

.mt-hero__title span {
  display: block;
}

.mt-hero__lead {
  max-width: 60ch;
  margin: clamp(10px, 2vh, 18px) 0 0;
  color: rgba(255, 255, 255, .85);
  font-size: clamp(14px, min(1.4vw, 2.2vh), 18px);
  line-height: 1.7;
}

.mt-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(16px, 3vh, 28px);
}

.mt-hero__btn {
  display: inline-block;
  padding: 0 26px;
  height: 50px;
  line-height: 50px;
  border-radius: 25px;
  font-size: 15px;
  font-weight: 600;
  transition: background-color .25s ease, color .25s ease, transform .25s ease;
}

.mt-hero__btn:hover {
  transform: translateY(-2px);
}

.mt-hero__btn--primary {
  background: #fff;
  color: var(--mt-navy);
}

.mt-hero__btn--primary:hover {
  background: var(--mt-gold);
  color: var(--mt-navy);
}

.mt-hero__btn--ghost {
  border: 1px solid rgba(255, 255, 255, .6);
  color: #fff;
  line-height: 48px;
}

.mt-hero__btn--ghost:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* ── Photo wall ─────────────────────────────────────────────────────── */
/* Wider than the panel (inset -7%) and tilted, so the rows run off both
   edges; the mask fades them in from the top so they never sit hard
   against the text. */

.mt-hero__wall {
  position: absolute;
  inset-inline: -7%;
  bottom: var(--wall-drop);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--wall-gap);
  transform: rotate(-4deg);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 24%);
  mask-image: linear-gradient(180deg, transparent, #000 24%);
  animation: mt-hero-wall-in .9s cubic-bezier(.16, 1, .3, 1) .35s backwards;
}

.mt-hero__row {
  overflow: hidden;
}

.mt-hero__track {
  display: flex;
  gap: var(--wall-gap);
  width: max-content;
  animation: mt-hero-wall-a 70s linear infinite;
}

.mt-hero__track--b {
  animation-name: mt-hero-wall-b;
  animation-duration: 80s;
}

/* -50% is exactly one set of photos, so the gap after the last photo
   has to be part of the set too or the loop jumps by one gap. */
.mt-hero__track img {
  flex: 0 0 auto;
  width: var(--wall-w);
  height: auto;
  aspect-ratio: 600 / 338;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}

.mt-hero__track > img:last-child {
  margin-inline-end: var(--wall-gap);
}

/* In RTL the track starts at the right edge, so it slides the other way. */
[dir="rtl"] .mt-hero__track { animation-name: mt-hero-wall-a-rtl; }
[dir="rtl"] .mt-hero__track--b { animation-name: mt-hero-wall-b-rtl; }

@media (min-width: 768px) {
  .mt-hero {
    --gutter: 16px;
    --wall-w: clamp(170px, 30vh, 300px);
    --wall-gap: 18px;
  }

  .mt-hero__panel {
    padding-top: clamp(110px, 16vh, 150px);
    border-radius: 36px;
  }
}

@keyframes mt-hero-zoom { from { transform: scale(1.1); } to { transform: none; } }
@keyframes mt-hero-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes mt-hero-wall-in {
  from { opacity: 0; transform: rotate(-4deg) translateY(30px); }
  to { opacity: 1; transform: rotate(-4deg); }
}
@keyframes mt-hero-wall-a { from { transform: none; } to { transform: translateX(-50%); } }
@keyframes mt-hero-wall-b { from { transform: translateX(-50%); } to { transform: none; } }
@keyframes mt-hero-wall-a-rtl { from { transform: none; } to { transform: translateX(50%); } }
@keyframes mt-hero-wall-b-rtl { from { transform: translateX(50%); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .mt-hero__bg,
  .mt-hero__inner > *,
  .mt-hero__wall,
  .mt-hero__track {
    animation: none;
  }
}