/* ============================================================
   Хиро с Morph Slider: снимка на цял екран, преход „топене“ между снимките,
   лек Ken Burns (бавно приближаване), невидими зони „Назад“ / „Напред“ отстрани
   и заглавие в средата. Сватбите, но става и за други страници.

   Променливи (CSS на страницата може да ги смени):
     --mh-bg      фонът, докато се зареди първата снимка (топло тъмно)
     --mh-accent  цвят на надзаглавието и на линията „Надолу“ (цветът на стаята)
     --mh-h       височина (цял екран)
     --mh-kb      колко трае едно бавно приближаване (Ken Burns)
   ============================================================ */

.pfx.mh { position: relative; height: var(--mh-h, 100svh); min-height: 620px; overflow: clip; background: var(--mh-bg, #1C1A17); color: #fff; }
.pfx.mh .mh-media { position: absolute; inset: 0; z-index: 0; background: var(--mh-bg, #1C1A17); }

/* слайдерът изгрява плавно от тъмния фон, чак когато първата снимка е нарисувана */
.pfx.mh .mh-slider { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 1.8s var(--ease, ease), transform 3.2s var(--ease-out, ease-out); will-change: transform; }
.pfx.mh .mh-slider.is-ready { opacity: 1; transform: none; }
/* Ken Burns: целият слайдер бавно се приближава и се връща (само докато хирото се вижда) */
.pfx.mh .mh-ms { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--mh-bg, #1C1A17); user-select: none; -webkit-user-select: none; touch-action: pan-y; animation: mh-kb var(--mh-kb, 24s) ease-in-out infinite alternate; animation-play-state: paused; will-change: transform; }
.pfx.mh[data-vis] .mh-ms { animation-play-state: running; }
.pfx.mh.no-kb .mh-ms { animation: none; }
@keyframes mh-kb { from { transform: scale(1); } to { transform: scale(1.08) translate3d(-1%, -.6%, 0); } }
.pfx.mh .mh-stage { position: absolute; inset: 0; cursor: grab; outline: none; }
.pfx.mh .mh-stage:active { cursor: grabbing; }
.pfx.mh .mh-stage:focus-visible { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .7); }
.pfx.mh .mh-canvas { display: block; width: 100%; height: 100%; max-width: none; }

/* първата снимка като обикновена снимка: вижда се без JavaScript или без WebGL (и я виждат Google и AI) */
.pfx.mh .mh-fallback, #ajax-content-wrap .pfx.mh .mh-fallback { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
[data-js] .pfx.mh .mh-fallback { opacity: 0; }
[data-js] .pfx.mh.no-gl .mh-fallback { opacity: 1; transition: opacity 1.2s var(--ease, ease); }

/* мека тъмнина в средата, за да се чете заглавието */
.pfx.mh .mh-veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 60% 46% at 50% 52%, rgba(20, 16, 6, .42), rgba(20, 16, 6, .08)); }

/* невидимите зони за смяна: крайните 25 % от двете страни (само с мишка) */
.pfx.mh .mh-zone { position: absolute; top: 0; bottom: 0; z-index: 4; width: 25%; background: none; border: 0; padding: 0; }
.pfx.mh .mh-zone.is-prev { left: 0; }
.pfx.mh .mh-zone.is-next { right: 0; }
.pfx.mh .mh-zone:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .5); }
.pfx.mh.no-gl .mh-zone { display: none; }
@media (hover: none) { .pfx.mh .mh-zone { display: none; } }

/* заглавието в средата */
.pfx.mh .mh-center { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 140px var(--pad, 24px) 120px; pointer-events: none; }
.pfx.mh .mh-center .label { color: var(--mh-accent, var(--room, #E6C910)); letter-spacing: .4em; text-shadow: 0 1px 20px rgba(0, 0, 0, .35); }
.pfx.mh .mh-title { display: flex; flex-direction: column; margin-top: 22px; font-size: clamp(34px, 4.6vw, 74px); line-height: 1.04; letter-spacing: -.035em; font-style: italic; font-weight: 200; text-shadow: 0 2px 40px rgba(0, 0, 0, .3); }
.pfx.mh .mh-title > span { animation: mh-rise 1.6s var(--ease-out, ease-out) both; }
.pfx.mh .mh-title > span:nth-child(2) { animation-delay: .14s; }
.pfx.mh .mh-title > span:nth-child(3) { animation-delay: .28s; }
.pfx.mh .mh-title b { font-weight: 500; }
@keyframes mh-rise { from { opacity: 0; transform: translate3d(0, 56px, 0); } }

/* „Надолу“ с линия, която се изтегля и прибира */
.pfx.mh .mh-foot { position: absolute; z-index: 3; left: clamp(24px, 3vw, 50px); right: clamp(24px, 3vw, 50px); bottom: 30px; display: flex; justify-content: center; align-items: flex-end; gap: 16px; font-size: 15px; font-weight: 200; font-style: italic; color: rgba(255, 255, 255, .9); pointer-events: none; }
.pfx.mh .mh-down { display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 11px; font-weight: 600; font-style: normal; letter-spacing: .3em; text-transform: uppercase; }
.pfx.mh .mh-down i { width: 1px; height: 42px; background: var(--mh-accent, var(--room, #E6C910)); transform-origin: top; animation: mh-drop 2.6s var(--ease-io, ease-in-out) infinite; animation-play-state: paused; }
.pfx.mh[data-vis] .mh-down i { animation-play-state: running; }
@keyframes mh-drop { 0% { transform: scaleY(0); } 45% { transform: scaleY(1); transform-origin: top; } 55% { transform: scaleY(1); transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }


@media (max-width: 700px) {
  .pfx.mh .mh-center { padding: 110px 28px 110px; }
  .pfx.mh .mh-title { font-size: clamp(32px, 9vw, 46px); }
  .pfx.mh .mh-foot { left: 30px; right: 30px; bottom: 34px; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .pfx.mh .mh-slider { transition: opacity .6s; transform: none; }
  .pfx.mh .mh-ms, .pfx.mh .mh-title > span, .pfx.mh .mh-down i { animation: none; }
}