/* Supriso storefront: the motion layer. Loaded after supriso-storefront.css. Everything here is switched off by prefers-reduced-motion. */

/* ---- sticky, frosted brand bar on the journey pages ---- */
.flow > .navrow { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--cream) 84%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: box-shadow .3s; }
.brand .seal { transition: rotate .7s var(--ease); } .brand:hover .seal { rotate: 40deg; }

/* ---- directional page change: forward slides in from the right, back from the left ---- */
#app.enter > section { animation: slidein .55s var(--ease) both; }
@keyframes slidein { from { opacity: 0; translate: var(--dx, 0px) 0; } to { opacity: 1; translate: 0 0; } }

/* ---- progress: the current segment fills and shimmers; finished ones snap to ink ---- */
.gift.in { animation: none; }
.gift.fresh { animation: bump .4s var(--ease); }
#app.enter .progress span.done { animation: inkin .5s var(--ease) both; transform-origin: left; }
.progress span.now::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent); transform: translateX(-100%); animation: sheen 2.2s ease-in-out .8s infinite; }
@keyframes inkin { from { transform: scaleX(.2); opacity: .5; } to { transform: none; opacity: 1; } }
@keyframes sheen { 0% { transform: translateX(-120%); } 60%, 100% { transform: translateX(120%); } }

/* ---- hero: words rise out of a mask, then the gift assembles itself ---- */
.hero { position: relative; }
.hero .wrapper { position: relative; z-index: 1; }
.w { display: inline-block; overflow: hidden; vertical-align: bottom; padding-bottom: .14em; margin-bottom: -.14em; }
.w > span { display: inline-block; transform: translateY(115%); animation: wordin .9s var(--ease) both; animation-delay: calc(.2s + var(--i) * .09s); }
@keyframes wordin { to { transform: none; } }
.hero .eyebrow { animation: rise .8s var(--ease) both; }
.hero .lede { animation: rise .9s var(--ease) .85s both; }

.art { transition: transform .25s ease-out; animation: floaty 6s ease-in-out 3s infinite; }
@keyframes floaty { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
.art .p-box { animation: boxin .9s var(--ease) .35s both; }
.art .p-band { animation: bandin .6s var(--ease) 1s both; }
.art .p-tie { animation: tiein .6s var(--ease) 1.15s both; transform-origin: top; }
.art .seal { animation: stamp .8s cubic-bezier(.2, 1.5, .4, 1) 1.6s both; }
.art .seal::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--pink); opacity: 0; animation: ripple 1.1s ease-out 2.05s both; }
.art .tagwrap { animation: tagdrop 1s var(--ease) 2.1s both, swing 4.5s ease-in-out 3.2s infinite; }
@keyframes boxin { from { opacity: 0; transform: translateY(50px) scale(.86); } to { opacity: 1; transform: none; } }
@keyframes bandin { from { transform: scaleX(0); } to { transform: none; } }
@keyframes tiein { from { transform: scaleY(0); } to { transform: none; } }
@keyframes stamp { 0% { opacity: 0; transform: scale(2.6) rotate(-35deg); } 55% { opacity: 1; transform: scale(.9) rotate(6deg); } 100% { transform: none; } }
@keyframes ripple { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }
@keyframes tagdrop { from { opacity: 0; transform: translateY(-34px) rotate(-22deg); } to { opacity: 1; transform: rotate(8deg); } }
.sp { position: absolute; width: 12px; height: 12px; background: var(--pink-soft); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); opacity: 0; animation: twinkle 3s ease-in-out infinite; animation-delay: var(--d, 2.6s); }
@keyframes twinkle { 0%, 100% { opacity: 0; transform: scale(.2) rotate(0); } 50% { opacity: 1; transform: scale(1) rotate(60deg); } }

