/*
  ======= Общие стили для баннеров FaucetPay =======

  Этот файл отвечает за визуальную «сцену» баннера без логики анимации:
  - Геометрия и порядок слоёв (кошелёк, монеты, сияние, подписи, теглайн)
  - Кликабельный слой (вся площадь баннера — это одна ссылка)
  - Фоновая сетка + радиальный верхний градиент (замена raster bg.svg)
  - Базовые размеры элементов через CSS-переменные (можно твикать под размер)

  Замечания:
  - Все анимируемые элементы позиционируются через transform (GPU‑дружественно).
  - Идём от «чистого» первого кадра (без движухи) — фон собирается CSS‑ом,
    чтобы выглядел аккуратно даже при disabled motion.
  - Для разных размеров можно переопределять переменные (например, --wallet-w)
    прямо в <style> внутри конкретного banners/<size>/index.html.
*/

/* ==== CSS фон как в bg.svg (сетка + multiply-градиент) ==== */
:root {
  --bg: #0b0e13;
  --bg2: #0f131b;
  /* slightly brighter glow */
  --glow: rgba(255, 204, 0, 0.18);

  /* Размеры элементов (можно переопределять per-size через config.cssVars) */
  --wallet-w: 145px;              /* базовая ширина кошелька */
  --wallet-h: auto;               /* высота кошелька (auto сохраняет пропорции исходного SVG) */
  --coin-size: 28px;              /* фоновые монеты */
  --coin-named-size: 52px;        /* именные монеты (влёт) */
  --coin-float-size: 72px;        /* монеты на shine‑этапе */
  --wallet-inner-w-scale: 0.86;   /* ширина кармана = wallet-w * scale */
  --wallet-inner-h: 78px;         /* высота кармана */
  --wallet-inner-mt: 8px;         /* смещение кармана вверх/вниз */
  --wallet-inner-ml: -6px;        /* смещение кармана влево/вправо */
  --tagline-w-scale: 1.365;       /* ширина теглайна = wallet-w * scale */
  --tagline-left: 50%;            /* позиция теглайна по горизонтали */
  --tagline-top: 50%;             /* позиция теглайна по вертикали */
  --tagline-offset-x: 0px;        /* сдвиг теглайна по X */
  --tagline-offset-y: -66px;      /* сдвиг теглайна по Y */
  --tagline-lift: 0px;            /* автоматический сдвиг от логики (не трогать вручную) */
  --shine-w: calc(var(--wallet-w) * 1.3); /* ширина shine */
  --shine-h: 0px;                /* высота shine */

  /* CTA (кнопка Claim Now) */
  --cta-w: 200px;                 /* ширина кнопки */
  --cta-h: auto;                  /* высота кнопки (auto — из SVG) */
  --cta-left: 50%;                /* позиция кнопки относительно сцены */
  --cta-top: 50%;
  --cta-offset-x: 0px;            /* доп. сдвиг после центрирования */
  --cta-offset-y: 0px;
  --cta-label-w-scale: 0.33;      /* ширина надписи = cta-w * scale (если label-w не задан) */
  --cta-label-w: calc(var(--cta-w) * var(--cta-label-w-scale));
  --cta-label-h: auto;
  --cta-label-offset-x: 0px;      /* индивидуальный сдвиг подписи */
  --cta-label-offset-y: 0px;
  /* CTA glow (box-shadow) */
  --cta-glow-duration: 2.8s;
  --cta-glow-min-blur: 8px;
  --cta-glow-max-blur: 18px;
  --cta-glow-min-spread: 0px;
  --cta-glow-max-spread: 3px;
  --cta-glow-min-alpha: .35;
  --cta-glow-max-alpha: .75;
  --cta-glow-rgb: 85,162,255;      /* базовый цвет свечения (RGB) */
  --cta-glow-anim: none;           /* токен анимации (включает JS по config.cta.glow.enabled) */
}

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

