/* Fun layer: phone demo, notification banners, app icon badge, sparkles, floaters, ambient motion */

/* ---------- Notification banner (shared by the phone demo and the site-level banner) ---------- */
.notif {
  --notif-bg: rgba(250, 250, 247, 0.82);
  display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: center;
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 1.15rem;
  background: var(--notif-bg);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  backdrop-filter: saturate(180%) blur(18px);
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  color: #15231f;
  text-align: left;
  font-family: var(--font-body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.notif__icon {
  width: 2.3rem; height: 2.3rem; border-radius: 0.6rem; flex: none;
  display: grid; place-items: center;
  background: var(--lime-500); color: var(--ink);
  font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; line-height: 1;
  box-shadow: inset 0 -2px 0 rgba(21, 35, 31, 0.12);
}
.notif__body { min-width: 0; display: grid; gap: 1px; }
.notif__top { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.68rem; color: rgba(21, 35, 31, 0.55); font-weight: 500; letter-spacing: 0.01em; }
.notif__title { font-size: 0.8rem; font-weight: 650; line-height: 1.25; }
.notif__text { font-size: 0.76rem; line-height: 1.3; color: rgba(21, 35, 31, 0.78); }

/* Site-level banner: drops from the top when the visit card is complete */
.site-notif {
  position: fixed; z-index: 90;
  top: max(0.75rem, env(safe-area-inset-top));
  left: 50%;
  width: min(24rem, calc(100vw - 1.5rem));
  transform: translate(-50%, -160%) scale(0.94);
  opacity: 0;
  transition: transform 0.75s cubic-bezier(0.22, 1.25, 0.36, 1), opacity 0.3s ease;
  pointer-events: none;
}
.site-notif.is-on { transform: translate(-50%, 0) scale(1); opacity: 1; pointer-events: auto; }
.site-notif.is-off { transform: translate(-50%, -160%) scale(0.96); opacity: 0; transition: transform 0.45s cubic-bezier(0.5, 0, 0.75, 0), opacity 0.35s ease 0.1s; }
.site-notif .notif { padding: 0.8rem 0.9rem; border-radius: 1.35rem; }
.site-notif .notif__title { font-size: 0.92rem; }
.site-notif .notif__text { font-size: 0.85rem; }
.site-notif .notif__icon { width: 2.75rem; height: 2.75rem; border-radius: 0.75rem; font-size: 1.4rem; }
.site-notif__grab { display: block; width: 2.2rem; height: 0.25rem; border-radius: 99px; background: rgba(21, 35, 31, 0.18); margin: 0.45rem auto 0; }
@media (min-width: 52rem) {
  .site-notif { left: auto; right: 1.25rem; top: 5.25rem; transform: translate(120%, 0) scale(0.96); }
  .site-notif.is-on { transform: none; }
  .site-notif.is-off { transform: translate(120%, 0) scale(0.96); }
  .site-notif__grab { display: none; }
}

/* ---------- App icon + red badge ---------- */
.app {
  position: relative;
  display: grid; gap: 0.3rem; justify-items: center;
  font-size: 0.56rem; font-weight: 500; color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  letter-spacing: 0.01em;
}
.app__icon {
  position: relative;
  width: 100%; aspect-ratio: 1; border-radius: 27%;
  display: grid; place-items: center;
  background: var(--app-bg, #e9e7df); color: var(--app-fg, #15231f);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.app__icon svg { width: 52%; height: 52%; }
.app--loyila { cursor: pointer; -webkit-tap-highlight-color: transparent; background: none; border: 0; padding: 0; font: inherit; color: inherit; }
.app--loyila .app__icon { --app-bg: var(--lime-500); font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.app--loyila.is-nudge .app__icon { animation: app-nudge 0.6s var(--ease-pop); }
@keyframes app-nudge { 0% { transform: scale(1); } 35% { transform: scale(0.88) rotate(-4deg); } 70% { transform: scale(1.08) rotate(2deg); } 100% { transform: scale(1); } }
.badge {
  position: absolute; top: -0.4rem; right: -0.4rem;
  min-width: 1.25rem; height: 1.25rem; padding: 0 0.3rem;
  border-radius: 99px;
  display: grid; place-items: center;
  background: #ff3b30; color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 0.72rem; line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  transform: scale(0);
  text-shadow: none;
}
.badge.is-on { animation: badge-pop 0.55s cubic-bezier(0.34, 1.7, 0.64, 1) forwards; }
.badge.is-bump { animation: badge-bump 0.4s var(--ease-pop); transform: scale(1); }
.badge.is-off { animation: badge-out 0.3s ease forwards; }
@keyframes badge-pop { 0% { transform: scale(0); } 100% { transform: scale(1); } }
@keyframes badge-bump { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes badge-out { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(0); opacity: 0; } }
.badge::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; border: 2px solid #ff3b30; opacity: 0;
}
.badge.is-on::after { animation: stamp-ring 0.9s var(--ease-out) 0.15s; }

/* ---------- Phone ---------- */
.phone-demo { display: grid; gap: var(--s-4); justify-items: center; }
.phone {
  position: relative;
  width: min(17.5rem, 78vw);
  aspect-ratio: 9 / 19;
  border-radius: 2.7rem;
  padding: 0.55rem;
  background: linear-gradient(145deg, #2a2f2c, #0c1210 55%, #232826);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, 0.12) inset, 0 40px 80px -30px rgba(0, 0, 0, 0.65), 0 18px 36px -18px rgba(0, 0, 0, 0.5);
  will-change: transform;
}
.phone.is-buzz { animation: phone-buzz 0.45s linear; }
@keyframes phone-buzz {
  0%, 100% { transform: translate(0, 0) rotate(0); }
  15% { transform: translate(-1.5px, 0) rotate(-0.4deg); }
  30% { transform: translate(1.5px, 0) rotate(0.4deg); }
  45% { transform: translate(-1px, 0) rotate(-0.25deg); }
  60% { transform: translate(1px, 0) rotate(0.25deg); }
  75% { transform: translate(-0.5px, 0); }
}
.phone__screen {
  position: relative; width: 100%; height: 100%;
  border-radius: 2.2rem; overflow: hidden;
  background: #0c1210;
  isolation: isolate;
}
.phone__wall {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 55% at 80% 8%, rgba(217, 237, 131, 0.75), transparent 60%),
    radial-gradient(80% 50% at 10% 95%, rgba(231, 120, 77, 0.7), transparent 60%),
    linear-gradient(160deg, #315a4c, #15231f 70%);
  transition: transform 0.6s var(--ease-out-expo), filter 0.6s var(--ease-out);
}
.phone__island {
  position: absolute; top: 0.6rem; left: 50%; transform: translateX(-50%);
  width: 32%; height: 1.35rem; border-radius: 99px; background: #000; z-index: 6;
}
.phone__status {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.85rem 1.35rem 0;
  font-size: 0.72rem; font-weight: 650; color: #fff;
  font-variant-numeric: tabular-nums;
}
.phone__status svg { height: 0.62rem; width: auto; }
.phone__status-icons { display: inline-flex; gap: 0.25rem; align-items: center; }
.phone__grid {
  position: absolute; left: 0; right: 0; top: 3.2rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem 0.85rem;
  padding: 0 1.05rem;
  transition: transform 0.6s var(--ease-out-expo), opacity 0.35s ease, filter 0.5s ease;
}
.phone__dock {
  position: absolute; left: 0.6rem; right: 0.6rem; bottom: 0.6rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem;
  padding: 0.7rem 0.6rem;
  border-radius: 1.7rem;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  transition: transform 0.6s var(--ease-out-expo), opacity 0.35s ease;
}
.phone__dock .app { font-size: 0; gap: 0; }
.phone__notif-wrap {
  position: absolute; z-index: 7; top: 0.55rem; left: 0.5rem; right: 0.5rem;
  transform: translateY(-150%) scale(0.94);
  transition: transform 0.7s cubic-bezier(0.22, 1.22, 0.36, 1);
}
.phone[data-notif='on'] .phone__notif-wrap { transform: none; }
.phone[data-notif='off'] .phone__notif-wrap { transition: transform 0.4s cubic-bezier(0.5, 0, 0.75, 0); }
.phone[data-notif='on'] .phone__island { opacity: 0; transition: opacity 0.15s; }
.phone__island { transition: opacity 0.3s 0.25s; }

/* The opened app */
.phone__app {
  position: absolute; inset: 0; z-index: 4;
  background: var(--cream); color: var(--ink);
  display: grid; grid-template-rows: auto 1fr auto; gap: 0.75rem;
  padding: 2.9rem 1rem 1.1rem;
  transform-origin: var(--ox, 50%) var(--oy, 50%);
  transform: scale(0.14);
  opacity: 0;
  border-radius: 1.6rem;
  pointer-events: none;
  transition: transform 0.6s var(--ease-out-expo), opacity 0.22s ease, border-radius 0.6s var(--ease-out-expo);
}
.phone[data-state='app'] .phone__app, .phone[data-state='claimed'] .phone__app { transform: none; opacity: 1; border-radius: 0; pointer-events: auto; }
.phone[data-state='app'] .phone__grid, .phone[data-state='claimed'] .phone__grid { transform: scale(1.12); opacity: 0; filter: blur(6px); }
.phone[data-state='app'] .phone__dock, .phone[data-state='claimed'] .phone__dock { transform: translateY(120%); opacity: 0; }
.phone[data-state='app'] .phone__wall, .phone[data-state='claimed'] .phone__wall { transform: scale(1.15); filter: blur(8px); }
.phone[data-state='app'] .phone__status, .phone[data-state='claimed'] .phone__status { color: var(--ink); }
.phone__status { transition: color 0.3s ease 0.15s; }
.phone__app-head { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.02em; }
.phone__app-head .tag { font-family: var(--font-body); }
.reward {
  position: relative;
  display: grid; gap: 0.5rem; justify-items: center; align-content: center; text-align: center;
  background: var(--green-700); color: var(--cream);
  border-radius: 1.4rem; padding: 1.1rem 0.9rem;
  overflow: hidden; isolation: isolate;
}
.reward__rays {
  position: absolute; z-index: -1; left: 50%; top: 38%;
  width: 22rem; height: 22rem; margin: -11rem 0 0 -11rem;
  background: repeating-conic-gradient(from 0deg, rgba(217, 237, 131, 0.16) 0 10deg, transparent 10deg 20deg);
  -webkit-mask: radial-gradient(circle, #000 10%, transparent 62%);
  mask: radial-gradient(circle, #000 10%, transparent 62%);
  animation: rays-spin 14s linear infinite;
}
@keyframes rays-spin { to { transform: rotate(360deg); } }
.reward__medal {
  width: 4.6rem; height: 4.6rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--lime-500); color: var(--ink);
  box-shadow: 0 0 0 6px rgba(217, 237, 131, 0.22), 0 14px 30px -12px rgba(0, 0, 0, 0.6);
  transform: scale(0) rotate(-40deg);
}
.reward__medal svg { width: 55%; height: 55%; }
.phone[data-state='app'] .reward__medal, .phone[data-state='claimed'] .reward__medal { animation: medal-in 0.8s cubic-bezier(0.34, 1.5, 0.64, 1) 0.3s forwards; }
@keyframes medal-in { to { transform: scale(1) rotate(0); } }
.phone[data-state='claimed'] .reward__medal { background: var(--cream); }
.reward__title { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -0.02em; line-height: 1.1; }
.reward__sub { font-size: 0.78rem; color: var(--on-brand-muted); line-height: 1.35; }
.reward > .reward__title, .reward > .reward__sub { opacity: 0; transform: translateY(8px); }
.phone[data-state='app'] .reward > .reward__title, .phone[data-state='claimed'] .reward > .reward__title { animation: rise-in 0.6s var(--ease-out-expo) 0.55s forwards; }
.phone[data-state='app'] .reward > .reward__sub, .phone[data-state='claimed'] .reward > .reward__sub { animation: rise-in 0.6s var(--ease-out-expo) 0.65s forwards; }
@keyframes rise-in { to { opacity: 1; transform: none; } }
.claim-btn {
  position: relative;
  width: 100%; min-height: 2.9rem;
  border-radius: 99px;
  background: var(--ink); color: var(--lime-500);
  font-weight: 650; font-size: 0.92rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
  overflow: hidden;
  transition: transform 0.2s var(--ease-out), background-color 0.3s ease, color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.claim-btn:active { transform: scale(0.96); }
.claim-btn svg { width: 1rem; height: 1rem; }
.claim-btn::before {
  /* sheen sweep that invites the tap */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, transparent 35%, rgba(217, 237, 131, 0.35) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: sheen 2.4s ease-in-out 1.2s infinite;
}
@keyframes sheen { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
.claim-btn.is-done { background: var(--lime-500); color: var(--ink); }
.claim-btn.is-done::before { display: none; }
.claim-btn--page { width: auto; padding: 0 1.4rem; min-height: 3rem; font-size: 1rem; }
.phone__ticket {
  border: 1.5px dashed rgba(21, 35, 31, 0.3); border-radius: 0.9rem;
  padding: 0.55rem 0.7rem; font-size: 0.72rem; color: var(--text-muted); text-align: center;
  opacity: 0; transform: translateY(6px);
  transition: opacity 0.4s ease 0.3s, transform 0.5s var(--ease-out-expo) 0.3s;
}
.phone[data-state='claimed'] .phone__ticket { opacity: 1; transform: none; }
.phone__home-bar { position: absolute; z-index: 8; bottom: 0.35rem; left: 50%; transform: translateX(-50%); width: 34%; height: 0.26rem; border-radius: 99px; background: rgba(255, 255, 255, 0.85); transition: background-color 0.3s; }
.phone[data-state='app'] .phone__home-bar, .phone[data-state='claimed'] .phone__home-bar { background: rgba(21, 35, 31, 0.8); }
.phone-demo__controls { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; justify-content: center; font-size: var(--text-xs); color: var(--text-muted); text-align: center; }
.band-dark .phone-demo__controls { color: var(--on-brand-muted); }
.phone-demo__replay { display: inline-flex; align-items: center; gap: 0.35rem; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: 99px; border: 1px solid currentColor; opacity: 0.85; color: inherit; }
.phone-demo__replay:hover { opacity: 1; }
.phone-demo__replay svg { width: 0.9rem; height: 0.9rem; }

/* Moment section layout */
.moment { position: relative; overflow: clip; }
.moment__layout { display: grid; gap: var(--s-10); align-items: center; }
@media (min-width: 60rem) { .moment__layout { grid-template-columns: 1fr 1fr; gap: var(--s-12); } }
.moment__steps { display: grid; gap: var(--s-2); margin-top: var(--s-4); counter-reset: m; }
.moment__step {
  display: grid; grid-template-columns: 2.2rem 1fr; gap: var(--s-3); align-items: start;
  padding: var(--s-3) var(--s-4); border-radius: var(--r-lg);
  border: 1px solid transparent;
  transition: background-color 0.4s ease, border-color 0.4s ease, transform 0.5s var(--ease-out-expo);
  text-align: left; width: 100%; color: inherit;
}
.moment__step-ic { width: 2.2rem; height: 2.2rem; border-radius: 0.7rem; display: grid; place-items: center; background: rgba(245, 244, 239, 0.08); color: var(--lime-500); transition: background-color 0.4s, color 0.4s, transform 0.5s var(--ease-pop); }
.moment__step-ic svg { width: 1.1rem; height: 1.1rem; }
.moment__step-txt { display: grid; gap: 2px; }
.moment__step strong { display: block; font-size: 1rem; }
.moment__step-sub { font-size: 0.92rem; color: var(--on-brand-muted); }
.moment__step.is-active { background: rgba(245, 244, 239, 0.07); border-color: rgba(245, 244, 239, 0.14); transform: translateX(6px); }
.moment__step.is-active .moment__step-ic { background: var(--lime-500); color: var(--ink); transform: scale(1.08) rotate(-4deg); }
.moment__stage { position: relative; display: grid; place-items: center; min-height: 34rem; }
.moment__glow { position: absolute; width: 26rem; height: 26rem; border-radius: 50%; background: radial-gradient(circle, rgba(217, 237, 131, 0.28), transparent 65%); filter: blur(8px); animation: glow-breathe 5s ease-in-out infinite; }
@keyframes glow-breathe { 0%, 100% { transform: scale(0.92); opacity: 0.8; } 50% { transform: scale(1.06); opacity: 1; } }

/* ---------- Sparkles, floaters, twinkles ---------- */
.sparkle { position: fixed; z-index: 95; left: 0; top: 0; pointer-events: none; will-change: transform, opacity; }
.sparkle svg { display: block; width: 100%; height: 100%; }
.floater {
  position: fixed; z-index: 94; left: 0; top: 0; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; font-size: 0.95rem; letter-spacing: -0.02em;
  color: var(--ink); background: var(--lime-500);
  padding: 0.1rem 0.45rem; border-radius: 99px;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.4);
  will-change: transform, opacity;
}
.twinkle { position: absolute; width: var(--tw, 1rem); height: var(--tw, 1rem); color: var(--lime-500); pointer-events: none; animation: twinkle var(--tw-dur, 3.2s) ease-in-out var(--tw-delay, 0s) infinite; }
.twinkle--orange { color: var(--orange-500); }
.twinkle--cream { color: var(--cream); }
.twinkle svg { width: 100%; height: 100%; display: block; }
@keyframes twinkle {
  0%, 100% { transform: scale(0.2) rotate(0deg); opacity: 0; }
  45% { transform: scale(1) rotate(45deg); opacity: 1; }
  60% { transform: scale(0.85) rotate(60deg); opacity: 0.9; }
}

/* Hero app icon with badge (replaces the plain L coin) */
.hero__appicon { border-radius: 27% !important; overflow: visible; }
.hero__appicon .badge { top: -0.35rem; right: -0.35rem; font-size: 0.65rem; min-width: 1.1rem; height: 1.1rem; }

/* ---------- Ambient motion ---------- */
.kicker__dot { animation: dot-pulse 2.6s ease-in-out infinite; }
@keyframes dot-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(231, 120, 77, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(231, 120, 77, 0); } }
@media (hover: hover) {
  .feature:hover .feature__icon { animation: icon-wiggle 0.7s var(--ease-pop); }
  .tier:hover, .roadmap__item:hover, .trust__item:hover, .contact__card:hover { transform: translateY(-3px); }
  .btn--accent:hover, .btn--stamp:hover { box-shadow: 0 10px 24px -10px rgba(21, 35, 31, 0.45); }
}
.tier, .roadmap__item, .trust__item, .contact__card { transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out); }
@keyframes icon-wiggle { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(-10deg) scale(1.08); } 55% { transform: rotate(8deg) scale(1.08); } 80% { transform: rotate(-3deg) scale(1.02); } 100% { transform: rotate(0) scale(1); } }
.marquee { transition: transform 0.4s var(--ease-out); will-change: transform; }
.tag--soon::before { animation: dot-pulse 2.2s ease-in-out infinite; }
.hud.is-complete .hud__card { animation: hud-celebrate 0.9s var(--ease-pop); }
@keyframes hud-celebrate { 0% { transform: scale(1) rotate(0); } 30% { transform: scale(1.06) rotate(-2deg); } 60% { transform: scale(0.99) rotate(1.2deg); } 100% { transform: scale(1) rotate(0); } }
.hud__reward { position: relative; overflow: hidden; }
.hud.is-complete .hud__reward::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.6) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 2.6s ease-in-out 0.6s infinite; }

/* Claim row on the progress demo */
.progress-demo__claim { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.progress-demo__claim[hidden] { display: none; }
.progress-demo__claim .claim-btn { animation: claim-pop 0.6s cubic-bezier(0.34, 1.6, 0.64, 1); }
@keyframes claim-pop { 0% { transform: scale(0.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .twinkle, .reward__rays, .moment__glow, .kicker__dot, .claim-btn::before { animation: none !important; }
  .twinkle { opacity: 0.8; transform: none; }
  .reward__medal { transform: none; }
  .reward > .reward__title, .reward > .reward__sub { opacity: 1; transform: none; }
  .site-notif { display: none; }
}

/* Layering: twinkles sit behind content but above section backgrounds */
.twinkle { z-index: -1; }
.moment, .moment__stage, .cta-band, .hero__stage { isolation: isolate; }