/* Discbase Bewegung (2026-10-14): ein ruhiger, einheitlicher Satz an Übergängen für Handy-Seiten (Discbase Caddy, Kalender, Turnierseite).
   Regeln: nur transform/opacity, unter 300 ms, kräftiges ease-out (fühlt sich sofort an), unterbrechbar, und alles fällt bei
   "reduzierte Bewegung" weg oder wird zu einem sanften Farbwechsel. Die Skripte dazu stehen in static/js/fd-motion.js. */
:root {
  --fd-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --fd-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --fd-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Seitenwechsel (Browser-Funktion "View Transitions", wo sie fehlt, merkt man nichts) ----------
   Kopfzeile und Tab-Leiste bleiben stehen, nur der Inhalt blendet über und schiebt je nach Richtung leicht von rechts/links herein. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .ev-top { view-transition-name: ev-top; }
  .ev-tabbar { view-transition-name: ev-tabbar; }
  .ev-tab-ind { view-transition-name: ev-tab-ind; }
  ::view-transition-group(*) { animation-duration: 240ms; animation-timing-function: var(--fd-ease-out); }
  /* Alt blendet aus, neu blendet ein - gleiche Dauer und Kurve, das Standard-Überblenden des Browsers (plus-lighter) addiert beides
     zu genau 100 %, also kein Aufheller und kein Durchscheinen des Hintergrunds. Die neue Seite schiebt dabei leicht herein. */
  ::view-transition-old(root) { animation: fd-vt-out 200ms var(--fd-ease-out) both; }
  ::view-transition-new(root) { animation: fd-vt-in 200ms var(--fd-ease-out) both; }
  html:active-view-transition-type(fd-fwd)::view-transition-new(root) { animation-name: fd-vt-in-fwd; }
  html:active-view-transition-type(fd-back)::view-transition-new(root) { animation-name: fd-vt-in-back; }
  /* Tab-Leiste kommt von der Startseite aus von unten herein und geht beim Zurück wieder nach unten */
  ::view-transition-new(ev-tabbar):only-child { animation: fd-vt-rise 260ms var(--fd-ease-out) both; }
  ::view-transition-old(ev-tabbar):only-child { animation: fd-vt-sink 160ms var(--fd-ease-out) both; }
  /* Geteilte Elemente (Turniername vom Kalender auf die Turnierseite und zurück) */
  ::view-transition-old(fd-hero-title), ::view-transition-new(fd-hero-title) { height: 100%; object-fit: contain; }
}
@keyframes fd-vt-out { to { opacity: 0; } }
@keyframes fd-vt-in { from { opacity: 0; } }
@keyframes fd-vt-in-fwd { from { opacity: 0; transform: translateX(28px); } }
@keyframes fd-vt-in-back { from { opacity: 0; transform: translateX(-28px); } }
@keyframes fd-vt-rise { from { opacity: 0; transform: translateY(100%); } }
@keyframes fd-vt-sink { to { opacity: 0; transform: translateY(100%); } }

/* Kopfzeile des Caddy: weicher Schatten, sobald der Inhalt darunter wegscrollt */
.ev-top::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: 14px; pointer-events: none; opacity: 0;
  background: linear-gradient(rgba(0, 0, 0, .22), transparent); transition: opacity 200ms var(--fd-ease-out); }
.ev-top.is-scrolled::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .ev-top::after { transition: none; } }

/* ---------- Platzhalter statt "Lädt …" ---------- */
.fd-skel { position: relative; overflow: hidden; background: var(--fd-paper-inset); border-radius: 8px; }
.fd-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--fd-paper) 75%, transparent), transparent);
  animation: fd-shimmer 1.5s var(--fd-ease-in-out) infinite; }
@keyframes fd-shimmer { to { transform: translateX(100%); } }
.fd-skel-rows { margin-top: 14px; }
.fd-skel-row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 44px 52px; gap: 10px; align-items: center; min-height: 56px; padding: 6px 4px;
  border-bottom: 1px solid var(--fd-line); }
.fd-skel-row .fd-skel { height: 14px; border-radius: 6px; }
.fd-skel-row .fd-skel.is-name { height: 16px; }
.fd-skel-card { height: 118px; margin-top: 12px; border-radius: 14px; }
@media (prefers-reduced-motion: reduce) { .fd-skel::after { animation: none; display: none; } }

