/* ============================================================
   CARDS — Neo-brutalist style, tilted, offset shadow
============================================================ */

.section-services {
  background-color: var(--color-bg);
  /* Extra vertical padding so rotated card shadows don't get clipped */
  padding-block: calc(var(--space-24) + 16px);
  /* Clip horizontal overflow from tilted cards, allow vertical for shadows */
  overflow: hidden;
}

/* --- Grid: 4 columns desktop --- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  align-items: center;
  /* Shift grid left so the 4th card (Spark Driver) is fully visible.
     Extra bottom padding for offset shadows. */
  padding: 12px 24px 20px 0;
  margin-left: -8px;
}

/* ============================================================
   CARD WRAPPER — Rotation + hover (now on wrapper, not card)
============================================================ */
.card-wrapper {
  position: relative;
  transition:
    transform var(--duration-base) var(--ease-spring);
  will-change: transform;
}

/* Alternating tilts — clearly left / right */
.card-wrapper:nth-child(1) { transform: rotate(-3deg);  }
.card-wrapper:nth-child(2) { transform: rotate(2.5deg); }
.card-wrapper:nth-child(3) { transform: rotate(-2deg);  }
.card-wrapper:nth-child(4) { transform: rotate(3.5deg); }

/* Hover lift */
.card-wrapper:nth-child(1):hover { transform: rotate(-3deg)   translate(-4px, -5px); }
.card-wrapper:nth-child(2):hover { transform: rotate(2.5deg)  translate(-4px, -5px); }
.card-wrapper:nth-child(3):hover { transform: rotate(-2deg)   translate(-4px, -5px); }
.card-wrapper:nth-child(4):hover { transform: rotate(3.5deg)  translate(-4px, -5px); }

.card-wrapper:active { transform: translate(2px, 2px) rotate(0deg) !important; }

/* Hover shadow on card */
.card-wrapper:hover .service-card     { box-shadow: 9px 9px 0px 0px var(--color-ink);   }
.card-wrapper:active .service-card    { box-shadow: 2px 2px 0px 0px var(--color-ink);   }
.card-wrapper:hover .service-card--featured  { box-shadow: 9px 9px 0px 0px var(--color-accent); }
.card-wrapper:active .service-card--featured { box-shadow: 2px 2px 0px 0px var(--color-accent); }

/* ============================================================
   CARD — Neo-brutalist base
============================================================ */
.service-card {
  position: relative;
  background-color: var(--color-surface);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-xl);
  box-shadow: 5px 5px 0px 0px var(--color-ink);
  transition: box-shadow var(--duration-base) var(--ease-spring);
  will-change: box-shadow;
}

/* --- Featured card: accent border --- */
.service-card--featured {
  border-color: var(--color-accent);
  box-shadow: 5px 5px 0px 0px var(--color-accent);
}

.service-card--featured:hover {
  box-shadow: 9px 9px 0px 0px var(--color-accent) !important;
}

.service-card--featured:active {
  box-shadow: 2px 2px 0px 0px var(--color-accent) !important;
}

/* --- Card inner: no extra bezel, just padding --- */
.card-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6);
  height: 100%;
  border-radius: calc(var(--radius-xl) - 2px);
}

/* --- Popular badge --- */
.card-badge {
  position: absolute;
  top: -14px;
  right: var(--space-5);
  background-color: var(--color-accent);
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.875rem;
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-full);
  /* Counter-rotate so the badge reads straight */
  transform: rotate(2deg);
  box-shadow: 2px 2px 0px 0px var(--color-ink);
}

/* --- Logo wrap --- */
.card-logo-wrap {
  width: 52px;
  height: 52px;
  background-color: var(--color-bg);
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.card-logo {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

/* --- Card body --- */
.card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.card-name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-ink);
  letter-spacing: -0.01em;
}

.card-desc {
  font-size: var(--text-sm);
  color: var(--color-muted);
  line-height: 1.6;
}

/* --- Feature list --- */
.card-features {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-1);
}

.card-features li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-ink-80);
}

/* Circle checkmark */
.card-features li::before {
  content: '';
  width: 18px;
  height: 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-ink);
  background-color: var(--color-green-light);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 5l2.5 2.5L8 3' stroke='%2327AE60' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  flex-shrink: 0;
}

/* --- Card footer --- */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: 1.5px solid var(--color-ink-10);
  margin-top: auto;
}

.card-price {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.price-amount {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-extrabold);
  color: var(--color-ink);
  letter-spacing: -0.03em;
  line-height: 1;
}

.service-card--featured .price-amount {
  color: var(--color-accent);
}

