/* ─── גן האותיות · פלטה ─────────────────────────────── */
:root{
  --night:  #091420;  /* שמי לילה */
  --deep:   #0b1d14;  /* יער עמוק */
  --moss:   #16311f;  /* אזוב */
  --sage:   #8fbf9a;  /* מרווה */
  --gold:   #e9c46a;  /* פריחת זהב */
  --blush:  #e4a3a3;  /* סומק */
  --cream:  #f2e8d5;  /* קלף */
  --lilac:  #c9b8e8;  /* לילך */
  --soil:   #0a1a0f;  /* אדמה */
  --card:   rgba(22,49,31,.30);
  --border: rgba(143,191,154,.16);
  --ease:   cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{ scroll-behavior:smooth; }
body{
  background: var(--night);
  color: var(--cream);
  font-family:'Heebo', sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x:hidden;
}
::selection{ background:rgba(233,196,106,.35); color:var(--cream); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }
html{ scrollbar-width:thin; scrollbar-color:rgba(143,191,154,.4) var(--night); }
body::-webkit-scrollbar{ width:10px; }
body::-webkit-scrollbar-track{ background:var(--night); }
body::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, rgba(233,196,106,.35), rgba(143,191,154,.35));
  border-radius:6px; border:2px solid var(--night);
}

/* אלמנטים עם reveal — מוסתרים רק כשמנוע האנימציה פעיל */
.js-anim .reveal{ opacity:0; }
/* כרטיסים נחשפים ב-IntersectionObserver + CSS (עמיד גם בגלילה מהירה) */
.js-anim .alpha-card:not(.in),
.js-anim .word-card:not(.in){ opacity:0; transform:translateY(30px); }

/* ─── ניווט ─────────────────────────────── */
.nav{
  position:fixed; top:0; inset-inline:0;
  z-index:50;
  display:flex; align-items:center; gap:22px;
  padding: 14px clamp(16px, 3.5vw, 40px);
  background: linear-gradient(to bottom, rgba(6,13,10,.72), rgba(6,13,10,0));
  transition: background .5s ease, box-shadow .5s ease, backdrop-filter .5s ease;
}
.nav.scrolled{
  background: rgba(7,15,11,.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(143,191,154,.12), 0 12px 40px rgba(0,0,0,.35);
}
.nav-logo{
  display:flex; align-items:center; gap:8px;
  font-family:'Frank Ruhl Libre', serif;
  font-weight:700; font-size:19px;
  color:var(--cream); text-decoration:none;
  letter-spacing:.01em;
}
.nav-logo svg{ color:var(--sage); transition: transform .5s var(--ease); }
.nav-logo:hover svg{ transform: rotate(-12deg) scale(1.12); }
.nav-links{
  display:flex; gap:4px;
  margin-inline-start:auto;
}
.nav-link{
  position:relative;
  font-size:14px; font-weight:500;
  color: rgba(242,232,213,.72);
  text-decoration:none;
  padding:8px 13px;
  border-radius:999px;
  transition: color .3s ease, background .3s ease;
}
.nav-link:hover{ color:var(--cream); background:rgba(143,191,154,.1); }
.nav-link.active{ color:var(--gold); }
.nav-link.active::after{
  content:''; position:absolute; bottom:2px; inset-inline:16px;
  height:2px; border-radius:2px;
  background:var(--gold);
  opacity:.75;
}
.nav-guide{
  font-size:13.5px; font-weight:600;
  color:var(--gold); text-decoration:none;
  padding:8px 16px;
  border:1px solid rgba(233,196,106,.35);
  border-radius:999px;
  transition: all .35s var(--ease);
  white-space:nowrap;
}
.nav-guide:hover{
  background: rgba(233,196,106,.14);
  border-color: var(--gold);
  box-shadow: 0 0 24px rgba(233,196,106,.25);
  transform: translateY(-2px);
}

/* ─── Hero ─────────────────────────────── */
.hero{
  position:relative;
  height:100vh; height:100dvh;
  min-height:560px;
  overflow:hidden;
}
canvas#garden{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  cursor:crosshair;
  opacity:0;
  transition:opacity 1.4s ease;
}
canvas#garden.on{ opacity:1; }