/*
  Кликабельный слой.
  Весь баннер — одна ссылка (<a id="clickLayer" class="banner">),
  поведение клика настраивается в common/utils.js (clickTag, data‑атрибуты и т.п.).
*/
a.banner {
  display: block;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;

  /* CSS-only background for first frame */
  background:
    radial-gradient(60% 55% at 50% 35%, #111827 0%, var(--bg) 65%),
    radial-gradient(40% 35% at 85% 80%, var(--glow) 0%, rgba(0,0,0,0) 70%),
    linear-gradient(180deg, var(--bg2) 0%, var(--bg) 100%);
}

a.banner:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/*
  Сцена и слои.
  .stage — контейнер под все динамические слои (монеты, кошелёк, shine, подписи).
  Каждый слой — абсолютный, растянутый на всю сцену, упорядочен по z-index ниже.
*/
.stage { width: 100%; height: 100%; position: relative; }
.layer { position: absolute; inset: 0; }

/*
  Порядок наложения (важно для «правильного» попадания монет внутрь кошелька):
  bg coins (1) < wallet-back (2) < shine (3) < coins-feature (4)
  < wallet-inner (4) < labels (4) < wallet-mid (5) < tagline (6)
*/
#spotlight { z-index: 0; }
#coins-bg { z-index: 1; }
#wallet-back { z-index: 2; }
#shine { z-index: 3; }
#coins-feature { z-index: 4; }
#wallet-inner { z-index: 4; }
#labels { z-index: 4; }
#wallet-mid { z-index: 5; }
#tagline { z-index: 6; }
/* CTA поверх остального */
#cta-button { z-index: 7; }
#cta-label  { z-index: 8; }

/*
  Визуальные элементы кошелька и сияния.
  Центруем по сцене через translate(-50%,-50%) и масштабируем от переменной
  ширины кошелька (--wallet-w). Все элементы «немые» (pointer-events: none),
  клик ловится на внешнем <a>.
*/
#wallet-back,
#wallet-mid {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--wallet-w);
  height: var(--wallet-h, auto);
  display: block;
  pointer-events: none;
}

#shine {
  position: absolute;
  object-fit: fill;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: var(--shine-w);
  height: var(--shine-h, auto);
  display: block;
  pointer-events: none;
}

/* CTA: центрируем и настраиваем размеры через переменные */
#cta-button,
#cta-label {
  position: absolute;
  left: var(--cta-left, 50%);
  top: var(--cta-top, 50%);
  width: auto; height: auto;
  display: block;
  pointer-events: none; /* клик ловит внешний <a> */
}

#cta-button {
  width: var(--cta-w);
  height: var(--cta-h, auto);
  transform: translate(-50%, -50%) translate(var(--cta-offset-x, 0px), var(--cta-offset-y, 0px));
  border-radius: 9999px; /* подстрахуем форму для fallback */
  /* Свечение через drop-shadow — уважает прозрачные углы SVG и выглядит корректно */
  filter: drop-shadow(0 0 var(--cta-glow-min-blur)
           rgba(var(--cta-glow-rgb), var(--cta-glow-min-alpha)));
  animation: var(--cta-glow-anim, none);
  will-change: filter, transform, opacity;
}
#cta-label  {
  width: var(--cta-label-w, calc(var(--cta-w) * var(--cta-label-w-scale)));
  height: var(--cta-label-h, auto);
  transform: translate(-50%, -50%)
             translate(var(--cta-offset-x, 0px), var(--cta-offset-y, 0px))
             translate(var(--cta-label-offset-x, 0px), var(--cta-label-offset-y, 0px));
  opacity: 0;
}

/* Ключевые кадры пульсации свечения кнопки (box-shadow) */
@keyframes cta-glow {
  0%, 100% {
    --cta-glow-blur: var(--cta-glow-min-blur);
    --cta-glow-alpha: var(--cta-glow-min-alpha);
    filter: drop-shadow(0 0 var(--cta-glow-blur)
            rgba(var(--cta-glow-rgb), var(--cta-glow-alpha)));
  }
  50% {
    --cta-glow-blur: var(--cta-glow-max-blur);
    --cta-glow-alpha: var(--cta-glow-max-alpha);
    filter: drop-shadow(0 0 var(--cta-glow-blur)
            rgba(var(--cta-glow-rgb), var(--cta-glow-alpha)));
  }
}

/*
  «Кармашек» кошелька, куда «падают» монеты.
  Это обычный блок с overflow: hidden — создаёт иллюзию, что монеты исчезают внутри.
  Позиционируется относительно центра кошелька, размеры подбираются визуально.
*/
#wallet-inner {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: calc(var(--wallet-w) * var(--wallet-inner-w-scale));
  height: var(--wallet-inner-h);
  margin-top: var(--wallet-inner-mt); /* приподнять ближе к кромке */
  margin-left: var(--wallet-inner-ml); /* чуть левее */
  overflow: hidden;
  border-radius: 12px;
  pointer-events: none;
}

