/* Дерево «Моего дня» (А5б, акварель - выбор Ирины 21.10.2026; эскизы: business/assets/tree-sketches/).
   Цвета - оливковый и беж брендбука, их оттенки и горчичный. Задержки анимаций - классами (CSP style-src 'self').
   prefers-reduced-motion - всё стоит, картинка та же. */

/* шапка «Моего дня»: дерево - фон справа, высоту карточки не меняет, список звонков не сдвигает */
.card.dayhead { position:relative; overflow:hidden; min-height:200px; }
.dayhead > :not(svg) { position:relative; z-index:2; }
.dayhead h1, .dayhead .muted, .dayhead .hint, .dayhead .big, .dayhead .mood { max-width:calc(100% - 200px); }
.dayhead svg.tree { position:absolute; z-index:1; right:-6px; bottom:-8px; width:240px; height:240px; overflow:visible; pointer-events:none;
  -webkit-mask-image:radial-gradient(80% 80% at 58% 55%, #000 64%, transparent 100%); mask-image:radial-gradient(80% 80% at 58% 55%, #000 64%, transparent 100%); }
.dayhead .mood { font-weight:600; color:var(--olive); margin:6px 0 0; }
.dayhead .wow { font-weight:800; font-size:1.1rem; color:var(--olive); }
.dayhead.bloom { background:radial-gradient(70% 120% at 85% 65%, #f6f0d8 0%, #fbf8ec 45%, #fff 85%); }
.dayhead.bloom .mood { color:#8A6E1E; }
.dayhead.wilt { background:radial-gradient(55% 85% at 82% 58%, #c6c3ba 0%, #d6d4cd 30%, #e8e7e2 58%, #f7f6f3 82%, #fff 100%); }
.dayhead.wilt .mood { color:#5a5446; }
.dayhead .words { max-width:calc(100% - 200px); margin:10px 0 2px; padding:10px 14px; border-left:3px solid #C9A646;
  background:rgba(255,250,232,.92); border-radius:0 10px 10px 0; font-style:italic; line-height:1.45; color:#4a4536; }
.dayhead.win { background:radial-gradient(70% 120% at 85% 65%, #f5e6b4 0%, #faf1d6 45%, #fff 85%); }
@media (max-width:599px) {
  .card.dayhead { min-height:150px; }
  .dayhead svg.tree { width:140px; height:140px; right:-10px; }
  .dayhead h1, .dayhead .muted, .dayhead .big, .dayhead .mood { max-width:calc(100% - 104px); }
  .dayhead .hint { max-width:none; }
  .dayhead .words { max-width:calc(100% - 96px); }
  /* росток и саженец на телефоне в 2 раза крупнее - иначе сияние и засыхание не разглядеть (Ирина, И33); шапка той же высоты */
  .dayhead.young svg.tree { width:280px; height:280px; right:-80px; bottom:-16px; }
}

/* крона: покачивание */
.tree .crown { transform-origin:100px 186px; transform-box:view-box; }
.tree.bloom .crown { animation:tr-sway 8s ease-in-out infinite; }
.tree.wait .crown { animation:tr-sway-w 10s ease-in-out infinite; }
.tree.wilt .crown { animation:tr-droop 10s ease-in-out infinite; }
@keyframes tr-sway { 0%,100% { rotate:-3.2deg } 50% { rotate:3.6deg } }
@keyframes tr-sway-w { 0%,100% { rotate:-2deg } 50% { rotate:2.4deg } }
@keyframes tr-droop { 0%,100% { rotate:-1deg } 50% { rotate:-3.4deg } }

/* акварель: ствол, мазки кроны (свет, середина, тень), блики, брызги, трава */
.wshadow { fill:#6B7350; opacity:.25; filter:blur(3px); }
.wtrunk { fill:#3F3A2E; } .wtrunk-l { fill:none; stroke:#9A8A62; stroke-width:1.6; stroke-linecap:round; opacity:.6; }
.wtwig { fill:none; stroke:#3F3A2E; stroke-width:1.3; stroke-linecap:round; opacity:.85; }
.dl { opacity:.6; filter:blur(.35px); } .dm { opacity:.78; mix-blend-mode:multiply; } .dd { opacity:.72; mix-blend-mode:multiply; }
.dl.c1 { fill:#C2CC8A; } .dl.c2 { fill:#D9D4A0; } .dl.c3 { fill:#B3BE80; }
.dm.c1 { fill:#8FA052; } .dm.c2 { fill:#7A9046; } .dm.c3 { fill:#A3B565; }
.dd.c1 { fill:#4F5E36; } .dd.c2 { fill:#3E4A2E; } .dd.c3 { fill:#5E703E; }
.dh { fill:#F4EFD4; opacity:.8; }
.wsplash { opacity:.6; } .wsplash.c1 { fill:#8FA052; } .wsplash.c2 { fill:#C2CC8A; } .wsplash.c3 { fill:#C9B48A; }
.grass { stroke:#6E7A45; stroke-width:1.2; stroke-linecap:round; fill:none; }
.bloom .dm, .bloom .dl { filter:saturate(1.15); }

/* росток и саженец: акварельный лист в раскраске взрослого дерева */
.wl5 .c1 { fill:#C2CC8A; opacity:.5; }
.wl5 .c7 { fill:#B3BE80; opacity:.3; filter:blur(1.3px); }
.wl5 .c2 { fill:#5E703E; opacity:.28; filter:blur(1.4px); mix-blend-mode:multiply; }
.wl5 .c3 { fill:none; stroke:#4F5E36; stroke-width:.9; opacity:.55; }
.wl5 .c4 { fill:none; stroke:#4F5E36; stroke-width:.55; opacity:.35; stroke-linecap:round; stroke-dasharray:10 1.2 14 .8; }
.wl5 .c4b { fill:none; stroke:#4F5E36; stroke-width:.55; opacity:.35; stroke-linecap:round; stroke-dasharray:6 1.4 9 1; }
.wl5 .c5 { fill:none; stroke:#3E4A2E; stroke-width:.8; opacity:.55; stroke-linecap:round; }
.wl5 .c6 { fill:#8FA052; stroke:#4F5E36; stroke-width:.5; opacity:.7; }
.wl5 .c9 { fill:#F4EFD4; stroke:#4F5E36; stroke-width:.5; opacity:.5; filter:blur(.35px); }
.ws5 { fill:#4A4232; opacity:.92; } .ws5e { stroke:#9A8A62; stroke-width:.5; opacity:.5; fill:none; }
.wst.a { fill:none; stroke:#4A4232; stroke-linecap:round; opacity:.75; filter:blur(.3px); }
.wst.b { fill:none; stroke:#9A8A62; stroke-linecap:round; opacity:.45; filter:blur(.5px); }

/* цветы и плоды */
.wfl circle { fill:#FFFFFF; stroke:#D4BC72; stroke-width:.45; } .wfl .wcore { fill:#B8962E; stroke:none; }
.wfr circle { fill:#C99A2E; stroke:#7A5F14; stroke-width:.8; } .wfr .wshine { fill:#FFF4D2; stroke:none; opacity:.85; }
.wstem { stroke:#3E4A2E; stroke-width:1.2; stroke-linecap:round; }

/* всё готово: мягкое сияние, искры, облачка */
.halo { fill:url(#glow); transform-origin:104px 90px; transform-box:view-box; animation:tr-halo 6s ease-in-out infinite; }
.halo.soft { animation:tr-halo-soft 8s ease-in-out infinite; }
.halo.soft.young { animation:tr-halo 6s ease-in-out infinite; }   /* росток и саженец: сияние ярче, иначе «всё сделано» не отличить от «ждут» (И32) */
@keyframes tr-halo { 0%,100% { opacity:.75; scale:1 } 50% { opacity:1; scale:1.06 } }
@keyframes tr-halo-soft { 0%,100% { opacity:.4 } 50% { opacity:.6 } }
.star { fill:#F1DE96; stroke:#B8962E; stroke-width:.4; opacity:0; animation:tr-twinkle 3.2s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
@keyframes tr-twinkle { 0%,100% { opacity:0; scale:.4 } 50% { opacity:1; scale:1.1 } }
.sd1 { animation-delay:.6s; } .sd2 { animation-delay:1.2s; } .sd3 { animation-delay:1.8s; } .sd4 { animation-delay:2.4s; }
.cl { fill:#EFE6D0; opacity:.75; filter:blur(2px); } .cl-u { fill:#D6C8A6; opacity:.45; filter:blur(2.4px); }
.cloud { animation:tr-cloud 16s ease-in-out infinite alternate; }
.cloud.ci1 { animation-delay:-5s; } .cloud.ci2 { animation-delay:-10s; }
@keyframes tr-cloud { from { translate:-6px 0 } to { translate:7px -1px } }

/* клиент вернулся: лучи, искры, крона подрастает, цветы распускаются по очереди */
.rays path { fill:url(#ray); } .rays { opacity:.55; transform-origin:104px 90px; transform-box:view-box; animation:tr-spin 60s linear infinite; }
@keyframes tr-spin { to { rotate:360deg } }
.tree.grow .crown { animation:tr-grow 3.6s ease-in-out 3 both, tr-sway 8s ease-in-out 10.8s infinite; }   /* три плавных вдоха, потом обычное покачивание; сильнее .bloom/.wait: ниже в файле */
@keyframes tr-grow { 0%,100% { scale:1 } 50% { scale:1.1 } }   /* вырастает и так же плавно возвращается - без скачка (Ирина, 21.10.2026) */
.spark { fill:#B8962E; opacity:0; animation:tr-spark 4s ease-out infinite; }
@keyframes tr-spark { 0%,20% { opacity:0; translate:0 0; scale:.3 } 30% { opacity:1 } 100% { opacity:0; translate:0 -70px; scale:1 } }
.grow .wbloom { animation:tr-bloom 2.4s ease-out both; transform-origin:0 0; }   /* распускаются один раз и остаются */
@keyframes tr-bloom { 0%,10% { scale:0; rotate:-60deg; opacity:0 } 40% { opacity:1 } 65% { scale:1.3; rotate:8deg } 100% { scale:1; rotate:0deg; opacity:1 } }
.bi1 { animation-delay:.14s; } .bi2 { animation-delay:.28s; } .bi3 { animation-delay:.42s; } .bi4 { animation-delay:.56s; } .bi5 { animation-delay:.7s; }
.bi6 { animation-delay:.84s; } .bi7 { animation-delay:.98s; } .bi8 { animation-delay:1.12s; } .bi9 { animation-delay:1.26s; } .bi10 { animation-delay:1.4s; } .bi11 { animation-delay:1.54s; }

/* засыхает - не осень: пепельные и бурые мазки, часть опала (голые ветки), капли стекают, светлая мгла */
.wilt .dl { fill:#B5AE99; } .wilt .dm { fill:#8E8572; } .wilt .dd { fill:#5d564a; } .wilt .dh { fill:#D8D2C2; opacity:.4; }
.wilt .g { display:none; }
.wilt .wsplash { fill:#8E8572; opacity:.3; } .wilt .grass { stroke:#7a7466; } .wilt .wtrunk { fill:#3a372f; } .wilt .wtwig { stroke:#3a372f; }
.wilt .wfl circle { fill:#D8D2C2; stroke:#9a927f; } .wilt .wfl .wcore, .wilt .wfr circle { fill:#9a927f; stroke:#6b6455; }
.wilt .wl5 .c1 { fill:#B5AE99; } .wilt .wl5 .c2, .wilt .wl5 .c7 { fill:#8E8572; }
.wilt .wl5 .c3, .wilt .wl5 .c4, .wilt .wl5 .c4b, .wilt .wl5 .c5 { stroke:#6f6858; } .wilt .ws5 { fill:#9a927f; }
.smoke { fill:#77736a; opacity:.22; filter:blur(18px); animation:tr-drift 14s ease-in-out infinite alternate, tr-mist 9s ease-in-out infinite; }
@keyframes tr-mist { 0%,100% { opacity:.16 } 50% { opacity:.32 } }   /* мгла дышит: то гуще, то прозрачнее */
@keyframes tr-drift { from { translate:-10px 0 } to { translate:12px 0 } }
.fall { fill:#7E6A50; opacity:0; }
.wilt .fall { animation:tr-fall 8s ease-in-out infinite; } .fd1 { animation-delay:3s; } .fd2 { animation-delay:5.5s; }
@keyframes tr-fall { 0% { translate:0 0; rotate:0deg; opacity:0 } 12% { opacity:.9 } 100% { translate:-30px 92px; rotate:140deg; opacity:0 } }
.drip { fill:#6b6455; opacity:0; }
.wilt .drip { animation:tr-drip 7s ease-in infinite; } .drip.d1 { animation-delay:2s; } .drip.d2 { animation-delay:4s; }
@keyframes tr-drip { 0% { opacity:0; translate:0 0 } 15% { opacity:.8 } 100% { opacity:0; translate:0 60px } }
/* росток и саженец засыхают: стебель устало клонится, листья никнут не в такт, сухая чешуйка падает на землю (Ирина, 21.10.2026: «слишком статичный») */
.ysway { transform-origin:100px 187px; }
.wilt .ysway { animation:tr-ysag 9s ease-in-out infinite; }
@keyframes tr-ysag { 0%,100% { rotate:0deg } 50% { rotate:-4deg } }
.wilt .lf.l { animation:tr-sag-l 6s ease-in-out infinite; }
.wilt .lf.r { animation:tr-sag-r 6s ease-in-out -2.5s infinite; }
@keyframes tr-sag-l { 0%,100% { rotate:0deg } 55% { rotate:-12deg } }
@keyframes tr-sag-r { 0%,100% { rotate:0deg } 55% { rotate:12deg } }
.wilt .fall.fy { animation:tr-fall-y 7s ease-in infinite; } .fall.fy.fd1 { animation-delay:3.5s; }
@keyframes tr-fall-y { 0% { translate:0 0; rotate:0deg; opacity:0 } 10% { opacity:.9 } 85% { opacity:.8 } 100% { translate:-10px 40px; rotate:200deg; opacity:0 } }

/* зайчик на ступени «Плодоносит» */
.bbody { fill:#6F6553; opacity:.95; } .bhead { fill:#776C59; } .btail { fill:#EFE9DC; opacity:.95; }
.bear { fill:#6A604E; } .bear-in { fill:none; stroke:#C9A28F; stroke-width:1.4; stroke-linecap:round; }
.beye { fill:#F4EFE4; } .bnose { fill:#C9A28F; } .bpaw { fill:none; stroke:#4F473A; stroke-width:1; }
.bshadow { fill:#6B7350; opacity:.22; filter:blur(1.5px); }
.bear-tw { transform-origin:12px -14px; transform-box:view-box; animation:tr-ear 4.5s ease-in-out infinite; }
@keyframes tr-ear { 0%,80%,100% { rotate:0deg } 84% { rotate:-22deg } 88% { rotate:4deg } 92% { rotate:-14deg } 96% { rotate:0deg } }
.wilt .bbody, .wilt .bhead, .wilt .bear { fill:#7a7466; }

@media (prefers-reduced-motion: reduce) {
  .tree .crown, .halo, .rays, .star, .cloud, .spark, .wbloom, .smoke, .fall, .drip, .bear-tw, .ysway, .lf { animation:none !important; }
  .star { opacity:.8; }
}

/* витрина «все положения» (А5б, только демо): ячейка - шапка «Моего дня» в натуральную величину */
main.wide { max-width:1280px; }
.tstage { margin:22px 0 8px; }
.tgrid { display:grid; grid-template-columns:repeat(auto-fill, minmax(380px, 1fr)); gap:12px; }
.tgrid .card.dayhead { margin:0; }
.dayhead h3 { max-width:calc(100% - 200px); margin:0 0 4px; }
@media (max-width:599px) {
  .tgrid { grid-template-columns:1fr; }
  .dayhead h3 { max-width:calc(100% - 104px); }
}