/* landing motion: things open up (expand) as they arrive. all of it is off for reduced-motion. */
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* scroll progress */
#scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;background:var(--coral);transform-origin:0 50%;transform:scaleX(var(--p,0));z-index:60;pointer-events:none;opacity:0;transition:opacity .3s}
#scroll-progress.on{opacity:1}

/* reveal: arrive slightly contracted, open into place */
.js-motion .rv{opacity:0;transform:translateY(22px) scale(.975);transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1),letter-spacing 1.2s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js-motion .rv.in{opacity:1;transform:none}
.js-motion h1.rv,.js-motion h2.rv{letter-spacing:-.06em}
.js-motion h1.rv.in,.js-motion h2.rv.in{letter-spacing:var(--ls,-.02em)}

/* hero */
.js-motion .hero .shot.rv{transform:translateY(34px);transition-duration:1.3s,1.4s}
.js-motion .hero .shot.rv.in{transform:none}
.hero-period{display:inline-block}
.js-motion .hero h1.in .hero-period{animation:pulsedot 1.1s .9s ease-out both}
@keyframes pulsedot{0%{transform:scale(1)}40%{transform:scale(1.55)}100%{transform:scale(1)}}

/* the word "change" gets underlined as the sentence arrives */
.highlight-change{background:linear-gradient(transparent 64%,rgba(216,66,69,.26) 64% 90%,transparent 90%) no-repeat 0 0/0% 100%;transition:background-size 1.1s .55s cubic-bezier(.2,.7,.2,1)}
.js-motion .rv.in .highlight-change,.highlight-change.in{background-size:100% 100%}
html:not(.js-motion) .highlight-change{background-size:100% 100%}

/* 14 days: dots arrive one by one, like levels */
.js-motion .b .dots i{opacity:0;transform:scale(.2);transition:opacity .4s,transform .5s cubic-bezier(.3,1.5,.5,1);transition-delay:calc(.5s + var(--i,0)*70ms)}
.js-motion .b.in .dots i{opacity:1;transform:none}