.hud-top{
  position:absolute; top:0; inset-inline:0;
  padding: clamp(64px, 10vh, 110px) 24px 0;
  text-align:center;
  pointer-events:none;
  z-index:5;
}
.kicker{
  font-size: clamp(11px, 1.2vw, 13px);
  font-weight:500;
  letter-spacing:.35em;
  margin-inline-end:-.35em;
  color: var(--sage);
  opacity:0;
  animation: rise 1.2s var(--ease) .35s forwards;
}
.title{
  font-family:'Frank Ruhl Libre', serif;
  font-weight:900;
  font-size: clamp(56px, 9.5vw, 128px);
  line-height:.95;
  margin-top:12px;
  color:var(--cream);
  opacity:0;
  animation: rise 1.4s var(--ease) .55s forwards;
}
.title-line{
  display:inline-block;
  background: linear-gradient(180deg, #fbf5e8 30%, var(--gold) 115%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter: drop-shadow(0 0 44px rgba(233,196,106,.3)) drop-shadow(0 2px 22px rgba(0,0,0,.55));
}
.subtitle{
  max-width:56ch;
  margin: 20px auto 0;
  font-size: clamp(14px, 1.5vw, 17px);
  font-weight:300;
  line-height:1.8;
  color: rgba(242,232,213,.8);
  text-shadow: 0 1px 14px rgba(0,0,0,.6);
  opacity:0;
  animation: rise 1.4s var(--ease) .8s forwards;
}
@keyframes rise{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}

/* ─── סרגל שתילה ─────────────────────────────── */
.hud-bottom{
  position:absolute; bottom:0; inset-inline:0;
  z-index:5;
  padding: 14px clamp(12px, 3vw, 34px) 30px;
  display:flex; flex-direction:column; gap:10px;
  background: linear-gradient(to top, rgba(5,12,8,.9), rgba(5,12,8,.45) 65%, transparent);
  opacity:0;
  animation: rise 1.4s var(--ease) 1.15s forwards;
}
.letters-row{
  display:flex; gap:6px;
  justify-content:center;
  flex-wrap:nowrap;
  overflow-x:auto;
  padding: 6px 4px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.letters-row::-webkit-scrollbar{ display:none; }

.chip{
  flex:0 0 auto;
  min-width:42px; height:42px;
  border-radius:50%;
  border:1px solid rgba(242,232,213,.16);
  background: rgba(22,49,31,.35);
  color: var(--cream);
  font-family:'Frank Ruhl Libre', serif;
  font-size:20px; font-weight:700;
  cursor:pointer;
  transition: all .3s var(--ease);
  backdrop-filter: blur(4px);
}
.chip:hover{
  border-color: var(--sage);
  color:#fff;
  transform: translateY(-4px) scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,.4);
}
.chip.selected{
  background: var(--gold);
  border-color: var(--gold);
  color: #14200f;
  box-shadow: 0 0 22px rgba(233,196,106,.5);
}
.chip-random{
  border-radius:999px;
  padding-inline:16px;
  font-family:'Heebo', sans-serif;
  font-size:14px; font-weight:600;
}

.actions{
  display:flex; align-items:center; gap:10px;
  justify-content:center;
}
.stat{
  font-size:13px; font-weight:300;
  color: rgba(143,191,154,.9);
  min-width:0;
}
.spacer{ width:6px; }
.btn{
  font-family:'Heebo', sans-serif;
  font-size:14px; font-weight:600;
  color:#14200f;
  background: var(--sage);
  border:none;
  padding:10px 22px;
  border-radius:999px;
  cursor:pointer;
  transition: all .3s var(--ease);
}
.btn:hover{
  background:#a8d4b2;
  transform:translateY(-2px);
  box-shadow: 0 8px 22px rgba(143,191,154,.28);
}
.btn:active{ transform:translateY(0) scale(.97); }
.btn-ghost{
  background:transparent;
  color: rgba(242,232,213,.75);
  border:1px solid rgba(242,232,213,.22);
}
.btn-ghost:hover{
  background: rgba(242,232,213,.08);
  color:var(--cream);
  box-shadow:none;
}
.hint{
  text-align:center;
  font-size:11.5px; font-weight:300;
  color: rgba(242,232,213,.42);
}

/* חץ גלילה */
.scroll-cue{
  position:absolute; bottom:6px; inset-inline-start:50%;
  transform:translateX(50%);
  z-index:6;
  width:26px; height:26px;
  display:grid; place-items:center;
  opacity:0;
  animation: rise 1.4s var(--ease) 1.8s forwards;
}
.scroll-cue-line{
  width:10px; height:10px;
  border-inline-start:1.6px solid rgba(242,232,213,.6);
  border-bottom:1.6px solid rgba(242,232,213,.6);
  transform: rotate(-45deg);
  animation: cueFloat 2.2s ease-in-out infinite;
}
@keyframes cueFloat{
  0%,100%{ transform: rotate(-45deg) translate(0,0); opacity:.55; }
  50%{ transform: rotate(-45deg) translate(-4px,4px); opacity:1; }
}

/* ─── מניפסט ─────────────────────────────── */
.manifesto{
  position:relative;
  padding: clamp(110px, 16vh, 170px) 24px;
  text-align:center;
  background:
    radial-gradient(60% 90% at 50% 0%, rgba(16,42,24,.55), transparent 70%),
    linear-gradient(180deg, var(--soil), #0a1826 60%, var(--night));
  overflow:hidden;
}
.manifesto-big{
  font-family:'Frank Ruhl Libre', serif;
  font-weight:900;
  font-size: clamp(38px, 6.5vw, 84px);
  line-height:1.1;
  color:var(--cream);
  text-shadow: 0 0 50px rgba(143,191,154,.25);
}
.manifesto-sub{
  max-width:62ch;
  margin: 26px auto 0;
  font-size: clamp(14.5px, 1.6vw, 18px);
  font-weight:300;
  line-height:1.9;
  color: rgba(242,232,213,.7);
}

/* גחליליות CSS לרקעי סקשנים */
.fireflies-css{ position:absolute; inset:0; pointer-events:none; }
.fireflies-css i{
  position:absolute;
  width:5px; height:5px; border-radius:50%;
  background: radial-gradient(circle, rgba(233,220,140,.95), rgba(233,196,106,0) 70%);
  filter: blur(.4px);
  animation: fly 11s ease-in-out infinite;
  opacity:0;
}
.fireflies-css i:nth-child(1){ top:22%; inset-inline-start:12%; animation-delay:0s; }
.fireflies-css i:nth-child(2){ top:64%; inset-inline-start:24%; animation-delay:2.2s; animation-duration:13s; }
.fireflies-css i:nth-child(3){ top:34%; inset-inline-start:58%; animation-delay:4.5s; }
.fireflies-css i:nth-child(4){ top:72%; inset-inline-start:78%; animation-delay:1.1s; animation-duration:15s; }
.fireflies-css i:nth-child(5){ top:18%; inset-inline-start:86%; animation-delay:6s; }
.fireflies-css i:nth-child(6){ top:52%; inset-inline-start:42%; animation-delay:8s; animation-duration:12s; }
@keyframes fly{
  0%,100%{ transform:translate(0,0); opacity:0; }
  12%{ opacity:.9; }
  50%{ transform:translate(34px,-46px); opacity:.35; }
  70%{ opacity:.85; }
  88%{ opacity:0; }
}

/* ─── סקשנים כלליים ─────────────────────────────── */
.section{
  position:relative;
  padding: clamp(84px, 12vh, 140px) clamp(20px, 5vw, 72px);
  max-width:1240px;
  margin-inline:auto;
}
.section-alt{
  max-width:none;
  background: linear-gradient(180deg, transparent, rgba(11,29,20,.55) 18%, rgba(11,29,20,.55) 82%, transparent);
}
.section-alt > *{ max-width:1240px; margin-inline:auto; }
.section-head{ text-align:center; margin-bottom: clamp(44px, 7vh, 70px); }
.section-kicker{
  font-size:12px; font-weight:600;
  letter-spacing:.32em; margin-inline-end:-.32em;
  color:var(--sage);
  text-transform:uppercase;
}
.section-title{
  font-family:'Frank Ruhl Libre', serif;
  font-weight:900;
  font-size: clamp(34px, 4.8vw, 58px);
  margin-top:10px;
  color:var(--cream);
}
.section-lead{
  max-width:66ch;
  margin:18px auto 0;
  font-size: clamp(14.5px, 1.5vw, 17px);
  font-weight:300;
  line-height:1.9;
  color: rgba(242,232,213,.7);
}

/* ─── איך זה עובד ─────────────────────────────── */
.how-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:18px;
}
.how-card{
  position:relative;
  padding: 30px 26px 28px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius:20px;
  backdrop-filter: blur(6px);
  transition: transform .5s var(--ease), border-color .5s ease, box-shadow .5s ease;
  overflow:hidden;
}
.how-card::before{
  content:'';
  position:absolute; inset:0;
  background: radial-gradient(120% 90% at 50% -20%, rgba(233,196,106,.09), transparent 60%);
  opacity:0; transition:opacity .5s ease;
}
.how-card:hover{
  transform: translateY(-6px);
  border-color: rgba(233,196,106,.35);
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.how-card:hover::before{ opacity:1; }
.how-num{
  position:absolute; top:20px; inset-inline-end:22px;
  font-family:'Frank Ruhl Libre', serif;
  font-size:15px; font-weight:500;
  color: rgba(233,196,106,.55);
  letter-spacing:.08em;
}
.how-icon{
  width:44px; height:44px;
  color:var(--sage);
  margin-bottom:16px;
  transition: transform .6s var(--ease), color .4s ease;
}
.how-card:hover .how-icon{ transform: translateY(-3px) scale(1.08); color:var(--gold); }
.how-card h3{
  font-family:'Frank Ruhl Libre', serif;
  font-size:20px; font-weight:700;
  margin-bottom:10px;
  color:var(--cream);
}
.how-card p{
  font-size:14px; font-weight:300;
  line-height:1.85;
  color: rgba(242,232,213,.68);
}

/* הדגמת L-System */
.lsys-demo{
  margin-top:26px;
  display:grid;
  grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.35fr);
  gap:28px;
  align-items:center;
  padding: clamp(24px, 3.5vw, 44px);
  background: linear-gradient(140deg, rgba(11,29,20,.7), rgba(9,20,32,.7));
  border:1px solid var(--border);
  border-radius:24px;
  backdrop-filter: blur(6px);
}
.lsys-copy h3{
  font-family:'Frank Ruhl Libre', serif;
  font-size:24px; font-weight:700;
  color:var(--cream);
  margin-bottom:12px;
}
.lsys-copy p{
  font-size:14.5px; font-weight:300;
  line-height:1.9;
  color: rgba(242,232,213,.7);
}
.lsys-gen{
  margin-top:18px;
  font-size:13px !important;
  color: var(--sage) !important;
  letter-spacing:.14em;
}
.lsys-gen b{
  display:inline-grid; place-items:center;
  min-width:30px; height:30px;
  margin-inline:4px;
  border-radius:50%;
  background: rgba(233,196,106,.14);
  border:1px solid rgba(233,196,106,.4);
  color:var(--gold);
  font-family:'Frank Ruhl Libre', serif;
  font-size:16px;
}
.lsys-stage{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:
    radial-gradient(80% 60% at 50% 100%, rgba(16,42,24,.8), transparent),
    #081018;
  border:1px solid rgba(143,191,154,.12);
}
#lsysCanvas{ display:block; width:100%; height:340px; }

/* ─── אלפבית הצמחים ─────────────────────────────── */
.alpha-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
  gap:14px;
}
.alpha-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(9,20,32,.5), rgba(11,29,20,.55));
  overflow:hidden;
  cursor:pointer;
  transition: transform .55s var(--ease), border-color .45s ease, box-shadow .45s ease, opacity .7s ease;
  text-align:center;
  padding-bottom:14px;
}
.alpha-card:hover{
  transform: translateY(-7px);
  border-color: rgba(233,196,106,.4);
  box-shadow: 0 20px 40px rgba(0,0,0,.4), 0 0 30px rgba(233,196,106,.07);
}
.alpha-card:active{ transform: translateY(-3px) scale(.98); }
.alpha-card canvas{
  display:block; width:100%; height:150px;
}
.alpha-name{
  font-family:'Frank Ruhl Libre', serif;
  font-size:17px; font-weight:700;
  color:var(--cream);
  display:flex; align-items:baseline; justify-content:center; gap:7px;
}
.alpha-name small{
  font-family:'Heebo', sans-serif;
  font-size:11px; font-weight:400;
  color: rgba(143,191,154,.85);
}
.alpha-trait{
  margin-top:5px;
  font-size:11px; font-weight:300;
  color: rgba(242,232,213,.5);
}
.alpha-hint{
  position:absolute; top:10px; inset-inline-start:12px;
  font-size:10px; font-weight:500;
  color: rgba(233,196,106,.0);
  transition: color .4s ease;
}
.alpha-card:hover .alpha-hint{ color: rgba(233,196,106,.8); }

