/* ==========================================================================
   NIC Sialkot — motion.css
   Scroll reveals, hero animation, partner marquee, timeline, interactive
   hover effects. Everything respects "reduce motion" settings and is
   disabled inside the Elementor editor so editing stays easy.

   Utility classes you can add in Elementor → Advanced → CSS Classes:
     nic-reveal          fade-up when scrolled into view
     nic-reveal-stagger  (on a container) children fade-up one after another
     nic-hero            animated hero (slow pan + glow + staggered intro)
     nic-glass           frosted glass card for dark sections
     nic-timeline        horizontal journey with connecting line (children = steps)
     nic-faq             premium style for the Toggle widget
   ========================================================================== */

/* ---------- Scroll reveal (JS adds .nic-pre then .is-in) ---------- */
.nic-pre {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .75s cubic-bezier(.2, .7, .2, 1) var(--nic-d, 0s), transform .75s cubic-bezier(.2, .7, .2, 1) var(--nic-d, 0s) !important;
}
.nic-pre.is-in { opacity: 1; transform: none; }

/* ---------- Hero ---------- */
.nic-hero { overflow: hidden !important; }
.nic-hero::after {
  content: ''; position: absolute; inset: -20%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(closest-side, rgba(189, 36, 48, .35), transparent 70%) 15% 20% / 45% 45% no-repeat,
    radial-gradient(closest-side, rgba(251, 173, 24, .22), transparent 70%) 85% 75% / 40% 40% no-repeat;
  animation: nicOrbs 18s ease-in-out infinite alternate;
}
.nic-hero > .e-con-inner, .nic-hero > .e-con, .nic-hero > .elementor-element { position: relative; z-index: 1; }
.nic-hero { animation: nicPan 26s ease-in-out infinite alternate; }
.nic-hero .red-text, .nic-shimmer {
  background: linear-gradient(90deg, #BD2430, #F07E22, #FBAD18, #F07E22, #BD2430);
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: nicShimmer 7s linear infinite;
}
.nic-hero-content > .elementor-element, .nic-hero-content > .e-con-inner > .elementor-element {
  animation: nicFadeUp .9s cubic-bezier(.2, .7, .2, 1) both;
}
.nic-hero-content > :nth-child(1), .nic-hero-content > .e-con-inner > :nth-child(1) { animation-delay: .15s; }
.nic-hero-content > :nth-child(2), .nic-hero-content > .e-con-inner > :nth-child(2) { animation-delay: .35s; }
.nic-hero-content > :nth-child(3), .nic-hero-content > .e-con-inner > :nth-child(3) { animation-delay: .55s; }
.nic-hero-content > :nth-child(4), .nic-hero-content > .e-con-inner > :nth-child(4) { animation-delay: .75s; }

/* Scroll cue */
.nic-scroll-cue {
  display: inline-flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-light-muted); text-decoration: none; font-family: var(--font-head);
  font-size: .68rem; letter-spacing: 2px; text-transform: uppercase;
}
.nic-scroll-cue span { width: 22px; height: 36px; border: 2px solid rgba(255, 255, 255, .35); border-radius: 12px; position: relative; }
.nic-scroll-cue span::after {
  content: ''; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px;
  border-radius: 2px; background: var(--gold); animation: nicScroll 1.8s ease-in-out infinite;
}
.nic-scroll-cue:hover { color: var(--gold); }

@keyframes nicPan { from { background-position: 50% 25%; } to { background-position: 50% 65%; } }
@keyframes nicOrbs { from { transform: translate3d(-3%, -2%, 0) scale(1); } to { transform: translate3d(3%, 3%, 0) scale(1.12); } }
@keyframes nicShimmer { to { background-position: 300% 0; } }
@keyframes nicFadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes nicScroll { 0% { opacity: 0; transform: translateY(0); } 40% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }

/* ---------- Buttons: light sweep on hover ---------- */
.nic-btn-gradient .elementor-button, .nic-btn--primary, .nic-apply-btn { position: relative; overflow: hidden; isolation: isolate; }
.nic-btn-gradient .elementor-button::after, .nic-btn--primary::after, .nic-apply-btn::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .6s ease;
}
.nic-btn-gradient .elementor-button:hover::after, .nic-btn--primary:hover::after, .nic-apply-btn:hover::after { left: 130%; }

/* ---------- Cards: spotlight that follows the mouse ---------- */
.nic-card::after, .nic-spotlight::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(189, 36, 48, .08), transparent 45%);
}
.nic-cards--dark .nic-card::after, .nic-spotlight--dark::after {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(251, 173, 24, .12), transparent 45%);
}
.nic-card:hover::after, .nic-spotlight:hover::after { opacity: 1; }
.nic-spotlight { position: relative; overflow: hidden; }
.nic-info-card__icon { transition: transform .4s cubic-bezier(.2, .7, .2, 1); display: inline-block; }
.nic-card:hover .nic-info-card__icon { transform: scale(1.15) rotate(-6deg); }

