/* =========================================================================
   Reisenest – verspieltes Designsystem
   Maskottchen: 🦦 Otter = Julius · 🦊 Fuchs = Alina · 🕊️ Fedi (Taube) = Schiedsrichter · 🐱 Katze = Deko
   ========================================================================= */

:root {
  --paper:#FFF8F0; --card:#FFFDF9; --section:#FFF1E6; --border:#EEDFD3;
  --otter:#3FB0A0; --otter-strong:#2E9384; --otter-tint:#D2F0EA;   /* Julius */
  --fox:#FF8A4C;   --fox-strong:#F4702A;   --fox-tint:#FFE3D0;      /* Alina  */
  --dove:#79B4E0;  --dove-strong:#4E92C9;  --dove-tint:#DCEBFA;     /* Fedi   */
  --cat:#FF6FA5;   --cat-tint:#FFD9E6;                              /* Deko   */
  --gold:#FFC94D;  --gold-strong:#F5B228;
  --mint:#67C99A;  --mint-tint:#D6F5E6;
  --coral:#F2685F; --coral-tint:#FFD9D6;
  --ink:#4A3B34; --body:#5C4D44; --muted:#9A8B82;
  --shadow:0 4px 14px rgba(74,59,52,.08), 0 1px 3px rgba(74,59,52,.06);
  --shadow-lg:0 10px 30px rgba(74,59,52,.14), 0 3px 8px rgba(74,59,52,.08);
  --r-card:22px; --r-btn:16px; --r-pill:999px; --r-input:12px;
  --accent:var(--fox); --accent-strong:var(--fox-strong);
  --font-display:'Fredoka', system-ui, sans-serif;
  --font-body:'Nunito', system-ui, sans-serif;
  --font-hand:'Caveat', cursive;
}

