/* Travel Card Atlas v5 · motion layer on the approved v4 calculator.
 * Winner card: 3D idle sway on the Y axis, pointer tilt + glare, turn-in on a new winner,
 * amount roll. Transform/opacity only. Reduced motion = static card. */
:root { --v5-ease:cubic-bezier(.22,1,.36,1); --v5-spring:cubic-bezier(.34,1.36,.64,1); }

/* ---------- nav CTA: the one filled action ---------- */
.nav .navcta { gap:var(--atlas-8);background:var(--atlas-ink);color:var(--atlas-paper);border-color:var(--atlas-ink);font-weight:600;padding-inline:var(--atlas-16) var(--atlas-12);transition:background-color 150ms var(--v5-ease),transform 150ms var(--v5-ease); }
.nav .navcta i { font-style:normal;display:inline-block;transition:transform 250ms var(--v5-ease); }
@media (hover:hover) and (pointer:fine) {
  .nav .navcta:hover { background:var(--atlas-accent);border-color:var(--atlas-accent);color:var(--atlas-on-accent); }
  .nav .navcta:hover i { transform:translateX(3px); }
}
.nav .navcta:active { transform:scale(.98); }

/* nav shares the hero grid edges */
@media (min-width:1100px) { .nav .wrap { max-width:1320px;padding-inline:var(--atlas-32); } .nav .navcta { min-height:40px;margin-left:var(--atlas-16); } }

/* ---------- winner stage ---------- */
#calc .pod.p1 .stage.v5 { position:relative;perspective:760px;perspective-origin:50% 40%;isolation:isolate;padding-block:var(--atlas-8); }
#calc .pod.p1 .stage.v5 .spin { position:relative;z-index:1;width:100%;transform-style:preserve-3d;will-change:transform;animation:v5-sway 9s ease-in-out var(--v5-phase,0s) infinite; }
#calc .pod.p1 .stage.v5 .art { position:relative;width:100%;max-width:none;transform-style:preserve-3d;transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transition:transform 1000ms var(--v5-ease); }
#calc .pod.p1 .stage.v5.is-tilting .art { transition:transform 400ms var(--v5-ease); }
#calc .pod.p1 .stage.v5.is-tilting .spin { animation-play-state:paused; }
#calc .pod.p1 .stage.v5 .art.img>img { filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }

/* floor shadow: breathes with the sway, not a glow */
#calc .pod.p1 .stage.v5:after { content:"";position:absolute;z-index:0;left:14%;right:14%;bottom:-2px;height:14px;border-radius:50%;background:radial-gradient(closest-side,rgba(15,20,30,.34),transparent);animation:v5-floor 9s ease-in-out var(--v5-phase,0s) infinite;pointer-events:none; }

/* card thickness: masked copies stepped back in Z */
#calc .pod.p1 .stage.v5 .edge { position:absolute;inset:0;pointer-events:none;background:#3a404c;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center; }
#calc .pod.p1 .stage.v5 .edge.e1 { transform:translateZ(-1.2px);background:#8a93a3; }
#calc .pod.p1 .stage.v5 .edge.e2 { transform:translateZ(-2.4px);background:#5b6372; }
#calc .pod.p1 .stage.v5 .edge.e3 { transform:translateZ(-3.6px);background:#3d434f; }
#calc .pod.p1 .stage.v5 .edge.e4 { transform:translateZ(-4.8px);background:#262a33; }
#calc .pod.p1 .stage.v5 .art.img>img { position:relative;transform:translateZ(.5px); }

/* glare + moving sheen, clipped to the card silhouette via mask (set in JS) */
#calc .pod.p1 .stage.v5 .glare { position:absolute;inset:0;transform:translateZ(1px);pointer-events:none;mix-blend-mode:screen;-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;overflow:hidden; }
#calc .pod.p1 .stage.v5 .glare:before { content:"";position:absolute;inset:-40% -60%;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.42) 48%,rgba(255,255,255,.08) 54%,transparent 62%);animation:v5-sheen 9s ease-in-out var(--v5-phase,0s) infinite; }
#calc .pod.p1 .stage.v5 .glare:after { content:"";position:absolute;inset:0;opacity:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.75),rgba(255,255,255,.18) 30%,transparent 58%);transition:opacity 400ms var(--v5-ease); }
#calc .pod.p1 .stage.v5.is-tilting .glare:after { opacity:.7; }
#calc .pod.p1 .stage.v5.is-tilting .glare:before { animation-play-state:paused; }

