/* Homepage answer cards: hover (or tap / Enter) spins the card in 3D to reveal the answer.
   The article stays still and owns the hover; only the inner layer turns, so the hover never flickers mid-spin. */
.answer-first-grid.spin-grid{border-top:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.answer-first-grid .spin-card{position:relative;min-height:0!important;padding:0!important;border:0!important;perspective:1400px;outline:none;cursor:pointer;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.spin-inner{display:grid;height:100%;transform-style:preserve-3d;transition:transform .9s cubic-bezier(.2,.75,.15,1)}
.spin-face{grid-area:1/1;display:flex;flex-direction:column;min-height:236px;padding:28px 28px 26px;border-radius:20px;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.spin-front{background:#161618;border:1px solid #2c2c31}
.spin-front h3{margin:auto 0 0!important;font-size:clamp(21px,2vw,26px)!important;line-height:1.1;color:#f5f5f2;max-width:20ch}
.spin-front small,.spin-back small{color:#ff5a4e;font:700 10px/1 var(--mono,ui-monospace,monospace);letter-spacing:.14em}
.spin-hint{display:inline-flex;align-items:center;gap:8px;margin-top:18px;color:#8d8d93;font:600 11px/1 var(--mono,ui-monospace,monospace);letter-spacing:.1em;text-transform:uppercase}
.spin-hint svg{width:14px;height:14px;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.spin-hint .on-touch{display:none}
@media(hover:none){.spin-hint .on-hover{display:none}.spin-hint .on-touch{display:inline}}
.spin-back{transform:rotateY(180deg);background:linear-gradient(155deg,#cf3430,#9e2420);border:1px solid #d9453f;color:#fff;position:relative}
.spin-back small{color:#ffd9d6}
.spin-back p{margin:auto 0 0!important;max-width:none!important;color:#fff!important;font-size:15px!important;line-height:1.6!important}
.spin-back::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255/.16) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.spin-back>*{opacity:0;transform:translateY(10px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.spin-card.is-open .spin-inner,.spin-card:focus-visible .spin-inner{transform:rotateY(180deg) scale(1.02)}
.spin-card.is-open .spin-back>*,.spin-card:focus-visible .spin-back>*{opacity:1;transform:none;transition-delay:.32s}
.spin-card.is-open .spin-back::after,.spin-card:focus-visible .spin-back::after{transition:transform 1.1s cubic-bezier(.16,1,.3,1) .25s;transform:translateX(120%)}
.spin-card:focus-visible .spin-front{outline:2px solid #ff5a4e}
@media(hover:hover) and (pointer:fine){
  .spin-card:hover{transform:translateY(-6px)}
  .spin-card:hover .spin-inner{transform:rotateY(180deg) scale(1.02)}
  .spin-card:hover .spin-back>*{opacity:1;transform:none;transition-delay:.32s}
  .spin-card:hover .spin-back::after{transition:transform 1.1s cubic-bezier(.16,1,.3,1) .25s;transform:translateX(120%)}
  .spin-card:hover .spin-hint svg{transform:rotate(180deg)}
}
@media(max-width:760px){.answer-first-grid.spin-grid{grid-template-columns:1fr}.spin-face{min-height:200px;padding:24px}}
@media(prefers-reduced-motion:reduce){
  .spin-card,.spin-inner,.spin-back>*{transition:none!important}
  .spin-card:hover{transform:none}
  .spin-inner,.spin-card:hover .spin-inner,.spin-card.is-open .spin-inner,.spin-card:focus-visible .spin-inner{transform:none!important}
  .spin-back{transform:none;opacity:0;visibility:hidden}
  .spin-back>*{opacity:1;transform:none}
  .spin-back::after{display:none}
  .spin-card:hover .spin-front,.spin-card.is-open .spin-front,.spin-card:focus-visible .spin-front{opacity:0;visibility:hidden}
  .spin-card:hover .spin-back,.spin-card.is-open .spin-back,.spin-card:focus-visible .spin-back{opacity:1;visibility:visible}
}