/* Interaction layer for the partner pages, matching the home page:
   scroll progress bar, custom cursor, magnetic buttons, tilt cards,
   staged hero entrance and scroll reveal. Loaded by every page under
   /partners. The html element carries the class fx from an inline script
   in the head, so nothing here applies when scripts are off. */

.scroll-progress {
  position: fixed; top: 0; left: 0; width: 0%; height: 3px;
  background: var(--blue); z-index: 200; pointer-events: none;
  transition: width 0.05s linear;
}

/* Hero entrance on a partner page: the grid draws in, the eyebrow rises,
   the badge pops, the two names slide in from either side and the x spins
   into place between them, then the intro and buttons rise. */
html.fx .hero-grid { opacity: 0; animation: fxFade 1.4s ease-out 0.1s forwards; }
html.fx .hero-inner > .eyebrow { opacity: 0; animation: fxUp 0.7s var(--ease-out) 0.05s forwards; }
html.fx .hero-logo { opacity: 0; animation: fxPop 1s var(--ease-spring) 0.2s forwards; }
html.fx .hero-lockup .lk-partner { opacity: 0; animation: fxFromLeft 0.8s var(--ease-out) 0.55s forwards; }
html.fx .hero-lockup .lk-mora { opacity: 0; animation: fxFromRight 0.8s var(--ease-out) 0.65s forwards; }
html.fx .hero-lockup .lk-x { opacity: 0; animation: fxSpin 0.7s var(--ease-spring) 0.95s forwards; }
html.fx .hero-intro { opacity: 0; animation: fxUp 0.8s var(--ease-out) 1.05s forwards; }
html.fx .hero-actions { opacity: 0; animation: fxUp 0.8s var(--ease-out) 1.2s forwards; }
html.fx .hero-actions .btn { animation: fxBtnPulse 2.4s ease-in-out 2.4s 2; }

/* Hero entrance on the partners index: eyebrow, title and intro rise in turn. */
html.fx .hero > .wrap > * { opacity: 0; animation: fxUp 0.8s var(--ease-out) forwards; }
html.fx .hero > .wrap > :nth-child(2) { animation-delay: 0.14s; }
html.fx .hero > .wrap > :nth-child(3) { animation-delay: 0.28s; }

@keyframes fxUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fxFade { to { opacity: 1; } }
@keyframes fxPop {
  0%   { opacity: 0; transform: scale(0.55) rotate(-6deg); }
  60%  { opacity: 1; transform: scale(1.06) rotate(1.5deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
@keyframes fxFromLeft {
  from { opacity: 0; transform: translateX(-36px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fxFromRight {
  from { opacity: 0; transform: translateX(36px); }
  to   { opacity: 1; transform: none; }
}
@keyframes fxSpin {
  from { opacity: 0; transform: rotate(-180deg) scale(0.2); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}
@keyframes fxBtnPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(30,69,251,0); }
  50%      { box-shadow: 0 0 0 10px rgba(30,69,251,0.12); }
}

/* Scroll reveal: hidden until the observer marks it visible. */
html.fx .block-head,
html.fx .about-card,
html.fx .price-card,
html.fx .incl-card,
html.fx .why-card,
html.fx .partner-card,
html.fx .pricing-note,
html.fx .callout-inner > *,
html.fx .apply-inner > .eyebrow,
html.fx .apply-inner > h2,
html.fx .apply-inner > p,
html.fx .apply-cta {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}
html.fx .visible { opacity: 1; transform: none; }

/* Tilt cards answer the cursor faster than the reveal eases in. */
html.fx .tilt { transition: transform 0.35s var(--ease-out), box-shadow 0.3s; will-change: transform; }

/* Cursor: desktop pointers only. Phones and tablets never see it. */
.cursor, .cursor-follower { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 901px) {
  html.fx body, html.fx a, html.fx button, html.fx label { cursor: none; }
  html.fx input, html.fx textarea { cursor: text; }
  html.fx .cursor {
    display: block; width: 14px; height: 14px; background: var(--oxford); border-radius: 50%;
    position: fixed; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%);
    transition: width 0.2s, height 0.2s, background 0.2s; mix-blend-mode: difference;
  }
  html.fx .cursor-follower {
    display: flex; align-items: center; justify-content: center;
    position: fixed; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%);
    width: 40px; height: 40px; border: 2px solid var(--blue); border-radius: 50%;
    background: transparent; color: var(--blue);
    font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; text-align: center; line-height: 1.1;
    transition: width 0.2s var(--ease-out), height 0.2s var(--ease-out), background 0.2s, color 0.2s;
  }
  html.fx .cursor-follower.is-text { width: 84px; height: 84px; background: var(--blue); color: var(--lime); border-color: var(--blue); }
}

@media (prefers-reduced-motion: reduce) {
  html.fx .hero-inner > *, html.fx .hero > .wrap > * { animation: none !important; opacity: 1 !important; }
  html.fx .block-head, html.fx .about-card, html.fx .price-card, html.fx .incl-card, html.fx .why-card,
  html.fx .partner-card, html.fx .pricing-note, html.fx .callout-inner > *, html.fx .apply-inner > .eyebrow,
  html.fx .apply-inner > h2, html.fx .apply-inner > p, html.fx .apply-cta { transition: none !important; opacity: 1 !important; transform: none !important; }
  html.fx .tilt, html.fx .magnetic { transform: none !important; }
  .scroll-progress { transition: none; }
}