/* ===== база секции с видео ===== */
main{padding:0}
html,body{overflow-x:clip}

#effulgence{
  position:relative;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  width:100vw; min-height:72vh;
  overflow:hidden; background:#0a0f24;
}

/* фоновое видео */
#effulgence .yt-wrap{position:absolute; inset:0;}
#effulgence .yt-bg{
  position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%);
  width:130%; height:130%; min-width:100%; min-height:100%;
  aspect-ratio:16/9; pointer-events:none;
}
#effulgence .veil{background:none}

/* слой с карточками поверх видео */
#effulgence .cards-layer{position:absolute; inset:0; z-index:2;}

/* ===== переменные выравнивания ===== */
:root{
  --gutter-x: clamp(16px, 5vw, 48px); /* одинаковый боковой отступ */
  --cards-top: 4vh;                   /* линия верха карточек */
}

/* ===== общая карточка ===== */
#effulgence .card{
  position:absolute;                  /* ключ — остаёмся absolute на десктопе */
  max-width:min(45ch, 40vw);
  padding:20px 22px;
  color:#fff; background:rgba(20,20,22,.72);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px; backdrop-filter:blur(3px);
  -webkit-backdrop-filter:blur(3px);
  box-shadow:0 12px 32px rgba(0,0,0,.38);
}

/* типографика */
#effulgence .card .kicker{margin:0 0 6px; font-family:var(--font-pixel); font-size:clamp(18px,2.6vw,26px); letter-spacing:.02em;}
#effulgence .card .kicker span{color:var(--accent)}
#effulgence .card .lead{margin:0 0 8px; font-size:clamp(14px,1.15vw,16px)}
#effulgence .card .meta{margin:0 0 10px; opacity:.95}

/* зелёная кнопка */
#effulgence .btn-accent{
  display:inline-block; background:var(--accent); color:#081a36;
  font-weight:900; padding:10px 14px; border-radius:10px;
  border:1px solid rgba(0,0,0,.15);
  transition:transform .12s, box-shadow .12s, background .2s;
}
#effulgence .btn-accent:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.35); background:#79d24c}

/* ===== размещение карточек на десктопе ===== */
#effulgence .card.merch.left-top{
  left:var(--gutter-x); top:var(--cards-top);
  max-width:min(30ch, 26vw); padding:12px 14px 40px;
}
#effulgence .card.big.center-top{
  left:50%; top:var(--cards-top); transform:translateX(-50%);
  max-width:min(45ch, 40vw);
}
#effulgence .card.prev.right-top{
  right:var(--gutter-x); top:var(--cards-top);
  max-width:min(42ch, 36vw); display:grid; gap:10px;
}
#effulgence .card.small.left-bottom{
  left:var(--gutter-x); bottom:clamp(20px,4vw,56px);
  max-width:min(30ch, 28vw);
}

/* мини-видео внутри карточек */
#effulgence .card .mini-yt{
  position:relative; width:100%; aspect-ratio:16/9;
  border-radius:10px; overflow:hidden;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.12); margin-top:8px;
}
#effulgence .card .mini-yt iframe{width:100%; height:100%; border:0; display:block;}
#effulgence .card .mini-yt .btn-overlay{
  position:absolute; left:50%; bottom:8px; transform:translateX(-50%);
  white-space:nowrap; padding:8px 12px; border-radius:10px;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
}

/* ===== мерч-карусель (компактная) ===== */
#effulgence .carousel{position:relative; width:100%; aspect-ratio:4/3; border-radius:8px; overflow:hidden;}
#effulgence .carousel .slides{display:flex; width:500%; height:100%; transform:translateX(0); transition:transform .5s ease;}
#effulgence .carousel img{width:100%; height:100%; object-fit:cover; flex:0 0 20%;}
#effulgence .carousel .dots{position:absolute; left:8px; bottom:8px; display:flex; gap:6px;}
#effulgence .carousel .dots i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.35)}
#effulgence .carousel .dots i.active{background:#fff}
#effulgence .merch .merch-title{font-family:var(--font-mono); font-weight:800; margin-bottom:6px; text-align:center; font-size:.95rem;}
#effulgence .merch .merch-btn{
  position:absolute; right:10px; bottom:10px; z-index:5;
  padding:6px 12px; font-size:.9rem; white-space:nowrap;
  border-radius:8px; box-shadow:0 4px 12px rgba(0,0,0,.4);
}

