/* ============================================================
   ENDLINGX - Componentes adaptados dos registries sv-blocks/sv-matrix
   (dot-matrix loader, progressive-blur, card-decorator, faq)
   Portados de Svelte/Tailwind para vanilla CSS na paleta do site
   ============================================================ */

/* ---------- 1. DOT-MATRIX LOADER (baseado em sv-matrix hex-1 "Hex Orbit") ----------
   Grade de pontos com dois "cometas" de glow percorrendo o perímetro. */
.preloader {
  position:fixed; inset:0; z-index:1000; background:var(--paper);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:26px;
  transition: opacity .6s ease, visibility .6s;
}
.preloader.done { opacity:0; visibility:hidden; pointer-events:none; }
.dm {
  --dm-size: 9;         /* linhas de células */
  --dm-gap: 7px;
  --dm-dot: 12px;
  --dm-color: var(--lime-ink);
  display:grid;
  grid-template-columns: repeat(var(--dm-size), var(--dm-dot));
  gap: var(--dm-gap);
}
.dm span {
  width:var(--dm-dot); height:var(--dm-dot); border-radius:50%;
  background:var(--dm-color); opacity:.1;
  /* cada dot tem um delay baseado no ângulo - o JS seta --d */
  animation: dmOrbit 1.6s cubic-bezier(.45,.05,.55,.95) infinite;
  animation-delay: var(--d, 0s);
}
@keyframes dmOrbit {
  0%,100% { opacity:.1; transform:scale(.7); }
  50%     { opacity:.95; transform:scale(1.15); }
}
.preloader .pl-word {
  font-family:'Archivo'; font-weight:800; letter-spacing:.34em; font-size:.9rem;
  color:var(--ink); opacity:0; animation:plWord 1.2s .2s ease forwards;
}
.preloader .pl-word i { color:var(--lime-ink); font-style:normal; }
@keyframes plWord { to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .dm span { animation-duration:3.6s; } }

/* ---------- 2. PROGRESSIVE BLUR (sv-blocks progressive-blur) ----------
   8 camadas de backdrop-filter com máscara em degradê - desvanece as bordas
   do rail do carrossel sem linha dura. */
.pblur {
  position:relative;
}
.pblur .rail {
  position:relative;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.pblur::before, .pblur::after {
  content:''; position:absolute; top:0; bottom:0; z-index:6; pointer-events:none;
  width:70px;
  --_layers: 8;
}
.pblur::after  { right:0; }
.pblur::before { left:0; }
/* máscara em degraus (primeira camada da direita p/ esquerda) - usamos 3 níveis
   de blur empilhados com masks escalonadas como no original */
.pblur .pblur-l {
  position:absolute; top:0; bottom:0; width:70px; pointer-events:none; z-index:7;
}
.pblur .pblur-l.r { right:0; }
.pblur .pblur-l.l { left:0; }
.pblur .pblur-l.b1 {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask-image: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.pblur .pblur-l.r.b1 {
  mask-image: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
.pblur .pblur-l.b2 {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to right, rgba(255,255,255,0) 34%, rgba(255,255,255,1) 66%, rgba(255,255,255,0) 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,0) 34%, rgba(255,255,255,1) 66%, rgba(255,255,255,0) 100%);
}
.pblur .pblur-l.r.b2 {
  mask-image: linear-gradient(to left, rgba(255,255,255,0) 34%, rgba(255,255,255,1) 66%, rgba(255,255,255,0) 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(255,255,255,0) 34%, rgba(255,255,255,1) 66%, rgba(255,255,255,0) 100%);
}
.pblur .pblur-l.b3 {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to right, rgba(255,255,255,0) 62%, rgba(255,255,255,1) 86%, rgba(255,255,255,0) 100%);
  -webkit-mask-image: linear-gradient(to right, rgba(255,255,255,0) 62%, rgba(255,255,255,1) 86%, rgba(255,255,255,0) 100%);
}
.pblur .pblur-l.r.b3 {
  mask-image: linear-gradient(to left, rgba(255,255,255,0) 62%, rgba(255,255,255,1) 86%, rgba(255,255,255,0) 100%);
  -webkit-mask-image: linear-gradient(to left, rgba(255,255,255,0) 62%, rgba(255,255,255,1) 86%, rgba(255,255,255,0) 100%);
}
/* em mobile as bordas são menores */
@media (max-width:640px) {
  .pblur .pblur-l { width:36px; }
}

/* ---------- 3. CARD-DECORATOR (sv-blocks) ----------
   Grade sutil de linhas com fade radial - aplicado nos tier-boxes. */
.decor {
  position:relative; overflow:hidden;
  --decor-line: rgba(14,16,11,.07);
}
.decor::before {
  content:''; position:absolute; inset:0;
  background-image:
    linear-gradient(to right, var(--decor-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--decor-line) 1px, transparent 1px);
  background-size: 24px 24px;
  opacity:0; transition: opacity .45s ease;
}
.decor::after {
  content:''; position:absolute; inset:0;
  background: radial-gradient(closest-side at 50% 45%, transparent 40%, var(--paper) 100%);
  opacity:0; transition: opacity .45s ease;
}
.decor:hover::before { opacity:1; }
.decor:hover::after { opacity:1; }
.decor > * { position:relative; z-index:2; }
/* barra lime do topo continua visível acima do decor */
.decor.hi::after { --paper: var(--paper); }
.tier-box.decor.hi { border-color: var(--lime-ink); }
.tier-box.decor.hi::after { background: radial-gradient(closest-side at 50% 45%, transparent 40%, #fff 100%); }

/* ---------- 4. FAQ (sv-blocks faq-one) ----------
   Duas colunas: título à esquerda, perguntas à direita com divisores tracejados. */
.faq-wrap { display:grid; gap:44px; }
@media (min-width:900px) {
  .faq-wrap { grid-template-columns: 1fr 1.2fr; gap:80px; align-items:start; }
}
.faq-head h2 { font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:800; line-height:1.1; }
.faq-head p { color:var(--ink-soft); margin-top:14px; max-width:380px; }
.faq-list { border-top:1px solid var(--line); }
.faq-item { border-bottom:1px solid var(--line); }
.faq-q {
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:22px 4px; font-family:'Archivo'; font-weight:700; font-size:1.02rem;
  color:var(--ink); transition:color .2s;
}
.faq-q:hover { color:var(--lime-ink); }
.faq-q .chev {
  flex-shrink:0; width:30px; height:30px; border:1.5px solid var(--line-2); border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center;
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.faq-q .chev svg { width:14px; height:14px; transition: transform .3s; }
.faq-item.open .chev { background:var(--lime); border-color:var(--lime); color:#000; transform:rotate(0deg); }
.faq-item.open .chev svg { transform:rotate(180deg); }
.faq-a {
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1);
}
.faq-item.open .faq-a { grid-template-rows:1fr; }
.faq-a > div { overflow:hidden; }
.faq-a p {
  color:var(--ink-soft); font-size:.92rem; padding:0 40px 24px 4px; line-height:1.7;
}
.faq-a p b { color:var(--ink); font-weight:600; }
.pblur::before, .pblur::after, .pblur-l { display: none !important; }