/* ---------- Live-Werte: kurzes Aufleuchten und Einrollen, wenn sich eine Zahl ändert ---------- */
@keyframes fd-flash { from { background-color: var(--fd-signal-soft); } to { background-color: transparent; } }
@keyframes fd-tick { from { opacity: .15; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.fd-flash { animation: fd-flash 1.3s var(--fd-ease-out); border-radius: 6px; }
.fd-tick { animation: fd-tick 260ms var(--fd-ease-out); }
.fd-inline { display: inline-block; }
.fd-flash.fd-tick { animation: fd-tick 260ms var(--fd-ease-out), fd-flash 1.3s var(--fd-ease-out); }
@media (prefers-reduced-motion: reduce) { .fd-tick, .fd-flash.fd-tick { animation: none; } .fd-flash { animation: fd-flash 1.3s linear; } }

/* ---------- Erster Besuch der Caddy-Startseite in dieser Sitzung: Karten steigen nacheinander auf ---------- */
@keyframes fd-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .ev-intro .ev-hero, .ev-intro .ev-now, .ev-intro .ev-ann, .ev-intro .ev-tiles > * {
    animation: fd-rise 340ms var(--fd-ease-out) both; animation-delay: calc(var(--rise, 0) * 45ms); }
  .ev-intro .ev-now { --rise: 1; }
  .ev-intro .ev-tiles > :nth-child(1) { --rise: 2; } .ev-intro .ev-tiles > :nth-child(2) { --rise: 3; } .ev-intro .ev-tiles > :nth-child(3) { --rise: 4; }
  .ev-intro .ev-tiles > :nth-child(4) { --rise: 5; } .ev-intro .ev-tiles > :nth-child(5) { --rise: 6; } .ev-intro .ev-tiles > :nth-child(6) { --rise: 7; }
  .ev-intro .ev-tiles > :nth-child(7) { --rise: 8; } .ev-intro .ev-tiles > :nth-child(n+8) { --rise: 9; }
}

/* Karten, die zum ersten Mal erscheinen (Mein Tag): kurz nacheinander aufsteigen */
@media (prefers-reduced-motion: no-preference) {
  .fd-enter > * { animation: fd-rise 320ms var(--fd-ease-out) both; }
  .fd-enter > :nth-child(2) { animation-delay: 60ms; } .fd-enter > :nth-child(3) { animation-delay: 120ms; }
  .fd-enter > :nth-child(4) { animation-delay: 180ms; } .fd-enter > :nth-child(n+5) { animation-delay: 220ms; }
}

/* Hinweis "Du bist offline" fährt von oben herein statt plötzlich zu erscheinen */
@keyframes fd-drop { from { opacity: 0; transform: translateY(-10px); } }
@media (prefers-reduced-motion: no-preference) { .ev-offline:not([hidden]) { animation: fd-drop 280ms var(--fd-ease-out); } }

/* ---------- Kleine Rückmeldungen ---------- */
@keyframes fd-pop { 0% { transform: scale(.55); } 55% { transform: scale(1.28); } 100% { transform: scale(1); } }
.is-pop > i, i.is-pop { display: inline-block; animation: fd-pop 340ms var(--fd-ease-out); }
@media (prefers-reduced-motion: reduce) { .is-pop > i, i.is-pop { animation: none; } }

/* Zeitplan: Tag wechselt mit kurzem Schieben in die Richtung des Wischens */
@keyframes fd-slide-fwd { from { opacity: 0; transform: translateX(26px); } }
@keyframes fd-slide-back { from { opacity: 0; transform: translateX(-26px); } }
.ev-day.is-active.slide-fwd { animation: fd-slide-fwd 260ms var(--fd-ease-out); }
.ev-day.is-active.slide-back { animation: fd-slide-back 260ms var(--fd-ease-out); }
@media (prefers-reduced-motion: reduce) { .ev-day.is-active.slide-fwd, .ev-day.is-active.slide-back { animation: none; } }

/* ---------- Nach unten ziehen zum Aktualisieren (installierte App) ---------- */
.fd-ptr { position: fixed; left: 50%; top: 60px; z-index: 25; width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; display: grid; place-items: center;
  background: var(--fd-paper); color: var(--fd-signal); border: 1px solid var(--fd-line); box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  opacity: 0; transform: translateY(-64px); pointer-events: none; will-change: transform, opacity; }
.fd-ptr i { font-size: 18px; line-height: 1; transition: transform 200ms var(--fd-ease-out); }
.fd-ptr.is-ready i { transform: rotate(180deg); }
.fd-ptr.is-busy i { animation: fd-spin .8s linear infinite; }
.fd-ptr.is-settling { transition: transform 260ms var(--fd-ease-out), opacity 200ms var(--fd-ease-out); }
@keyframes fd-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fd-ptr.is-busy i { animation: none; } .fd-ptr i, .fd-ptr.is-settling { transition: none; } }