.price-label {
  font-size: 10px;
  color: var(--color-muted-light);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --- Card CTA button --- */
.btn-card {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  background-color: var(--color-surface);
  color: var(--color-ink);
  border: 1.5px solid var(--color-ink);
  border-radius: var(--radius-full);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  white-space: nowrap;
  box-shadow: 2px 2px 0px 0px var(--color-ink);
  transition:
    box-shadow  var(--duration-fast) var(--ease-spring),
    transform   var(--duration-fast) var(--ease-spring),
    background-color var(--duration-fast) var(--ease-out);
}

.btn-card:hover {
  background-color: var(--color-ink);
  color: #fff;
  box-shadow: 4px 4px 0px 0px var(--color-ink);
  transform: translate(-2px, -2px);
}

.btn-card:active {
  transform: translate(1px, 1px);
  box-shadow: 1px 1px 0px 0px var(--color-ink);
}

/* Featured CTA */
.btn-card--featured {
  background-color: var(--color-accent);
  color: #fff;
  border-color: var(--color-ink);
  box-shadow: 2px 2px 0px 0px var(--color-ink);
}

.btn-card--featured:hover {
  background-color: var(--color-accent-dark);
  box-shadow: 4px 4px 0px 0px var(--color-ink);
  transform: translate(-2px, -2px);
}

/* ============================================================
   CARD WRAPPER — 3-phase paper unfold animation
============================================================ */

.card-wrapper {
  position: relative;
}

/* Phase images sit absolutely over the card */
.phase-bola,
.phase-partial {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  z-index: 10;
  opacity: 0;
}

/* ---- Keyframes ---- */

/* Ball: wobble while visible, then fade out */
@keyframes phaseBola {
  0%   { opacity: 1; transform: scale(1)    rotate(-4deg); }
  8%   { opacity: 1; transform: scale(1.04) rotate(3deg);  }
  16%  { opacity: 1; transform: scale(0.97) rotate(-5deg); }
  24%  { opacity: 1; transform: scale(1.03) rotate(4deg);  }
  32%  { opacity: 1; transform: scale(0.98) rotate(-3deg); }
  40%  { opacity: 1; transform: scale(1.02) rotate(2deg);  }
  50%  { opacity: 0.6; transform: scale(0.95) rotate(0deg); }
  65%  { opacity: 0; transform: scale(0.88) rotate(0deg);  }
  100% { opacity: 0; }
}

/* Partial card: fades in at 30%, fades out at 70% */
@keyframes phasePartial {
  0%,  28% { opacity: 0; transform: scale(0.9); }
  45%       { opacity: 1; transform: scale(1); }
  68%       { opacity: 1; transform: scale(1.02); }
  85%       { opacity: 0; transform: scale(1); }
  100%      { opacity: 0; }
}

/* HTML card: fades in at 70%, fully visible at 100% */
@keyframes phaseCard {
  0%,  65% { opacity: 0; transform: scale(0.94); filter: blur(4px); }
  100%     { opacity: 1; transform: scale(1);    filter: blur(0); }
}

/* ---- Active state — triggered by JS ---- */
.card-wrapper.is-unfolding .phase-bola {
  animation: phaseBola 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.card-wrapper.is-unfolding .phase-partial {
  animation: phasePartial 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.card-wrapper.is-unfolding .service-card {
  animation: phaseCard 1.8s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Stagger per wrapper position */
.card-wrapper:nth-child(1).is-unfolding .phase-bola,
.card-wrapper:nth-child(1).is-unfolding .phase-partial,
.card-wrapper:nth-child(1).is-unfolding .service-card { animation-delay: 0s;    }

.card-wrapper:nth-child(2).is-unfolding .phase-bola,
.card-wrapper:nth-child(2).is-unfolding .phase-partial,
.card-wrapper:nth-child(2).is-unfolding .service-card { animation-delay: 0.2s;  }

.card-wrapper:nth-child(3).is-unfolding .phase-bola,
.card-wrapper:nth-child(3).is-unfolding .phase-partial,
.card-wrapper:nth-child(3).is-unfolding .service-card { animation-delay: 0.4s;  }

.card-wrapper:nth-child(4).is-unfolding .phase-bola,
.card-wrapper:nth-child(4).is-unfolding .phase-partial,
.card-wrapper:nth-child(4).is-unfolding .service-card { animation-delay: 0.6s;  }

/* Before animation: hide the HTML card, show nothing */
.card-wrapper:not(.is-unfolding):not(.is-done) .service-card {
  opacity: 0;
}

/* After animation done: card fully visible, images gone */
.card-wrapper.is-done .phase-bola,
.card-wrapper.is-done .phase-partial {
  display: none;
}

.card-wrapper.is-done .service-card {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .card-wrapper .phase-bola,
  .card-wrapper .phase-partial { display: none; }
  .card-wrapper .service-card  { opacity: 1 !important; animation: none !important; }
}

/* ============================================================
   UNFOLD ANIMATION — Paper ball → card on scroll
============================================================ */

@keyframes unfoldCard {
  0%   { transform: scale(0.08) rotate(-18deg); border-radius: 50%;  filter: blur(10px); opacity: 0;   }
  12%  { transform: scale(0.22) rotate(22deg);  border-radius: 46%;  filter: blur(7px);  opacity: 0.7; }
  28%  { transform: scale(0.44) rotate(-14deg); border-radius: 40%;  filter: blur(5px);               }
  44%  { transform: scale(0.68) rotate(9deg);   border-radius: 30%;  filter: blur(2px);               }
  58%  { transform: scale(0.88) rotate(-5deg);  border-radius: 22px; filter: blur(0);                 }
  70%  { transform: scale(1.07) rotate(2.5deg); border-radius: 18px;                                  }
  80%  { transform: scale(0.96) rotate(-1deg);  border-radius: 18px;                                  }
  90%  { transform: scale(1.02) rotate(0.5deg); border-radius: 18px;                                  }
  100% { transform: scale(1)    rotate(0deg);   border-radius: 18px; opacity: 1;                      }
}

/* Pre-reveal state: card is hidden as a ball */
.service-card.card-hidden {
  opacity: 0;
  transform: scale(0.08) rotate(-18deg) !important;
  border-radius: 50% !important;
  pointer-events: none;
}

/* Revealed: animation plays, ends at flat card */
.service-card.card-reveal {
  animation: unfoldCard 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
  pointer-events: all;
}

/* Stagger delays per card position */
.service-card.card-reveal:nth-child(1) { animation-delay: 0s;     }
.service-card.card-reveal:nth-child(2) { animation-delay: 0.12s;  }
.service-card.card-reveal:nth-child(3) { animation-delay: 0.24s;  }
.service-card.card-reveal:nth-child(4) { animation-delay: 0.36s;  }

@media (prefers-reduced-motion: reduce) {
  .service-card.card-hidden { opacity: 0; transform: none !important; border-radius: var(--radius-xl) !important; }
  .service-card.card-reveal { animation: none; opacity: 1; }
}

/* ============================================================
   RESPONSIVE
============================================================ */

/* On tablet/mobile: flatten rotations slightly so cards don't overlap */
@media (max-width: 1100px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-8);
  }

  .card-wrapper:nth-child(1) { transform: rotate(-2deg);  }
  .card-wrapper:nth-child(2) { transform: rotate(2deg);   }
  .card-wrapper:nth-child(3) { transform: rotate(-1.5deg);}
  .card-wrapper:nth-child(4) { transform: rotate(2.5deg); }

  .card-wrapper:nth-child(1):hover { transform: rotate(-2deg)   translate(-4px, -5px); }
  .card-wrapper:nth-child(2):hover { transform: rotate(2deg)    translate(-4px, -5px); }
  .card-wrapper:nth-child(3):hover { transform: rotate(-1.5deg) translate(-4px, -5px); }
  .card-wrapper:nth-child(4):hover { transform: rotate(2.5deg)  translate(-4px, -5px); }
}

@media (max-width: 560px) {
  .services-grid {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .card-wrapper:nth-child(1) { transform: rotate(-1.5deg); }
  .card-wrapper:nth-child(2) { transform: rotate(1.5deg);  }
  .card-wrapper:nth-child(3) { transform: rotate(-1.5deg); }
  .card-wrapper:nth-child(4) { transform: rotate(1.5deg);  }

  .card-wrapper:nth-child(1):hover { transform: rotate(-1.5deg) translate(-3px, -4px); }
  .card-wrapper:nth-child(2):hover { transform: rotate(1.5deg)  translate(-3px, -4px); }
  .card-wrapper:nth-child(3):hover { transform: rotate(-1.5deg) translate(-3px, -4px); }
  .card-wrapper:nth-child(4):hover { transform: rotate(1.5deg)  translate(-3px, -4px); }

  .card-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
  }

  .btn-card { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .card-wrapper,
  .card-wrapper:nth-child(1),
  .card-wrapper:nth-child(2),
  .card-wrapper:nth-child(3),
  .card-wrapper:nth-child(4) { transform: none; }
}