/* Card 02 art, "the creative that wins": three phone screens in a shallow 3D row. The centre one lights up mint and plays,
   its progress bar runs, and reactions float up beside it. No real ads, creators or results are shown. */
.art--reel { flex: 1; min-height: 196px; margin: 18px -8px 16px; display: flex; align-items: center; justify-content: center; position: relative; }
.art--reel::before { content: ""; position: absolute; inset: -10% -6%; z-index: -1; pointer-events: none;
  background: radial-gradient(40% 55% at 50% 50%, rgba(122, 244, 208, 0.10), transparent 70%); }

.rl { position: relative; width: 100%; height: 184px; perspective: 700px; }
.rp { position: absolute; top: 50%; left: 50%; border-radius: 16px; }
/* the two other creatives, turned in towards the centre */
.rp--l, .rp--r { width: 64px; height: 124px; margin: -62px 0 0 -32px;
  background: linear-gradient(180deg, #1d1e1f, #141516); box-shadow: inset 0 0 0 1px rgba(250, 250, 248, 0.09), 0 18px 30px -18px rgba(0, 0, 0, 0.95); }
.rp--l { transform: translateX(-80px) rotateY(34deg); }
.rp--r { transform: translateX(80px) rotateY(-34deg); }
/* the one that plays */
.rp--c { z-index: 1; width: 86px; height: 152px; margin: -76px 0 0 -43px; display: grid; place-items: center;
  background: linear-gradient(180deg, #1c1e1f, #151617); box-shadow: inset 0 0 0 1px rgba(250, 250, 248, 0.12), 0 22px 40px -20px rgba(0, 0, 0, 0.95); }
.rp--c::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 60% at 50% 40%, rgba(122, 244, 208, 0.12), transparent 75%);
  box-shadow: inset 0 0 0 1.5px rgba(122, 244, 208, 0.8), 0 0 44px -8px rgba(122, 244, 208, 0.45); }
.rp-play { width: 26px; height: 26px; margin-left: 4px; filter: drop-shadow(0 0 8px rgba(122, 244, 208, 0.5)); }
.rp-bar { position: absolute; left: 12px; right: 12px; bottom: 14px; height: 3px; border-radius: 3px; background: rgba(250, 250, 248, 0.14); overflow: hidden; }
.rp-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--growth); transform-origin: 0 50%; transform: scaleX(.62); }
/* reactions, rising beside the screen */
.rh { position: absolute; z-index: 2; left: calc(50% + 50px); bottom: 46px; width: 18px; height: 18px; }
.rh svg { width: 100%; height: 100%; display: block; }
.rh--2 { left: calc(50% + 34px); width: 13px; height: 13px; }
.rh--3 { bottom: 36px; }

/* sequence, played once when the card is in view (script adds .play):
   the row appears, the centre lights and plays, the bar runs, reactions float up and one settles */
.art--reel .rp, .art--reel .rh { opacity: 0; }
.art--reel .rp { translate: 0 8px; }
.art--reel .rp--c::after, .art--reel .rp-play { opacity: 0; }
.art--reel .rp-bar i { transform: scaleX(0); }
.art--reel.play .rp { animation: reelIn .8s cubic-bezier(.2, .8, .2, 1) forwards; }
.art--reel.play .rp--c { animation-delay: .15s; }
.art--reel.play .rp--l, .art--reel.play .rp--r { animation: reelIn .8s cubic-bezier(.2, .8, .2, 1) .3s forwards, reelBack 1s ease 1.2s forwards; }
.art--reel.play .rp--c::after { animation: reelFade 1s ease 1s forwards; }
.art--reel.play .rp-play { animation: reelPlay .7s cubic-bezier(.2, .8, .2, 1) 1.3s forwards; }
.art--reel.play .rp-bar i { animation: reelBar 2.6s cubic-bezier(.4, 0, .3, 1) 1.6s forwards; }
.art--reel.play .rh--1 { animation: reelFloat 1.8s ease-out 2.1s forwards; }
.art--reel.play .rh--2 { animation: reelFloat 1.8s ease-out 2.6s forwards; }
.art--reel.play .rh--3 { animation: reelRest .9s cubic-bezier(.2, .8, .2, 1) 3.2s forwards; }
@keyframes reelIn { to { opacity: 1; translate: 0 0; } }
@keyframes reelBack { from { opacity: 1; translate: 0 0; } to { opacity: .55; translate: 0 0; } }
@keyframes reelFade { to { opacity: 1; } }
@keyframes reelPlay { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes reelBar { to { transform: scaleX(.62); } }
@keyframes reelFloat { 0% { opacity: 0; transform: translateY(10px) scale(.6); } 25% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-58px) scale(.9); } }
@keyframes reelRest { from { opacity: 0; transform: translateY(12px) scale(.6); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .art--reel .rp, .art--reel.play .rp, .art--reel .rp--c::after, .art--reel .rp-play, .art--reel .rh--3 { opacity: 1; translate: none; transform: none; animation: none; }
  .art--reel .rp--l, .art--reel.play .rp--l { opacity: .55; transform: translateX(-80px) rotateY(34deg); }
  .art--reel .rp--r, .art--reel.play .rp--r { opacity: .55; transform: translateX(80px) rotateY(-34deg); }
  .art--reel .rp-bar i, .art--reel.play .rp-bar i { transform: scaleX(.62); animation: none; }
  .art--reel .rh--1, .art--reel .rh--2 { animation: none; opacity: 0; }
}
@media (max-width: 860px) {
  .art--reel { min-height: 220px; }
  .rl { height: 220px; transform: scale(1.18); }
}