/* floating specks and a soft light that follows the pointer */
.dots { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.dots i { position: absolute; bottom: -12px; width: 5px; height: 5px; border-radius: 50%; background: var(--pink-soft); opacity: 0; animation: drift 12s linear infinite; }
.dots i:nth-child(3n) { background: var(--cream); width: 3px; height: 3px; } .dots i:nth-child(4n) { background: var(--pink); }
.dots i:nth-child(1) { left: 6%; animation-delay: 0s; animation-duration: 11s; } .dots i:nth-child(2) { left: 16%; animation-delay: 3s; animation-duration: 14s; } .dots i:nth-child(3) { left: 27%; animation-delay: 6s; }
.dots i:nth-child(4) { left: 38%; animation-delay: 1.5s; animation-duration: 13s; } .dots i:nth-child(5) { left: 49%; animation-delay: 8s; } .dots i:nth-child(6) { left: 58%; animation-delay: 4s; animation-duration: 15s; }
.dots i:nth-child(7) { left: 67%; animation-delay: 9s; } .dots i:nth-child(8) { left: 76%; animation-delay: 2s; animation-duration: 12s; } .dots i:nth-child(9) { left: 84%; animation-delay: 7s; }
.dots i:nth-child(10) { left: 92%; animation-delay: 5s; animation-duration: 16s; } .dots i:nth-child(11) { left: 22%; animation-delay: 10s; } .dots i:nth-child(12) { left: 72%; animation-delay: 12s; }
@keyframes drift { 0% { transform: translateY(0) translateX(0); opacity: 0; } 12% { opacity: .75; } 100% { transform: translateY(-520px) translateX(24px); opacity: 0; } }
.hero::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 40%), rgba(255, 143, 186, .16), transparent 62%); transition: background .15s; }

/* ---- call to action: soft pulse, sheen sweep, arrow nudge ---- */
.cta, .primary { position: relative; overflow: hidden; }
.cta { animation: ctapulse 2.8s ease-out 3.6s infinite; }
.cta::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .26) 50%, transparent 70%); transform: translateX(-130%); animation: sheen 4.8s ease-in-out 3.2s infinite; pointer-events: none; }
@keyframes ctapulse { 0% { box-shadow: 0 3px 0 var(--ink), 0 0 0 0 rgba(213, 8, 93, .45); } 70%, 100% { box-shadow: 0 3px 0 var(--ink), 0 0 0 16px rgba(213, 8, 93, 0); } }
.arr { display: inline-block; transition: transform .3s var(--ease); margin-left: 4px; }
.cta:hover .arr, .primary:hover:not(:disabled) .arr { transform: translateX(6px); }

/* ---- scroll reveal ---- */
.rv { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.rv.on { opacity: 1; transform: none; }
.how { position: relative; }
.how::before { content: ''; position: absolute; left: 14px; top: 34px; bottom: 34px; width: 2px; background: linear-gradient(var(--pink-soft), var(--line)); transform: scaleY(0); transform-origin: top; transition: transform 1.4s var(--ease) .2s; z-index: 0; opacity: .55; }
.how.on::before { transform: scaleY(1); }
.how-step { position: relative; z-index: 1; } .how .n { background: var(--cream); padding: 2px 0; }

/* ---- gifts: fly to the box, count bump, floating box bar ---- */
.fly { position: fixed; z-index: 90; object-fit: cover; border-radius: 12px; pointer-events: none; box-shadow: 0 14px 30px -10px rgba(14, 42, 34, .55); background: var(--notice); }
.gift.fresh .stepper span { animation: numbump .35s var(--ease); }
#app.enter .progress span.now { animation: fill .6s var(--ease) both; transform-origin: left; }
.bump { animation: numbump .45s var(--ease); display: inline-block; }
@keyframes numbump { 0% { transform: scale(1); } 40% { transform: scale(1.4); } 100% { transform: scale(1); } }
.gift.fresh .gin { animation: tickin .5s var(--ease) both; }
@keyframes tickin { from { opacity: 0; translate: -8px 0; } to { opacity: 1; translate: 0 0; } }
.boxbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; gap: 12px; padding: 12px var(--px) calc(12px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--card) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--line); animation: barup .6s cubic-bezier(.2, 1.25, .3, 1) both; }
.bb-info { flex: 1; display: flex; flex-direction: column; line-height: 1.2; min-width: 0; } .bb-count { font-weight: 700; font-size: 14px; } .bb-total { font-family: var(--serif); font-weight: 600; font-size: 22px; font-variation-settings: 'SOFT' 0, 'WONK' 1; }
.boxbar .primary { width: auto; flex: none; min-height: 48px; padding: 12px 20px; }
@keyframes barup { from { transform: translateY(110%); } to { transform: none; } }
body.has-boxbar .help-in { padding-bottom: 96px; }
@media (min-width: 960px) { .boxbar { display: none; } body.has-boxbar .help-in { padding-bottom: 24px; } }

