/* Cards — used for subjects, how-it-works, trust badges, etc. */

.card {
  position: relative;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  overflow: hidden;
  /* Tilt + lift composed via CSS vars so hover lift survives JS-driven tilt.
     --reveal-y is used by the scroll-reveal slide-in (see base.css). Composing
     it here means .reveal.is-visible doesn't have to overwrite our transform. */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  --tilt-lift: 0px;
  --reveal-x: 0px;
  --reveal-y: 0px;
  --reveal-scale: 1;
  transform: perspective(900px)
             rotateX(var(--tilt-x))
             rotateY(var(--tilt-y))
             translate3d(var(--reveal-x), calc(var(--tilt-lift) + var(--reveal-y)), 0)
             scale(var(--reveal-scale));
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur-slow) var(--ease),
              transform var(--dur-slow) var(--ease);
}
/* Outranks .reveal.is-visible (specificity 0,2,0) so the composed transform
   above wins. While `is-tilting`, drop transform to a snappy linear
   transition so tilt tracks the pointer; mouseleave drops the class → the
   slow eased transition above takes over for the smooth reset.
   The .reveal-group > … variant matches the specificity of the stagger rule
   (.reveal-group > .reveal:nth-child(N) → 0,3,0) so its 80–400ms
   transition-delay can't sneak back in and lag the tilt on cards 2+. */
.card.is-tilting,
.reveal-group > .card.is-tilting {
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur-slow) var(--ease),
              transform var(--dur-fast) linear;
  transition-delay: 0s;
}
/* Mobile: tighter padding so cards don't feel like they're floating in air,
   and a touch-pressed state for the link variant since hover is unreliable. */
@media (max-width: 640px) {
  .card { padding: var(--space-lg); border-radius: var(--radius-md); }
  .card--link:active {
    --tilt-lift: 0px;
    box-shadow: var(--shadow-md);
    border-color: var(--color-border-strong);
  }
  .card--link:active::before { transform: scaleY(1); }
}
/* Signature hover: orange accent bar slides in from the left */
.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-bright) 100%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform var(--dur-slow) var(--ease-out);
}
.card:hover::before,
.card--link:hover::before { transform: scaleY(1); }

.card--link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.card--link:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-lg);
  --tilt-lift: -3px;
  color: inherit;
}

/* Giant display glyph bleeding through the card background — subject cards. */
.card__watermark {
  position: absolute;
  top: -0.15em;
  right: -0.05em;
  font-family: var(--font-display);
  font-weight: 600;
  font-style: italic;
  font-size: clamp(6rem, 22vw, 11rem);
  line-height: 1;
  color: var(--color-ink);
  opacity: 0.055;
  pointer-events: none;
  user-select: none;
  font-variation-settings: "opsz" 144;
  transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}
.card--link:hover .card__watermark {
  opacity: 0.12;
  color: var(--color-accent);
  transform: translate(-4px, 4px) rotate(-2deg);
}

/* Meta row at the bottom of a card — chips, hints, "→" prompt. */
.card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px dashed var(--color-border-strong);
}
.card__arrow {
  color: var(--color-accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  transition: transform var(--dur) var(--ease);
}
.card--link:hover .card__arrow { transform: translateX(4px); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: var(--color-accent-soft);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
}

.card__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-sm);
}
.card__body {
  color: var(--color-ink-soft);
  margin-bottom: 0;
}

/* How-it-works step number variant */
.card--step .card__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-pill);
  background: var(--color-ink);
  color: #fff;
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  margin-bottom: var(--space-md);
}

/* Trust badge variant — slightly looser, no hover */
.card--trust {
  text-align: left;
  background: linear-gradient(180deg, var(--color-bg-warm) 0%, var(--color-bg-alt) 100%);
  border-color: transparent;
}
.card--trust .card__icon {
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(30, 58, 138, 0.08);
  color: var(--color-accent);
}

/* Subject variant — adds the watermark glyph + "explore →" meta row. */
.card--subject .card__icon {
  background: linear-gradient(135deg, rgba(242, 102, 24, 0.18), rgba(242, 102, 24, 0.08));
  color: var(--color-accent-ink);
  font-size: var(--fs-2xl);
  width: 54px;
  height: 54px;
}

/* Step card — enlarged numeral with a subtle Fraunces stamp. */
.card--step {
  padding-top: var(--space-2xl);
}
.card--step .card__step {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: var(--fs-xl);
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--color-ink) 0%, var(--color-ink-deep) 100%);
  box-shadow: 0 6px 14px rgba(30, 58, 138, 0.28);
  font-variation-settings: "opsz" 144;
}
.card--step::after {
  /* Faint step numeral watermark in the top-right corner */
  content: attr(data-step);
  position: absolute;
  top: -0.18em;
  right: 0.1em;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(5rem, 18vw, 9rem);
  line-height: 1;
  color: var(--color-accent);
  opacity: 0.08;
  pointer-events: none;
  font-variation-settings: "opsz" 144;
}