/* ============================================================
   style.css — linkme
   همه مقادیر از DESIGN.md می‌آیند و به شکل توکن در :root نشسته‌اند.
   هیچ رنگ، اندازه، شعاع یا زمانی خارج از توکن‌ها استفاده نمی‌شود.
   ============================================================ */

/* ---------- فونت مدام — self-host، بدون هیچ درخواست بیرونی ---------- */
@font-face{font-family:'Modam';src:url(../fonts/Modam-300.woff2) format('woff2');font-weight:300;font-style:normal;font-display:block}
@font-face{font-family:'Modam';src:url(../fonts/Modam-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:'Modam';src:url(../fonts/Modam-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:block}
@font-face{font-family:'Modam';src:url(../fonts/Modam-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:block}

/* ============================================================
   ۱ · توکن‌ها
   ============================================================ */
:root{

  /* --- رنگ — DESIGN.md §۱ --- */
  --bg:          #0b0c0d;
  --surface-1:   #131516;
  --surface-2:   #1A1D1E;
  --surface-3:   #1E2223;
  --surface-inv: #F3F3F3;

  --line-faint:  #1c1f20;
  --line:        #24282A;
  --line-mid:    #2E3133;
  --line-hover:  #3a3f41;

  --text-1:      #F3F3F3;
  --text-2:      #C9C8C6;
  --text-3:      #9A999A;
  --text-4:      #737475;
  --text-5:      #515356;
  --text-6:      #3f4344;
  --text-on-inv: #58575A;

  --accent:      #ECA72C;
  /* فقط و فقط برای خطا. هیچ‌جای دیگری از این رنگ استفاده نشود. */
  --danger:      #E0574A;
  --danger-line: #7A2C25;

  /* --- تایپوگرافی — DESIGN.md §۲ --- */
  --font:        'Modam', Tahoma, sans-serif;

  --w-light:     300;
  --w-regular:   400;
  --w-medium:    500;
  --w-bold:      700;

  --fs-hero:     22px;  --lh-hero:  1.55;  /* جمله ارزشی */
  --fs-title:    19px;  --lh-title: 1.50;  /* عنوان نما · سوال فرم */
  --fs-cta:      16px;  --lh-cta:   1.40;  /* عنوان CTA */
  --fs-name:     14px;  --lh-name:  1.50;  /* نام، عنوان کارت */
  --fs-row:      13px;  --lh-row:   1.60;  /* ردیف، دکمه انتخابی، فیلد */
  --fs-sub:      13px;  --lh-sub:   1.90;  /* زیرنویس توضیحی */
  --fs-subsm:    12px;  --lh-subsm: 1.90;  /* زیرنویس نمای فرعی */
  --fs-card:     11px;  --lh-card:  1.70;  /* توضیح کارت، نقش، برچسب */
  --fs-mini:     10px;  --lh-mini:  1.90;  /* برچسب ریز، راهنما */
  --fs-foot:      9px;  --lh-foot:  1.70;  /* فوتر */
  /* توجه: در برچسب‌های تک‌خطی (نقش، پیل، ردیف، فیلد، فوتر، عنوان CTA)
     reference.html خط را `normal` گذاشته و همان دنبال شده تا خروجی
     عیناً با مرجع بصری یکی باشد. توکن‌های بالا برای متن‌های چندخطی
     استفاده می‌شوند. این تنها اختلاف DESIGN.md و reference.html است. */

  /* --- فاصله و اندازه — DESIGN.md §۳ --- */
  --sp-1:         1px;   /* فاصله مویی جعبه جزئیات */
  --sp-4:         4px;   /* واحد پایه */
  --sp-7:         7px;   /* گپ ردیف‌ها، دکمه‌ها، نقطه‌ها */
  --sp-9:         9px;
  --sp-10:       10px;
  --sp-11:       11px;
  --sp-12:       12px;
  --sp-13:       13px;
  --sp-15:       15px;
  --sp-16:       16px;
  --sp-17:       17px;
  --sp-18:       18px;
  --sp-20:       20px;
  --sp-21:       21px;
  --sp-22:       22px;

  --pad-app-y:   var(--sp-22);
  --pad-app-x:   var(--sp-20);
  --pad-page:    var(--sp-10);

  --w-max:      392px;
  --h-max:      800px;
  --h-app:      100dvh;      /* الزاماً dvh، هرگز vh */

  --size-avatar: 40px;
  --size-arrow:  31px;
  --size-dot:     5px;
  --size-tick:   22px;   /* تیک تأیید کنار عنوان */
  --size-glow:  250px;
  --size-grain: 180px;

  --bw:          1px;        /* ضخامت حاشیه */
  --bw-accent:   2px;        /* خط طلایی هاور — سقف مجاز اکسنت */

  /* --- شعاع — DESIGN.md §۳ --- */
  --r-app:       20px;
  --r-card:      16px;
  --r-avatar:    14px;
  --r-row:       13px;
  --r-field:     12px;
  --r-chip:      11px;
  --r-pill:      20px;
  --r-circle:    50%;

  /* --- موشن — DESIGN.md §۴ --- */
  --ease:        cubic-bezier(.22, 1, .36, 1);
  --t-boot:      750ms;
  --t-boot-step:  80ms;
  --t-view:      260ms;
  --t-cta:       650ms;
  --t-card:      500ms;
  --t-field:     400ms;
  --t-dot:       400ms;
  --t-active:    140ms;
  --t-underline: 1100ms;
  --t-ring:      3400ms;

  --shift-view:  24px;       /* جابه‌جایی افقی گذار نما */
  --shift-boot:  14px;       /* جابه‌جایی عمودی ورود اولیه */
  --blur-boot:    6px;
  --lift-cta:     3px;       /* بالا آمدن CTA در هاور */
  --shift-arrow:  6px;
  --shift-chev:   5px;

  --shadow-cta:  0 14px 38px rgba(0,0,0,.5);
  --glow-cta:    radial-gradient(circle, rgba(236,167,44,.3), transparent 62%);
  --op-grain:    .05;
  --op-underline:.75;
  --op-tick-ring:.45;    /* دایره دور تیک، کم‌رنگ‌تر از خود تیک */
}

/* ============================================================
   ۲ · پایه
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}

::selection{background:var(--accent);color:var(--surface-1)}

html,body{height:100%;overflow:hidden}

body{
  background:var(--bg);
  font-family:var(--font);
  direction:rtl;
  -webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;
  padding:var(--pad-page);
}

button{font-family:inherit;background:none;border:none;color:inherit;cursor:pointer;text-align:right}

/* DESIGN.md توکنی برای حلقه فوکوس ندارد. نزدیک‌ترین توکنِ به‌قدر کافی
   دیده‌شونده --text-3 است. طلایی عمداً استفاده نشده تا سهمیه اکسنت نشکند. */
:focus-visible{outline:var(--bw-accent) solid var(--text-3);outline-offset:var(--bw-accent)}

.sr-live{position:absolute;width:var(--bw);height:var(--bw);overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.grain{
  position:fixed;inset:0;z-index:9;pointer-events:none;
  opacity:var(--op-grain);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:var(--size-grain);
}

.app{
  width:100%;max-width:var(--w-max);
  height:var(--h-app);max-height:var(--h-max);
  background:var(--surface-1);
  border-radius:var(--r-app);
  padding:var(--pad-app-y) var(--pad-app-x);
  display:flex;flex-direction:column;
  overflow:hidden;position:relative;
}

/* ============================================================
   ۳ · سربرگ ثابت
   ============================================================ */
.hd{display:flex;align-items:center;justify-content:space-between;flex:none;margin-bottom:auto}
.id{display:flex;align-items:center;gap:var(--sp-10)}

.ava{
  width:var(--size-avatar);height:var(--size-avatar);
  border-radius:var(--r-avatar);
  background:var(--surface-3);border:var(--bw) solid var(--line-mid);
  color:var(--text-4);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-foot);flex:none;overflow:hidden;
}
.ava img{width:100%;height:100%;object-fit:cover;display:block}

.nm{font-size:var(--fs-name);font-weight:var(--w-medium);color:var(--text-1);line-height:var(--lh-name)}
.rl{font-size:var(--fs-card);font-weight:var(--w-regular);color:var(--text-4);line-height:normal}

/* پیل وضعیت — فقط نمای خانه */
.pill{
  display:flex;align-items:center;gap:var(--sp-7);
  background:var(--surface-3);border:var(--bw) solid var(--line-mid);
  border-radius:var(--r-pill);padding:calc(var(--sp-4) + var(--sp-1) * 2) var(--sp-11);
}
.pill span{font-size:var(--fs-mini);font-weight:var(--w-regular);color:var(--text-3);line-height:normal}
.dot{position:relative;width:var(--size-dot);height:var(--size-dot);border-radius:var(--r-circle);background:var(--accent);flex:none}
.dot::after{
  content:'';position:absolute;inset:calc(var(--sp-1) * -3);
  border-radius:var(--r-circle);border:var(--bw) solid var(--accent);
  opacity:0;animation:ring var(--t-ring) var(--ease) infinite;
}
@keyframes ring{0%{transform:scale(.6);opacity:.65}70%{transform:scale(1.9);opacity:0}100%{opacity:0}}

/* دکمه بازگشت — بقیه نماها */
.bk{
  display:none;align-items:center;gap:var(--sp-7);
  background:var(--surface-2);border:var(--bw) solid var(--line);
  border-radius:var(--r-pill);padding:calc(var(--sp-4) + var(--sp-1) * 2) var(--sp-12);
  font-size:var(--fs-card);font-weight:var(--w-regular);color:var(--text-3);
  line-height:normal;
  transition:border-color var(--t-card) var(--ease);
}
.bk.on{display:flex}
.bk:hover{border-color:var(--line-hover)}

/* ============================================================
   ۴ · نماها و گذار
   ============================================================ */
.stage{position:relative;flex:none}

/* visibility علاوه بر opacity لازم است: بدون آن، دکمه‌های نماهای پنهان
   با کلید Tab هنوز قابل رسیدن‌اند. تأخیرش برابر مدت گذار است تا
   محو شدن دیده شود. */
.v{
  position:absolute;right:0;left:0;bottom:0;
  opacity:0;transform:translateX(calc(var(--shift-view) * -1));
  pointer-events:none;visibility:hidden;
  transition:opacity var(--t-view) var(--ease), transform var(--t-view) var(--ease), visibility 0s linear var(--t-view);
}
.v.on{
  opacity:1;transform:none;pointer-events:auto;position:relative;visibility:visible;
  transition:opacity var(--t-view) var(--ease), transform var(--t-view) var(--ease), visibility 0s linear 0s;
}
.v.pre{transform:translateX(var(--shift-view))}

/* ============================================================
   ۵ · نمای خانه
   ============================================================ */
.hero{
  font-size:var(--fs-hero);font-weight:var(--w-bold);color:var(--text-1);
  line-height:var(--lh-hero);margin-bottom:calc(var(--sp-4) * 2);
}
.lit{position:relative;display:inline-block}
.lit::after{
  content:'';position:absolute;right:0;bottom:calc(var(--bw) * -2);
  height:var(--bw);width:0;background:var(--accent);opacity:var(--op-underline);
  transition:width var(--t-underline) var(--ease) calc(var(--t-boot) - var(--t-boot-step) * 2);
}
.go .lit::after{width:100%}

.sub{
  font-size:var(--fs-sub);font-weight:var(--w-light);color:var(--text-4);
  line-height:var(--lh-sub);margin-bottom:var(--sp-22);
}

/* --- CTA اصلی — حداکثر یکی در هر نما، تنها سطح روشن صفحه --- */
.cta{
  position:relative;overflow:hidden;width:100%;
  display:flex;justify-content:space-between;align-items:flex-start;
  background:var(--surface-inv);border-radius:var(--r-card);
  padding:var(--sp-17) var(--sp-18);
  transition:transform var(--t-cta) var(--ease), box-shadow var(--t-cta) var(--ease);
}
.cta.spaced{margin-top:var(--sp-9)}
.cta .glow{
  position:absolute;width:var(--size-glow);height:var(--size-glow);
  border-radius:var(--r-circle);background:var(--glow-cta);
  pointer-events:none;opacity:0;transform:translate(-50%,-50%);
  transition:opacity var(--t-cta) var(--ease);
}
.cta:hover{transform:translateY(calc(var(--lift-cta) * -1));box-shadow:var(--shadow-cta)}
.cta:hover .glow{opacity:1}
.cta:active{transform:scale(.985);transition-duration:var(--t-active)}
.cta>div{position:relative;z-index:1}
.cta-t{font-size:var(--fs-cta);font-weight:var(--w-bold);color:var(--surface-1);line-height:normal;margin-bottom:var(--sp-4)}
.cta-s{font-size:var(--fs-card);font-weight:var(--w-regular);color:var(--text-on-inv);line-height:var(--lh-card)}
.arw{
  width:var(--size-arrow);height:var(--size-arrow);
  border-radius:var(--r-chip);background:var(--surface-1);color:var(--text-1);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-row);flex:none;
  transition:transform var(--t-cta) var(--ease);
}
.cta:hover .arw{transform:translateX(calc(var(--shift-arrow) * -1))}

.after{
  font-size:var(--fs-mini);font-weight:var(--w-regular);color:var(--text-5);
  line-height:var(--lh-mini);padding:var(--sp-9) var(--sp-4) 0;text-align:center;
}

.lbl{
  font-size:var(--fs-mini);font-weight:var(--w-regular);color:var(--text-5);
  line-height:normal;margin:var(--sp-20) 0 var(--sp-9);padding-right:calc(var(--sp-1) * 2);
}

/* --- ردیف لینک --- */
.rows{display:flex;flex-direction:column;gap:var(--sp-7)}
.row{
  width:100%;
  background:var(--surface-2);border:var(--bw) solid var(--line);
  border-radius:var(--r-row);padding:var(--sp-13) var(--sp-16);
  display:flex;justify-content:space-between;align-items:center;
  text-decoration:none;
  transition:background var(--t-card) var(--ease), border-color var(--t-card) var(--ease), padding-right var(--t-card) var(--ease);
}
.row:hover{background:var(--surface-3);border-color:var(--line-hover);padding-right:var(--sp-21)}
.row:active{transform:scale(.99)}
.row span{font-size:var(--fs-row);font-weight:var(--w-regular);color:var(--text-2);line-height:normal;transition:color var(--t-card) var(--ease)}
.row:hover span{color:var(--text-1)}
.row b{font-size:var(--fs-subsm);font-weight:var(--w-regular);color:var(--text-5);transition:transform var(--t-cta) var(--ease), color var(--t-card) var(--ease)}
.row:hover b{transform:translateX(calc(var(--shift-chev) * -1));color:var(--text-3)}

/* ============================================================
   ۶ · نماهای فرعی
   ============================================================ */
.vt{font-size:var(--fs-title);font-weight:var(--w-bold);color:var(--text-1);line-height:var(--lh-title);margin-bottom:var(--sp-7)}
.vs{font-size:var(--fs-subsm);font-weight:var(--w-light);color:var(--text-4);line-height:var(--lh-subsm);margin-bottom:var(--sp-18)}

/* --- جعبه جزئیات --- */
.det{
  display:flex;flex-direction:column;gap:var(--sp-1);
  background:var(--line);border:var(--bw) solid var(--line);
  border-radius:var(--r-row);overflow:hidden;margin-bottom:var(--sp-16);
}
.dr{display:flex;justify-content:space-between;align-items:center;background:var(--surface-2);padding:var(--sp-12) var(--sp-15)}
.dr span{font-size:var(--fs-card);font-weight:var(--w-regular);color:var(--text-4);line-height:normal}
.dr b{font-size:var(--fs-subsm);font-weight:var(--w-medium);color:var(--text-1);line-height:normal}

/* --- فیلد فرم — حداکثر دو تا در یک نما --- */
.fld{
  width:100%;
  background:var(--surface-2);border:var(--bw) solid var(--line);
  border-radius:var(--r-field);padding:var(--sp-13) var(--sp-15);
  font-family:inherit;font-size:var(--fs-row);font-weight:var(--w-regular);
  line-height:normal;color:var(--text-1);
  margin-bottom:var(--sp-7);
  transition:border-color var(--t-field) var(--ease);
}
.fld::placeholder{color:var(--text-5)}
.fld:focus{outline:none;border-color:var(--line-hover)}
.fld.bad{border-color:var(--danger-line)}
.fld.bad:focus{border-color:var(--danger)}

.note{
  font-size:var(--fs-mini);font-weight:var(--w-regular);color:var(--text-6);
  line-height:var(--lh-mini);text-align:center;margin-top:var(--sp-9);
}
.hint{
  font-size:var(--fs-mini);font-weight:var(--w-regular);color:var(--text-5);
  line-height:var(--lh-mini);margin-top:var(--sp-9);
}
.hint:empty{display:none}
/* هر خطایی در کل صفحه همین شکل را دارد: متن قرمز، بالای دکمه */
.hint.err{color:var(--danger);margin:var(--sp-4) 0 var(--sp-10);padding-right:calc(var(--sp-1) * 2)}

/* تله اسپم — کاملاً از چشم و از صفحه‌خوان پنهان، ولی برای ربات پرکردنی */
.hp-wrap{position:absolute;width:var(--bw);height:var(--bw);overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none}

/* حالت «در حال ارسال» — بدون رنگ یا اندازه جدید، فقط کم‌رنگ و غیرفعال */
.cta.busy{opacity:.6;pointer-events:none}

/* ============================================================
   ۷ · نماهای مرحله‌ای
   ============================================================ */
.dots{display:flex;gap:var(--sp-7);margin-bottom:var(--sp-13)}
.dt{width:var(--size-dot);height:var(--size-dot);border-radius:var(--r-circle);background:var(--line-mid);transition:background var(--t-dot) var(--ease)}
.dt.on{background:var(--accent)}

/* دکمه انتخابی — همان ردیف لینک با نقش دیگر */
.chs{display:flex;flex-direction:column;gap:var(--sp-7)}
.ch{
  width:100%;
  background:var(--surface-2);border:var(--bw) solid var(--line);
  border-radius:var(--r-row);padding:var(--sp-13) var(--sp-16);
  display:flex;justify-content:space-between;align-items:center;
  font-size:var(--fs-row);font-weight:var(--w-regular);color:var(--text-2);
  line-height:normal;
  transition:background var(--t-card) var(--ease), border-color var(--t-card) var(--ease), padding-right var(--t-card) var(--ease), color var(--t-card) var(--ease);
}
.ch:hover{background:var(--surface-3);border-color:var(--line-hover);padding-right:var(--sp-21);color:var(--text-1)}
.ch:active{transform:scale(.99)}
.ch b{font-size:var(--fs-subsm);font-weight:var(--w-regular);color:var(--text-5)}

.done{font-size:var(--fs-title);font-weight:var(--w-bold);color:var(--text-1);line-height:var(--lh-title);margin-bottom:var(--sp-7)}
.done.withtick{display:flex;align-items:center;gap:var(--sp-9)}
.tick{width:var(--size-tick);height:var(--size-tick);flex:none;fill:none;stroke:var(--accent);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.tick circle{opacity:var(--op-tick-ring)}

/* لینک‌های بعد از تأیید — با فاصله، تا به پیام تأیید نچسبند */
.tail{margin-top:var(--sp-22)}
.tail .lbl{margin-top:0}

/* ============================================================
   ۷.۵ · تقویم شمسی و ساعت‌ها
   خانه تقویم و چیپ ساعت، همان زبان بصری «دکمه انتخابی»‌اند —
   همان سطح، همان حاشیه، همان شعاع — فقط در شبکه چیده شده‌اند.
   ============================================================ */
.calhd{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--sp-13)}
.calhd b{font-size:var(--fs-name);font-weight:var(--w-medium);color:var(--text-1);line-height:normal}
.calnav{display:flex;gap:var(--sp-7)}
.calbtn{
  width:var(--size-arrow);height:var(--size-arrow);
  background:var(--surface-2);border:var(--bw) solid var(--line);
  border-radius:var(--r-chip);color:var(--text-3);
  font-size:var(--fs-row);line-height:normal;
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--t-card) var(--ease), color var(--t-card) var(--ease);
}
.calbtn:hover{border-color:var(--line-hover);color:var(--text-1)}

.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:var(--sp-7)}
.cal .wd{
  font-size:var(--fs-mini);font-weight:var(--w-regular);color:var(--text-5);
  line-height:normal;text-align:center;padding-bottom:var(--sp-4);
}
.cal .gap{visibility:hidden}
.cal .d{
  aspect-ratio:1;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border:var(--bw) solid var(--line);
  border-radius:var(--r-field);
  font-size:var(--fs-row);font-weight:var(--w-regular);color:var(--text-2);
  line-height:normal;
  transition:background var(--t-card) var(--ease), border-color var(--t-card) var(--ease), color var(--t-card) var(--ease);
}
.cal .d:hover:not(.off){background:var(--surface-3);border-color:var(--line-hover);color:var(--text-1)}
.cal .d:active:not(.off){transform:scale(.95)}
/* روز غیرقابل رزرو: خاموش ولی هنوز خوانا، تا معلوم باشد روز هست نه خالی */
.cal .d.off{background:transparent;border-color:var(--line-faint);color:var(--text-6);cursor:default}

