/* Церемония оформления Premium — «кино product-reveal + ударная физика». Полноэкранный
   оверлей ПОВЕРХ экрана подписки. Реальная карта #sub-plan уже премиум (activate);
   церемония играет КЛОНОМ по центру и в конце растворяется (FLIP) в реальный экран.
   ДВА холста: front (над картой) — искры ударов + детонация; top (в #app, поверх живого UI) —
   салют-конфетти. Перки-снаряды бьют карту DOM-чипами (.cer__perk). ЗВУК — процедурный
   (lib/ceremony-audio.js). Порядок линка: до responsive.css. Монтируется JS в #app. */

.cer {
  position: fixed; inset: 0; z-index: 90;
  opacity: 0; pointer-events: auto;
  transition: opacity .7s cubic-bezier(.2, .8, .2, 1); isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
.cer.cer--on { opacity: 1; }
/* Чёрный фон — ОТДЕЛЬНЫМ слоем: на посадке гаснет ТОЛЬКО он, а клон-карта (в .cer__stage)
   остаётся ВИДИМОЙ и ложится на страницу (иначе карта гасла вместе с чёрным). */
.cer__bg { position: absolute; inset: 0; z-index: 0; background: #000; transition: opacity .7s cubic-bezier(.2, .8, .2, 1); }
.cer.cer--out { pointer-events: none; }          /* не блокирует (конфетти/страница живут) */
.cer.cer--out .cer__bg { opacity: 0; }           /* гаснет ТОЛЬКО фон, клон остаётся */

/* Холсты: back под картой (заряд), front над картой (бум + конфетти). */
.cer__cv { position: fixed; inset: 0; pointer-events: none; }
.cer__cv--back { z-index: 1; }
.cer__cv--front { z-index: 3; }
/* Верхний холст конфетти — ПРЯМОЙ ребёнок #app (вне .cer), поверх живого UI/дока:
   переживает уход чёрного (.cer--out) и сыплет фонтаном снизу на финале. */
.cer__cv--top { position: fixed; inset: 0; z-index: 100; pointer-events: none; }

/* Сцена: карта по центру экрана (между холстами). */
.cer__stage {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 0 var(--gutter);
}

/* ОДНА карта-клон: старт = «Базовый» (тот же .sub__plan → база/кромка как у реальной карты,
   короткая, не пустая). На детонации JS меняет контент на премиум (+.cer__card--on = аврора) и
   карта дорастает до премиум-высоты. Инерцию/отскок целиком ведёт JS-пружина (transform), поэтому
   НЕТ transition на transform. Фон — переменной альфы (--cer-card-a): на пике заряда чуть просвечивает
   (обводка сквозь неё). Парит КРУПНЕЕ реальной → посадка читается ОТДАЛЕНИЕМ. */
.cer__card {
  position: relative; overflow: hidden; margin: 0; width: min(92%, 500px);
  will-change: transform; opacity: 0;
  background: rgba(var(--surface-1-rgb), var(--cer-card-a, 1));
  box-shadow: inset 0 0 0 1px var(--line-soft);   /* «Базовый» — тонкая кромка, как у реальной базы */
}

.cer__flash { position: fixed; inset: 0; z-index: 4; background: #dfecff; opacity: 0; pointer-events: none; transition: opacity .3s ease; }

/* Перк-снаряд: стеклянный чип летит из глубины и бьёт карту (JS-transform, translate(-50%,-50%)). */
.cer__perk {
  position: fixed; left: 0; top: 0; z-index: 2; pointer-events: none; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--accent-soft);
  padding: 8px 13px; border-radius: 12px;
  background: rgba(18, 24, 36, .66); box-shadow: inset 0 0 0 1px var(--accent-glow), 0 6px 20px rgba(0, 0, 0, .4);
  will-change: transform, opacity, filter;
}
/* Power-on: на детонации карта коротко «включается» ореолом и оседает к покою. */
.cer__card--lit { animation: cer-poweron .95s cubic-bezier(.22, 1, .36, 1); }
@keyframes cer-poweron {
  0% { box-shadow: 0 16px 46px -22px rgba(0, 0, 0, .85), 0 0 78px 6px var(--accent-glow); }
  100% { box-shadow: 0 16px 46px -22px rgba(0, 0, 0, .85), 0 0 40px -10px var(--accent-glow); }
}
@media (prefers-reduced-motion: reduce) { .cer__card--lit { animation: none; } }

/* Растущая обводка-заряд рисуется НА ХОЛСТЕ (ceremony-fx.js: fx.rim) — цельная светящаяся
   рамка вокруг клона, набирает силу с каждой влетающей плашкой. Никакого SVG-трека загрузки. */

/* Подсказка на чёрном: карта замерла → тихо всплывает «Нажми, чтобы продолжить» (тап/фолбэк). */
.cer__cue {
  position: fixed; left: 0; right: 0; z-index: 6; pointer-events: none;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 30px);
  text-align: center; font-size: 13px; letter-spacing: .01em; color: var(--text-2, #9fb0cc);
  opacity: 0; transform: translateY(6px);
  transition: opacity .5s ease, transform .5s var(--ease-cine, cubic-bezier(.2, .8, .2, 1));
}
.cer__cue.cer__cue--on { opacity: .6; transform: translateY(0); }

/* prefers-reduced-motion: церемония не запускается (JS-гейт), реальный экран уже премиум. */
@media (prefers-reduced-motion: reduce) {
  .cer, .cer__bg, .cer__card { transition: none; animation: none; }
  .cer__cue { transition: opacity .3s ease; transform: none; }
}

/* ========== ПРЕМИУМ-ПЛАШКА — «АВРОРА-СТЕКЛО + ВРАЩАЮЩИЙСЯ ОРЕОЛ» (выбор Артёма A+B).
   ОБЩАЯ: реальная .sub__plan--on И клон церемонии .cer__prem. Глубокое тёмно-синее стекло;
   по грани вращается световое КОЛЬЦО (::before conic — видно только 2px-кромкой, центр
   перекрыт внутренней панелью ::after); внутри дрейфует АВРОРА. Имя — статичный металлик.
   Синий-моно, две медленные детали (кольцо=transform, аврора=фон) — премиум, не слоп.
   Позиция: реальная карта relative; .cer__prem — absolute (оставлена выше). */
.sub .sub__plan--on,
.cer .cer__card--on {
  overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, #0b1224, #0a0e18 56%, #0c1430);
  box-shadow:
    inset 0 1px 0 rgba(234, 242, 255, 0.14),
    0 16px 46px -22px rgba(0, 0, 0, 0.85),
    0 0 36px -10px var(--accent-glow);
}
.sub .sub__plan--on { position: relative; }
.sub .sub__plan--on > *,
.cer .cer__card--on > * { position: relative; z-index: 2; }
/* ВРАЩАЮЩИЙСЯ ОРЕОЛ (B): большое conic-кольцо, крутится; overflow карты + панель ::after
   оставляют светящуюся кромку ~2px, бегущую по грани. Синий-моно, две дуги. */
.sub .sub__plan--on::before,
.cer .cer__card--on::before {
  content: ''; position: absolute; z-index: 0; inset: -75%; pointer-events: none;
  /* Непрерывное кольцо: НЕ падает в прозрачность (краёв/стыков дуг не видно) — тусклая
     синяя база по всей грани + две ярче-лобы плавно перетекают в неё; blur размывает
     переходы и скругляет обход углов (без «квадратных» моментов). */
  background: conic-gradient(from 0deg,
    rgba(61, 123, 255, 0.12), var(--accent-soft), var(--accent), rgba(61, 123, 255, 0.12),
    rgba(61, 123, 255, 0.12), var(--accent), var(--accent-soft), rgba(61, 123, 255, 0.12));
  filter: blur(3px);
  animation: plan-halo 8s linear infinite; will-change: transform;
}
@keyframes plan-halo { to { transform: rotate(1turn); } }
/* АВРОРА-СТЕКЛО (A): внутренняя панель перекрывает центр кольца (оставляя ~2px-кромку),
   несёт глубокое стекло + азур/синие пятна света, медленно дрейфующие (background-position). */
.sub .sub__plan--on::after,
.cer .cer__card--on::after {
  content: ''; position: absolute; z-index: 1; inset: 2px; pointer-events: none;
  border-radius: calc(var(--r-card) - 2px);
  /* Аврора приглушена (фидбек Артёма: в моменте перелива карта была слишком СВЕТЛОЙ —
     тёмненькая красивая). Дрейф остаётся, но лицо держится тёмным на любой фазе. */
  background:
    radial-gradient(56% 76% at 20% 16%, rgba(120, 168, 255, 0.19), transparent 60%),
    radial-gradient(52% 70% at 84% 96%, rgba(61, 123, 255, 0.15), transparent 60%),
    linear-gradient(160deg, #0a1020, #080b13 58%, #0a1226);
  background-size: 200% 200%, 220% 220%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 0 0;
  box-shadow: inset 0 1px 0 rgba(234, 242, 255, 0.08), inset 0 0 40px -16px var(--accent-glow);
  animation: plan-aurora 14s ease-in-out infinite alternate; will-change: background-position;
}
@keyframes plan-aurora {
  0% { background-position: 0% 0%, 100% 100%, 0 0; }
  100% { background-position: 100% 55%, 0% 45%, 0 0; }
}
/* Имя «BEATLY Premium» — статичный металлик (белый↔accent-soft). */
.sub .sub__plan--on .sub__plan-name,
.cer .cer__card--on .sub__plan-name {
  background-image: linear-gradient(96deg, #EAF2FF 0%, var(--accent-soft) 48%, #EAF2FF 82%, var(--accent-soft) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sub .sub__plan--on .sub__plan-name,
  .cer .cer__card--on .sub__plan-name { color: var(--accent-soft); -webkit-text-fill-color: currentColor; }
}
.sub .sub__plan--on .sub__plan-cap,
.cer .cer__card--on .sub__plan-cap { color: var(--accent-soft); opacity: 0.7; }
.sub .sub__plan--on .sub__plan-meta,
.cer .cer__card--on .sub__plan-meta { color: #c8d6f5; }
@media (prefers-reduced-motion: reduce) {
  .sub .sub__plan--on::before,
  .cer .cer__card--on::before { animation: none; opacity: 0; }
  .sub .sub__plan--on::after,
  .cer .cer__card--on::after { animation: none; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .sub .sub__plan--on,
  .cer .cer__card--on { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow-1); }
  .sub .sub__plan--on::before, .cer .cer__card--on::before,
  .sub .sub__plan--on::after, .cer .cer__card--on::after { display: none; }
}