/* ─── גן המילים ─────────────────────────────── */
.words-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:18px;
}
.word-card{
  position:relative;
  border:1px solid var(--border);
  border-radius:20px;
  overflow:hidden;
  cursor:pointer;
  background: linear-gradient(180deg, #0a1420, #0c2014);
  transition: transform .6s var(--ease), border-color .5s ease, box-shadow .5s ease, opacity .8s ease;
}
.word-card:hover{
  transform: translateY(-7px);
  border-color: rgba(233,196,106,.4);
  box-shadow: 0 22px 48px rgba(0,0,0,.45);
}
.word-card:active{ transform:translateY(-3px) scale(.985); }
.word-card canvas{ display:block; width:100%; height:210px; }
.word-meta{
  display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px 16px;
  border-top:1px solid rgba(143,191,154,.1);
}
.word-name{
  font-family:'Frank Ruhl Libre', serif;
  font-size:22px; font-weight:700;
  color:var(--cream);
}
.word-cta{
  font-size:12px; font-weight:500;
  color: rgba(233,196,106,.75);
  transition: transform .4s var(--ease);
}
.word-card:hover .word-cta{ transform: translateX(-4px); color:var(--gold); }

/* טופס מילה */
.sow-word{
  margin-top:56px;
  text-align:center;
  padding: clamp(30px, 4vw, 48px);
  border-radius:24px;
  border:1px solid rgba(233,196,106,.22);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(233,196,106,.07), transparent 60%),
    rgba(11,29,20,.4);
}
.sow-word h3{
  font-family:'Frank Ruhl Libre', serif;
  font-size: clamp(22px, 2.6vw, 30px); font-weight:700;
  color:var(--cream);
}
.sow-word p{
  margin:10px auto 22px;
  max-width:52ch;
  font-size:14.5px; font-weight:300;
  line-height:1.8;
  color: rgba(242,232,213,.68);
}
.sow-form{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap;
}
#wordInput{
  width: min(300px, 74vw);
  padding: 12px 20px;
  font-family:'Frank Ruhl Libre', serif;
  font-size:19px; font-weight:500;
  color:var(--cream);
  background: rgba(9,20,32,.6);
  border:1px solid rgba(143,191,154,.3);
  border-radius:999px;
  outline:none;
  text-align:center;
  transition: border-color .3s ease, box-shadow .3s ease;
}
#wordInput::placeholder{ color: rgba(242,232,213,.32); font-size:16px; }
#wordInput:focus{
  border-color:var(--gold);
  box-shadow: 0 0 0 4px rgba(233,196,106,.12);
}
#wordInput.shake{ animation: shake .45s ease; border-color:var(--blush); }
@keyframes shake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(6px); } 50%{ transform:translateX(-6px); } 75%{ transform:translateX(3px); }
}

