/* Biblioteca Creștină — CSS efecte (additiv). Toate animațiile sunt opționale;
   .fx-reveal pornește invizibil DOAR dacă JS a marcat elementul. */

/* Reveal — starea inițială se aplică doar când fx.js a adăugat clasa */
.fx-reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1),
              transform .7s cubic-bezier(.22,.61,.36,1);
  transition-delay: var(--fx-delay, 0ms);
  will-change: opacity, transform;
}
.fx-reveal.fx-in{
  opacity: 1;
  transform: translateY(0);
}

/* Carduri: tranziție lină pentru tilt + hover glow rafinat */
.hx-card, .box{
  transition: transform .25s cubic-bezier(.22,.61,.36,1),
              border-color .3s ease,
              box-shadow .3s ease;
}
.hx-card:hover, .box:hover{
  border-color: rgba(231,214,178,.5);
  box-shadow: 0 14px 44px rgba(0,0,0,.4), 0 0 0 1px rgba(231,214,178,.18);
}

/* Titlu principal — tranziție lină pentru parallax */
.c-title{
  transition: opacity .2s linear;
  will-change: transform, opacity;
}

/* Linkuri/butoane — underline elegant care crește din centru */
.seo-songs a{ position: relative; }
.seo-songs a::after{
  content:''; position:absolute; left:50%; bottom:8px;
  width:0; height:1px; background:var(--gold-bright,#ffffff);
  transform:translateX(-50%); transition:width .35s cubic-bezier(.22,.61,.36,1);
}
.seo-songs a:hover::after{ width:60%; }

/* Respectă utilizatorii care vor mai puțină mișcare */
@media (prefers-reduced-motion: reduce){
  .fx-reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .c-title{ transform:none !important; opacity:1 !important; }
}

/* ── v46: bara de progres la citire (creată de fx.js pe pagini cu conținut lung) ── */
#fxProgress{position:fixed;top:0;left:0;height:2px;width:0;z-index:200;background:linear-gradient(90deg,#c9a24b,#f4e4b8);box-shadow:0 0 8px rgba(201,162,75,.5);pointer-events:none}
/* ── v46: buton "înapoi sus" ── */
#fxTop{position:fixed;right:16px;bottom:16px;z-index:150;width:42px;height:42px;border-radius:50%;border:1px solid rgba(201,162,75,.5);background:rgba(10,10,11,.85);color:#c9a24b;font-size:1.15rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(6px);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s,transform .3s,background .25s,color .25s}
#fxTop.on{opacity:.92;transform:translateY(0);pointer-events:auto}
#fxTop:hover{background:#c9a24b;color:#1a1407}
/* ── v46: selecție de text pe brand ── */
::selection{background:rgba(201,162,75,.35);color:#f6ecd4}
@media print{#fxProgress,#fxTop{display:none!important}}

/* ── v85: micro-detalii de brand ── */
::selection{background:rgba(201,162,75,.35);color:#fff8e6}
html{scrollbar-width:thin;scrollbar-color:#c9a24b transparent}
*::-webkit-scrollbar{width:9px;height:9px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#e6c477,#b9883b);border-radius:99px;border:2px solid rgba(10,10,10,.6)}
:focus-visible{outline:2px solid rgba(230,196,119,.75);outline-offset:2px;border-radius:4px}
@media(prefers-reduced-motion:no-preference){
  body{animation:fxbody .45s ease-out}
  @keyframes fxbody{from{opacity:0}to{opacity:1}}
}