/* Grafik och animationer på startsidan. Styrs delvis av motion.js. */

/* Dekor som sticker ut över kanten (solringen, etiketterna) får aldrig ge sidled-scroll */
html, body { overflow-x: clip; }

/* Knappar och kort lyfter vid hover */
.btn { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px rgba(43, 24, 16, .55); }
.btn:active { transform: translateY(0); }
.card { transition: transform .25s ease, box-shadow .25s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 1px 0 var(--line), 0 20px 40px -16px rgba(43, 24, 16, .28); }

/* Hero: entré */
.hero-text > * { animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero-text > :nth-child(2) { animation-delay: .08s; }
.hero-text > :nth-child(3) { animation-delay: .16s; }
.hero-text > :nth-child(4) { animation-delay: .24s; }
.hero-text > :nth-child(5) { animation-delay: .32s; }
.device-staff { animation: phone-in 1.1s cubic-bezier(.2, .8, .2, 1) .05s both; }
.device-wallet { animation: phone-in 1.1s cubic-bezier(.2, .8, .2, 1) .25s both; }
.stage-glow { animation: sun-in 1.2s cubic-bezier(.2, .8, .2, 1) both; }
.coin { animation: coin-in 1s cubic-bezier(.2, .9, .3, 1.3) .6s both, coin-float 6s ease-in-out 1.6s infinite alternate; }
@keyframes coin-in { from { opacity: 0; transform: translateY(40px) rotate(-40deg) scale(.6); } to { opacity: 1; transform: rotate(-12deg); } }
@keyframes coin-float { from { transform: rotate(-12deg) translateY(0); } to { transform: rotate(-4deg) translateY(-10px); } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes phone-in { from { opacity: 0; transform: translateY(60px) rotate(4deg); } to { opacity: 1; transform: none; } }
@keyframes sun-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* Hero: svävande etiketter */
.float-chip { position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--paper); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 18px; white-space: nowrap; box-shadow: 0 10px 24px -12px rgba(43, 24, 16, .45); animation: bob 5s ease-in-out infinite alternate; }
.chip-plus { background: var(--tomato); color: var(--cream); font-family: var(--display); font-size: 15px; }
.is-live .chip-plus { opacity: 0; animation: none; }
.is-live .chip-plus.flash { animation: plus-flash 1s ease both; }
@keyframes bob { from { transform: translateY(-6px); } to { transform: translateY(6px); } }
@keyframes plus-flash { 0% { opacity: 0; transform: translateY(14px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.06); } 70% { opacity: 1; transform: translateY(-6px) scale(1); } 100% { opacity: 0; transform: translateY(-18px); } }

/* Hero: personalen skannar, kortet får en stämpel */
.staff-scan.tap { animation: scan-tap .7s ease both; }
@keyframes scan-tap { 0% { transform: none; } 25% { transform: scale(.95); box-shadow: 0 0 0 6px rgba(255, 193, 69, .55); } 100% { transform: none; } }

/* Hero: stämpelkortet i rörelse */
.wpass .dot { transition: background-color .3s ease, border-color .3s ease; }
.dot.pop { position: relative; animation: stamp-in .55s cubic-bezier(.2, .9, .3, 1.4) both; }
.dot.pop::after { content: ""; position: absolute; inset: -2px; border-radius: 999px; border: 2px solid var(--sun); animation: ripple .7s ease-out both; }
@keyframes stamp-in { 0% { transform: scale(1.8) rotate(-18deg); opacity: 0; } 60% { transform: scale(.9) rotate(4deg); opacity: 1; } 100% { transform: none; } }
@keyframes ripple { from { transform: scale(1); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.is-live .notif { opacity: 0; transform: translateY(-14px) scale(.97); transition: opacity .45s ease, transform .45s cubic-bezier(.2, .8, .2, 1.2); }
.is-live .notif.show { opacity: 1; transform: none; }
.wpass.complete .dot.reward { animation: reward 1s ease-in-out infinite alternate; box-shadow: 0 0 0 4px rgba(255, 193, 69, .35); }
@keyframes reward { from { transform: rotate(-8deg) scale(1); } to { transform: rotate(8deg) scale(1.15); } }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i { position: absolute; left: 50%; top: 45%; width: 7px; height: 11px; border-radius: 2px; animation: confetti 1.4s cubic-bezier(.15, .7, .3, 1) forwards; }
@keyframes confetti { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; } }

/* Pappkort mot Stampis */
.compare { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; }
.compare .h2 { flex: 1 1 380px; max-width: 560px; }
.compare-art { flex: 0 1 auto; display: flex; align-items: center; gap: 8px; margin: 0 auto 28px; }
.paper-card { position: relative; width: 168px; height: 110px; padding: 12px 14px; border-radius: 8px; background: #f3e4cc; box-shadow: 0 8px 18px -10px rgba(43, 24, 16, .45); transform: rotate(-7deg); display: flex; flex-direction: column; gap: 8px; filter: saturate(.7); }
.paper-title { font-family: var(--display); font-weight: 700; font-size: 15px; color: var(--ink-muted); }
.paper-dots { display: grid; grid-template-columns: repeat(4, 18px); gap: 6px; }
.paper-dots i { width: 18px; height: 18px; border-radius: 999px; border: 1.5px solid var(--line-strong); background: radial-gradient(circle, rgba(194, 54, 29, .65) 45%, transparent 48%); }
.paper-dots i.smudge { background: radial-gradient(circle at 60% 40%, rgba(194, 54, 29, .25) 40%, transparent 60%); }
.paper-dots i.off { background: none; }
.coffee-ring { position: absolute; right: -14px; bottom: -12px; width: 52px; height: 52px; border-radius: 999px; border: 5px solid rgba(120, 72, 34, .22); }
.paper-note { position: absolute; left: 6px; bottom: -28px; font-size: 13px; font-style: italic; color: var(--ink-muted); white-space: nowrap; }
.compare-arrow { width: 64px; flex: none; }
.mini-pass { width: 176px; padding: 14px; border-radius: 14px; background: var(--tomato-deep); color: var(--cream); box-shadow: 0 16px 30px -14px rgba(43, 24, 16, .55); transform: rotate(4deg); display: flex; flex-direction: column; gap: 10px; }
.mini-pass .pass-name { font-family: var(--display); font-weight: 800; font-size: 15px; }
.mini-dots { display: grid; grid-template-columns: repeat(4, 18px); gap: 8px; }
.mini-dots i { width: 18px; height: 18px; border-radius: 999px; background: var(--cream); }
.mini-dots i.off { background: none; border: 1.5px dashed var(--cream); }
.mini-foot { font-size: 12px; font-weight: 700; opacity: .9; }
@media (max-width: 480px) {
  .paper-card, .mini-pass { width: 136px; }
  .paper-dots, .mini-dots { grid-template-columns: repeat(4, 14px); gap: 5px; }
  .paper-dots i, .mini-dots i { width: 14px; height: 14px; }
  .compare-arrow { width: 40px; }
}

/* Pris och kontakt */
.price-stamp { position: absolute; z-index: 1; top: -42px; right: -36px; width: 104px; height: 104px; animation: wobble 4s ease-in-out infinite alternate; filter: drop-shadow(0 8px 12px rgba(43, 24, 16, .2)); }
@keyframes wobble { from { transform: rotate(-12deg); } to { transform: rotate(10deg) scale(1.04); } }
@media (max-width: 600px) { .price-stamp { right: -8px; width: 84px; height: 84px; } }
.cta-mark { transition: transform .8s cubic-bezier(.2, .8, .2, 1.2); }
.cta:hover .cta-mark { transform: rotate(360deg) scale(1.08); }

/* Tona in vid scroll. Klassen motion sätts av motion.js, så utan JavaScript syns allt direkt */
.motion [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
.motion [data-reveal].is-in { opacity: 1; transform: none; }
.motion .row > [data-reveal]:nth-child(2) { transition-delay: .12s; }
.motion .row > [data-reveal]:nth-child(3) { transition-delay: .24s; }
.motion .row > [data-reveal]:nth-child(4) { transition-delay: .36s; }
.motion .compare-art .paper-card { transform: rotate(0); filter: none; transition: transform .9s cubic-bezier(.2, .8, .2, 1.3) .3s, filter .9s ease .3s; }
.motion .compare-art.is-in .paper-card { transform: rotate(-7deg); filter: saturate(.7); }
.motion .compare-art .mini-pass { opacity: 0; transform: translateY(30px) rotate(0); transition: opacity .6s ease .7s, transform .9s cubic-bezier(.2, .8, .2, 1.3) .7s; }
.motion .compare-art.is-in .mini-pass { opacity: 1; transform: rotate(4deg); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}