/* TapFor5 visual refresh v4 — derived from the 2026-07-22 19:47:46 reference capture. */

.tap-scene {
  background: #f4efe7;
  box-shadow: 0 32px 90px rgba(11, 29, 58, 0.14);
}

.tap-scene::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 253, 249, 0.32), transparent 48%),
    linear-gradient(180deg, transparent 66%, rgba(11, 29, 58, 0.05));
}

.scene-halo {
  display: none;
}

.demo-scene-photo {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 65% center;
  animation: tapFor5SceneBreath 9s cubic-bezier(0.22, 1, 0.36, 1) infinite alternate;
  will-change: transform;
}

.demo-phone {
  top: 12%;
  right: auto;
  left: 7%;
  width: clamp(172px, 17vw, 215px);
  height: auto;
  aspect-ratio: 225 / 458;
  animation: tapFor5PhoneApproach 6.4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  transform-origin: center center;
  will-change: transform;
}

.demo-large .demo-phone {
  right: auto;
  left: 10%;
}

.phone-shell {
  background: #07162c;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 34px 70px rgba(11, 29, 58, 0.24);
  transform: rotate(-2.2deg);
}

.phone-screen {
  background: linear-gradient(155deg, #fffdf9, #edf2fa);
}

.phone-notification,
.review-sheet {
  animation-duration: 6.4s;
}

.phone-notification {
  border: 1px solid rgba(11, 29, 58, 0.06);
  box-shadow: 0 14px 34px rgba(11, 29, 58, 0.12);
}

.tap-ripple {
  z-index: 3;
  top: 57%;
  left: 43%;
  width: 76px;
  height: 76px;
  border-color: rgba(36, 107, 254, 0.72);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  animation: tapFor5Ripple 6.4s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

.ripple-two {
  animation-delay: 0.2s;
}

.concept-badge {
  top: 16px;
  right: auto;
  left: 16px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(7, 19, 39, 0.78);
  backdrop-filter: blur(10px);
}

.scene-steps span {
  border: 1px solid rgba(11, 29, 58, 0.07);
  background: rgba(255, 253, 249, 0.9);
  box-shadow: 0 8px 28px rgba(11, 29, 58, 0.08);
}

.concept-media img,
.comparison-card img,
.bundle-media img,
.gallery-main img,
.step-visual img {
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s ease;
}

.concept-media:hover img,
.comparison-card:hover img,
.mixed-bundle-card:hover .bundle-media img {
  transform: scale(1.018);
  filter: saturate(1.015) contrast(1.01);
}

.gallery-concept {
  animation: tapFor5GalleryIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.visual-reveal,
.visual-reveal.is-visible {
  opacity: 1;
  transform: none;
  transition: none;
}

.steps-v2 article,
.comparison-card,
.mixed-bundle-card,
.context-card {
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1) var(--visual-delay, 0ms),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1) var(--visual-delay, 0ms),
    box-shadow 0.35s ease,
    border-color 0.35s ease;
}

.steps-v2 article:hover,
.comparison-card:hover,
.mixed-bundle-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 72px rgba(11, 29, 58, 0.12);
}

@keyframes tapFor5SceneBreath {
  from { transform: scale(1.004) translate3d(0, 0, 0); }
  to { transform: scale(1.018) translate3d(-0.25%, -0.2%, 0); }
}

@keyframes tapFor5PhoneApproach {
  0%, 17%, 100% { transform: translate3d(-12px, 3px, 0) rotate(-1deg); }
  35%, 67% { transform: translate3d(22px, -2px, 0) rotate(0.6deg); }
}

@keyframes tapFor5Ripple {
  0%, 27% { transform: scale(0.42); opacity: 0; }
  36% { opacity: 0.62; }
  61%, 100% { transform: scale(1.55); opacity: 0; }
}

@keyframes tapFor5GalleryIn {
  from { opacity: 0.45; transform: scale(1.008); }
  to { opacity: 1; transform: scale(1); }
}

@media (max-width: 980px) {
  .demo-phone,
  .demo-large .demo-phone {
    left: 7%;
    width: 178px;
  }

  .tap-ripple {
    left: 42%;
  }
}

@media (max-width: 720px) {
  .demo-scene-photo {
    object-position: 65% center;
  }

  .demo-phone,
  .demo-large .demo-phone {
    top: 16%;
    right: auto;
    left: 2%;
    width: 126px;
    animation: tapFor5PhoneApproachMobile 6.4s cubic-bezier(0.45, 0, 0.2, 1) infinite;
  }

  .tap-ripple {
    top: 58%;
    left: 39%;
    width: 58px;
    height: 58px;
  }

  .concept-badge {
    top: 10px;
    left: 10px;
  }

  .visual-reveal {
    transform: none;
  }
}

@keyframes tapFor5PhoneApproachMobile {
  0%, 17%, 100% { transform: translate3d(-7px, 2px, 0) rotate(-1deg); }
  35%, 67% { transform: translate3d(12px, -1px, 0) rotate(0.4deg); }
}

@media (prefers-reduced-motion: reduce) {
  .demo-scene-photo,
  .demo-phone,
  .tap-ripple,
  .phone-notification,
  .review-sheet,
  .gallery-concept {
    animation: none !important;
  }

  .visual-reveal,
  .visual-reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .concept-media img,
  .comparison-card img,
  .bundle-media img,
  .gallery-main img,
  .step-visual img,
  .steps-v2 article,
  .comparison-card,
  .mixed-bundle-card,
  .context-card {
    transition: none !important;
  }

  .concept-media:hover img,
  .comparison-card:hover img,
  .mixed-bundle-card:hover .bundle-media img,
  .steps-v2 article:hover,
  .comparison-card:hover,
  .mixed-bundle-card:hover {
    transform: none;
    filter: none;
  }
}