/* ===========================================================
   Teacher A's House of Learning — Laoag City
   Showcase layer.                               added 2026-10-10

   1. What parents say — photo wall, photo cards, swipe track
   2. Inside the Tutorial Room
   3. The viewer (full note / full photo), shared by both
   4. Reduced motion

   Additive, like motion.css: linked after it, and it owns only
   new class names (.pwall .pcar .pnote .tutor .sview). With this
   file blocked the notes still read in full and the tutorial
   photos still show. With showcase.js blocked the notes show
   unclamped in a sideways-scrolling row and nothing pretends to
   be clickable — the zoom affordance is gated on .sv-ready.
   =========================================================== */

/* ---------------------------------------------------------- 1a. the face wall
   All 18 parents at once — the visual hook the client asked for.
   One row on desktop, two rows of nine below 900px. */
.pwall { text-align: center; margin: 0 auto clamp(26px, 3.2vw, 40px); }
.pwall-faces {
  --s: 64px; --o: 14px;
  list-style: none; margin: 0 auto; padding: 8px 0 8px var(--o);
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px;
  max-width: 980px;
}
.pwall-faces li { margin-left: calc(var(--o) * -1); }
.pwall-face {
  display: block; position: relative;
  width: var(--s); height: var(--s); border-radius: 50%; overflow: hidden;
  border: 3px solid var(--white); background: var(--sage-100);
  box-shadow: 0 4px 14px rgba(51, 55, 46, .16);
  animation: pw-bob 6.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -.36s);
  transition: transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .35s ease, border-color .35s ease;
}
.pwall-pic, .pwall-face img { display: block; width: 100%; height: 100%; }
.pwall-face img { object-fit: cover; }
.pwall-face:hover, .pwall-face:focus-visible {
  transform: translateY(-6px) scale(1.14); z-index: 3;
  border-color: var(--gold-200); box-shadow: 0 12px 26px rgba(51, 55, 46, .24);
}
.pwall-face:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pwall-face.is-on {
  z-index: 2; border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(185, 137, 71, .28), 0 8px 18px rgba(51, 55, 46, .2);
}
@keyframes pw-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }

.pwall-cap { margin: 16px auto 0; font-size: .93rem; color: var(--ink-2); max-width: 52ch; }
.pwall-cap strong { color: var(--sage-800); font-family: var(--display); }

@media (max-width: 900px) {
  .pwall-faces { --s: 54px; --o: 12px; max-width: 400px; }
}
@media (max-width: 520px) {
  .pwall-faces { --s: 44px; --o: 10px; max-width: 330px; }
  .pwall-face { border-width: 2px; }
}

/* ---------------------------------------------------------- 1b. the track
   Native horizontal scroll with snap: swipe on a phone, trackpad
   or the buttons on a laptop, arrow keys once focused. Every card
   is real text in the DOM, so it reads and ranks exactly like the
   old grid did. Padding gives the hover lift and shadows room;
   the negative margin keeps the cards on the 1140 wrap. */
.pcar { position: relative; }
.pcar-track {
  position: relative;
  display: flex; gap: 22px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 6px;
  scroll-behavior: smooth; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 18px 6px 28px; margin: -18px -6px 0;
}
.pcar-track::-webkit-scrollbar { display: none; }
.pcar-track:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; border-radius: var(--radius-lg); }

.pnote {
  --note-bg: var(--white);
  flex: 0 0 calc((100% - 44px) / 3); min-width: 0;
  scroll-snap-align: start;
  margin: 0; position: relative;
  display: flex; flex-direction: column;
  background: var(--note-bg); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 24px 24px 22px;
  box-shadow: var(--shadow-sm);
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.pnote:nth-child(3n+2) { --note-bg: var(--sage-50);  border-color: var(--sage-200); }
.pnote:nth-child(3n)   { --note-bg: var(--blue-100); border-color: var(--blue-200); }
.pnote:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--gold-200); }
.pnote.is-flash { animation: pn-flash 1.5s ease; }
@keyframes pn-flash {
  0%   { box-shadow: 0 0 0 0 rgba(185, 137, 71, .0), var(--shadow-sm); }
  25%  { box-shadow: 0 0 0 6px rgba(185, 137, 71, .38), var(--shadow-lg); }
  100% { box-shadow: 0 0 0 0 rgba(185, 137, 71, 0), var(--shadow-sm); }
}

