/* ============================================================
   MARVINROSS.COM — HYBRID intro landing
   Ported from the FABLE 5 ALT: rapid-fire photo flash + MARVIN ROSS
   + breathing gold ENTER. Click/tap drops into the existing site.
   Self-contained: no GSAP, scoped under .mr-intro only.
   ============================================================ */

/* black veil for cross-app navigation — lifts on page boot, drops back
   before leaving for the ALT pages. Sits UNDER the intro overlay. */
.page-veil {
  position: fixed; inset: 0; z-index: 99990; background: #000;
  opacity: 1; pointer-events: none; transition: opacity 0.45s ease;
}
.page-veil.lifted { opacity: 0; }

.mr-intro {
  position: fixed; inset: 0; z-index: 100000; background: #000;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; overflow: hidden;
  color: #f2efe9;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  transition: opacity 0.85s ease;
}
.mr-intro.holding { cursor: default; }
.mr-intro.leaving { cursor: default; opacity: 0; }

.mr-intro-frame {
  position: relative;
  width: min(58vw, 460px); height: min(72vh, 600px);
  overflow: hidden;
  transition: transform 0.55s cubic-bezier(0.55, 0, 0.85, 0.36);
}
/* CLEAN EXIT (Marvin, 2026-06-11): on click the flashing stops, the photo
   you landed on HOLDS with a slow breath while name + ENTER slip away,
   THEN the whole landing fades over the interface. The photo itself never
   pops out — the overlay fade carries it. */
.mr-intro.holding .mr-intro-frame {
  transform: scale(1.05);
  transition: transform 2.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.mr-intro.holding .mr-intro-name span {
  opacity: 0; transform: translateY(-14px);
  transition-delay: 0s !important; transition-duration: 0.35s;
}
.mr-intro.holding .mr-intro-enter { opacity: 0; }

.mr-intro-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; opacity: 0; display: block;
}
.mr-intro-img.on { opacity: 1; }

.mr-intro-name {
  position: absolute; top: 10vh; left: 0; right: 0; text-align: center;
  font-size: clamp(22px, 4vw, 44px); letter-spacing: 14px; font-weight: 600;
  mix-blend-mode: difference; pointer-events: none;
}
.mr-intro-name span {
  display: inline-block; opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.7s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.mr-intro-name.shown span { opacity: 1; transform: translateY(0); }
.mr-intro.leaving .mr-intro-name span { opacity: 0; transform: translateY(-16px); transition-duration: 0.4s; }

/* bare glowing letters — NO bubble/pill around it (Marvin, 2026-06-11),
   raised an eighth-inch from where the pill sat */
.mr-intro-enter {
  position: absolute; bottom: max(24px, calc(13vh - 108px)); left: 0; right: 0; text-align: center;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.mr-intro.leaving .mr-intro-enter { opacity: 0; }
.mr-intro-enter span {
  position: relative; display: inline-block;
  font-size: 13px; letter-spacing: 10px; color: #f2efe9;
  padding: 0; margin-left: 10px; /* recenter: letter-spacing trails the last char */
  border: none; border-radius: 0; background: none;
  animation: mrEnterBreathe 2.6s ease-in-out infinite;
}
@keyframes mrEnterBreathe {
  0%, 100% {
    transform: scale(1); opacity: 0.75;
    text-shadow: 0 0 10px rgba(201, 168, 76, 0.25), 0 0 26px rgba(201, 168, 76, 0.12);
  }
  50% {
    transform: scale(1.045); opacity: 1;
    text-shadow: 0 0 14px rgba(201, 168, 76, 0.65), 0 0 38px rgba(201, 168, 76, 0.35), 0 0 70px rgba(201, 168, 76, 0.18);
  }
}

@media (max-width: 720px) {
  .mr-intro-frame { width: 80vw; height: 62vh; }
  .mr-intro-name { letter-spacing: 8px; }
}