/* ════════════════════════════════════════════════════════════
   KREATORLI — Hero 3D Animation Scene
   ════════════════════════════════════════════════════════════

   group-wrap = 340 × 500px  |  phone = 220 × 450px
   Phone edges inside group-wrap:
     left  = (340-220)/2 = 60px from left
     right = 60px from right
     top   = 500×0.50 − 450×0.52 = 16px from top
     bottom= 34px from bottom

   Z-depth — ALL elements in front of phone (Z=0):
     phone          Z=0
     fc-img-rev     Z=40   2.png: right-side partial screenshot
     fc-img-book    Z=50   3.png: bottom card
     fc-img-earn    Z=60   4.png: top decoration
     fc-img-extra   Z=55   5.png: social icon 1
     fc-img-extra2  Z=55   6.png: social icon 2
   ════════════════════════════════════════════════════════════ */


/* ── 1. Pulse ── */
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(1.5); }
}
.badge-dot { animation: pulse 2s infinite; }


/* ── 2. Bob keyframes — SVG/HTML cards (.fc) ── */
/* No rotateZ since phone has none; Z is baked to prevent snap */
@keyframes bob1 {
  0%, 100% { transform: translateZ(80px) translateY(0px); }
  50%       { transform: translateZ(80px) translateY(-4px); }
}
@keyframes bob2 {
  0%, 100% { transform: translateZ(90px) translateY(0px); }
  50%       { transform: translateZ(90px) translateY(-3px); }
}
@keyframes bob3 {
  0%, 100% { transform: translateZ(70px) translateY(0px); }
  50%       { transform: translateZ(70px) translateY(-3px); }
}


/* ── 3. Bob keyframes — image cards ── */
/* Each card bakes its own Z so animation never resets the transform */

@keyframes bob-rev {
  0%, 100% { transform: translateZ(25px) translateY(0px); }
  50%       { transform: translateZ(25px) translateY(-5px); }
}
@keyframes bob-book {
  0%, 100% { transform: translateZ(50px) translateY(0px); }
  50%       { transform: translateZ(50px) translateY(-4px); }
}
@keyframes bob-earn {
  0%, 100% { transform: translateZ(30px) translateY(0px); }
  50%       { transform: translateZ(30px) translateY(-7px); }
}
@keyframes bob-extra {
  0%, 100% { transform: translateZ(30px) translateY(0px); }
  50%       { transform: translateZ(30px) translateY(-4px); }
}
@keyframes bob-extra2 {
  0%, 100% { transform: translateZ(30px) translateY(0px); }
  50%       { transform: translateZ(30px) translateY(-3px); }
}


/* ── 4. Scene ── */
.scene {
  perspective: 1200px;
  perspective-origin: 50% 40%;
  width: 460px;
  height: 560px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}

.group-wrap {
  position: relative;
  width: 340px;
  height: 500px;
  transform-style: preserve-3d;
  transform: rotateY(0deg) rotateX(-8deg);
  will-change: transform;
}

.group {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  opacity: 0;
  pointer-events: none;
}

.group.active {
  opacity: 1;
  pointer-events: auto;
}


/* ── 5. Phone ── */
.phone {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%) translateZ(0px) rotateZ(0deg);
  width: 220px;
  height: 450px;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  /* box-shadow:
    0 0 0 7px rgba(255, 255, 255, 0.22),
    0 45px 90px rgba(0, 0, 0, 0.45),
    0 15px 35px rgba(0, 0, 0, 0.25),
    inset 0 0 25px rgba(0, 0, 0, 0.15); */
  z-index: 2;
}

.phone img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  display: block;
}


/* ── 6. Floating cards — SVG/HTML ── */
.fc {
  position: absolute;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 14px;
  padding: 10px 14px;
  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.20),
    0 2px  10px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.9);
  z-index: 4;
  white-space: nowrap;
  backdrop-filter: blur(8px);
}