/* new winner: card turns in on its Y axis */
#calc .pod.p1 .stage.v5.turn-in .art { animation:v5-turn 900ms var(--v5-ease) backwards; }
#calc .pod.p1.v5-in :is(.tag,.nm1,.amt>small,.rate) { animation:v5-rise 500ms var(--v5-ease) backwards; }
#calc .pod.p1.v5-in .nm1 { animation-delay:40ms; }
#calc .pod.p1.v5-in .amt>small { animation-delay:80ms; }
#calc .pod.p1.v5-in .rate { animation-delay:120ms; }
#calc .rest.v5-in .pod { animation:v5-rise 400ms var(--v5-ease) backwards; }
#calc .rest.v5-in .pod:nth-child(2) { animation-delay:40ms; }
#calc .rest.v5-in .pod:nth-child(3) { animation-delay:80ms; }

/* amount: tabular so the roll does not jitter */
#calc .pod.p1 .amt { font-variant-numeric:tabular-nums; }
#calc .pod.p1 .amt.v5-bump { animation:v5-bump 450ms var(--v5-ease); }

/* ---------- runner-up rows: delta + arrow affordance ---------- */
#calc .rest .pod { position:relative; }
#calc .rest .amt { justify-self:end;text-align:right;font-variant-numeric:tabular-nums; }
#calc .rest .amt .dlt { display:block;font:500 12px/1.3 var(--atlas-font);color:var(--atlas-muted);letter-spacing:0; }
#calc .rest .pod .go { display:none; }
@media (min-width:1100px) {
  #calc .pod.p1 { grid-template-columns:minmax(0,1fr) 236px; }
  #calc .pod.p1 .stage.v5 { padding-inline:var(--atlas-12); }
  #calc .rest .pod { grid-template-columns:24px 48px minmax(0,1fr) auto 14px; }
  #calc .rest .pod .go { display:block;font-style:normal;color:var(--atlas-muted);opacity:0;transform:translateX(-4px);transition:opacity 150ms var(--v5-ease),transform 250ms var(--v5-ease); }
}
@media (hover:hover) and (pointer:fine) {
  #calc .rest .pod:hover .go { opacity:1;transform:none;color:var(--atlas-ink); }
  #calc .rest .pod { transition:background-color 150ms var(--v5-ease); }
  #calc .ranking-link:hover { transform:translateY(-1px); }
}
@media (max-width:1020px) and (min-width:681px) { #calc .rest .amt { text-align:left; } }

/* own-card pill: no "Ours" anywhere, the brand names itself */
#calc .badge.ours { display:none; }

@keyframes v5-sway {
  0%,100% { transform:rotateY(-30deg) rotateX(9deg) rotateZ(-2deg) translateY(0); }
  50% { transform:rotateY(28deg) rotateX(4deg) rotateZ(1deg) translateY(-8px); }
}
@keyframes v5-floor {
  0%,100% { transform:translateX(-6%) scaleX(.92);opacity:.9; }
  50% { transform:translateX(6%) scaleX(.8);opacity:.6; }
}
@keyframes v5-sheen {
  0%,100% { transform:translateX(-38%); }
  50% { transform:translateX(38%); }
}
@keyframes v5-turn {
  from { transform:rotateY(-100deg) translateY(10px);opacity:0; }
  55% { opacity:1; }
  to { transform:rotateY(0) translateY(0);opacity:1; }
}
@keyframes v5-rise { from { opacity:0;transform:translateY(8px);filter:blur(2px); } to { opacity:1;transform:none;filter:none; } }
@keyframes v5-bump { 0% { transform:none; } 35% { transform:translateY(-2px); } 100% { transform:none; } }

@media (prefers-color-scheme:dark) {
  #calc .pod.p1 .stage.v5:after { background:radial-gradient(closest-side,rgba(0,0,0,.7),transparent); }
}
@media (prefers-reduced-motion:reduce) {
  #calc .pod.p1 .stage.v5 .spin,#calc .pod.p1 .stage.v5:after,#calc .pod.p1 .stage.v5 .glare:before { animation:none!important; }
  #calc .pod.p1 .stage.v5 .spin { transform:rotateY(-10deg) rotateX(4deg); }
  #calc .pod.p1 .stage.v5 .art { transform:none!important; }
  .nav .navcta,.nav .navcta i { transition:none; }
}