/* duck.css — small original painted duck on the river.
   Own file (duck worker). Parent includes with
   <link rel="stylesheet" href="duck.css"> + <script src="duck.js" defer></script>.
   The layer lives INSIDE .painting before .sky-veil, so it shares the exact
   landscape geometry (including the mobile 120%/-4% frame) and the night wash
   (.painting::after) tints it exactly like the base water. Never intercepts
   input: pointer-events none, so grass taps and the paper-boat button pass
   straight through. */

.duck-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  user-select: none;
}

.duck-layer svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

/* Gentle bob: the hull group only (ripples stay on the waterline). */
.duck-bob {
  transform-box: fill-box;
  transform-origin: center;
  animation: duck-bob 5.2s ease-in-out infinite;
}

@keyframes duck-bob {
  0%, 100% { transform: translateY(0) rotate(-1.2deg); }
  50% { transform: translateY(-2.6px) rotate(1.4deg); }
}

/* Small wake ripples: slow expand + fade, staggered. */
.duck-ripple {
  fill: none;
  stroke: #f3e8cd;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: duck-ripple 5.2s ease-out infinite;
}

.duck-ripple.r2 { animation-delay: -2.6s; }

@keyframes duck-ripple {
  0% { opacity: 0; transform: scale(0.72); }
  25% { opacity: 0.55; }
  100% { opacity: 0; transform: scale(1.12); }
}

/* Optional glance: a tiny head tilt when the pointer lingers near the duck. */
.duck-head {
  transform-box: fill-box;
  transform-origin: 70% 85%;
  transition: transform 0.45s ease;
}

.duck-layer.duck-glance .duck-head {
  transform: rotate(-9deg) translateY(-0.6px);
}

/* Paused / hidden-tab / dialog-open freeze: static duck, no ripples. */
.world.still .duck-bob,
.world.still .duck-ripple {
  animation: none !important;
}

.world.still .duck-ripple { opacity: 0 !important; }
.world.still .duck-head { transition: none; }
.world.still .duck-layer.duck-glance .duck-head { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .duck-bob,
  .duck-ripple,
  .duck-head {
    animation: none !important;
    transition: none !important;
  }
  .duck-ripple { opacity: 0 !important; }
}

/* Discreet postcard opener: invisible minimum-44px hit target over the duck.
   The button lives in .landmarks (outside aria-hidden .painting), positioned
   with world-relative percentages matching the painting coordinates
   (1340/1800, 908/1100). Mobile painting frame is 120% wide at left -4%,
   so the world-relative left shifts to ~85.33%; top is unchanged. */
.world {
  --duck-left: 74.4444%;
  --duck-top: 82.5455%;
}

@media (max-width: 700px) {
  .world {
    --duck-left: 85.3333%;
  }
}

.landmarks .duck-gallery-trigger {
  position: absolute;
  left: var(--duck-left);
  top: var(--duck-top);
  transform: translate(-50%, -50%);
  width: 64px;
  height: 48px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  pointer-events: auto;
  z-index: 4;
}

.landmarks .duck-gallery-trigger:focus-visible {
  outline: 2px dashed var(--terra);
  outline-offset: 4px;
}