/* Dayspring shared motion + layout system (loaded by every revamped page, after site.css).
   Layout cues: centered heroes with a framed visual stage, floating tilted chips,
   "sticker" buttons with an offset shadow, bordered lift-on-hover cards, and
   sections that slide over one another. Brand colours and type are unchanged. */

.fx {
  --hx-ease: cubic-bezier(.22, 1, .36, 1);
  --hx-spring: cubic-bezier(.34, 1.56, .64, 1);
  --hx-sheet-r: 48px;
  --hx-edge: rgba(255, 255, 255, .08);
}
@media (max-width: 860px) { .fx { --hx-sheet-r: 28px; } }

/* Even line lengths for centered intro copy (no orphaned words / split e-commerce) */
.fx .lead, .fx .stats__note { text-wrap: balance; }

/* Slide-in starting positions must never widen the page (clip, unlike hidden, keeps sticky working) */
.fx main { overflow-x: clip; }

/* ---------- Scroll progress ---------- */
.hx-progress { position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 60; pointer-events: none; }
.hx-progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--sp, 0)); background: linear-gradient(90deg, var(--blue-700), var(--blue), var(--amber)); }

/* ---------- Reveal system ----------
   Uses the individual translate/scale properties so a card's own hover
   `transform` never fights the entrance. Only active with JS. */
.js [data-anim] {
  opacity: 0;
  transition: opacity .9s var(--hx-ease) var(--d, 0s), translate .9s var(--hx-ease) var(--d, 0s), scale .9s var(--hx-ease) var(--d, 0s), var(--hx-extra, transform .3s var(--hx-ease));
}
.js [data-anim="up"] { translate: 0 38px; }
.js [data-anim="left"] { translate: -64px 0; }
.js [data-anim="right"] { translate: 64px 0; }
.js [data-anim="zoom"] { translate: 0 56px; scale: .92; }
.js [data-anim="pop"] { scale: .55; transition-timing-function: var(--hx-spring); }
.js [data-anim].is-in { opacity: 1; translate: 0 0; scale: 1; }

/* Shared floating loop */
@keyframes hxFloat { from { transform: translate3d(0, -8px, 0) rotate(-1.2deg); } to { transform: translate3d(0, 10px, 0) rotate(1.2deg); } }
@keyframes hxDrift { to { transform: translate3d(70px, 46px, 0) scale(1.15); } }
@keyframes hxSpin { to { rotate: 360deg; } }

/* ---------- Sticker buttons (offset shadow, press on hover) ---------- */
.fx .hx-btn {
  --sticker: var(--amber);
  padding: 17px 28px; font-size: 16px; border-radius: 14px;
  border: 2px solid rgba(255, 255, 255, .7);
  box-shadow: 6px 6px 0 var(--sticker);
  transition: transform .18s var(--hx-ease), box-shadow .18s var(--hx-ease);
}
.fx .hx-btn:hover { transform: translate(3px, 3px); box-shadow: 3px 3px 0 var(--sticker); }
.fx .hx-btn:active { transform: translate(6px, 6px); box-shadow: 0 0 0 var(--sticker); }
.fx .hx-btn--light { background: var(--white); color: var(--ink); border-color: var(--ink); --sticker: var(--amber); }
.fx .hx-btn--light:hover { background: var(--white); }
.fx .hx-btn--dark { background: var(--ink); color: var(--snow); border: 2px solid var(--ink); border-radius: 12px; padding: 12px 18px; box-shadow: 4px 4px 0 var(--blue-300); transition: transform .18s var(--hx-ease), box-shadow .18s var(--hx-ease); }
.fx .hx-btn--dark:hover { background: var(--ink); transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--blue-300); }

