/* Hepsi-Markt Scroll-Video-Hero - home-hero-scroll.css
 * Prototyp "Der Marktgang": gepinnte Fullscreen-Sektion, Video wird per
 * ScrollTrigger gescrubbt, Overlays blenden progress-gesteuert ein.
 * Ohne JS (oder bei prefers-reduced-motion) bleibt der Posterframe stehen
 * und alle Overlays sind sichtbar (Klasse .is-static).
 */

/* Hausschrift (gleiche Quelle wie Elementor-Custom-Font "MyriadProBold") */
@font-face {
    font-family: 'MyriadProBold';
    font-style: normal;
    font-weight: normal;
    font-display: swap;
    src: url('/wp-content/uploads/2024/11/MyriadPro-Bold-1.woff') format('woff');
}

.hepsi-scrollhero {
    position: relative;
    background: #101210;
}

.hepsi-scrollhero__stage {
    position: relative;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
}

/* Ein Videoelement je Kapitel, gestapelt; nur das aktive ist sichtbar */
.hepsi-scrollhero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.hepsi-scrollhero__video.is-active {
    opacity: 1;
}

/* Im statischen Fallback nur das erste Video zeigen */
.hepsi-scrollhero.is-static .hepsi-scrollhero__video {
    display: none;
}

.hepsi-scrollhero.is-static .hepsi-scrollhero__video:first-of-type {
    display: block;
    opacity: 1;
}

/* Scrim: dezenter Verlauf fuer Textlesbarkeit auf dem Video */
.hepsi-scrollhero__stage::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to bottom, rgba(12, 14, 10, 0.35) 0%, rgba(12, 14, 10, 0) 30%),
        linear-gradient(to top, rgba(12, 14, 10, 0.45) 0%, rgba(12, 14, 10, 0) 34%),
        linear-gradient(105deg, rgba(12, 14, 10, 0.38) 0%, rgba(12, 14, 10, 0) 46%);
}

/* ---------- Overlays ---------- */

.hepsi-scrollhero__overlay {
    position: absolute;
    z-index: 3;
    opacity: 0;
}

.hepsi-scrollhero.is-static .hepsi-scrollhero__overlay,
.hepsi-scrollhero.is-static .hepsi-scrollhero__tag {
    opacity: 1 !important;
    transform: none !important;
}

/* Headline: grosse weisse Display-Typo direkt auf dem Video, keine Karte */
.hepsi-scrollhero__headline {
    top: clamp(88px, 16vh, 180px);
    left: clamp(20px, 6vw, 96px);
    max-width: min(660px, 86vw);
}

.hepsi-scrollhero__kicker {
    display: inline-block;
    font-family: 'MyriadProBold', 'Segoe UI', -apple-system, sans-serif !important;
    font-size: 13px;
    font-weight: normal;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff !important;
    background: #c22126;
    padding: 6px 14px;
    border-radius: 4px;
    margin-bottom: 16px;
}

.hepsi-scrollhero__title {
    margin: 0;
    font-family: 'MyriadProBold', 'Segoe UI', -apple-system, sans-serif !important;
    font-weight: normal;
    font-size: clamp(36px, 5vw, 66px);
    line-height: 1.02;
    letter-spacing: -0.01em;
    color: #fff !important;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hepsi-scrollhero__sub {
    margin: 14px 0 0;
    font-size: clamp(15px, 1.7vw, 19px);
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.92);
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

/* ---------- Preis-Tags im Bild ---------- */

.hepsi-scrollhero__tag {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    opacity: 0;
}

.hepsi-scrollhero__tag--1 { top: 58%; left: 12%; }
.hepsi-scrollhero__tag--2 { top: 38%; right: 10%; }
.hepsi-scrollhero__tag--3 { top: 72%; left: 48%; }

.hepsi-scrollhero__tag-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #c22126;
    border: 3px solid #fff;
    box-shadow: 0 0 0 4px rgba(194, 33, 38, 0.25);
    flex-shrink: 0;
}

.hepsi-scrollhero__tag-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 8px;
    padding: 10px 12px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.22);
    max-width: 230px;
}

.hepsi-scrollhero__tag-name {
    font-family: 'MyriadProBold', 'Segoe UI', -apple-system, sans-serif !important;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.25;
    color: #2c2c2a;
}

/* bestehendes hepsi-tag-Badge im Tag kompakt halten */
.hepsi-scrollhero__tag-price .hepsi-tag__info { display: none; }
.hepsi-scrollhero__tag-price .hepsi-tag { margin: 0; }

/* ---------- Outro ---------- */

.hepsi-scrollhero__outro {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    max-width: 90vw;
}

.hepsi-scrollhero__title--outro {
    color: #fff !important;
    text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55);
    font-size: clamp(30px, 4.8vw, 58px);
}