/*
  Теглайн над кошельком. Изначально скрыт (opacity: 0),
  проявляется на финальном этапе анимации.
*/
#tagline {
  position: absolute;
  left: var(--tagline-left, 50%);
  top: var(--tagline-top, 50%);
  transform: translate(-50%, -50%)
             translate(var(--tagline-offset-x, 0px), var(--tagline-offset-y, 0px))
             translate(0px, var(--tagline-lift, 0px));
  width: calc(var(--wallet-w) * var(--tagline-w-scale)); /* +30% по умолчанию */
  height: auto;
  pointer-events: none;
  opacity: 0;
}

/* Подписи (Free Bitcoin/Dogecoin/Ethereum) — центрируем над линией shine */
#labels img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--shine-w);
  height: var(--shine-h, auto);
  transform: translate(0, 0);
  pointer-events: none;
  display: block;
}
.coin, .coin--named, .coin--float {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  will-change: transform, opacity, filter;
  pointer-events: none;
}

/* Базовые фоновые монеты — небольшие, с лёгким блюром в движении (см. JS) */
.coin { width: var(--coin-size); height: var(--coin-size); }

/* Именные монеты (DOGE/ETH/BTC), «ключевые» влёты */
.coin--named { width: var(--coin-named-size); height: var(--coin-named-size); }

/* Монеты «shine»-стадии (более крупные, всплывают и затем уменьшаются) */
.coin--float { width: var(--coin-float-size); height: var(--coin-float-size); }

/* Utilities */
.hidden { opacity: 0; }
/*
  Тюнинговые переменные (можно переопределять per-size в конкретном баннере):
  - Цветовая база, сетка, прозрачности и шаги линий
  - Радиальный верхний градиент в режиме multiply (как в исходном SVG)
  - Базовая ширина кошелька (--wallet-w), от неё зависят shine/inner/tagline
*/
:root{
  /* База фона */
  --bg-base-1: #0b0e13;
  --bg-base-2: #12131d; /* как в исходном SVG */

  /* Цвет сетки (#7F8EF4) в RGB для удобства прозрачности */
  --grid-r: 127; --grid-g: 142; --grid-b: 244;

  /* Параметры сетки */
  --grid-line: 1px;          /* толщина линий */
  --grid-fine-gap: 8px;      /* шаг «тонкой» сетки */
  --grid-bold-gap: 32px;     /* шаг «жирной» сетки */
  --grid-fine-alpha: .05;    /* прозрачность тонких линий */
  --grid-bold-alpha: .12;    /* прозрачность жирных линий */
  /* Фазовый сдвиг «жирной» сетки относительно «тонкой»,
     чтобы вертикальные/горизонтальные линии разных слоёв не совпадали */
  --grid-phase-v-bold: calc(var(--grid-fine-gap) / 2);
  --grid-phase-h-bold: calc(var(--grid-fine-gap) / 2);

  /* Радиальный градиент (как в SVG: #55A2FF -> #00003B с multiply .87) */
  --radial-top-opacity: .47;
  /* Базовая ширина кошелька (для масштабирования shine) */
  /* --wallet-w объявлена выше в корне */

  /* Параметры анимации сетки (drift + glow) — можно переопределять из config.cssVars */
  --grid-pos-x: .5px;            /* текущая позиция X (анимируется) */
  --grid-pos-y: .5px;            /* текущая позиция Y (анимируется) */
  --grid-drift-x: 64px;          /* смещение X за один цикл */
  --grid-drift-y: 38px;          /* смещение Y за один цикл */
  --grid-drift-duration: 48s;    /* длительность дрейфа */
  --grid-glow-duration: 6s;      /* длительность «перелива» яркости */
  --grid-drift-steps: 128;       /* дискретизация дрейфа (чем больше, тем плавнее) */
  --grid-anim-drift: none;       /* токен анимации дрейфа (включается кодом) */
  --grid-anim-glow: none;        /* токен анимации «перелива» (включается кодом) */

  /* Рад. градиент — параметры дрейфа/перелива */
  --radial-pos-x: 50%;           /* центр градиента по X (анимируется) */
  --radial-pos-y: 0%;            /* центр градиента по Y (анимируется) */
  --radial-drift-x: 56%;         /* целевая X за цикл */
  --radial-drift-y: 4%;          /* целевая Y за цикл */
  --radial-drift-duration: 60s;  /* длительность дрейфа радиала */
  --radial-glow-duration: 8s;    /* длительность «перелива» радиала */
  --radial-opacity-min: .47;     /* мин. непрозрачность радиала */
  --radial-opacity-max: .6;      /* макс. непрозрачность радиала */
  --radial-anim-drift: none;     /* токен анимации дрейфа радиала */
  --radial-anim-glow: none;      /* токен анимации «перелива» радиала */
}

