/* ============================================================================
   JUICE v1 — motion & interaction layer (approved by Tim 2026-07-02).
   House rules (see docs/frontend_style_guide.md → Motion):
     1. Motion is INPUT-TRIGGERED (hover/press/click/arrival) — NEVER
        scroll-driven. No parallax, no scroll-jacking, ever.
     2. Everything lives inside prefers-reduced-motion: no-preference.
     3. Entrances are one-shot; ambient loops are subtle and few.
   Per-game glow colors come from content JSON via --glow/--edge inline vars
   set in MediumGameInfoBox/LargeGameModule.
   ========================================================================= */

/* Cross-document view transitions: normal MPA navigation, the browser
   morphs elements that share a view-transition-name across pages
   (gallery card -> game page banner). Progressive enhancement only. */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {

  /* ------------------------------------------------------------------ */
  /* Lab 01 — squash & stretch                                          */
  /* ------------------------------------------------------------------ */
  button {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  button:active {
    transform: translateY(2px) scale(0.96, 0.93);
  }
  .special:hover,
  .learn-more:hover,
  .email:hover,
  .support:hover,
  .twitter:hover,
  .facebook:hover,
  .button.blue:hover {
    transform: translateY(-2px) scale(1.03);
  }
  .appstore-buttons a img {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .appstore-buttons a:hover img {
    transform: translateY(-2px) scale(1.04);
  }
  .appstore-buttons a:active img {
    transform: scale(0.95);
  }

  /* ------------------------------------------------------------------ */
  /* Lab 02 — card lift, brand glow, icon pop, PLAY chip                */
  /* ------------------------------------------------------------------ */
  .medium-game-info-box,
  .large-game-module {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
  }
  .medium-game-info-box:hover,
  .medium-game-info-box:focus-within,
  .large-game-module:hover,
  .large-game-module:focus-visible {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 22px 44px -12px var(--glow, var(--tether-alpha-azure-radiance)),
                0 0 0 1.5px var(--edge, var(--tether-azure-radiance));
    z-index: 2;
  }
  .medium-game-info-box img.icon,
  .large-game-module img.corner-icon {
    transition: transform 0.3s cubic-bezier(0.34, 1.8, 0.64, 1);
  }
  .medium-game-info-box:hover img.icon {
    transform: translateY(-7px) scale(1.16) rotate(-5deg);
  }
  .large-game-module:hover img.corner-icon {
    transform: translateY(-6px) scale(1.14) rotate(5deg);
  }

  /* ------------------------------------------------------------------ */
  /* Lab 04 — one-shot entrance stagger (added by juice.js on arrival)  */
  /* ------------------------------------------------------------------ */
  [data-stagger] > * {
    opacity: 0;
  }
  [data-stagger].juice-in > * {
    animation: juiceRiseIn 0.5s cubic-bezier(0.2, 1.2, 0.4, 1) both;
    animation-delay: calc(var(--juice-i, 0) * 60ms);
  }
  @keyframes juiceRiseIn {
    from { opacity: 0; transform: translateY(14px) scale(0.97); }
    to   { opacity: 1; transform: none; }
  }
  /* after the entrance has played, freeze it — otherwise display toggles
     (category filtering) restart the animation on re-shown cards */
  [data-stagger].juice-done > * {
    animation: none;
    opacity: 1;
  }

  /* ------------------------------------------------------------------ */
  /* Lab 07 — the delight layer                                         */
  /* ------------------------------------------------------------------ */
  .game-menu .game-icon {
    transition: transform 0.2s ease;
  }
  .game-menu a:hover .game-icon {
    animation: juiceWiggle 0.45s ease-in-out;
  }
  @keyframes juiceWiggle {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-7deg) scale(1.1); }
    60%      { transform: rotate(6deg) scale(1.08); }
  }
  .down-arrow a {
    display: inline-block;
    animation: juiceBob 2.2s ease-in-out infinite;
  }
  @keyframes juiceBob {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(7px); }
  }

  /* Lab 05 — chips get the exact same squash/hover as primary buttons */
  .cat-chip {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .cat-chip:hover { transform: translateY(-2px) scale(1.03); }
}

/* Outside the media query: stagger targets must stay visible when
   reduced-motion is on (they never get .juice-in). */
@media (prefers-reduced-motion: reduce) {
  [data-stagger] > * { opacity: 1; }
}

/* ---------------------------------------------------------------------- */
/* Static styles (not motion): PLAY chip + category chips                 */
/* ---------------------------------------------------------------------- */
.medium-game-info-box { position: relative; }

.category-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 6px auto 26px;
  max-width: 720px;
}
.cat-chip {
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: var(--tether-periwinkle);
  background: var(--tether-lucky-point);
  border: 1.5px solid var(--tether-east-bay);
  border-radius: 999px;
  padding: 8px 22px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
}
.cat-chip:hover { border-color: var(--tether-azure-radiance); }
.cat-chip.on {
  background: var(--tether-azure-radiance);
  border-color: var(--tether-azure-radiance);
  color: #fff;
}
.cat-chip:focus-visible { outline: 2px solid var(--tether-azure-radiance); outline-offset: 2px; }

/* ---------------------------------------------------------------------- */
/* Large game module corner icon (paired with hover pop above)            */
/* ---------------------------------------------------------------------- */
.large-game-module { position: relative; }
.large-game-module img.corner-icon {
  position: absolute;
  top: 14px;
  left: 14px;
  width: 64px;
  height: 64px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}

/* ---------------------------------------------------------------------- */
/* About page: employee cards (Juice v1.1 — QA round 2026-07-03)          */
/* ---------------------------------------------------------------------- */
.employees-wrapper .employee {
  /* match .card-wrapper's 10px radius so the hover glow ring follows the
     visible corners (QA 2026-07-03) */
  border-radius: 10px;
}
.employees-wrapper .rollover .padding {
  padding: 22px 18px 18px !important; /* beats the legacy inline padding:0 */
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.employees-wrapper .rollover .fr-view {
  padding: 0 !important;
}
.employees-wrapper .rollover .tags {
  margin: 0 !important;
  padding: 0 !important;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

@media (prefers-reduced-motion: no-preference) {
  .employees-wrapper .employee {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.25s ease;
  }
  .employees-wrapper .employee:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 18px 36px -12px var(--glow, var(--tether-alpha-azure-radiance)),
                0 0 0 1.5px var(--edge, var(--tether-azure-radiance));
  }
  .employees-wrapper img.portrait {
    transition: transform 0.3s cubic-bezier(0.34, 1.8, 0.64, 1);
  }
  .employees-wrapper .employee:hover img.portrait {
    transform: scale(1.08) rotate(-3deg);
  }
  .employees-wrapper .rollover {
    transform: translateY(8px);
    transition: transform 0.25s cubic-bezier(0.2, 1.2, 0.4, 1), opacity 0.25s ease;
  }
  .employees-wrapper .employee:hover .rollover {
    transform: none;
  }
  .employees-wrapper .rollover .tags span {
    transition: transform 0.25s cubic-bezier(0.34, 1.8, 0.64, 1);
    transform: scale(0.9);
  }
  .employees-wrapper .employee:hover .rollover .tags span {
    transform: none;
  }
}

#juice-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
}