/* ═══════════════════════════════════════════════════════
   DrawTheDay — result-card transitions + clean-start layout.
   The spin result is the ONLY info box; it animates OUT then a new
   one animates IN on every spin. A DIFFERENT transition per screen
   type (4 total): mobile · tablet · desktop · 4K.
   ═══════════════════════════════════════════════════════ */

/* Drive the card purely via JS-applied .card-enter / .card-exit */
.activity-card { animation: none; }
.activity-card.card-exit { pointer-events: none; }

/* ── DEFAULT = DESKTOP (1024–2559px): 3D flip-down ── */
@keyframes cardInDesktop {
    from { opacity: 0; transform: perspective(1200px) rotateX(-34deg) translateY(-12px); }
    to   { opacity: 1; transform: perspective(1200px) rotateX(0) translateY(0); }
}
@keyframes cardOutDesktop {
    from { opacity: 1; transform: perspective(1200px) rotateX(0) translateY(0); }
    to   { opacity: 0; transform: perspective(1200px) rotateX(26deg) translateY(10px); }
}
.card-enter { animation: cardInDesktop 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: top center; }
.card-exit  { animation: cardOutDesktop 0.34s cubic-bezier(0.4, 0, 1, 1) both; transform-origin: top center; }

/* ── MOBILE (≤599px): slide up + fade ── */
@keyframes cardInMobile  { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cardOutMobile { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(48px); } }
@media (max-width: 599px) {
    .card-enter { animation: cardInMobile 0.5s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: center; }
    .card-exit  { animation: cardOutMobile 0.3s cubic-bezier(0.4, 0, 1, 1) both; transform-origin: center; }
}

/* ── TABLET (600–1023px): pop / zoom with overshoot ── */
@keyframes cardInTablet  { 0% { opacity: 0; transform: scale(0.82); } 60% { opacity: 1; transform: scale(1.04); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cardOutTablet { from { opacity: 1; transform: scale(1); } to { opacity: 0; transform: scale(0.84); } }
@media (min-width: 600px) and (max-width: 1023px) {
    .card-enter { animation: cardInTablet 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) both; transform-origin: center; }
    .card-exit  { animation: cardOutTablet 0.3s ease-in both; transform-origin: center; }
}

/* ── 4K / ultra-wide (≥2560px): cinematic zoom + de-blur ── */
@keyframes cardIn4K  { 0% { opacity: 0; transform: scale(0.62) rotate(-3deg); filter: blur(7px); } 100% { opacity: 1; transform: scale(1) rotate(0); filter: blur(0); } }
@keyframes cardOut4K { from { opacity: 1; transform: scale(1); filter: blur(0); } to { opacity: 0; transform: scale(1.14); filter: blur(5px); } }
@media (min-width: 2560px) {
    .card-enter { animation: cardIn4K 0.72s cubic-bezier(0.16, 1, 0.3, 1) both; transform-origin: center; }
    .card-exit  { animation: cardOut4K 0.42s cubic-bezier(0.4, 0, 1, 1) both; transform-origin: center; }
}

@media (prefers-reduced-motion: reduce) {
    .card-enter, .card-exit { animation: none !important; filter: none !important; }
}

/* ── City page: clean start + "Browse all" reveal ── */
.browse-toggle-wrap { display: flex; justify-content: center; margin-top: 2.5rem; }
.browse-toggle {
    appearance: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 0.92rem;
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--text); background: color-mix(in oklch, var(--card-bg) 80%, transparent);
    border: 1px solid var(--card-border); border-radius: 999px; padding: 0.6rem 1.3rem;
    transition: border-color 0.16s, background 0.16s, transform 0.16s;
}
.browse-toggle:hover { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 12%, transparent); transform: translateY(-1px); }
.browse-toggle .bt-caret { display: inline-block; transition: transform 0.22s ease; }
.browse-toggle.open .bt-caret { transform: rotate(180deg); }
.browse-wrap { margin-top: 2rem; }
.browse-wrap[hidden] { display: none; }