/* O que fazemos: deck fixo (100vh + 2 × 55vh). Os cartões começam em leque
   e virados; com --deck, cada um se desvira em 3D na sua vez, levantando no
   meio do giro (fórmulas do eezyinn). No celular, viram pilha. */

.deck { --n: 2; position: relative; }
.deck__sticky { display: flex; flex-direction: column; justify-content: center; padding-block: 120px; }
.deck__head { margin-bottom: clamp(20px, 0.75rem + 1.5vw, 36px); }
.deck__head h2 { margin-top: 10px; }
.deck__stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; perspective: 1600px; }

.deck-card {
  --k: 1;
  --lift: calc(var(--k) * (1 - var(--k)) * 4);
  position: relative;
  min-width: 0;
  z-index: calc(10 - var(--i));
}
.deck-card__inner { display: grid; height: 100%; transform-style: preserve-3d; }
.deck-card__face { grid-area: 1 / 1; border-radius: var(--radius); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.deck-card__front {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(24px, 0.75rem + 1.3vw, 36px);
  background: color-mix(in srgb, var(--warm) 7%, var(--ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warm) 12%, transparent);
}
.deck-card__front h3 { font-size: clamp(32px, 1rem + 3vw, 56px); }
.deck-card__front p { max-width: 40ch; }
.deck-card__list { display: grid; margin: 8px 0 0; padding: 0; list-style: none; border-top: 1px solid color-mix(in srgb, var(--warm) 18%, transparent); }
.deck-card__list li { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid color-mix(in srgb, var(--warm) 18%, transparent); font-size: 18px; font-weight: 600; }
.deck-card__mirror { align-self: flex-end; margin-top: auto; padding-top: 8px; transform: rotate(180deg); white-space: nowrap; }
.deck-card__back { display: none; }

.has-motion .deck { height: calc(100vh + var(--n) * 55vh); }
.has-motion .deck__sticky { position: sticky; top: 0; min-height: 100vh; padding-block: 88px 24px; }
.has-motion .deck-card {
  --k: clamp(0, calc((var(--deck, 0) - var(--start)) / var(--dur)), 1);
  transform: translate(calc((1 - var(--k)) * var(--fan-x))) translateY(calc((1 - var(--k)) * var(--fan-y) - var(--lift) * 1.5rem)) rotate(calc((1 - var(--k)) * var(--fan-r)));
  transform-origin: 50% 110%;
  will-change: transform;
}
.has-motion .deck-card__inner { transform: rotateY(calc((1 - var(--k)) * 180deg)) scale(calc(1 + var(--lift) * 0.04)); }
.has-motion .deck-card__front { opacity: clamp(0, calc((var(--k) - 0.5) * 1000), 1); }
.has-motion .deck-card__back {
  position: relative;
  display: block;
  overflow: hidden;
  transform: rotateY(180deg);
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--sage) 28%, transparent) 0%, color-mix(in srgb, var(--sage) 10%, transparent) 34%, transparent 62%),
    radial-gradient(color-mix(in srgb, var(--warm) 13%, transparent) 0.9px, transparent 1.2px) 0 0 / 11px 11px,
    linear-gradient(160deg, color-mix(in srgb, var(--warm) 5%, var(--ink)), var(--ink) 55%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sage) 35%, transparent), 0 30px 60px -30px var(--ink);
}
.deck-card__frame { position: absolute; inset: 12px; border: 1px solid color-mix(in srgb, var(--warm) 18%, transparent); border-radius: calc(var(--radius) - 8px); }
.deck-card__frame::before { content: ""; position: absolute; inset: 6px; border: 1px dashed color-mix(in srgb, var(--sage) 30%, transparent); border-radius: inherit; }
.deck-card__crest { position: absolute; inset: 0; display: grid; place-items: center; }
.deck-card__crest::before {
  content: "";
  position: absolute;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--warm) 22%, transparent);
  box-shadow: 0 0 0 10px color-mix(in srgb, var(--sage) 12%, transparent), 0 0 0 11px color-mix(in srgb, var(--warm) 10%, transparent);
}
.deck-card__crest img { position: relative; width: 96px; height: 96px; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--sun) 35%, transparent)); }
.deck-card__index { position: absolute; top: 26px; left: 26px; display: grid; gap: 2px; color: var(--warm); }
.deck-card__index small { font-size: 14px; color: color-mix(in srgb, var(--warm) 70%, var(--ink)); }
.deck-card__index--flip { inset: auto 26px 26px auto; transform: rotate(180deg); }

.services-note { text-align: center; margin-top: 40px; }

@media (max-width: 899px) {
  .deck__stage { grid-template-columns: 1fr; gap: 20px; perspective: none; }
  .has-motion .deck { height: auto; }
  .has-motion .deck__sticky { position: static; min-height: 0; padding-block: 96px; }
  /* Pilha: o cartão coberto encolhe 6% e escurece. */
  .has-motion .deck-card {
    --k: 1;
    --cover: 0;
    position: sticky;
    top: calc(20px + var(--i) * 0.75rem);
    z-index: calc(1 + var(--i));
    transform: scale(calc(1 - var(--cover) * 0.06));
    transform-origin: 50% 0;
  }
  .has-motion .deck-card__inner { transform: none; }
  .has-motion .deck-card__back { display: none; }
  .has-motion .deck-card__front { position: relative; opacity: 1; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warm) 8%, transparent), 0 -24px 48px -24px var(--ink); }
  .has-motion .deck-card__front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--ink); opacity: calc(var(--cover) * 0.55); pointer-events: none; }
}