/* ==========================================================
   מנועי ממלכת הקרח - עיצוב

   שפה משותפת: קרח שקוף-כחלחל, שלג, אור צפוני עדין וקווי
   מתאר כחולים. עולם קר לעין אבל רך ומזמין, לא חד.
   ========================================================== */

/* ---------------------------------------------- 1. החלקה */
.sl-board {
  display: grid;
  /*
    גם שורות ולא רק עמודות. בלי grid-template-rows גובה כל שורה
    נקבע לפי התוכן שלה, ומשבצת קרח ריקה היא בגובה אפס - הלוח
    יצא ריבוע כחול חלק בלי תאים בכלל.
  */
  grid-template-columns: repeat(var(--n, 6), 1fr);
  grid-template-rows: repeat(var(--n, 6), 1fr);
  gap: 3px;
  padding: clamp(6px, 1.2vmin, 12px);
  border-radius: clamp(12px, 2.2vmin, 24px);
  background:
    radial-gradient(80% 60% at 50% 8%, rgba(255, 255, 255, .8), transparent 70%),
    linear-gradient(180deg, #eaf7ff, #c4e2f2);
  border: clamp(5px, 1vmin, 10px) solid #7fb4d4;
  box-shadow: 0 8px 24px rgba(40, 80, 110, .28);
  /*
    הלוח מרובע, וגודלו נגזר מגובה שטח המשחק בפועל ולא מ-dvh.
    זה מה שהיה שבור: 100dvh התעלם מהחלק שהכותרת ולוח החצים
    תופסים, והלוח יצא גבוה מהמסך - 98 פיקסלים של גלישה ועשרה
    תאים מחוץ למסך.
  */
  width: auto;
  height: 100%;
  aspect-ratio: 1 / 1;
  max-width: 100%;
  direction: ltr;
}
/*
  בלנדסקייפ הלוח ולוח החצים יושבים זה לצד זה. זו הפריסה
  הנכונה למסך רחב, וזה גם מה שמייתר את הבקשה להפוך את הטאבלט.
*/
@media (min-aspect-ratio: 1/1) {
  #slide .center-wrap {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: clamp(12px, 3vmin, 46px);
    padding-inline: clamp(8px, 2vmin, 24px);
  }
  #slide .sl-board { flex: 0 1 auto; }
  #slide .sl-pad { flex: 0 0 auto; }
}
/* בפורטרט נשארים אחד מעל השני, והלוח נגזר מהרוחב */
@media (max-aspect-ratio: 1/1) {
  .sl-board { width: min(86vw, 100%); height: auto; }
}
.sl-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  border-radius: 5px;
  background: rgba(255, 255, 255, .5);
  box-shadow: inset 0 0 0 1px rgba(127, 180, 212, .3);
}
.sl-cell svg { width: 100%; height: 100%; display: block; }
.sl-cell.rock { background: none; }
.sl-cell.goal { background: rgba(255, 243, 196, .45); }
.sl-cell.goal.shut { animation: slShut .5s ease; }
@keyframes slShut {
  0%, 100% { transform: scale(1); }
  40%      { transform: scale(.92); }
}
.sl-cell.hint-pulse { animation: slHint 1.2s ease-in-out infinite; }
/*
  השער בתחילת הסבב. פועם שלוש שניות כדי שהעין תמצא אותו,
  ואז נרגע - כדי שלא ייראה כמו משהו שצריך ללחוץ עליו עכשיו.
*/
.sl-cell.beacon { animation: slBeacon 1s ease-in-out 3; z-index: 2; }
@keyframes slBeacon {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(255, 216, 122, .5); transform: scale(1); }
  50%      { box-shadow: inset 0 0 0 8px rgba(255, 216, 122, 1),
                         0 0 clamp(10px, 2vmin, 22px) rgba(255, 216, 122, .9);
             transform: scale(1.06); }
}
/* דרגת רמז 1 - סימון עדין של האזור שכדאי להסתכל עליו */
.sl-cell.look { animation: slLook 1.3s ease-in-out 2; }
@keyframes slLook {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(127, 180, 212, .3); }
  50%      { box-shadow: inset 0 0 0 5px rgba(160, 220, 255, .85); }
}
@keyframes slHint {
  0%, 100% { box-shadow: inset 0 0 0 2px rgba(232, 163, 60, .5); }
  50%      { box-shadow: inset 0 0 0 6px rgba(232, 163, 60, .95); }
}

