/* Humble Stories: motion layer.
   Reference: portrait.so (polaroid scrapbook, one hand-drawn accent, things that float and settle).
   Brand translation: stories are photographs and paper. They are scattered on the table, then
   gathered; words darken as they are heard; the hand-drawn mark is an ink underline, never colour.
   Static surfaces stay flat. Only things in flight (polaroids, the floating ask) carry a soft shadow.
   Everything here switches off with prefers-reduced-motion, and nothing is hidden without JS. */

/* ---------- Accent word: Newsreader italic with an ink underline drawn in ---------- */
.hs-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; position: relative; white-space: nowrap; }
.hs-scribble { position: absolute; left: -2%; width: 104%; bottom: -.12em; height: .32em; overflow: visible; pointer-events: none; }
.hs-scribble path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js-motion .hs-scribble path { stroke-dashoffset: 1; transition: stroke-dashoffset .9s cubic-bezier(.6,0,.2,1) .35s; }
.js-motion .hs-scribble path + path { transition-delay: .75s; }
.js-motion .is-in .hs-scribble path, .js-motion .hs-scribble.is-in path { stroke-dashoffset: 0; }

/* ---------- Reveal: soft rise out of a blur, staggered ---------- */
.js-motion [data-reveal] { opacity: 0; transform: translateY(28px); filter: blur(6px); transition: opacity .9s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.2,.7,.2,1), filter .9s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 90ms); }
.js-motion [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

/* ---------- Words that darken as they are read ---------- */
.hs-ink-word { transition: color .5s ease, opacity .5s ease; }
.js-motion [data-ink] .hs-ink-word { color: var(--ink-muted); opacity: .32; }
.js-motion [data-ink] .hs-ink-word.is-on { color: var(--ink); opacity: 1; }

/* ---------- Header settles into a floating paper bar once you scroll ---------- */
.hs-header { transition: background-color .4s ease; }
.hs-header-inner { transition: margin .45s cubic-bezier(.2,.7,.2,1), height .45s cubic-bezier(.2,.7,.2,1), max-width .45s cubic-bezier(.2,.7,.2,1), border-radius .45s ease, background-color .45s ease, box-shadow .45s ease; border-radius: 0; }
.hs-header.is-floating { background-color: transparent; }
.hs-header.is-floating .hs-header-inner { max-width: 1180px; margin: 10px auto 0; height: calc(var(--header-height) - 20px); border-radius: 999px; background: rgb(251 248 243 / .88); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 0 0 1px var(--line), 0 10px 30px -12px rgb(34 31 28 / .18); }
.hs-header.is-floating .hs-logo img { height: 40px; width: auto; transition: height .45s ease; }
@media (max-width: 743px) { .hs-header.is-floating .hs-header-inner { margin: 8px 10px 0; } }

/* ---------- Hero: a table of polaroids around the headline ---------- */
.hs-hero { position: relative; isolation: isolate; overflow-x: clip; }
#stories { overflow-x: clip; }
.hs-wall { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hs-polaroid { position: absolute; left: var(--x); top: var(--y); width: var(--w); margin: 0; will-change: transform; }
.hs-polaroid-in { display: block; background: var(--paper-raised); padding: 7px 7px 0; border-radius: 6px; box-shadow: 0 1px 2px rgb(34 31 28 / .08), 0 14px 30px -14px rgb(34 31 28 / .28); transform: rotate(var(--r)); }
.hs-polaroid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; }
.hs-polaroid figcaption { font-family: var(--font-serif); font-style: italic; font-size: 14px; line-height: 30px; height: 30px; padding-inline: 2px; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-polaroid figcaption:empty { height: 22px; }
.js-motion .hs-polaroid-in { animation: hs-toss .9s cubic-bezier(.2,.8,.25,1.05) both, hs-drift var(--d, 14s) ease-in-out 1.1s infinite alternate; animation-delay: calc(.15s + var(--k) * 110ms), calc(1.1s + var(--k) * 110ms); }
@keyframes hs-toss { from { opacity: 0; transform: translate(var(--tx, 0px), 60px) rotate(calc(var(--r) * 3)) scale(.86); } to { opacity: 1; transform: rotate(var(--r)); } }
@keyframes hs-drift { from { transform: translate(0, 0) rotate(var(--r)); } to { transform: translate(var(--dx, 6px), var(--dy, -8px)) rotate(calc(var(--r) + var(--dr, 1.2deg))); } }
@media (max-width: 1099px) { .hs-polaroid.is-wide { display: none; } }
@media (max-width: 743px) {
  /* on a phone the polaroids sit in a small tossed stack above the headline */
  .hs-wall { position: relative; inset: auto; z-index: 0; display: flex; justify-content: center; height: 118px; margin-bottom: -4px; }
  .hs-polaroid { position: relative; left: auto; top: auto; width: 96px; margin: 0 -10px; }
  .hs-polaroid:nth-child(3) { margin-top: 12px; }
  .hs-polaroid.is-phone-off { display: none; }
  .hs-polaroid figcaption { font-size: 11px; line-height: 22px; height: 22px; }
  .hs-polaroid-in { padding: 5px 5px 0; }
}

/* ---------- Film opens up as it reaches the middle of the screen ---------- */
.js-motion .hs-film { will-change: transform; }

/* ---------- Story cards are dealt onto the grid ---------- */
.js-motion #stories .hs-story { will-change: transform; transform-origin: 50% 80%; }

/* ---------- What your gift funds: six paper things around one gift ---------- */
.hs-orbit { position: relative; display: grid; grid-template-columns: 1fr 220px 1fr; grid-template-rows: repeat(3, auto); column-gap: var(--space-12, 48px); row-gap: var(--space-10, 40px); align-items: center; margin-top: var(--space-12, 48px); }
.hs-orbit-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hs-orbit-lines .hs-orbit-line { fill: none; stroke: var(--ink-muted); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 9; opacity: .75; }
.hs-orbit-lines .hs-orbit-reveal { fill: none; stroke: #fff; stroke-width: 12; stroke-dasharray: 1; stroke-dashoffset: 0; }
.js-motion .hs-orbit-lines .hs-orbit-reveal { stroke-dashoffset: 1; transition: stroke-dashoffset 1.1s cubic-bezier(.6,0,.2,1); transition-delay: calc(.2s + var(--i) * 120ms); }
.js-motion .hs-orbit.is-in .hs-orbit-reveal { stroke-dashoffset: 0; }
.hs-orbit-hub { grid-column: 2; grid-row: 1 / 4; justify-self: center; position: relative; z-index: 1; width: 200px; aspect-ratio: 1; border-radius: 50%; background: var(--paper-band); display: grid; place-items: center; align-content: center; gap: 6px; text-align: center; }
.hs-orbit-hub img { width: 76px; height: 76px; }
.hs-orbit-hub span { font-family: var(--font-serif); font-style: italic; font-size: 22px; line-height: 28px; color: var(--ink); }
.hs-orbit-hub::before, .hs-orbit-hub::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line); opacity: 0; }
.js-motion .hs-orbit.is-in .hs-orbit-hub::before, .js-motion .hs-orbit.is-in .hs-orbit-hub::after { animation: hs-heard 4.8s cubic-bezier(.2,.6,.3,1) infinite; }
.js-motion .hs-orbit.is-in .hs-orbit-hub::after { animation-delay: 2.4s; }
@keyframes hs-heard { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
.hs-orbit-item { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-5, 20px); }
.hs-o1, .hs-o2, .hs-o3 { grid-column: 1; flex-direction: row-reverse; text-align: right; }
.hs-o4, .hs-o5, .hs-o6 { grid-column: 3; }
.hs-o1, .hs-o4 { grid-row: 1; }
.hs-o2, .hs-o5 { grid-row: 2; }
.hs-o3, .hs-o6 { grid-row: 3; }


.hs-orbit-item h3 { margin: 0 0 6px; }
.hs-orbit-item p { margin: 0; max-width: 32ch; }
:is(.hs-o1, .hs-o2, .hs-o3) p { margin-left: auto; }
.hs-orbit-icon { flex: none; width: 80px; height: 80px; border-radius: 50%; background: var(--paper-band); color: var(--ink); display: grid; place-items: center; }
.hs-orbit-icon svg { width: 36px; height: 36px; }
@media (max-width: 1023px) {
  .hs-orbit { grid-template-columns: 1fr 1fr; grid-template-rows: none; column-gap: var(--space-8, 32px); row-gap: var(--space-8, 32px); }
  .hs-orbit-hub, .hs-orbit-lines { display: none; }
  .hs-orbit .hs-orbit-item { grid-column: auto; grid-row: auto; flex-direction: row; text-align: left; margin: 0; }
  .hs-orbit .hs-orbit-item p { margin-left: 0; }
}
@media (max-width: 743px) {
  .hs-orbit { grid-template-columns: 1fr; row-gap: var(--space-6, 24px); margin-top: var(--space-8, 32px); }
  .hs-orbit-icon { width: 64px; height: 64px; }
  .hs-orbit-icon svg { width: 30px; height: 30px; }
}

/* ---------- Rotating word on the closing ask ---------- */
.hs-rotator { display: inline-grid; vertical-align: baseline; clip-path: inset(-0.05em -0.5em -0.22em -0.5em); transition: width .5s cubic-bezier(.2,.7,.2,1); }
.hs-rotator > span { grid-area: 1 / 1; justify-self: start; font-family: var(--font-serif); font-style: italic; font-weight: 400; white-space: nowrap; transition: transform .6s cubic-bezier(.6,0,.2,1), opacity .6s ease; }
.hs-rotator > span:not(:first-child) { transform: translateY(110%); opacity: 0; }
.js-motion .hs-rotator > span { transform: translateY(110%); opacity: 0; }
.js-motion .hs-rotator > span.is-on { transform: none; opacity: 1; }
.js-motion .hs-rotator > span.is-out { transform: translateY(-110%); opacity: 0; }
.hs-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Floating ask: appears once the visitor is into the stories ---------- */
.hs-float { position: fixed; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); z-index: 40; display: flex; align-items: center; gap: 12px; padding: 6px 6px 6px 6px; padding-right: 8px; border-radius: 18px; background: var(--paper-raised); color: var(--ink); text-decoration: none; box-shadow: 0 0 0 1px var(--line), 0 16px 36px -16px rgb(34 31 28 / .35); transform: translate(-50%, 140%); opacity: 0; transition: transform .6s cubic-bezier(.2,.8,.25,1.05), opacity .4s ease; max-width: calc(100% - 32px); }
.hs-float.is-on { transform: translate(-50%, 0); opacity: 1; }
.hs-float-thumb { flex: none; width: 52px; height: 40px; border-radius: 10px; overflow: hidden; background: var(--night); }
.hs-float-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: 52% 30%; }
.hs-float-text { display: grid; gap: 1px; min-width: 0; }
.hs-float-text b { font-size: 14px; line-height: 18px; font-weight: 600; white-space: nowrap; }
.hs-float-text span { font-size: 12px; line-height: 16px; color: var(--ink-muted); white-space: nowrap; }
.hs-float-go { flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--marigold); color: var(--on-marigold); display: grid; place-items: center; margin-left: 6px; transition: transform .3s ease; }
.hs-float:hover .hs-float-go { transform: translateX(3px); }
.hs-float-go svg { width: 18px; height: 18px; }
.hs-float:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .hs-float { transition: none; }
  .hs-header-inner, .hs-header { transition: none; }
}

/* ---------- Other pages ---------- */
/* consent checkmarks draw in as each line arrives */
.js-motion .pg-care svg :is(path, polyline) { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s cubic-bezier(.6,0,.2,1); transition-delay: calc(.35s + var(--i, 0) * 90ms); }
.js-motion .pg-care .is-in svg :is(path, polyline) { stroke-dashoffset: 0; }
/* photos move a little inside their frames */
.js-motion .hs-media img { will-change: transform; transform: scale(1.12); }
/* reading progress on a story page: a thin ink line along the top */
.hs-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; background: var(--ink); transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }
.pg[hidden] .hs-progress { display: none; }
@media (prefers-reduced-motion: reduce) { .hs-progress { display: none; } }