/* =====================================================================
   Atlantis Almere — Kinetic Hero  (dc-hero-architectural-animated)
   Editorial hero: word/line reveal + scrolling cuisine marquee.
   Scoped under .dc-khero. Edge-to-edge, self-contained.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,500&display=swap');

.elementor-widget-dc-hero-architectural-animated,
.elementor-widget-dc-hero-architectural-animated .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
}

.dc-khero {
    --dc-ink:       #08131f;
    --dc-gold:      #d4a24e;
    --dc-gold-soft: #e7c98b;
    --dc-heading:   #ffffff;
    --dc-text:      rgba(255,255,255,.8);
    --dc-glass:     rgba(255,255,255,.08);
    --dc-glass-brd: rgba(255,255,255,.18);
    --dc-min-h:     100svh;
    --dc-ease:      cubic-bezier(.16,1,.3,1);
    --dc-marquee:   38s;

    position: relative;
    width: 100%; max-width: 100%; margin: 0;
    min-height: var(--dc-min-h);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; isolation: isolate;
    background: var(--dc-ink); color: var(--dc-text);
    font-family: 'Karla', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* background */
.dc-khero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.dc-khero__bg-media { position: absolute; inset: -6%; width: 112%; height: 112%; object-fit: cover; transform: scale(1.08); will-change: transform; }
.dc-khero__bg-overlay {
    position: absolute; inset: 0; z-index: 1;
    background:
        radial-gradient(120% 90% at 50% 30%, rgba(8,19,31,.55) 0%, rgba(8,19,31,.82) 70%, rgba(6,14,24,.95) 100%);
}
.dc-khero__bg-grain {
    position: absolute; inset: 0; z-index: 2; opacity: .05; pointer-events: none; mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* content */
.dc-khero__inner {
    position: relative; z-index: 5;
    width: 100%; max-width: 1100px;
    padding: clamp(120px, 16vh, 200px) clamp(22px, 5vw, 60px) clamp(120px, 16vh, 180px);
    text-align: center;
}
.dc-khero__eyebrow {
    display: inline-flex; align-items: center; gap: 11px;
    padding: 9px 18px 9px 14px; border: 1px solid var(--dc-glass-brd); border-radius: 999px;
    background: var(--dc-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--dc-gold-soft);
}
.dc-khero__eyebrow svg { width: 18px; height: 18px; color: var(--dc-gold); }
.dc-khero__title {
    margin: 26px 0 0;
    font-family: 'Playfair Display', Georgia, serif; font-weight: 600; color: var(--dc-heading);
    font-size: clamp(2.8rem, 8vw, 6.5rem); line-height: .98; letter-spacing: -.015em;
}
.dc-khero__line { display: block; overflow: hidden; padding-bottom: .03em; }
.dc-khero__line-inner { display: block; will-change: transform; }
.dc-khero__title em { font-style: italic; font-weight: 500; color: var(--dc-gold); }
.dc-khero__subtitle { margin: 24px auto 0; max-width: 40ch; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.7; }

.dc-khero__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 36px; }
.dc-khero__btn {
    position: relative; display: inline-flex; align-items: center; gap: 11px;
    padding: 17px 30px; border-radius: 999px; overflow: hidden;
    font-size: 1rem; font-weight: 700; text-decoration: none; cursor: pointer;
    transition: transform .35s var(--dc-ease), box-shadow .35s var(--dc-ease), background-color .35s var(--dc-ease);
}
.dc-khero__btn svg { width: 19px; height: 19px; transition: transform .35s var(--dc-ease); }
.dc-khero__btn--primary { color: #1c1206; background: linear-gradient(135deg, var(--dc-gold-soft), var(--dc-gold)); box-shadow: 0 14px 34px -12px rgba(212,162,78,.7); }
.dc-khero__btn--primary:hover { transform: translateY(-3px); box-shadow: 0 22px 48px -14px rgba(212,162,78,.85); }
.dc-khero__btn--primary:hover svg { transform: translateX(4px); }
.dc-khero__btn--play { color: #fff; background: rgba(255,255,255,.07); border: 1px solid var(--dc-glass-brd); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dc-khero__btn--play:hover { transform: translateY(-3px); background: rgba(255,255,255,.14); }
.dc-khero__btn--play .dc-khero__play-ic {
    display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
    background: var(--dc-gold); color: #1c1206;
}
.dc-khero__btn--play .dc-khero__play-ic svg { width: 15px; height: 15px; }
.dc-khero__btn:focus-visible { outline: 3px solid var(--dc-gold-soft); outline-offset: 3px; }

/* marquee strip */
.dc-khero__marquee {
    position: absolute; left: 0; bottom: 0; z-index: 4;
    width: 100%; padding: 18px 0;
    border-top: 1px solid var(--dc-glass-brd);
    background: linear-gradient(180deg, transparent, rgba(6,14,24,.5));
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.dc-khero__track {
    display: flex; width: max-content;
    animation: dc-khero-scroll var(--dc-marquee) linear infinite;
}
.dc-khero__marquee:hover .dc-khero__track { animation-play-state: paused; }
@keyframes dc-khero-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.dc-khero__word {
    display: inline-flex; align-items: center; gap: 18px;
    margin-right: 18px;
    font-family: 'Playfair Display', serif; font-style: italic;
    font-size: clamp(1.1rem, 1.8vw, 1.6rem); color: rgba(255,255,255,.85); white-space: nowrap;
}
.dc-khero__word::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dc-gold); }

/* JS hidden states */
.dc-khero--anim .dc-khero__eyebrow,
.dc-khero--anim .dc-khero__subtitle,
.dc-khero--anim .dc-khero__actions { opacity: 0; }

@media (max-width: 600px) {
    .dc-khero__btn { flex: 1 1 100%; justify-content: center; }
    .dc-khero__inner { padding-bottom: 140px; }

    /* achtergrondfoto zonder parallax-bleed en Ken-Burns zoom op mobiel:
       geen 112%-uitsnede meer, dus maximaal beeld zichtbaar.
       !important nodig: een globale `img { height: auto !important }`
       reset maakt de foto anders een lage strook. */
    .dc-khero .dc-khero__bg-media {
        inset: 0;
        width: 100% !important;
        height: 100% !important;
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .dc-khero__bg-media { transform: none !important; }
    .dc-khero__line-inner { transform: none !important; }
    .dc-khero__track { animation: none; }
    .dc-khero--anim .dc-khero__eyebrow,
    .dc-khero--anim .dc-khero__subtitle,
    .dc-khero--anim .dc-khero__actions { opacity: 1 !important; }
}