/* About: the porch at golden hour (round 2 storyboard, A2 to A6).
   The page reads like the light going down: warm gold paper for the story,
   ivory for the moment and the beliefs, dusk for Perch, night to close.
   Motion is CSS only and runs once: world.js adds "in" to each .reveal. */

/* Panels sit closer together than the default bands, with the porch
   still showing in the gaps. */
main > .band + .band { padding-top: 0; }
.ab-story, .ab-tl, .ab-bel, .ab-perch, .ab-close { gap: 20px; }

/* ------------------------------------------------------------ A2 the story */
.ab-story { background: linear-gradient(180deg, rgba(243,192,143,0.95) 0%, rgba(246,236,218,0.95) 20%, rgba(246,243,234,0.95) 42%); }
.ab-story-grid { display: grid; gap: 22px; }
.ab-p { margin: 0; max-width: 64ch; font-size: 19px; line-height: 1.7; color: #2F3A35; text-wrap: pretty; }
.ab-p1::first-letter { float: left; margin: 0.08em 0.12em 0 0; font: 500 3.5em/0.8 var(--serif); color: #8A4E5A; }

.ab-pull { position: relative; margin: 0; padding: 4px 0 4px 26px; }
.ab-pull::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--dawn), var(--gold)); transform: scaleY(0); transform-origin: top; transition: transform 1000ms cubic-bezier(.3,.7,.2,1) 300ms; }
.ab-pull.in::before { transform: none; }
.ab-pull blockquote { margin: 0; }
.ab-pull p { margin: 0; font: 400 clamp(23px, 2.4vw, 30px)/1.28 var(--serif); color: var(--ink2); letter-spacing: -0.005em; text-wrap: balance; }

