/* ============================================================
 *  Sortudos · landing.css
 *  Estilos exclusivos da capa (page-landing). Carregado só no index.php.
 *  Não afeta o resto do app.
 * ============================================================ */

/* ─── Camadas de fundo (só na landing) ─── */
.page-landing .bg-layer{position:fixed;inset:0;pointer-events:none;}
.page-landing #ld-aurora{z-index:0;}
.page-landing .ld-blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;will-change:transform;}
.page-landing .ld-blob.b1{width:520px;height:520px;top:-150px;left:-110px;background:radial-gradient(circle,rgba(255,201,71,.42),transparent 70%);animation:ldFloat1 20s ease-in-out infinite;}
.page-landing .ld-blob.b2{width:460px;height:460px;bottom:-170px;right:-130px;background:radial-gradient(circle,rgba(92,155,255,.24),transparent 70%);animation:ldFloat2 24s ease-in-out infinite;}
.page-landing .ld-blob.b3{width:400px;height:400px;top:42%;left:56%;background:radial-gradient(circle,rgba(255,180,60,.20),transparent 70%);animation:ldFloat3 28s ease-in-out infinite;}
@keyframes ldFloat1{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(80px,60px) scale(1.15);}}
@keyframes ldFloat2{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-70px,-50px) scale(1.1);}}
@keyframes ldFloat3{0%,100%{transform:translate(0,0) scale(1);}50%{transform:translate(-60px,40px) scale(1.2);}}

.page-landing #ld-grid{z-index:1;opacity:.05;background-image:linear-gradient(rgba(255,201,71,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,201,71,.5) 1px,transparent 1px);background-size:60px 60px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 30%,transparent 75%);}
.page-landing #ld-balls{z-index:1;overflow:hidden;}
.page-landing .ld-ball{position:absolute;bottom:-60px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,201,71,.35);background:rgba(255,201,71,.04);display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:rgba(255,201,71,.55);opacity:0;will-change:transform;animation:ldRise linear infinite;}
@keyframes ldRise{0%{transform:translateY(0) rotate(0);opacity:0;}10%{opacity:.5;}90%{opacity:.5;}100%{transform:translateY(-108vh) rotate(160deg);opacity:0;}}
.page-landing #ld-spot{z-index:2;background:radial-gradient(600px circle at var(--mx,50%) var(--my,22%),rgba(255,201,71,.06),transparent 60%);transition:background .1s;}

/* ─── Conteúdo acima das camadas ─── */
.page-landing .app-root{position:relative;z-index:10;}

/* trevo (imagem, parado) */
.ld-clover{display:block;margin:0 auto 6px;width:104px;height:auto;}

/* hero */
.ld-hero{text-align:center;max-width:760px;margin:0 auto;padding:44px 24px 30px;}
.ld-hero h1{font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:clamp(42px,7vw,78px);line-height:1.04;letter-spacing:-.035em;margin:18px 0 22px;}
.ld-hero h1 .plain{color:var(--text,#f2f3f8);}
.ld-hero h1 .shine{background:linear-gradient(100deg,#e0a52e,#ffe08a 40%,#fff 50%,#ffe08a 60%,#e0a52e);background-size:250% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:ldShine 4s linear infinite;}
@keyframes ldShine{to{background-position:250% center;}}
.ld-hero .lede{font-size:clamp(16px,1.7vw,18px);color:var(--text-dim,#c3c8d8);max-width:600px;margin:0 auto 34px;line-height:1.6;}
.ld-hero .lede strong{color:var(--text,#f2f3f8);font-weight:600;}
.ld-hero .actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}

/* chips pequenos */
.ld-chips{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;max-width:720px;margin:0 auto;padding:20px 24px 60px;}
.ld-chip{flex:1;min-width:170px;max-width:224px;text-align:center;padding:18px 16px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.07);transition:border-color .2s,background .2s,transform .2s;}
.ld-chip:hover{border-color:rgba(255,201,71,.3);background:rgba(255,255,255,.05);transform:translateY(-2px);}
.ld-chip-ic{width:38px;height:38px;margin:0 auto 11px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:rgba(255,201,71,.1);border:1px solid rgba(255,201,71,.22);}
.ld-chip-ic svg{width:19px;height:19px;stroke:var(--gold,#ffc947);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ld-chip h3{font-family:'Bricolage Grotesque',sans-serif;font-size:14px;font-weight:600;margin-bottom:4px;letter-spacing:-.01em;color:var(--text,#f2f3f8);}
.ld-chip p{font-size:12px;color:var(--text-faint,#8a8fa3);line-height:1.45;}

@media (max-width:600px){
  .page-landing .ld-blob{filter:blur(50px);opacity:.4;}
  .ld-clover{width:76px;margin-bottom:2px;}
  .ld-hero{padding:20px 18px 16px;}
  .ld-hero h1{font-size:38px;margin:12px 0 14px;}
  .ld-hero .lede{font-size:15px;margin-bottom:22px;line-height:1.5;}
  .ld-hero .actions{gap:10px;}
  /* chips: faixa horizontal compacta, ícone ao lado do texto, ocupam 3 numa linha */
  .ld-chips{gap:8px;padding:8px 14px 32px;}
  .ld-chip{min-width:0;flex:1;padding:12px 8px;border-radius:12px;}
  .ld-chip-ic{width:30px;height:30px;margin:0 auto 7px;border-radius:9px;}
  .ld-chip-ic svg{width:16px;height:16px;}
  .ld-chip h3{font-size:12px;margin-bottom:2px;line-height:1.2;}
  .ld-chip p{font-size:10.5px;line-height:1.35;}
}
@media (prefers-reduced-motion:reduce){
  .page-landing *{animation:none !important;}
}