.sl-gem {
  position: absolute;
  inset: 18%;
  pointer-events: none;
  animation: slGem 2.6s ease-in-out infinite;
  filter: drop-shadow(0 0 8px rgba(190, 235, 255, .9));
}
.sl-gem svg { width: 100%; height: 100%; display: block; }
@keyframes slGem {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-8%) scale(1.06); }
}
.sl-gem.taken { animation: slTake .4s ease forwards; }
@keyframes slTake { to { transform: scale(.3) translateY(-60%); opacity: 0; } }

.sl-hero {
  position: absolute;
  inset: 6% 6% 10%;
  z-index: 3;
  pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(40, 80, 110, .45));
}
.sl-hero svg { width: 100%; height: 100%; display: block; }
.sl-hero.sliding { animation: slSlide .26s ease; }
@keyframes slSlide {
  0%   { transform: scale(1.14, .86); }
  100% { transform: scale(1, 1); }
}
.sl-hero.bump { animation: slBump .32s ease; }
@keyframes slBump {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-8%); }
  70%      { transform: translateX(8%); }
}
.sl-hero.arrived { animation: slCheer .9s ease 2; }
@keyframes slCheer {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-14%) scale(1.08); }
}

/* לוח החצים - ארבעה כיוונים גדולים והתחלה מחדש במרכז */
/*
  לוח החצים.

  direction: ltr הוא **תיקון באג ולא עיצוב**: grid-template-areas
  בתוך מכל RTL פורש את העמודות מימין לשמאל, ולכן האזור שנקרא
  "l" הוצג בצד ימין של הלוח. הילד ראה חץ שמצביע שמאלה יושב
  בצד ימין, ולכן החיצים הרגישו הפוכים. הלוגיקה עצמה תמיד
  הייתה נכונה - רק המקום על המסך היה הפוך.

  מכאן: left נמצא בשמאל, right בימין, up למעלה, down למטה,
  לפי מה שהילד רואה.
*/
.sl-pad {
  display: grid;
  direction: ltr;
  grid-template-columns: repeat(3, auto);
  grid-template-areas: ". u ." "l c r" ". d .";
  gap: clamp(6px, 1.2vmin, 14px);
  justify-items: center;
  align-items: center;
}
.sl-arrow, .sl-reset {
  width: clamp(56px, 10vmin, 104px);
  aspect-ratio: 1;
  border: none;
  cursor: pointer;
  border-radius: clamp(12px, 2.2vmin, 24px);
  background: linear-gradient(#eaf7ff, #bfe0f2) padding-box,
              linear-gradient(#9fc9e0, #6ea6c8) border-box;
  border: clamp(4px, .8vmin, 8px) solid transparent;
  box-shadow: 0 6px 0 #5f8fae, 0 9px 18px rgba(40, 80, 110, .26);
  transition: transform .12s ease, box-shadow .12s ease;
  position: relative;
}
.sl-arrow:active, .sl-reset:active { transform: translateY(5px); box-shadow: 0 1px 0 #5f8fae; }
.sl-arrow.up { grid-area: u; }
.sl-arrow.down { grid-area: d; }
.sl-arrow.left { grid-area: l; }
.sl-arrow.right { grid-area: r; }
.sl-reset { grid-area: c; }
/* החצים מצוירים ב-CSS כדי שיישארו חדים בכל גודל */
.sl-arrow::after {
  content: "";
  position: absolute;
  inset: 26%;
  background: #3d6f8f;
  clip-path: polygon(50% 0, 100% 62%, 70% 62%, 70% 100%, 30% 100%, 30% 62%, 0 62%);
}
.sl-arrow.down::after { transform: rotate(180deg); }
.sl-arrow.left::after { transform: rotate(-90deg); }
.sl-arrow.right::after { transform: rotate(90deg); }
/* התחלה מחדש - חץ מעגלי, אין בזה עונש */
.sl-reset::after {
  content: "";
  position: absolute;
  inset: 24%;
  border: clamp(4px, .8vmin, 8px) solid #6ea6c8;
  border-top-color: transparent;
  border-radius: 50%;
}
.sl-arrow.hint-pulse { animation: slHintBtn 1.2s ease-in-out infinite; }
@keyframes slHintBtn {
  0%, 100% { box-shadow: 0 6px 0 #5f8fae, 0 0 0 0 rgba(232, 163, 60, .8); }
  50%      { box-shadow: 0 6px 0 #5f8fae, 0 0 0 clamp(6px, 1.2vmin, 12px) rgba(232, 163, 60, 0); }
}

/* ---------------------------------------------- 2. איזון */
/*
  המאזניים בנויים משלוש שכבות שיושבות זו על זו:
    .bal-stand  - הבסיס, העמוד, הציר וקשת המחוון (SVG קבוע)
    .bal-needle - המחוג שנע על הקשת, מסתובב סביב הציר
    .bal-beam   - הזרוע שנוטה, ועליה המגרעות

  הציר נמצא בגובה 11.5% מגובה הבמה - זה המספר שקושר את שלוש
  השכבות זו לזו, ולכן הוא מוגדר פעם אחת כמשתנה.
*/
.bal-stage {
  position: absolute;
  inset: clamp(56px, 9vmin, 92px) clamp(8px, 1.6vmin, 18px) clamp(118px, 21vmin, 190px);
  display: grid;
  place-items: end center;
  border-radius: clamp(14px, 2.4vmin, 26px);
  overflow: hidden;
  /*
    שלוש שכבות עומק: קיר סדנה מרוח קרשים ברקע, בריכת אור חמה
    שמפרידה את המאזניים מהקיר, ורצפת עץ בחזית. בלי זה המאזניים
    נראו כאילו הם מרחפים בקופסה ריקה.
  */
  background:
    radial-gradient(46% 62% at 50% 62%, rgba(255, 246, 214, .95), transparent 72%),
    repeating-linear-gradient(90deg,
      rgba(120, 150, 170, .07) 0 2px, transparent 2px 74px),
    linear-gradient(180deg, #e4f3fb 0 62%, #cfe4ef 100%);
}
/* רצפת עץ מתחת למאזניים - נותנת קרקע ועומק */
.bal-stage::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 15%;
  background:
    repeating-linear-gradient(90deg,
      rgba(90, 58, 28, .16) 0 3px, transparent 3px 96px),
    linear-gradient(180deg, #cfa273, #9a6f42);
  box-shadow: inset 0 7px 12px rgba(90, 58, 28, .32);
}
/* קו המפגש בין הקיר לרצפה - פס צל דק שקובע איפה הרצפה מתחילה */
.bal-stage::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 15%;
  height: clamp(8px, 1.6vmin, 16px);
  background: linear-gradient(180deg, rgba(60, 90, 110, .16), transparent);
  z-index: 1;
}
/*
  הזרוע נצמדת לתחתית הבמה ולא מתמרכזת בה: המקום הפנוי שנדרש
  הוא *מעל* הציר, שם המגרעות עולות כשהזרוע נוטה. את הגובה
  המדויק וההורדה בפועל מחשב fitRig() לפי המידות בפועל.
*/
.bal-rig {
  --pivot: 11.2%;
  --bh: clamp(19px, 3.4vmin, 32px);
  position: relative;
  align-self: end;
  width: min(96%, 760px);
  height: min(100%, clamp(220px, 40vmin, 380px));
  z-index: 1;
}
.bal-stand { position: absolute; inset: 0; z-index: 1; }
.bal-stand svg { width: 100%; height: 100%; display: block; }
.bal-rig.level .bl-zone { filter: drop-shadow(0 0 10px #6ddc82); }

/*
  המחוג - מחט אדומה שמתחדדת כלפי מטה ונוגעת בקשת. השוליים
  הלבנים הם מה שמפריד אותה מעמוד הנחושת שמאחוריה.
*/
.bal-needle {
  position: absolute;
  left: 50%;
  top: var(--pivot);
  width: clamp(9px, 1.7vmin, 16px);
  height: 63%;
  z-index: 2;
  background: linear-gradient(180deg, #e8543c, #a52d1e);
  clip-path: polygon(28% 0, 72% 0, 56% 100%, 44% 100%);
  transform-origin: 50% 0;
  transform: translateX(-50%);
  transition: transform .45s cubic-bezier(.3, 1.35, .5, 1);
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, .95))
          drop-shadow(0 2px 3px rgba(90, 30, 20, .35));
}

/* הזרוע - הכובד שלה מרוכז בציר, ולכן היא מסתובבת סביב מרכזה */
.bal-beam {
  position: absolute;
  inset-inline: 7%;
  left: 7%; right: 7%;
  top: var(--pivot);
  height: var(--bh);
  margin-top: calc(var(--bh) / -2);
  z-index: 3;
  transform-origin: 50% 50%;
  transition: transform .45s cubic-bezier(.3, 1.35, .5, 1);
  filter: drop-shadow(0 4px 5px rgba(40, 80, 110, .3));
}
.bl-beamart { position: absolute; inset: 0; width: 100%; height: 100%; }
.bal-rig.won .bal-beam { animation: balWin .55s ease 2; }
@keyframes balWin {
  0%, 100% { filter: drop-shadow(0 4px 5px rgba(40, 80, 110, .3)); }
  50%      { filter: drop-shadow(0 0 16px rgba(127, 224, 138, .95)); }
}

/* מגרעת - ערש פתוח שיושב על הזרוע. גדול, כי אצבע היא לא סמן */
/*
  מגרעת: ערש פתוח שנשען על הזרוע. ה-62% גורם לו לחפוף מעט את
  המוט, ולכן הוא נראה מחובר אליו ולא מרחף מעליו.
*/
.bl-slot {
  position: absolute;
  bottom: 62%;
  transform: translateX(-50%);
  aspect-ratio: 1;
  max-width: clamp(66px, 12vmin, 124px);
  min-width: clamp(54px, 10vmin, 104px);
  border-radius: 18% 18% 38% 38%;
  border: clamp(3px, .55vmin, 5px) dashed rgba(109, 75, 30, .5);
  border-bottom: clamp(6px, 1.1vmin, 11px) solid #8a6a3c;
  background: rgba(255, 255, 255, .3);
  display: grid;
  place-items: center;
  transition: background .18s ease, border-color .18s ease;
}
/* מגרעת תפוסה מפסיקה להיראות כמו מקום ריק */
.bl-slot:has(.bl-weight) {
  border-style: none none solid none;
  background: none;
}
.bl-slot .bl-weight { width: 96%; }
.bl-slot.hint-pulse { animation: blSlotHint 1.15s ease-in-out infinite; }
@keyframes blSlotHint {
  0%, 100% { transform: translateX(-50%) scale(1);    box-shadow: 0 0 0 0 rgba(232, 163, 60, .85); }
  50%      { transform: translateX(-50%) scale(1.07); box-shadow: 0 0 0 clamp(8px, 1.6vmin, 16px) rgba(232, 163, 60, 0); }
}

/* המגש - שולחן העבודה שממנו גוררים, וגם היעד לחזרה */
.bal-tray {
  position: absolute;
  inset-inline: clamp(8px, 1.6vmin, 18px);
  bottom: clamp(8px, 1.6vmin, 18px);
  min-height: clamp(84px, 15vmin, 142px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2vmin, 24px);
  flex-wrap: wrap;
  padding: clamp(8px, 1.4vmin, 16px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    repeating-linear-gradient(90deg, rgba(150, 110, 60, .09) 0 22px, transparent 22px 46px),
    linear-gradient(180deg, #f6e6cd, #e0c69f);
  border: clamp(3px, .6vmin, 6px) solid #b98f5c;
  box-shadow: inset 0 6px 12px rgba(120, 84, 44, .18);
  transition: background-color .16s ease;
}
.bal-tray.hint-pulse { box-shadow: 0 0 0 4px #e8a33c88; }

.bl-weight {
  width: clamp(56px, 10vmin, 108px);
  aspect-ratio: 1;
  border: none;
  background: none;
  padding: 0;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .16s ease, filter .16s ease;
  filter: drop-shadow(0 4px 5px rgba(40, 80, 110, .32));
}
.bl-weight svg { width: 100%; height: 100%; display: block; pointer-events: none; }
.bl-weight:active { cursor: grabbing; }
.bl-weight.dragging { opacity: .3; }
/* נחיתה במגרעת - ריטוט קצר שנותן תחושה של משקל */
.bl-weight.thud { animation: blThud .34s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes blThud {
  0%   { transform: translateY(-16px) scale(1.1); }
  55%  { transform: translateY(2px) scale(.96); }
  100% { transform: translateY(0) scale(1); }
}
/* הקשה על חפץ שעדיין במגש - מסמן שצריך לגרור אותו */
.bl-weight.nudge { animation: blNudge .5s ease; }
@keyframes blNudge {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-7px) rotate(-5deg); }
  75%      { transform: translateX(7px) rotate(5deg); }
}

/* ניצוצות ההצלחה */
.bl-spark {
  position: absolute;
  width: clamp(10px, 1.8vmin, 18px);
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle, #fff8d2 0 35%, #ffd25e 36% 62%, transparent 63%);
  animation: blSpark 1.25s ease-out forwards;
  z-index: 5;
}
@keyframes blSpark {
  0%   { transform: scale(0) rotate(0deg); opacity: 0; }
  25%  { transform: scale(1.25) rotate(80deg); opacity: 1; }
  100% { transform: translateY(-46px) scale(.35) rotate(200deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .bal-beam, .bal-needle { transition: none; }
  .bl-weight.thud, .bl-weight.nudge, .bl-spark, .bal-rig.won .bal-beam { animation: none; }
}

/* ---------------------------------------------- 3. עקבות */
/*
  הלוח חייב לשמור על מידות קבועות לאורך כל הסבב, כי המשחק
  מבקש מהילד לזכור מיקומים.

  * grid-template-rows מוגדר במפורש. בלי זה גובה כל שורה נקבע
    לפי התוכן שלה, וכל עקבה שנדלקה הגדילה את השורה שלה תוך כדי
    ההצגה - בדיוק ה"משבצות משנות גודל" שדווח.
  * הגודל נגזר מ-svh ולא מ-dvh. dvh משתנה כשסרגל הדפדפן בטאבלט
    נכנס ונעלם, וזה הזיז את הלוח באמצע הזכירה.
  * שום מצב של תא לא משנה גיאומטריה - רק צבע והילה.
*/
.tr-board {
  display: grid;
  grid-template-columns: repeat(var(--n, 5), 1fr);
  grid-template-rows: repeat(var(--n, 5), 1fr);
  place-items: stretch;
  gap: clamp(4px, .8vmin, 10px);
  padding: clamp(8px, 1.6vmin, 16px);
  border-radius: clamp(14px, 2.4vmin, 26px);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .95), transparent 62%),
    linear-gradient(180deg, #f6fcff, #cfe6f6);
  border: clamp(5px, 1vmin, 10px) solid #9fc9e0;
  box-shadow: 0 10px 28px rgba(40, 80, 110, .26),
              inset 0 2px 0 rgba(255, 255, 255, .8);
  width: min(84vw, calc(100svh - 220px));
  aspect-ratio: 1 / 1;
  direction: ltr;
}
@media (min-aspect-ratio: 1/1) {
  .tr-board { width: min(calc(100vw - 300px), calc(100svh - 140px)); }
}
.tr-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: none;
  border-radius: 14%;
  background:
    radial-gradient(120% 80% at 30% 20%, rgba(255, 255, 255, .95), transparent 60%),
    rgba(255, 255, 255, .68);
  box-shadow: inset 0 0 0 2px rgba(159, 201, 224, .45),
              inset 0 -4px 8px rgba(120, 170, 200, .16);
  cursor: pointer;
  /* כאן אחוזים *נכונים*: תא ברשת, וההורה שלו הוא שטח התא עצמו */
  padding: 11%;
  transition: background-color .2s ease, box-shadow .2s ease;
}
.tr-cell svg { width: 100%; height: 100%; display: block; }
/* הדגשה בהילה בלבד - הגיאומטריה של התא לא זזה אף פעם */
.tr-cell.lit {
  background: rgba(199, 236, 255, .98);
  box-shadow: inset 0 0 0 3px #6fb0d8, 0 0 clamp(8px, 1.6vmin, 18px) rgba(111, 176, 216, .8);
}
.tr-cell.step {
  background: rgba(159, 232, 172, .5);
  box-shadow: inset 0 0 0 3px #5fbf74;
}
.tr-cell.trail-win {
  background: rgba(127, 224, 138, .85);
  box-shadow: inset 0 0 0 3px #3f9e56, 0 0 clamp(8px, 1.6vmin, 18px) rgba(90, 200, 120, .9);
}
/* טעות: העקבה מרעידה, לא התא - הרשת נשארת נעולה במקומה */
.tr-cell.wrong svg, .tr-cell.wrong::after { animation: trWrong .34s ease; }
.tr-cell.wrong::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 50%;
  background: rgba(224, 160, 120, .32);
}
@keyframes trWrong {
  0%, 100% { transform: translateX(0); }
  30%      { transform: translateX(-9%); }
  70%      { transform: translateX(9%); }
}
.tr-cell.hint-pulse {
  animation: trHint 1.2s ease-in-out infinite;
}
@keyframes trHint {
  0%, 100% { box-shadow: inset 0 0 0 3px rgba(232, 163, 60, .95), 0 0 0 0 rgba(232, 163, 60, .7); }
  50%      { box-shadow: inset 0 0 0 3px rgba(232, 163, 60, .95),
                         0 0 0 clamp(7px, 1.4vmin, 14px) rgba(232, 163, 60, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .sl-gem, .sl-hero.sliding, .sl-hero.arrived, .bal-beam,
  .bal-rig.won .bal-beam, .tr-cell.lit,
  .sl-cell.hint-pulse, .sl-arrow.hint-pulse,
  .bl-slot.hint-pulse, .tr-cell.hint-pulse { animation: none; transition: none; }
}

/* ==========================================================
   אנימציות ממלכת הקרח - איורי היצורים והמפה
   ========================================================== */
.ic-shimmer { animation: icShim 3.2s ease-in-out infinite; }
@keyframes icShim { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.im-aurora { animation: imAurora 24s ease-in-out infinite; transform-origin: center; }
@keyframes imAurora {
  0%, 100% { transform: translateY(0) scaleY(1); opacity: .9; }
  50%      { transform: translateY(-16px) scaleY(1.12); opacity: 1; }
}
.im-arc { animation: imArc 8s ease-in-out infinite; }
.im-arc.d2 { animation-duration: 11s; animation-delay: -3s; }
.im-arc.d3 { animation-duration: 14s; animation-delay: -6s; }
@keyframes imArc { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

.im-star { animation: imStar 5s ease-in-out infinite; }
.im-star.s1 { animation-duration: 7s; animation-delay: -2s; }
.im-star.s2 { animation-duration: 9s; animation-delay: -4s; }
@keyframes imStar { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.im-flake { animation: imFlake 16s linear infinite; }
.im-flake.f1 { animation-duration: 21s; animation-delay: -6s; }
.im-flake.f2 { animation-duration: 18s; animation-delay: -11s; }
.im-flake.f3 { animation-duration: 24s; animation-delay: -3s; }
.im-flake.f4 { animation-duration: 19s; animation-delay: -15s; }
@keyframes imFlake {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: .85; }
  90%  { opacity: .5; }
  100% { transform: translate(-40px, 320px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ic-shimmer, .im-aurora, .im-arc, .im-star, .im-flake { animation: none; }
}