.fc-rev  { top: 22px;    right: -18px; min-width: 152px; transform: translateZ(80px); }
.fc-book { top: 112px;   left: -22px;                    transform: translateZ(90px); }
.fc-earn { bottom: 58px; right: -12px; min-width: 162px; transform: translateZ(70px); }

.group.active .fc-rev  { animation: bob1 3.2s ease-in-out infinite; }
.group.active .fc-book { animation: bob2 3.8s ease-in-out infinite 0.5s; }
.group.active .fc-earn { animation: bob3 3.5s ease-in-out infinite 1s; }


/* ── 7. Card internals ── */
.fc-label {
  font-size: 10px;
  font-weight: 600;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 5px;
}
.fc-val {
  font-size: 15px;
  font-weight: 700;
  color: #111;
  line-height: 1.2;
}
.fc-sub {
  font-size: 11px;
  color: #999;
  margin-top: 2px;
}
.dring {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dring svg {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: linear-gradient(135deg, #3E7CF2, #21B4FA);
  color: #fff;
  border-radius: 8px;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
}
.gdot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7fffb0;
  flex-shrink: 0;
}
.earn-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.earn-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: linear-gradient(135deg, #3E7CF2, #21B4FA);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}


/* ════════════════════════════════════════════════════════════
   8. Floating image cards
   Positions carried over from your working layout.
   Only the transform values updated to drop rotateZ(0deg).
   ════════════════════════════════════════════════════════════ */

.fc-img {
  position: absolute;
  z-index: 4;
  overflow: hidden;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.fc-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* 2.png — partial screenshot extending from phone's right */
.fc-img.fc-img-rev {
  top: 260px;
  right: 73px;
  width: 190px;
  transform: translateZ(40px);
  border-radius: 14px;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.18),
    0 2px 8px  rgba(0,0,0,0.12);
}

/* 3.png — large bottom card */
.fc-img.fc-img-book {
  top: 300px;
  left: 245px;
  width: 140px;
  transform: translateZ(50px);
  border-radius: 16px;
  box-shadow:
    0 12px 32px rgba(0,0,0,0.22),
    0 4px  12px rgba(0,0,0,0.14);
}

/* 4.png — top decoration (cherry / clip / etc.) */
.fc-img.fc-img-earn {
  top: 80px;
  right: 245px;
  width: 110px;
  border: 2px solid #f5f9ff;
  border-radius: 10px;
  transform: translateZ(60px);
}

/* 5.png — first social icon */
.fc-img.fc-img-extra {
  top: 32px;
  right: 18px;
  width: 80px;
  transform: translateZ(55px);
}

/* 6.png — second social icon */
.fc-img.fc-img-extra2 {
  top: 63px;
  right: 9px;
  width: 72px;
  transform: translateZ(55px);
}


/* ── 9. Active bobbing ── */
.group.active .fc-img.fc-img-rev    { animation: bob-rev    3.6s ease-in-out infinite 0.2s; }
.group.active .fc-img.fc-img-book   { animation: bob-book   4.0s ease-in-out infinite 0.8s; }
.group.active .fc-img.fc-img-earn   { animation: bob-earn   3.2s ease-in-out infinite 0.0s; }
.group.active .fc-img.fc-img-extra  { animation: bob-extra  3.8s ease-in-out infinite 1.2s; }
.group.active .fc-img.fc-img-extra2 { animation: bob-extra2 4.1s ease-in-out infinite 1.8s; }


/* ── 10. Responsive — small screens (max-width: 400px) ── */
/*
  Desktop  →  Small screen
  group-wrap: 340×500px  →  240×380px   (scale X=0.706, scale Y=0.760)
  phone:      220×450px  →  155×320px   (same scale ratios)

  Every position/size value = desktop value × matching scale ratio:
    horizontal (top/left/right):
      top    × 0.760  (Y scale)
      left   × 0.706  (X scale)
      right  × 0.706  (X scale)
      width  × 0.706  (X scale)

  ┌───────────────────────────────────────────────────────┐
  │  Element       top     left/right  width              │
  │  fc-img-rev    235→179  right:73→52  180→127           │
  │  fc-img-book   300→228  left:245→173 140→99            │
  │  fc-img-earn    80→61   right:260→184 110→78           │
  │  fc-img-extra   32→24   right:18→13   80→56            │
  │  fc-img-extra2  63→48   right:9→6     72→51            │
  └───────────────────────────────────────────────────────┘
*/
@media (max-width: 400px) {

  /* ── Scene & container ── */
  .scene {
    width: 280px;
    height: 360px;
    perspective: 600px;
    perspective-origin: 50% 45%;
  }

  .group-wrap {
    width: 200px;
    height: 320px;
  }

  /* ── Phone: 220×450 → 155×320 ── */
  .phone {
    width: 130px;
    height: 270px;
    border-radius: 18px;
  }

  /* ── SVG/HTML cards ── */
  .fc-rev  { top: 14px;    right: -10px; }
  .fc-book { top: 80px;    left: -10px;  }
  .fc-earn { bottom: 40px; right: -8px;  }

  /* ── 2.png — partial screenshot (fc-img-rev) ── */
  /* desktop: top:235 right:73 width:180  →  ×0.76 / ×0.706 */
  .fc-img.fc-img-rev {
    top: 179px;
    right: 52px;
    width: 127px;
    border-radius: 10px;
  }

  /* ── 3.png — bottom card (fc-img-book) ── */
  /* desktop: top:300 left:245 width:140  →  ×0.76 / ×0.706 */
  .fc-img.fc-img-book {
    top: 228px;
    left: 173px;
    width: 99px;
    border-radius: 11px;
  }

  /* ── 4.png — top decoration (fc-img-earn) ── */
  /* desktop: top:80 right:260 width:110  →  ×0.76 / ×0.706 */
  .fc-img.fc-img-earn {
    top: 61px;
    right: 184px;
    width: 78px;
    border-radius: 7px;
  }

  /* ── 5.png — first social icon (fc-img-extra) ── */
  /* desktop: top:32 right:18 width:80  →  ×0.76 / ×0.706 */
  .fc-img.fc-img-extra {
    top: 24px;
    right: 13px;
    width: 56px;
  }

  /* ── 6.png — second social icon (fc-img-extra2) ── */
  /* desktop: top:63 right:9 width:72  →  ×0.76 / ×0.706 */
  .fc-img.fc-img-extra2 {
    top: 48px;
    right: 6px;
    width: 51px;
  }

}

/* Medium screens (401px - 767px) */
@media (min-width: 401px) and (max-width: 767px) {
  .scene {
    width: 340px;
    height: 420px;
    perspective: 800px;
  }

  .group-wrap {
    width: 260px;
    height: 380px;
  }

  .phone {
    width: 170px;
    height: 350px;
  }

  /* Adjust floating cards for medium screens */
  .fc-img.fc-img-rev {
    top: 220px;
    right: 60px;
    width: 150px;
  }

  .fc-img.fc-img-book {
    top: 280px;
    left: 200px;
    width: 120px;
  }

  .fc-img.fc-img-earn {
    top: 70px;
    right: 200px;
    width: 90px;
  }

  .fc-img.fc-img-extra {
    top: 28px;
    right: 15px;
    width: 70px;
  }

  .fc-img.fc-img-extra2 {
    top: 55px;
    right: 8px;
    width: 60px;
  }
}

/* ── 11. Reduced motion for accessibility ── */
@media (prefers-reduced-motion: reduce) {
  .badge-dot {
    animation: none;
  }
  
  .group.active .fc-rev,
  .group.active .fc-book,
  .group.active .fc-earn,
  .group.active .fc-img.fc-img-rev,
  .group.active .fc-img.fc-img-book,
  .group.active .fc-img.fc-img-earn,
  .group.active .fc-img.fc-img-extra,
  .group.active .fc-img.fc-img-extra2 {
    animation: none;
  }
}