/*
 * Benefit icons ("Why Rich Media?" section).
 * Markup: assets/js/benefit-icons.js. Each icon is an inline <svg class="bi bi-<key>">.
 *
 * Contract with the section styles:
 * - The host element sizes the icon (e.g. 56x56 inside an 88x88 tile); .bi fills it.
 * - Idle tiles are still: every animation below runs only under `.benefit-tile.is-active`.
 *   The idle look (grayscale, scale, shadow) belongs to the tile, not to this file.
 * - The un-animated state of every element is the icon's resting pose, which is also
 *   what prefers-reduced-motion users get.
 * - Only transform, opacity and stroke-dashoffset are animated.
 */

.bi {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Animated parts transform around their own box unless stated otherwise. */
.bi [class*="bi-"] {
  transform-box: fill-box;
  transform-origin: center;
}

/* ---------- 1. Engagement: tap, ripple, badge pop (2s) ---------- */

.bi-engagement .bi-hand { transform-origin: 20% 10%; }

.benefit-tile.is-active .bi-engagement .bi-hand {
  animation: bi-eng-hand 2s cubic-bezier(.45, 0, .25, 1) infinite;
}
.benefit-tile.is-active .bi-engagement .bi-ring {
  animation: bi-eng-ring 2s cubic-bezier(.22, .61, .36, 1) infinite both;
}
.benefit-tile.is-active .bi-engagement .bi-ring-2 { animation-delay: .1s; }
.benefit-tile.is-active .bi-engagement .bi-badge {
  animation: bi-eng-badge 2s ease-out infinite;
}

@keyframes bi-eng-hand {
  0%, 4% { transform: translate(0, 0) scale(1); }
  12% { transform: translate(1.2px, 1.6px) scale(1.03); }
  20% { transform: translate(-.6px, -.8px) scale(.94); }
  32%, 100% { transform: translate(0, 0) scale(1); }
}

/* Rest pose = settled ripple; it drifts out while the finger lifts, then a
   new ripple starts from the touch point and settles back into place. */
@keyframes bi-eng-ring {
  0% { transform: scale(1); opacity: 1; }
  14% { transform: scale(1.3); opacity: 0; }
  20% { transform: scale(.3); opacity: 0; }
  26% { opacity: 1; }
  62%, 100% { transform: scale(1); opacity: 1; }
}

@keyframes bi-eng-badge {
  0%, 24% { transform: scale(1); }
  31% { transform: scale(1.3); }
  39% { transform: scale(.92); }
  47%, 100% { transform: scale(1); }
}

/* ---------- 2. Memorability: star pop, shine sweep, sparkles (2.2s) ---------- */

.benefit-tile.is-active .bi-memorability .bi-mark {
  animation: bi-mem-float 2.2s ease-in-out infinite;
}
.benefit-tile.is-active .bi-memorability .bi-star {
  animation: bi-mem-star 2.2s cubic-bezier(.34, 1.3, .64, 1) infinite;
}
.benefit-tile.is-active .bi-memorability .bi-shine {
  animation: bi-mem-shine 2.2s cubic-bezier(.45, 0, .55, 1) infinite;
}
.benefit-tile.is-active .bi-memorability .bi-spark {
  animation: bi-mem-spark 2.2s ease-in-out infinite both;
}
.benefit-tile.is-active .bi-memorability .bi-spark-2 { animation-delay: .28s; }
.benefit-tile.is-active .bi-memorability .bi-spark-3 { animation-delay: .52s; }

@keyframes bi-mem-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-1.5px); }
}

@keyframes bi-mem-star {
  0% { transform: scale(1) rotate(0); }
  14% { transform: scale(.84) rotate(-10deg); }
  32% { transform: scale(1.16) rotate(6deg); }
  46%, 100% { transform: scale(1) rotate(0); }
}

@keyframes bi-mem-shine {
  0%, 30% { transform: translateX(0); }
  58%, 100% { transform: translateX(38px); }
}

@keyframes bi-mem-spark {
  0% { transform: scale(1) rotate(0); opacity: 1; }
  16% { transform: scale(.2) rotate(-45deg); opacity: .2; }
  34% { transform: scale(1.25) rotate(0); opacity: 1; }
  46%, 100% { transform: scale(1) rotate(0); opacity: 1; }
}

/* ---------- 3. Measurement: bars rise, trend line draws (2.4s) ---------- */

.bi-measurement .bi-bar { transform-origin: 50% 100%; }

