/* Card page only: 3D card hero, aurora, reveals, shine */
.cardpage { overflow-x: clip; background: var(--navy); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cardpage main { position: relative; z-index: 1; }

/* Aurora: slow drifting light behind everything */
.aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.aurora i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; }
.aurora i:nth-child(1) { width: 70vmax; height: 70vmax; left: -25vmax; top: -30vmax; background: radial-gradient(circle, #1e3a8a 0%, transparent 65%); animation: drift1 22s ease-in-out infinite alternate; }
.aurora i:nth-child(2) { width: 60vmax; height: 60vmax; right: -30vmax; top: 10vh; background: radial-gradient(circle, #3730a3 0%, transparent 65%); opacity: .4; animation: drift2 26s ease-in-out infinite alternate; }
.aurora i:nth-child(3) { width: 55vmax; height: 55vmax; left: -10vmax; bottom: -35vmax; background: radial-gradient(circle, #1d4ed8 0%, transparent 65%); opacity: .3; animation: drift3 30s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate(18vw, 12vh) scale(1.1); } }
@keyframes drift2 { to { transform: translate(-16vw, 18vh) scale(.9); } }
@keyframes drift3 { to { transform: translate(14vw, -14vh) scale(1.15); } }

/* Stage + card (sized in card inches: --in = 1 printed inch) */
.stage { --w: min(calc(100vw - 40px), 400px); --in: calc(var(--w) / 3.5); --sh: 1;
  position: relative; width: var(--w); height: calc(var(--in) * 2); margin: 44px auto 0; perspective: 1100px;
  cursor: pointer; -webkit-tap-highlight-color: transparent; outline: none; touch-action: pan-y;
  animation: deal 1.15s cubic-bezier(.16, .84, .24, 1) both; }
@keyframes deal { from { opacity: 0; transform: translateY(90px) rotateX(55deg) scale(.86); } to { opacity: 1; transform: none; } }
.card3d { position: absolute; inset: 0; transform-style: preserve-3d; --sx: 50%; --sy: 50%; }
.face { position: absolute; inset: 0; border-radius: calc(var(--in) * .09); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 0 0 1px rgba(255,255,255,.06); }
.back { transform: rotateY(180deg); }
.shadow { position: absolute; left: 8%; right: 8%; bottom: calc(var(--in) * -.32); height: calc(var(--in) * .3); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); filter: blur(8px); transform: scale(var(--sh)); opacity: calc(var(--sh) * .9); z-index: -1; }
.sheen { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(circle at var(--sx) var(--sy), rgba(255,255,255,.55) 0%, rgba(255,255,255,.12) 22%, transparent 48%); }
.face::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.10) 48%, transparent 60%); background-size: 260% 100%;
  animation: glint 5.5s ease-in-out 1.6s infinite; }
@keyframes glint { 0%, 70% { background-position: 130% 0; } 100% { background-position: -40% 0; } }

/* Front */
.front { background: radial-gradient(120% 110% at 78% 18%, #1a2b4a 0%, #0f1b30 42%, var(--navy) 78%); color: var(--ivory); }
.front .cut { position: absolute; right: calc(var(--in) * -.18); bottom: 0; height: calc(var(--in) * 1.87); width: auto;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 22%), linear-gradient(to top, transparent 0%, #000 14%);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.face .in { position: absolute; inset: calc(var(--in) * .16) calc(var(--in) * .18); }
.front .eb { font-family: "Mono", monospace; font-size: calc(var(--in) * .078); letter-spacing: .26em; text-transform: uppercase; color: var(--blue); }
.front .nm { font-family: "Tiempos", Georgia, serif; font-weight: 300; font-size: calc(var(--in) * .264); line-height: .98; letter-spacing: -.01em; margin-top: calc(var(--in) * .07); }
.front .nm em { color: #cfd8e6; }
.front .ru { width: calc(var(--in) * .42); height: 1px; background: var(--blue); margin: calc(var(--in) * .12) 0 calc(var(--in) * .09);
  transform-origin: left; animation: rule .8s .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes rule { from { transform: scaleX(0); } }
.front .rl { font-size: calc(var(--in) * .092); color: #c6cfdc; line-height: 1.45; letter-spacing: .02em; }
.front .bt { position: absolute; left: 0; bottom: 0; }
.front .tg { font-family: "Tiempos", Georgia, serif; font-style: italic; font-weight: 300; font-size: calc(var(--in) * .111); }
.front .ur { font-family: "Mono", monospace; font-size: calc(var(--in) * .078); letter-spacing: .06em; color: var(--blue); margin-top: calc(var(--in) * .05); }

/* Back */
.back { background: var(--ivory); color: #0d1626; }
.back .wh { font-family: "Tiempos", Georgia, serif; font-weight: 300; font-size: calc(var(--in) * .17); }
.back .fm { font-size: calc(var(--in) * .088); color: #5b6577; margin-top: calc(var(--in) * .03); }
.back .ct { position: absolute; left: 0; bottom: calc(var(--in) * .02); font-family: "Mono", monospace; font-size: calc(var(--in) * .082); line-height: 1.8; }
.back .ct b { color: #2563eb; font-weight: 400; display: inline-block; width: calc(var(--in) * .18); }
.back .qr { position: absolute; right: 0; bottom: 0; width: calc(var(--in) * .9); text-align: center; }
.back .qr img { width: 100%; display: block; }
.back .qr span { display: block; font-family: "Mono", monospace; font-size: calc(var(--in) * .062); letter-spacing: .14em; text-transform: uppercase; color: #5b6577; margin-top: calc(var(--in) * .05); }
.back .bar { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--in) * .05); background: var(--navy); }

.hint { text-align: center; font-family: "Mono", monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); margin: 34px 0 18px; transition: opacity .4s; }
.stage.touched + .hint { opacity: 0; }

/* Entrance + reveal */
.rise { animation: rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) both; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s cubic-bezier(.2,.8,.2,1), transform .8s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.more.reveal.in a { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.more.reveal.in a:nth-child(2) { animation-delay: .06s; } .more.reveal.in a:nth-child(3) { animation-delay: .12s; }
.more.reveal.in a:nth-child(4) { animation-delay: .18s; } .more.reveal.in a:nth-child(5) { animation-delay: .24s; }

/* Light sweep on primary buttons */
.shine { position: relative; overflow: hidden; }
.shine::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg);
  animation: sweep 3.8s ease-in-out 2.2s infinite; }
@keyframes sweep { 0% { left: -60%; } 35%, 100% { left: 130%; } }
.btn.primary { box-shadow: 0 10px 30px rgba(96,165,250,.28); }

/* Success tick draws itself */
.tick { width: 58px; height: 58px; margin: 4px auto 12px; display: block; }
.tick circle { fill: none; stroke: var(--blue); stroke-width: 2.5; stroke-dasharray: 152; stroke-dashoffset: 152; animation: draw .7s ease-out forwards; }
.tick path { fill: none; stroke: var(--blue); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw .45s .55s ease-out forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

.more a { transition: padding-left .25s ease; }
.more a:active, .more a:hover { padding-left: 8px; }

@media (prefers-reduced-motion: reduce) {
  .aurora i, .stage, .rise, .shine::after, .face::after, .front .ru { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* Link cards: the site's own artwork on the left, fading into the card behind the words */
.links { display: flex; flex-direction: column; gap: 10px; margin-top: 30px; }
.lk { --a: #60a5fa; --bg: #0b1222;
  display: flex; align-items: center; position: relative; overflow: hidden; min-height: 122px; padding: 14px 40px 14px 38%;
  border-radius: 14px; text-decoration: none; color: var(--ivory); background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 10px 26px rgba(0,0,0,.3);
  -webkit-tap-highlight-color: transparent; transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; }
.lk:active { transform: scale(.98); }
@media (hover: hover) { .lk:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1px var(--a), 0 10px 26px rgba(0,0,0,.3); } .lk:hover .art img { transform: scale(1.05); } }
.art { position: absolute; left: 0; top: 0; bottom: 0; width: 62%; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0,0,0,.35) 62%, transparent 94%);
  mask-image: linear-gradient(90deg, #000 0%, #000 34%, rgba(0,0,0,.35) 62%, transparent 94%); }
.art img { position: absolute; left: 0; top: 0; height: 100%; width: auto; max-width: none; transform-origin: left center; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.lk::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 22%, var(--bg) 58%); opacity: .55; }
.tx { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.nm2 { font-family: "Tiempos", Georgia, serif; font-weight: 300; font-size: 18px; line-height: 1.1; text-shadow: 0 1px 12px rgba(0,0,0,.6); }
.nm2 em { font-style: italic; color: var(--a); }
.ds { font-size: 12px; line-height: 1.38; color: var(--soft); text-shadow: 0 1px 10px rgba(0,0,0,.7); }
.go { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 1; font-size: 15px; color: var(--a); }
.links.reveal.in .lk { animation: rise .7s cubic-bezier(.2,.8,.2,1) both; }
.links.reveal.in .lk:nth-child(2) { animation-delay: .07s; } .links.reveal.in .lk:nth-child(3) { animation-delay: .14s; }
.links.reveal.in .lk:nth-child(4) { animation-delay: .21s; } .links.reveal.in .lk:nth-child(5) { animation-delay: .28s; }

.t-book { --a: #9db4ff; --bg: #07090f; }
.t-sheet { --a: #f5f2ea; --bg: #141a26; }
.t-sheet .art { width: 58%; }
.t-hymb { --a: #5ec4ad; --bg: #0a0f1c; }
.t-hymb .nm2 em { background: linear-gradient(90deg, #60a5fa, #5ec4ad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 2px; text-shadow: none; }
.t-dcf { --a: #a5b4fc; --bg: #0a1024; }
.t-myb { --a: #c9ab6a; --bg: #0D1F17; }