/* XOX hero flow: animated hero visual (no external libraries). */
.xox-hf{--hf-pink:#e7488a;--hf-pink-soft:#f3a7c6;--hf-line:#f5c6da;--hf-ink:#2a2230;--hf-muted:#6f6470;container-type:inline-size;position:relative;width:100%}
.xox-hf__grid{display:grid;grid-template-columns:42% 58%;align-items:end}
.xox-hf__girl img{display:block;width:100%;height:auto}
.xox-hf__flow{position:relative;padding:8px 0}
.xox-hf__path{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}
.xox-hf__line{animation:xoxHfMarch 1.15s linear infinite}
.xox-hf.is-paused .xox-hf__line{animation-play-state:paused}
@keyframes xoxHfMarch{to{stroke-dashoffset:-16}}
.xox-hf__dot{fill:#fff;stroke:var(--hf-pink);stroke-width:2.5}
.xox-hf__glow{fill:var(--hf-pink);opacity:.18}
.xox-hf__row{position:relative;z-index:1;display:flex;align-items:center;margin:0 0 22px}
.xox-hf__row:last-child{margin-bottom:0}
.xox-hf__row--2{margin-left:14%}
.xox-hf__icon{flex:0 0 auto;width:clamp(78px,26cqi,112px);aspect-ratio:1;position:relative;z-index:2}
.xox-hf__icon img{display:block;width:100%;height:100%}
.xox-hf__card{position:relative;flex:1;min-width:0;margin-left:-18px;padding:12px 14px 12px 28px;background:rgba(255,255,255,.78);border:1.5px solid var(--hf-line);border-radius:16px;box-shadow:0 8px 24px rgba(231,72,138,.10)}
.xox-hf__head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.xox-hf__num{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#fff;border:2px solid var(--hf-pink);color:var(--hf-pink);font:700 13px/1 'Noto Sans HK',sans-serif}
.xox-hf__en{flex:1;min-width:0;padding-bottom:4px;border-bottom:1.5px solid var(--hf-line);color:var(--hf-pink);font:700 10px/1.2 'Noto Sans HK',sans-serif;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xox-hf__title{margin:2px 0 2px!important;color:var(--hf-ink);font:900 clamp(16px,5cqi,21px)/1.35 'Noto Sans HK',sans-serif;letter-spacing:.03em}
.xox-hf__text{margin:0!important;color:var(--hf-muted);font-size:13px;line-height:1.55}
/* entrance (only once JS has armed it, so content is never hidden without JS) */
.xox-hf.is-armed .xox-hf__girl{opacity:0;transform:translateY(40px)}
.xox-hf.is-armed .xox-hf__icon{opacity:0;transform:scale(.6)}
.xox-hf.is-armed .xox-hf__card{opacity:0;transform:translateX(24px)}
.xox-hf.is-in .xox-hf__girl{opacity:1;transform:none;transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1)}
.xox-hf.is-in .xox-hf__icon{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.34,1.8,.64,1)}
.xox-hf.is-in .xox-hf__card{opacity:1;transform:none;transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1)}
.xox-hf.is-in .xox-hf__row:nth-of-type(1) .xox-hf__icon{transition-delay:.25s}.xox-hf.is-in .xox-hf__row:nth-of-type(1) .xox-hf__card{transition-delay:.37s}
.xox-hf.is-in .xox-hf__row:nth-of-type(2) .xox-hf__icon{transition-delay:.87s}.xox-hf.is-in .xox-hf__row:nth-of-type(2) .xox-hf__card{transition-delay:.99s}
.xox-hf.is-in .xox-hf__row:nth-of-type(3) .xox-hf__icon{transition-delay:1.49s}.xox-hf.is-in .xox-hf__row:nth-of-type(3) .xox-hf__card{transition-delay:1.61s}
.xox-hf__reveal{transition:stroke-dashoffset 2.2s cubic-bezier(.45,0,.55,1) .2s}
/* narrow column (phone): flow first, then a smaller portrait */
@container (max-width:520px){
.xox-hf__grid{grid-template-columns:1fr}
.xox-hf__flow{order:1}
.xox-hf__girl{order:2;width:min(64%,260px);margin:20px auto 0}
.xox-hf__row--2{margin-left:8%}
.xox-hf__icon{width:88px}
}
@media (prefers-reduced-motion:reduce){.xox-hf__line{animation:none}.xox-hf *{transition:none!important}}