/* Scroll reveals & SVG motion — loaded after landing.css */

@keyframes cc-marquee {
  to {
    transform: translateX(-50%);
  }
}

[data-cc-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s var(--cc-ease, cubic-bezier(0.33, 1, 0.68, 1)),
    transform 0.7s var(--cc-ease, cubic-bezier(0.33, 1, 0.68, 1));
  transition-delay: calc(var(--cc-reveal-delay, 0) * 80ms);
}

[data-cc-reveal].cc-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

[data-cc-reveal="scale"] {
  transform: translateY(20px) scale(0.96);
}

[data-cc-reveal="scale"].cc-reveal--visible {
  transform: translateY(0) scale(1);
}

[data-cc-reveal="fade"] {
  transform: none;
}

.cc-reveal-stagger > [data-cc-reveal] {
  --cc-reveal-i: 0;
}

.cc-reveal-stagger > *:nth-child(1) { --cc-reveal-delay: 0; }
.cc-reveal-stagger > *:nth-child(2) { --cc-reveal-delay: 1; }
.cc-reveal-stagger > *:nth-child(3) { --cc-reveal-delay: 2; }
.cc-reveal-stagger > *:nth-child(4) { --cc-reveal-delay: 3; }
.cc-reveal-stagger > *:nth-child(5) { --cc-reveal-delay: 4; }
.cc-reveal-stagger > *:nth-child(6) { --cc-reveal-delay: 5; }

/* Hero ambient SVG */
.cc-hero__ambient {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
  border-radius: 0;
}

.cc-hero__swipe-btn {
  position: absolute;
  z-index: 0;
  opacity: 0.92;
  transform: rotate(var(--cc-btn-tilt));
  transform-origin: center center;
}

.cc-hero__swipe-btn--keep {
  right: clamp(8px, 4vw, 48px);
  top: 58%;
  animation: cc-hero-swipe-keep 2.8s ease-in-out infinite;
}

.cc-hero__float-icon {
  position: absolute;
  right: 7%;
  top: 14%;
  opacity: 0.92;
  animation: cc-hero-icon-float 7s ease-in-out infinite;
}

.cc-hero__app-tile {
  border-radius: 11px;
  box-shadow: 0 4px 0 #9c0002;
  line-height: 0;
  animation: cc-hero-icon-press 7s ease-in-out infinite;
}

.cc-hero__app-tile img {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 11px;
}

@media (max-width: 899px) {
  .cc-hero__float-icon {
    top: 5%;
    right: 4%;
    opacity: 0.75;
  }

  .cc-hero__app-tile img {
    width: 36px;
    height: 36px;
  }
}

.cc-hero__content {
  position: relative;
  z-index: 1;
}

@keyframes cc-hero-icon-float {
  0%,
  100% {
    transform: translateY(0) rotate(-4deg);
  }
  50% {
    transform: translateY(-10px) rotate(4deg);
  }
}

@keyframes cc-hero-icon-press {
  0%,
  88%,
  100% {
    transform: translateY(0);
  }
  92% {
    transform: translateY(3px);
  }
  96% {
    transform: translateY(0);
  }
}

@keyframes cc-hero-swipe-keep {
  0%,
  100% {
    transform: rotate(var(--cc-btn-tilt)) translate(0, 0);
    opacity: 0.6;
  }
  50% {
    transform: rotate(var(--cc-btn-tilt)) translate(10px, 0);
    opacity: 1;
  }
}

@keyframes cc-demo-try-pulse {
  0%,
  100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(3px);
  }
}

/* Phone demo swipe hints — one button at a time */
@keyframes cc-demo-hint-cycle-delete {
  0%,
  46% {
    opacity: 1;
    visibility: visible;
    transform: rotate(var(--cc-btn-tilt)) translate(-6px, -50%);
  }
  50%,
  100% {
    opacity: 0;
    visibility: hidden;
    transform: rotate(var(--cc-btn-tilt)) translateY(-50%);
  }
}

@keyframes cc-demo-hint-cycle-keep {
  0%,
  46% {
    opacity: 0;
    visibility: hidden;
    transform: rotate(var(--cc-btn-tilt)) translateY(-50%);
  }
  50%,
  96% {
    opacity: 1;
    visibility: visible;
    transform: rotate(var(--cc-btn-tilt)) translate(6px, -50%);
  }
  100% {
    opacity: 0;
    visibility: hidden;
    transform: rotate(var(--cc-btn-tilt)) translateY(-50%);
  }
}

.cc-phone-demo.is-hint-delete .cc-phone-demo__hint--delete {
  animation: cc-demo-hint-nudge-delete 1.8s ease-in-out infinite;
}

