/* ==========================================================================
   Download button — App Store
   Normal:  9 styles (all), 4s hold + 1s transition, 45s cycle
   Hover:   7 non-inset styles only, 2s hold + 1s transition, 21s cycle
   Active / Focus: 2 inset styles only, 1s hold + 1s transition, 4s cycle
   ========================================================================== */

/* Local tokens — neumorphic light-mode palette.
   Dark mode turns animation off entirely (see prefers-color-scheme block below). */
:root {
  --btn-neomorph-base:          #e0e0e0;
  --btn-neomorph-mid:           #cacaca;
  --btn-neomorph-end:           #f0f0f0;
  --btn-neomorph-shadow-dark:   #cecece;
  --btn-neomorph-shadow-light:  #f2f2f2;
  --btn-neomorph-shadow-c1:     #c1c1c1;
  --btn-neomorph-shadow-mid:    #a8a8a8;
  --btn-neomorph-shadow-lg:     #afafaf;
  --btn-neomorph-inset-dark:    #777777;
}

.promo-download {
  align-items: center;
  display: flex;
  gap: 3rem;
  justify-content: center;
  padding: 3rem 2rem;
}

@media (width >= 76.8rem) {
  .promo-download {
    gap: 8rem;
  }
}

.btn-appstore {
  animation: btn-appstore-cycle 30s linear infinite;
  max-width: 28rem;
  background: var(--btn-neomorph-base);
  border-radius: 14px;
  box-shadow: 25px 25px 49px var(--btn-neomorph-shadow-dark), -25px -25px 49px var(--btn-neomorph-shadow-light);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.4rem 0.6rem;
  text-decoration: none;
  transition: transform 0.5s linear(0, 0.024, 0.068 1%, 0.22 2.2%, 0.968 6.1%, 1.221 7.7%, 1.314, 1.383, 1.426 10%, 1.438, 1.445, 1.447, 1.445 11.4%, 1.432, 1.405, 1.365 13.4%, 1.272 14.6%, 1.004 17.7%, 0.892 19.3%, 0.855, 0.828, 0.811, 0.802, 0.802, 0.808, 0.819, 0.837 24.8%, 0.879 26.1%, 0.998 29.1%, 1.048 30.8%, 1.076 32.2%, 1.084, 1.088 33.6%, 1.086, 1.077, 1.059 37.2%, 1.006 40.3%, 0.984 41.7%, 0.968 43.4%, 0.963, 0.961 45%, 0.962, 0.966 47.3%, 1.007 53.2%, 1.014, 1.017 56.4%, 1.015 58.8%, 0.997 64.6%, 0.992 67.8%, 0.993 70.2%, 1.001 75.9%, 1.003 78.9%, 0.999 90.2%, 1);
}

.btn-appstore:hover {
  animation-duration: 14s;
  animation-name: btn-appstore-hover;
}

.btn-appstore:active,
.btn-appstore:focus-visible {
  animation-duration: 3s;
  animation-name: btn-appstore-active;
  outline: none;
  transform: scale(0.95);
  transition: transform 0.08s ease-in;
}

.btn-appstore:visited {
  opacity: 0.9;
}

.btn-appstore img {
  display: block;
  height: auto;
  width: clamp(20rem, 60vw, 32rem);
}

/* ==========================================================================
   Dark mode — static dark neumorphic, no animation
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  .btn-appstore,
  .btn-appstore:hover {
    animation: none;
    background: #1a1d28;
    border-radius: 14px;
    box-shadow: 10px 10px 20px #0a0c12,
      -10px -10px 20px #272c3d;
  }

  .btn-appstore:active,
  .btn-appstore:focus-visible {
    animation: none;
    background: #1a1d28;
    border-radius: 14px;
    box-shadow: inset 6px 6px 12px #0a0c12,
      inset -6px -6px 12px #272c3d;
    outline: none;
  }

  .btn-appstore img {
    filter: invert(1);
  }
}

/* ==========================================================================
   Reduced motion — hold on style 2, no animation
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .btn-appstore,
  .btn-appstore:hover,
  .btn-appstore:active,
  .btn-appstore:focus {
    animation: none;
    background: linear-gradient(145deg, var(--btn-neomorph-mid), var(--btn-neomorph-end));
    border-radius: 18px;
    box-shadow: 9px 9px 18px var(--btn-neomorph-shadow-c1), -9px -9px 18px #ffffff;
  }
}

/* ==========================================================================
   Keyframes — normal (all 9 styles, 45s)
   Slot: 11.11%. Hold ends at -2.22% before next slot.
   ========================================================================== */

