/* Заставка при первом входе (js/intro.js): кольца, яблоко, продукты, корзина. */

.intro {
  position: fixed; inset: 0; z-index: 2000; overflow: hidden;
}
.intro::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, #fff6e8, #ffe4ec); transition: opacity .85s ease;
}
/* яблоко летит в шапку — фон растворяется, под ним уже приложение */
.intro.leaving::before { opacity: 0; }
.intro.leaving .intro-skip { opacity: 0; }

.intro-skip {
  position: absolute; top: calc(env(safe-area-inset-top) + 14px); right: 14px; z-index: 5;
  padding: 7px 14px; border: none; border-radius: 16px; font: inherit; font-size: 14px; font-weight: 700;
  color: #e8590c; background: rgba(255,255,255,.75); transition: opacity .3s;
}
.intro > div { position: absolute; }
.intro-rings { position: absolute; inset: 0; width: 100%; height: 100%; }

.intro-icon { width: 220px; height: 220px; z-index: 3; }
.intro-icon .apple { position: absolute; inset: 0; transform-origin: 50% 92%; }
.intro-icon .apple img { width: 100%; height: 100%; }
/* плитка иконки — та же, что у логотипа в шапке (css/layout.css) */
.intro-icon .tile {
  position: absolute; left: 30px; top: 30px; width: 160px; height: 160px; border-radius: 46px; opacity: 0;
  background: linear-gradient(140deg, #ffe066, #ff9a3c 50%, #ff5c8a);
  box-shadow: 0 18px 34px rgba(255,100,80,.4), inset 0 3px 0 rgba(255,255,255,.65), inset 0 -12px 20px rgba(180,30,60,.25);
}
.intro-shadow {
  width: 130px; height: 20px; border-radius: 50%; z-index: 2;
  background: radial-gradient(closest-side, rgba(120,50,30,.35), transparent);
}

.intro-item { z-index: 4; width: 90px; display: flex; flex-direction: column; align-items: center; }
.intro-item .em { font-size: 50px; line-height: 1; filter: drop-shadow(0 6px 8px rgba(120,50,30,.3)); }
.intro-item .tag {
  margin-top: 4px; padding: 3px 10px; border-radius: 12px; white-space: nowrap;
  color: #fff; font-weight: 800; font-size: 15px;
  background: linear-gradient(150deg, #ff9a8a, #ff4d4d);
  box-shadow: 0 5px 10px rgba(220,60,60,.35), inset 0 2px 0 rgba(255,255,255,.5);
}
.intro-item .tag.ok {
  background: linear-gradient(150deg, #8ef07a, #2f9e44);
  box-shadow: 0 5px 10px rgba(47,158,68,.4), inset 0 2px 0 rgba(255,255,255,.5);
}
.intro-item .tag s { opacity: .7; font-size: 12px; margin-right: 4px; }

.intro-basket {
  z-index: 3; font-size: 84px; line-height: 1; transform-origin: 50% 100%;
  filter: drop-shadow(0 10px 12px rgba(120,60,20,.3));
}
.intro-save {
  z-index: 4; height: 36px; padding: 0 18px; border-radius: 18px; white-space: nowrap;
  display: flex; align-items: center; background: #fff; color: #2f9e44; font-weight: 800; font-size: 17px;
  box-shadow: 0 8px 16px rgba(47,158,68,.2);
}
.intro-zap { z-index: 5; font-size: 24px; font-weight: 900; color: #ff6b4a; }

.intro-cf { z-index: 5; pointer-events: none; display: grid; place-items: center; font-weight: 800; }
.intro-cf.coin {
  width: 22px; height: 22px; border-radius: 50%; font-size: 12px; color: #9a5b00;
  background: radial-gradient(circle at 35% 30%, #fff3a0, #ffc107 55%, #e08a00);
}
.intro-cf.pct { font-size: 20px; }
.intro-cf.bit { width: 12px; height: 7px; border-radius: 4px; }