[data-theme="dark"] {
  --paper:#2B2420; --card:#362E29; --section:#3A322C; --border:#4A3F38;
  --otter:#5FC4B5; --otter-tint:#234540; --fox:#FF9D66; --fox-tint:#4A3322;
  --dove:#8FC0E8; --dove-tint:#27384A; --cat:#FF87B4; --cat-tint:#4A2A38;
  --mint-tint:#26402F; --coral-tint:#43262a; --gold:#FFD66B;
  --ink:#F3E8DE; --body:#E7DCCF; --muted:#B3A496;
  --shadow:0 4px 16px rgba(0,0,0,.35); --shadow-lg:0 12px 34px rgba(0,0,0,.45);
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body {
  margin:0; font-family:var(--font-body); color:var(--body);
  background:var(--paper);
  background-image:
    radial-gradient(circle at 12% -5%, var(--fox-tint) 0, transparent 38%),
    radial-gradient(circle at 92% 4%, var(--dove-tint) 0, transparent 34%);
  background-attachment:fixed;
  line-height:1.5; min-height:100vh;
  padding-bottom:84px; /* Platz für Bottom-Nav */
}
h1,h2,h3,h4 { font-family:var(--font-display); color:var(--ink); font-weight:600; margin:0 0 .4em; line-height:1.15; }
a { color:var(--otter-strong); text-decoration:none; }
img { max-width:100%; }
.muted { color:var(--muted); }
.container { max-width:920px; margin:0 auto; padding:16px; }
.center { text-align:center; }
.hidden { display:none !important; }

/* -------------------------------------------------------------- Topbar */
.topbar {
  position:sticky; top:0; z-index:50; backdrop-filter:blur(8px);
  background:color-mix(in srgb, var(--paper) 86%, transparent);
  border-bottom:1px solid var(--border);
}
.topbar-in { max-width:920px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px; }
.brand { display:flex; align-items:center; gap:9px; font-family:var(--font-display); font-weight:600; font-size:1.2rem; color:var(--ink); }
.brand img { width:30px; height:30px; }
.brand small { display:block; font-family:var(--font-body); font-weight:600; font-size:.7rem; color:var(--muted); margin-top:-3px; }
.topbar-spacer { flex:1; }

/* Maskottchen-Avatar */
.mascot { display:inline-block; vertical-align:middle; }
.avatar {
  width:38px; height:38px; border-radius:50%; background:var(--card);
  border:2.5px solid var(--border); box-shadow:var(--shadow);
  display:inline-flex; align-items:center; justify-content:center; position:relative;
}
.avatar img { width:74%; height:74%; }
.avatar.otter { border-color:var(--otter); background:var(--otter-tint); }
.avatar.fox   { border-color:var(--fox);   background:var(--fox-tint); }
.avatar.dove  { border-color:var(--dove);  background:var(--dove-tint); }
.avatar.cat   { border-color:var(--cat);   background:var(--cat-tint); }
.avatar.sm { width:26px; height:26px; border-width:2px; }
.avatar.lg { width:64px; height:64px; }
.avatar .dot { position:absolute; right:-1px; bottom:-1px; width:11px; height:11px; border-radius:50%; background:var(--mint); border:2px solid var(--paper); }

.who-switch { display:flex; gap:6px; align-items:center; }
.who-switch button {
  border:none; background:transparent; cursor:pointer; padding:0; border-radius:50%;
  opacity:.45; transition:opacity .15s, transform .15s; filter:grayscale(.4);
}
.who-switch button.active { opacity:1; filter:none; transform:scale(1.05); }
.who-switch button:hover { opacity:.85; }

/* -------------------------------------------------------------- Buttons */
.btn {
  font-family:var(--font-display); font-weight:600; font-size:1rem;
  border:none; border-radius:var(--r-pill); padding:11px 20px; cursor:pointer;
  background:var(--card); color:var(--ink); box-shadow:var(--shadow);
  display:inline-flex; align-items:center; gap:8px; transition:transform .08s, box-shadow .15s, filter .15s;
  text-decoration:none; line-height:1;
}
.btn:hover { filter:brightness(1.03); }
.btn:active { transform:translateY(2px); }
.btn-primary { background:var(--accent); color:#fff; box-shadow:0 4px 0 var(--accent-strong), var(--shadow); }
.btn-primary:active { box-shadow:0 1px 0 var(--accent-strong); }
.btn-otter { background:var(--otter); color:#fff; box-shadow:0 4px 0 var(--otter-strong), var(--shadow); }
.btn-fox   { background:var(--fox);   color:#fff; box-shadow:0 4px 0 var(--fox-strong), var(--shadow); }
.btn-ghost { background:transparent; box-shadow:none; border:2px solid var(--border); }
.btn-soft  { background:var(--section); box-shadow:none; }
.btn-sm { padding:7px 14px; font-size:.9rem; }
.btn-icon { padding:9px; border-radius:50%; width:40px; height:40px; justify-content:center; }
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-danger { color:var(--coral); }

.fab {
  position:fixed; right:18px; bottom:96px; z-index:40;
  width:60px; height:60px; border-radius:50%; font-size:1.8rem;
  background:var(--fox); color:#fff; box-shadow:0 6px 0 var(--fox-strong), var(--shadow-lg);
  border:none; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .1s;
}
.fab:active { transform:translateY(3px); box-shadow:0 3px 0 var(--fox-strong); }

/* -------------------------------------------------------------- Cards */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow); padding:18px; }
.card-pad { padding:18px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); }

.loc-card {
  background:var(--card); border:1px solid var(--border); border-radius:var(--r-card);
  box-shadow:var(--shadow); overflow:hidden; position:relative; cursor:pointer;
  transition:transform .14s, box-shadow .14s; display:flex; flex-direction:column;
}
.loc-card:hover { transform:translateY(-4px) rotate(-.4deg); box-shadow:var(--shadow-lg); }
.loc-cover { aspect-ratio:16/10; background:var(--section); position:relative; overflow:hidden; }
.loc-cover img { width:100%; height:100%; object-fit:cover; }
.loc-cover .placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.6rem; opacity:.5; }
.loc-body { padding:12px 14px 14px; flex:1; display:flex; flex-direction:column; gap:6px; }
.loc-title { font-family:var(--font-display); font-weight:600; color:var(--ink); font-size:1.05rem; }
.loc-meta { display:flex; gap:8px; flex-wrap:wrap; align-items:center; font-size:.82rem; color:var(--muted); }
.loc-foot { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:6px; }

