/* OnlineVCard — reusable card-header theme engine (shared).
   ONE `.vcard-header` element with an inner `.content`, driven entirely by CSS custom
   properties that vcard-theme.js writes from the saved config — so the identical theme
   renders in the editor, on template/preview pages, and on every published card. */

.vcard-header{
  --vh-height:190px; --vh-radius:0px; --vh-shadow:none; --vh-border:none; --vh-color:#fff;
  --vh-bg:transparent; --vh-bg-opacity:1; --vh-backdrop:none; --vh-imgblur:none; --vh-overlay:transparent;
  position:relative; overflow:hidden; display:flex; align-items:flex-end;
  min-height:var(--vh-height); border-radius:var(--vh-radius);
  box-shadow:var(--vh-shadow); border:var(--vh-border); color:var(--vh-color);
}
/* header behaviour — 'fixed' resolves to sticky inside a scroll container so it never covers content */
.vcard-header.is-sticky, .vcard-header.is-fixed{position:sticky; top:0; z-index:40}

.vcard-header > .bg{position:absolute; inset:0; z-index:0;
  background:var(--vh-bg); opacity:var(--vh-bg-opacity);
  backdrop-filter:var(--vh-backdrop); -webkit-backdrop-filter:var(--vh-backdrop); filter:var(--vh-imgblur)}
.vcard-header > video, .vcard-header > iframe{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; border:0; z-index:0}
.vcard-header > .overlay{position:absolute; inset:0; z-index:1; pointer-events:none; background:var(--vh-overlay)}
.vcard-header > .ph{position:absolute; inset:0; z-index:1; display:none; align-items:center; justify-content:center;
  text-align:center; padding:20px; color:#CFE0D8; font-size:12px; font-weight:600;
  background:repeating-linear-gradient(45deg,#12312B,#12312B 12px,#163a32 12px,#163a32 24px)}
.vcard-header > .ph.show{display:flex}
.vcard-header > .content{position:relative; z-index:2; width:100%; padding:20px 22px 22px; color:inherit}

/* animations (respect reduced-motion) */
@keyframes vh-gshift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes vh-floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes vh-shimmer{0%{filter:brightness(1)}50%{filter:brightness(1.18)}100%{filter:brightness(1)}}
@keyframes vh-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
.vcard-header.anim-gradient > .bg{background-size:280% 280% !important; animation:vh-gshift 9s ease infinite}
.vcard-header.anim-float .vh-seal{animation:vh-floaty 3.6s ease-in-out infinite}
.vcard-header.anim-shimmer > .bg{animation:vh-shimmer 3.4s ease-in-out infinite}
.vcard-header.anim-pulse .vh-seal{animation:vh-pulse 2.8s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.vcard-header *{animation:none !important}}