/* ===== форма подписки ===== */
#effulgence .signup{display:grid; gap:8px}
#effulgence .signup .title{font-family:var(--font-mono); font-weight:700}
#effulgence .signup button{background:var(--accent); color:#051a32; border:none; font-weight:900; border-radius:8px; padding:10px 14px; cursor:pointer;}
#effulgence .signup .hint{opacity:.8; font-size:.9em}

/* форма подписки внутри карточки */
#effulgence .signup form{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  width: 100%;         /* форма не шире карточки */
  max-width: 100%;
}

#effulgence .signup input[type="email"]{
  min-width: 0;        /* важно: разрешает ужимать поле в гриде */
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  outline: none;
}

/* ===== «двойная» псевдографическая рамка + внутренняя чёрная окантовка ===== */
.ascii-frame{
  --af-outer: rgba(160,255,160,.95);
  --af-inner: rgba( 80,210, 80,.98);
  --af-gap:4px; --af-line:2px; --af-corner:10px; --af-inset:var(--af-corner);
  position:relative; border:0!important; border-radius:0!important;
  box-shadow:inset 0 0 0 var(--af-inset) rgba(0,0,0,.72); /* внутренняя окантовка */
}
.ascii-frame::before,.ascii-frame::after{content:""; position:absolute; inset:0; pointer-events:none; z-index:3;}
.ascii-frame::before{border:var(--af-line) solid var(--af-outer)}
.ascii-frame::after {inset:calc(var(--af-gap) + var(--af-line)); border:var(--af-line) solid var(--af-inner)}
.ascii-frame.ascii-pixel::before,.ascii-frame.ascii-pixel::after{
  border-radius:0!important;
  -webkit-mask:
    linear-gradient(#000 0 0) top left,
    linear-gradient(#000 0 0) top right,
    linear-gradient(#000 0 0) bottom left,
    linear-gradient(#000 0 0) bottom right;
  -webkit-mask-size:var(--af-corner) var(--af-corner);
  -webkit-mask-repeat:no-repeat;
          mask:
    linear-gradient(#000 0 0) top left,
    linear-gradient(#000 0 0) top right,
    linear-gradient(#000 0 0) bottom left,
    linear-gradient(#000 0 0) bottom right;
          mask-size:var(--af-corner) var(--af-corner);
          mask-repeat:no-repeat;
}

/* ===== адаптив ≤ 980px: всё в колонку ===== */
@media (max-width:980px){
  #effulgence .cards-layer{
    position:relative; inset:auto;
    display:flex; flex-direction:column; gap:10px;
    align-items:stretch; padding:12vh clamp(16px,6vw,48px) 20px;
  }
  #effulgence .card{
    position:static; transform:none; top:auto; left:auto; right:auto;
    max-width:760px; margin:0 auto;
  }
}

/* ===== Fix pack (layout & inner rim) — 2025-09-07 ===== */

/* 1) Внутренняя чёрная окантовка + внешний drop shadow одновременно.
   Высшая специфичность, чтобы не перебивалось базовым .card */
#effulgence .card.ascii-frame{
  box-shadow:
    inset 0 0 0 var(--af-inset) rgba(0,0,0,.72), /* внутренняя кайма */
    0 12px 32px rgba(0,0,0,.38);                 /* внешний объём */
  overflow: visible; /* не обрезать пиксельные уголки */
}

/* 2) Чуть увеличим межкарточные интервалы на десктопе (безопасно) */
#effulgence .cards-layer{
  gap: clamp(14px, 2.2vw, 26px);
}

/* 3) Одноколоночный режим: центрируем ВСЕ карточки и даём вертикальный зазор */
@media (max-width: 980px){
  /* сам слой поверх видео превращаем в колонку и центрируем всё по ширине */
  #effulgence .cards-layer{
    position: relative;
    inset: auto;
    display: grid;                 /* вместо flex — grid попроще центрировать */
    grid-auto-rows: auto;
    justify-items: center;         /* <-- центрируем КАЖДУЮ карточку */
    gap: clamp(14px, 3vw, 22px);   /* равномерные вертикальные отступы */
    padding: 12vh clamp(16px, 6vw, 48px) 20px;
  }

  /* сами карточки в потоке */
  #effulgence .card{
    position: static;
    max-width: min(760px, 92vw);   /* не в полную ширину, а красиво “дышим” */
    transform: none;
    margin: 0;                     /* за отступы теперь отвечает gap */
  }
}

:root{
  --cards-top: 4vh;
  --gutter-x: clamp(16px, 5vw, 48px);
}

#effulgence .card.small.left-top{ left:var(--gutter-x); top:var(--cards-top); }
#effulgence .card.big.center-top{ left:50%; top:var(--cards-top); transform:translateX(-50%); }
#effulgence .card.prev.right-top{ right:var(--gutter-x); top:var(--cards-top); }

/* ====== Узкие экраны: карточки в колонке, по центру ====== */
@media (max-width: 980px){

  /* слой с карточками перестаёт быть абсолютным и становится вертикальной колонкой */
  #effulgence .cards-layer{
    position: relative;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: center;          /* центрируем по горизонтали */
    gap: 16px;                    /* вертикальные промежутки между карточками */
    padding: 12vh clamp(16px,6vw,48px) 44px;
  }

  /* любые карточки — в поток, фикс ширины и отступы */
  #effulgence .card{
    position: static !important;  /* снимаем absolute */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;

    width: min(760px, 92vw);      /* комфортная ширина на мобилках/планшетах */
    max-width: none;
    margin: 0 auto;               /* на всякий случай */
    overflow: visible;            /* чтобы уголки не резались */
  }

  /* на узких — все «специальные» карточки тоже обнуляем (перестраховка)*/
  #effulgence .card.big.center-top,
  #effulgence .card.prev.right-top,
  #effulgence .card.small.left-top,
  #effulgence .card.small.left-bottom{
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(760px, 92vw);
  }

  /* форма подписки: кнопка точно уместится внутри карточки */
  #effulgence .signup form{
    grid-template-columns: 1fr auto;
    gap: 10px;
  }
  #effulgence .signup input[type="email"]{ min-width: 0; }
  #effulgence .signup button{ white-space: nowrap; }
}

