/* Public-page motion (landing-effects.js adds .hfx to .land only when motion is allowed). */

.hfx-progress { position: fixed; left: 0; top: 0; z-index: 60; width: 100%; height: 3px; pointer-events: none;
  background-color: #E8336E; background-image: linear-gradient(90deg, #C9A24B, #E8336E 55%, #F49AB8);
  transform: scaleX(0); transform-origin: 0 50%; }

/* Headline words rise in */
.hfx .hfx-w { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(6px);
  transition: opacity .7s ease, transform .8s cubic-bezier(.2,.7,.2,1), filter .7s ease; transition-delay: calc(var(--i) * 70ms + 120ms); }
.hfx .hfx-go .hfx-w { opacity: 1; transform: none; filter: none; }

/* Petals canvas sits over the band but under the copy */
.hfx-host { position: relative; overflow: hidden; }
.hs-aww > .hfx-petals, .hfx-host > .hfx-petals { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hs-aww-photo { will-change: transform; transform-origin: 50% 0; }

/* Phones and stickers: gentle float, plus a pointer tilt on desktop */
.hfx .hs-stage { --tx: 0; --ty: 0; }
.hfx .hs-stage.hfx-tilt { transform: perspective(1400px) rotateY(calc(var(--tx) * 6deg)) rotateX(calc(var(--ty) * -5deg));
  transition: transform .4s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; }
.hfx .hs-stage.hfx-tilt .hs-p-back { translate: calc(var(--tx) * -10px) calc(var(--ty) * -8px); transition: translate .5s ease; }
.hfx .hs-stage.hfx-tilt .hs-p-front { translate: calc(var(--tx) * 14px) calc(var(--ty) * 10px); transition: translate .5s ease; }
.hfx .hs-sticker { animation: hfx-bob 5s ease-in-out infinite; }
.hfx .hs-s-days { animation-delay: -1.6s; animation-duration: 4.2s; }
.hfx .hs-s-budget { animation-delay: -3s; animation-duration: 5.8s; }
@keyframes hfx-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
.hfx .hs-s-days { box-shadow: 0 12px 24px rgba(232,51,110,.35), 0 0 0 0 rgba(232,51,110,.45); animation-name: hfx-bob-pulse; }
@keyframes hfx-bob-pulse {
  0%, 100% { translate: 0 0; box-shadow: 0 12px 24px rgba(232,51,110,.35), 0 0 0 0 rgba(232,51,110,.45); }
  50% { translate: 0 -10px; box-shadow: 0 12px 24px rgba(232,51,110,.35), 0 0 0 12px rgba(232,51,110,0); }
}

/* Budget donut draws itself */
.hfx-donut circle + circle { transition: stroke-dasharray 1.2s cubic-bezier(.2,.7,.2,1) .2s; }
.hfx-donut:not(.hfx-in) circle + circle { stroke-dasharray: 0 138; }

/* Staggered reveals */
.hfx .hfx-up { opacity: 0; transform: translateY(22px) scale(.98); transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1); transition-delay: var(--d, 0ms); }
.hfx .hfx-up.hfx-in { opacity: 1; transform: none; }
/* Keep the existing hover lifts working once revealed */
.hfx .feattile.hfx-in { transition: opacity .6s ease, transform .2s, border-color .15s, box-shadow .2s; transition-delay: 0s; }
.hfx .feattile.hfx-in:hover { transform: translateY(-4px); }
.hfx .roleitem.hfx-in { transition-delay: 0s; }
.hfx .howstep.hfx-in .howno { animation: hfx-pop .6s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--d) + 200ms); }
@keyframes hfx-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.hfx .verify-item.hfx-in .verify-check { display: inline-block; animation: hfx-pop .5s cubic-bezier(.3,1.6,.5,1) both; animation-delay: calc(var(--d) + 150ms); }

/* Main CTA: shimmer sweep + magnetic pull */
.hfx .hs-cta { position: relative; overflow: hidden; isolation: isolate; }
.hfx .hs-cta::after { content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1; pointer-events: none;
  background-image: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg);
  animation: hfx-shine 4.5s ease-in-out infinite 1.5s; }
@keyframes hfx-shine { 0%, 70% { left: -60%; } 100% { left: 130%; } }
.hfx-magnet { transition: transform .12s, box-shadow .12s, translate .25s cubic-bezier(.2,.7,.2,1); }

/* Info-page heroes keep their copy above the petals */
.pg-hero.hfx-host > :not(.hfx-petals), .hero-grid.hfx-host > :not(.hfx-petals) { position: relative; z-index: 2; }

/* Cards: pointer tilt + glare (transform is set inline by the script) */
.hfx .hfx-card { position: relative; transition: transform .25s cubic-bezier(.2,.7,.2,1), border-color .15s, box-shadow .2s, opacity .6s ease; will-change: transform; }
.hfx .hfx-card.hfx-in { transition-delay: 0s; }
.hfx .hfx-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background-image: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), rgba(255,255,255,0) 55%); }
.hfx .hfx-card:hover { box-shadow: var(--shadow); }
.hfx .hfx-card:hover::after { opacity: 1; }

/* How it works: gold fill runs down the step rail as you scroll */
.hfx .hfx-rail .pg-step-rail::after { content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; margin-left: -1px; border-radius: 2px;
  background-color: #C9A24B; background-image: linear-gradient(180deg, #C9A24B, #E8336E); transform: scaleY(var(--fill, 0)); transform-origin: 50% 0; }
.hfx .hfx-rail:first-child .pg-step-rail::after { top: 28px; }
.hfx .hfx-rail:last-child .pg-step-rail::after { bottom: auto; height: 28px; }
.hfx .hfx-rail .pg-step-n { z-index: 1; transition: background-color .35s, color .35s, transform .35s cubic-bezier(.3,1.6,.5,1), box-shadow .35s; }
.hfx .hfx-rail.hfx-lit .pg-step-n { background-color: var(--gold); color: #fff; transform: scale(1.08); box-shadow: 0 0 0 6px rgba(201,162,75,.18); }

/* About: the "before" list gets crossed out one line at a time, then the portal card lands */
.hfx .pg-swap-old li.hfx-up { text-decoration-color: transparent; transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1), text-decoration-color .5s ease; }
.hfx .pg-swap-old li.hfx-in { text-decoration-color: rgba(232, 51, 110, .55); transition-delay: var(--d), var(--d), calc(var(--d) + 500ms); }
.hfx .pg-swap-arrow.hfx-in { animation: hfx-nudge 1.6s ease-in-out infinite 1s; }
@keyframes hfx-nudge { 0%, 100% { transform: none; } 50% { transform: translateY(6px); } }
.hfx .pg-swap-new.hfx-up { transform: translateY(22px) scale(.9); }
.hfx .pg-swap-new.hfx-in { transform: none; transition-delay: 700ms; box-shadow: 0 16px 36px rgba(20,40,74,.28); }

/* Heart bursts */
.hfx-heart { position: fixed; z-index: 70; pointer-events: none; font-size: 16px; line-height: 1; }

@media (prefers-reduced-motion: reduce) {
  .hfx-progress, .hfx-petals, .hfx-heart { display: none; }
}