/* Ein lauter Akzent: CTA in Preisschild-Rot, weisser Text (gegen Theme-Linkfarbe) */
.hepsi-scrollhero__cta {
    display: inline-block;
    margin-top: 22px;
    background: #c22126;
    color: #fff !important;
    font-family: 'MyriadProBold', 'Segoe UI', -apple-system, sans-serif !important;
    font-weight: normal;
    letter-spacing: 0.03em;
    font-size: 17px;
    padding: 15px 34px;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.3);
    transition: background 0.2s ease, transform 0.2s ease;
}

.hepsi-scrollhero__cta:hover {
    background: #a41a1f;
    color: #fff !important;
    transform: translateY(-1px);
}

/* ---------- Chrome: Dots, Hint, Skip ---------- */

.hepsi-scrollhero__dots {
    position: absolute;
    z-index: 5;
    right: clamp(12px, 2.5vw, 36px);
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.hepsi-scrollhero__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.85);
    background: transparent;
    transition: background 0.25s ease, transform 0.25s ease;
}

.hepsi-scrollhero__dot.is-active {
    background: #fff;
    transform: scale(1.2);
}

.hepsi-scrollhero__hint {
    position: absolute;
    z-index: 5;
    left: 50%;
    bottom: 22px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    color: #fff;
    font-size: 13px;
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
    animation: hepsi-hint-bob 2.2s ease-in-out infinite;
}

@keyframes hepsi-hint-bob {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50%      { transform: translateX(-50%) translateY(6px); }
}

/* unten links, damit das Live-Chat-Widget (fixed unten rechts) ihn nicht verdeckt */
.hepsi-scrollhero__skip {
    position: absolute;
    z-index: 5;
    left: clamp(12px, 2.5vw, 36px);
    bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(16, 18, 16, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: #fff !important;
    font-size: 13px;
    padding: 9px 16px;
    border-radius: 999px;
    text-decoration: none;
    backdrop-filter: blur(3px);
}

.hepsi-scrollhero__skip:hover {
    background: rgba(16, 18, 16, 0.8);
    color: #fff !important;
}

/* ---------- Statischer Fallback ---------- */

.hepsi-scrollhero.is-static .hepsi-scrollhero__hint,
.hepsi-scrollhero.is-static .hepsi-scrollhero__dots,
.hepsi-scrollhero.is-static .hepsi-scrollhero__skip {
    display: none;
}

.hepsi-scrollhero.is-static .hepsi-scrollhero__outro {
    top: auto;
    bottom: 8%;
    transform: translateX(-50%);
}

/* Im statischen Fallback nur Kapitel 1 zeigen (sonst stapeln die Overlays) */
.hepsi-scrollhero.is-static .hepsi-scrollhero__headline:not([data-hero-chapter="0"]),
.hepsi-scrollhero.is-static .hepsi-scrollhero__tag:not([data-hero-tag-chapter="0"]) {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    .hepsi-scrollhero__hint { animation: none; }
}

/* ---------- Mobile ---------- */

@media (max-width: 768px) {
    .hepsi-scrollhero__headline {
        top: 84px;
        left: 18px;
        right: 18px;
        max-width: none;
    }

    /* Auf schmalen Viewports duerfen Headline und Outro nicht so gross
       werden, dass sie ueber die halbe Hoehe laufen. */
    .hepsi-scrollhero__title {
        font-size: clamp(26px, 8vw, 36px);
    }

    .hepsi-scrollhero__title--outro {
        font-size: clamp(24px, 7.5vw, 34px);
    }

    .hepsi-scrollhero__sub {
        font-size: 14px;
    }

    /* Tags weiter auseinander, damit sich die Karten nicht ueberlappen */
    .hepsi-scrollhero__tag--1 { top: 46%; left: 6%; }
    .hepsi-scrollhero__tag--2 { top: 62%; right: 5%; left: auto; }
    .hepsi-scrollhero__tag--3 { top: 78%; left: 6%; }
    .hepsi-scrollhero__tag--4 { display: none; }

    .hepsi-scrollhero__tag-card {
        max-width: 175px;
        padding: 8px 10px;
    }

    .hepsi-scrollhero__tag-name {
        font-size: 13px;
    }

    .hepsi-scrollhero__dots { display: none; }

    /* Hint ueber den Skip-Button heben, sonst ueberlappen beide unten */
    .hepsi-scrollhero__hint { bottom: 78px; }
}

/* Ladehinweis: erscheint nur, wenn beim Kapitelwechsel das naechste Video
   noch nicht genug Daten hat. Das bisherige Kapitel bleibt so lange
   sichtbar, damit der Hero nicht auf einem Standbild einfriert. */
.hepsi-scrollhero__stage::before {
    content: '';
    position: absolute;
    z-index: 6;
    left: 50%;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: -22px 0 0 -22px;
    border: 3px solid rgba(255, 255, 255, 0.35);
    border-top-color: #fff;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.hepsi-scrollhero.is-loading .hepsi-scrollhero__stage::before {
    opacity: 1;
    animation: hepsi-hero-spin 0.8s linear infinite;
}

@keyframes hepsi-hero-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .hepsi-scrollhero.is-loading .hepsi-scrollhero__stage::before { animation: none; }
}