/* NGOPAIWEB Premium Theme — animations, effects, utilities
   Path: /assets/css/theme.css
   Works alongside Tailwind v3 build (dist/styles.css)
*/

/* ====== Keyframes ====== */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes glowPulse {
  0% { box-shadow: 0 0 0 rgba(251,191,36,0.0); }
  50% { box-shadow: 0 0 36px rgba(251,191,36,0.35); }
  100% { box-shadow: 0 0 0 rgba(251,191,36,0.0); }
}
@keyframes floatY { 0%{ transform: translateY(0)} 50%{transform: translateY(-6px)} 100%{transform: translateY(0)} }

/* ====== HERO background & text gradient ====== */
.bg-hero-anim{
  background: linear-gradient(120deg,#0f172a,#1e1b4b,#312e81,#0f172a);
  background-size: 300% 300%;
  animation: gradientShift 18s ease infinite;
}
.text-gradient{
  background: linear-gradient(90deg,#fde047,#fb923c,#facc15);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}

/* ====== Navbar links ====== */
.navlink{ position:relative; color: rgb(71 85 105); }
.navlink:hover{ color: rgb(15 23 42); }
.navlink::after{ content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0; background:#fbbf24; transition:width .25s ease }
.navlink:hover::after{ width:100% }
.mobilelink{ padding:.5rem .25rem; border-radius:.5rem; }
.mobilelink:hover{ background: rgba(15,23,42,.04) }

/* ====== KPI cards ====== */
.kpi{ border-radius: .85rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); padding: .9rem; text-align:center }
.kpi dt{ font-size:.7rem; color: rgba(255,255,255,.85) }
.kpi dd{ font-family: 'Poppins', ui-serif; font-size:1.35rem }

/* ====== Pattern background (soft dots) ====== */
.pattern-soft{ background-image: radial-gradient(rgba(2,6,23,.06) 1px, transparent 1px); background-size: 16px 16px; }

/* ====== Pricing cards (glass & featured glow) ====== */
.card.glass{ position:relative; background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.86)); border:1px solid rgba(2,6,23,.08); border-radius:1.25rem; padding:1.25rem; transition: transform .25s ease, box-shadow .25s ease }
.card.glass:hover{ transform: translateY(-6px); box-shadow: 0 24px 60px rgba(2,6,23,.12) }
.card.glass .title{ font-family:'Poppins', ui-serif; font-size:1.15rem; color: rgb(15 23 42) }
.card.glass .sub{ color: rgb(71 85 105); margin-top:.15rem }
.card.glass .list{ margin-top: .75rem; padding-left: 1.1rem; display:grid; gap:.45rem; font-size:.95rem; color: rgb(51 65 85) }
.card.glass .btn-outline{ display:inline-block; margin-top:1rem; padding:.65rem 1.05rem; border-radius:999px; border:1.8px solid rgb(15 23 42); color:rgb(15 23 42) }
.card.glass .btn-outline:hover{ background: rgb(15 23 42); color:#fff }
.card.glass .btn-primary{ display:inline-block; margin-top:1rem; padding:.65rem 1.05rem; border-radius:999px; background: rgb(15 23 42); color:#fff }
.card.glass.featured{ background:#fff; border:2px solid #fbbf24; animation: glowPulse 3.6s ease-in-out infinite }
.card.glass .badge{ position:absolute; inset:auto 1rem auto auto; transform: translateY(-50%); top:0; background:#fbbf24; color:#111827; font-size:.72rem; padding:.28rem .55rem; border-radius:.45rem; font-weight:700 }

/* ====== Portfolio (masonry items) ====== */
.folio{ display:block; border-radius:1rem; overflow:hidden; border:1px solid rgba(2,6,23,.08); background:#fff; position:relative }
.folio img{ display:block; width:100%; height:auto; transition: transform .35s ease, filter .35s ease }
.folio:hover img{ transform: scale(1.03); filter: brightness(.98) }
.folio figcaption{ padding:.65rem .8rem; font-size:.92rem; color: rgb(71 85 105) }

/* ====== Timeline (zigzag) ====== */
.timeline-line{ position:absolute; left:1rem; right:auto; top:0; bottom:0; width:2px; background: linear-gradient(to bottom, #fbbf24, #0f172a) }
@media (min-width:768px){ .timeline-line{ left:50% } }
.step{ position:relative; display:flex; gap:1.25rem }
.step h3{ font-weight:700; color: rgb(15 23 42) }
.step p{ color: rgb(71 85 105) }
.step.left{ justify-content:flex-end; padding-right:3rem }
.step.right{ justify-content:flex-start; padding-left:3rem }
.step::before{ content:""; position:absolute; left:0; top:0; transform: translate(-1.05rem,-.25rem); width:2.1rem; height:2.1rem; border-radius:999px; background:#fff; border:2px solid #fbbf24; box-shadow:0 10px 30px rgba(2,6,23,.10) }

/* ====== FAQ ====== */
.faq{ background: #fff; border:1px solid rgba(2,6,23,.08); border-radius:1rem; padding:1rem }
.faq summary{ cursor:pointer; font-weight:700; color: rgb(15 23 42) }
.faq p{ color: rgb(71 85 105) }

/* ====== CTA gradient & glass form ====== */
.cta-gradient{ background: linear-gradient(135deg,#0f172a,#1f2937,#111827); }
.form-glass{ background: rgba(255,255,255,.9); backdrop-filter: saturate(120%) blur(8px); border:1px solid rgba(2,6,23,.08); border-radius:1.25rem; padding:1.25rem; box-shadow:0 20px 60px rgba(2,6,23,.15) }
.form-glass .in{ margin-top:.35rem; width:100%; border-radius:.85rem; border:1px solid rgb(203 213 225); background:#fff; color: rgb(30 41 59); padding:.6rem .8rem }
.form-glass .in:focus{ outline:3px solid rgba(251,191,36,.9); outline-offset:2px; border-color: rgb(148 163 184) }
.form-glass .btn-cta{ margin-top:.2rem; padding:.75rem 1.15rem; border-radius:999px; background:#fbbf24; color:#111827; font-weight:700; box-shadow:0 14px 30px rgba(251,191,36,.28); transition:transform .2s ease, filter .2s ease }
.form-glass .btn-cta:hover{ transform: translateY(-1px); filter: brightness(.97) }

/* ====== Footer ====== */
.footer-pro{ background: linear-gradient(180deg,#0f172a,#0b1223); color: #d1d5db }
.foot-title{ font-weight:700; margin-bottom:.6rem; color:#e5e7eb }
.foot-link{ color:#cbd5e1 }
.foot-link:hover{ text-decoration:underline; color:#fbbf24 }

/* ====== Reveal on scroll ====== */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease }
.reveal.active{ opacity:1; transform:none }