/* ==========================================================
   First DigiAdd – Resource page animations
   Theme: navy hero + coral red (#f44438) + white
   Safe by design: elements are only hidden once the JS has
   tagged them (.fda-reveal), so content never gets stuck hidden.
   ========================================================== */

:root{
  --fda-red:#f44438;
  --fda-red-soft:rgba(244,68,56,.10);
  --fda-ease:cubic-bezier(.22,.7,.28,1);
}

/* ---------- 1. Reading progress bar ---------- */
#fda-progress{
  position:fixed;top:0;left:0;width:100%;height:3px;z-index:100000;
  background:linear-gradient(90deg,#f44438,#ff8f85);
  transform-origin:0 50%;transform:scaleX(0);
  box-shadow:0 0 10px rgba(244,68,56,.6);
  pointer-events:none;
}

/* ---------- 2. Hero (breadcrumb banner) ---------- */
.breadcrumb-area{position:relative;overflow:hidden}
.breadcrumb-area .container{position:relative;z-index:2}
.fda-hero-canvas{
  position:absolute;inset:0;width:100%;height:100%;
  z-index:1;pointer-events:none;opacity:0;
  animation:fdaFade 1.4s .3s ease forwards;
}
/* soft red glow drifting behind the title */
.breadcrumb-area::before{
  content:"";position:absolute;z-index:1;pointer-events:none;
  width:520px;height:520px;right:-120px;top:-180px;border-radius:50%;
  background:radial-gradient(circle,rgba(244,68,56,.28) 0%,rgba(244,68,56,0) 68%);
  animation:fdaFloat 9s ease-in-out infinite alternate;
}
.breadcrumb-area h1{
  position:relative;
  animation:fdaHeroUp .9s var(--fda-ease) .15s both;
}
/* red underline that draws itself under the title */
.breadcrumb-area h1::after{
  content:"";display:block;width:96px;height:4px;margin-top:18px;border-radius:4px;
  background:linear-gradient(90deg,#f44438,#ff8f85);
  transform:scaleX(0);transform-origin:left;
  animation:fdaLine .8s var(--fda-ease) 1s forwards;
}
.breadcrumb-area .breadcrumb{animation:fdaHeroUp .9s var(--fda-ease) .45s both}

/* ---------- 3. Section heading badges ---------- */
.blog-details .badge.badge-primary{
  position:relative;overflow:hidden;display:inline-block;
  box-shadow:0 6px 16px rgba(244,68,56,.28);
}
.blog-details .badge.badge-primary::after{          /* slow shine sweep */
  content:"";position:absolute;top:0;left:-70%;width:45%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg);
  animation:fdaShine 6s ease-in-out infinite;
}
.fda-reveal.fda-badge.is-in{animation:fdaBadgeIn .75s var(--fda-ease) backwards;animation-delay:var(--d,0s)}

/* ---------- 4. Scroll reveal (paragraphs, lists, FAQ, CTA) ---------- */
.fda-reveal{opacity:0}
.fda-reveal.is-in{opacity:1;animation:fdaUp .75s var(--fda-ease) backwards;animation-delay:var(--d,0s)}
.fda-reveal.fda-left.is-in{animation-name:fdaLeft}
.fda-reveal.fda-zoom.is-in{animation-name:fdaZoom}

/* ---------- 5. FAQ / list items: gentle interaction ---------- */
.blog-inside-list-two li{
  padding:8px 12px;border-radius:8px;
  transition:transform .3s var(--fda-ease),background .3s,box-shadow .3s;
}
.blog-inside-list-two li b{transition:color .25s}
.blog-inside-list-two li:hover{
  transform:translateX(6px);
  background:linear-gradient(90deg,var(--fda-red-soft),rgba(244,68,56,0));
  box-shadow:inset 3px 0 0 var(--fda-red);
}
.blog-inside-list-two li:hover b{color:var(--fda-red)}

.fdaq-item{transition:box-shadow .3s,transform .3s var(--fda-ease)}
.fdaq-item:hover{box-shadow:0 8px 22px rgba(35,43,66,.12);transform:translateY(-2px);position:relative;z-index:1}
.fdaq-btn{transition:color .25s,background .25s}
.fdaq-btn:hover,.fdaq-btn[aria-expanded="true"]{color:var(--fda-red)}
.fdaq-panel.open .fdaq-body{animation:fdaDrop .4s var(--fda-ease)}

/* ---------- 6. Call-to-action banner ---------- */
.fda-cta{position:relative;overflow:hidden;box-shadow:0 14px 34px rgba(244,68,56,.35)}
.fda-cta>*{position:relative;z-index:1}
.fda-cta::before{                                   /* moving light sweep */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);
  transform:translateX(-120%);
  animation:fdaSweep 5s ease-in-out 1.5s infinite;
}
.fda-cta .btn{animation:fdaPulse 2.4s ease-out infinite;transition:transform .25s var(--fda-ease)}
.fda-cta .btn:hover{transform:translateY(-3px) scale(1.04)}

/* ---------- Keyframes ---------- */
@keyframes fdaFade{to{opacity:1}}
@keyframes fdaHeroUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes fdaLine{to{transform:scaleX(1)}}
@keyframes fdaFloat{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,50px) scale(1.15)}}
@keyframes fdaUp{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes fdaLeft{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
@keyframes fdaZoom{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}
@keyframes fdaBadgeIn{from{opacity:0;transform:translateX(-40px);clip-path:inset(0 100% 0 0)}to{opacity:1;transform:none;clip-path:inset(0 0 0 0)}}
@keyframes fdaShine{0%,60%{left:-70%}100%{left:130%}}
@keyframes fdaSweep{0%{transform:translateX(-120%)}60%,100%{transform:translateX(120%)}}
@keyframes fdaDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes fdaPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}70%,100%{box-shadow:0 0 0 14px rgba(255,255,255,0)}}

/* ---------- Mobile: lighter effects ---------- */
@media (max-width:767.98px){
  .breadcrumb-area::before{width:300px;height:300px}
  .blog-inside-list-two li:hover{transform:none}
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .fda-reveal,.fda-reveal.is-in{opacity:1;animation:none}
  .breadcrumb-area h1,.breadcrumb-area .breadcrumb,.fda-hero-canvas{animation:none;opacity:1}
  .breadcrumb-area h1::after{animation:none;transform:none}
  .breadcrumb-area::before,.fda-cta::before,.fda-cta .btn,
  .blog-details .badge.badge-primary::after{animation:none}
  #fda-progress{display:none}
}