/* =====================================================================
   Atlantis Almere — Cinematic Hero  (dc-hero-intro)
   Premium fine-dining hero. Self-contained, edge-to-edge, scoped.
   All classes prefixed .dc-hero. No external icon/font frameworks.
   ===================================================================== */

@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');

/* ---- Reset Elementor spacing so the widget renders edge-to-edge ---- */
.elementor-widget-dc-hero-intro,
.elementor-widget-dc-hero-intro .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    width: 100%;
    max-width: 100%;
}

/* ---- Design tokens (overridable from Elementor Style controls) ---- */
.dc-hero {
    --dc-ink:        #0a1b2a;            /* deep ocean navy            */
    --dc-ink-2:      #0d2438;            /* navy layer                 */
    --dc-gold:       #d4a24e;            /* warm candlelight gold      */
    --dc-gold-soft:  #e7c98b;
    --dc-heading:    #ffffff;
    --dc-text:       rgba(255,255,255,.78);
    --dc-glass:      rgba(255,255,255,.08);
    --dc-glass-brd:  rgba(255,255,255,.18);
    --dc-min-h:      100svh;
    --dc-radius:     22px;
    --dc-ease:       cubic-bezier(.16,1,.3,1);

    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: var(--dc-min-h);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: 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-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.dc-hero__bg-media {
    position: absolute;
    inset: -6% -6% -6% -6%;          /* bleed for parallax/Ken-Burns   */
    width: 112%;
    height: 112%;
    object-fit: cover;
    will-change: transform;
    transform: scale(1.08);          /* JS animates toward 1 on load   */
}

/* Cinematic legibility wash: dark from left + bottom, lighter top-right */
.dc-hero__bg-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(105deg,
            rgba(8,20,34,.92) 0%,
            rgba(8,20,34,.72) 38%,
            rgba(8,20,34,.30) 70%,
            rgba(8,20,34,.55) 100%),
        radial-gradient(120% 90% at 12% 100%,
            rgba(4,12,22,.85) 0%, rgba(4,12,22,0) 60%);
}

/* Subtle film grain for depth (pure CSS, no asset) */
.dc-hero__bg-grain {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: .055;
    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");
}

/* Top vignette so a transparent header stays readable */
.dc-hero__bg-topfade {
    position: absolute;
    inset: 0 0 auto 0;
    height: 220px;
    z-index: 2;
    background: linear-gradient(180deg, rgba(6,15,26,.65), transparent);
    pointer-events: none;
}

/* =========================== LAYOUT =========================== */
.dc-hero__inner {
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
    padding: clamp(110px, 14vh, 180px) clamp(22px, 5vw, 72px) clamp(80px, 10vh, 120px);
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    align-items: center;
    gap: clamp(32px, 5vw, 80px);
}

/* =========================== CONTENT =========================== */
.dc-hero__content { max-width: 640px; }

.dc-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px 9px 14px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dc-gold-soft);
}
.dc-hero__eyebrow svg { width: 18px; height: 18px; flex: none; color: var(--dc-gold); }

/* ---- Animated wok icon (All You Can Eat · Wereldkeuken) ---- */
.dc-hero__eyebrow-ic { display: inline-flex; flex: none; }
.dc-hero__eyebrow .dc-hero__wok {
    width: 40px;
    height: 30px;
    flex: none;
    color: var(--dc-gold);
    overflow: visible;
    transform-origin: 50% 90%;
    animation: dc-wok-bob 3.4s ease-in-out infinite;
}
/* rising steam */
.dc-hero__wok .dc-wok__steam path {
    transform-box: fill-box;
    transform-origin: bottom center;
    opacity: 0;
    color: var(--dc-gold-soft);
    animation: dc-wok-steam 2.6s ease-in-out infinite;
}
.dc-hero__wok .dc-wok__steam path:nth-child(2) { animation-delay: .55s; }
.dc-hero__wok .dc-wok__steam path:nth-child(3) { animation-delay: 1.1s; }

