/* /about (about.astro), loaded after legal.css and guide.css (issue #434). Every moving part waits for the .motion class
   the page head sets, so nothing moves for anyone who asks for less motion, and everything reads fine without it. Where a
   browser can tie an animation to scrolling (CSS scroll-driven animations), the trail and its doodles use
   that; elsewhere they sit still and the [data-reveal] entrances in legal.js still play. Decorative loops keep going, like
   the rest of the site. No packages and nothing from outside the site. */

/* ---- Hero: the highlight boings in, jiggles on hover, and the date chip turns into a countdown (legal.js) ---- */
.motion .about-boing { animation: boing 1.1s ease-out 0.25s both; }
/* Hover adds the jiggle after the boing; keeping the boing first in the list stops it replaying when the hover ends. */
@media (hover: hover) { .motion .about-boing:hover { animation: boing 1.1s ease-out 0.25s both, jiggle 0.6s ease-in-out; } }
@keyframes boing {
  0% { transform: rotate(-2deg) scale(0.4); opacity: 0; }
  40% { transform: rotate(-7deg) scale(1.14); opacity: 1; }
  62% { transform: rotate(2deg) scale(0.95); }
  80% { transform: rotate(-3.5deg) scale(1.03); }
  100% { transform: rotate(-2deg) scale(1); }
}
@keyframes jiggle { 0%, 100% { transform: rotate(-2deg); } 25% { transform: rotate(-6deg) scale(1.05); } 50% { transform: rotate(2deg) scale(1.02); } 75% { transform: rotate(-4deg); } }
.motion .updated.ticked { animation: stat-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.9s both; }

/* Every coach on the page watches the pointer: legal.js sets --look-x and --look-y on its <svg>, and the eyes in the
   shared symbol inherit them. translate leaves the blink (transform) alone. */
.coach-eyes.look { translate: var(--look-x, 0px) var(--look-y, 0px); transition: translate 0.18s ease-out; }

/* ---- YapApply's resume: a sheet of paper, highlighted and stamped ---- */
.legal.about { padding-top: 0; }
.legal.about section:first-child { margin-top: 28px; }
.about .resume-stage { position: relative; margin-top: 30px; padding-top: 8px; }
/* Blank space at the foot of the sheet, where the stamp lands. */
.about-sheet { max-width: 640px; margin: 0 auto !important; padding-bottom: 92px !important; transform: rotate(-0.8deg); }
.about-sheet .contact a { color: inherit; }
.about-sheet .where { font-weight: 400; color: #5a5868; }
.about-sheet mark.hl {
  color: inherit; padding: 0 2px; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(transparent 52%, var(--sun) 52%) no-repeat 0 0 / 100% 100%;
}
.motion .resume-stage mark.hl { background-size: 0% 100%; transition: background-size 0.75s ease calc(0.45s + var(--d, 0) * 0.35s); }
.motion .resume-stage.in mark.hl { background-size: 100% 100%; }
.sheet-stamp {
  position: absolute; right: 9%; bottom: 26px; z-index: 2; padding: 6px 14px; border: 4px solid var(--tomato); border-radius: 12px;
  color: var(--tomato); font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: 0.04em; text-transform: uppercase;
  transform: rotate(-12deg); mix-blend-mode: multiply; pointer-events: none;
  /* A rubber-stamp texture: speckles of SVG noise knocked out of the ink. */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -1.6 1.45'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.motion .resume-stage .sheet-stamp { opacity: 0; }
.motion .resume-stage.in .sheet-stamp { animation: thunk 0.42s cubic-bezier(0.5, 1.8, 0.6, 1) 1.5s both; }
.motion .resume-stage.in .about-sheet { animation: thud 0.32s ease-out 1.72s; }
@keyframes thunk { 0% { opacity: 0; transform: rotate(-24deg) scale(2.4); } 100% { opacity: 1; transform: rotate(-12deg) scale(1); } }
@keyframes thud { 0%, 100% { transform: rotate(-0.8deg); } 30% { transform: rotate(-1.4deg) translateY(3px) scale(0.995); } 65% { transform: rotate(-0.5deg) translateY(-1px); } }

/* ---- Ken's note: a card signed like the home page's ---- */
.about-note { margin-top: 18px; padding: 24px 26px; background: var(--paper); border: 2px solid var(--ink); border-radius: var(--radius-chunky); box-shadow: var(--shadow-chunky); }
.legal section .about-note p:first-child { margin-top: 0; }
.signoff { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 2px dashed var(--line); }
.legal section .signoff p { margin-top: 0; }
.you-badge { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--ink); border-radius: 50%; background: var(--violet); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 19px; box-shadow: var(--shadow-chunky-sm); }
.signoff-name { font-family: var(--font-display); font-weight: 800; font-size: 18px; line-height: 1.2; }
.signoff-role { color: var(--ink-faint); font-size: 15px; }

/* ---- How it works: a trail the coach rides down as you scroll ---- */
.trail { position: relative; margin-top: 26px; padding-left: 78px; }
.trail-line { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 6px; border-radius: 3px; background: repeating-linear-gradient(to bottom, var(--line) 0 10px, transparent 10px 18px); }
.trail-fill { position: absolute; inset: 0; border-radius: 3px; background: var(--violet); transform-origin: top; }
.trail-rider { position: absolute; left: 2px; top: 0; z-index: 2; width: 56px; height: 56px; }
.trail-rider .coach { width: 56px; height: 56px; }
.motion .trail-rider .coach { animation: bob 2.4s ease-in-out infinite; }
.legal section .trail-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; }
.legal section .trail-step { margin: 0; display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px 18px; border: 2px solid var(--ink); border-radius: var(--radius-chunky); background: var(--paper); box-shadow: var(--shadow-chunky); }
.trail-step img { width: 84px; height: 84px; rotate: -7deg; }
.trail-step:nth-child(even) img { rotate: 7deg; }
.trail-step strong { display: block; font-family: var(--font-display); font-size: 19px; line-height: 1.25; }
.trail-step span { display: block; margin-top: 4px; color: var(--ink-soft); }
@media (hover: hover) { .motion .trail-step:hover img { animation: wiggle 0.5s ease-in-out; } }
@supports (animation-timeline: view()) {
  .motion .trail { view-timeline: --trail block; }
  .motion .trail-fill { animation: trail-fill linear both; animation-timeline: --trail; animation-range: cover 20% cover 70%; }
  .motion .trail-rider { animation: trail-ride linear both; animation-timeline: --trail; animation-range: cover 20% cover 70%; }
  .motion .trail-step img { animation: doodle-in linear both; animation-timeline: view(); animation-range: entry 40% cover 40%; }
}
@keyframes trail-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes trail-ride { from { top: 0; } to { top: calc(100% - 56px); } }
@keyframes doodle-in { from { scale: 0.4; translate: -20px 0; } 70% { scale: 1.12; } to { scale: 1; translate: 0 0; } }

