/* ==========================================================================
   VIVIFY · OUR STORY (2026-09-25)
   The site's look (paper, the soft lights, glass, framed pictures) with
   drawn, animated illustrations in place of photos. Each illustration is a
   size container, so everything inside is sized in cqw and scales with it
   (designed at 500px wide: 1cqw = 5px).
   ========================================================================== */
@view-transition { navigation: auto; }
::view-transition-group(team-photo){ animation-duration: .55s; animation-timing-function: cubic-bezier(.16, 1, .3, 1); }

.st{ background: var(--bg); }
.st-main{ padding-top: 56px; overflow-x: clip; }
.st-hero{ max-width: 1120px; margin: 0 auto; padding: 64px 20px 36px; display: grid; gap: 32px; align-items: center; }
@media (width >= 880px){ .st-hero{ grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 60px; padding: 96px 20px 56px; } }
.st-h1{ margin: 0; font-size: clamp(2.2rem, 5.2vw, 3.9rem); line-height: 1.03; letter-spacing: -.045em; font-weight: 800; text-wrap: balance; }
.st-by{ margin: 18px 0 0; color: var(--ink-soft); font-size: 1.05rem; }
.st-team{ margin: 0; border-radius: 30px; overflow: hidden; aspect-ratio: 1; border: 1.5px solid rgba(255,255,255,.95); box-shadow: 0 30px 60px -34px rgba(22,23,26,.45); view-transition-name: team-photo; }
.st-team img{ width: 100%; height: 100%; object-fit: cover; object-position: 50% 82%; display: block; transform: scale(1.16); transform-origin: 44% 40%; }