/* the head: photo, who, satisfaction — the client's own card layout,
   photo beside "Parent of a Learner" */
.pnote-head {
  position: relative; display: flex; align-items: center; gap: 16px;
  margin: 0 0 18px; padding-right: 30px;
}
.pnote-photo {
  position: relative; flex: none;
  width: 88px; height: 88px; padding: 4px; border-radius: 22px;
  background: var(--white); box-shadow: 0 6px 18px rgba(51, 55, 46, .16);
  transform: rotate(-3deg);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.pnote:nth-child(even) .pnote-photo { transform: rotate(3deg); }
.pnote:hover .pnote-photo { transform: rotate(0deg) scale(1.05); }
.pnote-pic, .pnote-photo img { display: block; width: 100%; height: 100%; }
.pnote-photo img { object-fit: cover; border-radius: 18px; }
/* the little gold heart from the client's cards */
.pnote-photo::after {
  content: ""; position: absolute; right: -8px; bottom: -8px;
  width: 28px; height: 28px; border-radius: 50%;
  border: 3px solid var(--note-bg);
  background: var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M12 21s-7.5-4.6-9.3-9A5.4 5.4 0 0 1 12 6.6 5.4 5.4 0 0 1 21.3 12c-1.8 4.4-9.3 9-9.3 9Z'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.pnote-who { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-width: 0; }
.pnote-name { font-family: var(--display); font-weight: 700; font-size: 1.02rem; line-height: 1.2; color: var(--ink); }
.pnote .sat, .sview-note .sat {
  font-family: var(--display); font-size: .74rem; font-weight: 700; letter-spacing: .04em;
  color: var(--gold-dark); background: var(--gold-100);
  border-radius: 999px; padding: 5px 11px; white-space: nowrap;
}
.pnote:nth-child(3n+2) .sat, .pnote:nth-child(3n) .sat { background: var(--white); }
.pnote-mark {
  position: absolute; right: -6px; top: -20px; pointer-events: none;
  font-family: Georgia, "Times New Roman", serif; font-size: 4.6rem; line-height: 1;
  color: var(--gold-200);
}

/* the note — clamped by showcase.js only, so no-JS shows it all */
.pnote-body { position: relative; overflow: hidden; }
.pnote-body blockquote, .sview-note blockquote { margin: 0; font-size: .98rem; line-height: 1.68; color: var(--ink-2); }
.pnote-body p, .sview-note blockquote p { margin: 0 0 .8em; }
.pnote-body p:last-child, .sview-note blockquote p:last-child { margin-bottom: 0; }
.pnote-body[data-clamped="true"] { max-height: 11.9em; }
.pnote-body[data-clamped="true"]::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 3.8em; pointer-events: none;
  background: linear-gradient(to bottom, rgba(255,255,255,0), var(--note-bg) 86%);
}

.pnote-more {
  margin-top: auto; padding: 16px 0 0; align-self: flex-start;
  background: none; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--display); font-weight: 700; font-size: .88rem; color: var(--sage-700);
  transition: color .2s ease;
}
.pnote-more[hidden] { display: none; }
.pnote-more svg { width: 14px; height: 14px; transition: transform .25s ease; }
.pnote-more:hover { color: var(--gold-dark); }
.pnote-more:hover svg { transform: scale(1.15); }

@media (max-width: 980px) { .pnote { flex-basis: calc((100% - 22px) / 2); } }
@media (max-width: 640px) {
  .pcar-track { gap: 14px; }
  .pnote { flex-basis: 86%; padding: 22px 20px 20px; }
  .pnote-photo { width: 76px; height: 76px; border-radius: 20px; }
  .pnote-photo img { border-radius: 16px; }
}

/* ---------------------------------------------------------- 1c. track controls
   Hidden in the markup; showcase.js reveals them. */
/* centred, so the fixed share button (left) and Messenger/Facebook
   buttons (right) never sit on top of an arrow */