@keyframes dc-wok-steam {
    0%   { opacity: 0;   transform: translateY(3px) scaleY(.65); }
    30%  { opacity: .85; }
    70%  { opacity: .45; }
    100% { opacity: 0;   transform: translateY(-7px) scaleY(1.15); }
}
@keyframes dc-wok-bob {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-1.5px) rotate(-2deg); }
}
@media (prefers-reduced-motion: reduce) {
    .dc-hero__eyebrow .dc-hero__wok { animation: none; transform: none; }
    .dc-hero__wok .dc-wok__steam path { animation: none; opacity: .5; transform: none; }
}

.dc-hero__title {
    margin: 26px 0 0;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    color: var(--dc-heading);
    font-size: clamp(2.6rem, 5.6vw, 5.1rem);
    line-height: 1.04;
    letter-spacing: -.01em;
}
/* Each headline line gets a clipping mask for the reveal */
.dc-hero__line { display: block; overflow: hidden; padding-bottom: .04em; }
.dc-hero__line-inner { display: block; will-change: transform; }
.dc-hero__title em {
    font-style: italic;
    font-weight: 500;
    color: var(--dc-gold);
}

.dc-hero__subtitle {
    margin: 24px 0 0;
    max-width: 30em;
    font-size: clamp(1rem, 1.25vw, 1.18rem);
    line-height: 1.7;
    color: var(--dc-text);
}

/* ---- Actions ---- */
.dc-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 38px;
}
.dc-hero__btn {
    --b-pad-y: 17px;
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    padding: var(--b-pad-y) 30px;
    border-radius: 999px;
    font-family: 'Karla', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .01em;
    text-decoration: none;
    cursor: pointer;
    overflow: hidden;
    transition: transform .35s var(--dc-ease), box-shadow .35s var(--dc-ease),
                background-color .35s var(--dc-ease), color .35s var(--dc-ease);
}
.dc-hero__btn svg { width: 19px; height: 19px; flex: none; transition: transform .35s var(--dc-ease); }
.dc-hero__btn:focus-visible { outline: 3px solid var(--dc-gold-soft); outline-offset: 3px; }

.dc-hero__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-hero__btn--primary::after {            /* sheen sweep on hover */
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-120%);
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%);
    transition: transform .8s var(--dc-ease);
}
.dc-hero__btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 48px -14px rgba(212,162,78,.85);
}
.dc-hero__btn--primary:hover::after { transform: translateX(120%); }
.dc-hero__btn--primary:hover svg { transform: translateX(4px); }

.dc-hero__btn--ghost {
    color: var(--dc-heading);
    background: rgba(255,255,255,.06);
    border: 1px solid var(--dc-glass-brd);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.dc-hero__btn--ghost:hover {
    transform: translateY(-3px);
    background: rgba(255,255,255,.13);
    border-color: rgba(255,255,255,.4);
}

/* ---- Stats ---- */
.dc-hero__stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: clamp(20px, 3vw, 40px);
    margin-top: 46px;
    padding-top: 30px;
    border-top: 1px solid rgba(255,255,255,.12);
}
.dc-hero__stat { display: flex; align-items: center; gap: 13px; }
.dc-hero__stat-ic {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    flex: none;
    border-radius: 13px;
    color: var(--dc-gold);
    background: var(--dc-glass);
    border: 1px solid var(--dc-glass-brd);
}
.dc-hero__stat-ic svg { width: 23px; height: 23px; }
.dc-hero__stat-value {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--dc-heading);
}
.dc-hero__stat-value .dc-hero__suffix { color: var(--dc-gold); }
.dc-hero__stat-label {
    font-size: .82rem;
    letter-spacing: .04em;
    color: rgba(255,255,255,.62);
}