/* cards */
.b{transition:border-color .3s,box-shadow .3s}
.b:hover{border-color:#d98a86;box-shadow:0 14px 30px rgba(100,13,9,.07)}
.chk[aria-pressed="true"] .a{animation:ansin .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes ansin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .js-motion .rv,.js-motion .b .dots i{opacity:1!important;transform:none!important;transition:none!important;letter-spacing:inherit!important}
  .highlight-change{background-size:100% 100%;transition:none}
  .hero-period,.chk[aria-pressed="true"] .a{animation:none!important}
  #scroll-progress{display:none}
}

/* join bar tucks away while reading downward */
.sticky.is-visible.is-tucked{transform:translateY(110%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}


/* join bar tucks away while reading downward */
.sticky.is-visible.is-tucked{transform:translateY(110%)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* a little air under "the change starts here" */
.video-intro h2 + p{margin-top:14px!important}


/* love and fear */
.fuel .intro{margin-bottom:34px}
.fuel-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fuel-card{border-radius:24px;padding:30px 30px 32px;display:flex;flex-direction:column;align-items:center;text-align:center}
.fuel-card.fear{background:#EFE7E2;border:1.5px solid #E1D3CC;color:#3a2a27}
.fuel-card.love{background:#F7DEDD;border:1.5px solid #EDC4C0;color:var(--ox)}
.fuel-svg{width:min(230px,70%);height:auto;margin:0 auto 8px;overflow:visible}
.fuel-svg path{fill:none;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.fear .fuel-svg path{stroke:#4a3733}.fear .core{fill:#3a2a27}
.love .fuel-svg path{stroke:var(--coral)}.love .core{fill:var(--coral)}
.love .halo{fill:none;stroke:var(--coral);stroke-width:2;opacity:0}
.fuel-card h3{font-family:var(--serif);font-weight:700;font-size:clamp(2rem,3.6vw,2.7rem);line-height:1;letter-spacing:-.02em;margin:10px 0 12px;color:inherit}
.fuel-card h3 span{display:block;font-family:var(--sans);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin-top:12px;opacity:.7}
.fuel-card p{margin:0 0 16px;max-width:24em;font-size:1rem;line-height:1.55}
.fuel-words{list-style:none;padding:0;margin:auto 0 0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.fuel-words li{font-weight:600;font-size:.92rem;padding:8px 18px;border-radius:999px}
.fear .fuel-words li{border:1.5px solid #3a2a27;color:#3a2a27}
.love .fuel-words li{background:var(--coral);color:#fff;border:1.5px solid var(--coral)}
.fuel-foot{max-width:40em;margin:30px auto 0;text-align:center;color:var(--muted);font-size:1rem;line-height:1.7}
@media(max-width:760px){.fuel-grid{grid-template-columns:1fr}.fuel-card{padding:24px 22px 26px}.fuel-svg{width:min(190px,60%)}}

/* the arrows breathe: fear closes in, love opens out */
.fear .ar{animation:arIn 3.2s ease-in-out infinite}
.love .ar{animation:arOut 3.2s ease-in-out infinite}
.fear .core{transform-box:fill-box;transform-origin:center;animation:coreIn 3.2s ease-in-out infinite}
.love .core{transform-box:fill-box;transform-origin:center;animation:coreOut 3.2s ease-in-out infinite}
.love .halo{transform-box:fill-box;transform-origin:center;animation:halo 3.2s ease-out infinite}
@keyframes arIn{0%,100%{transform:translateY(-5px)}50%{transform:translateY(13px)}}
@keyframes arOut{0%,100%{transform:translateY(8px)}50%{transform:translateY(-8px)}}
@keyframes coreIn{0%,100%{transform:scale(1.06)}50%{transform:scale(.72)}}
@keyframes coreOut{0%,100%{transform:scale(.9)}50%{transform:scale(1.25)}}
@keyframes halo{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.fear .ar,.love .ar,.fear .core,.love .core,.love .halo{animation:none!important}}

/* love / fear: compact */
.fuel{padding:56px 0 64px!important}
.fuel .intro{margin-bottom:22px!important}
.fuel-grid{gap:16px}
.fuel-card{padding:20px 22px 22px;border-radius:20px}
.fuel-svg{width:min(120px,45%);margin:0 auto 2px}
.fuel-card h3{font-size:clamp(1.6rem,2.8vw,2.1rem);margin:6px 0 8px}
.fuel-card h3 span{margin-top:8px;font-size:.66rem}
.fuel-card p{font-size:.95rem;line-height:1.5;margin:0 0 12px}
.fuel-words li{font-size:.85rem;padding:6px 15px}
.fuel-foot{margin:22px auto 0;font-size:1.02rem;line-height:1.6;color:var(--ink)}
@media(max-width:760px){.fuel{padding:44px 0 52px!important}.fuel-svg{width:min(110px,38%)}}

/* join bar floats as a pill so text never looks cut off */
html body .sticky{left:0!important;right:0!important;bottom:14px!important;margin:0 auto!important;width:max-content!important;max-width:calc(100% - 28px)!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.18)!important;padding:8px 10px 8px 26px!important;min-height:0!important;box-shadow:0 10px 30px rgba(45,2,0,.28)!important;justify-content:center!important;gap:18px!important}
html body .sticky .btn{min-width:0!important;border-radius:999px!important;padding:10px 24px!important;flex:none!important}
@media(max-width:760px){html body .sticky{width:calc(100% - 28px)!important;padding:7px 8px 7px 20px!important;justify-content:space-between!important}html body .sticky .btn{padding:10px 18px!important}}

/* mobile hero: portrait centered and larger, never tucked in the corner; no slide on the photo */
.js-motion .hero .shot.rv{transform:none!important}
@media(max-width:700px){
  html body .hero .shot{max-width:none!important;width:calc(100% + 48px)!important;margin:0 -24px!important;justify-content:center!important}
  html body .hero .hero-cut{width:100%!important;max-height:none!important;height:auto!important;aspect-ratio:896/800;object-fit:cover!important;object-position:center bottom!important;max-width:none!important}
  html body .hero .shot::after{left:14%!important;right:14%!important}
}