/* Features page (Figma node 623:1175 "Page · Features v2"). 1440px canvas, scaled by fit.js like the home page. */
.page--features { gap: 0; overflow: clip; }
.page--features > section { flex-shrink: 0; }
.page--features > .fsec, .page--features > .fsec--closing { margin-top: 162px; }

/* Type */
.t-label { font-weight: 500; font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; color: var(--accent); }
.t-h1 { font-family: var(--f-display); font-weight: 400; font-size: 80px; line-height: 1.02; letter-spacing: -3.2px; color: var(--ink); }
.t-h3 { font-family: var(--f-display); font-weight: 400; font-size: 32px; line-height: 1.12; letter-spacing: -1.28px; color: var(--ink); }
.t-bodyL { font-size: 20px; line-height: 1.5; letter-spacing: -0.6px; color: #9c958a; }
.t-body { font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; }
.t-strong { font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: var(--ink); }
.t-small { font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #9c958a; }

/* ───────── Nav (sticky; shrinks once you scroll) ───────── */
/* The nav keeps its 132px box so the page never shifts; only its background and contents tighten */
.site-nav { position: sticky; top: 0; z-index: 50; width: 1440px; height: 132px; margin-bottom: -3px; pointer-events: none; }
.site-nav::before {
  content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 132px;
  background: rgba(11, 10, 9, .94); transition: height .35s var(--ease, ease);
}
.site-nav__inner { position: absolute; inset: 0 0 auto 0; height: 132px; transition: transform .35s var(--ease, ease); }
.site-nav__inner > * { pointer-events: auto; }
.site-nav.is-compact::before { height: 88px; }
.site-nav.is-compact .site-nav__inner { transform: translateY(-22px); }
.site-nav__logo { position: absolute; left: 64px; top: 40px; font-size: 34px; line-height: 1.5; }
.site-nav__links {
  position: absolute; left: 480px; top: 52px; display: flex; gap: 32px;
  font-size: 15px; line-height: 1.5; letter-spacing: -0.45px; color: var(--ink); white-space: nowrap;
}
.site-nav__links a[href]:hover { color: #db9466; }
.site-nav__links a[aria-current="page"] { color: #db9466; }
.site-nav__links a[aria-disabled="true"], .site-footer__col a[aria-disabled="true"] { cursor: default; }
.site-nav__cta { position: absolute; left: 1207px; top: 40px; }

/* ───────── 01 Hero · contents list ───────── */
.fhero { position: relative; height: 1220px; }
.fhero__label { position: absolute; left: 64px; top: 80px; }
.fhero__title { position: absolute; left: 64px; top: 112px; width: 1312px; }
.fhero__note { position: absolute; left: 64px; top: 1164px; }
.frows { position: absolute; left: 64px; top: 320px; width: 1312px; border-bottom: 1px solid #262421; }
.frow {
  position: relative; display: block; height: 100px; overflow: hidden;
  border-top: 1px solid #262421; background: transparent;
  transition: height .55s var(--ease, ease), background-color .3s ease, border-color .3s ease;
}
.frow.is-open { height: 320px; background: #111; border-top-color: #111; }
.frow.is-open + .frow { border-top-color: #262421; }
.frow > * { position: absolute; }
.frow__num { left: 0; top: 40px; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: #9c958a; transition: left .4s var(--ease, ease), color .3s ease; }
.frow__title {
  left: 136px; top: 22px; font-family: var(--f-display); font-weight: 300; font-size: 56px; line-height: 1;
  letter-spacing: -2.24px; color: var(--ink); white-space: nowrap; transition: color .3s ease;
}
.frow__sum { left: 756px; top: 36px; width: 420px; font-size: 20px; line-height: 1.5; letter-spacing: -0.6px; color: #9c958a; transition: opacity .25s ease; }
.frow__arrow { left: 1264px; top: 52px; width: 24px; height: 24px; transform: rotate(90deg); transition: opacity .25s ease; }
.frow__desc { left: 136px; top: 110px; width: 460px; font-size: 20px; line-height: 1.5; letter-spacing: -0.6px; color: #9c958a; }
.frow__link { left: 136px; top: 248px; display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: var(--ink); }
.frow__link img { transition: transform .18s ease-out; }
.frow:hover .frow__link img { transform: translateX(4px); }
.frow__preview { left: 756px; top: 24px; width: 532px; height: 272px; object-fit: cover; border-radius: 16px; }
.frow__desc, .frow__link, .frow__preview { opacity: 0; transform: translateY(10px); transition: opacity .35s ease, transform .5s var(--ease, ease); }
.frow.is-open .frow__num { left: 24px; color: var(--accent); }
.frow.is-open .frow__title { color: var(--accent); }
.frow.is-open .frow__sum, .frow.is-open .frow__arrow { opacity: 0; }
.frow.is-open .frow__desc, .frow.is-open .frow__link, .frow.is-open .frow__preview { opacity: 1; transform: none; transition-delay: .12s; }

/* ───────── Shared section header ───────── */
.fsec { position: relative; width: 1440px; }
.fsec__label { position: absolute; left: 64px; top: 0; }
.fsec__title { position: absolute; left: 64px; top: 34px; }
.fsec__intro { position: absolute; left: 860px; top: 52px; width: 516px; }
.fsec__foot { position: absolute; left: 64px; }

/* ───────── 02 Meal planning · calendar ───────── */
.cal { position: absolute; left: 64px; top: 300px; width: 1312px; height: 689px; overflow: hidden; background: #131110; border: 1px solid #262421; border-radius: 28px; }
.cal > * { position: absolute; }
.cal__month { left: 31px; top: 27px; white-space: nowrap; }
.cal__sub { left: 31px; top: 71px; color: #9c958a; white-space: pre; }
.cal__toggle { left: 1121px; top: 33px; display: flex; gap: 4px; padding: 4px; border: 1px solid #262421; border-radius: 999px; }
.cal__toggle span { padding: 7px 16px; border-radius: 999px; font-weight: 500; font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; color: #9c958a; }
.cal__toggle .is-on { background: #2a2622; color: var(--ink); }
.cal-day { top: 123px; width: 170px; height: 420px; overflow: hidden; display: flex; flex-direction: column; padding: 16px 16px 0; background: #181512; border-radius: 18px; }
.cal-day__dow { font-weight: 500; font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; color: #9c958a; }
.cal-day__num { margin-top: 2.4px; font-family: var(--f-display); font-weight: 300; font-size: 40px; line-height: 1; letter-spacing: -1.6px; color: var(--ink); }
.cal-day > img, .cal-day__out { flex-shrink: 0; width: 146px; height: 146px; margin: 22px 0 0 -4px; border-radius: 12px; object-fit: cover; }
.cal-day__out { display: flex; align-items: center; justify-content: center; border: 1px dashed #3a3530; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #9c958a; }
.cal-day__dish { margin-top: 14px; font-weight: 500; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: var(--ink); }
.cal-day__meta { margin-top: 4px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #9c958a; }
.cal-day__dish + .cal-day__meta { margin-top: 6px; }
.cal-day__was { margin-top: 14px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #9c958a; opacity: .6; text-decoration: line-through; }
.cal-day__was + .cal-day__dish { margin-top: 4px; }
.cal-day__dish--new { color: #e8b58f; }
.cal-day--tonight { padding: 14.5px 14.5px 0; background: rgba(199, 122, 76, .12); border: 1.5px solid #c77a4c; }
.cal-day--tonight .cal-day__dow, .cal-day__note { color: #e8b58f; }
.cal-day--tonight .cal-day__num, .cal-day--tonight .cal-day__dish { color: #fff5eb; }
.cal-day__note { margin-top: 4px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; }
.cal-day__badge { position: absolute; left: 84.5px; top: 18.5px; padding: 4px 10px; border-radius: 999px; background: var(--accent); font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #140d08; }
.cal__pointer { left: 654.5px; top: 543px; width: 1px; height: 16px; background: rgba(199, 122, 76, .5); }
.cal__voice { left: 503px; top: 559px; padding: 10px 16px; border-radius: 16px; background: #2a1c12; border: 1px solid rgba(199, 122, 76, .5); font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: #e8b58f; white-space: nowrap; }
.cal__rule { left: 31px; top: 625px; width: 1248px; height: 1px; background: #262421; }
.cal__foot { left: 31px; top: 639px; width: 900px; color: var(--accent); }

/* ───────── 03 Grocery ───────── */
.gro-line { position: absolute; background: rgba(199, 122, 76, .45); }
.gro-dinner { position: absolute; left: 64px; width: 400px; height: 152px; overflow: hidden; background: #131110; border: 1px solid #262421; border-radius: 20px; }
.gro-dinner img { position: absolute; left: 15px; top: 15px; width: 120px; height: 120px; object-fit: cover; border-radius: 14px; }
.gro-dinner .t-strong { position: absolute; left: 155px; top: 21px; white-space: nowrap; }
.gro-dinner ul { position: absolute; left: 155px; top: 55px; margin: 0; padding: 0; list-style: none; }
.gro-dinner li { margin-bottom: 3px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: var(--ink); white-space: nowrap; }
.gro-dinner li.have s { color: #9c958a; opacity: .5; }
.gro-dinner li.have span { margin-left: 10px; color: #9c958a; opacity: .7; }
.gro-list { position: absolute; left: 694px; top: 300px; width: 380px; height: 620px; overflow: hidden; background: #131110; border: 1px solid #262421; border-radius: 24px; }
.gro-list .t-h3 { position: absolute; left: 27px; top: 27px; }
.gro-list__sub { position: absolute; left: 27px; top: 71px; color: var(--accent); white-space: nowrap; }
.gro-list ul { position: absolute; left: 27px; top: 115px; width: 324px; margin: 0; padding: 0; list-style: none; }
.gro-list li { display: flex; justify-content: space-between; height: 52px; padding-top: 13px; border-top: 1px solid #262421; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: var(--ink); }
.gro-list li span:last-child { color: #9c958a; }
.gro-approve { position: absolute; left: 1164px; top: 432px; width: 212px; height: 360px; overflow: hidden; background: #c77a4c; border-radius: 24px; }
.gro-approve > * { position: absolute; left: 24px; }
.gro-approve__label { top: 28px; font-weight: 500; font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; color: #3a2213; }
.gro-approve__total { top: 60px; font-family: var(--f-display); font-weight: 300; font-size: 52px; line-height: 1; letter-spacing: -2.08px; color: #140d08; }
.gro-approve__meta { top: 128px; width: 170px; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: #3a2213; }
.gro-approve__btn { top: 292px; width: 164px; height: 52px; display: flex; align-items: center; justify-content: center; border-radius: 14px; background: #140d08; font-weight: 500; font-size: 16px; letter-spacing: -0.48px; color: var(--ink); }
.gro-say { position: absolute; left: 1164px; top: 812px; width: 212px; color: #9c958a; }

/* ───────── 04 Nutrition ───────── */
.plate { position: absolute; left: 64px; top: 300px; width: 1312px; height: 760px; overflow: hidden; border-radius: 28px; }
.plate__shade { position: absolute; inset: 0; background: linear-gradient(to right, rgba(0,0,0,0) 45%, rgba(0,0,0,.7)); }
.plate-pt { position: absolute; width: 14px; height: 14px; }
.plate-pt::before { content: ""; position: absolute; inset: -12px; background: url(assets/f-point.svg) center / 38px 38px no-repeat; }
.plate-pt::after { content: ""; position: absolute; left: -8px; top: -8px; width: 30px; height: 30px; background: url(assets/f-ring.svg) center / 30px 30px no-repeat; }
.plate-lead { position: absolute; width: 60px; height: 1px; background: rgba(255,255,255,.6); }
/* Figma uses a backdrop blur on these; a near-opaque fill looks the same over the dark photo and scrolls smoothly */
.plate-tag { position: absolute; display: flex; flex-direction: column; padding: 8px 14px; border-radius: 12px; background: rgba(19,17,15,.9); white-space: nowrap; line-height: 1.5; }
.plate-tag span { font-size: 14px; letter-spacing: -0.42px; color: #9c958a; }
.plate-tag b { font-weight: 500; font-size: 16px; letter-spacing: -0.48px; color: var(--ink); }
.plate-card { position: absolute; left: 900px; top: 120px; width: 380px; height: 520px; overflow: hidden; background: rgba(19,17,15,.93); border: 1px solid rgba(255,255,255,.08); border-radius: 24px; }
.plate-card > * { position: absolute; left: 27px; }
.plate-card__when { top: 27px; color: var(--accent); white-space: nowrap; }
.plate-card__dish { top: 51px; white-space: nowrap; }
.plate-card__cal { top: 91px; display: flex; align-items: baseline; gap: 6px; font-family: var(--f-display); font-weight: 300; font-size: 96px; line-height: 1; letter-spacing: -3.84px; color: var(--ink); }
.plate-card__cal small { font-family: var(--f-body); font-size: 20px; line-height: 1.5; letter-spacing: -0.6px; color: #9c958a; }
.macro { width: 324px; display: flex; justify-content: space-between; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #9c958a; }
.macro span:last-child { color: var(--ink); }
.macro i { position: absolute; left: 0; top: 26px; width: 324px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.1); }
.macro i::after { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: var(--w); border-radius: 2px; background: var(--accent); }
.plate-card__rule { top: 419px; width: 324px; height: 1px; background: #2a2622; }
.plate-card__track { top: 439px; width: 56px; height: 56px; }
.plate-card__ring { left: 28.97px; top: 439px; width: 54.03px; height: 56px; }
.plate-card__day { left: 99px; top: 441px; white-space: nowrap; }
.plate-card__dayval { left: 99px; top: 465px; white-space: nowrap; }
.ftrio { position: absolute; left: 64px; top: 1100px; display: grid; grid-template-columns: repeat(3, 400px); column-gap: 48px; }
.ftrio > div { padding-top: 23px; border-top: 1px solid #262421; }
.ftrio .t-strong { margin-bottom: 2px; }
.ftrio .t-body { color: #9c958a; }

/* ───────── 05 Mom Mode ───────── */
.mom__photo { position: absolute; left: 0; top: 0; width: 1440px; height: 701px; overflow: hidden; }
.mom__photo img { position: absolute; left: 0; top: 2.28%; width: 100%; height: 115.55%; }
.mom__shade { position: absolute; left: 0; top: 10px; width: 1440px; height: 691px; background: linear-gradient(to bottom, rgba(11,10,9,.1), #0b0a09 89.436%); }
.trans { position: absolute; left: 64px; top: 695px; width: 1312px; height: 560px; overflow: hidden; background: #131110; border: 1px solid #262421; border-radius: 28px; }
.trans > * { position: absolute; }
.trans__card { left: -1px; top: -1px; width: 560px; height: 560px; background: #efe6d6; }
.trans__head { top: 39px; font-weight: 500; font-size: 14px; line-height: 1.4; letter-spacing: -0.28px; white-space: nowrap; }
.trans__head--mom { left: 47px; color: #7a6650; }
.trans__head--tara { left: 639px; color: #9c958a; }
.trans__mom { left: 47px; width: 470px; font-family: "Delicious Handrawn", cursive; font-size: 38px; line-height: 1.1; color: #3b2c1e; }
.trans__tara { left: 639px; width: 420px; }
.trans__hint { left: 639px; width: 420px; font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: var(--accent); }
.trans__rule { left: -1px; width: 1312px; height: 1px; background: #262421; }

/* ───────── 06 Recipe parsing ───────── */
.player { position: absolute; left: 64px; top: 300px; width: 1312px; height: 420px; overflow: hidden; border-radius: 28px; }
.player > *:not(.cover) { position: absolute; }
.player__shade { inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.1) 30%, rgba(0,0,0,.88)); }
.player__link { left: 32px; top: 32px; padding: 10px 18px; border-radius: 999px; background: rgba(0,0,0,.7); font-size: 16px; line-height: 1.5; letter-spacing: -0.48px; color: var(--ink); white-space: pre; }
.player__reading { left: 32px; top: 300px; white-space: nowrap; }
.player__track { left: 32px; top: 360px; width: 1248px; height: 4px; border-radius: 2px; background: rgba(255,255,255,.25); }
.player__read { left: 32px; top: 360px; width: 773.76px; height: 4px; border-radius: 2px; background: #c77a4c; }
.chap { top: 356px; width: 12px; height: 12px; }
.chap img { position: absolute; left: -2px; top: -2px; width: 16px; height: 16px; }
.chap em { position: absolute; left: -8px; top: 20px; font-style: normal; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: var(--ink); opacity: .7; white-space: nowrap; }
.step-tick { position: absolute; top: 760px; width: 1px; height: 20px; background: rgba(199,122,76,.6); }
.step-tick--dim { background: rgba(199,122,76,.2); }
.step { position: absolute; top: 780px; width: 206px; height: 250px; overflow: hidden; background: #131110; border: 1px solid #262421; border-radius: 20px; }
.step > * { position: absolute; left: 19px; width: 170px; }
.step__n { top: 19px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: var(--accent); }
.step .t-h3 { top: 47px; }
.step__d { top: 149px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #9c958a; }
.step__w { top: 205px; font-size: 14px; line-height: 1.5; letter-spacing: -0.42px; color: #e8b58f; }
.step--todo { opacity: .45; }

/* ───────── 07 Family Mode ───────── */
.fam__label, .fam__title, .fam__foot { position: absolute; left: 0; width: 1440px; text-align: center; }
.fam__label { top: 0; }
.fam__title { top: 34px; }
.fam__intro { position: absolute; left: 400px; top: 240px; width: 640px; text-align: center; }
.fam__foot { top: 1276px; }
.fam { position: absolute; left: 64px; top: 418px; width: 1312px; display: flex; align-items: center; gap: 70px; padding: 28px 37px; background: #131110; border: 1px solid #262421; border-radius: 28px; }
.fam__legend { width: 304px; flex-shrink: 0; display: flex; flex-direction: column; gap: 55px; }
.person { display: flex; align-items: center; gap: 33px; padding: 10px; }
.person__dot { width: 38.07px; height: 36.5px; flex-shrink: 0; border-radius: 999px; }
.person > div { display: flex; flex-direction: column; gap: 6px; white-space: nowrap; }
.person .t-body { color: var(--ink); }
.person .t-body.person__alert { color: #e8b58f; }
.table { position: relative; flex-shrink: 0; width: 829px; height: 760px; overflow: hidden; border-radius: 28px; background: #13110f; }
.table__stage { position: absolute; left: 54.5px; top: 20px; width: 782px; height: 760px; overflow: hidden; border-radius: 28px; }
.table__light { position: absolute; left: -227.28px; top: 26.72px; width: 706.563px; height: 706.563px; display: flex; align-items: center; justify-content: center; mix-blend-mode: overlay; }
.table__light img { width: 500px; height: 500px; flex: none; transform: rotate(-47.25deg); }
.table__group { position: absolute; left: -31px; top: 25px; width: 832.5px; height: 703px; }
.table__pendant { position: absolute; left: 78.59px; top: 19.42px; width: 675.25px; height: 671.55px; opacity: .67; }
.table__top { position: absolute; left: 149px; top: 85px; width: 533px; height: 533px; }
.tobj { position: absolute; overflow: hidden; }
.tobj > img, .tobj i > img { position: absolute; max-width: none; }
.tobj--rot { overflow: visible; display: flex; align-items: center; justify-content: center; }
.tobj--rot i { position: relative; flex: none; overflow: hidden; transform: rotate(84.81deg); }
.table__fade {
  position: absolute; inset: 0; opacity: .72; pointer-events: none;
  background: radial-gradient(414.5px 380px at 50% 50%, rgba(19,17,15,0) 55%, rgb(19,17,16) 82%);
}
.chair {
  position: absolute; display: flex; align-items: center; gap: 9.25px; padding: 9.25px 16.65px 9.25px 9.25px;
  border-radius: 999px; background: #1e1a16; box-shadow: 0 3.7px 3.7px rgba(0,0,0,.25);
  font-weight: 500; font-size: 14.8px; line-height: 1.5; letter-spacing: -0.444px; color: var(--ink); white-space: nowrap;
}
.chair span { width: 29.6px; height: 29.6px; border-radius: 999px; display: flex; align-items: center; justify-content: center; }
.need {
  position: absolute; padding: 3.7px 9.25px; border-radius: 999px;
  background: rgba(11,10,9,.8); border: .925px solid rgba(237,232,222,.18);
  font-size: 12.95px; line-height: 1.5; letter-spacing: -0.3885px; color: var(--ink); white-space: nowrap;
}
.need--alert { background: #c77a4c; border: 0; color: #140d08; }

/* Skip rendering sections that are off screen (every section has a fixed height, so nothing shifts) */
.page--features > .fsec { content-visibility: auto; contain-intrinsic-size: auto 1440px auto 1200px; }
/* Family Mode: hovering a person highlights their seat (works with or without motion) */
.fam .person, .fam .chair, .fam .need { transition: filter .3s ease; }
.fam.has-focus .person:not(.is-focus),
.fam.has-focus .chair:not(.is-focus),
.fam.has-focus .need:not(.is-focus) { filter: opacity(.32); }
.person { cursor: default; }

/* ═════════ Section-specific motion ═════════
   Only under html.motion (skipped for reduced motion / no JS). Each block starts when
   features.js adds .play; --d delays are set per element in features.js.
   Transform/opacity/clip-path only, so scrolling stays smooth. */
@property --sweep { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.fline { display: block; }

/* Headlines: line by line */
.motion [data-split] .fline { transition: opacity .9s var(--ease), translate 1.1s var(--ease); transition-delay: calc(var(--l) * 110ms + 60ms); }
.motion [data-split]:not(.play) .fline { opacity: 0; translate: 0 .35em; }

/* Contents list: rows slide in top to bottom */
@keyframes f-rise { from { opacity: 0; translate: 0 26px; } to { opacity: 1; translate: 0 0; } }
.motion .frows:not(.play) .frow { opacity: 0; }
.motion .frows.play .frow { animation: f-rise .9s var(--ease) both; animation-delay: calc(var(--i) * 80ms + 200ms); }

/* Meal planning: the Wednesday swap plays out */
.motion .cal__voice { opacity: 0; scale: .9; transform-origin: 50% 0; transition: opacity .5s ease 1s, scale .7s var(--ease) 1s; }
.motion .cal__pointer { transform: scaleY(0); transform-origin: bottom; transition: transform .4s var(--ease) 1.45s; }
.motion .cal-day__was { position: relative; align-self: flex-start; text-decoration: none; opacity: 1; transition: opacity .4s ease 1.95s; }
.motion .cal-day__was::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease) 1.75s; }
.motion .cal-day__dish--new,
.motion .cal-day__dish--new + .cal-day__meta { opacity: 0; translate: 0 8px; transition: opacity .6s ease 2.2s, translate .8s var(--ease) 2.2s; }
.motion .cal__rule { transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) 2.5s; }
.motion .cal__foot { opacity: 0; transition: opacity .6s ease 2.9s; }
.motion .cal.play .cal__voice { opacity: 1; scale: 1; }
.motion .cal.play .cal__pointer,
.motion .cal.play .cal__rule { transform: none; }
.motion .cal.play .cal-day__was { opacity: .6; }
.motion .cal.play .cal-day__was::after { transform: scaleX(1); }
.motion .cal.play .cal-day__dish--new,
.motion .cal.play .cal-day__dish--new + .cal-day__meta { opacity: 1; translate: 0 0; }
.motion .cal.play .cal__foot { opacity: 1; }
@keyframes f-flash { 0% { box-shadow: inset 0 0 0 1.5px rgba(199,122,76,0); } 30% { box-shadow: inset 0 0 0 1.5px rgba(199,122,76,.75); } 100% { box-shadow: inset 0 0 0 1.5px rgba(199,122,76,0); } }
.motion .cal.play .cal-day:has(.cal-day__was) { animation: f-flash 1.8s ease 1.5s both; }
/* Halo behind the Tonight badge: scale + opacity only, so it never forces a repaint */
@keyframes f-halo { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(1.35, 1.7); opacity: 0; } }
.motion .cal-day__badge::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 999px; background: var(--accent); opacity: 0; }
.motion .cal.play .cal-day__badge::after { animation: f-halo 2.6s ease-out 3.4s infinite; }

/* Grocery: lines draw, pantry items strike, list ticks in (cart total counts up in JS) */
.motion .gro-line { transform: scaleX(0); transform-origin: left; transition: transform .6s var(--ease); transition-delay: var(--d, 0s); }
.motion .gro-line--v { transform: scaleY(0); transform-origin: top; }
.motion #f-grocery li.have s { position: relative; text-decoration: none; }
.motion #f-grocery li.have s::after { content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .4s var(--ease); transition-delay: var(--d, 0s); }
.motion #f-grocery .gro-list li { opacity: 0; translate: -10px 0; transition: opacity .4s ease, translate .6s var(--ease); transition-delay: var(--d, 0s); }
.motion #f-grocery.play .gro-line { transform: none; }
.motion #f-grocery.play li.have s::after { transform: scaleX(1); }
.motion #f-grocery.play .gro-list li { opacity: 1; translate: 0 0; }
@keyframes f-nudge { 0%, 100% { scale: 1; } 50% { scale: 1.05; } }
.motion #f-grocery.play .gro-approve__btn { animation: f-nudge .6s var(--ease) 3.5s 1; }

/* Nutrition: points pop with a soft ping, leaders draw, tags fade, bars fill, ring sweeps */
.motion .plate-pt { scale: 0; transition: scale .5s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--d, 0s); }
.motion .plate-lead { transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); transition-delay: var(--d, 0s); }
.motion .plate-tag { opacity: 0; translate: 10px 0; transition: opacity .5s ease, translate .7s var(--ease); transition-delay: var(--d, 0s); }
.motion .macro i::after { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); transition-delay: var(--d, 0s); }
.motion .plate-card__ring { -webkit-mask: conic-gradient(#000 var(--sweep), transparent 0); mask: conic-gradient(#000 var(--sweep), transparent 0); transition: --sweep 1.3s var(--ease) 1.7s; }
.motion .plate.play .plate-pt { scale: 1; }
.motion .plate.play .plate-lead { transform: none; }
.motion .plate.play .plate-tag { opacity: 1; translate: 0 0; }
.motion .plate.play .macro i::after { transform: none; }
.motion .plate.play .plate-card__ring { --sweep: 360deg; }
/* The ring around each point breathes: scale + opacity only, so it never forces a repaint */
@keyframes f-breathe { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: .45; } }
.motion .plate.play .plate-pt::after { animation: f-breathe 2.8s ease-in-out infinite; animation-delay: calc(var(--d, 0s) + .6s); }

/* Mom Mode: Mom's words appear as if handwritten, then Tara's version slides in */
.motion .trans__mom { clip-path: inset(-15% 100% -15% 0); transition: clip-path 1.1s cubic-bezier(.45, .05, .35, 1); transition-delay: var(--d, 0s); }
.motion .trans__tara, .motion .trans__hint { opacity: 0; translate: -14px 0; transition: opacity .6s ease, translate .8s var(--ease); transition-delay: var(--d, 0s); }
.motion .trans__rule { transform: scaleX(0); transform-origin: left; transition: transform 1s var(--ease); transition-delay: var(--d, 0s); }
.motion .trans.play .trans__mom { clip-path: inset(-15% -4% -15% 0); }
.motion .trans.play .trans__tara, .motion .trans.play .trans__hint { opacity: 1; translate: 0 0; }
.motion .trans.play .trans__rule { transform: none; }

/* Recipe parsing: the read bar runs, chapters light as it passes, steps follow */
.motion .player__read { transform: scaleX(0); transform-origin: left; transition: transform 3s linear .4s; }
.motion .chap img { opacity: .25; scale: .6; transition: opacity .3s ease, scale .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: var(--d, 0s); }
.motion .chap em { opacity: 0; transition: opacity .4s ease; transition-delay: var(--d, 0s); }
.motion .step { opacity: 0; translate: 0 18px; transition: opacity .6s ease, translate .8s var(--ease); transition-delay: var(--d, 0s); }
.motion .step-tick { transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); transition-delay: var(--d, 0s); }
.motion .player.play .player__read { transform: none; }
.motion .player.play .chap img { opacity: 1; scale: 1; }
.motion .player.play .chap em { opacity: .7; }
.motion .player.play ~ .step { opacity: 1; translate: 0 0; }
.motion .player.play ~ .step--todo { opacity: .45; }
.motion .player.play ~ .step-tick { transform: none; }
@keyframes f-blink { from { opacity: 1; } to { opacity: .35; } }
.motion .player.play .player__reading { animation: f-blink .75s ease-in-out .4s 4 alternate; }

/* Family Mode: the table settles under the light, chairs pop in clockwise */
.motion .table__top { opacity: 0; transform: rotate(-10deg) scale(.94); transition: opacity 1s ease .2s, transform 1.6s var(--ease) .2s; }
.motion .table__pendant { opacity: 0; transition: opacity 1.6s ease .1s; }
.motion .table__light { opacity: 0; transition: opacity 1.6s ease .3s; }
.motion .chair, .motion .need { opacity: 0; scale: .85; transition: opacity .5s ease, scale .6s cubic-bezier(.34, 1.56, .64, 1), filter .3s ease; transition-delay: var(--d, 0s), var(--d, 0s), 0s; }
.motion .person { transition: opacity 1s var(--ease), transform 1.1s var(--ease), filter .3s ease; transition-delay: var(--d, 0ms), var(--d, 0ms), 0s; }
.motion .fam.play .table__top { opacity: 1; transform: none; }
.motion .fam.play .table__pendant { opacity: .67; }
.motion .fam.play .table__light { opacity: 1; }
.motion .fam.play .chair, .motion .fam.play .need { opacity: 1; scale: 1; }