:root {
  --motion-spring: cubic-bezier(.2, .9, .25, 1.2);
  --motion-smooth: cubic-bezier(.22, .8, .26, 1);
}

/* Calm, progressive page entrances. Content remains visible when JavaScript is unavailable. */
.motion-ready .motion-observe {
  opacity: 0;
  transform: translateY(16px) scale(.992);
}

.motion-ready .motion-observe.motion-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity .55s var(--motion-smooth),
    transform .65s var(--motion-smooth);
}

.motion-ready .motion-delay-1 { transition-delay: 45ms; }
.motion-ready .motion-delay-2 { transition-delay: 90ms; }
.motion-ready .motion-delay-3 { transition-delay: 135ms; }
.motion-ready .motion-delay-4 { transition-delay: 180ms; }
.motion-ready .motion-delay-5 { transition-delay: 225ms; }

.brand-mark {
  overflow: hidden;
  transition: transform .25s var(--motion-spring), box-shadow .25s ease;
}

.brand:hover .brand-mark,
.brand:focus-visible .brand-mark {
  transform: rotate(-4deg) scale(1.05);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--deep) 24%, transparent);
}

.brand:hover .brand-mark svg,
.brand:focus-visible .brand-mark svg {
  animation: motion-logo-swim .65s var(--motion-smooth);
}

.button,
.icon-button,
.text-button {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.motion-button-ripple {
  position: absolute;
  z-index: 0;
  left: calc(50% - 9px);
  top: calc(50% - 9px);
  width: 18px;
  height: 18px;
  pointer-events: none;
  border-radius: 50%;
  background: currentColor;
  opacity: .18;
  transform: scale(0);
  animation: motion-button-ripple .5s ease-out forwards;
}

.motion-spin {
  animation: motion-control-spin .5s var(--motion-spring);
}

.water-stage .bubble,
.multiplayer-water-stage .bubble {
  will-change: transform, opacity;
  animation: motion-bubble-drift 5.8s ease-in-out infinite;
}

.water-stage .bubble-two,
.multiplayer-water-stage .bubble-b {
  animation-delay: -2.1s;
  animation-duration: 7.2s;
}

.water-stage .bubble-three,
.multiplayer-water-stage .bubble-c {
  animation-delay: -3.7s;
  animation-duration: 6.6s;
}

.water-stage::before,
.photo-reveal-stage::after,
.multiplayer-water-stage::before {
  animation: motion-water-breathe 9s ease-in-out infinite alternate;
}

.completion-seal {
  animation: motion-seal-pop .55s var(--motion-spring) both;
}

.progress-track > span {
  position: relative;
  overflow: hidden;
  transition: width .65s var(--motion-smooth);
}

.progress-track > span::after {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, #fff7 48%, transparent 66%);
  content: "";
  transform: translateX(-120%);
  animation: motion-progress-glint 3.8s ease-in-out infinite;
}

@media (hover: hover) {
  .archive-mode-links a,
  .fishdex-card,
  .leaderboard-row,
  .invitation-list > div {
    transition:
      transform .22s var(--motion-smooth),
      border-color .22s ease,
      box-shadow .22s ease;
  }

  .archive-mode-links a:hover,
  .fishdex-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 30px #08394614;
  }

  .leaderboard-row:hover,
  .invitation-list > div:hover {
    transform: translateX(3px);
  }
}

/* Gameplay feedback layer. */
[data-motion-stage] {
  position: relative;
  isolation: isolate;
}

.fishdle-feedback {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: grid;
  overflow: hidden;
  place-items: center;
  pointer-events: none;
  border-radius: inherit;
}

.fishdle-feedback::before {
  position: absolute;
  inset: 0;
  content: "";
}

