/* GrowBahrain — premium motion layer (page: Grow Rewards for Malls)
   Loads after the kit stylesheet. Animates transform/opacity only.
   Respects prefers-reduced-motion and the kit's .motion-paused toggle. */

/* ---------- hero staged entrance ---------- */
html.gb-boot .gb-stagger > * { opacity: 0; transform: translateY(22px); }
html.gb-ready .gb-stagger > * {
  opacity: 1; transform: none;
  transition: opacity .8s var(--ease), transform .8s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms + 80ms);
}
.gb-hero-visual { position: relative; }
html.gb-boot .gb-hero-visual img { opacity: 0; transform: translateY(26px) scale(.98); }
html.gb-ready .gb-hero-visual img {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease) .35s, transform .9s var(--ease) .35s;
}
html.gb-ready:not(.motion-paused) .gb-hero-visual img.gb-float { animation: gb-float 7s ease-in-out 1.4s infinite; }
@keyframes gb-float { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }

/* ---------- the Seed: gold dot travelling through the page ---------- */
.gb-seed {
  position: fixed; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 6px rgba(253,191,78,.18), 0 6px 18px rgba(253,191,78,.45);
  pointer-events: none; z-index: 60; opacity: 0;
  transition: opacity .4s var(--ease);
  will-change: transform;
}
html.gb-ready .gb-seed.is-on { opacity: 1; }
.gb-seed.is-landed { opacity: 0 !important; }
.gb-seed-origin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; background: var(--gold); vertical-align: middle; margin-right: 10px; }
.gb-seed-origin.is-away { opacity: 0; }
#gb-footer-logo { width: 248px; height: auto; display: block; }
#gb-footer-logo #seed { opacity: 0; transform-origin: center; transform-box: fill-box; transform: scale(.2); transition: opacity .35s var(--ease), transform .55s var(--ease); }
#gb-footer-logo.is-landed #seed { opacity: 1; transform: scale(1); }
#gb-footer-logo #bahrain path { fill: #fff; }
@media (max-width: 950px) { #gb-footer-logo { width: 220px; } }

/* ---------- signature: how a reward travels (mall network) ---------- */
.gb-network { overflow: hidden; }
.gb-network-wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.gb-network svg { width: 100%; height: auto; display: block; }
.gb-node { fill: var(--paper); stroke: var(--line); stroke-width: 1.5; }
.gb-node.anchor { stroke: var(--green); stroke-width: 2; }
.gb-node-label { font: 600 14px/1 "Plus Jakarta Sans", system-ui, sans-serif; fill: var(--ink); }
.gb-node-label.small { font-size: 13px; }
.gb-node-sub { font: 500 11px/1 "Plus Jakarta Sans", system-ui, sans-serif; fill: var(--muted); letter-spacing: .04em; }
.gb-link { fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; opacity: .55; }
.gb-link.back { stroke: var(--gold); }
.gb-network.is-live .gb-link { animation: gb-draw 1.4s var(--ease) forwards; }
.gb-network.is-live .gb-link.l2 { animation-delay: .35s; }
.gb-network.is-live .gb-link.l3 { animation-delay: .7s; }
.gb-network.is-live .gb-link.back { animation-delay: 1.05s; }
@keyframes gb-draw { to { stroke-dashoffset: 0; } }
.gb-coupon { opacity: 0; offset-path: path("M 92 190 C 220 190, 300 92, 418 92"); offset-rotate: 0deg; }
.gb-network.is-live .gb-coupon { animation: gb-travel 2.4s cubic-bezier(.4,0,.2,1) 1.2s infinite; }
@keyframes gb-travel {
  0% { offset-distance: 0%; opacity: 0; transform: scale(.6); }
  10% { opacity: 1; transform: scale(1); }
  80% { offset-distance: 100%; opacity: 1; transform: scale(1); }
  92% { offset-distance: 100%; opacity: 0; transform: scale(1.6); }
  100% { opacity: 0; }
}
.gb-record { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease) 2.2s, transform .6s var(--ease) 2.2s; }
.gb-network.is-live .gb-record { opacity: 1; transform: none; }
.gb-record rect { fill: var(--ink); }
.gb-record text { font: 600 11px/1 "Plus Jakarta Sans", system-ui, sans-serif; fill: #fff; }
.gb-record .k { fill: var(--gold); }
.gb-network-copy .lead { margin-top: 10px; }
.gb-network-points { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 14px; }
.gb-network-points li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; color: var(--muted); }
.gb-network-points b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--wash); color: var(--green); font-size: .8rem; }
@media (max-width: 950px) { .gb-network-wrap { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- cards & steps: lift + line ---------- */
.feature-card, .step { transition: transform .45s var(--ease), box-shadow .45s var(--ease); }
.feature-card:hover, .step:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(16,29,47,.08); }
.step-number { position: relative; display: inline-block; }
.step-number::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 2px; width: 100%; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease) .25s; }
.step.is-visible .step-number::after { transform: scaleX(1); }

/* ---------- FAQ ---------- */
.faq-list details .faq-answer { overflow: hidden; }
.faq-list details[open] .faq-answer { animation: gb-faq .45s var(--ease); }
@keyframes gb-faq { from { opacity: 0; transform: translateY(-6px);} to { opacity: 1; transform: none;} }
.faq-list summary span { display: inline-block; transition: transform .35s var(--ease); }
.faq-list details[open] summary span { transform: rotate(45deg); }

/* ---------- reduced motion / paused ---------- */
@media (prefers-reduced-motion: reduce) {
  .gb-stagger > *, .gb-hero-visual img, .gb-record { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; }
  .gb-seed, .gb-coupon { display: none !important; }
  .gb-link { stroke-dashoffset: 0 !important; animation: none !important; }
  #gb-footer-logo #seed { opacity: 1 !important; transform: none !important; }
}
html.motion-paused .gb-seed, html.motion-paused .gb-coupon { display: none; }
html.motion-paused .gb-hero-visual img { animation: none !important; }
html.motion-paused #gb-footer-logo #seed { opacity: 1; transform: none; }