.crown-badge { position:absolute; top:8px; left:8px; font-size:1.5rem; filter:drop-shadow(0 2px 3px rgba(0,0,0,.25)); animation:bob 3s ease-in-out infinite; }

/* Score-Badge (Kreis) */
.score-badge {
  --v:0; width:46px; height:46px; border-radius:50%; flex:none;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display);
  font-weight:600; color:#fff; font-size:1.05rem; box-shadow:var(--shadow);
  background:conic-gradient(var(--sc,#67C99A) calc(var(--v)*36deg), var(--border) 0);
  position:relative;
}
.score-badge span { width:78%; height:78%; border-radius:50%; background:var(--sc,#67C99A); display:flex; align-items:center; justify-content:center; }
.score-badge.empty { background:var(--section); }
.score-badge.empty span { background:var(--section); color:var(--muted); }
.score-badge.sm { width:34px; height:34px; font-size:.8rem; }

.partner-scores { display:flex; gap:6px; }
.mini-score { display:flex; align-items:center; gap:3px; font-size:.78rem; font-weight:700; padding:2px 7px 2px 3px; border-radius:var(--r-pill); background:var(--section); }
.mini-score .avatar { width:20px; height:20px; border-width:1.5px; }

/* -------------------------------------------------------------- Pills / Chips / Tags */
.pill { display:inline-flex; align-items:center; gap:5px; padding:4px 11px; border-radius:var(--r-pill); font-size:.78rem; font-weight:700; background:var(--section); color:var(--body); }
.pill.wishlist { background:var(--dove-tint); color:var(--dove-strong); }
.pill.booked   { background:var(--mint-tint); color:#2f8a63; }
.pill.visited  { background:var(--gold); color:#7a5a12; }
.pill.rejected { background:var(--coral-tint); color:#b23b34; }
.tag { display:inline-flex; padding:3px 10px; border-radius:var(--r-pill); font-size:.74rem; font-weight:700; background:var(--cat-tint); color:#b23c70; }
.diverge-dot { width:10px; height:10px; border-radius:50%; background:var(--coral); display:inline-block; box-shadow:0 0 0 3px var(--coral-tint); }

.chips { display:flex; gap:8px; flex-wrap:wrap; }
.chip {
  border:2px solid var(--border); background:var(--card); color:var(--body);
  padding:6px 13px; border-radius:var(--r-pill); font-weight:700; font-size:.85rem; cursor:pointer;
  text-decoration:none; transition:all .12s; display:inline-flex; align-items:center; gap:6px;
}
.chip.active { background:var(--accent); color:#fff; border-color:var(--accent); }
.chip:hover { border-color:var(--accent); }

/* -------------------------------------------------------------- Forms */
label { font-weight:700; color:var(--ink); font-size:.9rem; display:block; margin-bottom:5px; }
input[type=text], input[type=url], input[type=number], input[type=date], input[type=password], select, textarea {
  width:100%; padding:11px 13px; border:2px solid var(--border); border-radius:var(--r-input);
  background:var(--card); color:var(--ink); font-family:var(--font-body); font-size:1rem; transition:border-color .15s;
}
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--accent); }
textarea { resize:vertical; min-height:80px; }
.field { margin-bottom:15px; }
.row { display:flex; gap:12px; flex-wrap:wrap; }
.row > .field { flex:1; min-width:130px; }

/* Pfötchen-Slider */
.crit-row { display:grid; grid-template-columns:120px 1fr 42px; gap:12px; align-items:center; margin-bottom:14px; }
.crit-label { font-weight:700; color:var(--ink); font-size:.92rem; }
.crit-label .w { color:var(--muted); font-weight:600; font-size:.72rem; }
input[type=range].paw {
  -webkit-appearance:none; appearance:none; width:100%; height:12px; border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--coral),var(--gold),var(--mint)); outline:none; cursor:pointer;
}
input[type=range].paw::-webkit-slider-thumb {
  -webkit-appearance:none; width:30px; height:30px; border-radius:50%; cursor:grab;
  background:var(--card) center/64% no-repeat; border:3px solid var(--accent); box-shadow:var(--shadow);
  background-image:url("/static/img/stickers/heart.svg");
}
input[type=range].paw::-moz-range-thumb {
  width:28px; height:28px; border-radius:50%; cursor:grab; border:3px solid var(--accent);
  background:var(--card) center/64% no-repeat; background-image:url("/static/img/stickers/heart.svg");
}
.crit-val { font-family:var(--font-display); font-weight:600; font-size:1.15rem; color:var(--ink); text-align:center; transition:transform .12s; }
.crit-val.pop { transform:scale(1.4); }
.crit-row .who-pin { display:flex; gap:3px; }

/* Score-Breakdown-Balken (Detail) */
.bd-row { margin-bottom:11px; }
.bd-head { display:flex; justify-content:space-between; font-size:.85rem; font-weight:700; color:var(--ink); margin-bottom:4px; }
.bd-bars { display:flex; flex-direction:column; gap:3px; }
.bd-bar { height:13px; border-radius:var(--r-pill); background:var(--section); position:relative; overflow:hidden; }
.bd-bar i { position:absolute; left:0; top:0; bottom:0; border-radius:var(--r-pill); display:block; }
.bd-bar.otter i { background:var(--otter); }
.bd-bar.fox i { background:var(--fox); }
.bd-bar b { position:absolute; right:6px; top:50%; transform:translateY(-50%); font-size:.68rem; color:#fff; font-weight:800; }

/* -------------------------------------------------------------- Pro/Contra */
.pc-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media(max-width:560px){ .pc-cols{ grid-template-columns:1fr; } }
.pc-col h4 { display:flex; align-items:center; gap:6px; }
.pc-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.pc-item { display:flex; gap:8px; align-items:flex-start; background:var(--section); border-radius:14px; padding:9px 11px; position:relative; }
.pc-item.pro { background:var(--mint-tint); }
.pc-item.con { background:var(--coral-tint); }
.pc-item .x { margin-left:auto; opacity:.4; cursor:pointer; background:none; border:none; font-size:1rem; }
.pc-item .x:hover { opacity:.9; }

/* -------------------------------------------------------------- Kommentare (Handschrift) */
.comment { display:flex; gap:10px; margin-bottom:12px; align-items:flex-start; }
.comment .bubble { background:var(--section); border-radius:16px; padding:9px 13px; position:relative; flex:1; }
.comment .bubble .txt { font-family:var(--font-hand); font-size:1.25rem; color:var(--ink); line-height:1.25; }
.comment .bubble .meta { font-size:.7rem; color:var(--muted); margin-top:2px; }
.comment.mine .bubble { background:var(--fox-tint); }

/* -------------------------------------------------------------- Reaktionen */
.react-strip { display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:6px; }
.react-chip {
  display:inline-flex; align-items:center; gap:3px; padding:2px 8px 2px 3px; border-radius:var(--r-pill);
  background:var(--card); border:1.5px solid var(--border); box-shadow:var(--shadow); font-size:.8rem; cursor:pointer;
  transition:transform .1s; animation:pop-in .3s cubic-bezier(.3,1.5,.5,1);
}
.react-chip:hover { transform:scale(1.06); }
.react-chip img.r { width:22px; height:22px; }
.react-chip img.thumb { width:30px; height:30px; border-radius:7px; object-fit:cover; }
.react-chip .avatar { width:16px; height:16px; border-width:1.5px; }
.react-add {
  width:30px; height:30px; border-radius:50%; border:1.5px dashed var(--border); background:var(--card);
  cursor:pointer; font-size:1rem; display:inline-flex; align-items:center; justify-content:center; color:var(--muted);
}
.react-add:hover { border-color:var(--fox); color:var(--fox); }

/* Reaktions-Tray */
.tray-backdrop { position:fixed; inset:0; background:rgba(40,30,25,.35); z-index:90; display:none; }
.tray-backdrop.open { display:block; }
.tray {
  position:fixed; left:50%; bottom:0; transform:translateX(-50%) translateY(100%);
  width:min(440px,100%); background:var(--card); border-radius:24px 24px 0 0; z-index:91;
  box-shadow:var(--shadow-lg); padding:16px 16px 24px; transition:transform .25s cubic-bezier(.2,.9,.3,1);
  border:1px solid var(--border); border-bottom:none;
}
.tray.open { transform:translateX(-50%) translateY(0); }
.tray h4 { display:flex; align-items:center; gap:7px; }
.sticker-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; margin:12px 0; }
@media(max-width:420px){ .sticker-grid{ grid-template-columns:repeat(5,1fr);} }
.sticker-grid button { background:var(--section); border:none; border-radius:14px; padding:8px; cursor:pointer; transition:transform .1s, background .1s; }
.sticker-grid button:hover { transform:scale(1.12) rotate(-4deg); background:var(--fox-tint); }
.sticker-grid img { width:100%; height:auto; display:block; }
.tray .upload-row { display:flex; gap:10px; align-items:center; border-top:1px dashed var(--border); padding-top:12px; }

/* -------------------------------------------------------------- Toasts */
#toasts { position:fixed; left:50%; bottom:96px; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast { background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:var(--r-pill); box-shadow:var(--shadow-lg); font-weight:700; font-size:.9rem; display:flex; align-items:center; gap:8px; animation:toast-in .3s cubic-bezier(.3,1.4,.5,1); max-width:90vw; }
.toast img { width:22px; height:22px; }

/* -------------------------------------------------------------- Bottom-Nav */
.bottom-nav {
  position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--card);
  border-top:1px solid var(--border); box-shadow:0 -3px 14px rgba(74,59,52,.07);
  display:flex; justify-content:space-around; padding:6px 4px calc(6px + env(safe-area-inset-bottom));
}
.bottom-nav a { flex:1; text-align:center; padding:6px 2px; color:var(--muted); font-size:.66rem; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:2px; border-radius:14px; }
.bottom-nav a .ic { font-size:1.35rem; line-height:1; }
.bottom-nav a.active { color:var(--fox); background:var(--fox-tint); }

/* -------------------------------------------------------------- Login */
.login-wrap { min-height:90vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:20px; gap:18px; text-align:center; }
.login-card { background:var(--card); border:1px solid var(--border); border-radius:28px; box-shadow:var(--shadow-lg); padding:26px; width:min(420px,100%); }
.who-pick { display:flex; gap:14px; justify-content:center; margin:14px 0 6px; }
.who-pick label { cursor:pointer; }
.who-pick input { position:absolute; opacity:0; }
.who-pick .opt { display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 18px; border-radius:20px; border:3px solid var(--border); transition:all .15s; background:var(--section); }
.who-pick input:checked + .opt { border-color:var(--accent); background:var(--card); transform:translateY(-3px) scale(1.03); box-shadow:var(--shadow); }
.who-pick .opt img { width:54px; height:54px; }
.who-pick .opt b { font-family:var(--font-display); color:var(--ink); }
.login-err { background:var(--coral-tint); color:#b23b34; border-radius:14px; padding:9px; font-weight:700; }

/* -------------------------------------------------------------- Tournament */
.duel-stage { position:relative; height:62vh; max-height:560px; display:flex; align-items:center; justify-content:center; }
.duel-vs { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:5; font-family:var(--font-display); font-weight:600; background:var(--gold); color:#7a5a12; width:50px; height:50px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-lg); }
.duel-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-card); box-shadow:var(--shadow-lg); overflow:hidden; width:min(360px,92%); cursor:pointer; transition:transform .12s; }
.duel-card:active { transform:scale(.98); }
.duel-card .cover { aspect-ratio:16/11; background:var(--section); overflow:hidden; }
.duel-card .cover img { width:100%; height:100%; object-fit:cover; }
.duel-card .info { padding:13px 15px; }
.duel-pair { display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; width:100%; }
@media(max-width:560px){ .duel-pair{ grid-template-columns:1fr; } }
.duel-stamp { position:absolute; top:18px; font-family:var(--font-display); font-size:1.6rem; font-weight:600; padding:6px 16px; border-radius:14px; opacity:0; transform:rotate(-12deg); z-index:6; }
.duel-stamp.yes { left:18px; color:#2f8a63; border:4px solid #2f8a63; }
.duel-stamp.no { right:18px; color:#b23b34; border:4px solid #b23b34; }

/* -------------------------------------------------------------- Krönung */
.podium { display:flex; align-items:flex-end; justify-content:center; gap:12px; margin:24px 0; }
.podium .step { display:flex; flex-direction:column; align-items:center; gap:8px; }
.podium .pad { width:92px; border-radius:18px 18px 8px 8px; background:var(--gold); display:flex; align-items:flex-end; justify-content:center; font-family:var(--font-display); font-size:2rem; color:#7a5a12; padding-bottom:8px; box-shadow:var(--shadow); }
.podium .p1 .pad { height:130px; background:var(--gold); }
.podium .p2 .pad { height:96px; background:#D9DEE3; color:#5a6470; }
.podium .p3 .pad { height:74px; background:#E8B98A; color:#7a4d24; }
.podium .ava { width:66px; height:66px; border-radius:50%; overflow:hidden; border:3px solid var(--card); box-shadow:var(--shadow); background:var(--section); }
.podium .ava img { width:100%; height:100%; object-fit:cover; }
.podium .nm { font-weight:800; font-size:.82rem; max-width:96px; text-align:center; color:var(--ink); }

/* -------------------------------------------------------------- Lightbox / Galerie */
.gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; }
.gallery .thumb { aspect-ratio:1; border-radius:14px; overflow:hidden; background:var(--section); position:relative; cursor:pointer; }
.gallery .thumb img { width:100%; height:100%; object-fit:cover; }
.lightbox { position:fixed; inset:0; background:rgba(30,22,18,.9); z-index:120; display:none; align-items:center; justify-content:center; padding:20px; }
.lightbox.open { display:flex; }
.lightbox img { max-width:100%; max-height:90vh; border-radius:14px; }

/* -------------------------------------------------------------- Map */
#map { height:calc(100vh - 150px); min-height:340px; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--shadow); }
.leaflet-popup-content-wrapper { border-radius:16px; }
.map-pop { font-family:var(--font-body); }
.map-pop b { font-family:var(--font-display); }

/* -------------------------------------------------------------- Empty / Fedi-Sprechblase */
.empty { text-align:center; padding:40px 20px; color:var(--muted); }
.empty img { width:90px; height:90px; opacity:.95; }
.fedi-say { display:flex; gap:10px; align-items:center; background:var(--dove-tint); border-radius:18px; padding:11px 15px; margin:14px 0; }
.fedi-say img { width:40px; height:40px; flex:none; }
.fedi-say .txt { font-family:var(--font-hand); font-size:1.2rem; color:var(--dove-strong); }

.section-title { display:flex; align-items:center; gap:8px; margin:20px 0 10px; }
.divider { height:1px; background:var(--border); margin:18px 0; border:none; }

/* -------------------------------------------------------------- Animationen */
@keyframes bob { 0%,100%{ transform:translateY(0) rotate(-3deg);} 50%{ transform:translateY(-5px) rotate(3deg);} }
@keyframes wiggle { 0%,100%{ transform:rotate(-5deg);} 50%{ transform:rotate(5deg);} }
@keyframes pop-in { 0%{ transform:scale(0);} 100%{ transform:scale(1);} }
@keyframes toast-in { 0%{ transform:translateY(20px); opacity:0;} 100%{ transform:translateY(0); opacity:1;} }
@keyframes bounce-in { 0%{ transform:scale(.6); opacity:0;} 60%{ transform:scale(1.08);} 100%{ transform:scale(1); opacity:1;} }
.wiggle-hover:hover { animation:wiggle .4s ease-in-out; }
.bounce-in { animation:bounce-in .4s cubic-bezier(.3,1.4,.5,1); }
.float { animation:bob 3.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.05s !important; }
}

/* View Transitions */
@view-transition { navigation:auto; }