.benefit-tile.is-active .bi-measurement .bi-bar {
  animation: bi-ms-bar 2.4s cubic-bezier(.34, 1.2, .64, 1) infinite both;
}
.benefit-tile.is-active .bi-measurement .bi-bar-2 { animation-delay: .08s; }
.benefit-tile.is-active .bi-measurement .bi-bar-3 { animation-delay: .16s; }
.benefit-tile.is-active .bi-measurement .bi-bar-4 { animation-delay: .24s; }
.benefit-tile.is-active .bi-measurement .bi-trend {
  animation: bi-ms-trend 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-measurement .bi-dot-1 { animation: bi-ms-dot-1 2.4s ease-out infinite; }
.benefit-tile.is-active .bi-measurement .bi-dot-2 { animation: bi-ms-dot-2 2.4s ease-out infinite; }
.benefit-tile.is-active .bi-measurement .bi-dot-3 { animation: bi-ms-dot-3 2.4s ease-out infinite; }
.benefit-tile.is-active .bi-measurement .bi-arrow {
  animation: bi-ms-arrow 2.4s ease-out infinite;
}

@keyframes bi-ms-bar {
  0% { transform: scaleY(1); }
  12% { transform: scaleY(.22); }
  36%, 100% { transform: scaleY(1); }
}

/* pathLength=100, dasharray "100 120": offset 0 shows the whole line, 102 hides it. */
@keyframes bi-ms-trend {
  0% { stroke-dashoffset: 0; opacity: 1; }
  9% { stroke-dashoffset: 0; opacity: 0; }
  10%, 30% { stroke-dashoffset: 102; opacity: 1; }
  62%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

/* Points pop as the line reaches them (about 25%, 45% and 74% of its length). */
@keyframes bi-ms-dot-1 {
  0% { transform: scale(1); opacity: 1; }
  8%, 36% { transform: scale(0); opacity: 0; }
  41% { transform: scale(1.35); opacity: 1; }
  47%, 100% { transform: scale(1); opacity: 1; }
}

@keyframes bi-ms-dot-2 {
  0% { transform: scale(1); opacity: 1; }
  8%, 42% { transform: scale(0); opacity: 0; }
  47% { transform: scale(1.35); opacity: 1; }
  53%, 100% { transform: scale(1); opacity: 1; }
}

@keyframes bi-ms-dot-3 {
  0% { transform: scale(1); opacity: 1; }
  8%, 49% { transform: scale(0); opacity: 0; }
  54% { transform: scale(1.35); opacity: 1; }
  60%, 100% { transform: scale(1); opacity: 1; }
}

@keyframes bi-ms-arrow {
  0% { transform: scale(1); opacity: 1; }
  9%, 58% { transform: scale(.4); opacity: 0; }
  66% { transform: scale(1.2); opacity: 1; }
  72%, 100% { transform: scale(1); opacity: 1; }
}

/* ---------- 4. Attention: blink, glance, pupil, rays (2.4s) ---------- */

.bi-attention .bi-ray-c { transform-origin: 50% 100%; }
.bi-attention .bi-ray-l { transform-origin: 100% 100%; }
.bi-attention .bi-ray-r { transform-origin: 0 100%; }

.benefit-tile.is-active .bi-attention .bi-eye {
  animation: bi-att-blink 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-attention .bi-lid {
  animation: bi-att-lid 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-attention .bi-iris {
  animation: bi-att-look 2.4s cubic-bezier(.45, 0, .25, 1) infinite;
}
.benefit-tile.is-active .bi-attention .bi-pupil {
  animation: bi-att-pupil 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-attention .bi-ray {
  animation: bi-att-ray 2.4s cubic-bezier(.34, 1.4, .64, 1) infinite both;
}
.benefit-tile.is-active .bi-attention .bi-ray-l,
.benefit-tile.is-active .bi-attention .bi-ray-r { animation-delay: .07s; }

/* The open eye squashes, then hands over to the closed lid line for a beat. */
@keyframes bi-att-blink {
  0%, 22% { transform: scaleY(1); opacity: 1; }
  27% { transform: scaleY(.3); opacity: 1; }
  28.5%, 32.5% { transform: scaleY(.2); opacity: 0; }
  34% { transform: scaleY(.3); opacity: 1; }
  40%, 100% { transform: scaleY(1); opacity: 1; }
}

@keyframes bi-att-lid {
  0%, 26.5% { opacity: 0; }
  28.5%, 32.5% { opacity: 1; }
  34.5%, 100% { opacity: 0; }
}

@keyframes bi-att-look {
  0%, 42% { transform: translate(0, 0); }
  52%, 62% { transform: translate(-4.5px, .5px); }
  74%, 84% { transform: translate(4px, -.5px); }
  95%, 100% { transform: translate(0, 0); }
}

@keyframes bi-att-pupil {
  0%, 36% { transform: scale(1); }
  46%, 82% { transform: scale(1.28); }
  94%, 100% { transform: scale(1); }
}

@keyframes bi-att-ray {
  0% { transform: scale(1); opacity: 1; }
  18%, 36% { transform: scale(.2); opacity: 0; }
  48% { transform: scale(1.25); opacity: 1; }
  58%, 100% { transform: scale(1); opacity: 1; }
}

/* ---------- 5. Portfolio: carousel of variants, card shuffle (2.4s) ---------- */

.bi-portfolio .bi-card-l,
.bi-portfolio .bi-card-r { transform-origin: 50% 100%; }

.benefit-tile.is-active .bi-portfolio .bi-card-l {
  animation: bi-pf-left 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-portfolio .bi-card-r {
  animation: bi-pf-right 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-portfolio .bi-card-f {
  animation: bi-pf-front 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-portfolio .bi-variant-1 {
  animation: bi-pf-v1 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-portfolio .bi-variant-2 {
  animation: bi-pf-v2 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-portfolio .bi-variant-3 {
  animation: bi-pf-v3 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-portfolio .bi-pager {
  animation: bi-pf-pager 2.4s cubic-bezier(.45, 0, .25, 1) infinite;
}

/* Variant swaps at 27-33%, 60-66% and 94-100%; each swap is followed by a shuffle. */
@keyframes bi-pf-left {
  0% { transform: rotate(0); }
  8% { transform: rotate(-7deg); }
  20%, 33% { transform: rotate(0); }
  41% { transform: rotate(-7deg); }
  53%, 66% { transform: rotate(0); }
  74% { transform: rotate(-7deg); }
  86%, 100% { transform: rotate(0); }
}

@keyframes bi-pf-right {
  0% { transform: rotate(0); }
  8% { transform: rotate(7deg); }
  20%, 33% { transform: rotate(0); }
  41% { transform: rotate(7deg); }
  53%, 66% { transform: rotate(0); }
  74% { transform: rotate(7deg); }
  86%, 100% { transform: rotate(0); }
}

@keyframes bi-pf-front {
  0% { transform: translateY(0); }
  8% { transform: translateY(-2px); }
  20%, 33% { transform: translateY(0); }
  41% { transform: translateY(-2px); }
  53%, 66% { transform: translateY(0); }
  74% { transform: translateY(-2px); }
  86%, 100% { transform: translateY(0); }
}

@keyframes bi-pf-v1 {
  0%, 27% { transform: translateX(0); opacity: 1; }
  33% { transform: translateX(-9px); opacity: 0; }
  34%, 94% { transform: translateX(9px); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes bi-pf-v2 {
  0%, 27% { transform: translateX(9px); opacity: 0; }
  33%, 60% { transform: translateX(0); opacity: 1; }
  66%, 100% { transform: translateX(-9px); opacity: 0; }
}

@keyframes bi-pf-v3 {
  0%, 60% { transform: translateX(9px); opacity: 0; }
  66%, 94% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-9px); opacity: 0; }
}

@keyframes bi-pf-pager {
  0%, 27% { transform: translateX(0); }
  33%, 60% { transform: translateX(6px); }
  66%, 94% { transform: translateX(12px); }
  100% { transform: translateX(0); }
}

/* ---------- 6. Personalisation: ping, sun/cloud swap, clock (2.4s) ---------- */

/* Clock hands rotate around the clock centre, the origin of their local frame. */
.bi-personalisation .bi-hour,
.bi-personalisation .bi-minute {
  transform-box: view-box;
  transform-origin: 0 0;
}

.benefit-tile.is-active .bi-personalisation .bi-pin {
  animation: bi-ps-pin 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-personalisation .bi-ping {
  animation: bi-ps-ping 2.4s ease-out infinite;
}
.benefit-tile.is-active .bi-personalisation .bi-sun {
  animation: bi-ps-sun 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-personalisation .bi-sun-rays {
  animation: bi-ps-rays 2.4s linear infinite;
}
.benefit-tile.is-active .bi-personalisation .bi-cloud {
  animation: bi-ps-cloud 2.4s ease-in-out infinite;
}
.benefit-tile.is-active .bi-personalisation .bi-minute {
  animation: bi-ps-spin 2.4s linear infinite;
}
.benefit-tile.is-active .bi-personalisation .bi-hour {
  animation: bi-ps-spin 28.8s linear infinite;
}

@keyframes bi-ps-pin {
  0%, 100% { transform: translateY(0); }
  40% { transform: translateY(-2px); }
  80% { transform: translateY(0); }
}

@keyframes bi-ps-ping {
  0% { transform: scale(1); opacity: 1; }
  40% { transform: scale(1.6); opacity: 0; }
  41% { transform: scale(.5); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes bi-ps-sun {
  0%, 26% { transform: scale(1); opacity: 1; }
  38%, 70% { transform: scale(.6); opacity: 0; }
  84%, 100% { transform: scale(1); opacity: 1; }
}

@keyframes bi-ps-rays {
  to { transform: rotate(45deg); }
}

@keyframes bi-ps-cloud {
  0%, 22% { transform: translateX(14px); opacity: 0; }
  38%, 64% { transform: translateX(0); opacity: 1; }
  80%, 100% { transform: translateX(-14px); opacity: 0; }
}

@keyframes bi-ps-spin {
  to { transform: rotate(360deg); }
}

/* ---------- Reduced motion: hold the resting pose ---------- */

@media (prefers-reduced-motion: reduce) {
  .benefit-tile .bi,
  .benefit-tile .bi * {
    animation: none !important;
  }
}