/* ====== Гарантии для рамки и «внутренней» чёрной окантовки ====== */
/* карточки никогда не режут псевдо-уголки */
#effulgence .card{ overflow: visible; }

/* чёрная внутренняя окантовка той же толщины, что и «угол» */
.ascii-frame{
  --af-corner: 10px;   /* если нужно, можно увеличить/уменьшить */
  --af-inset: var(--af-corner);
  box-shadow: inset 0 0 0 var(--af-inset) rgba(0,0,0,.72);
}

/* === MailerLite inside subscribe card (scoped) === */
#effulgence .subscribe-card .ml-form-embedContainer { width:100% !important; display:block; }
#effulgence .subscribe-card .ml-form-embedWrapper { 
  width:100% !important; max-width:none !important;
  background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important;
}
#effulgence .subscribe-card .ml-form-embedBody,
#effulgence .subscribe-card .row-success { padding:0 !important; }

/* Скрываем заголовок/текст внутри embeda — используем свой .title и .hint */
#effulgence .subscribe-card .ml-form-embedContent { display:none !important; }

/* Раскладка инпут + кнопка в одну строку, как у твоей формы */
#effulgence .subscribe-card .ml-form-horizontalRow { 
  display:grid; grid-template-columns: 1fr auto; gap:8px; width:100%;
}

/* Инпут — в твоём стиле (прозрачный, скругления и т.д.) */
#effulgence .subscribe-card input[type="email"]{
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  border-radius:8px !important;
  padding:10px 12px !important;
  outline:none !important;
  width:100% !important;
}

/* Кнопка — зелёная как твоя .btn-accent */
#effulgence .subscribe-card button.primary{
  background:var(--accent) !important; color:#051a32 !important;
  border:none !important; font-weight:900 !important;
  border-radius:8px !important; padding:10px 14px !important; cursor:pointer !important;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease !important;
}
#effulgence .subscribe-card button.primary:hover{
  transform:translateY(-1px); box-shadow:0 10px 24px rgba(0,0,0,.35); background:#79d24c !important;
}

/* Чтобы их «мобильная» кнопка не дублировалась */
#effulgence .subscribe-card .ml-mobileButton-horizontal{ display:none !important; }


/* === Mobile layout: широкие карточки, столбцом === */
@media (max-width: 900px){
  /* слой карточек становится контейнером */
  #effulgence .cards-layer{
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    justify-items: center;
    align-content: start;
    gap: 16px;                   /* вертикальные промежутки между карточками */
    padding: 16px 12px 28px;     /* поля вокруг */
  }

  /* каждая карточка — широкая и по центру */
  #effulgence .card{
    position: static !important; /* выходим из absolute на мобилках */
    width: min(96vw, 860px) !important;
    max-width: none !important;
    margin: 0 auto !important;
  }
}