/* chapters: words on one side, the drawing on the other, alternating on wide screens */
.st-ch{ max-width: 1120px; margin: 0 auto; padding: 48px 20px; display: grid; gap: 26px; align-items: center; }
@media (width >= 880px){
  .st-ch{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; padding: 72px 20px; }
  .st-ch:nth-of-type(even) .st-txt{ order: 2; }
}
.st-txt h2{ margin: 0; font-size: clamp(1.7rem, 3.3vw, 2.45rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; text-wrap: balance; }
.st-txt p{ margin: 16px 0 0; max-width: 34rem; font-size: 1.1rem; line-height: 1.58; color: var(--ink-soft); }
html.js .st-ch .st-txt, html.js .st-ch .st-art{ opacity: 0; transform: translateY(30px); }
html.js .st-ch.in .st-txt, html.js .st-ch.in .st-art{ opacity: 1; transform: none; transition: opacity .9s ease-out, transform .7s ease-out; }
html.js .st-ch.in .st-art{ transition-delay: .15s; }

/* the frame every drawing sits in: glass over one of the site's lights */
.st-art{ position: relative; container-type: inline-size; aspect-ratio: 5 / 4; width: 100%; border-radius: 32px; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(60% 70% at 0% 18%, color-mix(in srgb, var(--l1) 62%, transparent), transparent 72%),
    radial-gradient(55% 60% at 62% 0%, color-mix(in srgb, var(--l2) 56%, transparent), transparent 72%),
    radial-gradient(60% 70% at 100% 92%, color-mix(in srgb, var(--l3) 56%, transparent), transparent 72%),
    #F8F8F6;
  border: 1.5px solid rgba(255,255,255,.95);
  box-shadow: inset 0 1.5px 0 #fff, 0 1px 2px rgba(40,48,72,.05), 0 26px 54px -34px rgba(40,48,72,.35);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif; color: var(--ink); }
.st-ch:not(.in) .st-art *{ animation-play-state: paused !important; }
.st-note{ position: absolute; left: 0; right: 0; bottom: 3.4cqw; margin: 0; text-align: center; font-size: 2.7cqw; font-weight: 600; color: var(--ink-soft); }
@keyframes st-pop{ from{ opacity: 0; transform: scale(.6); } to{ opacity: 1; transform: none; } }

/* ---------- 1 · China: one app, and everything opens inside it ---------- */
.cn-sun{ position: absolute; right: 9cqw; top: 7cqw; width: 20cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FBE1C0, #F3B786); opacity: .8; }
.cn-phone{ position: absolute; left: 50%; top: 5cqw; width: 36cqw; height: 66cqw; margin-left: -18cqw; padding: 1cqw; border-radius: 7cqw; background: #16171A; box-shadow: 0 5cqw 9cqw -5cqw rgba(22,23,26,.55); }
.cn-scr{ position: relative; width: 100%; height: 100%; border-radius: 6cqw; background: #fff; overflow: hidden; padding: 6cqw 3cqw 3cqw; }
.cn-app{ margin: 0 0 3cqw; display: flex; align-items: center; gap: 1.6cqw; font-size: 2.9cqw; font-weight: 800; letter-spacing: -.01em; }
.cn-app i{ width: 4.4cqw; height: 4.4cqw; border-radius: 1.4cqw; background: #2FA35E; }
.cn-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 2.2cqw; }
.cn-tile{ display: flex; flex-direction: column; align-items: center; gap: .9cqw; padding: 2.4cqw 0 1.9cqw; border-radius: 3.4cqw; background: var(--c); font-size: 2.3cqw; font-weight: 700; animation: st-pop .55s cubic-bezier(.34, 1.56, .64, 1) var(--d) both; }
.cn-tile svg{ width: 7cqw; height: 7cqw; fill: none; stroke: #16171A; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.cn-mini{ position: absolute; inset: 0; background: #fff; padding: 0 3cqw 3.4cqw; display: flex; flex-direction: column; gap: 1.2cqw; transform-origin: var(--ox) var(--oy); animation: cn-open 12s cubic-bezier(.2, .8, .2, 1) var(--delay) infinite both; }
@keyframes cn-open{ 0%{ opacity: 0; transform: scale(.2); } 5%{ opacity: 1; transform: none; } 27%{ opacity: 1; transform: none; } 31%{ opacity: 0; transform: scale(.2); } 100%{ opacity: 0; transform: scale(.2); } }
.cn-mh{ margin: 0 -3cqw 1.4cqw; padding: 7cqw 3cqw 2.6cqw; background: var(--h); color: #fff; font-size: 3.1cqw; font-weight: 800; letter-spacing: -.01em; }
.cn-row{ margin: 0; display: flex; justify-content: space-between; padding: 1.5cqw 0; border-bottom: 1px solid #EEEDEA; font-size: 2.5cqw; }
.cn-row b{ font-weight: 800; }
.cn-btn{ margin-top: auto; text-align: center; padding: 2.3cqw; border-radius: 2.6cqw; background: var(--h); color: #fff; font-weight: 800; font-size: 2.6cqw; }
.cn-map{ position: relative; flex: 1; border-radius: 3cqw; background-color: #E4ECF6;
  background-image: linear-gradient(90deg, transparent 44%, #fff 44% 56%, transparent 56%), linear-gradient(0deg, transparent 44%, #fff 44% 56%, transparent 56%); background-size: 12cqw 12cqw; }
.cn-map i{ position: absolute; width: 3.4cqw; height: 3.4cqw; border-radius: 50%; border: .8cqw solid #fff; box-shadow: 0 .6cqw 1.4cqw rgba(0,0,0,.2); }
.cn-map .a{ left: 22%; top: 28%; background: #16171A; } .cn-map .b{ right: 20%; bottom: 22%; background: #2F6FDB; }
.cn-bub{ margin: 0; align-self: flex-start; max-width: 85%; padding: 1.6cqw 2.4cqw; border-radius: 2.8cqw; background: #F0F0EE; font-size: 2.4cqw; line-height: 1.3; }
.cn-bub--me{ align-self: flex-end; background: #DDF1E2; }

/* ---------- 2 · Bali: a business run by text ---------- */
.bl-sun{ position: absolute; right: 7cqw; top: 6cqw; width: 15cqw; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 40% 38%, #FBE3A6, #F2C35E); }
.bl-waves{ position: absolute; left: 0; bottom: 0; width: 150%; height: 26cqw; }
.bl-waves path{ animation: bl-wave 9s linear infinite; }
.bl-waves .w1{ fill: #CBE6F5; } .bl-waves .w2{ fill: #A6D2EC; animation-duration: 6.5s; }
@keyframes bl-wave{ to{ transform: translateX(-250px); } }
.bl-chat{ position: absolute; left: 50%; top: 5cqw; width: 62cqw; margin-left: -31cqw; border-radius: 5cqw; background: #FAF8F3; overflow: hidden; box-shadow: 0 4cqw 9cqw -4cqw rgba(22,23,26,.4), 0 0 0 1px rgba(22,23,26,.06); }
.bl-head{ display: flex; align-items: center; gap: 2.2cqw; padding: 2.6cqw 3.2cqw; background: #fff; border-bottom: 1px solid #ECEAE4; }
.bl-head i{ width: 6.4cqw; height: 6.4cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #7FD3A1, #2FA35E); }
.bl-head b{ display: block; font-size: 2.9cqw; }
.bl-head small{ display: block; font-size: 2.2cqw; color: #2FA35E; font-weight: 600; }
.bl-body{ display: flex; flex-direction: column; gap: 1.6cqw; padding: 3cqw; min-height: 44cqw; }
.bl-slot{ display: grid; justify-items: start; }
.bl-slot > *{ grid-area: 1 / 1; }
.bl-b{ margin: 0; max-width: 80%; padding: 1.8cqw 2.6cqw; border-radius: 3cqw; font-size: 2.65cqw; line-height: 1.35; opacity: 0; transform: translateY(1.6cqw) scale(.96);
  transition: opacity .35s ease-out, transform .45s cubic-bezier(.16, 1, .3, 1); }
.bl-b.me{ align-self: flex-end; background: #D9F5C7; border-bottom-right-radius: 1cqw; transform-origin: 100% 100%; }
.bl-b.them{ background: #fff; box-shadow: 0 0 0 1px #ECEAE4; border-bottom-left-radius: 1cqw; transform-origin: 0 100%; }
.bl-b.on{ opacity: 1; transform: none; }
.bl-dots{ margin: 0; display: inline-flex; gap: .8cqw; padding: 2.2cqw 2.8cqw; border-radius: 3cqw; background: #fff; box-shadow: 0 0 0 1px #ECEAE4; opacity: 0; transition: opacity .2s; }
.bl-dots.on{ opacity: 1; }
.bl-dots i{ width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #A7A9AE; animation: bl-dot 1s ease-in-out infinite; }
.bl-dots i:nth-child(2){ animation-delay: .15s; } .bl-dots i:nth-child(3){ animation-delay: .3s; }
@keyframes bl-dot{ 0%, 60%, 100%{ transform: none; opacity: .5; } 30%{ transform: translateY(-.8cqw); opacity: 1; } }

/* ---------- 3 · Back home: one more app, one more account ---------- */
.hm-phone{ position: absolute; left: 50%; top: 5cqw; width: 36cqw; height: 66cqw; margin-left: -18cqw; padding: 1cqw; border-radius: 7cqw; background: #16171A; box-shadow: 0 5cqw 9cqw -5cqw rgba(22,23,26,.55); }
.hm-scr{ position: relative; width: 100%; height: 100%; border-radius: 6cqw; overflow: hidden; padding: 8cqw 3cqw 3cqw; background: linear-gradient(170deg, #D6DFF2, #EBE3F4 55%, #F4E4DA); }
.hm-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.4cqw 2cqw; }
.hm-i{ position: relative; aspect-ratio: 1; border-radius: 24%; background: var(--c); opacity: 0; transform: scale(.4); transition: opacity .2s, transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.hm-i.on{ opacity: 1; transform: none; }
.hm-i::after{ content: ""; position: absolute; inset: 22%; border-radius: 50%; border: .6cqw solid rgba(255,255,255,.95); border-right-color: transparent; opacity: 0; }
.hm-i.on::after{ animation: hm-ring .9s linear both; }
@keyframes hm-ring{ 0%{ opacity: 1; transform: rotate(0); } 85%{ opacity: 1; transform: rotate(320deg); } 100%{ opacity: 0; transform: rotate(360deg); } }
.hm-i b{ position: absolute; right: -1.2cqw; top: -1.2cqw; min-width: 3.6cqw; height: 3.6cqw; padding: 0 .8cqw; border-radius: 99px; background: #FF3B30; color: #fff; font-size: 2cqw; font-style: normal; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(.4); }
.hm-i.on b{ animation: st-pop .3s cubic-bezier(.34, 1.56, .64, 1) .95s both; }
.hm-sheet{ position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 1.8cqw; padding: 4cqw 3cqw 5cqw; border-radius: 5cqw 5cqw 0 0; background: #fff; box-shadow: 0 -3cqw 6cqw rgba(22,23,26,.16);
  transform: translateY(105%); transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.hm-sheet.on{ transform: none; }
.hm-sheet b{ font-size: 3.1cqw; letter-spacing: -.01em; }
.hm-field{ padding: 2cqw 2.2cqw; border-radius: 2cqw; background: #F2F2F0; color: #9A9CA2; font-size: 2.4cqw; }
.hm-go{ margin-top: .6cqw; padding: 2.3cqw; border-radius: 2.4cqw; background: #16171A; color: #fff; font-size: 2.3cqw; font-weight: 700; text-align: center; }

/* ---------- 4 · Desks: who software has been built for ---------- */
.dk{ position: absolute; inset: 8cqw 8cqw 7cqw; display: flex; flex-direction: column; gap: 3.2cqw; }
.dk-cap{ margin: 0; font-size: 2.7cqw; font-weight: 700; }
.dk-grid{ display: grid; grid-template-columns: repeat(20, 1fr); gap: 1.2cqw; }
.dk-grid i{ aspect-ratio: 1; border-radius: 50%; background: rgba(22,23,26,.14); transition: background-color .35s ease-out, transform .5s cubic-bezier(.34, 1.56, .64, 1); }
.dk-grid i.f{ background: #E0A458; transform: scale(1.12); }
.dk-key{ margin: 0; display: flex; flex-wrap: wrap; gap: 1.4cqw 4cqw; font-size: 2.6cqw; font-weight: 600; color: var(--ink-soft); }
.dk-key i{ display: inline-block; width: 2.4cqw; height: 2.4cqw; margin-right: 1.2cqw; border-radius: 50%; background: rgba(22,23,26,.18); vertical-align: -.3cqw; }
.dk-key i.f{ background: #E0A458; }
.dk-bar{ margin-top: auto; }
.dk-bar p{ margin: 0 0 1.4cqw; font-size: 2.7cqw; font-weight: 700; }
.dk-track{ position: relative; height: 5.2cqw; border-radius: 2.6cqw; background: rgba(22,23,26,.1); overflow: hidden; }
.dk-track i{ position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 2.6cqw 0 0 2.6cqw; background: #E0A458; transition: width 1s cubic-bezier(.16, 1, .3, 1) 1.5s; }
.dk-bar.on .dk-track i{ width: max(.8%, .9cqw); }
.dk-bar .dk-sub{ margin: 1.4cqw 0 0; font-size: 2.5cqw; font-weight: 500; color: var(--ink-soft); }

/* ---------- 5 · Problem solvers: their words become their app ---------- */
.ps-scene{ position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.6cqw; padding: 4cqw; opacity: 0; transition: opacity .35s ease-out; }
.ps-scene.on{ opacity: 1; }
.ps-who{ margin: 0; display: flex; align-items: center; gap: 1.8cqw; font-size: 2.9cqw; font-weight: 700; }
.ps-who i{ width: 7.4cqw; height: 7.4cqw; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 1cqw 2.4cqw -1cqw rgba(22,23,26,.3); }
.ps-who svg{ width: 4.4cqw; height: 4.4cqw; fill: none; stroke: #16171A; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ps-say{ margin: 0; max-width: 64cqw; padding: 2cqw 3cqw; border-radius: 3.6cqw 3.6cqw 1cqw 3.6cqw; background: var(--person); color: #fff; font-size: 3cqw; line-height: 1.3; opacity: 0; transform: translateY(1.8cqw); transition: opacity .35s ease-out .2s, transform .5s cubic-bezier(.16, 1, .3, 1) .2s; }
.ps-card{ width: 44cqw; border-radius: 4cqw; background: #fff; overflow: hidden; box-shadow: 0 3cqw 7cqw -3cqw rgba(22,23,26,.4); opacity: 0; transform: translateY(3cqw) scale(.94); transition: opacity .45s ease-out 1.1s, transform .6s cubic-bezier(.16, 1, .3, 1) 1.1s; }
.ps-scene.on .ps-say, .ps-scene.on .ps-card{ opacity: 1; transform: none; }
.ps-scene:not(.on) .ps-say, .ps-scene:not(.on) .ps-card{ transition-delay: 0s; }
.ps-ch{ margin: 0; padding: 2.4cqw 3cqw; background: var(--h); color: #fff; font-size: 3cqw; font-weight: 800; letter-spacing: -.01em; }
.ps-r{ margin: 0; display: flex; justify-content: space-between; padding: 1.7cqw 3cqw; border-bottom: 1px solid #EEEDEA; font-size: 2.6cqw; }
.ps-r b{ font-weight: 800; }
.ps-btn{ display: block; margin: 2.2cqw 3cqw 3cqw; padding: 2.1cqw; border-radius: 2.4cqw; background: var(--h); color: #fff; text-align: center; font-size: 2.6cqw; font-weight: 800; }

/* ---------- 6 · By hand: a whole app, drawn slowly ---------- */
.bh-sheet{ position: absolute; left: 50%; top: 7cqw; width: 42cqw; margin-left: -21cqw; padding: 2.4cqw; border-radius: 2.4cqw; background: #FFFDF8; transform: rotate(-2deg); box-shadow: 0 4cqw 8cqw -4cqw rgba(22,23,26,.35), 0 0 0 1px rgba(22,23,26,.06); }
.bh-draw{ display: block; width: 100%; height: auto; stroke: #16171A; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.bh-draw path{ stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.bh-draw path:nth-child(1){ animation: bh-1 11s ease-in-out infinite; }
.bh-draw path:nth-child(2){ animation: bh-2 11s ease-in-out infinite; }
.bh-draw path:nth-child(3){ animation: bh-3 11s ease-in-out infinite; }
.bh-draw path:nth-child(4){ animation: bh-4 11s ease-in-out infinite; }
.bh-draw path:nth-child(5){ animation: bh-5 11s ease-in-out infinite; }
@keyframes bh-1{ 0%{ stroke-dashoffset: 1000; opacity: 1; } 14%, 90%{ stroke-dashoffset: 0; opacity: 1; } 96%{ stroke-dashoffset: 0; opacity: 0; } 100%{ stroke-dashoffset: 1000; opacity: 0; } }
@keyframes bh-2{ 0%, 14%{ stroke-dashoffset: 1000; opacity: 1; } 25%, 90%{ stroke-dashoffset: 0; opacity: 1; } 96%{ stroke-dashoffset: 0; opacity: 0; } 100%{ stroke-dashoffset: 1000; opacity: 0; } }
@keyframes bh-3{ 0%, 25%{ stroke-dashoffset: 1000; opacity: 1; } 45%, 90%{ stroke-dashoffset: 0; opacity: 1; } 96%{ stroke-dashoffset: 0; opacity: 0; } 100%{ stroke-dashoffset: 1000; opacity: 0; } }
@keyframes bh-4{ 0%, 45%{ stroke-dashoffset: 1000; opacity: 1; } 60%, 90%{ stroke-dashoffset: 0; opacity: 1; } 96%{ stroke-dashoffset: 0; opacity: 0; } 100%{ stroke-dashoffset: 1000; opacity: 0; } }
@keyframes bh-5{ 0%, 60%{ stroke-dashoffset: 1000; opacity: 1; } 72%, 90%{ stroke-dashoffset: 0; opacity: 1; } 96%{ stroke-dashoffset: 0; opacity: 0; } 100%{ stroke-dashoffset: 1000; opacity: 0; } }
.bh-month{ position: absolute; right: 6cqw; top: 6cqw; margin: 0; display: grid; }
.bh-month span{ grid-area: 1 / 1; padding: 1.4cqw 2.6cqw; border-radius: 99px; background: rgba(255,255,255,.85); box-shadow: 0 0 0 1px rgba(22,23,26,.08), 0 1.6cqw 3cqw -1.6cqw rgba(22,23,26,.3); font-size: 2.8cqw; font-weight: 800; opacity: 0; }
.bh-month span:nth-child(1){ animation: bh-m1 11s linear infinite; }
.bh-month span:nth-child(2){ animation: bh-m2 11s linear infinite; }
.bh-month span:nth-child(3){ animation: bh-m3 11s linear infinite; }
.bh-month span:nth-child(4){ animation: bh-m4 11s linear infinite; }
@keyframes bh-m1{ 0%{ opacity: 0; } 2%, 17%{ opacity: 1; } 19%, 100%{ opacity: 0; } }
@keyframes bh-m2{ 0%, 18%{ opacity: 0; } 20%, 35%{ opacity: 1; } 37%, 100%{ opacity: 0; } }
@keyframes bh-m3{ 0%, 36%{ opacity: 0; } 38%, 53%{ opacity: 1; } 55%, 100%{ opacity: 0; } }
@keyframes bh-m4{ 0%, 54%{ opacity: 0; } 56%, 92%{ opacity: 1; } 95%, 100%{ opacity: 0; } }

/* ---------- 7 · Vivify: the real apps, from a text ---------- */
.rv-fan{ position: absolute; inset: 0; }
.rv-p{ position: absolute; top: 12cqw; --w: 22cqw; }
.rv-p::after{ display: none; }
.rv-p--l{ left: 11cqw; transform: rotate(-8deg); }
.rv-p--r{ right: 11cqw; transform: rotate(8deg); }
.rv-p--c{ left: 50%; top: 6cqw; --w: 25cqw; margin-left: -13.35cqw; z-index: 2; filter: drop-shadow(0 4cqw 6cqw rgba(22,23,26,.35)); animation: rv-float 6s ease-in-out infinite; }
@keyframes rv-float{ 0%, 100%{ transform: translateY(0); } 50%{ transform: translateY(-1.4cqw); } }

/* ---------- the mission and the way back ---------- */
.st-mission{ text-align: center; padding: 96px 20px 100px; margin-top: 24px; }
.st-mission__h{ max-width: 880px; margin: 0 auto; font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -.04em; font-weight: 800; text-wrap: balance; }
.st-cta{ display: inline-block; margin-top: 30px; padding: 15px 32px; border-radius: 999px; background: var(--person); color: #fff; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .12s var(--out), filter .2s; }
.st-cta:hover{ filter: brightness(1.06); } .st-cta:active{ transform: scale(.97); }
.st-src{ max-width: 1120px; margin: 0 auto; padding: 0 20px 44px; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
.st-src a{ color: inherit; }

/* reduced motion: every drawing shown finished and still */
@media (prefers-reduced-motion: reduce){
  html.js .st-ch .st-txt, html.js .st-ch .st-art{ opacity: 1; transform: none; transition: none; }
  .st-art *, .st-art *::before, .st-art *::after{ animation: none !important; transition: none !important; }
  .cn-mini{ display: none; }
  .bh-draw path{ stroke-dashoffset: 0; }
  .bh-month span:last-child{ opacity: 1; }
  ::view-transition-group(team-photo){ animation: none; }
}