/* ---------- Hero ---------- */
.hx-hero { position: relative; isolation: isolate; overflow: hidden; text-align: center; padding: clamp(36px, 6vh, 88px) 0 0; }
.hx-hero > .wrap { position: relative; z-index: 1; }
.hx-aurora { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hx-aurora::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .2) 1px, transparent 1.6px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(60% 55% at 50% 28%, #000, transparent); mask-image: radial-gradient(60% 55% at 50% 28%, #000, transparent); }
.hx-aurora i { position: absolute; border-radius: 50%; filter: blur(100px); animation: hxDrift 22s ease-in-out infinite alternate; }
.hx-aurora i:nth-child(1) { width: 560px; height: 560px; left: -160px; top: -140px; background: #0657d0; opacity: .5; }
.hx-aurora i:nth-child(2) { width: 480px; height: 480px; right: -140px; top: 20px; background: #0099ff; opacity: .26; animation-duration: 28s; animation-delay: -9s; }
.hx-aurora i:nth-child(3) { width: 400px; height: 400px; left: 36%; top: 260px; background: #8a5a00; opacity: .3; animation-duration: 32s; animation-delay: -15s; }

.hx-hero__head { max-width: 1120px; margin-inline: auto; }
.hx-title { font-size: clamp(40px, min(6vw, 10.5vh), 80px); line-height: 1.04; letter-spacing: -.035em; margin-bottom: clamp(16px, 2.6vh, 26px); }
.hx-title .nowrap { background: linear-gradient(90deg, #4da3ff, #0099ff 55%, #ffb407); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-title .hx-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .16em; margin-bottom: -.16em; }
.hx-title .hx-wi { display: inline-block; }
.js .hx-title:not(.is-split) { opacity: 0; }
.js .hx-title.is-split .hx-wi { transform: translateY(118%); animation: hxWordUp 1.1s var(--hx-ease) forwards; animation-delay: calc(.1s + var(--i, 0) * .09s); }
@keyframes hxWordUp { to { transform: none; } }
.hx-hero .lead { margin: 0 auto clamp(24px, 4vh, 38px); max-width: 640px; text-wrap: balance; }


/* Visual stage frame (shared). Sizing lives with each page. */
.hx-stage { position: relative; margin-top: clamp(36px, 6vh, 84px); }
.hx-stage__bg { position: absolute; inset: 0; border-radius: 34px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .16); background: #07142e; box-shadow: 0 50px 120px rgba(6, 87, 208, .35); }
.hx-stage__bg::before { content: ''; position: absolute; inset: -25%; animation: hxDrift 18s ease-in-out infinite alternate;
  background:
    radial-gradient(38% 46% at 16% 28%, rgba(31, 120, 255, .95), transparent 70%),
    radial-gradient(34% 44% at 86% 18%, rgba(0, 153, 255, .8), transparent 70%),
    radial-gradient(30% 40% at 72% 92%, rgba(255, 180, 7, .5), transparent 70%),
    radial-gradient(34% 44% at 24% 96%, rgba(124, 77, 255, .55), transparent 70%); }
.hx-stage__bg::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .3) 1px, transparent 1.6px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 90% at 50% 45%, #000, transparent); mask-image: radial-gradient(70% 90% at 50% 45%, #000, transparent); }

.hx-chip { position: absolute; left: var(--x); top: var(--y); width: clamp(52px, 6.2vw, 80px); aspect-ratio: 1; display: grid; place-items: center; rotate: var(--r, 0deg); }
.hx-chip__in { width: 100%; height: 100%; display: grid; place-items: center; background: var(--white); border: 2px solid #0b1a3a; border-radius: 22px; box-shadow: 5px 5px 0 rgba(0, 10, 28, .6); animation: hxFloat var(--t, 6s) ease-in-out infinite alternate; animation-delay: var(--w, 0s); }
.hx-chip img { width: 62%; height: auto; border-radius: 12px; }
.hx-chip--1 { --x: 7%; --y: 16%; --r: -9deg; --t: 6.5s; }
.hx-chip--2 { --x: calc(93% - 80px); --y: 11%; --r: 8deg; --t: 7.5s; --w: -2s; }
.hx-chip--3 { --x: 15%; --y: 62%; --r: 7deg; --t: 5.8s; --w: -1s; }
.hx-chip--4 { --x: calc(86% - 80px); --y: 64%; --r: -7deg; --t: 7s; --w: -3.5s; }
.hx-doodle { position: absolute; fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .75; pointer-events: none; }
.hx-doodle--loop { left: 27%; top: 12%; width: 84px; rotate: -12deg; animation: hxFloat 8s ease-in-out infinite alternate; }
.hx-doodle--burst { right: 27%; top: 14%; width: 44px; animation: hxFloat 6s ease-in-out infinite alternate; animation-delay: -2s; }
@media (max-width: 860px) {
  .hx-chip--1 { --x: 4%; --y: 10%; } .hx-chip--2 { --x: calc(96% - 64px); --y: 8%; }
  .hx-chip--3 { --x: 5%; --y: 66%; } .hx-chip--4 { --x: calc(95% - 64px); --y: 68%; }
  .hx-chip { width: 52px; } .hx-doodle { display: none; }
}

/* ---------- Sections slide over one another ---------- */
.hx-sheet { position: relative; z-index: 2; margin-top: calc(-1 * var(--hx-sheet-r)); border-radius: var(--hx-sheet-r) var(--hx-sheet-r) 0 0; }
.hx-dark { background: linear-gradient(180deg, #071327, var(--navy) 55%); border-top: 1px solid var(--hx-edge); }

/* Bordered lift-on-hover card (used for values, features, perks) */
.hx-vcard { --hx-extra: transform .35s var(--hx-ease), box-shadow .35s var(--hx-ease); grid-column: span 2; background: var(--white); border: 2px solid var(--ink); border-radius: 26px; padding: 32px 30px 34px; box-shadow: 0 0 0 var(--blue-300); transition: transform .35s var(--hx-ease), box-shadow .35s var(--hx-ease); }
.hx-vcard:hover { transform: translate(-5px, -5px); box-shadow: 9px 9px 0 var(--blue-300); }
.hx-vcard .badge-icon { width: 58px; height: 58px; margin: 0 0 24px; border-radius: 17px; background: #e9f2ff; border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: rotate .45s var(--hx-spring); }
.hx-vcard:hover .badge-icon { rotate: -9deg; }
.hx-vcard h3 { font-size: 22px; margin-bottom: 12px; color: var(--ink); }
.hx-vcard p { font-size: 15px; color: var(--slate); }

/* ---------- Closing CTA ---------- */
.hx-ctasec { background: var(--navy); border-top: 1px solid var(--hx-edge); padding: clamp(72px, 9vw, 120px) 0 0; }
.hx-cta { position: relative; overflow: hidden; isolation: isolate; text-align: center; border-radius: 40px; padding: clamp(56px, 8vw, 112px) clamp(24px, 6vw, 80px); border: 1px solid rgba(255, 255, 255, .16); background: #07142e; box-shadow: 0 50px 120px rgba(6, 87, 208, .35); }
.hx-cta::before { content: ''; position: absolute; inset: -30%; z-index: -1; animation: hxDrift 20s ease-in-out infinite alternate;
  background:
    radial-gradient(34% 44% at 14% 30%, rgba(31, 120, 255, .95), transparent 70%),
    radial-gradient(30% 40% at 88% 22%, rgba(0, 153, 255, .75), transparent 70%),
    radial-gradient(30% 40% at 78% 96%, rgba(255, 180, 7, .5), transparent 70%),
    radial-gradient(32% 42% at 22% 98%, rgba(124, 77, 255, .55), transparent 70%); }
.hx-cta::after { content: ''; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(rgba(255, 255, 255, .26) 1px, transparent 1.6px); background-size: 24px 24px; -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 90% at 50% 50%, #000, transparent); }
.hx-cta h2 { max-width: 780px; margin: 0 auto 20px; font-size: clamp(32px, 4.6vw, 62px); letter-spacing: -.03em; }
.hx-cta p { text-wrap: balance; max-width: 640px; margin: 0 auto 38px; color: var(--mist); font-size: clamp(16px, 1.4vw, 19px); }
.hx-cta .hx-chip { width: clamp(48px, 5vw, 68px); }
.hx-cta .hx-chip--1 { --x: 5%; --y: 14%; } .hx-cta .hx-chip--2 { --x: calc(95% - 68px); --y: 12%; }
.hx-cta .hx-chip--3 { --x: 9%; --y: 68%; } .hx-cta .hx-chip--4 { --x: calc(91% - 68px); --y: 66%; }
@media (max-width: 860px) { .hx-cta .hx-chip { display: none; } }
@media (max-width: 560px) { .fx .hx-cta .btn { white-space: normal; text-align: center; line-height: 1.3; } }

/* ---------- Reduced motion: everything visible, nothing moving ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-anim], .js [data-anim].is-in { opacity: 1; translate: none; scale: none; transition: none; }
  .js .hx-title:not(.is-split) { opacity: 1; }
  .js .hx-title.is-split .hx-wi { transform: none; animation: none; }
  .hx-aurora i, .hx-stage__bg::before, .hx-cta::before, .hx-chip__in, .hx-doodle { animation: none; }
  .hx-progress { display: none; }
}