.cc-phone-demo.is-hint-keep .cc-phone-demo__hint--keep {
  animation: cc-demo-hint-nudge-keep 1.8s ease-in-out infinite;
}

@keyframes cc-demo-hint-nudge-delete {
  0%,
  100% {
    transform: rotate(var(--cc-btn-tilt)) translate(-4px, -50%);
  }
  50% {
    transform: rotate(var(--cc-btn-tilt)) translate(-12px, -50%);
  }
}

@keyframes cc-demo-hint-nudge-keep {
  0%,
  100% {
    transform: rotate(var(--cc-btn-tilt)) translate(4px, -50%);
  }
  50% {
    transform: rotate(var(--cc-btn-tilt)) translate(12px, -50%);
  }
}

/* Streak flames */
@keyframes cc-flame-float {
  0%,
  100% {
    transform: translate(-50%, -50%) scale(var(--cc-flame-s, 1)) rotate(-2deg);
    filter: brightness(1);
  }
  35% {
    transform: translate(-50%, calc(-50% - 5px)) scale(calc(var(--cc-flame-s, 1) * 1.08)) rotate(2deg);
    filter: brightness(1.12);
  }
  70% {
    transform: translate(-50%, calc(-50% + 3px)) scale(calc(var(--cc-flame-s, 1) * 0.96)) rotate(-1deg);
    filter: brightness(0.95);
  }
}

@keyframes cc-flame-rise {
  0% {
    top: 108%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--cc-flame-s, 1) * 0.82)) rotate(-4deg);
    filter: brightness(0.9) saturate(0.95);
  }
  6% {
    opacity: 0.34;
  }
  18% {
    transform: translate(calc(-50% - 4px), -50%) scale(var(--cc-flame-s, 1)) rotate(2deg);
    filter: brightness(1.08) saturate(1.05);
  }
  52% {
    transform: translate(calc(-50% + 5px), -50%) scale(calc(var(--cc-flame-s, 1) * 1.04)) rotate(-2deg);
    filter: brightness(1.12) saturate(1.1);
  }
  82% {
    transform: translate(calc(-50% - 2px), -50%) scale(calc(var(--cc-flame-s, 1) * 0.94)) rotate(3deg);
    filter: brightness(1) saturate(1);
  }
  94% {
    opacity: 0.16;
  }
  100% {
    top: -14%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(calc(var(--cc-flame-s, 1) * 0.78)) rotate(-3deg);
    filter: brightness(0.88) saturate(0.9);
  }
}

/* App preview — storage ring swap */
@keyframes cc-freed-ring-swap {
  0%,
  42%,
  100% {
    opacity: 0;
  }
  50%,
  92% {
    opacity: 1;
  }
}

/* Problem storage meter */
.cc-problem__visual.cc-reveal--visible .cc-storage-meter__seg--photos {
  width: calc(var(--cc-seg) * 1%);
  transition-delay: 0.12s;
}

.cc-problem__visual.cc-reveal--visible .cc-storage-meter__seg--apps {
  width: calc(var(--cc-seg) * 1%);
  transition-delay: 0.28s;
}

.cc-problem__visual.cc-reveal--visible .cc-storage-meter__seg--system {
  width: calc(var(--cc-seg) * 1%);
  transition-delay: 0.4s;
}

.cc-problem__visual.cc-reveal--visible .cc-storage-meter__seg--free {
  width: calc(var(--cc-seg) * 1%);
  transition-delay: 0.52s;
}

.cc-storage-meter__badge {
  animation: cc-storage-badge-pulse 2.4s ease-in-out infinite;
}

.cc-problem__visual.cc-reveal--visible .cc-storage-meter__card {
  animation: cc-storage-card-in 0.7s var(--cc-ease, cubic-bezier(0.33, 1, 0.68, 1)) both;
}

