/* The Genesis flock: original artwork in a loose, breathing composition. */
:is(.collection-page, .videos-page) .catalog-section { padding-inline: clamp(22px, 5vw, 85px); overflow: hidden; overflow: clip; }
:is(.collection-page, .videos-page) .explorer-controls { gap: 20px 40px; margin-bottom: 20px; align-items: end; }
:is(.collection-page, .videos-page) .explorer-controls label { font-size: 1rem; }
:is(.collection-page, .videos-page) .explorer-controls input { min-height: 60px; padding: 16px 24px; border: 2px solid var(--ink); border-radius: 999px; font-size: 1rem; box-shadow: 4px 4px 0 var(--yellow); }
:is(.collection-page, .videos-page) .explorer-controls p { margin: 0 0 16px; font-size: .9rem; }
.flock-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px 25px; margin: 24px 0 42px; }
.flock-toolbar > p { margin: 0; font-size: .9rem; line-height: 1.6; }
.flock-toolbar > div { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; }
.flock-wave { display: inline-flex; gap: 20px; align-items: center; min-height: 48px; padding: 10px 21px; border: 2px solid var(--ink); border-radius: 999px; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); font-weight: 700; font-size: .875rem; cursor: pointer; transition: transform .2s, box-shadow .2s; }
.flock-wave span { font-size: 1.5rem; line-height: 1; }
.flock-wave:hover { transform: rotate(-3deg) translateY(-2px); box-shadow: 5px 5px 0 var(--ink); }
.flock-wave:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.flock-wave:disabled { opacity: .45; cursor: default; box-shadow: none; transform: none; }
.flock-pause { min-height: 44px; padding: 10px 0; font-size: .875rem; border: 0; background: none; text-decoration: underline; text-underline-offset: 5px; cursor: pointer; }
:is(.collection-page, .videos-page) main :is(a, button, input):focus-visible { outline: 3px solid #6243c3; outline-offset: 6px; }
:is(.collection-page, .videos-page) .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 52px 26px; padding: 18px 0 80px; scroll-margin-top: 110px; }
:is(.collection-page, .videos-page) .flock-piece { --duck-turn: -5deg; --duck-offset: 0px; --float-turn: 1.5deg; --float-time: 5.6s; --float-delay: -1s; --mouse-x: 0px; --mouse-y: 0px; --duck-radius: 46% 54% 43% 57% / 44% 39% 61% 56%; position: relative; min-width: 0; border: 0; background: none; box-shadow: none; transform: translateY(var(--duck-offset)); transition: opacity .65s, transform .8s cubic-bezier(.16,1,.3,1); }
:is(.collection-page, .videos-page) .flock-piece:nth-child(6n + 2) { --duck-turn: 5deg; --duck-offset: 36px; --float-time: 6.7s; --float-delay: -3s; --float-turn: -2deg; --duck-radius: 54% 46% 58% 42% / 45% 53% 47% 55%; }
:is(.collection-page, .videos-page) .flock-piece:nth-child(6n + 3) { --duck-turn: -3deg; --duck-offset: 8px; --float-time: 7.3s; --float-delay: -4s; --duck-radius: 43% 57% 48% 52% / 56% 42% 58% 44%; }
:is(.collection-page, .videos-page) .flock-piece:nth-child(6n + 4) { --duck-turn: 6deg; --duck-offset: 48px; --float-time: 6.1s; --float-delay: -2s; --float-turn: -1.5deg; --duck-radius: 50% 50% 40% 60% / 40% 50% 50% 60%; }
:is(.collection-page, .videos-page) .flock-piece:nth-child(6n + 5) { --duck-turn: -6deg; --duck-offset: 4px; --float-time: 5.9s; --float-delay: -4s; --duck-radius: 55% 45% 53% 47% / 44% 57% 43% 56%; }
:is(.collection-page, .videos-page) .flock-piece:nth-child(6n) { --duck-turn: 3deg; --duck-offset: 30px; --float-time: 7s; --float-delay: -5s; --float-turn: -2deg; --duck-radius: 42% 58% 50% 50% / 51% 42% 58% 49%; }
:is(.collection-page, .videos-page) .flock-piece:hover { box-shadow: none; }
:is(.collection-page, .videos-page) .duck-trigger { isolation: isolate; cursor: pointer; aspect-ratio: 1; transform: translate3d(var(--mouse-x), var(--mouse-y), 0) rotate(var(--duck-turn)); transition: transform .5s cubic-bezier(.16,1,.3,1); border-radius: 50%; -webkit-tap-highlight-color: transparent; }
.duck-bob, .duck-art { display: block; width: 100%; height: 100%; }
.duck-art { position: relative; z-index: 1; overflow: hidden; border-radius: var(--duck-radius); transform: scale(.97); transition: transform .4s cubic-bezier(.16,1,.3,1), border-radius .8s; }
:is(.collection-page, .videos-page) .duck-art img { width: 100%; height: 100%; aspect-ratio: 1; object-fit: contain; pointer-events: none; user-select: none; }
.duck-orbit { position: absolute; z-index: -1; width: 106%; height: 85%; left: -3%; top: 8%; border: 1px solid #11111138; border-radius: 50%; transform: rotate(-22deg); transition: transform .7s, border-color .4s; }
.flock-piece:nth-child(3n + 2) .duck-orbit { width: 85%; height: 108%; left: 8%; top: -4%; transform: rotate(20deg); border-color: #8066ff70; }
.flock-piece:nth-child(3n) .duck-orbit { transform: rotate(27deg); border-style: dashed; }
.duck-trigger::after { content: ''; width: clamp(28px, 4vw, 50px); aspect-ratio: 395 / 367; background: url('/assets/rubberduckz-brand-original.png') 55.958862674% 54.761904762% / 518.481012658% 111.444141689% no-repeat; position: absolute; z-index: 2; top: -5%; left: 4%; color: #8066ff; font: 900 clamp(28px, 4vw, 50px)/1 var(--display); transform: rotate(13deg); pointer-events: none; }
.flock-piece:nth-child(2n) .duck-trigger::after { left: auto; right: -1%; top: auto; bottom: 9%; color: var(--yellow); }
.flock-piece:nth-child(3n) .duck-trigger::after { display: none; }
.duck-peek { position: absolute; z-index: 3; right: 2%; top: 5%; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--white); background: var(--ink); font-size: 1.2rem; transform: rotate(calc(0deg - var(--duck-turn))); transition: transform .3s, background .3s; pointer-events: none; }
:is(.collection-page, .videos-page) .catalog-caption { padding: 23px 2px 0; gap: 8px; align-items: start; }
:is(.collection-page, .videos-page) .catalog-caption h2 { font-size: .875rem; line-height: 1.5; font-weight: 700; }
:is(.collection-page, .videos-page) .catalog-caption > span { display: inline-block; padding: 5px 8px; flex-shrink: 0; border-radius: 50%; background: var(--yellow); font-size: .75rem; line-height: 1.4; transform: rotate(9deg); }
:is(.collection-page, .videos-page) .duck-trigger:focus-visible .duck-art { transform: scale(1.025); }
:is(.collection-page, .videos-page) .duck-trigger:active .duck-art { transform: scale(.91) rotate(-5deg); }
:is(.collection-page, .videos-page) .duck-trigger:focus-visible .duck-orbit { border-color: var(--ink); transform: rotate(5deg) scale(1.06); }
.flock-ready .flock-piece:not(.has-entered) { opacity: 0; transform: translateY(calc(var(--duck-offset) + 45px)) rotate(-8deg) scale(.92); }
.flock-ready .duck-bob { animation: duck-drift var(--float-time) ease-in-out var(--float-delay) infinite; animation-play-state: paused; }
.flock-ready .duck-in-view .duck-bob { animation-play-state: running; }
.flock-tab-hidden .duck-bob, :is(.collection-page, .videos-page).viewer-open .duck-bob, :is(.collection-page, .videos-page).menu-open .duck-bob { animation-play-state: paused !important; }
:is(.collection-page, .videos-page) .catalog-grid.flock-single { grid-template-columns: minmax(0, 390px); justify-content: center; padding-bottom: 30px; }
:is(.collection-page, .videos-page) .flock-single .flock-piece { --duck-offset: 0px; }
:is(.collection-page, .videos-page) .explorer-pagination { margin-top: 0; gap: 16px; }
:is(.collection-page, .videos-page) .explorer-pagination button { min-height: 52px; font-size: .875rem; text-transform: none; letter-spacing: 0; }
:is(.collection-page, .videos-page) .explorer-pagination span { font-size: .875rem; }
@keyframes duck-drift { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-9px) rotate(var(--float-turn)); } }
@media (hover: hover) and (pointer: fine) {
  :is(.collection-page, .videos-page) .duck-trigger:hover .duck-art { transform: scale(1.035); border-radius: 50% 50% 46% 54% / 48% 44% 56% 52%; }
  :is(.collection-page, .videos-page) .duck-trigger:hover .duck-orbit { border-color: var(--ink); transform: rotate(8deg) scale(1.06); }
  :is(.collection-page, .videos-page) .duck-trigger:hover .duck-peek { background: #6243c3; transform: translate(2px, -2px) rotate(calc(10deg - var(--duck-turn))); }
}
@media (min-width: 760px) {
  :is(.collection-page, .videos-page) .catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 65px 42px; padding-top: 28px; padding-bottom: 100px; }
  :is(.collection-page, .videos-page) .flock-piece:nth-child(3n + 2) { --duck-offset: 58px; }
  :is(.collection-page, .videos-page) .catalog-caption { padding-inline: 8px; }
  :is(.collection-page, .videos-page) .catalog-caption h2 { font-size: 1rem; }
}
@media (min-width: 1180px) {
  :is(.collection-page, .videos-page) .catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 76px 48px; }
  :is(.collection-page, .videos-page) .flock-piece:nth-child(4n + 1) { --duck-offset: 0px; }
  :is(.collection-page, .videos-page) .flock-piece:nth-child(4n + 2) { --duck-offset: 52px; }
  :is(.collection-page, .videos-page) .flock-piece:nth-child(4n + 3) { --duck-offset: 13px; }
  :is(.collection-page, .videos-page) .flock-piece:nth-child(4n) { --duck-offset: 65px; }
}
@media (max-width: 450px) {
  :is(.collection-page, .videos-page) .catalog-section { padding-inline: 22px; }
  :is(.collection-page, .videos-page) .catalog-grid { gap: 45px 23px; }
  :is(.collection-page, .videos-page) .explorer-controls { gap: 18px; }
  :is(.collection-page, .videos-page) .explorer-controls label { max-width: none; flex-basis: 100%; }
  :is(.collection-page, .videos-page) .explorer-controls p { margin: 3px 0; }
  .flock-toolbar { margin-top: 16px; margin-bottom: 32px; }
  .flock-toolbar > p { font-size: .875rem; }
  .flock-toolbar > div { width: 100%; justify-content: space-between; gap: 12px; }
  .flock-wave { padding-inline: 16px; gap: 13px; }
  :is(.collection-page, .videos-page) .catalog-caption { flex-wrap: wrap; gap: 6px; padding-top: 18px; }
  :is(.collection-page, .videos-page) .catalog-caption h2 { flex-basis: 100%; }
  :is(.collection-page, .videos-page) .catalog-caption > span { padding: 3px 7px; }
  .duck-peek { width: 30px; height: 30px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.collection-page, .videos-page) *, :is(.collection-page, .videos-page) *::before, :is(.collection-page, .videos-page) *::after { animation: none !important; transition-duration: .001ms !important; }
  .flock-ready .flock-piece:not(.has-entered) { opacity: 1; transform: translateY(var(--duck-offset)); }
}

/* Keep the original artworks as the only characters in Collection. */
.collection-page .duck-trigger::after{content:none;display:none;}