/* Distro Disco bottom nav — extracted package */
:root {
  --navy: #23214A;
  --icon-size-nav: 38px;
  --icon-size-nav-center: 48px;
  --nav-center-circle-size: 68px;
  --dur-bounce: 500ms;
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.33, 1, 0.68, 1);
  --z-bottom-nav: 9999;
  --z-nav-scrim: 9998;
}

/* Demo shell only — remove in production */
.bottom-nav-demo-shell {
  position: relative;
  width: 390px;
  height: 844px;
  margin: 24px auto;
  background: #F8F7F4;
  border-radius: 42px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 24px 48px rgba(35, 33, 74, 0.12);
}
.bottom-nav-host {
  position: relative;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.bottom-nav-host *,
.bottom-nav-host *::before,
.bottom-nav-host *::after {
  box-sizing: border-box;
}
.bottom-nav .nav-item,
.bottom-nav .donate-icon-btn {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

  /* Mobile: ensure active/pressed state shows on touch (polyfill for :active) */
  .touch-active { opacity: 0.92; }
  .btn.touch-active, .btn-primary.touch-active, .btn-secondary.touch-active,
  .donate-icon-btn.touch-active { opacity: 1; }

  /* Navbar gradient scrim */
  .nav-scrim {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 140px;
    background: linear-gradient(to top, rgba(35, 33, 74, 0.88) 0%, transparent 100%);
    pointer-events: none;
    z-index: var(--z-nav-scrim);
  }

  /* Bottom Navigation */
  .bottom-nav {
    position: absolute;
    bottom: 14px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: calc(100% - 32px);
    max-width: 356px;
    height: 90px;
    z-index: var(--z-bottom-nav);
  }
  .nav-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
    display: block;
  }
  /* frosted glass layer — masked to the exact navbar SVG shape */
  .bottom-nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #f5f5f5;
    mask-image: url('assets/navbar-mask.svg');
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
    -webkit-mask-image: url('assets/navbar-mask.svg');
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    z-index: 0;
  }
  .nav-bg-img { z-index: 1; }
  .nav-content { z-index: 2; }
  .nav-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 62px 62px 70px 62px 62px;
    align-items: center;
    justify-items: center;
    width: 100%;
    height: 100%;
    justify-content: center;
    padding: 7px 8px 8px;
    background-color: transparent;
  }
  .nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    color: #515355;
    font-size: 11px;
    font-weight: 600;
    font-family: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    transition: color 0.25s ease;
  }
  .nav-item.active { color: var(--navy); }
  .bottom-nav .nav-item:not(.center-item) {
    width: 66px;
    min-width: 66px;
  padding-top: 3px;
  padding-bottom: 5px;
    border-radius: 24px;
    gap: 0px;
  }
  .bottom-nav .nav-item .icon-wrap {
  width: 34px;
  height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }

  .nav-icon {
    width: var(--icon-size-nav);
    height: var(--icon-size-nav);
    object-fit: contain;
    display: block;
  }
  /* bottom nav icon states (non-center items) — smooth scale + bg like center */
  .bottom-nav .nav-item:not(.center-item) .nav-icon {
  width: 34px;
  height: 34px;
    border-radius: 999px;
    background: transparent;
    filter: grayscale(1) opacity(0.6);
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease,
                filter 0.25s ease;
  }
  .bottom-nav .nav-item:not(.center-item).active .nav-icon {
    filter: none;
    background: #ffeed8;
    transform: scale(1.1);
  }
  .bottom-nav .nav-item:not(.center-item):active .nav-icon,
  .bottom-nav .nav-item:not(.center-item).touch-active .nav-icon {
    transform: scale(0.90);
  }
  /* center icon muted when not active (same as others) */
  .bottom-nav .nav-item.center-item:not(.active) .donate-svg {
    filter: grayscale(1) opacity(0.6);
    transition: filter 0.25s ease;
  }
  .bottom-nav .nav-item.center-item.active .donate-svg {
    filter: none;
  }
  .nav-icon-center {
    width: 44px;
    height: 44px;
  }

  /* Center Donate button */
  .nav-item.center-item {
    align-items: center;
    justify-content: center;
  }
  .nav-center-circle {
    width: var(--nav-center-circle-size);
    height: var(--nav-center-circle-size);
    min-width: var(--nav-center-circle-size);
    min-height: var(--nav-center-circle-size);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px;
    border-radius: 50%;
    background: transparent;
    transform: scale(1);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.25s ease;
  }
  .nav-item.center-item.active .nav-center-circle {
    transform: scale(1.1);
  }
  .nav-center-circle img {
    flex-shrink: 0;
  }
  .nav-center-circle .nav-center-label {
    font-size: 11px;
    line-height: 1;
  }
  .nav-item.center-item.active .nav-center-circle {
    background: #ffeed8;
  }
  .nav-item.center-item.active .nav-center-circle .nav-center-label {
    color: var(--navy);
  }

  /* Home icon — customize strokes & colors via CSS variables */
  .bottom-nav .icon-home {
    --home-stroke: #292966;
    --home-stroke-width: 1.5;
    --home-stroke-linecap: round;
    --home-stroke-miter: 10;
    --home-accent-fill: #FF7534;
    --home-accent-stroke: none;
    --home-accent-stroke-width: 0;
    transform-origin: center bottom;
    will-change: transform;
  }
  .bottom-nav .icon-home .home-accent,
  .bottom-nav .icon-home .home-accent .home-accent-body {
    fill: var(--home-accent-fill);
    stroke: var(--home-accent-stroke, none);
    stroke-width: var(--home-accent-stroke-width, 0);
  }
  .bottom-nav .icon-home .home-stroke {
    stroke: var(--home-stroke);
    stroke-width: var(--home-stroke-width);
    stroke-linecap: var(--home-stroke-linecap);
    stroke-miterlimit: var(--home-stroke-miter);
  }
  /* Per-part overrides (optional): .icon-home .home-stroke-roof { stroke: red; } etc. */

  /* Home icon tap animation (elastic bounce + accent pulse) */
  .bottom-nav .nav-item:first-child .icon-wrap {
  --home-icon-size: 34px;
    width: var(--home-icon-size);
    height: var(--home-icon-size);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
  }
  .bottom-nav .nav-item:first-child .icon-home {
    width: var(--home-icon-size);
    height: var(--home-icon-size);
  }
  .bottom-nav .icon-home.active {
    animation: home-bounce var(--dur-bounce) var(--ease-spring) forwards;
  }
  @keyframes home-bounce {
    0%   { transform: scale(1)     translateY(0); }
    40%  { transform: scale(1.18)  translateY(-3px); }
    65%  { transform: scale(0.95)  translateY(1px); }
    80%  { transform: scale(1.05)  translateY(-1px); }
    100% { transform: scale(1.1)    translateY(0); }
  }
  .bottom-nav .icon-home.active .home-accent {
    animation: home-accent-pulse 550ms var(--ease-spring) forwards;
    transform-origin: 60% 55%;
  }
  @keyframes home-accent-pulse {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.22); }
    60%  { transform: scale(0.92); }
    80%  { transform: scale(1.06); }
    100% { transform: scale(1); }
  }

  /* Calendar icon tap animation (squeeze + header wipe) */
  .bottom-nav .icon-calendar {
    transform-origin: center center;
  }
  .bottom-nav .icon-calendar.active {
    animation: cal-squeeze var(--dur-bounce) var(--ease-spring) forwards;
  }
  @keyframes cal-squeeze {
    0%   { transform: scaleY(1)    scaleX(1); }
    30%  { transform: scaleY(0.9)  scaleX(1.05); }
    60%  { transform: scaleY(1.06) scaleX(0.98); }
    80%  { transform: scaleY(0.98) scaleX(1.02); }
    100% { transform: scaleY(1)    scaleX(1); }
  }
  .bottom-nav .icon-calendar.active .cal-header {
    animation: cal-header-slide 480ms var(--ease-spring) forwards;
    transform-origin: 25% 50%;
  }
  @keyframes cal-header-slide {
    0%   { transform: scaleX(0.5) translateX(-3px); opacity: 0.55; }
    60%  { transform: scaleX(1.04) translateX(0);   opacity: 1; }
    80%  { transform: scaleX(0.98) translateX(0);   opacity: 1; }
    100% { transform: scaleX(1)   translateX(0);    opacity: 1; }
  }
  .bottom-nav .nav-item:nth-child(2) .icon-wrap {
  width: 34px;
  height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Forum icon tap animation (bubbles + staggered dots) */
  .bottom-nav .icon-forum {
    transform-origin: center center;
  }
  .bottom-nav .icon-forum.active .forum-bubble-left {
    animation: bubble-left 500ms var(--ease-spring) forwards;
    transform-origin: 38% 45%;
  }
  @keyframes bubble-left {
    0%   { transform: scale(0.6) translate(-4px, 2px); opacity: 0.4; }
    55%  { transform: scale(1.1) translate(0, 0);       opacity: 1; }
    75%  { transform: scale(0.95) translate(0, 0);      opacity: 1; }
    100% { transform: scale(1)   translate(0, 0);      opacity: 1; }
  }
  .bottom-nav .icon-forum.active .forum-bubble-right {
    animation: bubble-right 520ms var(--ease-spring) 80ms forwards;
    transform-origin: 74% 62%;
  }
  @keyframes bubble-right {
    0%   { transform: scale(1) translate(0, 0); opacity: 1; }
    30%  { transform: scale(1.1) translate(2px, -1px); opacity: 1; }
    60%  { transform: scale(0.96) translate(0, 0); opacity: 1; }
    100% { transform: scale(1)   translate(0, 0); opacity: 1; }
  }
  .bottom-nav .icon-forum.active .forum-dot-1 { animation: dot-pop 350ms var(--ease-spring) 120ms forwards; transform-origin: center; }
  .bottom-nav .icon-forum.active .forum-dot-2 { animation: dot-pop 350ms var(--ease-spring) 175ms forwards; transform-origin: center; }
  .bottom-nav .icon-forum.active .forum-dot-3 { animation: dot-pop 350ms var(--ease-spring) 230ms forwards; transform-origin: center; }
  .bottom-nav .icon-forum.active .forum-dot-4 { animation: dot-pop 350ms var(--ease-spring) 160ms forwards; transform-origin: center; }
  .bottom-nav .icon-forum.active .forum-dot-5 { animation: dot-pop 350ms var(--ease-spring) 220ms forwards; transform-origin: center; }
  @keyframes dot-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.6); }
    70%  { transform: scale(0.85); }
    100% { transform: scale(1); }
  }
  .bottom-nav .nav-item:nth-child(5) .icon-wrap {
  width: 34px;
  height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Items (Volunteer) icon — bag toss + settle + ripple */
  .bottom-nav .icon-items {
    transform-origin: center center;
  }
  .bottom-nav .icon-items.active .items-bag-main {
    animation: bag-toss 550ms var(--ease-spring) forwards;
    transform-origin: 63% 42%;
  }
  @keyframes bag-toss {
    0%   { transform: translateY(0)    rotate(0deg)   scale(1); }
    30%  { transform: translateY(-5px) rotate(-6deg)  scale(1.08); }
    55%  { transform: translateY(1px)  rotate(2deg)   scale(0.97); }
    75%  { transform: translateY(-1px) rotate(-1deg)  scale(1.02); }
    100% { transform: translateY(0)    rotate(0deg)   scale(1); }
  }
  .bottom-nav .icon-items.active .items-bag-secondary {
    animation: bag-settle 500ms var(--ease-spring) 90ms forwards;
    transform-origin: 22% 72%;
  }
  @keyframes bag-settle {
    0%   { transform: translateY(0)    scale(1); }
    35%  { transform: translateY(-2px) scale(1.06); }
    60%  { transform: translateY(1px)  scale(0.97); }
    80%  { transform: translateY(0)    scale(1.02); }
    100% { transform: translateY(0)    scale(1); }
  }
  .bottom-nav .icon-items.active .items-accent {
    animation: items-ripple 400ms var(--ease-out) 200ms forwards;
    transform-origin: 50% 78%;
  }
  @keyframes items-ripple {
    0%   { opacity: 1; transform: scale(1); }
    40%  { opacity: 1; transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
  }
  .bottom-nav .nav-item:nth-child(4) .icon-wrap {
  width: 34px;
  height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Grow & return bounce on icon-wrap for Events, Forums, Volunteer (same as Home/Donate) */
  .bottom-nav .nav-item .icon-wrap:has(.icon-calendar.active),
  .bottom-nav .nav-item .icon-wrap:has(.icon-forum.active),
  .bottom-nav .nav-item .icon-wrap:has(.icon-items.active) {
    animation: home-bounce var(--dur-bounce) var(--ease-spring) forwards;
    transform-origin: center center;
  }

  /* Donate icon button reset */
  .donate-icon-btn {
    background: none;
    border: none;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }
  .donate-icon-btn .donate-svg {
    transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .donate-icon-btn:active .donate-svg,
  .donate-icon-btn.touch-active .donate-svg { transform: scale(0.92); }

  /* Donate bounce: grow & return like Home (home-bounce), plus accent pop and spark flick */
  .donate-svg.active,
  .donate-svg.icon-donate.active {
    animation: home-bounce var(--dur-bounce) var(--ease-spring) forwards;
    transform-origin: center center;
  }
  .donate-svg.active .globe-accent {
    animation: globe-accent-pop 520ms var(--ease-spring) 60ms forwards;
    transform-origin: 56% 54%;
  }
  .donate-svg.active .donate-spark-1 { animation: spark-flick 380ms var(--ease-out) 0ms forwards; transform-origin: 84% 10%; }
  .donate-svg.active .donate-spark-2 { animation: spark-flick 380ms var(--ease-out) 60ms forwards; transform-origin: 95% 17%; }
  .donate-svg.active .donate-spark-3 { animation: spark-flick 380ms var(--ease-out) 40ms forwards; transform-origin: 18% 94%; }
  .donate-svg.active .donate-spark-4 { animation: spark-flick 380ms var(--ease-out) 100ms forwards; transform-origin: 6% 90%; }
  .donate-svg.active .donate-spark-5 { animation: spark-flick 380ms var(--ease-out) 80ms forwards; transform-origin: 5% 77%; }
  @keyframes globe-accent-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.14); }
    65%  { transform: scale(0.93); }
    100% { transform: scale(1); }
  }
  @keyframes spark-flick {
    0%   { transform: scale(1) rotate(0deg); }
    35%  { transform: scale(1.4) rotate(8deg); }
    65%  { transform: scale(0.9) rotate(-3deg); }
    100% { transform: scale(1) rotate(0deg); }
  }

  /* Particle transform origins */
  #p1 { transform-origin: 35.8px 3.97px; }
  #p2 { transform-origin: 39.6px 7.69px; }
  #p3 { transform-origin: 8.73px 39.85px; }
  #p4 { transform-origin: 4.16px 38.01px; }
  #p5 { transform-origin: 3.37px 34.22px; }

  /* Fired state — particles shoot out (ease-in-out: slow → fast → slow) */
  .donate-icon-btn.fired #p1 { animation: shoot1 0.7s cubic-bezier(0.42,0,0.58,1) forwards; }
  .donate-icon-btn.fired #p2 { animation: shoot2 0.7s 0.03s cubic-bezier(0.42,0,0.58,1) forwards; }
  .donate-icon-btn.fired #p3 { animation: shoot3 0.7s 0.06s cubic-bezier(0.42,0,0.58,1) forwards; }
  .donate-icon-btn.fired #p4 { animation: shoot4 0.7s 0.02s cubic-bezier(0.42,0,0.58,1) forwards; }
  .donate-icon-btn.fired #p5 { animation: shoot5 0.7s 0.05s cubic-bezier(0.42,0,0.58,1) forwards; }
  .donate-icon-btn.fired #globe-body { animation: globePulse 0.6s cubic-bezier(0.42,0,0.58,1) forwards; }

  @keyframes shoot1 {
    0%   { transform: translate(0,0);       opacity: 1; }
    45%  { transform: translate(5px,-5px);  opacity: 0; }
    46%  { transform: translate(0,0);       opacity: 0; }
    100% { transform: translate(0,0);       opacity: 1; }
  }
  @keyframes shoot2 {
    0%   { transform: translate(0,0);       opacity: 1; }
    45%  { transform: translate(7px,-3px);  opacity: 0; }
    46%  { transform: translate(0,0);       opacity: 0; }
    100% { transform: translate(0,0);       opacity: 1; }
  }
  @keyframes shoot3 {
    0%   { transform: translate(0,0);       opacity: 1; }
    45%  { transform: translate(-5px,5px);  opacity: 0; }
    46%  { transform: translate(0,0);       opacity: 0; }
    100% { transform: translate(0,0);       opacity: 1; }
  }
  @keyframes shoot4 {
    0%   { transform: translate(0,0);       opacity: 1; }
    45%  { transform: translate(-7px,3px);  opacity: 0; }
    46%  { transform: translate(0,0);       opacity: 0; }
    100% { transform: translate(0,0);       opacity: 1; }
  }
  @keyframes shoot5 {
    0%   { transform: translate(0,0);       opacity: 1; }
    45%  { transform: translate(-6px,1px);  opacity: 0; }
    46%  { transform: translate(0,0);       opacity: 0; }
    100% { transform: translate(0,0);       opacity: 1; }
  }
  @keyframes globePulse {
    0%   { transform: scale(1);    transform-origin: 22px 22px; }
    40%  { transform: scale(1.08); transform-origin: 22px 22px; }
    100% { transform: scale(1);    transform-origin: 22px 22px; }
  }

  /* Donate inline SVG — preserve its own colours and sizing */
  .donate-svg {
    width: var(--icon-size-nav-center);
    height: var(--icon-size-nav-center);
    display: block;
    overflow: visible;
  }