/* hijinxcollective.com: only what Webflow cannot do natively (keyframes, hook states, reduced motion).
   Everything else is native Webflow styling. Elements opt in with data-hx-* attributes, never classes. */

@keyframes hx-iri { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes hx-marquee { to { transform: translateX(-50%); } }
@keyframes hx-float {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(6%, -8%, 0) scale(1.08); }
  66% { transform: translate3d(-5%, 6%, 0) scale(0.95); }
}
@keyframes hx-spin { to { transform: rotate(360deg); } }
@keyframes hx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Looping motion, chosen per element: data-hx-anim="iri|float|spin|bob"; --hx-dur overrides the speed. */
[data-hx-anim="iri"] { background-size: 300% 300%; animation: hx-iri var(--hx-dur, 8s) ease infinite; }
[data-hx-anim="float"] { animation: hx-float var(--hx-dur, 16s) ease-in-out infinite; }
[data-hx-anim="spin"] { animation: hx-spin var(--hx-dur, 12s) linear infinite; }
[data-hx-anim="bob"] { animation: hx-bob var(--hx-dur, 2.4s) ease-in-out infinite; }

/* Marquee ribbon: the track holds one group; hijinx.js clones it once for a seamless loop. */
[data-hx-marquee] { display: flex; width: max-content; animation: hx-marquee var(--hx-dur, 40s) linear infinite; }
[data-hx-marquee] > * { flex: none; }

/* Jumping headline letters (fine pointer only; hijinx.js does the splitting). */
.hx-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.hx-word { display: inline-block; white-space: nowrap; }
.hx-letter { display: inline-block; transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1); will-change: transform; }

/* Goo: metaball filter where it runs well, plain soft color fields where it does not. */
:where([data-hx-goo]) { position: relative; }
[data-hx-goo]:not([data-hx-static]) { filter: url(#hx-goo); }
[data-hx-goo][data-hx-static] > * { filter: blur(40px); }
.hx-goo-cursor {
  transition: opacity 0.4s ease;
  position: absolute; left: 0; top: 0; width: 14rem; height: 14rem; margin: -7rem 0 0 -7rem;
  border-radius: 50%; background: var(--hx-goo-cursor, #ff5fb8); pointer-events: none;
}

/* Wobble on hover: mouse only, motion allowed. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-hx-wobble]:hover { filter: url(#hx-wobble); }
}

/* City guide place cards: live Google details stay hidden until hijinx.js fills them. */
[data-hx-place]:not([data-hx-filled]),
[data-hx-place-link]:not([data-hx-filled]),
[data-hx-place-attribution]:not([data-hx-filled]) { display: none !important; }

/* Live Google photos (Tulum things to do). The frame is a Webflow div that sets the size and its gradient;
   hijinx.js puts the image and its required credit inside. Until then the gradient drifts. */
[data-hx-place-photo] { position: relative; overflow: hidden; background-size: 300% 300%; }
[data-hx-place-photo]:not([data-hx-filled]) { animation: hx-iri 6s ease infinite; }
[data-hx-place-photo] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hx-photo-credit {
  position: absolute; right: 0.5rem; bottom: 0.5rem; max-width: calc(100% - 1rem); margin: 0;
  padding: 0.125rem 0.5rem; border-radius: 999px; background: rgba(13, 4, 17, 0.62); color: #fff;
  font-size: 0.6875rem; line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hx-photo-credit a { color: inherit; text-decoration: underline; }
[data-hx-place-gallery] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
[data-hx-place-gallery]:not([data-hx-filled]) { display: none; }
.hx-gallery-item { position: relative; margin: 0; overflow: hidden; border-radius: 0.75rem; aspect-ratio: 4 / 3; }
.hx-gallery-item:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
.hx-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Show page: calendar and directions links stay hidden until hijinx.js can build them. */
[data-hx-calendar-link]:not([data-hx-filled]),
[data-hx-map]:not([data-hx-filled]) { display: none !important; }

/* The melt canvas sits exactly over its photo; the root is its positioning context. */
:where([data-hx-melt]) { position: relative; }
.hx-melt-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  [data-hx-anim], [data-hx-marquee], [data-hx-goo] > *, [data-hx-place-photo] { animation: none !important; }
  .hx-letter { transition: none; transform: none !important; }
}