/* Motion and depth for the public site (owner request, 2026-10-15). Enhancement only: every rule is
   scoped to html.aa-motion, which site-motion.js adds only when the visitor has not asked for reduced
   motion. Without it (or without JavaScript) the site looks exactly as before. Content never waits on
   an animation on phones: hidden-until-scrolled states apply from 769px up only. */

/* Reading progress along the top edge */
.aa-motion .aa-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 61; height: 3px; background: linear-gradient(90deg, var(--green-bright), var(--green)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }

/* Home hero: "$9.99 a month." underline draws itself in */
.aa-motion .hero--home .hero__price-line { position: relative; border-bottom-color: transparent; }
.aa-motion .hero--home .hero__price-line::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.09em; height: .09em; border-radius: .09em; background: var(--green-bright); transform: scaleX(0); transform-origin: 0 50%; animation: aa-draw .9s .6s cubic-bezier(.6, 0, .2, 1) forwards; }
@keyframes aa-draw { to { transform: scaleX(1); } }

/* Home hero: the Access card is a 3D object with paperwork filing itself behind it */
.aa-motion .aa-scene { isolation: isolate; }
/* The words beside the card always draw above the floating paperwork (site-motion.js also keeps the sheets clear of them) */
.aa-motion .hero--home .hero__copy { position: relative; z-index: 2; }
.aa-motion .aa-scene .preview-card { position: relative; z-index: 2; transform: perspective(1100px) rotateX(var(--aa-rx, 0deg)) rotateY(var(--aa-ry, 0deg)); transform-style: preserve-3d; transition: box-shadow .4s ease; will-change: transform; }
.aa-motion .aa-scene .preview-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--aa-gx, 70%) var(--aa-gy, 0%), rgba(255, 255, 255, .55), transparent 55%); mix-blend-mode: soft-light; opacity: var(--aa-glare, 0); transition: opacity .4s ease; }
.aa-motion .aa-scene .float { z-index: 3; translate: calc(var(--aa-px, 0) * 14px) calc(var(--aa-py, 0) * 10px); }
.aa-motion .aa-papers { position: absolute; left: 50%; top: 50%; z-index: 1; width: 0; height: 0; perspective: 1300px; pointer-events: none; }
.aa-motion .aa-papers__stage { position: absolute; transform-style: preserve-3d; }
.aa-motion .aa-paper { position: absolute; display: flex; flex-direction: column; gap: .3rem; padding: .85rem .95rem; border: 1px solid var(--line); border-radius: .9rem; background: #FFFEFB; box-shadow: 0 2px 0 rgba(9, 60, 38, .03), 0 22px 40px -16px rgba(9, 60, 38, .32); color: var(--ink-2); font-size: .72rem; line-height: 1.35; backface-visibility: hidden; will-change: transform; }
.aa-motion .aa-paper b { color: var(--ink); font-size: .8rem; }
.aa-motion .aa-paper small { color: var(--ink-3); font-size: .62rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.aa-motion .aa-paper i { display: block; height: .32rem; border-radius: .32rem; background: var(--line); }
.aa-motion .aa-paper i.aa-short { width: 58%; }
.aa-motion .aa-paper .aa-row { display: flex; justify-content: space-between; gap: .75rem; padding-top: .3rem; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.aa-motion .aa-paper--form { width: 12.5rem; margin: -4.2rem 0 0 -6.25rem; border-color: #F2C2B5; }
.aa-motion .aa-paper--form b { color: var(--coral-ink, #B33A1F); }
.aa-motion .aa-paper--statement { width: 12rem; margin: -4.4rem 0 0 -6rem; }
.aa-motion .aa-paper--receipt { width: 8rem; margin: -5rem 0 0 -4rem; border-radius: .35rem; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; }
.aa-motion .aa-paper--deadline { width: 9.5rem; margin: -3.2rem 0 0 -4.75rem; border-color: #F3DCA8; background: var(--amber-soft, #FFF4DF); }
.aa-motion .aa-paper--deadline b { font-size: 1.35rem; letter-spacing: -.03em; }
.aa-motion .aa-paper--question { width: 11.5rem; margin: -3.4rem 0 0 -5.75rem; border-color: #CFE2FB; background: var(--sky-soft, #E8F2FF); }
.aa-motion .aa-paper--question small { color: var(--sky-ink, #15559E); }
/* Once the paperwork is filed, each line of the card ticks off in turn */
.aa-motion .aa-scene .preview-list i { position: relative; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), background-color .3s ease; }
.aa-motion .aa-scene .preview-list i::after { content: ""; position: absolute; left: 50%; top: 45%; width: .2rem; height: .38rem; border: solid var(--ink); border-width: 0 .1rem .1rem 0; transform: translate(-50%, -50%) rotate(45deg) scale(0); transition: transform .3s ease; }
.aa-motion .aa-scene.aa-settled .preview-list i { transform: scale(1.75); }
.aa-motion .aa-scene.aa-settled .preview-list i::after { transform: translate(-50%, -50%) rotate(45deg) scale(1); }
.aa-motion .aa-scene.aa-settled .preview-list li:nth-child(2) i, .aa-motion .aa-scene.aa-settled .preview-list li:nth-child(2) i::after { transition-delay: .12s; }
.aa-motion .aa-scene.aa-settled .preview-list li:nth-child(3) i, .aa-motion .aa-scene.aa-settled .preview-list li:nth-child(3) i::after { transition-delay: .24s; }
.aa-motion .aa-scene.aa-settled .preview-list li:nth-child(4) i, .aa-motion .aa-scene.aa-settled .preview-list li:nth-child(4) i::after { transition-delay: .36s; }

/* Cards lean toward the pointer (mouse and trackpad only) */
.aa-motion .aa-tilt { transform-style: preserve-3d; }
.aa-motion .aa-tilt.aa-tilting { transition: transform .16s ease-out, box-shadow .3s ease, opacity .75s cubic-bezier(.2, .8, .3, 1); box-shadow: var(--sh-lg); }
.aa-motion .aa-tilt.aa-leaving { transition: transform .5s cubic-bezier(.2, .8, .3, 1), box-shadow .4s ease, opacity .75s cubic-bezier(.2, .8, .3, 1); }

/* Featured price card: a slow light sweep */
.aa-motion .price-card--featured { overflow: hidden; }
.aa-motion .price-card--featured::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(0, 214, 122, .14), transparent); transform: skewX(-12deg); animation: aa-sweep 7s 2s ease-in-out infinite; }
@keyframes aa-sweep { 0%, 70% { left: -60%; } 100% { left: 130%; } }

/* Dark bands: a slow green glow drifts behind the words */
.aa-motion .ask-band, .aa-motion .cta-band { position: relative; isolation: isolate; overflow: hidden; }
.aa-motion .ask-band::before, .aa-motion .cta-band::before { content: ""; position: absolute; z-index: -1; width: 34rem; height: 34rem; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 214, 122, .2), transparent 72%); pointer-events: none; animation: aa-drift 16s ease-in-out infinite alternate; }
.aa-motion .ask-band::before { top: -14rem; right: -10rem; }
.aa-motion .cta-band::before { bottom: -18rem; left: -8rem; animation-duration: 19s; }
@keyframes aa-drift { to { transform: translate(-9rem, 7rem) scale(1.15); } }

/* "How it works": a timeline lights each step in turn (wide screens) */
.aa-motion .steps.aa-timeline { position: relative; }
.aa-motion .aa-track { position: absolute; left: 0; top: -1.85rem; height: .7rem; width: 100%; pointer-events: none; }
.aa-motion .aa-track__line, .aa-motion .aa-track__fill { position: absolute; top: 50%; height: .2rem; margin-top: -.1rem; border-radius: .2rem; background: var(--line-2, #CBD8D0); }
.aa-motion .aa-track__fill { background: var(--green-bright); transform: scaleX(0); transform-origin: 0 50%; }
.aa-motion .aa-track__dot { position: absolute; top: 0; width: .7rem; height: .7rem; margin-left: -.35rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 .2rem var(--line-2, #CBD8D0); transition: background-color .3s ease, box-shadow .3s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); }
.aa-motion .aa-track__dot.aa-lit { background: var(--green-bright); box-shadow: 0 0 0 .2rem var(--green-bright), 0 0 0 .55rem rgba(0, 214, 122, .18); transform: scale(1.15); }
.aa-motion .steps.aa-timeline .step__n { background: var(--mint-100); color: var(--ink-3); transition: background-color .35s ease, color .35s ease, transform .45s cubic-bezier(.3, 1.6, .5, 1), box-shadow .35s ease; }
.aa-motion .steps.aa-timeline .step.aa-lit .step__n { background: var(--green-bright); color: var(--ink); transform: scale(1.1); box-shadow: 0 0 0 .4rem rgba(0, 214, 122, .16); }

/* The sample question and reply play out like the real exchange (wide screens) */
.aa-motion #example-answer .grid--2 { position: relative; }
.aa-motion #example-answer .card { transition: opacity .7s cubic-bezier(.2, .8, .3, 1), transform .9s cubic-bezier(.2, .8, .3, 1), box-shadow .6s ease; }
.aa-motion #example-answer .card.aa-wait { opacity: 0; }
.aa-motion #example-answer .card.aa-wait:first-child { transform: perspective(1100px) translateX(-2.5rem) rotateY(10deg); }
.aa-motion #example-answer .card.aa-wait:last-child { transform: perspective(1100px) rotateY(-16deg) translateX(1.5rem); transform-origin: 0 50%; }
.aa-motion #example-answer .card.aa-replied { box-shadow: 0 0 0 2px var(--green-bright), var(--sh-lg); }
.aa-motion .aa-relay { position: absolute; left: 50%; top: 2.2rem; z-index: 3; display: flex; align-items: center; gap: .35rem; padding: .45rem .7rem; border-radius: var(--r-pill); background: var(--white); box-shadow: var(--sh-md); transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: opacity .3s ease, transform .4s cubic-bezier(.3, 1.6, .5, 1); pointer-events: none; }
.aa-motion .aa-relay.aa-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.aa-motion .aa-relay i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--green); animation: aa-typing 1s ease-in-out infinite; }
.aa-motion .aa-relay i:nth-child(2) { animation-delay: .15s; }
.aa-motion .aa-relay i:nth-child(3) { animation-delay: .3s; }
@keyframes aa-typing { 0%, 100% { opacity: .35; transform: none; } 50% { opacity: 1; transform: translateY(-.2rem); } }

/* FAQ answers ease open; the + turns as the card opens */
.aa-motion .faq summary::after { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), background-color .3s ease; }
.aa-motion .faq details[open] summary::after { transform: rotate(90deg); }

/* About photo: the picture sits a little deeper than its frame */
.aa-motion .photo__frame img { transform: translate3d(0, var(--aa-shift, 0px), 0) scale(1.08); will-change: transform; }

/* Inner page heroes: three blank sheets float in depth beside the heading (wide screens) */
.aa-motion .aa-hero-docs { display: none; }
@media (min-width: 1280px) {
  .aa-motion .aa-hero-docs { position: absolute; z-index: 0; top: 50%; right: max(3rem, calc((100vw - 1200px) / 2 + 3rem)); display: block; width: 15rem; height: 15rem; margin-top: -7.5rem; perspective: 900px; pointer-events: none; translate: calc(var(--aa-px, 0) * 12px + var(--aa-dx, 0px)) calc(var(--aa-py, 0) * 9px); }
  .aa-motion .aa-hero-docs span { position: absolute; display: flex; flex-direction: column; gap: .45rem; width: 9rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(255, 255, 255, .9); box-shadow: var(--sh-md); animation: aa-float 7s ease-in-out infinite; }
  .aa-motion .aa-hero-docs span::before { content: ""; width: 1.6rem; height: 1.6rem; border-radius: .5rem; background: var(--green-bright); }
  .aa-motion .aa-hero-docs span i { display: block; height: .32rem; border-radius: .32rem; background: var(--line); }
  .aa-motion .aa-hero-docs span i:last-child { width: 60%; }
  .aa-motion .aa-hero-docs span:nth-child(1) { left: 0; top: 2.5rem; transform: rotateY(18deg) rotateZ(-8deg) translateZ(-40px); }
  .aa-motion .aa-hero-docs span:nth-child(2) { left: 4.5rem; top: 0; transform: rotateY(-14deg) rotateZ(6deg) translateZ(20px); animation-delay: -2.4s; }
  .aa-motion .aa-hero-docs span:nth-child(2)::before { background: var(--sky-soft, #E8F2FF); }
  .aa-motion .aa-hero-docs span:nth-child(3) { left: 2.5rem; top: 6.5rem; transform: rotateX(12deg) rotateZ(-3deg) translateZ(60px); animation-delay: -4.6s; }
  .aa-motion .aa-hero-docs span:nth-child(3)::before { background: var(--amber-soft, #FFF4DF); }
}
@keyframes aa-float { 50% { translate: 0 -.6rem; } }
.aa-motion .aa-hero-docs.aa-off { display: none; }

/* Wide screens: sections rise into place with a little depth instead of a flat fade */
@media (min-width: 769px) {
  .aa-motion .reveal { transform-origin: 50% 100%; }
  .aa-motion .reveal:not(.is-visible) { transform: perspective(1100px) translateY(2.2rem) rotateX(12deg) scale(.985); }
}

/* Printing: no decoration, and nothing left waiting for a scroll that will never happen */
@media print {
  .aa-motion .aa-progress, .aa-motion .aa-papers, .aa-motion .aa-track, .aa-motion .aa-relay, .aa-motion .aa-hero-docs { display: none; }
  .aa-motion .reveal, .aa-motion #example-answer .card { opacity: 1 !important; transform: none !important; }
}