/* =========================== VISUAL / FLOATING CARDS =========================== */
.dc-hero__visual {
    position: relative;
    min-height: 520px;
    perspective: 1200px;
}
.dc-hero__cards {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 520px;
    transform-style: preserve-3d;
}
.dc-hero__card {
    position: absolute;
    width: clamp(220px, 24vw, 300px);
    border-radius: var(--dc-radius);
    overflow: hidden;
    background: var(--dc-glass);
    border: 1px solid var(--dc-glass-brd);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 34px 80px -28px rgba(0,0,0,.75);
    will-change: transform;
    transition: box-shadow .5s var(--dc-ease);
}
.dc-hero__card::after {                 /* glossy edge highlight */
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(160deg, rgba(255,255,255,.22), transparent 42%);
    pointer-events: none;
}
.dc-hero__card-figure {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
}
.dc-hero__card-img {
    width: 100%; height: 100%;
    object-fit: cover;
    transform: scale(1.04);
    transition: transform .9s var(--dc-ease);
}
.dc-hero__card-video { display: block; background: #04101b; }
.dc-hero__card:hover { box-shadow: 0 44px 96px -26px rgba(0,0,0,.85); }
.dc-hero__card:hover .dc-hero__card-img { transform: scale(1.12); }
.dc-hero__card-shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(7,16,28,.9) 100%);
}
.dc-hero__card-meta {
    position: absolute;
    left: 18px; right: 18px; bottom: 16px;
    z-index: 2;
}
.dc-hero__card-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 8px;
    padding: 4px 11px;
    border-radius: 999px;
    background: rgba(212,162,78,.16);
    border: 1px solid rgba(212,162,78,.4);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--dc-gold-soft);
}
.dc-hero__card-tag svg { width: 13px; height: 13px; }
.dc-hero__card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.18rem;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}
.dc-hero__card-sub { font-size: .85rem; color: rgba(255,255,255,.72); }

/* staggered placement of up to 3 cards */
.dc-hero__card--1 { top: 2%;  right: 6%;  z-index: 3; }
.dc-hero__card--2 { top: 30%; left: 0;    z-index: 4; width: clamp(190px, 21vw, 256px); }
.dc-hero__card--3 { bottom: 0; right: 16%; z-index: 5; width: clamp(170px, 19vw, 232px); }

/* floating accent chip (e.g. rating / live cooking pulse) */
.dc-hero__chip {
    position: absolute;
    z-index: 6;
    top: 14%;
    left: 8%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 16px;
    background: rgba(10,22,36,.62);
    border: 1px solid var(--dc-glass-brd);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 44px -18px rgba(0,0,0,.8);
    will-change: transform;
}
.dc-hero__chip-dot {
    position: relative;
    width: 11px; height: 11px;
    border-radius: 50%;
    background: #36d77a;
    flex: none;
}
.dc-hero__chip-dot::after {
    content: "";
    position: absolute; inset: -5px;
    border-radius: 50%;
    border: 2px solid #36d77a;
    animation: dc-hero-pulse 1.8s var(--dc-ease) infinite;
}
.dc-hero__chip-txt { font-size: .82rem; font-weight: 600; color: #fff; line-height: 1.25; }
.dc-hero__chip-txt b { display: block; font-size: .72rem; font-weight: 500; color: rgba(255,255,255,.6); letter-spacing: .05em; }

@keyframes dc-hero-pulse {
    0%   { transform: scale(.6); opacity: 1; }
    100% { transform: scale(1.8); opacity: 0; }
}

/* =========================== SCROLL INDICATOR =========================== */
.dc-hero__scroll {
    position: absolute;
    left: 50%;
    bottom: 26px;
    z-index: 7;
    transform: translateX(-50%);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.7);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    text-decoration: none;
}
/* ---- Animated cloche + scroll chevrons (Wereldkeuken) ---- */
.dc-hero__scroll-svg {
    width: 38px;
    height: auto;
    overflow: visible;
    color: rgba(255,255,255,.85);
}
.dc-hero__scroll:hover .dc-hero__scroll-svg { color: #fff; }
/* serving dome gently bobs, like a lid hovering */
.dc-hero__scroll-svg .dc-scroll__dome {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: dc-scroll-lid 3.2s ease-in-out infinite;
}
/* down chevrons in gold, travelling downward in sequence */
.dc-hero__scroll-svg .dc-scroll__chev {
    stroke: var(--dc-gold);
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: dc-scroll-chev 1.8s ease-in-out infinite;
}
.dc-hero__scroll-svg .dc-scroll__chev--2 { animation-delay: .22s; }

@keyframes dc-scroll-chev {
    0%   { opacity: 0; transform: translateY(-3px); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(6px); }
}
@keyframes dc-scroll-lid {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-2px); }
}