@keyframes cc-storage-card-in {
  from {
    opacity: 0.6;
    transform: translateY(10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cc-storage-badge-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(201, 4, 6, 0);
  }
  50% {
    box-shadow: 0 0 0 4px rgba(201, 4, 6, 0.08);
  }
}

/* Step SVG icons — physical cards & buttons (matches app press UI) */
.cc-step__icon-svg {
  width: 80px;
  height: auto;
  margin: 0 auto 12px;
  display: block;
  overflow: visible;
}

.cc-step__card {
  transform-origin: 36px 54px;
}

.cc-step__icon-svg--delete .cc-step__card {
  animation: cc-step-card-left 2.2s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

.cc-step__icon-svg--delete .cc-step__tint--delete {
  animation: cc-step-tint-delete 2.2s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

.cc-step__icon-svg--keep .cc-step__card {
  animation: cc-step-card-right 2.2s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

.cc-step__icon-svg--keep .cc-step__tint--keep {
  animation: cc-step-tint-keep 2.2s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

.cc-step__icon-svg--keep .cc-step__heart {
  transform-origin: 36px 40px;
  animation: cc-step-heart-pop 2.2s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

.cc-step__hint {
  transform-origin: center;
}

.cc-step__hint--left {
  animation: cc-step-hint-left 2.2s ease-in-out infinite;
}

.cc-step__hint--right {
  animation: cc-step-hint-right 2.2s ease-in-out infinite;
}

.cc-step__badge-body,
.cc-step__badge-text {
  animation: cc-step-badge-press 2.4s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

.cc-step__bar-fill {
  transform-origin: left center;
  transform-box: fill-box;
  animation: cc-step-bar-fill 2.4s cubic-bezier(0.33, 1, 0.68, 1) infinite;
}

.cc-step__freed-burst {
  transform-origin: 36px 38px;
  animation: cc-step-burst-pop 2.4s ease-in-out infinite;
}

@keyframes cc-step-card-left {
  0%,
  18%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  42% {
    transform: translate(-9px, 3px) rotate(-12deg);
  }
  58% {
    transform: translate(-9px, 3px) rotate(-12deg);
  }
}

@keyframes cc-step-tint-delete {
  0%,
  18%,
  100% {
    opacity: 0;
  }
  42%,
  58% {
    opacity: 1;
  }
}

@keyframes cc-step-card-right {
  0%,
  18%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  42% {
    transform: translate(9px, 3px) rotate(12deg);
  }
  58% {
    transform: translate(9px, 3px) rotate(12deg);
  }
}

@keyframes cc-step-tint-keep {
  0%,
  18%,
  100% {
    opacity: 0;
  }
  42%,
  58% {
    opacity: 1;
  }
}

@keyframes cc-step-heart-pop {
  0%,
  30%,
  100% {
    transform: scale(0.88);
    opacity: 0.65;
  }
  48% {
    transform: scale(1.08);
    opacity: 1;
  }
}

@keyframes cc-step-hint-left {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.55;
  }
  42%,
  58% {
    transform: translateX(-3px);
    opacity: 1;
  }
}

@keyframes cc-step-hint-right {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.55;
  }
  42%,
  58% {
    transform: translateX(3px);
    opacity: 1;
  }
}

@keyframes cc-step-badge-press {
  0%,
  22%,
  100% {
    transform: translateY(0);
  }
  8% {
    transform: translateY(3px);
  }
  14% {
    transform: translateY(0);
  }
  58% {
    transform: translateY(3px);
  }
  68% {
    transform: translateY(0);
  }
}

@keyframes cc-step-bar-fill {
  0%,
  25% {
    transform: scaleX(0.3);
  }
  55%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes cc-step-burst-pop {
  0%,
  25%,
  100% {
    transform: scale(0.85);
    opacity: 0.35;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
}

/* On this Day — front card swipe nudge */
.cc-on-this-day__mock.is-otd-active .cc-on-this-day__memory.is-front {
  animation: cc-otd-swipe-nudge 3.4s ease-in-out infinite;
}

@keyframes cc-otd-swipe-nudge {
  0%,
  100% {
    transform: rotate(-2deg) translateX(0);
  }
  18% {
    transform: rotate(-3deg) translateX(-14px);
  }
  36% {
    transform: rotate(-1deg) translateX(10px);
  }
  54% {
    transform: rotate(-2deg) translateX(0);
  }
}

/* Benefit SVG icons */
.cc-benefit__icon-svg {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  display: block;
}

.cc-benefit__icon-svg .cc-bolt {
  animation: cc-bolt-flash 2.5s ease-in-out infinite;
}

@keyframes cc-bolt-flash {
  0%,
  88%,
  100% {
    opacity: 1;
  }
  92% {
    opacity: 0.35;
  }
  96% {
    opacity: 1;
  }
}

.cc-benefit__icon-svg .cc-orbit-dot {
  animation: cc-orbit-spin 6s linear infinite;
  transform-origin: 20px 20px;
}

/* Stat pop on reveal */
.cc-stat[data-cc-reveal] {
  transform: translateY(24px) scale(0.92);
}

.cc-stat.cc-reveal--visible {
  transform: translateY(0) scale(1);
}

.cc-stat__value {
  display: inline-block;
  transition: transform 0.5s var(--cc-ease, cubic-bezier(0.33, 1, 0.68, 1)) 0.2s;
}

.cc-stat.cc-reveal--visible .cc-stat__value {
  animation: cc-stat-pop 0.55s var(--cc-ease, cubic-bezier(0.33, 1, 0.68, 1)) 0.15s both;
}

@keyframes cc-stat-pop {
  0% {
    transform: scale(0.6);
  }
  70% {
    transform: scale(1.08);
  }
  100% {
    transform: scale(1);
  }
}

/* FAQ slide */
.cc-faq details[data-cc-reveal] {
  transform: translateX(-12px);
}

.cc-faq details.cc-reveal--visible {
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  [data-cc-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .cc-marquee__track,
  .cc-phone-demo__try,
  .cc-on-this-day__mock.is-otd-active .cc-on-this-day__memory.is-front {
    animation: none;
  }

  .cc-on-this-day__memory {
    transition: none;
  }

  .cc-hero__float-icon,
  .cc-hero__app-tile,
  .cc-hero__swipe-btn,
  .cc-final-cta__chip,
  .cc-final-cta__call.is-ringing .cc-final-cta__call-ring,
  .cc-phone-demo__hint,
  .cc-step__card,
  .cc-step__tint,
  .cc-step__heart,
  .cc-step__hint,
  .cc-step__badge-body,
  .cc-step__badge-text,
  .cc-step__bar-fill,
  .cc-step__freed-burst,
  .cc-benefit__icon-svg .cc-bolt,
  .cc-benefit__icon-svg .cc-orbit-dot,
  .cc-storage-meter__badge,
  .cc-freed-ring.is-animated .cc-freed-ring__img--red {
    animation: none;
  }

  .cc-freed-ring.is-animated .cc-freed-ring__img--red {
    opacity: 1;
  }

  .cc-phone-demo__hint--delete {
    transform: rotate(var(--cc-btn-tilt)) translateY(-50%);
    opacity: 0.85;
    visibility: visible;
  }

  .cc-phone-demo__hint--keep {
    opacity: 0;
    visibility: hidden;
  }

  .cc-flame {
    animation: none;
    transform: translate(-50%, -50%) scale(var(--cc-flame-s, 1));
  }

  .cc-streaks__bg .cc-flame--bg {
    top: var(--cc-flame-y, 50%);
    opacity: 0.28;
  }

  .cc-month-rail .cc-month-nav__item {
    filter: none !important;
  }

  .cc-on-this-day__memory.is-loading::after {
    animation: none;
  }

  .cc-problem__visual.cc-reveal--visible .cc-storage-meter__card {
    animation: none;
  }

  .cc-problem__visual.cc-reveal--visible .cc-storage-meter__seg {
    width: calc(var(--cc-seg) * 1%);
    transition: none;
  }

  .cc-step__icon-svg--delete .cc-step__card,
  .cc-step__icon-svg--keep .cc-step__card {
    transform: none;
  }

  .cc-step__bar-fill {
    transform: scaleX(1);
  }

  .cc-final-cta__meter-photos,
  .cc-final-cta__meter-freed {
    transition: none;
  }
}

/* Download modal — scan demo */
@keyframes cc-download-phone-tilt {
  0%,
  100% {
    transform: rotate(-6deg) translateY(0);
  }
  50% {
    transform: rotate(4deg) translateY(-4px);
  }
}

@keyframes cc-download-scan-line {
  0%,
  100% {
    top: 28%;
    opacity: 0.35;
  }
  50% {
    top: 72%;
    opacity: 1;
  }
}

@keyframes cc-download-scan-dot {
  0%,
  100% {
    opacity: 0.25;
    transform: scale(0.85);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Final CTA — missed call scene */
@keyframes cc-final-call-ring {
  0% {
    opacity: 0.75;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.08);
  }
}

@keyframes cc-final-chip-float-1 {
  0%,
  100% {
    transform: rotate(-14deg) translateY(0);
  }
  50% {
    transform: rotate(-14deg) translateY(-8px);
  }
}

@keyframes cc-final-chip-float-2 {
  0%,
  100% {
    transform: rotate(11deg) translateY(0);
  }
  50% {
    transform: rotate(11deg) translateY(-10px);
  }
}

@keyframes cc-final-chip-float-3 {
  0%,
  100% {
    transform: rotate(-8deg) translateY(0);
  }
  50% {
    transform: rotate(-8deg) translateY(-6px);
  }
}

.cc-final-cta__chip--1 {
  animation: cc-final-chip-float-1 4.2s ease-in-out infinite;
}

.cc-final-cta__chip--2 {
  animation: cc-final-chip-float-2 4.8s ease-in-out infinite;
  animation-delay: -1.2s;
}

.cc-final-cta__chip--3 {
  animation: cc-final-chip-float-3 5.1s ease-in-out infinite;
  animation-delay: -0.6s;
}

@keyframes cc-download-qr-pulse {
  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 3px 0 var(--cc-gray-200);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 4px 0 var(--cc-gray-200), 0 0 0 3px rgba(201, 4, 6, 0.12);
  }
}