/* ---- The promises: cards slide in from either side, and an icon wiggles on hover ---- */
.motion [data-reveal="left"] { translate: -28px 0; }
.motion [data-reveal="right"] { translate: 28px 0; }
.about-promises { margin-top: 24px; align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.legal section .about-promises h3, .legal section .about-promises p { margin-top: 0; }
@media (hover: hover) { .motion .about-promises .promise:hover .promise-icon { animation: wiggle 0.5s ease-in-out; } }

/* ---- Get in touch: a paper plane loops its little flight path (CSS motion path) ---- */
.hello-card {
  margin-top: 22px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 22px 28px; align-items: center; padding: 26px 28px;
  border: 2px solid var(--ink); border-radius: 22px; box-shadow: var(--shadow-chunky-lg);
  background-color: var(--sky-soft); background-image: radial-gradient(rgba(23, 19, 43, 0.12) 1.5px, transparent 1.7px); background-size: 22px 22px;
}
.hello-sky { position: relative; width: 240px; height: 90px; }
.hello-path { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; opacity: 0.45; }
.hello-plane { position: absolute; left: 204px; top: 2px; width: 32px; height: 32px; color: var(--ink); fill: var(--sun); stroke-width: 1.8; }
.motion .hello-plane {
  left: 0; top: 0; offset-path: path("M8,70 C50,10 90,10 120,45 S190,85 232,20"); offset-rotate: auto 45deg; offset-anchor: 50% 50%;
  animation: fly 5.5s ease-in-out infinite;
}
@keyframes fly { 0% { offset-distance: 0%; opacity: 0; } 10% { opacity: 1; } 85% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.legal section .hello-copy p:first-child { margin-top: 0; font-size: 18px; }
.hello-btn { display: inline-flex; align-items: center; gap: 10px; }
.motion .hello-btn:hover .icon { animation: wiggle 0.5s ease-in-out; }
.legal section .hello-small { font-size: 15px; color: var(--ink-soft); }

/* ---- The call to action gets a few drifting bits ---- */
.about-ask .bit { z-index: 1; }

/* ---- Phones ---- */
@media (max-width: 640px) {
  .sheet-stamp { font-size: 17px; right: 8%; bottom: 22px; }
  .about-sheet { padding-bottom: 80px !important; }
  .about-note { padding: 20px 18px; }
  .trail { padding-left: 58px; }
  .trail-line { left: 19px; }
  .trail-rider, .trail-rider .coach { width: 44px; height: 44px; }
  @keyframes trail-ride { from { top: 0; } to { top: calc(100% - 44px); } }
  .legal section .trail-step { grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding: 12px 14px; }
  .trail-step img { width: 56px; height: 56px; }
  .hello-card { grid-template-columns: minmax(0, 1fr); padding: 22px 18px; }
  .hello-sky { margin: 0 auto; }
}