/* Типизируем кастомные свойства для плавной анимации (поддерживается в современных браузерах) */
@property --grid-pos-x { syntax: '<length>'; inherits: true; initial-value: .5px; }
@property --grid-pos-y { syntax: '<length>'; inherits: true; initial-value: .5px; }
@property --grid-fine-alpha { syntax: '<number>'; inherits: true; initial-value: .05; }
@property --grid-bold-alpha { syntax: '<number>'; inherits: true; initial-value: .12; }
@property --grid-drift-x { syntax: '<length>'; inherits: true; initial-value: 64px; }
@property --grid-drift-y { syntax: '<length>'; inherits: true; initial-value: 38px; }
/* Анимируемые свойства для CTA glow */
@property --cta-glow-blur { syntax: '<length>'; inherits: true; initial-value: 8px; }
@property --cta-glow-spread { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --cta-glow-alpha { syntax: '<number>'; inherits: true; initial-value: .35; }
@property --radial-pos-x { syntax: '<percentage>'; inherits: true; initial-value: 50%; }
@property --radial-pos-y { syntax: '<percentage>'; inherits: true; initial-value: 0%; }
@property --radial-top-opacity { syntax: '<number>'; inherits: true; initial-value: .47; }
@property --radial-drift-x { syntax: '<percentage>'; inherits: true; initial-value: 56%; }
@property --radial-drift-y { syntax: '<percentage>'; inherits: true; initial-value: 4%; }

/* Контейнер баннера. Фоновая подложка — плавный вертикальный градиент */
a.banner{
  position: relative;
  display: block;
  overflow: hidden;
  background:
    /* легкая вертикальная подложка вместо raster bg.svg */
    linear-gradient(var(--bg-base-1), var(--bg-base-2));
  background-color: var(--bg-base-2);
}

/* Содержимое сцены всегда поверх сетки */
a.banner > .stage {
  position: relative;
  z-index: 1;
}

/* Spotlight — подсветка под кошельком, светлее и эллипс, движется вместе с кошельком
   Реализован как отдельный слой внутри .stage ниже остальных слоёв. */
#spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: calc(var(--spot-enabled) * var(--spot-opacity));
  mix-blend-mode: screen; /* делаем светлее, сохраняя детали фона и сетки */
  background:
    radial-gradient(
      ellipse var(--spot-rx) var(--spot-ry) at var(--spot-x) var(--spot-y),
      rgba(255,255,255, var(--spot-intensity)) 0%,
      rgba(255,255,255, calc(var(--spot-intensity) * .6)) 35%,
      rgba(255,255,255, 0) 70%
    );
  will-change: background;
}