.ab-sig { margin: 6px 0 0; display: grid; gap: 4px; align-content: start; }
.ab-sig::before { content: ""; width: 36px; height: 2px; margin-bottom: 10px; border-radius: 2px; background: var(--dawn); }
.ab-photo { margin: 0; }
.ab-photo img { display: block; width: 100%; max-width: 320px; height: auto; aspect-ratio: 1; border-radius: 22px; box-shadow: 0 18px 40px rgba(14,24,20,0.22); }
.ab-sig b { font: 500 21px/1.2 var(--serif); color: var(--ink2); }
.ab-sig > span { font-size: 15px; line-height: 1.5; color: #46524C; }

@media (min-width: 1024px) {
  .ab-story-grid { grid-template-columns: minmax(0, 640px) minmax(240px, 1fr); column-gap: clamp(48px, 5vw, 80px); align-items: stretch; }
  .ab-col { display: grid; gap: 24px; align-content: start; }
  .ab-right { position: sticky; top: 96px; align-self: start; }
  .ab-pull { margin: 8px 0; }
}
@media (max-width: 1023.98px) {
  .ab-col { display: contents; }
}

/* ------------------------------------------------------------ A3 the moment */
.ab-tl { background: rgba(246,243,234,0.95); }
.ab-line { --gap: 30px; list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.ab-line li { --c: #8A948F; --c2: #8A948F; --t: calc(var(--i) * 450ms + 200ms); position: relative; padding-top: 38px; display: grid; gap: 8px; align-content: start; }
.ab-line li:nth-child(2) { --c2: var(--amber); }
.ab-line li:nth-child(3) { --c: var(--amber); --c2: var(--coral); }
.ab-line li:nth-child(4) { --c: var(--coral); }
/* Each stretch of line draws from its dot to the next, so a dot lands the
   moment the line reaches it. */
.ab-line li:not(:last-child)::before { content: ""; position: absolute; top: 8px; left: 9px; width: calc(100% + var(--gap)); height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--c), var(--c2)); transform: scaleX(0); transform-origin: left; transition: transform 450ms linear var(--t); }
.ab-dot { position: absolute; top: 0; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 4px rgba(246,243,234,0.95); transform: scale(0); transition: transform 460ms cubic-bezier(.3,1.6,.5,1) var(--t); }
.ab-bad .ab-dot::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid var(--coral); opacity: 0; }
.ab-line.in li:not(:last-child)::before { transform: none; }
.ab-line.in .ab-dot { transform: none; }
.ab-line.in .ab-bad .ab-dot::after { animation: ab-ring 1400ms ease-out calc(var(--t) + 380ms) 1 both; }
@keyframes ab-ring { from { opacity: 0.9; transform: scale(0.7); } to { opacity: 0; transform: scale(2.1); } }
.ab-month { font: 500 13px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: #46524C; }
.ab-warn .ab-month { color: #7A5108; }
.ab-bad .ab-month { color: #9B3B27; }
.ab-line p { margin: 0; font-size: 17px; line-height: 1.45; color: var(--ink2); text-wrap: pretty; }
.ab-bad p { font-weight: 500; }

@media (max-width: 860px) {
  .ab-line { --gap: 28px; grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .ab-line li { padding: 0 0 0 42px; gap: 6px; }
  .ab-line li:not(:last-child)::before { top: 9px; left: 8px; width: 2px; height: calc(100% + var(--gap)); background: linear-gradient(180deg, var(--c), var(--c2)); transform: scaleY(0); transform-origin: top; }
  .ab-month { padding-top: 2px; }
}

/* ------------------------------------------------------------ A4 what we believe */
.ab-bel { background: linear-gradient(180deg, rgba(246,243,234,0.95), rgba(239,226,207,0.95)); }
.ab-beliefs { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.ab-beliefs li.reveal { transition-delay: calc(var(--i) * 80ms); }
.ab-belief { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 26px; border-radius: 18px; background: #fff; border: 1px solid rgba(17,26,23,0.1); color: var(--ink2); text-decoration: none; transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease; }
.ab-belief:hover { transform: translateY(-2px); border-color: rgba(7,112,79,0.45); box-shadow: 0 14px 32px rgba(17,26,23,0.08); }
.ab-belief:focus-visible { outline: 2px solid var(--mint-d); outline-offset: 3px; }
.ab-glyph { width: 32px; height: 32px; margin-bottom: 4px; fill: none; stroke: var(--mint-d); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ab-belief b { font: 500 24px/1.15 var(--serif); }
.ab-belief p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #3D4A44; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ab-chips span { padding: 6px 10px; border-radius: 999px; font: 500 12.5px/1 var(--sans); }
.ab-ok { background: rgba(111,211,166,0.2); color: #07704F; }
.ab-look { background: rgba(232,169,59,0.2); color: #8F5F0A; }
.ab-learn { background: rgba(17,26,23,0.06); color: #46524C; }
.ab-more { margin-top: auto; padding-top: 8px; font-size: 14.5px; font-weight: 600; color: var(--mint-d); }
.ab-more span { display: inline-block; transition: transform 200ms ease; }
.ab-belief:hover .ab-more span { transform: translateX(3px); }

@media (max-width: 860px) {
  .ab-beliefs { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 560px) and (max-width: 860px) {
  /* A foldable or a small tablet: glyph beside the words. */
  .ab-belief { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; row-gap: 8px; }
  .ab-belief > * { grid-column: 2; }
  .ab-belief .ab-glyph { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
}

/* ------------------------------------------------------------ A5 Perch, once */
.ab-perch { max-width: 820px; justify-items: center; text-align: center; padding-block: clamp(48px, 7vw, 84px) 0; overflow: hidden; background: linear-gradient(180deg, rgba(138,78,90,0.5) 0%, rgba(43,35,64,0.82) 72%); border-color: rgba(246,243,234,0.2); }
/* Her own scene: Perch stands on the soil and looks down at the roots she
   watches. The approved watching look, placed so her gaze lands on them. */
.ab-night { position: relative; width: calc(100% + 2 * clamp(28px, 4vw, 48px)); margin-top: 8px; height: clamp(250px, 34vw, 320px); }
.ab-watch { position: absolute; right: 14%; bottom: calc(var(--ground) - 10px); width: clamp(132px, 19vw, 176px); height: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.35)); }
.ab-night { --ground: clamp(108px, 15vw, 140px); }
.ab-ground { position: absolute; left: 0; right: 0; bottom: 0; height: var(--ground); box-shadow: inset 0 10px 18px -10px rgba(0,0,0,0.6); }
.ab-roots { position: absolute; inset: 0; width: 100%; height: 100%; }
.ab-roots path { fill: none; stroke: rgba(220,199,142,0.7); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 1600ms cubic-bezier(.3,.7,.2,1) 300ms; }
.ab-roots path.thin { stroke-width: 1.6; stroke: rgba(220,199,142,0.5); transition-delay: 900ms; }
.ab-perch.in .ab-roots path { stroke-dashoffset: 0; }
/* The pulse leaves the sprout and runs out along each root, as on every page. */
.ab-roots path.ab-flow { stroke: #F6F3EA; stroke-width: 3; stroke-dasharray: 5 95; stroke-dashoffset: 0; opacity: 0; transition: none; filter: drop-shadow(0 0 3px rgba(111,211,166,0.9)); }
.ab-perch.in .ab-roots path.ab-flow { animation: ab-flow 3.4s linear 2s infinite; }
@keyframes ab-flow { 0% { stroke-dashoffset: 0; opacity: 0; } 12% { opacity: 0.95; } 85% { opacity: 0.95; } 100% { stroke-dashoffset: -95; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ab-roots path { stroke-dashoffset: 0; transition: none; } .ab-roots path.ab-flow { display: none; } }
.ab-sprout { position: absolute; left: 48%; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px rgba(111,211,166,0.18), 0 0 26px rgba(111,211,166,0.75); }
.ab-perch-line { margin: 0; max-width: 30ch; font: 400 clamp(22px, 2.6vw, 30px)/1.3 var(--serif); color: var(--ivory); text-wrap: balance; }

/* ------------------------------------------------------------ A6 night falls again */
.ab-close { position: relative; overflow: hidden; justify-items: center; text-align: center; padding-block: clamp(64px, 9vw, 112px); background: linear-gradient(180deg, rgba(43,35,64,0.86), rgba(18,17,30,0.9)); }
.ab-close > :not(.ab-stars) { position: relative; }
.ab-close .actions { justify-content: center; }
.ab-stars { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--ivory); pointer-events: none; }
.ab-stars circle { opacity: 0; transition: opacity 1400ms ease var(--d, 0ms); }
.ab-close.in .ab-stars circle { opacity: 1; }

/* ------------------------------------------------------------ phones */
@media (max-width: 720px) {
  .ab-p { font-size: 17.5px; line-height: 1.68; }
  .ab-pull { margin: 10px 0; }
  .ab-line p { font-size: 16.5px; }
  .ab-belief { padding: 22px; }
  .ab-belief b { font-size: 22px; }
}
@media (max-width: 400px) {
  .ab-story, .ab-tl, .ab-bel, .ab-perch, .ab-close { padding-left: 22px; padding-right: 22px; border-radius: 22px; }
  .ab-night { width: calc(100% + 44px); }
  .ab-p { font-size: 17px; }
  .ab-belief { padding: 20px; }
}

/* Reduced motion: every piece in its final place, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .ab-pull::before, .ab-dot, .ab-line li::before { transform: none !important; transition: none; }
  .ab-bad .ab-dot::after { display: none; }
  .ab-stars circle { opacity: 1; transition: none; }
  .ab-beliefs li.reveal { transition-delay: 0s; }
  .ab-belief, .ab-more span { transition: none; }
  .ab-belief:hover, .ab-belief:hover .ab-more span { transform: none; }
}

/* Review mode (?review): questions read in sentence case inside the month labels. */
html.review .ab-month .ask::after { text-transform: none; letter-spacing: 0; }