/* hero.css — modeled on bh-hero pattern, adapted for MyFreelancePoint editorial */

.mfp-hero {
    position: relative;
    min-height: 720px;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
    padding: 130px 24px 100px;
}

/* Real workspace photo, color-graded to editorial warm */
.mfp-hero-bg {
    position: absolute; inset: 0;
    background-image: url('/wp-content/uploads/hero/hero-workspace.jpg');
    background-size: cover;
    background-position: center 50%;
    z-index: 0;
    filter: sepia(0.35) saturate(1.18) hue-rotate(-8deg) brightness(0.85) contrast(1.05);
}

/* Editorial overlay — warm charcoal with teal hint */
.mfp-hero-overlay {
    position: absolute; inset: 0;
    background:
        linear-gradient(180deg, rgba(20, 18, 14, .55) 0%, rgba(20, 18, 14, .35) 35%, rgba(28, 24, 18, .30) 65%, rgba(10, 14, 14, .72) 100%),
        radial-gradient(ellipse at 50% 38%, rgba(20, 18, 14, .35), transparent 65%),
        linear-gradient(0deg, rgba(1, 78, 82, .08) 0%, rgba(1, 78, 82, .08) 100%);
    z-index: 1;
}

.mfp-hero-inner {
    position: relative;
    z-index: 2;
    max-width: 920px;
    text-align: center;
}

/* Eyebrow pill */
.mfp-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: rgba(212, 144, 28, .14);
    border: 1px solid rgba(212, 144, 28, .38);
    border-radius: var(--mfp-radius-pill);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: #fde9bf;
    margin-bottom: 28px;
}
.mfp-hero-eyebrow-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--mfp-warm);
    box-shadow: 0 0 0 4px rgba(212, 144, 28, .28);
    flex-shrink: 0;
}

/* Main title — Playfair Display, italic accent */
.mfp-hero-title {
    font-family: var(--mfp-font-serif);
    font-size: clamp(2.6rem, 6vw, 4.4rem);
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -.022em;
    color: #fff;
    margin: 0 0 22px;
}
.mfp-hero-title-accent {
    color: #f5cf80;
    font-style: italic;
    font-weight: 500;
}

/* Sub */
.mfp-hero-sub {
    font-size: 1.16rem;
    color: rgba(255, 255, 255, .88);
    line-height: 1.7;
    max-width: 680px;
    margin: 0 auto 36px;
}

/* Search bar (find a review) */
.mfp-hero-search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: var(--mfp-radius-pill);
    padding: 5px 5px 5px 22px;
    box-shadow: 0 22px 50px rgba(0, 0, 0, .32);
    max-width: 620px;
    margin: 0 auto 24px;
}
.mfp-hero-search-icon { color: var(--mfp-ink-3); flex-shrink: 0; }
.mfp-hero-search input {
    flex: 1;
    border: 0;
    background: transparent;
    padding: 14px 14px;
    font-size: 1rem;
    color: var(--mfp-ink);
    outline: none;
    font-family: inherit;
}
.mfp-hero-search input::placeholder { color: var(--mfp-ink-3); }
.mfp-hero-search-btn {
    width: 46px; height: 46px;
    display: grid; place-items: center;
    background: var(--mfp-warm);
    color: var(--mfp-ink);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}
.mfp-hero-search-btn:hover { background: var(--mfp-warm-2); transform: scale(1.06); }

/* Topic chips */
.mfp-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 38px;
}
.mfp-chip {
    display: inline-block;
    padding: 9px 18px;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    color: rgba(255, 255, 255, .92);
    border-radius: var(--mfp-radius-pill);
    font-size: .85rem;
    font-weight: 500;
    transition: background .2s ease, border-color .2s ease, transform .15s ease;
}
.mfp-chip:hover {
    background: rgba(255, 255, 255, .18);
    border-color: rgba(212, 144, 28, .55);
    color: #fff;
    transform: translateY(-1px);
}