/*
  Сетка — в псевдоэлементе ::before под сценой (z-index: 0).
  Рисуем её из четырёх repeating-linear-gradient:
    - тонкие вертикальные/горизонтальные (мелкая сетка)
    - жирные вертикальные/горизонтальные (крупная сетка)
  Полпикселя смещения — чтобы линии «ложились» на пиксельную сетку и не мыльнились.
*/
a.banner::before{
  content:"";
  position:absolute; inset:0;
  z-index:0;
  pointer-events:none;

  /* 4 слоя: тонкие вертикальные/горизонтальные + жирные вертикальные/горизонтальные
     Реализуем через «тайл» с заданным background-size, чтобы избежать артефактов
     repeating-linear-gradient. */
  background-image:
    /* тонкие вертикальные */
    linear-gradient(to right,
      rgba(var(--grid-r), var(--grid-g), var(--grid-b), var(--grid-fine-alpha)) var(--grid-line),
      transparent 0),
    /* тонкие горизонтальные */
    linear-gradient(to bottom,
      rgba(var(--grid-r), var(--grid-g), var(--grid-b), var(--grid-fine-alpha)) var(--grid-line),
      transparent 0),
    /* жирные вертикальные */
    linear-gradient(to right,
      rgba(var(--grid-r), var(--grid-g), var(--grid-b), var(--grid-bold-alpha)) var(--grid-line),
      transparent 0),
    /* жирные горизонтальные */
    linear-gradient(to bottom,
      rgba(var(--grid-r), var(--grid-g), var(--grid-b), var(--grid-bold-alpha)) var(--grid-line),
      transparent 0);

  /* Размер тайла = шаг сетки; повторяем */
  background-size:
    var(--grid-fine-gap) 100%,
    100% var(--grid-fine-gap),
    var(--grid-bold-gap) 100%,
    100% var(--grid-bold-gap);
  background-repeat: repeat;

  /* Позиция тайла (анимируется плавно) */
  background-position:
    var(--grid-pos-x) var(--grid-pos-y),
    var(--grid-pos-x) var(--grid-pos-y),
    var(--grid-pos-x) var(--grid-pos-y),
    var(--grid-pos-x) var(--grid-pos-y);

  /* плавная анимация дрейфа и лёгкого «перелива» яркости (включаются кодом через переменные) */
  animation:
    var(--grid-anim-drift, none),
    var(--grid-anim-glow, none);
}

/* Дрейф: медленно сдвигаем сетку вниз-вправо (через background-position,
   чтобы не зависеть от поддержки @property) */
@keyframes grid-drift-pos {
  from {
    background-position:
      var(--grid-pos-x) var(--grid-pos-y),
      var(--grid-pos-x) var(--grid-pos-y),
      var(--grid-pos-x) var(--grid-pos-y),
      var(--grid-pos-x) var(--grid-pos-y);
  }
  to {
    background-position:
      calc(var(--grid-pos-x) + var(--grid-drift-x)) calc(var(--grid-pos-y) + var(--grid-drift-y)),
      calc(var(--grid-pos-x) + var(--grid-drift-x)) calc(var(--grid-pos-y) + var(--grid-drift-y)),
      calc(var(--grid-pos-x) + var(--grid-drift-x)) calc(var(--grid-pos-y) + var(--grid-drift-y)),
      calc(var(--grid-pos-x) + var(--grid-drift-x)) calc(var(--grid-pos-y) + var(--grid-drift-y));
  }
}

/* Лёгкий «перелив» яркости линий сетки */
@keyframes grid-glow {
  0%, 100% {
    --grid-fine-alpha: .05;
    --grid-bold-alpha: .12;
  }
  50% {
    --grid-fine-alpha: .075;  /* немного ярче тонкие */
    --grid-bold-alpha: .16;   /* немного ярче жирные */
  }
}

/* Дрейф центра радиального градиента */
@keyframes radial-drift {
  to {
    --radial-pos-x: var(--radial-drift-x);
    --radial-pos-y: var(--radial-drift-y);
  }
}

/* Перелив непрозрачности радиального градиента */
@keyframes radial-glow {
  0%, 100% { --radial-top-opacity: var(--radial-opacity-min); }
  50%      { --radial-top-opacity: var(--radial-opacity-max); }
}

/*
  Радиальный синий градиент поверх сцены в режиме multiply (как в SVG макете).
  Он добавляет глубины сверху и усиливает «shine».
  Держим его в ::after и ставим ниже сцены (z-index: 0), чтобы не перекрывал контент.
*/
a.banner::after{
  content:"";
  position:absolute; inset:0;
  /* place below SVG/stage so it doesn't cover them */
  z-index:0;
  pointer-events:none;

  /* приближено к: radialGradient(#55A2FF 0% -> #00003B ~98%) */
  background:
    radial-gradient(65% 50% at var(--radial-pos-x) var(--radial-pos-y),
      rgba(85,162,255,0) 0%,
      rgba(0,0,59,1) 98%);
  mix-blend-mode: multiply;
  opacity: var(--radial-top-opacity);
  animation:
    var(--radial-anim-drift, none),
    var(--radial-anim-glow, none);
}

/*
  Фоллбек, если вдруг mix-blend-mode: multiply не поддерживается —
  просто слегка затемняем верх, чтобы не потерять читаемость.
*/
@supports not (mix-blend-mode: multiply) {
  a.banner::after { opacity: .45; } /* просто затемнит верх */
}