@keyframes btn-appstore-cycle {

  /* 1 — flat, outer */
  0%, 8.89% {
    background: var(--btn-neomorph-base);
    border-radius: 14px;
    box-shadow: 25px 25px 49px var(--btn-neomorph-shadow-dark),
      -25px -25px 49px var(--btn-neomorph-shadow-light);
  }

  /* 2 — gradient, outer, tight shadow */
  11.11%, 20% {
    background: linear-gradient(145deg, var(--btn-neomorph-mid), var(--btn-neomorph-end));
    border-radius: 18px;
    box-shadow: 9px 9px 18px var(--btn-neomorph-shadow-c1),
      -9px -9px 18px #ffffff;
  }

  /* 3 — gradient, outer */
  22.22%, 31.11% {
    background: linear-gradient(145deg, var(--btn-neomorph-mid), var(--btn-neomorph-end));
    border-radius: 21px;
    box-shadow: 25px 25px 49px var(--btn-neomorph-shadow-dark),
      -25px -25px 49px var(--btn-neomorph-shadow-light);
  }

  /* 4 — gradient reversed, outer */
  33.33%, 42.22% {
    background: linear-gradient(145deg, var(--btn-neomorph-end), var(--btn-neomorph-mid));
    border-radius: 7px;
    box-shadow: 25px 25px 49px var(--btn-neomorph-shadow-mid),
      -25px -25px 49px #ffffff;
  }

  /* 5 — gradient, outer, sharp corners */
  44.44%, 53.33% {
    background: linear-gradient(145deg, var(--btn-neomorph-mid), var(--btn-neomorph-end));
    border-radius: 10px;
    box-shadow: 37px 37px 74px var(--btn-neomorph-shadow-lg),
      -37px -37px 74px #ffffff;
  }

  /* 6 — flat, inset */
  55.56%, 64.44% {
    background: var(--btn-neomorph-base);
    border-radius: 21px;
    box-shadow: inset 25px 25px 49px var(--btn-neomorph-shadow-dark),
      inset -25px -25px 49px var(--btn-neomorph-shadow-light);
  }

  /* 7 — gradient reversed, outer, large */
  66.67%, 75.56% {
    background: linear-gradient(145deg, var(--btn-neomorph-end), var(--btn-neomorph-mid));
    border-radius: 18px;
    box-shadow: 38px 38px 76px var(--btn-neomorph-shadow-lg),
      -38px -38px 76px #ffffff;
  }

  /* 8 — flat, inset, strong dark shadow */
  77.78%, 86.67% {
    background: var(--btn-neomorph-base);
    border-radius: 7px;
    box-shadow: inset 9px 9px 18px var(--btn-neomorph-inset-dark),
      inset -9px -9px 18px #ffffff;
  }

  /* 9 — flat, outer, dark shadow */
  88.89%, 97.78% {
    background: var(--btn-neomorph-base);
    border-radius: 10px;
    box-shadow: 9px 9px 18px var(--btn-neomorph-inset-dark),
      -9px -9px 18px #ffffff;
  }

  100% {
    background: var(--btn-neomorph-base);
    border-radius: 14px;
    box-shadow: 25px 25px 49px var(--btn-neomorph-shadow-dark),
      -25px -25px 49px var(--btn-neomorph-shadow-light);
  }
}

