/* About page motion: lattice, mission words, story thread, belief reveals, signature, glow.
   Everything is decorative and is skipped entirely with prefers-reduced-motion. Loaded only on /about/. */

/* hero: a slow breathing warm light behind the portrait */
.ab .ab-hero { overflow: hidden; }
.ab .ab-hero > .wrap { position: relative; z-index: 1; }
.ab-aura { position: absolute; right: -6%; top: 6%; width: 62%; height: 96%; z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(220,187,162,.20), rgba(176,125,92,.08) 55%, rgba(220,187,162,0));
  animation: abBreath 10s ease-in-out infinite; }
@keyframes abBreath { 0% { opacity: .4; transform: scale(.94); } 40% { opacity: 1; transform: scale(1.06); } 100% { opacity: .4; transform: scale(.94); } }

/* why jade: crystal lattice that draws itself, then shimmers */
.why-jade-band { position: relative; overflow: hidden; }
.why-jade-band > .wrap { position: relative; z-index: 2; }
.ab-lattice { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .9;
  -webkit-mask-image: radial-gradient(ellipse 70% 78% at 50% 50%, #000 25%, transparent 95%); mask-image: radial-gradient(ellipse 70% 78% at 50% 50%, #000 25%, transparent 95%); }
.ab-lattice svg { width: 100%; height: 100%; display: block; }
.ab-lattice polygon { fill: none; stroke: #e9d3bf; stroke-width: 1; stroke-linejoin: round; stroke-opacity: .3; stroke-dasharray: 220; stroke-dashoffset: 220; }
.ab-lattice.on polygon { animation: abDraw 2.4s cubic-bezier(.4,0,.2,1) forwards, abGlint 9s ease-in-out 2.6s infinite; animation-delay: calc(var(--d) * 1ms), calc(2600ms + var(--d) * 1ms); }
@keyframes abDraw { to { stroke-dashoffset: 0; } }
@keyframes abGlint { 0%, 100% { stroke-opacity: .3; } 8% { stroke-opacity: .9; stroke: #fff3e4; } 22% { stroke-opacity: .3; } }
.wj-style { transition: letter-spacing 1.8s cubic-bezier(.2,.7,.2,1), opacity 1.2s; }
.ab-lattice.on ~ .wrap .wj-style { letter-spacing: .04em; }

/* mission: words light up as you scroll */
.ab .mission-line .mw { opacity: .2; transition: opacity .5s; }
.ab .mission-line .mw.on { opacity: 1; }

/* my story: a thread beside the text fills as you read */
.ab-story { position: relative; }
.ab-rail { position: absolute; left: clamp(-34px, -3.2vw, -16px); top: 0; bottom: 0; width: 12px; pointer-events: none; }
.ab-rail::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 1px; background: rgba(140,87,55,.22); }
.ab-rail-fill { position: absolute; left: 5px; top: 8px; width: 1px; height: 0; background: var(--rust); }
.ab-rail-fill::after { content: ""; position: absolute; left: -3.5px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: #e9b896; box-shadow: 0 0 0 4px rgba(233,184,150,.35), 0 0 12px 3px rgba(233,184,150,.8); }
.ab-node { position: absolute; left: 1px; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid rgba(140,87,55,.42); background: var(--paper); transition: background-color .5s, border-color .5s, box-shadow .6s; }
.ab-node.on { background: var(--rust); border-color: var(--rust); box-shadow: 0 0 0 5px rgba(140,87,55,.14); }
@media (max-width: 600px) { .ab-rail { left: -12px; } }

/* beliefs: rise in one at a time */
.ab .manifesto li { opacity: 0; transform: translateY(22px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1); }
.ab .manifesto li.ab-in { opacity: 1; transform: none; }
.ab .manifesto .b-n { display: inline-block; transition: transform .9s cubic-bezier(.3,1.4,.5,1) .15s; transform: scale(.7); transform-origin: left center; }
.ab .manifesto li.ab-in .b-n { transform: scale(1); }

/* signature writes itself in */
.ab .signature { clip-path: inset(0 100% 0 0); transition: clip-path 2.4s cubic-bezier(.45,.05,.2,1); }
.ab .signature.ab-in { clip-path: inset(0 0 0 0); }

/* training cards: warm glow follows the cursor */
.ab .steps--plain .step { position: relative; overflow: hidden; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.ab .steps--plain .step:hover { transform: translateY(-4px); box-shadow: 0 26px 46px -30px rgba(40,34,22,.55); }
.ab-glow { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .45s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255,236,218,.26), rgba(255,236,218,0) 62%); }
.ab .steps--plain .step:hover > .ab-glow { opacity: 1; }
.ab .steps--plain .step > *:not(.ab-glow) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) { .ab-aura { display: none; } }

/* photo credit sits below the framed portrait, not inside the outline */
.photo-wrap { max-width: 460px; }
.photo-wrap .portrait { margin: 0; }
.photo-credit { margin: 26px 0 0; font-size: .85rem; color: var(--muted); }