/* The home page of hamoji.app, «Один день» (task 044). Loaded by the home
   page only, after styles.css.

   Without JavaScript or with «reduce motion» the page is read top to bottom:
   the six moments of the day as cards, the year as a calendar, the steps
   beside one phone, the hamsters, the outfits, the claims. `site.js` adds
   `.motion` to <html> and the rules at the end of this file lay the same
   sections into scenes that move with the scroll (review of the plan, R6). */

.home-page { --sky-ink: #3B2A22; --sky-ink2: #6A5446; --coral: #D55850; --sky: #3E84C8;
  --hand: "Hamoji Hand", "Caveat", cursive;
  background: linear-gradient(#FFCDB2, #FFE9D8 40%, #FFF4EA); color: var(--sky-ink); color-scheme: light; }
.home-page .bar { position: relative; z-index: 20; }
.home-page .brand { color: var(--sky-ink); }
.home-page .lang summary { background: rgba(255, 250, 243, .9); color: #3B2A22; box-shadow: inset 0 0 0 1.5px rgba(59, 42, 34, .14); }
.home-page .lang-pop { background: #FFFAF3; color: #3B2A22; box-shadow: 0 18px 50px rgba(75, 53, 43, .22); }
.home-page .lang-pop a:hover, .home-page .lang-pop a:focus-visible { background: #EFE4D6; }
.home-page .lang-pop a[aria-current="true"] { background: #F8DAD3; }
.home-page .plate { background: rgba(59, 42, 34, .08); }
.home-page .foot { border-color: rgba(59, 42, 34, .14); position: relative; z-index: 1; }
.home-page .foot-links a, .home-page .foot-note, .home-page .foot-note a { color: var(--sky-ink2); }
.home { position: relative; z-index: 1; }
.home p { margin: 0; }
.dot, .pdot { display: inline-block; border-radius: 50%; flex: none; }
.dot.c, .pdot.c { background: var(--coral); } .dot.s, .pdot.s { background: var(--sky); }

/* the way into the store */
.get { display: grid; justify-items: start; gap: 6px; }
.soon { display: inline-flex; align-items: center; min-height: 50px; padding: 0 24px; border-radius: 18px; border: 2px solid #E8867F; background: rgba(255, 255, 255, .3); font-weight: 800; font-size: 17px; white-space: nowrap; }
.soon-note { font-weight: 700; font-size: 13px; color: var(--sky-ink2); }
.badge img { display: block; height: 54px; width: auto; }

/* --- the day, read as a page ------------------------------------------------------ */
.hero { max-width: 1120px; margin: 0 auto; padding: 24px 20px 12px; display: grid; gap: 16px; }
.hero h1 { margin: 0; font-size: clamp(40px, 7vw, 88px); font-weight: 900; line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.hero .lede { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; max-width: 32em; color: var(--sky-ink2); }
.scroll-hint { display: none; }
.moments { list-style: none; margin: 0 auto; padding: 16px 20px 40px; max-width: 1120px; display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.moment { background: rgba(255, 250, 243, .72); border-radius: 28px; padding: 18px 20px 0; display: grid; justify-items: center; text-align: center; overflow: hidden; }
.m-time { font-weight: 900; font-size: 34px; font-variant-numeric: tabular-nums; }
.m-who { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.m-who .dot { width: 12px; height: 12px; }
.m-who svg { width: 18px; height: 10px; opacity: .6; }
[dir="rtl"] .m-who svg { transform: scaleX(-1); }
.m-cap { font-weight: 800; font-size: 15px; color: var(--sky-ink2); margin-top: 6px; }
.m-word { font-weight: 900; font-size: 34px; line-height: 1.1; margin-top: 4px; }
.m-word .in { display: inline-block; }
.m-word .in span { display: inline-block; white-space: pre; }
.m-pet img { width: 220px; height: auto; display: block; }
.clock-live, .minis { display: none; }

/* --- the year, read as a page ------------------------------------------------------- */
.year { background: linear-gradient(#15122A, #2A2347 60%, #3E3160); color: #F6EDE3; padding: 56px 20px 64px; }
.year-head { text-align: center; display: grid; gap: 8px; justify-items: center; max-width: 900px; margin: 0 auto 28px; }
.year-head h2 { margin: 0; font-size: clamp(40px, 7vw, 96px); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.year-head .count { font-weight: 800; font-size: clamp(18px, 2vw, 24px); color: #CFC2D8; font-variant-numeric: tabular-nums; }
.year-text { max-width: 34em; font-size: clamp(15px, 1.4vw, 18px); line-height: 1.45; color: #CFC2D8; }
.months { display: grid; grid-template-columns: repeat(auto-fill, minmax(352px, 1fr)); gap: 24px; justify-items: center; max-width: 1480px; margin: 0 auto; }

/* a month as «Наш год» lays it out: 316 px of cells, scaled where it is used */
.mon { width: 352px; color: #4B352B; background: #EFE4D6; border-radius: 28px; padding: 20px 18px 16px; }
.mon .mh { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.mon .mh b { font-size: 24px; font-weight: 900; text-transform: capitalize; }
.mon .wd, .mon .g { display: grid; grid-template-columns: repeat(7, 40px); column-gap: 6px; }
.mon .wd span { font-size: 11px; font-weight: 700; color: #6F5A4B; text-align: center; margin-bottom: 6px; white-space: nowrap; overflow: hidden; }
.mon .g { row-gap: 3px; }
.mon .d { display: grid; justify-items: center; gap: 3px; }
.mon .n { font-size: 12px; font-weight: 700; color: #6F5A4B; line-height: 1; font-variant-numeric: tabular-nums; }
.mon .today .n { color: #A9483F; font-weight: 900; }
.mon .before .n, .mon .future .n { color: #A8978A; }
.mon .cell { width: 40px; height: 40px; border-radius: 11px; position: relative; display: flex; align-items: center; justify-content: center; }
.mon .past .cell { border: 1.5px dashed #E2D2BE; }
.mon .has .cell, .mon .today .cell { background: #FBF6EE; box-shadow: 0 2px 6px rgba(75, 53, 43, .10); }
.mon .cell img { width: 36px; height: 36px; }
.mon .cell.two img { width: 20px; height: 20px; }
.mon .more { position: absolute; top: -7px; right: -8px; background: #FFFAF3; border-radius: 99px; font-size: 9.5px; font-weight: 900; padding: 1px 4px; box-shadow: 0 1px 3px rgba(75, 53, 43, .18); line-height: 1.3; }
[dir="rtl"] .mon .more { right: auto; left: -8px; }
.mon .dots { display: flex; gap: 2px; height: 5px; }
.mon .dots i { width: 5px; height: 5px; border-radius: 50%; }
.mon .dots .c { background: #D55850; } .mon .dots .s { background: #3E84C8; }
@media (max-width: 420px) { .months { grid-template-columns: minmax(0, 1fr); } .months .mon { zoom: .88; } }

/* --- how it works, read as a page ---------------------------------------------------------- */
.how .stage { max-width: 1120px; margin: 0 auto; padding: 56px 20px; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: start; }
.kicker { margin: 0 0 12px; font-weight: 800; font-size: 16px; color: var(--sky-ink2); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.step h3 { margin: 0 0 6px; font-size: clamp(36px, 5vw, 64px); font-weight: 900; letter-spacing: -.02em; line-height: 1; }
.step p { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.45; color: var(--sky-ink2); max-width: 28em; }
.step .pdots { display: none; }
.phone-cell { position: relative; display: grid; justify-items: center; }
.whose { display: none; }
.phone { position: relative; width: 300px; aspect-ratio: 9 / 19.5; }
.bezel { position: absolute; inset: 0; border-radius: 15% / 7%; background: #231B17; box-shadow: 0 40px 80px rgba(40, 20, 10, .3), inset 0 0 0 2px #4a3b33; }
.bezel::after { content: ""; position: absolute; top: 2.4%; left: 50%; width: 30%; height: 3.2%; translate: -50% 0; background: #0d0907; border-radius: 999px; z-index: 30; }
.screen { position: absolute; inset: 3%; border-radius: 12.5% / 5.8%; overflow: hidden; container-type: size; background: #EFE4D6; color: #4B352B; clip-path: inset(0 round 12.5% / 5.8%); }
.lay { position: absolute; inset: 0; background: #EFE4D6; }
.home-b, .ys, .ssheet, .veil, .flycard, .finger, .fly-heart { visibility: hidden; }
.status { position: absolute; top: 3.2cqw; inset-inline: 8cqw; display: flex; justify-content: space-between; font-weight: 800; font-size: 3.8cqw; direction: ltr; z-index: 20; }
.status i { display: inline-block; width: 6.5cqw; height: 3.1cqw; border-radius: 1cqw; background: #4B352B; }
.cap { position: absolute; top: 14cqw; height: 9cqw; padding: 0 3.6cqw; border-radius: 99px; background: #FFFAF3; box-shadow: inset 0 0 0 .35cqw #EADCC9; display: flex; align-items: center; font-weight: 800; font-size: 3.9cqw; white-space: nowrap; }
.cap.l { inset-inline-start: 4cqw; }
.cap.r { inset-inline-end: 15cqw; }
.cap.gear { inset-inline-end: 4cqw; width: 9cqw; padding: 0; }
.cap.gear::after { content: ""; width: 3.6cqw; height: 3.6cqw; margin: auto; border-radius: 50%; border: .9cqw solid #4B352B; box-sizing: border-box; }
.pairline { position: absolute; top: 26.5cqw; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 1.6cqw; font-weight: 600; font-size: 3.7cqw; color: #6F5A4B; }
.pairline b { font-weight: 600; margin-inline-end: 2cqw; }
.pairline .pdot { width: 2.2cqw; height: 2.2cqw; }
.back-card { position: absolute; left: 11.5cqw; top: 51cqw; width: 77cqw; height: 88cqw; border-radius: 7cqw; background: #F6EEE2; box-shadow: 0 1cqw 3cqw rgba(75, 53, 43, .08); }
.back-card.b1 { transform: translate(-6cqw, 3cqw) scale(.98); }
.back-card.b2 { transform: translate(6cqw, 3cqw) scale(.98); }
.back-card.b3 { transform: translate(0, -2cqw) scale(.96); }
.hcard { position: absolute; left: 11.5cqw; top: 56cqw; width: 77cqw; height: 93cqw; border-radius: 7cqw; background: #FBF6EE; box-shadow: 0 2cqw 6cqw rgba(75, 53, 43, .14); }
.hcard img { position: absolute; left: 11cqw; top: 8cqw; width: 55cqw; height: 55cqw; }
.cs { font-family: var(--hand); font-weight: 600; }
.hcard .cs { position: absolute; left: 2cqw; right: 2cqw; top: 64cqw; text-align: center; font-size: 6.4cqw; line-height: 1.05; }
.hcard .meta { position: absolute; left: 2cqw; right: 2cqw; top: 75cqw; display: flex; justify-content: center; align-items: center; gap: 1.2cqw; font-size: 2.9cqw; font-weight: 600; color: #6F5A4B; white-space: nowrap; }
.hcard .meta .pdot { width: 2cqw; height: 2cqw; }
.hcard .stroked { color: #F47F77; }
.newpill { position: absolute; top: 4cqw; inset-inline-end: 4cqw; padding: .8cqw 2.6cqw; border-radius: 99px; background: #F8DAD3; box-shadow: inset 0 0 0 .3cqw #E2A399; color: #A9483F; font-weight: 800; font-size: 3cqw; opacity: 0; }
.pages { position: absolute; top: 154cqw; left: 0; right: 0; display: flex; justify-content: center; gap: 1.8cqw; }
.pages i { width: 1.4cqw; height: 1.4cqw; border-radius: 50%; background: #BCAB9B; }
.pages i.on { background: #4B352B; }
.bigbtn { position: absolute; left: 4.5cqw; right: 4.5cqw; bottom: 6cqw; height: 12.5cqw; border-radius: 6.5cqw; background: #F47F77; box-shadow: 0 1.1cqw 0 #CF6F68; display: grid; place-items: center; font-weight: 800; font-size: 4.4cqw; color: #3A2620; }
.bigbtn.pressed { transform: translateY(.9cqw); box-shadow: 0 .2cqw 0 #CF6F68; }
.veil { position: absolute; inset: 0; background: rgba(60, 40, 30, .28); opacity: 0; z-index: 8; }
.ssheet { position: absolute; left: 0; right: 0; bottom: 0; top: 13cqw; background: #EFE4D6; border-radius: 9cqw 9cqw 0 0; z-index: 9; transform: translateY(105%); }
.ssheet .handle { position: absolute; top: 2.2cqw; left: 50%; width: 11cqw; height: 1cqw; translate: -50% 0; border-radius: 1cqw; background: #BCAB9B; }
.ssheet .x { position: absolute; top: 5cqw; inset-inline-start: 4cqw; width: 8.5cqw; height: 8.5cqw; border-radius: 50%; background: #FFFAF3; box-shadow: inset 0 0 0 .35cqw #EADCC9; }
.ssheet .to { position: absolute; top: 7cqw; left: 0; right: 0; display: flex; justify-content: center; align-items: center; gap: 1.6cqw; font-size: 4.1cqw; font-weight: 800; }
.ssheet .to span { color: #6F5A4B; }
.ssheet .to .pdot { width: 2.4cqw; height: 2.4cqw; }
.prev { position: absolute; top: 16cqw; left: 3.5cqw; right: 3.5cqw; height: 54cqw; border-radius: 6cqw; background: #FBF6EE; box-shadow: 0 1.5cqw 4cqw rgba(75, 53, 43, .10); }
.prev img { position: absolute; left: 50%; top: 3cqw; width: 36cqw; height: 36cqw; translate: -50% 0; }
.prev #prevLove { opacity: 0; }
.prev .cs { position: absolute; left: 2cqw; right: 2cqw; top: 40cqw; text-align: center; font-size: 5.6cqw; white-space: nowrap; overflow: hidden; }
.lbl { position: absolute; inset-inline-start: 3.5cqw; font-size: 3.2cqw; font-weight: 700; color: #6F5A4B; }
.lbl.l1 { top: 75cqw; } .lbl.l2 { top: 104cqw; } .lbl.l3 { top: 124cqw; }
.tiles { position: absolute; top: 81cqw; left: 3.5cqw; right: 3.5cqw; display: flex; justify-content: center; gap: 2.4cqw; }
.tile { display: grid; justify-items: center; gap: 1cqw; font-size: 2.8cqw; font-weight: 600; color: #6F5A4B; position: relative; }
.tile > span { width: 13cqw; height: 13cqw; border-radius: 4cqw; background: #FBF6EE; box-shadow: 0 .6cqw 1.6cqw rgba(75, 53, 43, .10); overflow: hidden; display: grid; place-items: center; }
.tile img { width: 11cqw; height: 11cqw; }
.tile.on > span { box-shadow: 0 0 0 .7cqw #F47F77; }
.tile.on { color: #4B352B; font-weight: 800; }
.tile .lock { position: absolute; top: -1cqw; right: -1cqw; width: 4cqw; height: 4cqw; border-radius: 50%; background: #FFFAF3; box-shadow: inset 0 0 0 .3cqw #E2A399; }
.tile .lock::after { content: ""; position: absolute; inset: 1.1cqw; border-radius: .5cqw; background: #C9564E; }
.chips { position: absolute; top: 110cqw; left: 3.5cqw; right: 0; display: flex; gap: 2cqw; overflow: hidden; white-space: nowrap; }
.chips span { flex: none; height: 8cqw; padding: 0 3.6cqw; border-radius: 99px; background: #FFFAF3; display: flex; align-items: center; font-size: 3.5cqw; font-weight: 600; }
.chips span.on { background: #F8DAD3; box-shadow: inset 0 0 0 .35cqw #E2A399; font-weight: 800; }
.cap.wardrobe { top: 121.5cqw; inset-inline-end: 3.5cqw; height: 8.5cqw; font-size: 3.5cqw; }
.wears { position: absolute; top: 133cqw; left: 3.5cqw; right: 0; display: flex; gap: 3cqw; }
.wears i { flex: none; width: 13cqw; height: 13cqw; border-radius: 50%; background: #FFFAF3; }
.wears i.on { box-shadow: 0 0 0 .7cqw #F47F77; }
.noterow { position: absolute; top: 152cqw; left: 3.5cqw; right: 3.5cqw; height: 11cqw; border-radius: 5cqw; background: #FFFAF3; display: flex; align-items: center; gap: 3cqw; padding: 0 4cqw; font-size: 3.8cqw; }
.noterow .env { width: 6cqw; height: 4.4cqw; border-radius: .8cqw; border: .45cqw solid #6F5A4B; box-sizing: border-box; }
.noterow em { margin-inline-start: auto; font-style: normal; font-weight: 600; color: #6F5A4B; font-size: 3.4cqw; }
.finger { position: absolute; width: 12cqw; height: 12cqw; border-radius: 50%; background: rgba(75, 53, 43, .22); border: .8cqw solid rgba(255, 255, 255, .85); left: 44cqw; top: 95cqw; opacity: 0; z-index: 12; }
.fly-heart { position: absolute; left: 44cqw; top: 90cqw; width: 9cqw; opacity: 0; color: #F47F77; z-index: 12; filter: drop-shadow(0 .5cqw 0 #CF6F68); }
.fly-heart svg { display: block; width: 100%; }
.ys { z-index: 10; }
.ys .backc { position: absolute; top: 14cqw; inset-inline-start: 4cqw; width: 9cqw; height: 9cqw; border-radius: 50%; background: #FFFAF3; box-shadow: inset 0 0 0 .35cqw #EADCC9; }
.ys .yearpill { position: absolute; top: 14cqw; inset-inline-end: 4cqw; height: 9cqw; padding: 0 3.4cqw; border-radius: 99px; background: #FFFAF3; box-shadow: inset 0 0 0 .35cqw #EADCC9; display: flex; align-items: center; font-weight: 800; font-size: 4cqw; font-variant-numeric: tabular-nums; }
.ys .ys-title { position: absolute; top: 27cqw; inset-inline-start: 4cqw; font-size: 9cqw; font-weight: 900; letter-spacing: -.02em; }
.ys .ys-together { position: absolute; top: 39cqw; inset-inline-start: 4cqw; font-size: 3.7cqw; font-weight: 600; color: #6F5A4B; }
.ys .seg { position: absolute; top: 47cqw; left: 4cqw; right: 4cqw; height: 9.5cqw; border-radius: 99px; background: rgba(75, 53, 43, .08); display: grid; grid-template-columns: repeat(3, 1fr); padding: .7cqw; }
.ys .seg span { display: flex; align-items: center; justify-content: center; gap: 1.2cqw; font-size: 3.6cqw; font-weight: 600; color: #6F5A4B; border-radius: 99px; white-space: nowrap; }
.ys .seg .pdot { width: 2.2cqw; height: 2.2cqw; }
.ys .seg span.on { background: #FFFAF3; color: #4B352B; font-weight: 800; }
.ys .monwrap { position: absolute; top: 61cqw; inset-inline-start: 4cqw; transform-origin: 0 0; }
[dir="rtl"] .ys .monwrap { transform-origin: 100% 0; }
.ys .mon { background: none; padding: 0; width: 316px; }
.ys .today .cell > *, .ys .today .dots { opacity: 0; transition: opacity .25s; }
.ys .today.landed .cell > *, .ys .today.landed .dots { opacity: 1; }
.flycard { position: absolute; left: 0; top: 0; width: 20cqw; height: 20cqw; border-radius: 4cqw; background: #FBF6EE; z-index: 11; opacity: 0; box-shadow: 0 1.5cqw 4cqw rgba(75, 53, 43, .2); display: grid; place-items: center; transform-origin: 0 0; }
.flycard img { width: 90%; height: 90%; }

/* --- the languages, the hamsters, the fitting room, the claims, the night --------------------- */
.talk { padding: 64px 0; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 0 20px; }
.row span { font-weight: 900; font-size: clamp(22px, 3.4vw, 48px); padding: 8px 22px; border-radius: 999px; white-space: nowrap; line-height: 1.15; }
.row span:nth-child(4n+1) { background: #F4A38E; color: #3A2620; }
.row span:nth-child(4n+2) { background: #A9D2F1; color: #1F3550; }
.row span:nth-child(4n+3) { background: #F1E5CF; color: #4B352B; }
.row span:nth-child(4n+4) { background: #B7E7DF; color: #1E4A44; }
.talk .mid { text-align: center; padding: 16px 20px; display: grid; gap: 6px; justify-items: center; }
.talk .n b { display: block; font-size: clamp(90px, 18vw, 220px); font-weight: 900; line-height: .85; letter-spacing: -.04em; }
.talk .n span { font-weight: 800; font-size: 20px; color: var(--sky-ink2); }
.talk-text { max-width: 28em; font-size: clamp(17px, 1.6vw, 22px); line-height: 1.4; font-weight: 700; }

.five, .wear .stage { max-width: 1120px; margin: 0 auto; padding: 56px 20px; }
.head { display: grid; gap: 12px; max-width: 900px; margin-bottom: 28px; }
.head h2 { margin: 0; font-size: clamp(40px, 6.4vw, 88px); font-weight: 900; letter-spacing: -.02em; line-height: .98; text-wrap: balance; }
.head p { color: var(--sky-ink2); font-size: clamp(16px, 1.5vw, 20px); line-height: 1.45; max-width: 34em; }
.gallery, .outfits { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.fc { display: grid; gap: 6px; justify-items: center; text-align: center; }
.fc .disc { position: relative; width: 100%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; }
.fc:nth-child(5n+1) .disc { background: #F4A38E; } .fc:nth-child(5n+2) .disc { background: #F1D9A8; }
.fc:nth-child(5n+3) .disc { background: #B7E7DF; } .fc:nth-child(5n+4) .disc { background: #C9D9F2; }
.fc:nth-child(5n+5) .disc { background: #E3D6F0; }
.fc .disc img, .fc .disc canvas { position: absolute; left: 4%; top: 8%; width: 92%; height: 92%; }
.fc h3 { margin: 0; font-size: clamp(22px, 2.4vw, 32px); font-weight: 900; }
.inplus { font-weight: 800; font-size: 14px; color: #A9483F; }
.outfit { background: rgba(255, 250, 243, .72); border-radius: 28px; padding: 10px 10px 16px; text-align: center; }
.outfit .look img { width: 100%; height: auto; display: block; }
.set-name { font-weight: 900; font-size: 20px; }
.giant { display: none; }

.say { max-width: 1120px; margin: 0 auto; padding: 56px 20px; display: grid; gap: 40px; }
.claim { font-size: clamp(26px, 4vw, 58px); font-weight: 900; line-height: 1.12; letter-spacing: -.01em; max-width: 20em; }
.claim strong { color: #A9483F; font-weight: 900; }

.night-end { background: linear-gradient(#15122A, #2A2347 60%, #3E3160); color: #F6EDE3; padding: 80px 20px; display: grid; justify-items: center; text-align: center; gap: 20px; }
.night-end .invite-pet { width: min(280px, 64vw); height: auto; }
.night-end h2 { margin: 0; font-size: clamp(40px, 7vw, 104px); font-weight: 900; letter-spacing: -.03em; line-height: .95; text-wrap: balance; }
.night-end > p { font-size: 19px; line-height: 1.45; color: #CFC2D8; max-width: 30em; }
.night-end .get { justify-items: center; }
.night-end .soon { border-color: #EE968E; background: rgba(255, 255, 255, .08); color: #F6EDE3; }
.night-end .soon-note { color: #CFC2D8; }

.sky, .stars, .orb { display: none; }

@media (max-width: 820px) {
  .how .stage { grid-template-columns: minmax(0, 1fr); }
  .phone { width: min(300px, 78vw); }
  .gallery, .outfits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery .fc:last-child:nth-child(odd) { grid-column: 1 / -1; width: 50%; justify-self: center; }
}

/* === In motion ==================================================================================
   `.motion` is on <html> when the reader's system allows motion (the page's head
   puts it there, `site.js` keeps it). The sections become scenes: a tall
   section holds a stage that sticks to the screen while the scroll plays it. */

/* The height of the bar that stays on top (styles.css: 14 px above and below
   a 44 px menu, and the notch): every scene's first line is laid under it
   with room to breathe, on a phone as on a desk (the owner, 2026-09-30). */
.motion .home-page { --bar: calc(72px + env(safe-area-inset-top, 0px)); background: #FFE9D8; transition: color .5s; }
.motion.night .home-page { --sky-ink: #F6EDE3; --sky-ink2: #CFC2D8; }
.motion .m-time, .motion .m-cap, .m-say { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.motion .m-who { display: none; }

/* the sky behind everything: the day's six skies, the next morning, the night */
.motion .sky, .motion .stars { display: block; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.sky i { position: absolute; inset: 0; opacity: 0; will-change: opacity; }
.sky i:nth-child(1), .sky i:nth-child(7) { background: linear-gradient(#FFCDB2, #FFE9D8 60%, #FFF4EA); }
.sky i:nth-child(1) { opacity: 1; }
.sky i:nth-child(2) { background: linear-gradient(#A9D2F1, #D9ECF8 60%, #F3F8FB); }
.sky i:nth-child(3) { background: linear-gradient(#B9B2CE, #DDD8E7 60%, #EEEAF2); }
.sky i:nth-child(4) { background: linear-gradient(#F4BFC7, #F9DFE2 60%, #FDF0EF); }
.sky i:nth-child(5) { background: linear-gradient(#EE8E78, #F7B98F 55%, #FBDDB5); }
.sky i:nth-child(6), .sky i:nth-child(8) { background: linear-gradient(#15122A, #2A2347 60%, #3E3160); }
.motion .stars { opacity: 0; }
.stars i { position: absolute; border-radius: 50%; background: #FFF6DF; box-shadow: 0 0 6px rgba(255, 246, 223, .8); }
.motion .orb { display: block; position: fixed; z-index: 0; left: 0; top: 0; width: clamp(70px, 11vw, 150px); aspect-ratio: 1; border-radius: 50%; pointer-events: none; will-change: transform, opacity; }
.sun { background: radial-gradient(circle at 40% 40%, #FFF3C9, #FFD27A 60%, #FFB85C); box-shadow: 0 0 80px 30px rgba(255, 205, 120, .45); }
.moon { background: radial-gradient(circle at 35% 35%, #FFFBEF, #EDE3CF); box-shadow: 0 0 60px 16px rgba(255, 248, 225, .25); opacity: 0; }
.moon::after { content: ""; position: absolute; width: 22%; height: 22%; border-radius: 50%; background: rgba(160, 150, 130, .25); left: 55%; top: 30%; box-shadow: -34px 26px 0 -4px rgba(160, 150, 130, .2); }

/* the bar stays on top; once the page moves under it, it gets a veil of the sky */
.motion .home-page .bar { position: fixed; top: 0; left: 0; right: 0; max-width: none; z-index: 50; transition: background-color .3s; }
.motion .home-page .bar.veiled { background: rgba(255, 248, 240, .35); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.motion.night .home-page .bar.veiled { background: rgba(21, 18, 42, .45); }
.motion.night .home-page .foot { border-color: rgba(255, 255, 255, .14); }

/* --- the day -------------------------------------------------------------------------------- */
.motion .day { height: 760vh; }
.motion .day > .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.motion .moments { position: absolute; inset: 0; margin: 0; padding: 0; max-width: none; display: block; }
.motion .moment { position: absolute; inset: 0; background: none; border-radius: 0; padding: 0; display: block; overflow: visible; }
.motion .m-word { position: absolute; left: 0; right: 0; top: 40%; translate: 0 -50%; margin: 0; text-align: center; white-space: nowrap; font-size: 120px; line-height: 1.02; letter-spacing: -.03em; pointer-events: none; visibility: hidden; }
.motion .m-word .in span { will-change: transform, opacity; }
.motion .m-pet { position: absolute; left: 50%; bottom: 0; width: min(46svh, 440px, 86vw); margin-left: calc(min(46svh, 440px, 86vw) / -2); transform-origin: 50% 100%; will-change: transform; visibility: hidden; }
.motion .m-pet img { width: 100%; }
/* the first hamster stands from the first paint; the first word waits for `site.js`
   to fit it to the screen, so it never jumps from one size to another */
.motion .moment:first-child .m-pet { visibility: visible; }
.motion .clock-live { display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; top: calc(var(--bar) + 12px); inset-inline: 0; z-index: 2; pointer-events: none; }
.clock { font-weight: 900; font-size: clamp(44px, 9vw, 120px); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.clock.wheels { display: flex; align-items: center; direction: ltr; }
.clock.wholes { display: grid; }
.clock .whole { grid-area: 1 / 1; text-align: center; white-space: nowrap; opacity: 0; will-change: transform, opacity; }
.wheel { display: block; height: 1em; width: .62em; overflow: hidden; }
.wheel b { display: block; will-change: transform; }
.wheel b span { display: block; height: 1em; text-align: center; }
.clock .fixed { min-width: .3em; text-align: center; translate: 0 -.06em; opacity: .7; }
.clock-live .who { display: flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 99px; background: rgba(255, 255, 255, .35); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.motion.night .clock-live .who { background: rgba(255, 255, 255, .12); }
.clock-live .who .dot { width: 14px; height: 14px; transition: background-color .3s; }
.clock-live .who svg { width: 18px; height: 10px; opacity: .6; }
[dir="rtl"] .clock-live .who svg { transform: scaleX(-1); }
.cap-live { font-weight: 800; font-size: clamp(15px, 1.4vw, 19px); color: var(--sky-ink); min-height: 1.3em; text-align: center; padding: 0 20px; }

/* the first screen: the title, the way into the store, a hint to scroll */
.motion .hero { position: absolute; inset-inline: 20px; bottom: calc(60px + env(safe-area-inset-bottom, 0px)); max-width: none; margin: 0; padding: 0; z-index: 3;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); grid-template-areas: "title . get" "lede hint get"; align-items: end; gap: 8px 16px; pointer-events: none; }
.motion .hero > * { pointer-events: auto; }
.motion .hero.away > * { pointer-events: none; }
.motion .hero h1 { grid-area: title; font-size: clamp(24px, 3.2vw, 46px); line-height: 1.02; max-width: 9em; }
.motion .hero .lede { grid-area: lede; font-size: 16px; max-width: 22em; }
.motion .hero .get { grid-area: get; justify-self: end; justify-items: end; }
.motion .scroll-hint { display: block; grid-area: hint; font-weight: 800; font-size: 14px; opacity: .6; }

/* --- the year ----------------------------------------------------------------------------------- */
.motion .year { height: 420vh; padding: 0; background: none; color: inherit; }
.motion .year > .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.motion .year-head { position: absolute; top: calc(var(--bar) + 14px); inset-inline: 0; margin: 0; max-width: none; gap: 6px; padding: 0 20px; z-index: 2; }
.motion .year-head .count, .motion .year-text { color: var(--sky-ink2); }
.motion .year-text { margin: 4px auto 0; }
.motion .cam-frame { position: absolute; inset: 0; -webkit-mask-image: linear-gradient(transparent calc(var(--head, 0px) - 40px), #000 var(--head, 0px)); mask-image: linear-gradient(transparent calc(var(--head, 0px) - 40px), #000 var(--head, 0px)); }
.motion .cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; opacity: 0; }
.motion .months { grid-template-columns: repeat(6, auto); gap: 36px; max-width: none; margin: 0; }
.motion .months .mon { zoom: 1; box-shadow: 0 30px 70px rgba(10, 6, 20, .45); }
.motion .year .today:not(.landed) .cell { background: none; box-shadow: none; border: 1.5px dashed #E2D2BE; }
.motion .year .today .cell > *, .motion .year .today .dots { opacity: 0; transition: opacity .25s; }
.motion .year .today.landed .cell > *, .motion .year .today.landed .dots { opacity: 1; }
.motion .minis { display: block; }
.mini { position: absolute; left: 0; top: 0; width: 120px; aspect-ratio: 1; background: #F9F3EB; border-radius: 22px; box-shadow: 0 16px 34px rgba(0, 0, 0, .25); opacity: 0; will-change: transform, opacity; }
.mini img { width: 100%; }

/* --- how it works: the steps change beside one phone ---------------------------------------------- */
.motion .how { height: 600vh; }
.motion .how .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; max-width: none; margin: 0; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 4vw; padding: calc(var(--bar) + 12px) max(20px, 5vw) 70px; }
.motion .steps { gap: 0; }
.motion .steps > li { grid-area: 1 / 1; display: grid; gap: 14px; align-content: center; opacity: 0; }
/* a step out of sight stays in the page for a screen reader, but takes no touch */
.motion .steps > li.away { pointer-events: none; }
.motion .step h3 { margin: 0; font-size: clamp(44px, 7vw, 110px); letter-spacing: -.03em; line-height: .95; }
.motion .step p { font-size: clamp(17px, 1.5vw, 21px); max-width: 26em; }
.motion .step .pdots { display: flex; gap: 8px; margin-top: 6px; }
.pdots i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .22; }
.pdots i.on { opacity: .85; }
.motion .phone-cell { height: 100%; min-height: 0; place-items: center; }
.motion .whose { display: flex; position: absolute; top: 0; left: 50%; translate: -50% 0; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 99px; background: rgba(255, 255, 255, .45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-weight: 800; font-size: 15px; white-space: nowrap; z-index: 2; }
.whose-dot { width: 11px; height: 11px; }
.motion .phone { width: auto; height: min(calc(100% - 44px), 720px); max-width: 100%; margin-top: 44px; }
.motion .home-b { visibility: visible; opacity: 0; }
.motion .ys { visibility: visible; transform: translateX(100%); }
.motion[dir="rtl"] .ys { transform: translateX(-100%); }
.motion .veil, .motion .flycard, .motion .finger, .motion .fly-heart { visibility: visible; }
.motion #cardB { opacity: 0; }
.motion .ys .today:not(.landed) .cell { background: none; box-shadow: none; border: 1.5px dashed #E2D2BE; }

/* --- the languages drift; the hamsters, the fitting room, the claims -------------------------------- */
.motion .talk { padding: 18vh 0; gap: 22px; }
.motion .row { flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding: 0; gap: 14px; will-change: transform; }
.motion .row span { font-size: clamp(28px, 4.4vw, 60px); padding: 10px 26px; line-height: 1.1; }
.motion .five { max-width: none; padding: 16vh max(20px, 5vw); }
.motion .gallery .fc { will-change: transform; }

.motion .wear { height: 440vh; }
.motion .wear > .stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; max-width: none; margin: 0; padding: 0; transition: background-color .45s; }
.motion .wear .head { position: absolute; top: calc(var(--bar) + 12px); inset-inline: max(20px, 5vw) 20px; margin: 0; z-index: 3; color: #2E211B; }
.motion .wear .head p { color: rgba(46, 33, 27, .75); }
.motion .giant { display: block; position: absolute; top: 50%; left: 0; translate: 0 -40%; margin: 0; white-space: nowrap; font-weight: 900; font-size: clamp(120px, 26vw, 380px); line-height: 1; letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 3px rgba(46, 33, 27, .5); direction: ltr; will-change: transform; }
.motion .outfits { display: block; position: absolute; left: 50%; bottom: 4svh; width: min(58svh, 520px, 88vw); margin-left: calc(min(58svh, 520px, 88vw) / -2); aspect-ratio: 1; perspective: 1000px; z-index: 2; }
.motion .outfit { position: absolute; inset: 0; padding: 0; border-radius: 0; background: none; opacity: 0; }
.motion .outfit.on { opacity: 1; }
.motion .outfit .look { backface-visibility: hidden; will-change: transform; }
.motion .outfit .set-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.motion .say { max-width: none; padding: 18vh max(20px, 6vw); gap: 16vh; }
.motion .claim { font-size: clamp(30px, 4.6vw, 66px); }
.motion .claim .w { opacity: .16; transition: opacity .12s linear; }
.motion .claim .w.on { opacity: 1; }

.motion .night-end { min-height: 100vh; min-height: 100svh; padding: 20vh 20px 14vh; align-content: center; gap: 24px; background: none; color: inherit; }
.motion .night-end > p { color: var(--sky-ink2); }

@media (max-width: 820px) {
  .motion .moon { width: 64px; }
  .motion .m-word { top: 36%; }
  .motion .m-pet { width: min(40svh, 78vw); margin-left: calc(min(40svh, 78vw) / -2); }
  .motion .hero { top: 45%; bottom: auto; grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "get"; justify-items: center; text-align: center; gap: 12px; }
  .motion .hero h1 { font-size: 26px; }
  .motion .hero .lede { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .motion .scroll-hint { display: none; }
  .motion .hero .get { justify-self: center; justify-items: center; }
  .motion .hero .soon { min-height: 44px; font-size: 16px; }
  .motion .months { grid-template-columns: repeat(3, auto); }
  .motion .how .stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); padding: calc(var(--bar) + 12px) 20px 62px; gap: 6px; align-items: stretch; }
  .motion .kicker { margin-bottom: 4px; font-size: 14px; }
  .motion .steps > li { gap: 6px; align-content: start; }
  .motion .step h3 { font-size: clamp(32px, 9vw, 46px); }
  .motion .step p { font-size: 15px; }
  .motion .whose { font-size: 13px; padding: 4px 10px; }
  .motion .phone { width: auto; height: min(calc(100% - 34px), 720px); margin-top: 34px; }
  .motion .giant { -webkit-text-stroke-width: 2px; }
}