/* ═══════════════════════════════════════════════════════
   Кейс Minto — своё: мятный акцент, слой мелкого декора
   и три композиции. Скелет и механика — из ../shared.
   ═══════════════════════════════════════════════════════ */

/* ─── Акцент ──────────────────────────────────────── */
:root[data-case="minto"] {
  --accent: #2aa17f;                 /* мятный бренда, притушен для светлого фона */
  --glow:   109, 219, 179;
  --glow-a: .26;
}
@media (prefers-color-scheme: dark) {
  :root[data-case="minto"]:not([data-theme="light"]) {
    --accent: #6ddbb3;
    --glow:   109, 219, 179;
    --glow-a: .18;
  }
}
:root[data-case="minto"][data-theme="dark"] {
  --accent: #6ddbb3;
  --glow:   109, 219, 179;
  --glow-a: .18;
}

[data-case="minto"] .company__link:hover { color: var(--accent); }

/* знак Minto — широкий шеврон; в векторе он уже мятный,
   поэтому плоский запасной вариант не инвертируем по теме */
[data-case="minto"] .obj { aspect-ratio: 44 / 29; }
[data-case="minto"] .obj__fallback { filter: none; }
@media (min-width: 48rem) {
  [data-case="minto"] .hero__object { left: 30%; top: 72%; width: 32vw; max-width: 20rem; }
}

/* ─── Слой мелкого декора ─────────────────────────── */
/* Самородки, кольца, искры и пятна лежат абсолютом поверх секции
   и живут по тем же переменным, что и остальные объекты: --mx/--my
   от мыши, --py от скролла. На узких экранах декор скрыт —
   там он только мешает и грузит. */

.dec {
  position: absolute;
  pointer-events: none;
  z-index: 4;
  width: 6%;
  transform: translate3d(var(--mx, 0px), calc(var(--my, 0px) + var(--py, 0px)), 0);
  transition: transform .12s linear;
}
@media (max-width: 48rem) { .dec { display: none; } }

.sec-decor, .sec-app, .sec-brand, .compo { position: relative; }

/* мелочь вокруг первого экрана сайта */
.dec--n1   { width: 5.4%;  left: -2.5%;  top: 12%; }
.dec--n2   { width: 4.6%;  right: -3%;   top: 34%; }
.dec--n3   { width: 2.4%;  left: 8%;     bottom: 16%; }
.dec--cone { width: 3%;    right: 6%;    bottom: 8%; }
.dec--n4   { width: 5%;    left: -3%;    bottom: 12%; }

/* вспышка и искры вокруг приложения */
.dec--burst  { width: 62%; left: 50%; top: 46%; translate: -50% -50%; z-index: 1; opacity: .5; }
.dec--s1     { width: 7%;  right: 4%;  top: 6%; }
.dec--s2     { width: 4%;  left: 2%;   top: 30%; }
.dec--s3     { width: 2%;  right: 16%; bottom: 14%; }
.dec--s4     { width: 1.6%; left: 12%; bottom: 6%; }
.dec--s5     { width: 1.6%; right: 30%; top: 2%; }

/* фон и мелочь коллажа */
.dec--glow   { width: 70%; left: 50%; top: 52%; translate: -50% -50%; z-index: 0; opacity: .9; }
.dec--circle { width: 26%; left: 46%;  top: 30%; z-index: 1; opacity: .55; }
.dec--ring1  { width: 16%; left: 8%;   bottom: 24%; }
.dec--ring2  { width: 14%; right: 10%; top: 10%; }
.dec--n5     { width: 4.6%; left: 30%; bottom: 6%; }
.dec--n6     { width: 2.4%; right: 26%; bottom: 28%; }

/* ─── Композиции ──────────────────────────────────── */

/* А · Покупка: тёмный блок и таблица, наезжающая снизу справа */
.compo--buy { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
  .compo--buy { grid-template-columns: 1fr; padding-bottom: 8%; }
  .compo__i--exchange { width: 56%; }
  .compo__i--compare  { position: absolute; right: 0; bottom: 0; width: 52%; z-index: 3; }
}

/* Б · Приложение: широкий шот по центру, вспышка позади */
.compo--app { display: grid; place-items: center; }
.compo__i--app { position: relative; z-index: 2; width: 100%; }
@media (min-width: 48rem) { .compo__i--app { width: 78%; } }

/* В · Коллаж бренда — раскладка снята с референса:
   майнер слева сверху, подарок в центре, 200 % справа,
   самородок слева внизу, $25M крупно по центру снизу. */
.compo--kit { display: grid; gap: 2rem; }
@media (min-width: 48rem) {
  .compo--kit {
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(0, auto);
    align-items: center;
    padding: 4% 0 6%;
    gap: 0;
  }
  .compo__i--miner  { grid-column: 2 / span 3;  grid-row: 1; width: 100%; }
  .compo__i--gift   { grid-column: 6 / span 3;  grid-row: 1 / span 2; width: 100%; z-index: 3; margin-top: 18%; }
  .compo__i--p200   { grid-column: 9 / span 4;  grid-row: 1; width: 100%; margin-top: 6%; }
  .compo__i--nugget { grid-column: 1 / span 3;  grid-row: 2; width: 78%; margin-top: -6%; }
  .compo__i--m25    { grid-column: 4 / span 8;  grid-row: 3; width: 100%; margin-top: -8%; z-index: 2; }
}