/* hero-composition.css - Talk To Gina motion kit */
.gm{--gm-surface:var(--bone-50,#FBF8F2);--gm-surface-2:var(--bone-100,#F7F3EC);--gm-line:var(--bone-border,#E4DDD3);--gm-text:var(--text-on-light,#14181F);--gm-mut:var(--text-on-light-mut,#55606E);--gm-blue:var(--cobalt-600,#1D4ED8);--gm-blue-2:var(--cobalt-700,#1740B0);--gm-blue-3:var(--cobalt-300,#7CA0F0);--gm-blue-soft:var(--cobalt-50,#EEF3FF);--gm-ok:var(--signal-approved,#0E9F6E);--gm-ok-soft:rgba(14,159,110,.12);--gm-wait:var(--signal-waiting,#C2740A);--gm-shadow:0 8px 30px rgba(11,14,20,.12);--gm-ease:cubic-bezier(.16,1,.3,1);--gm-soft:cubic-bezier(.4,0,.2,1);--gm-mono:var(--font-mono,'Geist Mono',ui-monospace,monospace);position:relative;width:100%;font-family:var(--font-body,'Outfit',system-ui,-apple-system,sans-serif);color:var(--gm-text);line-height:1.45;-webkit-font-smoothing:antialiased}.gm[data-theme=ink]{--gm-surface:var(--ink-700,#141A24);--gm-surface-2:var(--ink-800,#0D1117);--gm-line:var(--ink-600,#1E2530);--gm-text:var(--text-on-dark,#F4F6FA);--gm-mut:var(--text-on-dark-mut,#A6AEBD);--gm-blue-soft:rgba(124,160,240,.13);--gm-ok-soft:rgba(14,159,110,.2);--gm-shadow:0 12px 40px rgba(0,0,0,.35)}.gm *,.gm *::before,.gm *::after{box-sizing:border-box}.gm-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.gm-av{flex:none;display:inline-grid;place-items:center;width:2em;height:2em;border-radius:.6em;font-weight:700;font-size:1em;color:#fff;background:var(--gm-mut)}.gm-av--gina{background:linear-gradient(135deg,var(--gm-blue),var(--gm-blue-2))}.gm-btn{display:inline-flex;align-items:center;gap:.4em;font-weight:600;font-size:.86em;line-height:1;font-family:inherit;cursor:default;padding:.62em 1.05em;border-radius:999px;border:1px solid var(--gm-line);background:transparent;color:var(--gm-text);transition:transform .15s var(--gm-soft),background .2s,box-shadow .2s,border-color .2s}.gm-btn--p{background:var(--gm-blue);border-color:var(--gm-blue);color:#fff}.gm-btn.is-press{transform:scale(.93);box-shadow:0 0 0 5px color-mix(in srgb,var(--gm-blue) 22%,transparent)}.gm-wave{display:inline-block;width:1.9em;height:.9em;vertical-align:middle;color:var(--gm-blue)}.gm-wave path{stroke-dasharray:40;animation:gm-wave 1.1s linear infinite}@keyframes gm-wave{from{stroke-dashoffset:80}to{stroke-dashoffset:0}}.gm-dots{display:inline-flex;gap:3px;vertical-align:middle}.gm-dots i{width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.35;animation:gm-dot 1s infinite}.gm-dots i:nth-child(2){animation-delay:.15s}.gm-dots i:nth-child(3){animation-delay:.3s}@keyframes gm-dot{30%{opacity:1;transform:translateY(-2px)}}.gm-paused,.gm-paused *,.gm-paused *::before,.gm-paused *::after{animation-play-state:paused!important}.gm-static *,.gm-static *::before,.gm-static *::after{transition:none!important;animation:none!important}@media (prefers-reduced-motion:reduce){.gm *,.gm *::before,.gm *::after{transition:none!important;animation:none!important}}
/* 7. Hero composition: baked photo composite + one animated Gina card */
.gm-hero{container-type:inline-size;display:block;max-width:1100px;margin-inline:auto}
.gm-hero picture,.gm-hero .hc-photo{display:block;width:100%;height:auto}
.gm-hero .hc-photo{border-radius:24px;background:#EFE9DF;box-shadow:0 30px 60px -30px rgba(11,14,20,.35)}
@container (max-width:640px){.gm-hero .hc-photo{border-radius:16px}}
.gm .gm-alt{margin:0;color:var(--gm-mut)}
.gm.gm-ready .gm-alt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hc-card{position:absolute;z-index:1;width:var(--w,15em);font-size:clamp(10px,1.3cqw,15px);display:flex;gap:.75em;align-items:center;padding:.85em 1em;background:var(--gm-surface);border:1px solid var(--gm-line);border-radius:18px;box-shadow:0 18px 40px -12px rgba(11,14,20,.35);opacity:0;transition:opacity .5s,transform .8s var(--gm-ease)}
.hc-card[data-a^=t]{top:var(--sy,6%)}.hc-card[data-a^=b]{bottom:var(--sy,6%)}
.hc-card[data-a$=l]{left:var(--sx,4%)}.hc-card[data-a$=r]{right:var(--sx,4%)}
.hc-card[data-a$=l]{transform:translate(-16px,10px)}.hc-card[data-a$=r]{transform:translate(16px,10px)}
.hc-card.in{opacity:1;transform:none}
.hc-card.in.float{animation:hc-float 6s ease-in-out infinite}
@keyframes hc-float{50%{translate:0 -4px}}
.hc-card .gm-av{font-size:.95em;position:relative}
.hc-card .gm-av::after{content:"";position:absolute;right:-3px;top:-3px;width:.6em;height:.6em;border-radius:50%;background:var(--gm-ok);box-shadow:0 0 0 2px var(--gm-surface)}
.hc-txt{min-width:0;flex:1;position:relative;height:2.7em;overflow:hidden}
.hc-it{position:absolute;inset:0;transition:opacity .45s,transform .55s var(--gm-ease)}
.hc-it.up{opacity:0;transform:translateY(-.8em)}
.hc-it.dn{opacity:0;transform:translateY(.8em)}
.hc-it b{display:block;font-size:.98em;font-weight:600;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-it time{display:block;font:500 .8em var(--gm-mono);color:var(--gm-mut);margin-top:.15em}
@container (max-width:520px){.gm-hero .hc-card{display:none}.gm-hero[data-mobile=show] .hc-card{display:flex;font-size:1.9cqw;border-radius:10px;padding:.7em .8em}}