/* ─── פוטר ─────────────────────────────── */
.footer{
  border-top:1px solid rgba(143,191,154,.12);
  background: linear-gradient(180deg, transparent, rgba(5,12,8,.85));
  padding: clamp(56px, 8vh, 84px) clamp(20px, 5vw, 72px) 34px;
}
.footer-grid{
  max-width:1240px; margin-inline:auto;
  display:grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap:36px;
}
.footer-logo{
  font-family:'Frank Ruhl Libre', serif;
  font-size:24px; font-weight:900;
  color:var(--cream);
  margin-bottom:12px;
}
.footer-about p:not(.footer-logo){
  font-size:13.5px; font-weight:300;
  line-height:1.85;
  color: rgba(242,232,213,.6);
  max-width:44ch;
}
.footer-head{
  font-size:12px; font-weight:600;
  letter-spacing:.22em;
  color:var(--sage);
  margin-bottom:14px;
}
.footer-nav{ display:flex; flex-direction:column; gap:9px; }
.footer-nav a{
  font-size:14px; font-weight:400;
  color: rgba(242,232,213,.68);
  text-decoration:none;
  width:fit-content;
  transition: color .3s ease, transform .3s var(--ease);
}
.footer-nav a:hover{ color:var(--gold); transform:translateX(-4px); }
.footer-tech p:not(.footer-head){
  font-size:13px; font-weight:300;
  line-height:2;
  color: rgba(242,232,213,.55);
}
.footer-line{
  max-width:1240px;
  margin: 44px auto 0;
  padding-top:22px;
  border-top:1px solid rgba(143,191,154,.09);
  text-align:center;
  font-size:12.5px; font-weight:300;
  color: rgba(242,232,213,.4);
}