.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-7)}
.slot{
  background:var(--surface-2);border:var(--bw) solid var(--line);
  border-radius:var(--r-row);padding:var(--sp-13) var(--sp-4);
  font-size:var(--fs-row);font-weight:var(--w-regular);color:var(--text-2);
  line-height:normal;text-align:center;
  transition:background var(--t-card) var(--ease), border-color var(--t-card) var(--ease), color var(--t-card) var(--ease);
}
.slot:hover:not(.off){background:var(--surface-3);border-color:var(--line-hover);color:var(--text-1)}
.slot:active:not(.off){transform:scale(.98)}
.slot.off{background:transparent;border-color:var(--line-faint);color:var(--text-6);cursor:default;text-decoration:line-through}
.slot.busy{opacity:.6;pointer-events:none}

/* خط تاریخِ تأییدشده در نمای پایانی */
/* متن طلایی در DESIGN.md §۱ ممنوع است، پس تاریخ با --text-1 نوشته می‌شود */
.vt2{font-size:var(--fs-name);font-weight:var(--w-medium);color:var(--text-1);line-height:var(--lh-name);margin-bottom:var(--sp-7)}
.vt2:empty{display:none}

/* ============================================================
   ۸ · فوتر ثابت
   ============================================================ */
.ft{
  flex:none;margin-top:auto;padding-top:var(--sp-16);
  border-top:var(--bw) solid var(--line-faint);
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:env(safe-area-inset-bottom);
}
.ft span{font-size:var(--fs-foot);font-weight:var(--w-regular);color:var(--text-6);line-height:normal}

/* ============================================================
   ۹ · ورود اولیه پلکانی
   ============================================================ */
.boot{opacity:0;transform:translateY(var(--shift-boot));filter:blur(var(--blur-boot))}
.go .boot{
  opacity:1;transform:none;filter:none;
  transition:opacity var(--t-boot) var(--ease), transform var(--t-boot) var(--ease), filter var(--t-boot) var(--ease);
}
.go .b1{transition-delay:calc(var(--t-boot-step) * .6)}
.go .b2{transition-delay:calc(var(--t-boot-step) * 1.7)}
.go .b3{transition-delay:calc(var(--t-boot-step) * 3)}
.go .b4{transition-delay:calc(var(--t-boot-step) * 4)}

@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .boot{opacity:1;transform:none;filter:none}
  .lit::after{width:100%}
}