/* ---------- Bottom-Sheet (Handy) / Dialog (breit) ----------
   <dialog class="fd-sheet"> mit .fd-sheet-grab, .fd-sheet-head, .fd-sheet-body. Öffnen/Schließen und Ziehen steuert FdSheet in fd-motion.js. */
html.fd-sheet-open { overflow: hidden; }
dialog.fd-sheet [tabindex="-1"]:focus { outline: none; }
dialog.fd-sheet { border: 0; padding: 0; background: var(--fd-paper); color: var(--fd-ink); width: 100%; max-width: 560px; max-height: 88dvh;
  margin: auto auto 0; border-radius: 20px 20px 0 0; overflow: hidden; overscroll-behavior: contain; box-shadow: 0 -12px 44px rgba(0, 0, 0, .28); }
dialog.fd-sheet[open] { display: flex; flex-direction: column; }
dialog.fd-sheet::backdrop { background: rgba(8, 12, 18, calc(.56 * (1 - var(--sheet-p, 0)))); }
.fd-sheet-grab { flex: none; padding: 10px 0 2px; touch-action: none; cursor: grab; }
.fd-sheet-grab::before { content: ''; display: block; width: 42px; height: 4px; border-radius: 2px; background: var(--fd-line); margin: 0 auto; }
.fd-sheet-head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 6px 18px 12px; touch-action: none;
  border-bottom: 1px solid var(--fd-line); }
.fd-sheet-close { flex: none; width: 40px; height: 40px; margin: -4px -8px 0 0; border: 0; border-radius: 50%; background: transparent; color: var(--fd-slate);
  display: grid; place-items: center; font-size: 18px; cursor: pointer; touch-action: manipulation; }
.fd-sheet-close:active { background: var(--fd-paper-inset); }
.fd-sheet-close:focus-visible { outline: 2px solid var(--fd-focus); outline-offset: 2px; }
.fd-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 18px calc(18px + env(safe-area-inset-bottom, 0px)); }
@media (prefers-reduced-motion: no-preference) {
  dialog.fd-sheet[open] { animation: fd-sheet-in 320ms var(--fd-ease-drawer); }
  dialog.fd-sheet[open]::backdrop { animation: fd-fade-in 240ms var(--fd-ease-out); }
  dialog.fd-sheet.is-closing::backdrop { animation: fd-fade-out 200ms var(--fd-ease-out) forwards; }
}
@keyframes fd-sheet-in { from { transform: translateY(100%); } }
@keyframes fd-modal-in { from { opacity: 0; transform: translateY(10px) scale(.97); } }
@keyframes fd-fade-in { from { opacity: 0; } }
@keyframes fd-fade-out { to { opacity: 0; } }
/* Breite Bildschirme: zentrierter Dialog statt Sheet */
@media (min-width: 640px) {
  dialog.fd-sheet { margin: auto; border-radius: 16px; max-height: 86dvh; box-shadow: 0 24px 70px rgba(0, 0, 0, .35); }
  .fd-sheet-grab { display: none; }
  .fd-sheet-head { padding-top: 16px; touch-action: auto; }
  @media (prefers-reduced-motion: no-preference) { dialog.fd-sheet[open] { animation: fd-modal-in 240ms var(--fd-ease-out); } }
}
@media (prefers-reduced-motion: reduce) { dialog.fd-sheet[open], dialog.fd-sheet[open]::backdrop { animation: none; } }