/* ─── מובייל ─────────────────────────────── */
@media (max-width:820px){
  .footer-grid{ grid-template-columns:1fr; gap:32px; }
  .lsys-demo{ grid-template-columns:1fr; }
  #lsysCanvas{ height:280px; }
}
@media (max-width:640px){
  .nav{ gap:10px; padding:10px 12px; }
  .nav-logo{ font-size:16px; }
  .nav-logo svg{ width:17px; height:17px; }
  .nav-link{ font-size:12.5px; padding:7px 8px; }
  .nav-link.active::after{ inset-inline:10px; }
  .nav-guide{ font-size:12px; padding:6px 11px; }
  .subtitle{ font-size:13px; max-width:34ch; }
  .letters-row{ justify-content:flex-start; }
  .actions{ flex-wrap:wrap; row-gap:8px; }
  .stat{ width:100%; text-align:center; order:3; }
  .hint{ display:none; }
  .hud-bottom{ padding-bottom:24px; }
  .alpha-grid{ grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap:10px; }
  .alpha-card canvas{ height:120px; }
  .alpha-name{ font-size:15px; }
  .section{ padding-inline:16px; }
}
@media (max-width:430px){
  .nav-links .nav-link:first-child{ display:none; }
}

/* ─── הפחתת תנועה ─────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .kicker,.title,.subtitle,.hud-bottom,.scroll-cue{ animation-duration:.01s; animation-delay:0s; }
  .scroll-cue-line{ animation:none; }
  .fireflies-css i{ animation:none; opacity:.4; }
  canvas#garden{ transition:none; }
  *{ transition-duration:.01s !important; }
}