.pcar-nav {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  max-width: 560px; margin: 10px auto 0;
}
.pcar-nav[hidden] { display: none; }
.pcar-btn {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--white); color: var(--sage-800);
  box-shadow: var(--shadow-sm);
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease, opacity .22s ease;
}
.pcar-btn svg { width: 20px; height: 20px; }
.pcar-btn:hover:not(:disabled) { background: var(--sage); border-color: var(--sage); color: #fff; transform: translateY(-2px); }
.pcar-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.pcar-btn:disabled { opacity: .38; cursor: default; }
.pcar-meter { position: relative; flex: 1; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pcar-thumb {
  position: absolute; top: 0; bottom: 0; left: 0; width: 20%;
  border-radius: 4px; background: linear-gradient(90deg, var(--sage), var(--gold));
}
.pcar-count {
  margin: 0; min-width: 7.6em; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: .86rem; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
/* phones: swiping is the main gesture, so the row shrinks to arrows +
   count and stays clear of the fixed share / Messenger buttons */
@media (max-width: 640px) {
  .pcar-nav { max-width: 210px; gap: 10px; }
  .pcar-meter { display: none; }
  .pcar-btn { width: 42px; height: 42px; }
  .pcar-count { min-width: 5.6em; font-size: .82rem; }
}

/* ---------------------------------------------------------- 2. inside the Tutorial Room
   The client's own photos, 2026-10-10. The backdrop wave echoes
   the room's backlit hill-shaped wall. */
.tutor {
  position: relative; overflow: hidden;
  margin-top: clamp(40px, 5vw, 64px);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 4vw, 60px); align-items: center;
  padding: clamp(26px, 4vw, 52px);
  background: var(--white); border: 1px solid var(--line); border-radius: 28px;
  box-shadow: var(--shadow);
}
.tutor::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 48%; pointer-events: none; z-index: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 200' preserveAspectRatio='none'%3E%3Cpath d='M0 118C140 62 280 58 410 96s250 70 380 8 270-74 410-6v104H0Z' fill='%23EFF2EC'/%3E%3Cpath d='M0 160c160-40 300-44 450-14s300 34 450-6 220-30 300-10v70H0Z' fill='%23E4E9DE'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
}
.tutor > * { position: relative; z-index: 1; }

.tutor-title { font-size: clamp(1.5rem, 2.8vw, 2.05rem); margin-bottom: .45em; }
.tutor-copy > p:not(.eyebrow) { color: var(--ink-2); }
.tutor-points { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 13px; }
.tutor-points li { display: flex; align-items: flex-start; gap: 12px; font-size: .97rem; line-height: 1.5; color: var(--ink-2); }
.tutor-points em { font-style: normal; font-weight: 600; color: var(--sage-800); }
.tutor-points .tick {
  flex: none; width: 24px; height: 24px; margin-top: 0; border-radius: 8px;
  background: var(--sage-100) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235B6D53' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat;
}

.tutor-photos { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.tutor-shot {
  position: relative; margin: 0; overflow: hidden;
  border-radius: 22px; background: var(--cream-3);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 693 / 900;
  animation: tutor-float 9s ease-in-out infinite;
}
.tutor-shot--b { aspect-ratio: 716 / 900; margin-top: 64px; animation-delay: -4.5s; }
.tutor-shot picture, .tutor-shot img { display: block; width: 100%; height: 100%; }
.tutor-shot img { object-fit: cover; transition: transform .9s cubic-bezier(.22,.61,.36,1); }
@keyframes tutor-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

/* only clickable once showcase.js has wired the viewer */
.tutor.sv-ready .tutor-shot { cursor: zoom-in; }
.tutor.sv-ready .tutor-shot:hover img { transform: scale(1.05); }
.tutor.sv-ready .tutor-shot:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.tutor.sv-ready .tutor-shot::after {
  content: ""; position: absolute; right: 12px; bottom: 12px;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A5A43' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5M11 8v6M8 11h6'/%3E%3C/svg%3E") center / 18px no-repeat;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  opacity: 0; transform: scale(.8); transition: opacity .25s ease, transform .25s ease;
}
.tutor.sv-ready .tutor-shot:hover::after,
.tutor.sv-ready .tutor-shot:focus-visible::after { opacity: 1; transform: none; }
@media (hover: none) { .tutor.sv-ready .tutor-shot::after { opacity: 1; transform: none; } }

.tutor-badge {
  position: absolute; left: 50%; bottom: 10%; z-index: 2;
  transform: translateX(-50%) rotate(-4deg);
  padding: 9px 18px; border-radius: 999px; white-space: nowrap;
  background: var(--gold); color: #fff;
  font-family: var(--display); font-weight: 800; font-size: .78rem; letter-spacing: .13em; text-transform: uppercase;
  box-shadow: 0 10px 24px rgba(154, 112, 54, .35);
  pointer-events: none;
}

@media (max-width: 900px) {
  .tutor { grid-template-columns: 1fr; }
  .tutor::before { height: 26%; }   /* keep the hills behind the photos, not the list */
  .tutor-photos { max-width: 560px; width: 100%; margin-inline: auto; }
}
@media (max-width: 520px) {
  .tutor-photos { gap: 12px; }
  .tutor-shot { border-radius: 16px; }
  .tutor-shot--b { margin-top: 40px; }
  .tutor-badge { font-size: .7rem; padding: 7px 14px; }
}

/* ---------------------------------------------------------- 3. the viewer
   One dialog for both jobs: a parent's full note, or a tutorial
   room photo at full size. Buttons reuse .lb-btn from motion.css,
   and body.lb-open is the same scroll lock the gallery uses. */
/* z-index 3000: above the share button (2400, share-button.js), which
   otherwise sat on top of the viewer's arrows on a phone. The Kids in
   Action lightbox from motion.css had the same fault — lifted here too. */
.lightbox { z-index: 3000; }
.sview {
  position: fixed; inset: 0; z-index: 3000;
  display: grid; place-items: center; padding: clamp(14px, 4vw, 40px);
  background: rgba(38, 42, 34, .84);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s ease, visibility .3s;
}
.sview[data-open="true"] { opacity: 1; visibility: visible; }
.sview-stage { display: grid; place-items: center; width: 100%; max-height: 100%; }
.sview[data-single="true"] .lb-prev, .sview[data-single="true"] .lb-next { display: none; }

.sview-note {
  position: relative; width: 100%; max-width: 640px; max-height: 84vh; overflow: auto;
  padding: clamp(26px, 4vw, 42px);
  background: var(--cream); border-radius: 28px;
  box-shadow: 0 34px 90px rgba(0, 0, 0, .45);
  transform: scale(.94) translateY(16px);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.sview-note .pnote-head { margin-bottom: 22px; }
.sview-note .pnote-photo { width: 116px; height: 116px; border-radius: 26px; transform: rotate(-3deg); }
.sview-note .pnote-photo img { border-radius: 22px; }
.sview-note .pnote-photo::after { border-color: var(--cream); }
.sview-note .pnote-name { font-size: 1.15rem; }
.sview-note blockquote { font-size: 1.05rem; line-height: 1.75; }
.sview-count { margin: 22px 0 0; font-family: var(--display); font-weight: 700; font-size: .82rem; color: var(--muted); letter-spacing: .04em; }

.sview-figure {
  margin: 0; max-width: min(92vw, 980px);
  display: flex; flex-direction: column; gap: 12px;
  transform: scale(.94) translateY(16px);
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.sview-figure img {
  display: block; max-height: 80vh; max-width: 100%; width: auto; margin-inline: auto;
  border-radius: var(--radius-lg); background: var(--cream);
  box-shadow: 0 34px 90px rgba(0, 0, 0, .5);
}
.sview-figure figcaption { color: #F1F3EE; text-align: center; font-family: var(--display); font-weight: 600; font-size: .93rem; }
.sview[data-open="true"] .sview-note,
.sview[data-open="true"] .sview-figure { transform: none; }

@media (max-width: 620px) {
  .sview-note { max-height: 78vh; border-radius: 22px; }
  .sview-note .pnote-photo { width: 92px; height: 92px; }
}

/* ---------------------------------------------------------- 4. reduced motion */
@media (prefers-reduced-motion: reduce) {
  .pwall-face, .tutor-shot { animation: none !important; translate: none !important; }
  .pcar-track { scroll-behavior: auto; }
  .pnote:hover, .pnote:hover .pnote-photo, .pwall-face:hover, .pwall-face:focus-visible,
  .tutor.sv-ready .tutor-shot:hover img, .pcar-btn:hover:not(:disabled) { transform: none !important; }
  .pnote.is-flash { animation: none; outline: 3px solid var(--gold); }
  .sview, .sview-note, .sview-figure { transition: none !important; }
  .sview-note, .sview-figure { transform: none !important; }
}

/* ===========================================================
   5. "OUR APPROACH" ILLUSTRATIONS                  2026-10-10
   -----------------------------------------------------------
   Six flat, multi-colour scenes from _build/approach_icons.py
   (written into the page by render_icons.py) replace the stock
   line icons. Each tile is the scene's own pastel, echoed as a
   soft glow in the card's corner. Every scene has one small,
   slow idle motion with a long rest between beats, so the six
   never move in unison; they pause until the card is on screen
   (.in, from app.js) and stop entirely for reduced motion.

   Animated parts are <g class="ap-*"> with no transform
   attribute; transform-origin values are in the 64×64 viewBox.
   =========================================================== */
.approach:has(.ic--child)   { --ap-tile: #F3E8D8; }
.approach:has(.ic--support) { --ap-tile: #E4E9DE; }
.approach:has(.ic--talk)    { --ap-tile: #E1E9F0; }
.approach:has(.ic--play)    { --ap-tile: #F3E8D8; }
.approach:has(.ic--skills)  { --ap-tile: #E1E9F0; }
.approach:has(.ic--home)    { --ap-tile: #E4E9DE; }
.ic--child   { --ap-tile: #F3E8D8; }
.ic--support { --ap-tile: #E4E9DE; }
.ic--talk    { --ap-tile: #E1E9F0; }
.ic--play    { --ap-tile: #F3E8D8; }
.ic--skills  { --ap-tile: #E1E9F0; }
.ic--home    { --ap-tile: #E4E9DE; }

.approach {
  position: relative; overflow: hidden; isolation: isolate;
  transition: transform .4s cubic-bezier(.22,.61,.36,1), box-shadow .4s ease, border-color .4s ease;
}
.approach::after {
  content: ""; position: absolute; z-index: -1; right: -52px; top: -52px;
  width: 150px; height: 150px; border-radius: 50%;
  background: var(--ap-tile, var(--sage-50)); opacity: .5; pointer-events: none;
  transition: transform .7s cubic-bezier(.22,.61,.36,1);
}
.approach:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: var(--gold-200); }
.approach:hover::after { transform: scale(1.3); }

.approach .ic.ic--art {
  width: 108px; height: 108px; border-radius: 32px; margin-bottom: 20px;
  background:
    radial-gradient(circle at 26% 20%, rgba(255,255,255,.6), rgba(255,255,255,0) 46%),
    var(--ap-tile);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), 0 14px 26px -16px rgba(51, 55, 46, .5);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.approach .ic--art svg {
  width: 94px; height: 94px; overflow: visible;
  filter: drop-shadow(0 3px 3px rgba(51, 55, 46, .13));
}
.approach:hover .ic--art { transform: rotate(-5deg) scale(1.07); }
.approach h3 { font-size: 1.08rem; }

/* --- motion vocabulary ---------------------------------------------------- */
.ap-spark { transform-box: fill-box; transform-origin: center; animation: ap-twinkle 3.4s ease-in-out infinite; }
.ap-spark--b { animation-delay: -1.7s; }
@keyframes ap-twinkle {
  0%, 100% { transform: scale(.6) rotate(0deg);  opacity: .45; }
  50%      { transform: scale(1.1) rotate(45deg); opacity: 1; }
}

/* child — the petals turn a quarter (the colour pattern repeats every 90°, so the loop is seamless) */
.ap-petals { transform-origin: 32px 26px; animation: ap-spin 7.2s cubic-bezier(.45,0,.2,1) infinite; }
@keyframes ap-spin { 0%, 60% { transform: rotate(0deg); } 100% { transform: rotate(90deg); } }
.ap-face { transform-origin: 32px 36px; animation: ap-nod 7.2s ease-in-out infinite; }
@keyframes ap-nod {
  0%, 60%, 100% { transform: rotate(0deg); }
  70% { transform: rotate(-8deg); } 82% { transform: rotate(6deg); } 92% { transform: rotate(0deg); }
}

/* support — the can tips, the water falls, the sprout perks up */
.ap-can { transform-origin: 18px 26px; animation: ap-pour 6s ease-in-out infinite; }
@keyframes ap-pour { 0%, 40%, 100% { transform: rotate(-10deg); } 52%, 84% { transform: rotate(3deg); } }
.ap-drop { opacity: 0; animation: ap-drip 6s ease-in infinite; }
.ap-drop--2 { animation-delay: .28s; }
.ap-drop--3 { animation-delay: .56s; }
@keyframes ap-drip {
  0%, 52%  { opacity: 0; transform: translateY(-4px); }
  58%      { opacity: 1; }
  74%      { opacity: 1; transform: translateY(5px); }
  80%, 100%{ opacity: 0; transform: translateY(7px); }
}
.ap-sprout { transform-origin: 47px 44px; animation: ap-perk 6s ease-in-out infinite; }
@keyframes ap-perk {
  0%, 62%, 100% { transform: scale(1) rotate(0deg); }
  76% { transform: scale(1.08) rotate(-3deg); } 88% { transform: scale(1.03) rotate(2deg); }
}

/* talk — the heart rides the line, both cans "speak" in turn */
.ap-heart { transform-origin: 32px 22px; animation: ap-float 5.4s ease-in-out infinite; }
@keyframes ap-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-3px) scale(1.08); } }
.ap-arc { transform-box: fill-box; transform-origin: center; animation: ap-ping 2.8s ease-in-out infinite; }
.ap-arc--r { animation-delay: -1.4s; }
@keyframes ap-ping { 0%, 100% { opacity: .3; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }

/* play — the brush dabs, the paint pops one colour at a time */
.ap-brush { transform-origin: 58px 60px; animation: ap-paint 6.4s ease-in-out infinite; }
@keyframes ap-paint {
  0%, 56%, 100% { transform: rotate(0deg); }
  64% { transform: rotate(-9deg); } 72% { transform: rotate(5deg); }
  80% { transform: rotate(-6deg); } 88% { transform: rotate(2deg); }
}
.ap-blob { transform-box: fill-box; transform-origin: center; animation: ap-pop 6.4s ease-in-out infinite; }
.ap-blob--2 { animation-delay: .16s; } .ap-blob--3 { animation-delay: .32s; } .ap-blob--4 { animation-delay: .48s; }
@keyframes ap-pop { 0%, 60%, 100% { transform: scale(1); } 68% { transform: scale(1.2); } 76% { transform: scale(1); } }

/* skills — the shoe does a little hop, the bow bounces */
.ap-shoe { transform-origin: 32px 54px; animation: ap-hop 5.6s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes ap-hop {
  0%, 58%, 100% { transform: translateY(0) rotate(0deg); }
  66% { transform: translateY(-6px) rotate(-5deg); } 74% { transform: translateY(0) rotate(0deg); }
  80% { transform: translateY(-2.5px) rotate(-1.5deg); } 86% { transform: translateY(0) rotate(0deg); }
}
.ap-shadow { transform-box: fill-box; transform-origin: center; animation: ap-squash 5.6s cubic-bezier(.3,.7,.4,1) infinite; }
@keyframes ap-squash {
  0%, 58%, 100% { transform: scaleX(1); opacity: .1; }
  66% { transform: scaleX(.78); opacity: .06; } 74% { transform: scaleX(1); opacity: .1; }
}
.ap-bow { transform-origin: 31.4px 25px; animation: ap-wiggle 5.6s ease-in-out infinite; }
@keyframes ap-wiggle {
  0%, 62%, 100% { transform: rotate(0deg); }
  70% { transform: rotate(-12deg); } 78% { transform: rotate(9deg); } 86% { transform: rotate(0deg); }
}

/* home — the heart in the window beats, the sprig sways */
.ap-beat { transform-origin: 34px 27.6px; animation: ap-beat 4.8s ease-in-out infinite; }
@keyframes ap-beat {
  0%, 56%, 100% { transform: scale(1); }
  64% { transform: scale(1.28); } 72% { transform: scale(1); } 80% { transform: scale(1.18); } 88% { transform: scale(1); }
}
.ap-sprig { transform-origin: 10.5px 58px; animation: ap-sway 6s ease-in-out infinite; }
@keyframes ap-sway { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(6deg); } }

/* nothing moves until the card has been revealed */
.approach.reveal:not(.in) .ap-svg * { animation-play-state: paused; }

@media (max-width: 640px) {
  .approach .ic.ic--art { width: 92px; height: 92px; border-radius: 28px; }
  .approach .ic--art svg { width: 80px; height: 80px; }
}

@media (prefers-reduced-motion: reduce) {
  .ap-svg, .ap-svg * { animation: none !important; }
  .ap-drop { opacity: 1 !important; }
  .approach:hover, .approach:hover .ic--art, .approach:hover::after { transform: none !important; }
}