/* ============================================================
   Minister — Marketing landing page
   Base resets, keyframe animations, and interactive :hover states.
   Layout/visual styling lives inline in index.html (preserved
   exactly from the approved design for pixel fidelity).
   ============================================================ */

*{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  html,body{ margin:0; padding:0; background:#eaf2fa; }
  @keyframes floatUp{ from{transform:translateY(8px);} to{transform:translateY(-8px);} }
  @keyframes shine{ 0%{ transform:translateX(-130%);} 55%{ transform:translateX(240%);} 100%{ transform:translateX(240%);} }
  @keyframes drift{ from{transform:translateX(-10px);} to{transform:translateX(20px);} }
  @keyframes sparkleTw{ 0%,100%{ opacity:0.12; transform:scale(0.55) rotate(0deg);} 50%{ opacity:0.95; transform:scale(1.1) rotate(45deg);} }
  @keyframes floatMote{ 0%{ transform:translateY(12px); opacity:0;} 45%{ opacity:0.75;} 100%{ transform:translateY(-26px); opacity:0;} }
  @keyframes sway{ from{ transform:rotate(-2.5deg);} to{ transform:rotate(2.5deg);} }
  @keyframes feedScroll{ from{transform:translateY(0);} to{transform:translateY(-50%);} }
  @keyframes stageFeed{ 0%{opacity:0;} 7%,42%{opacity:1;} 49%,100%{opacity:0;} }
  @keyframes stageStop{ 0%,44%{opacity:0;} 51%,72%{opacity:1;} 78%,100%{opacity:0;} }
  @keyframes stageCalm{ 0%,74%{opacity:0;} 80%,96%{opacity:1;} 100%{opacity:0;} }
  @keyframes sigilSlam{ 0%,44%{transform:scale(0.2);} 51%{transform:scale(1.15);} 57%{transform:scale(1);} 72%,100%{transform:scale(1);} }
  @keyframes reel{ 0%{transform:translateY(0);} 42%{transform:translateY(-5em);} 49%{transform:translateY(-5em);} 50%{transform:translateY(0);} 100%{transform:translateY(0);} }

/* ---------- Interactive hover states ---------- */
.hv1, .hv2, .hv3 { transition: color .18s ease, filter .18s ease, background .18s ease; }

.hv1:hover{ color:#f6efe2 !important; }
.hv2:hover{ filter:brightness(1.04) !important; }
.hv3:hover{ filter:brightness(1.2) !important; }

/* ---------- FAQ accordion (faq.html) ---------- */
.faq-item{
  border:1px solid rgba(240,212,136,0.14);
  border-radius:16px;
  background:rgba(34,18,49,0.46);
  overflow:hidden;
  transition:border-color .2s ease, background .2s ease;
}
.faq-item + .faq-item{ margin-top:14px; }
.faq-item[open]{ border-color:rgba(232,198,107,0.42); background:rgba(40,22,58,0.6); }
.faq-item:hover{ border-color:rgba(232,198,107,0.34); }

.faq-q{
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:20px clamp(18px,3vw,26px);
  font-family:'Cormorant Garamond', serif;
  font-weight:600;
  font-size:clamp(18px,2.4vw,22px);
  color:#f3ecdc;
}
.faq-q::-webkit-details-marker{ display:none; }
.faq-q:focus-visible{ outline:2px solid #e8c66b; outline-offset:-2px; border-radius:16px; }

.faq-sign{
  flex:0 0 auto;
  position:relative;
  width:22px; height:22px;
  transition:transform .25s ease;
}
.faq-sign::before, .faq-sign::after{
  content:""; position:absolute; top:50%; left:50%;
  background:#e8c66b; border-radius:2px;
  transform:translate(-50%,-50%);
}
.faq-sign::before{ width:16px; height:2.4px; }
.faq-sign::after{ width:2.4px; height:16px; }
.faq-item[open] .faq-sign{ transform:rotate(45deg); }

.faq-a{
  padding:0 clamp(18px,3vw,26px) 22px;
  font-family:'Manrope', system-ui, sans-serif;
  font-size:15.5px;
  line-height:1.72;
  color:#c3b6cf;
}
.faq-a strong{ color:#f3ecdc; font-weight:700; }
.faq-a a{ color:#f0d488; text-decoration:none; }
.faq-a a:hover{ text-decoration:underline; }