/* effects-astro.css | Biblioteca de efectos claros con aire místico (sin tema oscuro)
   Pensado para usarse JUNTO a Bootstrap + AOS + theme-astro.css (opcional).
   Cada efecto es opt-in con clases .fx-*
*/

/* ================== Variables & base ================== */
:root{
    --fx-ink:           #263238;
    --fx-ornament:      #b48ef0;      /* lavanda */
    --fx-primary:       #5b79ff;      /* índigo suave */
    --fx-secondary:     #6f9fb8;      /* turquesa grisáceo */
    --fx-paper:         #ffffff;
    --fx-bg:            #f6f7fb;
  }
  
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  }
  
  /* ================== Keyframes ================== */
  @keyframes fx-floatY { from{ transform: translateY(0) } 50%{ transform: translateY(-6px) } to{ transform: translateY(0) } }
  @keyframes fx-drift  { from{ transform: translate3d(0,0,0) } to{ transform: translate3d(4%, -4%, 0) } }
  @keyframes fx-shimmer{
    0%{ background-position: -180% 50%; }
    100%{ background-position: 180% 50%; }
  }
  @keyframes fx-twinkle{
    0%,100%{ opacity:.35; transform: scale(.98); }
    50%{ opacity:.85; transform: scale(1.02); }
  }
  
  /* ================== 1) Véus/parallax sutil para secciones ================== */
  .fx-veil{
    position: relative; isolation: isolate; background: var(--fx-paper);
  }
  .fx-veil::before,
  .fx-veil::after{
    content:""; position:absolute; inset:-1px; z-index:-1; border-radius: 16px;
    background:
      radial-gradient(600px 300px at 0% 0%, rgba(180,142,240,.12), transparent 60%),
      radial-gradient(800px 420px at 100% 0%, rgba(111,159,184,.10), transparent 70%);
    animation: fx-drift 16s linear infinite alternate;
    filter: saturate(110%);
    pointer-events:none;
  }
  
  /* ================== 2) Subrayado “constelación” animado ================== */
  .fx-underline{
    position: relative; display:inline-block;
    background-image: linear-gradient(90deg, rgba(255,230,90,.6), rgba(180,142,240,.45));
    background-size: 200% 2px; background-repeat:no-repeat;
    background-position: 0 100%;
    padding-bottom: 2px;
    animation: fx-shimmer 4s ease-in-out infinite;
  }
  
  /* ================== 3) Texto con shimmer sobrio ================== */
  .fx-shimmer-text{
    background: linear-gradient(90deg, #3a466a 0%, #8aa0ff 20%, #3a466a 40%, #3a466a 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    background-size: 240% 100%; animation: fx-shimmer 5.5s linear infinite;
  }
  
  /* ================== 4) Orbes (planetas/lunas) flotantes ================== */
  .fx-orb{
    --size: 42px;
    width: var(--size); height: var(--size); border-radius: 50%;
    background:
      radial-gradient(120% 120% at 30% 30%, rgba(255,255,255,.85), rgba(255,255,255,.1) 40%, transparent 41%),
      conic-gradient(from 180deg, rgba(91,121,255,.8), rgba(180,142,240,.8), rgba(111,159,184,.8), rgba(91,121,255,.8));
    box-shadow:
      0 0 0 1px rgba(58,70,106,.08),
      0 10px 30px rgba(91,121,255,.25),
      inset -8px -10px 22px rgba(0,0,0,.06);
    animation: fx-floatY 6s ease-in-out infinite;
  }
  .fx-orb.sm{ --size:26px }
  .fx-orb.lg{ --size:68px }
  
  /* Para acomodar orbes en el borde de títulos */
  h2 .fx-orb, h3 .fx-orb{ vertical-align: middle; margin-left:.35rem; }
  
  /* ================== 5) Divider con glifo y líneas ================== */
  .fx-glyph-divider{
    --glyph:"✶";
    position: relative; text-align:center; margin: 1rem 0; height: 22px;
  }
  .fx-glyph-divider::before, .fx-glyph-divider::after{
    content:""; position:absolute; top:50%; width:46%; height:1px; background:
      linear-gradient(90deg, rgba(180,142,240,0) 0%, rgba(180,142,240,.6) 100%);
    transform: translateY(-50%);
  }
  .fx-glyph-divider::before{ left:0 }
  .fx-glyph-divider::after{
    right:0; background: linear-gradient(90deg, rgba(111,159,184,.6) 0%, rgba(111,159,184,0) 100%);
  }
  .fx-glyph-divider span{
    display:inline-block; padding:0 .6rem; color:#3a466a;
  }
  .fx-glyph-divider span::before{ content: var(--glyph); margin-right:.35rem; color: rgba(180,142,240,.8); }
  
  /* ================== 6) Lista con viñetas zodiacales ================== */
  .fx-list-zodiac{ list-style:none; padding-left:0; }
  .fx-list-zodiac > li{ position:relative; padding-left:1.6rem; margin:.35rem 0; }
  .fx-list-zodiac > li::before{
    content: attr(data-glyph);           /* Ej: data-glyph="♎︎" */
    position:absolute; left:0; top:.1rem;
    font-size:1rem; line-height:1; color: rgba(180,142,240,.85);
    text-shadow: 0 0 8px rgba(180,142,240,.25);
  }
  
  /* ================== 7) Borde “runas” (lineal punteado) ================== */
  .fx-runes{
    border: 1px dashed rgba(58,70,106,.28);
    border-radius: 14px; padding: 16px;
    background:
      linear-gradient(180deg,#fff, #fbfbff);
    box-shadow: 0 8px 24px rgba(58,70,106,.08);
  }
  
  /* ================== 8) Aura/iluminación al pasar el mouse ================== */
  .fx-illuminate{
    transition: box-shadow .35s ease, transform .35s ease;
    box-shadow: 0 6px 22px rgba(91,121,255,.14);
  }
  .fx-illuminate:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 46px rgba(91,121,255,.26), 0 0 0 4px rgba(180,142,240,.12);
  }
  
  /* ================== 9) Campo estelar MUY sutil para fondos ================== */
  .fx-starfield{
    position: relative; isolation:isolate; background: var(--fx-paper);
  }
  .fx-starfield::after{
    content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
    background:
      radial-gradient(2px 2px at 20% 30%, rgba(58,70,106,.25), transparent 60%),
      radial-gradient(1.5px 1.5px at 60% 20%, rgba(58,70,106,.18), transparent 60%),
      radial-gradient(1.8px 1.8px at 80% 70%, rgba(58,70,106,.18), transparent 60%),
      radial-gradient(1.2px 1.2px at 35% 80%, rgba(58,70,106,.22), transparent 60%);
    animation: fx-twinkle 6.5s ease-in-out infinite alternate;
    opacity:.55;
  }
  
  /* ================== 10) Línea/constelación decorativa ================== */
  .fx-constellation{
    --c: rgba(180,142,240,.7);
    position: relative; padding-left: 18px;
  }
  .fx-constellation::before{
    content:""; position:absolute; left:6px; top:.35rem; bottom:.35rem; width:2px;
    background-image:
      radial-gradient(var(--c) 2px, transparent 3px),
      linear-gradient(var(--c), var(--c));
    background-size: 6px 6px, 1px 100%;
    background-repeat: repeat-y, no-repeat;
    background-position: left top, center;
    opacity:.6;
  }
  
  /* ================== 11) Halo para imágenes/gráficas ================== */
  .fx-halo{
    position: relative; border-radius: 14px; overflow:hidden;
    box-shadow: 0 12px 36px rgba(91,121,255,.18);
  }
  .fx-halo::after{
    content:""; position:absolute; inset:-20%; z-index:-1; border-radius: 30px;
    background: radial-gradient(60% 60% at 50% 0%, rgba(180,142,240,.12), transparent 70%),
                radial-gradient(60% 60% at 100% 100%, rgba(111,159,184,.10), transparent 70%);
    filter: blur(10px);
  }
  
  /* ================== 12) Citas místicas (pull-quote) ================== */
  .fx-quote{
    border-left: 4px solid rgba(180,142,240,.55);
    background: linear-gradient(180deg,#fff 0%, #fcfdff 100%);
    color: #445064; padding: .9rem 1rem; border-radius: 10px;
    position: relative;
  }
  .fx-quote::before{
    content: "❝";
    position:absolute; left: -12px; top: -10px; font-size: 24px;
    color: rgba(180,142,240,.6);
  }
  
  /* ================== 13) Botones con aura ================== */
  .btn.fx-btn-aura{
    position: relative; overflow:hidden;
    box-shadow: 0 10px 24px rgba(91,121,255,.24);
  }
  .btn.fx-btn-aura::after{
    content:""; position:absolute; inset:-200%;
    background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35), transparent 45%);
    transform: translate3d(-40%, -40%, 0);
    transition: transform .45s ease;
  }
  .btn.fx-btn-aura:hover::after{ transform: translate3d(0,0,0); }
  
  /* ================== 14) Badges etéreos ================== */
  .badge.fx-ether{
    border:1px solid rgba(91,121,255,.25);
    background: rgba(91,121,255,.06);
    color:#35405f;
    box-shadow: 0 4px 12px rgba(91,121,255,.12) inset;
  }
  
  /* ================== 15) Utilidades ================== */
  .fx-soft{ color: #5f6b74 !important; }
  .fx-float{ animation: fx-floatY 7s ease-in-out infinite; }
  .fx-shadow{ box-shadow: 0 8px 28px rgba(58,70,106,.12) !important; }
  


  /*Fondo espacial*/
  /* ====== Fondo espacial para el body ====== */
body {
    background:
      radial-gradient(ellipse at 20% 20%, rgba(90,110,255,0.10) 0%, transparent 70%),
      radial-gradient(ellipse at 80% 10%, rgba(170,130,255,0.10) 0%, transparent 70%),
      radial-gradient(ellipse at 50% 80%, rgba(255,200,180,0.05) 0%, transparent 60%),
      #0e0f19; /* Base oscuro-azulado espacial */
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
  

    position: relative;
    overflow-x: hidden;
  }
  
  /* Estrellas estáticas + parpadeo leve */
  body::before {
    content: "";
    position: fixed;
    inset: 0;
    background:
      radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.5), transparent 50%),
      radial-gradient(1.5px 1.5px at 25% 80%, rgba(255,255,255,0.35), transparent 50%),
      radial-gradient(1px 1px at 70% 50%, rgba(255,255,255,0.4), transparent 50%),
      radial-gradient(2px 2px at 90% 10%, rgba(255,255,255,0.25), transparent 50%),
      radial-gradient(1px 1px at 50% 90%, rgba(255,255,255,0.3), transparent 50%);
    opacity: 0.5;
    animation: twinkleStars 12s ease-in-out infinite alternate;
    pointer-events: none;
    z-index: -1;
  }
  
  /* Nebulosas en movimiento (sutiles) */
  body::after {
    content: "";
    position: fixed;
    inset: -10%;
    background:
      radial-gradient(50% 50% at 30% 60%, rgba(160,130,255,0.12), transparent 70%),
      radial-gradient(40% 40% at 70% 40%, rgba(255,220,130,0.08), transparent 80%);
    filter: blur(50px) saturate(140%);
    mix-blend-mode: screen;
    animation: driftNebula 60s linear infinite alternate;
    pointer-events: none;
    z-index: -2;
  }
  
  /* Animaciones */
  @keyframes twinkleStars {
    0%, 100% { opacity: 0.4; transform: scale(1); }
    50% { opacity: 0.8; transform: scale(1.02); }
  }
  @keyframes driftNebula {
    from { transform: translate3d(-2%, 0, 0); }
    to   { transform: translate3d(2%, -2%, 0); }
  }
  

  main{ max-width:var(--page-max); margin:0 auto; padding:24px 16px 48px; }
  .section{ background:#fff; border-radius:14px; padding:18px 18px; margin-bottom:16px; box-shadow:0 6px 16px rgba(0,0,0,.06);}
  .section h2{ font-size:1.25rem; margin:0 0 .5rem; }
  .sticky-actions{ position:fixed; right:14px; bottom:14px; z-index:1040; display:flex; gap:.5rem; }
  /* Evitar usar .card para mantener el lineamiento del proyecto */
.border.fx-runes.fx-illuminate{
  background-color:rgba(0,0,0,0.65)
}