/* ==========================================================================
   Floating UI & decorative effects — dock, toast, progress bar,
   petals, tap hearts, gold shimmer
   Behaviour: js/dock.js, js/effects.js, js/scroll.js, js/intro.js
   ========================================================================== */

/* ---------- Bottom dock ---------- */
.dock {
  position: fixed; z-index: 8; left: 50%; bottom: max(12px, env(safe-area-inset-bottom));
  width: min(398px, calc(100% - 24px));
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 6px; border-radius: 22px;
  background: rgba(62, 11, 24, .78); border: 1px solid rgba(233, 217, 184, .22);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 14px 34px -14px rgba(20, 3, 8, .7);
  transform: translate(-50%, 140%); transition: transform .5s cubic-bezier(.3, .9, .3, 1);
}
.dock.is-shown { transform: translate(-50%, 0); }
.dock__btn {
  min-height: 50px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 0; border-radius: 16px; background: none; color: rgba(246, 235, 214, .7);
  font-family: inherit; font-size: 10px; font-weight: 300; letter-spacing: .04em; cursor: pointer;
  transition: background .25s, color .25s;
}
.dock__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dock__btn.is-active { color: var(--wine-deep); background: #E9D9B8; }
.dock__btn:focus-visible { outline: 1px solid #E9D9B8; outline-offset: 2px; }

/* ---------- Toast ---------- */
.toast {
  position: fixed; z-index: 30; left: 50%; bottom: 96px; transform: translate(-50%, 20px);
  padding: 10px 18px; border-radius: 999px; background: rgba(30, 5, 11, .9); color: var(--cream);
  font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Scroll progress ---------- */
.progress {
  position: fixed; z-index: 9; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, #B99A5B, #EAD9B6, #B99A5B);
  transform-origin: 0 50%; transform: scaleX(0);
}

/* ---------- Falling petals ---------- */
.petals { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.petal {
  position: absolute; top: -30px;
  width: var(--size, 12px); height: calc(var(--size, 12px) * .8);
  border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, #C79AA0, #A0505E);
  opacity: .7;
  animation: fall var(--dur, 12s) linear var(--delay, 0s) infinite;
}
.petal--gold { background: linear-gradient(135deg, #EADBB8, #B99A5B); opacity: .55; }

/* ---------- Tap hearts ---------- */
.heart {
  position: fixed; z-index: 25; pointer-events: none; line-height: 1;
  font-size: var(--size, 16px); color: var(--color, #A0505E);
  animation: heartUp var(--dur, 1.2s) ease-out forwards;
}

/* ---------- Gold shimmer, masked to the logo strokes ---------- */
.shimmer { position: relative; display: inline-block; line-height: 0; }
.shimmer::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 248, 230, .95) 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; background-position: 130% 0;
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
  animation: shine 5s ease-in-out 1.5s infinite;
}

@keyframes fall {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  100% { transform: translate3d(var(--drift, 60px), 110vh, 0) rotate(var(--spin, 540deg)); }
}
@keyframes heartUp {
  0% { transform: translate(-50%, -50%) scale(.4); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - var(--dy, 90px))) scale(1.1) rotate(var(--rot, 0deg)); opacity: 0; }
}
@keyframes shine { 0%, 55% { background-position: 130% 0; } 100% { background-position: -30% 0; } }

@media (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
  .petals, .heart { display: none; }
  .shimmer::after { animation: none; display: none; }
}