/* Home Lab v0.17: in step with Taku Phone v0.33. A clear sky with a warm sun in one corner, no brush strokes,
   and Taku's face as the full stop. Values are the Phone page's (index.html, "v0.32 ·" and "v0.33 ·"). */
.tk-home{
 --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .33 0 0 0 0 .3 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
 --sun:radial-gradient(55% 60% at 90% 4%,rgba(255,244,218,.9) 0,rgba(255,244,218,.35) 32%,rgba(255,244,218,0) 70%);
 --sky-clear:var(--grain),var(--sun),linear-gradient(180deg,#5F9BD6 0%,#86B7E4 40%,#B9D6F0 75%,#E2EEF8 100%);
 --bounce:cubic-bezier(.34,1.56,.64,1)}

/* ---------- 01 · the phone in the first screen shows the same clear sky ---------- */
.tk-home #brand .fscr{background:var(--sky-clear)}
.tk-home #brand .fglow{background:radial-gradient(50% 50% at 50% 50%,rgba(134,183,228,.22),rgba(134,183,228,.07) 55%,transparent 72%)}

/* ---------- 02 · Taku OS on the Phone page's "Turn it over" paper ---------- */
.tk-home .os-pin{background:radial-gradient(55% 65% at 70% 50%,#F9F9FA 0,rgba(249,249,250,0) 72%),linear-gradient(180deg,#EEEFF0 0%,#DCDEE1 100%)}

/* ---------- 03 · both cards under the same clear sky ---------- */
.tk-home .pv,.tk-home .ph .pv,.tk-home .mc .pv{background:var(--sky-clear)}
.tk-home .pv::after{display:none}
.tk-home .bigph .ph-body{box-shadow:inset 0 0 0 .6px rgba(255,255,255,.9),inset 0 0 0 1.6px rgba(140,146,154,.45),inset 0 -1px 1px rgba(0,0,0,.16),0 30px 44px -22px rgba(30,60,110,.4),0 8px 16px -8px rgba(30,60,110,.22)}
.tk-home .bigmac .lid{box-shadow:inset 0 0 0 1px #2C2D31,0 0 0 1.4px #B8BCC2,0 0 0 2px rgba(255,255,255,.6),0 34px 50px -26px rgba(30,60,110,.45)}
.tk-home .bigmac .base{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 22px 30px -16px rgba(30,60,110,.42)}

/* ---------- Taku's face, the full stop (Phone v0.33): pops in when seen, blinks, hops now and then, smiles when you touch it ---------- */
.tk-home .tf{--tfc:#1B1B1B;--tfe:#FFF7EC;display:inline-block;position:relative;width:.5em;height:.5em;margin-left:.1em;border-radius:34%;background:var(--tfc);vertical-align:baseline;
 transform-origin:50% 100%;transform:scale(0);transition:background-color .5s ease;pointer-events:auto;cursor:default}
.tk-home .tf.on{animation:tfPop .7s var(--bounce) var(--d,300ms) both,tfHop 7.5s ease-in-out calc(var(--d,300ms) + 2.6s) infinite}
.tk-home .tf i{position:absolute;top:27%;width:13%;height:38%;border-radius:99px;background:var(--tfe);transform-origin:50% 50%;animation:tfBlink 4.8s infinite;animation-delay:var(--bd,1.2s);
 transition:transform .15s ease,top .15s ease,height .15s ease}
.tk-home .tf i:nth-child(1){left:30%}.tk-home .tf i:nth-child(2){left:57%}
.tk-home .tf.happy i{height:14%;top:38%;border-radius:99px 99px 2px 2px;animation:none}@media (hover:hover) and (pointer:fine){.tk-home .tf:hover i{height:14%;top:38%;border-radius:99px 99px 2px 2px;animation:none}}
@keyframes tfPop{0%{transform:scale(0) rotate(-20deg)}100%{transform:scale(1) rotate(0)}}
@keyframes tfHop{0%,86%,100%{transform:none}90%{transform:translateY(-.14em) rotate(-8deg)}94%{transform:translateY(0) scale(1.06,.92)}97%{transform:none}}
@keyframes tfBlink{0%,93%,100%{transform:scaleY(1)}95.5%{transform:scaleY(.08)}}
/* in the first screen it replaces the orange dot: Taku, in its colour */
.tk-home #brand .tf{--tfc:#FF5A1F;--tfe:#FFF7EC;width:.3em;height:.3em;margin-left:.07em}
.tk-home #brand.lit .tf{animation:tfPop .7s var(--bounce) .5s both,tfHop 7.5s ease-in-out 3.1s infinite}
.tk-home .os .l2 .tf{--tfc:#1B1B1B}
.tk-home #m-title .tf{--tfc:#F8F6F1;--tfe:#1B1B1B}
.tk-home #b-title .tf{--tfc:#F2EFE8;--tfe:#0A0A0A}
@media (prefers-reduced-motion:reduce){.tk-home .tf{transform:none;animation:none !important}.tk-home .tf i{animation:none}}
/* the Mac's desktop is the same clear sky, a little lighter so the screen still reads against the card */
.tk-home .ms{background:var(--grain),radial-gradient(60% 70% at 86% 6%,rgba(255,244,218,.85),rgba(255,244,218,0) 70%),linear-gradient(180deg,#7FB0E0 0%,#A9CCEC 42%,#D3E5F5 78%,#EAF2FA 100%)}


.tk-home .term .cur{display:inline-block;width:8px;height:15px;background:var(--cream);vertical-align:-2px;animation:blink 1s steps(1) infinite}