/*
 * "What is inside" on the home page (.feat-sec > .pfcards--flow > .pfcard). Loaded on the home page only, after cards.css; js/features.js adds the reveal and the
 * pointer effects. The cards rise in one after the other; with a mouse a soft light follows the pointer over the card and the card leans towards it; the
 * drawing of each card floats gently and a small step number sits in the corner; the "All features" arrow nudges. A pale blue glow floats behind the section.
 * transform / opacity only. Without the script, on touch screens or under reduced motion the cards are simply there (no tilt, no reveal, no float).
 */
.feat-sec { position: relative; overflow: hidden; isolation: isolate; }
.feat-sec::before, .feat-sec::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(60px); }
.feat-sec::before { inline-size: 420px; block-size: 420px; inset-block-start: -140px; inset-inline-start: -100px; background: rgba(22, 119, 255, .14); animation: pf-float 18s ease-in-out infinite alternate; }
.feat-sec::after { inline-size: 380px; block-size: 380px; inset-block-end: -160px; inset-inline-end: -80px; background: rgba(201, 163, 73, .14); animation: pf-float 22s ease-in-out infinite alternate-reverse; }
@keyframes pf-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(50px, 30px, 0) scale(1.15); } }

.pfcards--flow { counter-reset: pf; }
.pfcards--flow .pfcard {
  --ty: 0px; --rx: 0deg; --ry: 0deg; --i: 0; counter-increment: pf;
  transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)); will-change: transform;
  transition: transform .18s ease-out, box-shadow .26s ease, border-color .26s ease, background-color .26s ease, opacity .6s ease;
}
.pfcards--flow .pfcard:nth-child(2) { --i: 1; } .pfcards--flow .pfcard:nth-child(3) { --i: 2; } .pfcards--flow .pfcard:nth-child(4) { --i: 3; } .pfcards--flow .pfcard:nth-child(5) { --i: 4; } .pfcards--flow .pfcard:nth-child(6) { --i: 5; }
.pfcards--flow .pfcard:hover, .pfcards--flow .pfcard:focus-visible, .pfcards--flow .pfcard:active { --ty: -6px; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty)); }
/* the light that follows the pointer */
.pfcards--flow .pfcard::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s ease; background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), rgba(22, 119, 255, .16), rgba(201, 163, 73, .06) 45%, transparent 70%); }
.pfcards--flow .pfcard:hover::after, .pfcards--flow .pfcard:focus-visible::after { opacity: 1; }
/* the step number in the corner */
.pfcards--flow .pfcard h3::after { content: counter(pf, decimal-leading-zero); position: absolute; inset-block-start: 22px; inset-inline-end: 22px; font-size: .95rem; font-weight: 800; letter-spacing: .06em; color: var(--gold-ink); opacity: .55; transition: opacity .25s ease, transform .3s ease; }
.pfcards--flow .pfcard:hover h3::after { opacity: 1; transform: translateY(-2px); }
/* the drawing floats (the `translate` property, so it does not fight the hover transform) */
.pfcards--flow .pfcard-ico { animation: pf-bob 4.2s ease-in-out infinite; }
.pfcards--flow .pfcard:nth-child(2) .pfcard-ico { animation-delay: -.7s; } .pfcards--flow .pfcard:nth-child(3) .pfcard-ico { animation-delay: -1.4s; }
.pfcards--flow .pfcard:nth-child(4) .pfcard-ico { animation-delay: -2.1s; } .pfcards--flow .pfcard:nth-child(5) .pfcard-ico { animation-delay: -2.8s; } .pfcards--flow .pfcard:nth-child(6) .pfcard-ico { animation-delay: -3.5s; }
@keyframes pf-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
/* "All features": the arrow nudges */
.feat-sec .link-arrow .ico { animation: pf-nudge 1.7s ease-in-out infinite; }
@keyframes pf-nudge { 0%, 100% { translate: 0 0; } 50% { translate: 5px 0; } }
[dir="rtl"] .feat-sec .link-arrow .ico { animation-name: pf-nudge-rtl; }
@keyframes pf-nudge-rtl { 0%, 100% { translate: 0 0; } 50% { translate: -5px 0; } }
/* the reveal: js/features.js adds .features-armed only when the grid is still below the fold, .is-in on each card, and removes .features-armed when done */
@media (prefers-reduced-motion: no-preference) {
  .features-armed .pfcard { opacity: 0; --ty: 44px; }
  .features-armed .pfcard.is-in { opacity: 1; --ty: 0px; transition-delay: calc(var(--i) * 110ms), 0s, 0s, 0s, calc(var(--i) * 110ms); transition-duration: .7s, .26s, .26s, .26s, .7s; }
}
@media (hover: none), (pointer: coarse) { .pfcards--flow .pfcard { --rx: 0deg !important; --ry: 0deg !important; } }
@media (prefers-reduced-motion: reduce) {
  .feat-sec::before, .feat-sec::after, .pfcards--flow .pfcard-ico, .feat-sec .link-arrow .ico { animation: none; }
  .pfcards--flow .pfcard { --rx: 0deg !important; --ry: 0deg !important; will-change: auto; }
  .pfcards--flow .pfcard::after { transition: none; }
}