/* Extra motion (js/fx.js) */

/* marquee + ticker lean with scroll speed */
.marquee, .ticker { transform: skewX(var(--skew, 0deg)); transition: transform 0.2s linear; }

/* click ripple */
.fx-ripple { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; background: radial-gradient(circle, rgba(255,255,255,0.45), rgba(163,191,240,0.15) 40%, transparent 70%); transform: scale(0); opacity: 1; animation: fx-ripple 0.7s var(--ease-out) forwards; }
@keyframes fx-ripple { to { transform: scale(1); opacity: 0; } }

/* cursor spotlight on cards */
.how-card, .mod-card, .ig-card, .cmp, .talk-card, .af-cta { position: relative; }
.how-card::after, .mod-card::after, .ig-card::after, .cmp::after, .talk-card::after, .af-cta::after, .faq-list details::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.4s;
  background: radial-gradient(380px circle at var(--sx, 50%) var(--sy, 50%), rgba(163,191,240,0.1), transparent 60%);
}
.how-card:hover::after, .mod-card:hover::after, .ig-card:hover::after, .cmp:hover::after, .talk-card:hover::after, .af-cta:hover::after, .faq-list details:hover::after { opacity: 1; }
.faq-list details { position: relative; }
.how-card > *, .ig-card > *, .cmp > *, .af-cta > *, .talk-card > *, .faq-list details > * { position: relative; z-index: 1; }
.talk-card > .talk-done { position: absolute; z-index: 3; }
.talk-card > .hp { position: absolute !important; }

/* back-to-top with progress ring */
.fx-top { position: fixed; right: 20px; bottom: 20px; z-index: 45; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(16,16,18,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--line-2); color: #fff;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,0.7); opacity: 0; transform: translateY(16px) scale(0.9); pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), border-color 0.3s; }
.fx-top.show { opacity: 1; transform: none; pointer-events: auto; }
.fx-top:hover { border-color: rgba(163,191,240,0.5); }
.fx-top > svg { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); transform: rotate(-90deg); }
.fx-top .trk { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 2.5; }
.fx-top .bar { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 4px rgba(163,191,240,0.8)); }
.fx-top i { display: grid; transition: transform 0.35s var(--ease); }
.fx-top i svg { width: 18px; height: 18px; }
.fx-top:hover i { transform: translateY(-3px); }

/* phone sticky buy bar */
.fx-bar { display: none; }
@media (max-width: 760px) {
  .fx-bar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 46; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 10px 10px 16px; border-radius: 18px; background: rgba(16,16,18,0.82); backdrop-filter: saturate(140%) blur(16px); -webkit-backdrop-filter: saturate(140%) blur(16px);
    border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 20px 50px -14px rgba(0,0,0,0.85), var(--edge-top);
    transform: translateY(140%); transition: transform 0.55s var(--ease); }
  .fx-bar.show { transform: none; }
  .fx-bar b { display: block; font-family: var(--display); font-size: 16px; }
  .fx-bar b i { font-style: normal; color: var(--accent); }
  .fx-bar span { font-size: 12.5px; color: var(--muted); }
  .fx-bar .btn { flex: none; }
  .fx-top { bottom: 84px; right: 14px; width: 42px; height: 42px; }
}

/* ---- smooth hover motion (like the Cenurys cards): glow trails the cursor, tilt eases in/out ---- */
@property --sx { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --sy { syntax: "<length-percentage>"; inherits: false; initial-value: 50%; }
@property --mx { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }
@property --my { syntax: "<length-percentage>"; inherits: true; initial-value: 50%; }
.how-card, .mod-card, .ig-card, .tile, .cmp, .talk-card, .af-cta, .faq-list details, .soc, .nav-card, .trio > div, .dsx, .sum {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), --sx 0.35s ease-out, --sy 0.35s ease-out, --mx 0.35s ease-out, --my 0.35s ease-out,
    border-color 0.5s ease, box-shadow 0.6s ease, background-color 0.4s ease !important;
  will-change: transform;
}
.how-card:hover, .mod-card:hover, .ig-card:hover, .tile:hover, .soc:hover, .nav-card:hover, .trio > div:hover {
  border-color: rgba(163,191,240,0.28); box-shadow: 0 30px 60px -32px rgba(163,191,240,0.5), inset 0 1px 0 rgba(255,255,255,0.07);
}
.how-card::after, .mod-card::after, .ig-card::after, .cmp::after, .talk-card::after, .af-cta::after, .faq-list details::after, .tile::before, .tile::after {
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.how-card::after, .mod-card::after, .ig-card::after { transform: scale(0.92); }
.how-card:hover::after, .mod-card:hover::after, .ig-card:hover::after { transform: none; }

/* footer: big wordmark sits flush on the bottom edge (no strip under it) */
.af-wordmark { line-height: 0.9; height: 0.72em; overflow: hidden; margin-bottom: 0; }
/* tighter scroll sections (less empty scrolling between parts) */
.manifesto { height: 140vh !important; }
.showcase { height: 150vh !important; }
.framework { padding: 8vh 0 !important; }
.fw-step { min-height: 42vh !important; }
.fw-step:last-child { min-height: 50vh !important; }
.limits { padding-top: 10vh !important; }
.bento-sec { padding: 10vh 0 6vh !important; }
.scxze-section { padding-top: 8vh !important; }
.bx { margin-bottom: 6vh !important; }
.syllabus, .compare, .connect { padding: 7vh 0 !important; }
.how { padding: 9vh 0 6vh !important; }
.buy { padding: 9vh 0 !important; }
.faq { padding: 8vh 0 !important; }
.final { padding: 14vh 0 !important; }
.dspanel-wrap { padding-top: 7vh !important; }