/* =========================== JS ANIMATION INITIAL STATES =========================== */
/* Only applied when GSAP is active (root gets .dc-hero--anim); avoids FOUC */
.dc-hero--anim .dc-hero__eyebrow,
.dc-hero--anim .dc-hero__subtitle,
.dc-hero--anim .dc-hero__actions,
.dc-hero--anim .dc-hero__stats,
.dc-hero--anim .dc-hero__card,
.dc-hero--anim .dc-hero__chip,
.dc-hero--anim .dc-hero__scroll { opacity: 0; }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 1024px) {
    .dc-hero__inner {
        grid-template-columns: 1fr;
        gap: 48px;
        padding-top: clamp(120px, 18vh, 160px);
    }
    .dc-hero__visual { min-height: 460px; order: 2; }
    .dc-hero__content { max-width: 720px; }
    .dc-hero__bg-overlay {
        background:
            linear-gradient(180deg, rgba(8,20,34,.55) 0%, rgba(8,20,34,.45) 45%, rgba(8,20,34,.9) 100%);
    }
}

@media (max-width: 600px) {
    .dc-hero { --dc-min-h: 100svh; }
    .dc-hero__inner {
        padding-left: 20px;
        padding-right: 20px;
        padding-top: clamp(88px, 12vh, 112px);   /* content iets hoger op mobiel */
        gap: 36px;
    }
    .dc-hero__title { font-size: clamp(2.2rem, 11vw, 3.2rem); }
    .dc-hero__actions { gap: 12px; }
    .dc-hero__btn { flex: 1 1 100%; justify-content: center; }

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

    /* stats altijd op één regel */
    .dc-hero__stats {
        flex-wrap: nowrap;
        gap: 10px;
        margin-top: 30px;
        padding-top: 22px;
    }
    .dc-hero__stat { flex: 1 1 0; min-width: 0; gap: 9px; }
    .dc-hero__stat-ic { width: 36px; height: 36px; border-radius: 11px; }
    .dc-hero__stat-ic svg { width: 19px; height: 19px; }
    .dc-hero__stat-value { font-size: 1.12rem; }
    .dc-hero__stat-label { font-size: .68rem; line-height: 1.3; }

    /* turn the floating canvas into a clean stacked strip on phones */
    .dc-hero__visual { min-height: 0; perspective: none; }
    .dc-hero__cards { display: flex; gap: 14px; min-height: 0; overflow: visible; }
    .dc-hero__card,
    .dc-hero__card--1,
    .dc-hero__card--2,
    .dc-hero__card--3 {
        position: relative;
        inset: auto;
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }
    .dc-hero__card-meta { left: 12px; right: 12px; }
    .dc-hero__card-title { font-size: .98rem; }
    .dc-hero__card-sub { display: none; }
    .dc-hero__chip { display: none; }
    .dc-hero__scroll { display: none; }
}

/* =========================== REDUCED MOTION =========================== */
@media (prefers-reduced-motion: reduce) {
    .dc-hero__bg-media { transform: none !important; }
    .dc-hero__card,
    .dc-hero__chip,
    .dc-hero__line-inner { transform: none !important; }
    .dc-hero--anim .dc-hero__line-inner,
    .dc-hero--anim .dc-hero__eyebrow,
    .dc-hero--anim .dc-hero__subtitle,
    .dc-hero--anim .dc-hero__actions,
    .dc-hero--anim .dc-hero__stats,
    .dc-hero--anim .dc-hero__card,
    .dc-hero--anim .dc-hero__chip,
    .dc-hero--anim .dc-hero__scroll { opacity: 1 !important; }
    .dc-hero__scroll-svg .dc-scroll__dome,
    .dc-hero__scroll-svg .dc-scroll__chev,
    .dc-hero__chip-dot::after { animation: none; }
    .dc-hero__scroll-svg .dc-scroll__chev { opacity: .8; transform: none; }
}