/* Front faces and ordinary links are the default: animation is progressive enhancement. */
#arcanes{padding-top:70px;padding-bottom:95px;background:radial-gradient(ellipse at 12% 35%,#320f2470,transparent 55%),radial-gradient(ellipse at 88% 35%,#123a4a25,transparent 50%),radial-gradient(ellipse at 50% 65%,#c49a5609,transparent 50%),linear-gradient(#080610,#160b1e 45%,#080610)}
#arcanes .section-heading{margin-bottom:38px}#arcanes .section-heading>p:last-child{margin-top:20px}
#arcanes .cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px;max-width:580px;padding:0;margin:auto;perspective:1200px}
#arcanes .tarot,#arcanes .tarot:nth-child(n){display:block;aspect-ratio:.57;transform:none;margin:0;min-width:0;text-align:center;text-decoration:none;transition:transform .25s;isolation:isolate}
#arcanes .card-inner{transform:rotateY(180deg);transition:transform .4s cubic-bezier(.22,.65,.28,1)}
#arcanes .card-face{box-shadow:0 12px 28px #0008,inset 0 0 20px #0005}
#arcanes .card-name{font-size:clamp(11px,1.4vw,15px);letter-spacing:1.5px}#arcanes .card-destination{font-size:clamp(7px,1vw,10px);letter-spacing:.65px}#arcanes .card-action{font-size:8px}
#arcanes .tarot.revealing{animation:tarot-rise .4s both;animation-delay:calc(var(--reveal-order)*.12s)}
#arcanes .tarot.revealing .card-inner{animation:tarot-unveil .4s cubic-bezier(.22,.65,.28,1) both;animation-delay:calc(var(--reveal-order)*.12s)}
#arcanes .tarot.revealing .card-front{animation:tarot-rim .4s both;animation-delay:calc(var(--reveal-order)*.12s)}
@keyframes tarot-rise{from{opacity:.15;translate:0 16px}to{opacity:1;translate:0 0}}
@keyframes tarot-unveil{from{transform:rotateY(0) rotateZ(-2deg)}to{transform:rotateY(180deg) rotateZ(0)}}
@keyframes tarot-rim{0%,100%{border-color:#c49a56}55%{border-color:#e8ce9a;box-shadow:0 12px 28px #0008,0 0 14px #c49a5622}}
@media(min-width:1100px){#arcanes .cards{grid-template-columns:repeat(4,minmax(0,1fr));max-width:1100px;gap:24px}}
@media(hover:hover) and (pointer:fine){#arcanes .tarot:hover{transform:translateY(-5px)}#arcanes .tarot:hover .card-front{border-color:#d6b57b;box-shadow:0 17px 32px #0009,0 0 12px #c49a5615}}
@media(max-width:700px){#arcanes{padding:32px 20px 70px}#arcanes .cards{gap:20px 12px;max-width:390px}#arcanes .section-heading{margin-bottom:30px}#arcanes .section-heading>p:last-child{font-size:12px}#arcanes .card-face{padding:12px 8px}#arcanes .card-number{font-size:11px}#arcanes .card-name{font-size:11px;letter-spacing:1px}#arcanes .card-destination{font-size:7px;letter-spacing:.25px}#arcanes .card-action{font-size:7px}}
@media(prefers-reduced-motion:reduce){#arcanes .tarot,#arcanes .tarot .card-inner,#arcanes .tarot .card-front{animation:none!important;transition:none!important;opacity:1;translate:none}#arcanes .tarot .card-inner{transform:rotateY(180deg)}}

/* A short tactile response, independent of destination navigation. */
#arcanes .tarot.tap-feedback{animation:tarot-touch .24s ease-out both;z-index:2}
#arcanes .tarot.tap-feedback .card-front{border-color:var(--card);box-shadow:0 10px 28px #0009,0 0 13px color-mix(in srgb,var(--card) 38%,transparent),inset 0 0 9px #c49a5625;transition:border-color .06s,box-shadow .06s}
@keyframes tarot-touch{0%{transform:perspective(900px) rotateX(0) rotateY(0) translateY(0)}25%{transform:perspective(900px) rotateX(3deg) rotateY(-3deg) translateY(-2px) scale(.995)}100%{transform:perspective(900px) rotateX(0) rotateY(0) translateY(0)}}
@media(prefers-reduced-motion:reduce){#arcanes .tarot.tap-feedback{animation:none!important;transform:none!important}#arcanes .tarot.tap-feedback .card-front{transition:none}}