/* Убираем подчеркивание именно у "зелёных" ссылок-кнопок */
#effulgence a.btn-accent,
#effulgence a.btn-accent:visited,
#effulgence a.btn-accent:hover,
#effulgence a.btn-accent:focus,
#effulgence .mini-yt .btn-overlay {
  text-decoration: none !important;
}

/* На всякий случай: любые ссылки, которые стилизованы как .btn-accent внутри карточек */
#effulgence .card a.btn-accent { text-decoration: none !important; }

/* === ORANGE HOVER (перекрывает прежний зелёный) === */
#effulgence .card a.btn-accent:hover,
#effulgence a.btn-accent:hover,
#effulgence button.btn-accent:hover,
#effulgence .mini-yt .btn-overlay.btn-accent:hover {
  background: #ff7a00 !important;   /* ярко-оранжевый */
  color: #0a0a0a !important;         /* чёрный текст */
  border-color: #ff7a00 !important;
  text-decoration: none !important;
}

/* MailerLite кнопка */
#effulgence .subscribe-card button.primary:hover,
#effulgence .ml-form-embedContainer button.primary:hover {
  background: #ff7a00 !important;
  color: #0a0a0a !important;
  border-color: #ff7a00 !important;
}

/* Плавность смены цвета (если ещё нет) */
#effulgence .btn-accent,
#effulgence .subscribe-card button.primary {
  transition: background .2s ease, color .2s ease, box-shadow .12s ease, transform .12s ease;
}

/* ===== Donate strip (image background with overlay) ===== */
.donate-strip {
  position: relative;
  margin-top: 0px;
}

.donate-strip .donate-bg {
  width: 100%;
  height: auto;
  display: block; /* картинка на всю ширину, сохраняет пропорции */
}

.donate-strip .donate-inner {
  position: absolute;
  inset: 0; /* растянуть по всей картинке */
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 22px;
  max-width: 960px;
  margin: 0 auto;
  gap: 16px;
}

.donate-strip .donate-text {
  font-family: var(--font-mono);
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.7); /* чтобы текст не терялся */
}

.donate-strip .btn-accent {
  display: inline-block;
  background: var(--accent);
  color: #081a36;
  font-weight: 900;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  transition: transform .12s, box-shadow .12s, background .2s;
  text-decoration: none;
}
.donate-strip .btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  background: #ff7a00;
  color: #0a0a0a;
  border-color: #ff7a00;
}

/* Мобильная версия */
@media (max-width: 600px) {
  .donate-strip .donate-inner {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 8px 12px;
  }
}

/* ===== Donate strip with background & card ===== */
.donate-strip {
  position: relative;
  margin-top: 0px;
}

.donate-strip .donate-bg {
  width: 100%;
  height: auto;
  display: block;
}

/* затемнение сверху картинки */
.donate-strip .donate-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.5) 2.5%, rgba(0,0,0,0.3) 2.6%, rgba(0,0,0,0.3) 5%, rgba(0,0,0,0) 5.1%);
  pointer-events: none;
  z-index: 1;
}

/* карточка доната поверх картинки */
.donate-strip .donate-card {
  position: absolute;
  left: 50%;
  bottom: 8%;
  transform: translateX(-50%);
  max-width: min(36ch, 90%);
  background: rgba(20,20,22,.85);
  color: #fff;
  padding: 18px 20px;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  z-index: 2;
}

.donate-strip .donate-title {
  font-family: var(--font-mono);
  font-weight: 700;
  margin-bottom: 8px;
  font-size: 1rem;
}

.donate-strip .donate-card p.lead {
  font-size: .9rem;
  margin-bottom: 12px;
}

/* кнопка внутри карточки */
.donate-strip .btn-accent {
  display: inline-block;
  background: var(--accent);
  color: #081a36;
  font-weight: 900;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.15);
  transition: transform .12s, box-shadow .12s, background .2s;
  text-decoration: none;
  position: relative;
  z-index: 3;
}
.donate-strip .btn-accent:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  background: #ff7a00;
  color: #0a0a0a;
  border-color: #ff7a00;
}

/* мобильная адаптация */
@media (max-width: 600px) {
  .donate-strip .donate-card {
    bottom: 4%;
    padding: 14px 16px;
  }
}