/* City image ownership: keep the original Marrakech photograph. */
html body.marrakech-phase1[data-city-theme="marrakech"]{--bn-cinematic-v1-image:url("/assets/images/hero-marrakech-night-v2.webp")}
/* BYNIGHT — Marrakech-only cinematic hero experiment, 2026-10-30.
 * Reuses the existing real Marrakech nocturnal panorama (59 KB).
 * Only this city's unified landing page receives this stylesheet.
 * Video can replace the still later, without changing any other city.
 */
html body.marrakech-phase1[data-city-theme] .bynight-home-landing {
  background-color: #08050b !important;
  background-image:
    linear-gradient(180deg, rgba(7,4,11,.53) 0%, rgba(9,5,13,.36) 35%, rgba(7,4,10,.43) 63%, rgba(5,3,8,.84) 100%),
    var(--bn-cinematic-v1-image,var(--city-hero)) !important;
  background-size: cover, cover !important;
  background-position: center center, center 55% !important;
  background-repeat: no-repeat, no-repeat !important;
}
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .footer-glow {
  opacity: .12;
  pointer-events: none;
}

/* Preserve the approved centered top typography; make each line write in sequence. */
@keyframes bnMarrakechWrite {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}
@keyframes bnMarrakechReveal {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .footer-stage {
  top: calc(var(--home-section-inset,0px) + clamp(10px,1.7vh,18px));
  max-width: min(670px, calc(100% - 32px));
}
html body.marrakech-phase1[data-city-theme] .bynight-home-landing :is(.footer-tagline, .footer-kicker, .footer-sunset-signature) {
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.7));
}
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .bn-title-first {
  animation: bnMarrakechWrite 1.05s steps(17,end) .15s both;
}
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .bn-title-last {
  width: fit-content;
  animation: bnMarrakechWrite .88s steps(22,end) 1.20s both;
}
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .footer-kicker {
  animation: bnMarrakechWrite 1.25s steps(33,end) 2.08s both;
}
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .footer-sunset-signature {
  animation: bnMarrakechWrite 1.08s steps(31,end) 3.32s both;
}
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .footer-stage::after {
  animation: bnMarrakechReveal .65s ease-out 4.35s both;
}

/* A single, deliberately restrained introductory sentence above legal links. */
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .bn-home-editorial {
  position: absolute;
  top: auto;
  bottom: clamp(76px, 10.5vh, 118px);
  left: 50%;
  right: auto;
  z-index: 4;
  display: block;
  width: min(880px, calc(100% - 48px));
  max-width: 880px;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  text-align: center;
  animation: bnMarrakechReveal .9s ease-out 4.63s both;
}
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .bn-home-editorial .footer-intro {
  position: static;
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  color: #fff2dd;
  font-family: "DM Sans",sans-serif;
  font-size: clamp(13px,1.3vw,17px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: .01em;
  text-align: center;
  text-wrap: balance;
  text-shadow: 0 2px 15px rgba(0,0,0,.9), 0 1px 3px rgba(0,0,0,.7);
}
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .bn-home-editorial::after {
  display: none;
}
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .footer-legal {
  z-index: 5;
  text-shadow: 0 2px 10px rgba(0,0,0,.8);
}
/* The feature-card stays available in source code but isn't rendered on Marrakech. */
html body.marrakech-phase1[data-city-theme] .bynight-home-landing .hero-daily-feature {
  display: none !important;
}

@media (max-width: 760px) {
  html body.marrakech-phase1[data-city-theme] .bynight-home-landing {
    background-image:
      linear-gradient(180deg, rgba(6,3,9,.65) 0%, rgba(8,4,10,.44) 38%, rgba(5,3,8,.58) 62%, rgba(4,2,7,.90) 100%),
      var(--bn-cinematic-v1-image,var(--city-hero)) !important;
    background-position: center center, 76% center !important;
  }
  html body.marrakech-phase1[data-city-theme] .bynight-home-landing .footer-stage {
    top: calc(var(--home-section-inset,0px) + 9px);
  }
  html body.marrakech-phase1[data-city-theme] .bynight-home-landing .bn-home-editorial {
    bottom: clamp(90px, 14dvh, 123px);
    width: calc(100% - 26px);
  }
  html body.marrakech-phase1[data-city-theme] .bynight-home-landing .bn-home-editorial .footer-intro {
    font-size: clamp(11px,3.1vw,14px);
    line-height: 1.45;
  }
}
@media (max-width: 760px) and (max-height: 650px) {
  html body.marrakech-phase1[data-city-theme] .bynight-home-landing .bn-home-editorial {
    bottom: clamp(68px, 13dvh, 91px);
  }
  html body.marrakech-phase1[data-city-theme] .bynight-home-landing .bn-home-editorial .footer-intro {
    font-size: 11px;
    line-height: 1.33;
  }
}
@media (max-height: 500px) and (min-width: 761px) {
  html body.marrakech-phase1[data-city-theme] .bynight-home-landing .bn-home-editorial {
    bottom: 45px;
  }
  html body.marrakech-phase1[data-city-theme] .bynight-home-landing .bn-home-editorial .footer-intro {
    font-size: 12px;
    line-height: 1.3;
  }
}
@media (prefers-reduced-motion: reduce) {
  html body.marrakech-phase1[data-city-theme] .bynight-home-landing :is(.bn-title-first, .bn-title-last, .footer-kicker, .footer-sunset-signature, .bn-home-editorial),
  html body.marrakech-phase1[data-city-theme] .bynight-home-landing .footer-stage::after {
    animation: none !important;
    clip-path: none !important;
    opacity: 1 !important;
  }
}