/* Mini-stats */
.mfp-hero-mini-stats {
    display: flex;
    gap: 28px;
    justify-content: center;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, .8);
    font-size: .88rem;
}
.mfp-hero-mini-stats > div { display: flex; align-items: center; gap: 8px; }
.mfp-mini-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.mfp-dot-teal  { background: var(--mfp-accent); box-shadow: 0 0 0 3px rgba(1, 105, 111, .35); }
.mfp-dot-warm  { background: var(--mfp-warm);   box-shadow: 0 0 0 3px rgba(212, 144, 28, .35); }
.mfp-dot-green { background: #65b07a;           box-shadow: 0 0 0 3px rgba(101, 176, 122, .30); }

@media (max-width: 720px) {
    .mfp-hero { min-height: 640px; padding: 100px 20px 70px; }
    .mfp-hero-title { font-size: clamp(2.2rem, 8vw, 3rem); }
    .mfp-hero-sub { font-size: 1.02rem; }
    .mfp-hero-search { padding: 4px 4px 4px 18px; }
    .mfp-hero-search input { font-size: .94rem; padding: 12px 10px; }
    .mfp-hero-mini-stats { gap: 14px; font-size: .8rem; }
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS — same DNA as BoniHelden Plattform
   ═══════════════════════════════════════════════════════════ */

/* 1) Ken-Burns slow zoom */
@keyframes mfp-kenburns {
    0%   { transform: scale(1.00) translate(0, 0); }
    50%  { transform: scale(1.08) translate(-1.2%, 0.6%); }
    100% { transform: scale(1.00) translate(0, 0); }
}
.mfp-hero-bg {
    transform-origin: 50% 55%;
    animation: mfp-kenburns 40s ease-in-out infinite;
    will-change: transform;
}

/* 2) Warm light drift across hero */
@keyframes mfp-warmth-drift {
    0%   { transform: translate(-3%, 0); opacity: .50; }
    50%  { transform: translate(3%,  -1%); opacity: .75; }
    100% { transform: translate(-3%, 0); opacity: .50; }
}
.mfp-hero-overlay::after {
    content: "";
    position: absolute; inset: -10%;
    background: radial-gradient(circle at 78% 28%, rgba(245, 207, 128, .20), transparent 48%);
    pointer-events: none;
    animation: mfp-warmth-drift 24s ease-in-out infinite;
    will-change: transform, opacity;
}

/* 3) Stagger rise of hero content */
@keyframes mfp-rise {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.mfp-hero-eyebrow,
.mfp-hero-title,
.mfp-hero-sub,
.mfp-hero-search,
.mfp-hero-chips,
.mfp-hero-mini-stats {
    opacity: 0;
    animation: mfp-rise .9s cubic-bezier(.2, .7, .2, 1) forwards;
}
.mfp-hero-eyebrow    { animation-delay: .10s; }
.mfp-hero-title      { animation-delay: .22s; }
.mfp-hero-sub        { animation-delay: .42s; }
.mfp-hero-search     { animation-delay: .58s; }
.mfp-hero-chips      { animation-delay: .72s; }
.mfp-hero-mini-stats { animation-delay: .86s; }

/* 4) Pulsing dots */
@keyframes mfp-dot-pulse-warm {
    0%, 100% { box-shadow: 0 0 0 4px rgba(212, 144, 28, .28); }
    50%      { box-shadow: 0 0 0 7px rgba(212, 144, 28, .12); }
}
@keyframes mfp-dot-pulse-teal {
    0%, 100% { box-shadow: 0 0 0 3px rgba(1, 105, 111, .30); }
    50%      { box-shadow: 0 0 0 6px rgba(1, 105, 111, .12); }
}
@keyframes mfp-dot-pulse-green {
    0%, 100% { box-shadow: 0 0 0 3px rgba(101, 176, 122, .25); }
    50%      { box-shadow: 0 0 0 6px rgba(101, 176, 122, .10); }
}
.mfp-hero-eyebrow-dot { animation: mfp-dot-pulse-warm 2.4s ease-in-out infinite; }
.mfp-dot-teal  { animation: mfp-dot-pulse-teal  3.0s ease-in-out infinite; }
.mfp-dot-warm  { animation: mfp-dot-pulse-warm  3.0s ease-in-out infinite .4s; }
.mfp-dot-green { animation: mfp-dot-pulse-green 3.0s ease-in-out infinite .8s; }

/* 5) Accent italic glow */
@keyframes mfp-accent-glow {
    0%, 100% { text-shadow: 0 0 0 transparent; }
    50%      { text-shadow: 0 0 26px rgba(245, 207, 128, .42); }
}
.mfp-hero-title-accent {
    animation: mfp-accent-glow 5s ease-in-out infinite;
    animation-delay: 1.4s;
}

/* 6) Search lift on focus */
.mfp-hero-search { transition: box-shadow .35s ease, transform .35s ease; }
.mfp-hero-search:focus-within {
    box-shadow: 0 30px 60px rgba(0, 0, 0, .42), 0 0 0 4px rgba(212, 144, 28, .28);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .mfp-hero-bg,
    .mfp-hero-overlay::after,
    .mfp-hero-eyebrow-dot,
    .mfp-dot-teal, .mfp-dot-warm, .mfp-dot-green,
    .mfp-hero-title-accent { animation: none; }
    .mfp-hero-eyebrow,
    .mfp-hero-title,
    .mfp-hero-sub,
    .mfp-hero-search,
    .mfp-hero-chips,
    .mfp-hero-mini-stats { opacity: 1; animation: none; }
}