/* Explainer demo (round 13): "Maya opens her practice", played in code with GSAP inside the homepage video frame.
   Stand-in pictures are John's site illustrations until his Maya scenes arrive. Lab only. */
.ex { position: relative; justify-self: center; width: min(100%, 440px); aspect-ratio: 4 / 5; margin: 0; border-radius: 22px; overflow: hidden; background: #F4F1E8; color: #1E392F; box-shadow: inset 0 0 0 1px rgba(144, 167, 126, 0.45), 0 40px 80px -36px rgba(0, 0, 0, 0.7); }
.ex__scene { position: absolute; inset: 0; opacity: 0; display: grid; place-items: start center; padding: 26px 26px 0; }
.ex__pic { width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: #F4F1E8; }
.ex__pic img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; }
.ex__pic--dark { box-shadow: 0 18px 40px -22px rgba(20, 42, 33, 0.6); }

/* The checklist, written in code */
.ex__paper { width: 86%; margin-top: 8px; background: #fff; border-radius: 6px 6px 0 0; padding: 22px 22px 10px; box-shadow: 0 18px 40px -24px rgba(20, 42, 33, 0.45); max-height: 72%; overflow: hidden; }
.ex__paper h4 { margin: 0 0 12px; font: 700 0.9375rem/1.2 var(--wayfinding); color: #1E392F; }
.ex__paper ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ex__paper li { display: flex; align-items: center; gap: 10px; font: 500 0.9375rem/1.3 var(--body); color: #3B4A42; opacity: 0; }
.ex__paper li::before { content: ""; flex: none; width: 15px; height: 15px; border-radius: 4px; border: 2px solid #90A77E; background: #fff; }
.ex__paper li.is-done::before { background: #1E392F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat; border-color: #1E392F; }
.ex__paper--long { max-height: 74%; }
.ex__clip { height: 250px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }

/* The route, drawn in code */
.ex__route { width: 100%; margin-top: 6px; }
.ex__route svg { display: block; width: 100%; height: auto; overflow: visible; }
.ex__route .ln { fill: none; stroke: #1E392F; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.ex__route .st circle { fill: #fff; stroke: #1E392F; stroke-width: 5; }
.ex__route .st text { font: 700 13px var(--wayfinding); fill: #1E392F; }
.ex__route .st--end circle { fill: #1E392F; }
.ex__am { display: flex; align-items: center; gap: 10px; margin-top: 6px; opacity: 0; }
.ex__am img { width: 44px; height: 44px; border-radius: 50%; }
.ex__am span { font: 700 0.875rem/1.2 var(--wayfinding); }

/* The ending */
.ex__end { place-items: center; align-content: center; gap: 18px; padding: 26px; text-align: center; }
.ex__end img { width: 64px; height: auto; }
.ex__end .lockup { color: #1E392F; font-size: 1.25rem; }
.ex__end .btn { pointer-events: auto; }

/* Captions and controls */
.ex__cap { position: absolute; left: 18px; right: 18px; bottom: 54px; z-index: 3; min-height: 3.1em; display: flex; align-items: flex-end; justify-content: center; text-align: center; }
.ex__cap p { margin: 0; padding: 8px 12px; border-radius: 10px; background: rgba(30, 57, 47, 0.92); color: #fff; font: 600 0.9375rem/1.35 var(--body); text-wrap: balance; }
.ex__bar { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: rgba(244, 241, 232, 0.96); box-shadow: 0 -1px 0 rgba(30, 57, 47, 0.1); }
.ex__btn { flex: none; width: 30px; height: 30px; border: 0; border-radius: 50%; background: #1E392F; color: #fff; display: grid; place-items: center; cursor: pointer; }
.ex__btn svg { width: 12px; height: 12px; fill: currentColor; }
.ex__track { flex: 1; height: 5px; border-radius: 3px; background: rgba(30, 57, 47, 0.14); overflow: hidden; }
.ex__track i { display: block; height: 100%; width: 0; background: #1E392F; }
.ex__tag { position: absolute; top: 12px; right: 12px; z-index: 4; }
.ex__snd { background: transparent; color: #1E392F; box-shadow: inset 0 0 0 1.5px rgba(30, 57, 47, 0.35); }
.ex__snd svg { width: 15px; height: 15px; }
.ex__snd[aria-pressed="true"] { background: #1E392F; color: #fff; box-shadow: none; }
.ex__snd .i-on { fill: currentColor; }

/* John's scenes (Nov 3): full-bleed 4:5 pictures, captions sit over the clear bottom quarter */
.ex__scene:has(.ex__full) { padding: 0; }
.ex__full { position: absolute; inset: 0; }
.ex__full img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 35%; }
.ex__cards { width: 88%; margin-top: 30px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ex__card { background: #fff; border-radius: 14px; padding: 16px 14px; box-shadow: 0 14px 30px -20px rgba(20, 42, 33, 0.5); opacity: 0; }
.ex__card b { display: block; font: 700 0.9375rem/1.2 var(--wayfinding); color: #1E392F; }
.ex__card span { display: block; margin-top: 6px; font: 400 0.8125rem/1.35 var(--body); color: #46574E; }
.ex__card::before { content: ""; display: block; width: 22px; height: 22px; margin-bottom: 10px; border-radius: 50%; background: #1E392F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.3 2.3 4.7-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat; }
.ex__btn svg[hidden] { display: none; }

/* ---------- Premium pass (Nov 4) ---------- */
.ex__scene { z-index: 1; }
/* the pine line that sweeps between scenes, like the site's glow lines */
.ex__wipe { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; pointer-events: none; }
.ex__wipe path { fill: none; stroke: #1E392F; stroke-width: 14; stroke-linecap: round; }
.ex__wipe path + path { stroke: #90A77E; stroke-width: 7; }
/* one paper grain over everything ties John's pictures and the coded scenes together */
.ex__grain { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0.09; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ex__full img, .ex__pic img { will-change: transform, filter; }
/* captions light up word by word with the voice */
.ex__cap p span { opacity: 0.42; transition: opacity 0.18s ease; }
.ex__cap p span.is-lit { opacity: 1; }
.ex__cap { z-index: 6; }
.ex__bar, .ex__tag { z-index: 7; }
.ex__route .dotgo { fill: #C9A24A; stroke: #fff; stroke-width: 3; opacity: 0; }
.ex__mark { position: relative; display: grid; place-items: center; }
.ex__ring { position: absolute; width: 110px; height: 110px; border-radius: 50%; border: 3px solid #90A77E; opacity: 0; }
.ex__paper li { will-change: clip-path; }

/* Round 16: Repair health check and the opening note */
.ex__health { width: 86%; margin-top: 26px; background: #fff; border-radius: 14px; padding: 18px 18px 14px; box-shadow: 0 18px 40px -24px rgba(20, 42, 33, 0.45); }
.ex__health h4 { margin: 0 0 4px; font: 700 1rem/1.2 var(--wayfinding); color: #1E392F; }
.ex__health small { display: block; margin-bottom: 12px; font-size: 0.75rem; color: #46574E; }
.ex__health ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ex__health li { display: flex; align-items: center; justify-content: space-between; gap: 10px; font: 500 0.875rem/1.3 var(--body); color: #3B4A42; }
.ex__health li i { flex: none; width: 14px; height: 14px; border-radius: 50%; }
.ex__health .ok { background: #6F8A5C; } .ex__health .weak { background: #C9A24A; } .ex__health .miss { background: #9A5C38; }
.ex__health .key { display: flex; gap: 12px; margin-top: 12px; font-size: 0.6875rem; color: #46574E; }
.ex__health .key span { display: inline-flex; align-items: center; gap: 5px; }
.ex__health .key i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.ex__note { position: absolute; z-index: 6; top: 14px; left: 14px; right: 70px; margin: 0; padding: 6px 10px; border-radius: 8px; background: rgba(244, 241, 232, 0.92); color: #1E392F; font: 600 0.75rem/1.35 var(--body); opacity: 0; }

/* Packages: the Repair clip beside its short intro */
.rx { display: grid; gap: 32px; align-items: center; }
.rx .ex { justify-self: center; }
.rx__copy .lede { margin-top: 18px; }
.rx__copy .btn { margin-top: 24px; }
@media (min-width: 1000px) { .rx { grid-template-columns: minmax(0, 1fr) 440px; gap: 64px; } }

/* Click to play (Nov 10): a big play button over the first picture; the clip then plays once with sound */
.ex__start { display: none; }
.ex[data-click-play] .ex__start { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; border: 0; padding: 0; cursor: pointer; color: #fff; background: linear-gradient(to top, rgba(20, 42, 33, 0.5), rgba(20, 42, 33, 0.05) 60%); opacity: 0; pointer-events: none; transition: opacity 0.4s; }
.ex[data-click-play].is-idle .ex__start { opacity: 1; pointer-events: auto; }
.ex__start svg { position: relative; z-index: 1; width: 30px; height: 30px; fill: currentColor; margin-left: 5px; }
.ex__start-ring { position: absolute; width: 84px; height: 84px; border-radius: 50%; background: #B5643C; animation: ex-start-pulse 2.4s ease-out infinite; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
.ex__start:hover .ex__start-ring, .ex__start:focus-visible .ex__start-ring { transform: scale(1.08); }
.ex__start-label { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); white-space: nowrap; padding: 6px 12px; border-radius: 999px; background: rgba(20, 42, 33, 0.85); font: 600 0.875rem/1.3 var(--wayfinding); }
.ex[data-click-play].is-idle .ex__bar, .ex[data-click-play].is-idle .ex__cap { opacity: 0; pointer-events: none; }
@keyframes ex-start-pulse { 0% { box-shadow: 0 0 0 0 rgba(181, 100, 60, 0.45); } 100% { box-shadow: 0 0 0 24px rgba(181, 100, 60, 0); } }
@media (prefers-reduced-motion: reduce) { .ex__start-ring { animation: none; } .ex[data-click-play] .ex__start { display: none; } }
/* Tap to pause (Nov 10): while playing, the picture pauses on tap; paused, the big button comes back and resumes */
.ex[data-click-play]:not(.is-idle):not(.is-paused) { cursor: pointer; }
.ex[data-click-play].is-paused .ex__start { opacity: 1; pointer-events: auto; background: rgba(20, 42, 33, 0.28); }
.ex[data-click-play].is-paused .ex__start-label { display: none; }
.ex[data-click-play].is-paused .ex__start-ring { animation: none; }

/* Nov 12: audio loads on intent, so on a slow connection the first tap may wait a moment. Show it's working. */
.ex.is-loading { cursor: progress; }
.ex.is-loading::after { content: ""; position: absolute; z-index: 5; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.35); border-top-color: #fff; animation: ex-spin 800ms linear infinite; pointer-events: none; }
@keyframes ex-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ex.is-loading::after { animation-duration: 2400ms; } }