/* ---------- Partner marquee ---------- */
.nic-marquee {
  --nic-marquee-speed: 40s;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.nic-marquee__track { display: flex; width: max-content; animation: nicMarquee var(--nic-marquee-speed) linear infinite; }
.nic-marquee:hover .nic-marquee__track { animation-play-state: paused; }
.nic-marquee__group { display: flex; gap: 16px; padding-right: 16px; }
.nic-marquee .nic-partner { flex: 0 0 auto; min-width: 150px; height: 88px; }
.nic-marquee .nic-partner img { filter: grayscale(1); opacity: .7; transition: all .3s ease; }
.nic-marquee .nic-partner:hover img { filter: none; opacity: 1; }
@keyframes nicMarquee { to { transform: translateX(-50%); } }

/* ---------- Glass card (dark sections) ---------- */
.nic-glass {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid rgba(255, 255, 255, .14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}

/* ---------- Journey timeline ---------- */
.nic-timeline { position: relative; }
.nic-timeline::before {
  content: ''; position: absolute; left: 12.5%; right: 12.5%; top: 28px; height: 2px;
  background: linear-gradient(90deg, var(--red), var(--orange), var(--gold));
  opacity: .5; z-index: 0;
}
.nic-timeline > .e-con, .nic-timeline > .e-con-inner > .e-con { position: relative; z-index: 1; }
.nic-step-num .elementor-heading-title {
  width: 56px; height: 56px; border-radius: 50%; display: inline-flex !important; align-items: center; justify-content: center;
  background: var(--gradient); color: #fff !important; -webkit-text-fill-color: #fff;
  box-shadow: 0 0 0 8px rgba(189, 36, 48, .12); transition: transform .4s ease, box-shadow .4s ease;
}
.nic-step:hover .nic-step-num .elementor-heading-title { transform: scale(1.08); box-shadow: 0 0 0 12px rgba(189, 36, 48, .16); }
@media (max-width: 1024px) {
  .nic-timeline::before { left: 27px; right: auto; top: 28px; bottom: 28px; width: 2px; height: auto; background: linear-gradient(180deg, var(--red), var(--gold)); }
}

/* ---------- FAQ (Toggle widget) ---------- */
.nic-faq .elementor-toggle-item {
  background: #fff; border: 1.5px solid var(--border-light); border-radius: 14px; margin-bottom: 12px !important;
  overflow: hidden; transition: border-color .3s ease, box-shadow .3s ease;
}
.nic-faq .elementor-toggle-item:hover { border-color: rgba(17, 39, 74, .25); box-shadow: var(--shadow); }
.nic-faq .elementor-tab-title { border: 0 !important; padding: 20px 24px !important; }
.nic-faq .elementor-tab-title.elementor-active { color: var(--red); }
.nic-faq .elementor-tab-content { border: 0 !important; padding: 0 24px 22px !important; }

/* ---------- Scroll progress + back to top (added by theme.js) ---------- */
#nic-progress {
  position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 100001;
  background: var(--gradient); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
}
.admin-bar #nic-progress { top: 32px; }
#nic-top {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999; width: 44px; height: 44px; border-radius: 50%;
  border: 0; cursor: pointer; background: var(--navy); color: #fff; box-shadow: 0 8px 24px rgba(17, 39, 74, .3);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: all .3s ease;
}
#nic-top.is-visible { opacity: 1; transform: none; pointer-events: auto; }
#nic-top:hover { background: var(--red); }

/* ---------- Safety: no motion when the user prefers it / in the editor ---------- */
@media (prefers-reduced-motion: reduce) {
  .nic-pre { opacity: 1 !important; transform: none !important; }
  .nic-hero, .nic-hero::after, .nic-hero .red-text, .nic-shimmer, .nic-marquee__track, .nic-hero-content > * { animation: none !important; }
}
.elementor-editor-active .nic-pre { opacity: 1; transform: none; }
.elementor-editor-active .nic-marquee__track { animation-duration: 120s; }

/* FAQ safety (works even if Elementor's toggle CSS loads late) */
.nic-faq .elementor-tab-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; margin: 0; }
.nic-faq .elementor-toggle-icon { order: 2; flex: 0 0 auto; width: 1em; }
.nic-faq .elementor-toggle-icon svg { width: 1em; height: 1em; fill: currentColor; }
.nic-faq .elementor-toggle-icon-opened { display: none; }
.nic-faq .elementor-active .elementor-toggle-icon-closed { display: none; }
.nic-faq .elementor-active .elementor-toggle-icon-opened { display: block; }
.nic-faq .elementor-tab-content { display: none; }
.nic-faq .elementor-tab-content.elementor-active { display: block; }