/* =====================================================================
   Atlantis Almere — shared eyebrow (matches the hero eyebrow)
   Animated wok icon + uppercase gold label. Loaded with every widget
   (registered as the `dc-eyebrow` dependency). Colours come from each
   widget's own --dc-gold / --dc-gold-soft tokens.
   ===================================================================== */

.dc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-family: 'Karla', system-ui, -apple-system, sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--dc-gold, #c4923c);
}
.dc-eyebrow__ic { display: inline-flex; flex: none; }
.dc-eyebrow__wok {
    width: 38px;
    height: 28px;
    flex: none;
    color: var(--dc-gold, #c4923c);
    overflow: visible;
    transform-origin: 50% 90%;
    animation: dc-wok-bob 3.4s ease-in-out infinite;
}
.dc-eyebrow__wok .dc-wok__steam path {
    transform-box: fill-box;
    transform-origin: bottom center;
    opacity: 0;
    color: var(--dc-gold-soft, var(--dc-gold, #e7c98b));
    animation: dc-wok-steam 2.6s ease-in-out infinite;
}
.dc-eyebrow__wok .dc-wok__steam path:nth-child(2) { animation-delay: .55s; }
.dc-eyebrow__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-eyebrow__wok { animation: none; transform: none; }
    .dc-eyebrow__wok .dc-wok__steam path { animation: none; opacity: .5; transform: none; }
}