.fishdle-feedback--success::before {
  background:
    radial-gradient(circle at 50% 52%, #fff8 0 13%, transparent 14%),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--aqua) 35%, transparent), transparent 62%);
  animation: motion-success-wash .8s ease-out both;
}

.fishdle-feedback--failure::before {
  background: linear-gradient(90deg, transparent, #062f3b35 46%, #062f3b12);
  animation: motion-failure-wash .72s ease-out both;
}

.motion-catch-core {
  position: relative;
  z-index: 2;
  display: grid;
  width: clamp(84px, 20vw, 124px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid #fff9;
  border-radius: 50%;
  background: color-mix(in srgb, var(--deep) 90%, transparent);
  color: #fff;
  box-shadow:
    0 18px 50px #063c4b42,
    inset 0 0 0 8px #ffffff12;
}

.fishdle-feedback--success .motion-catch-core {
  animation: motion-catch-arrive .75s var(--motion-spring) both;
}

.fishdle-feedback--failure .motion-catch-core {
  border-color: #ffffff4f;
  background: color-mix(in srgb, var(--deep) 72%, transparent);
  animation: motion-catch-fade .72s var(--motion-smooth) both;
}

.motion-catch-fish {
  width: 66%;
  filter: drop-shadow(0 7px 8px #0018);
}

.motion-catch-fish path { fill: var(--gold); }
.motion-catch-fish circle { fill: var(--deep); }

.fishdle-feedback--success .motion-catch-fish {
  animation: motion-fish-caught .7s var(--motion-spring) both;
}

.fishdle-feedback--failure .motion-catch-fish {
  animation: motion-fish-escape .75s cubic-bezier(.45, .02, .85, .35) both;
}

.motion-catch-mark {
  position: absolute;
  right: -5px;
  bottom: -3px;
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--match);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 950;
  box-shadow: 0 6px 14px #063c4b42;
}

.fishdle-feedback--failure .motion-catch-mark {
  background: var(--wrong);
}

.motion-sparks {
  position: absolute;
  z-index: 1;
  inset: 50%;
}

.motion-spark {
  --spark-x: 0px;
  --spark-y: -80px;
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 2px 70%;
  background: var(--gold);
  opacity: 0;
  animation: motion-spark .72s ease-out both;
}

.motion-spark:nth-child(even) { border-radius: 50%; background: var(--aqua); }
.motion-spark:nth-child(1) { --spark-x: -105px; --spark-y: -60px; }
.motion-spark:nth-child(2) { --spark-x: -72px; --spark-y: -105px; animation-delay: 35ms; }
.motion-spark:nth-child(3) { --spark-x: -18px; --spark-y: -122px; animation-delay: 70ms; }
.motion-spark:nth-child(4) { --spark-x: 42px; --spark-y: -112px; animation-delay: 20ms; }
.motion-spark:nth-child(5) { --spark-x: 96px; --spark-y: -72px; animation-delay: 80ms; }
.motion-spark:nth-child(6) { --spark-x: 120px; --spark-y: -10px; animation-delay: 45ms; }
.motion-spark:nth-child(7) { --spark-x: 96px; --spark-y: 66px; animation-delay: 90ms; }
.motion-spark:nth-child(8) { --spark-x: 42px; --spark-y: 108px; animation-delay: 50ms; }
.motion-spark:nth-child(9) { --spark-x: -24px; --spark-y: 116px; animation-delay: 15ms; }
.motion-spark:nth-child(10) { --spark-x: -84px; --spark-y: 88px; animation-delay: 75ms; }
.motion-spark:nth-child(11) { --spark-x: -122px; --spark-y: 28px; animation-delay: 40ms; }
.motion-spark:nth-child(12) { --spark-x: 122px; --spark-y: 38px; animation-delay: 100ms; }

.motion-escape-bubbles {
  position: absolute;
  z-index: 3;
  width: 7px;
  height: 7px;
  border: 2px solid #fff9;
  border-radius: 50%;
  opacity: 0;
  animation: motion-escape-bubble .7s ease-out both;
}

.motion-escape-bubbles:nth-child(2) { width: 12px; height: 12px; animation-delay: 80ms; }
.motion-escape-bubbles:nth-child(3) { width: 5px; height: 5px; animation-delay: 150ms; }

.motion-miss-ripple {
  width: 64px;
  height: 24px;
  border: 3px solid color-mix(in srgb, var(--gold) 78%, white);
  border-radius: 50%;
  box-shadow: 0 0 22px color-mix(in srgb, var(--gold) 40%, transparent);
  opacity: 0;
  animation: motion-miss-ripple .5s ease-out both;
}

.motion-miss-bubble {
  position: absolute;
  left: calc(50% - 3px);
  top: 50%;
  width: 7px;
  height: 7px;
  border: 2px solid color-mix(in srgb, var(--aqua) 72%, white);
  border-radius: 50%;
  animation: motion-miss-bubble .48s ease-out both;
}

.motion-miss-bubble:nth-child(3) { margin-left: -30px; animation-delay: 40ms; }
.motion-miss-bubble:nth-child(4) { margin-left: 28px; animation-delay: 90ms; }
.motion-miss-bubble:nth-child(5) { margin-left: -52px; animation-delay: 120ms; }

.motion-hint-glow {
  display: grid;
  width: 74px;
  height: 74px;
  place-items: center;
  border: 1px solid #fff9;
  border-radius: 50%;
  background: #ffffffa8;
  color: var(--gold);
  font-size: 2rem;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 30%, transparent);
  animation: motion-hint-glow .65s ease-out both;
}

.motion-nudge--incorrect {
  animation: motion-wrong-nudge .38s ease-out;
}

.motion-nudge--invalid {
  animation: motion-invalid-wobble .32s ease-out;
}

.motion-state--incorrect .silhouette-frame,
.motion-state--incorrect #photo-reveal-image,
.motion-state--incorrect .clue-stack {
  animation: motion-fish-flinch .42s ease-out;
}

/* Completion card choreography follows the outcome instead of treating every result alike. */
.completion-card-v2[data-outcome="success"] .completion-reward h2 {
  animation: motion-heading-catch .58s var(--motion-spring) .08s both;
}

.completion-card-v2[data-outcome="success"] .completion-fish-hero {
  animation: motion-photo-surface .62s var(--motion-smooth) .12s both;
}

.completion-card-v2[data-outcome="success"] .completion-primary-stats,
.completion-card-v2[data-outcome="success"] .completion-share-primary {
  animation: motion-card-rise .48s var(--motion-smooth) .2s both;
}

.completion-card-v2[data-outcome="failure"] .completion-reward h2 {
  animation: motion-heading-drift .5s var(--motion-smooth) both;
}

.completion-card-v2[data-outcome="failure"] .completion-fish-hero {
  animation: motion-photo-focus .6s ease-out .08s both;
}

@keyframes motion-logo-swim {
  0%, 100% { transform: translateX(0) rotate(0); }
  35% { transform: translateX(3px) rotate(-5deg); }
  70% { transform: translateX(-2px) rotate(3deg); }
}

@keyframes motion-button-ripple {
  to { opacity: 0; transform: scale(7); }
}

@keyframes motion-control-spin {
  50% { transform: rotate(18deg) scale(1.08); }
}

@keyframes motion-bubble-drift {
  0%, 100% { opacity: .55; transform: translate(0, 0) scale(.9); }
  45% { opacity: .9; transform: translate(4px, -12px) scale(1.08); }
  70% { transform: translate(-3px, -7px) scale(1); }
}

@keyframes motion-water-breathe {
  from { transform: translateX(-1.5%) rotate(-4deg); }
  to { transform: translateX(1.5%) rotate(-2deg) scaleY(1.05); }
}

@keyframes motion-seal-pop {
  from { opacity: 0; transform: scale(.45) rotate(-16deg); }
  70% { transform: scale(1.1) rotate(4deg); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-progress-glint {
  0%, 62% { transform: translateX(-120%); }
  88%, 100% { transform: translateX(120%); }
}

@keyframes motion-success-wash {
  from { opacity: 0; transform: scale(.65); }
  35% { opacity: 1; }
  to { opacity: 0; transform: scale(1.18); }
}

@keyframes motion-failure-wash {
  from { opacity: 0; transform: translateX(-12%); }
  35% { opacity: 1; }
  to { opacity: 0; transform: translateX(12%); }
}

@keyframes motion-catch-arrive {
  from { opacity: 0; transform: translateY(30px) scale(.55) rotate(-8deg); }
  65% { opacity: 1; transform: translateY(-5px) scale(1.06) rotate(2deg); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-catch-fade {
  from { opacity: 0; transform: scale(.85); }
  30% { opacity: .95; }
  to { opacity: 0; transform: scale(1.04); }
}

@keyframes motion-fish-caught {
  from { opacity: 0; transform: translateX(-42px) rotate(-8deg); }
  60% { opacity: 1; transform: translateX(5px) rotate(3deg); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-fish-escape {
  0% { opacity: 1; transform: translateX(0) rotate(0); }
  22% { transform: translateX(-12px) rotate(-7deg); }
  100% { opacity: 0; transform: translateX(190px) rotate(5deg) scale(.78); }
}

@keyframes motion-spark {
  0% { opacity: 0; transform: translate(0, 0) scale(.35) rotate(0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--spark-x), var(--spark-y)) scale(1.1) rotate(160deg); }
}

@keyframes motion-escape-bubble {
  from { opacity: 0; transform: translate(22px, 6px) scale(.6); }
  30% { opacity: .9; }
  to { opacity: 0; transform: translate(-65px, -54px) scale(1.2); }
}

@keyframes motion-miss-ripple {
  from { opacity: .9; transform: scale(.45); }
  to { opacity: 0; transform: scale(3.3); }
}

@keyframes motion-miss-bubble {
  from { opacity: .9; transform: translateY(8px) scale(.7); }
  to { opacity: 0; transform: translateY(-54px) scale(1.2); }
}

@keyframes motion-hint-glow {
  from { opacity: 0; transform: scale(.6) rotate(-14deg); box-shadow: 0 0 0 0 color-mix(in srgb, var(--gold) 35%, transparent); }
  45% { opacity: 1; transform: scale(1.05) rotate(4deg); box-shadow: 0 0 0 22px transparent; }
  to { opacity: 0; transform: scale(1); }
}

@keyframes motion-wrong-nudge {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-7px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-2px); }
}

@keyframes motion-invalid-wobble {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-4px); }
  60% { transform: translateX(4px); }
}

@keyframes motion-fish-flinch {
  0%, 100% { transform: translateX(0); filter: none; }
  35% { transform: translateX(-5px); filter: saturate(.7); }
  70% { transform: translateX(3px); }
}

@keyframes motion-heading-catch {
  from { opacity: 0; transform: translateY(16px) scale(.92); }
  70% { opacity: 1; transform: translateY(-2px) scale(1.025); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-photo-surface {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-card-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-heading-drift {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes motion-photo-focus {
  from { opacity: .35; filter: blur(4px); transform: scale(1.02); }
  to { opacity: 1; filter: none; transform: none; }
}

@media (max-width: 640px) {
  .motion-catch-core { width: 88px; }
  .motion-sparks { transform: scale(.72); }
}

@media (prefers-reduced-motion: reduce) {
  .fishdle-feedback,
  .motion-button-ripple {
    display: none !important;
  }
}

.reduce-motion .fishdle-feedback,
.reduce-motion .motion-button-ripple {
  display: none !important;
}