/* ==========================================================================
   Keyframes — hover (7 non-inset styles, 21s)
   Slot: 14.29%. Hold 2s (9.52%), transition 1s (4.76%).
   ========================================================================== */

@keyframes btn-appstore-hover {

  /* 1 — flat, outer */
  0%, 9.52% {
    background: var(--btn-neomorph-base);
    border-radius: 14px;
    box-shadow: 25px 25px 49px var(--btn-neomorph-shadow-dark),
      -25px -25px 49px var(--btn-neomorph-shadow-light);
  }

  /* 2 — gradient, tight shadow */
  14.29%, 23.81% {
    background: linear-gradient(145deg, var(--btn-neomorph-mid), var(--btn-neomorph-end));
    border-radius: 18px;
    box-shadow: 9px 9px 18px var(--btn-neomorph-shadow-c1),
      -9px -9px 18px #ffffff;
  }

  /* 3 — gradient, outer */
  28.57%, 38.10% {
    background: linear-gradient(145deg, var(--btn-neomorph-mid), var(--btn-neomorph-end));
    border-radius: 21px;
    box-shadow: 25px 25px 49px var(--btn-neomorph-shadow-dark),
      -25px -25px 49px var(--btn-neomorph-shadow-light);
  }

  /* 4 — gradient reversed */
  42.86%, 52.38% {
    background: linear-gradient(145deg, var(--btn-neomorph-end), var(--btn-neomorph-mid));
    border-radius: 7px;
    box-shadow: 25px 25px 49px var(--btn-neomorph-shadow-mid),
      -25px -25px 49px #ffffff;
  }

  /* 5 — gradient, sharp corners */
  57.14%, 66.67% {
    background: linear-gradient(145deg, var(--btn-neomorph-mid), var(--btn-neomorph-end));
    border-radius: 10px;
    box-shadow: 37px 37px 74px var(--btn-neomorph-shadow-lg),
      -37px -37px 74px #ffffff;
  }

  /* 7 — gradient reversed, large */
  71.43%, 80.95% {
    background: linear-gradient(145deg, var(--btn-neomorph-end), var(--btn-neomorph-mid));
    border-radius: 18px;
    box-shadow: 38px 38px 76px var(--btn-neomorph-shadow-lg),
      -38px -38px 76px #ffffff;
  }

  /* 9 — flat, outer, dark shadow */
  85.71%, 95.24% {
    background: var(--btn-neomorph-base);
    border-radius: 10px;
    box-shadow: 9px 9px 18px var(--btn-neomorph-inset-dark),
      -9px -9px 18px #ffffff;
  }

  100% {
    background: var(--btn-neomorph-base);
    border-radius: 14px;
    box-shadow: 25px 25px 49px var(--btn-neomorph-shadow-dark),
      -25px -25px 49px var(--btn-neomorph-shadow-light);
  }
}

/* ==========================================================================
   Keyframes — active / focus (2 inset styles, 4s)
   Slot: 50%. Hold 1s (25%), transition 1s (25%).
   ========================================================================== */

@keyframes btn-appstore-active {

  /* 6 — inset, light shadow */
  0%, 25% {
    background: var(--btn-neomorph-base);
    border-radius: 21px;
    box-shadow: inset 25px 25px 49px var(--btn-neomorph-shadow-dark),
      inset -25px -25px 49px var(--btn-neomorph-shadow-light);
  }

  /* 8 — inset, dark shadow */
  50%, 75% {
    background: var(--btn-neomorph-base);
    border-radius: 7px;
    box-shadow: inset 9px 9px 18px var(--btn-neomorph-inset-dark),
      inset -9px -9px 18px #ffffff;
  }

  100% {
    background: var(--btn-neomorph-base);
    border-radius: 14px;
    box-shadow: inset 25px 25px 49px var(--btn-neomorph-shadow-dark),
      inset -25px -25px 49px var(--btn-neomorph-shadow-light);
  }
}