/* ---- toasts: small, springy pop-ups that never block the flow ---- */
.toasts { position: fixed; left: 50%; bottom: 20px; z-index: 120; display: flex; flex-direction: column; gap: 8px; align-items: center; transform: translateX(-50%); pointer-events: none; width: max-content; max-width: calc(100vw - 32px); }
body.has-boxbar .toasts { bottom: 92px; }
.toast { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; background: var(--ink); color: var(--card); border-radius: 999px; font-size: 14px; box-shadow: 0 14px 30px -12px rgba(14, 42, 34, .6); animation: toastin .5s cubic-bezier(.2, 1.4, .4, 1) both; }
.toast.out { animation: toastout .35s ease-in both; }
.toast .tk { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--pink); color: #fff; font-size: 12px; }
@keyframes toastin { from { opacity: 0; transform: translateY(24px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes toastout { to { opacity: 0; transform: translateY(12px) scale(.95); } }

/* ---- loading and errors ---- */
.topbar { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 200; background: linear-gradient(90deg, transparent, var(--pink), transparent); transform: translateX(-100%); opacity: 0; pointer-events: none; }
body.busy .topbar { opacity: 1; animation: topload 1.1s ease-in-out infinite; }
@keyframes topload { to { transform: translateX(100%); } }
.primary.loading { color: transparent; pointer-events: none; }
.primary.loading::before { content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 3px solid rgba(255, 251, 243, .3); border-top-color: var(--card); animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.notice.bad[role='alert'], input.bad, textarea.bad, select.bad { animation: shake .45s ease; }
@keyframes shake { 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 2px 0; } }

/* ---- confirmation: ticket prints in, confetti falls ---- */
.ticket.tear { animation: ticketin 1s var(--ease) .35s both; }
@keyframes ticketin { from { clip-path: inset(0 0 100% 0); opacity: .4; } to { clip-path: inset(0); opacity: 1; } }
#fx { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 110; }
.cf { position: absolute; top: -20px; left: var(--x); width: var(--s); height: calc(var(--s) * 1.6); background: var(--c); border-radius: 2px; opacity: 0; animation: cfall var(--t) cubic-bezier(.3, .6, .4, 1) var(--d) forwards; }
.cf:nth-child(3n) { border-radius: 50%; height: var(--s); }
@keyframes cfall { 0% { opacity: 1; transform: translateY(0) rotate(0) translateX(0); } 100% { opacity: 0; transform: translateY(105vh) rotate(var(--r)) translateX(var(--w)); } }

/* ---- sheets: spring up, soft blurred backdrop, a grabber on phones ---- */
dialog[open] { animation: sheetspring .55s cubic-bezier(.2, 1.1, .3, 1); }
dialog::backdrop { -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
@keyframes sheetspring { from { opacity: 0; transform: translateY(40px) scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .sheet-in::before { content: ''; width: 44px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; margin-bottom: 2px; } }

/* ---- desktop: the art scales with the independent scale property so tilt and float can compose ---- */
@media (min-width: 960px) {
  .art { transform: none; scale: 1.35; transform-origin: center; margin: 56px 70px 56px 0; }
}

/* ---- people who prefer less motion get the finished design, no movement ---- */
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  .how::before { transform: none; }
  .w > span { transform: none; }
  .sp, .dots, .hero::before { display: none; }
  .boxbar, .toast, .fly, #fx { animation: none; }
}

.progress span.now { animation: none; }