/* ═══════════════════════════════════════════════════════════════
   MOREMEDIA® Master AI — Cross-Surface Polish Sweep
   Microinteractions, scroll-fade-in, hover-lifts, status-pulse
   for surfaces that didn't yet have the polish layer applied:
   Dashboard, Admin, Login, Iris, Mail-Templates browser,
   Sidebar active state, common cards.
═══════════════════════════════════════════════════════════════ */

/* ── Sidebar · active-state shift indicator ─────────────── */
.nav-item.active::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 3px;
  background: var(--ac-2);
  border-radius: 0 3px 3px 0;
  transform: scaleY(0.4);
  opacity: 0;
  transition: transform var(--dur-base) var(--ease-out-quint), opacity var(--dur-base) var(--ease-out-quint);
}
.nav-item.active::before { transform: scaleY(1); opacity: 1; }
.nav-item .nav-ico {
  transition: transform var(--dur-fast) var(--ease-out-quint), color var(--dur-fast) var(--ease-out-quint);
}
.nav-item:hover .nav-ico { transform: translateX(1px); }
.nav-item.active .nav-ico { transform: translateX(2px); }

/* Cross-surface jump items inherit smooth hover */
.s-it {
  transition: background var(--dur-fast) var(--ease-out-quint), color var(--dur-fast) var(--ease-out-quint), transform var(--dur-fast) var(--ease-out-quint);
}
.s-it:hover { transform: translateX(1px); }

/* ── Generic card / tile hover lifts ────────────────────── */
.tile,
.card.el,
.dash-section.dash-section-boxed,
.iris-settings-card {
  transition:
    transform var(--dur-base) var(--ease-out-quint),
    border-color var(--dur-base) var(--ease-out-quint),
    box-shadow var(--dur-base) var(--ease-out-quint);
}
.tile:hover {
  transform: translateY(-1px);
  border-color: var(--bdr-str);
  box-shadow: 0 10px 24px -18px rgba(40,35,20,0.32);
}
.dash-kpi {
  transition:
    transform var(--dur-base) var(--ease-out-quint),
    border-color var(--dur-base) var(--ease-out-quint),
    box-shadow var(--dur-base) var(--ease-out-quint),
    background var(--dur-base) var(--ease-out-quint);
}
.dash-kpi:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px -18px rgba(40,35,20,0.28);
}

/* Bar fills · subtle gradient animation on dashboard kpi */
.bar-f {
  transition: width var(--dur-slow) var(--ease-out-quint);
}

/* ── Admin · Update-Queue cards ─────────────────────────── */
@keyframes uqRowIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.uq-card,
[class*="update-queue"] .card {
  animation: uqRowIn 0.5s var(--ease-out-quint) both;
}
.uq-card:nth-child(1) { animation-delay: 0.02s; }
.uq-card:nth-child(2) { animation-delay: 0.06s; }
.uq-card:nth-child(3) { animation-delay: 0.10s; }
.uq-card:nth-child(4) { animation-delay: 0.14s; }
.uq-card:nth-child(5) { animation-delay: 0.18s; }
.uq-card:nth-child(6) { animation-delay: 0.22s; }

/* ── Admin-Tabellen-Zeilen ──────────────────────────────
   #1432: Einblende-Staffelung komplett entfernt (auf Wunsch). Nach dem Laden
   erscheinen alle Zeilen auf einmal — kein Fade-in, kein Layout-Sprung durch
   verzögert erscheinende Zeilen. Nur die Hover-Transition bleibt. */
.page-wide .tbl tbody tr {
  transition: background var(--dur-fast) var(--ease-out-quint);
}
.page-wide .tbl tbody tr:hover {
  background: color-mix(in srgb, var(--ac-2) 4%, transparent);
}

/* ── Status dots — pulse animation removed at user request ──
   Dots stay as static colored markers; the ::after ring is gone. */
.dot.ok,
.tile .dot.ok,
.card .dot.ok { position: relative; }
.dot.ok::after,
.dot.wa::after,
.dot.er::after,
.dot.inf::after { content: none !important; }
@keyframes dotPulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  100% { transform: scale(2.2); opacity: 0; }
}

/* ── Login surface · entrance + submit interactions ────── */
@keyframes lgCardIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.lg-card {
  animation: lgCardIn 0.55s var(--ease-out-quint) both;
}
.lg-brand-h {
  animation: lgCardIn 0.55s var(--ease-out-quint) 0.15s both;
}
.lg-form-h, .lg-form, .lg-divider, .lg-sso, .lg-form-foot {
  animation: lgCardIn 0.55s var(--ease-out-quint) both;
}
.lg-form-h    { animation-delay: 0.20s; }
.lg-form      { animation-delay: 0.28s; }
.lg-divider   { animation-delay: 0.36s; }
.lg-sso       { animation-delay: 0.44s; }
.lg-form-foot { animation-delay: 0.52s; }
.lg-btn {
  position: relative;
  overflow: hidden;
  transition:
    background var(--dur-fast) var(--ease-out-quint),
    border-color var(--dur-fast) var(--ease-out-quint),
    transform var(--dur-fast) var(--ease-out-quint),
    box-shadow var(--dur-base) var(--ease-out-quint);
}
.lg-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--ac-2) 50%, transparent);
}
/* Subtle ripple sweep on hover */
.lg-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.12) 50%, transparent);
  transform: translateX(-100%);
  transition: transform 0.6s var(--ease-out-quint);
}
.lg-btn:hover::before { transform: translateX(100%); }

.lg-input {
  transition: border-color var(--dur-fast) var(--ease-out-quint), box-shadow var(--dur-fast) var(--ease-out-quint), background var(--dur-fast) var(--ease-out-quint);
}
.lg-sso-btn {
  transition: border-color var(--dur-fast) var(--ease-out-quint), background var(--dur-fast) var(--ease-out-quint), transform var(--dur-fast) var(--ease-out-quint);
}
.lg-sso-btn:hover { transform: translateY(-1px); }

/* ── Iris · mail-row + toast polish ─────────────────────── */
@keyframes irisRowIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}
.iris-mail-row,
.iris-list-row,
.iris-list > li {
  transition:
    background var(--dur-fast) var(--ease-out-quint),
    border-color var(--dur-fast) var(--ease-out-quint),
    transform var(--dur-fast) var(--ease-out-quint);
  animation: irisRowIn 0.42s var(--ease-out-quint) both;
}
.iris-list > li:nth-child(1) { animation-delay: 0.03s; }
.iris-list > li:nth-child(2) { animation-delay: 0.07s; }
.iris-list > li:nth-child(3) { animation-delay: 0.11s; }
.iris-list > li:nth-child(4) { animation-delay: 0.15s; }
.iris-list > li:nth-child(5) { animation-delay: 0.19s; }
.iris-list > li:nth-child(6) { animation-delay: 0.23s; }
.iris-mail-row:hover,
.iris-list-row:hover {
  transform: translateX(1px);
}

/* Unread indicator pulse */
.iris-unread,
.iris-mail-row.is-unread::before,
.iris-list-row.is-unread::before {
  animation: dotPulse 2.4s var(--ease-in-out) infinite;
}

/* Iris-toast: bump bottom to align with our generic fz-toast */
.iris-toast {
  animation: irisRowIn 0.32s var(--ease-out-quint) both;
}

/* ── Mail-Templates · sidebar list polish ──────────────── */
.s-it[data-icon="send"] {
  transition: background var(--dur-fast) var(--ease-out-quint), color var(--dur-fast) var(--ease-out-quint);
}

/* Meta-block sticky → polish: fade-in delay aligned with hero */
.mt-meta-block {
  animation: irisRowIn 0.42s var(--ease-out-quint) both;
}
.mt-meta-block:nth-child(1) { animation-delay: 0.30s; }
.mt-meta-block:nth-child(2) { animation-delay: 0.36s; }
.mt-meta-block:nth-child(3) { animation-delay: 0.42s; }
.mt-meta-block:nth-child(4) { animation-delay: 0.48s; }
.mt-meta-block:nth-child(5) { animation-delay: 0.54s; }

/* Preview frame · subtle inner shadow */
.mt-preview-frame {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 -1px 0 rgba(40, 35, 20, 0.04);
}

/* ── Admin Dashboard · animated quota bars ─────────────── */
.bar .bar-t {
  position: relative;
  overflow: hidden;
}
.bar .bar-f {
  animation: barGrow 0.9s var(--ease-out-quint) both;
  transform-origin: left;
}
@keyframes barGrow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Buttons across the app · subtle shift on click ────── */
.btn, .btn-primary, .btn-ghost {
  transition:
    background var(--dur-fast) var(--ease-out-quint),
    border-color var(--dur-fast) var(--ease-out-quint),
    transform var(--dur-fast) var(--ease-out-quint),
    box-shadow var(--dur-fast) var(--ease-out-quint);
}
.btn:hover, .btn-primary:hover, .btn-ghost:hover {
  transform: translateY(-1px);
}
.btn:active, .btn-primary:active, .btn-ghost:active {
  transform: translateY(0);
}

/* ── Page hero (h1) underline draw — already in polish.css —
   apply same effect to page-wide h1 inside Admin / Login pages. */
.page-wide > div > h1 {
  position: relative;
}
.page-wide > div > h1::after {
  content: "";
  display: block;
  margin-top: 12px;
  width: 56px; height: 2px;
  background: linear-gradient(90deg, var(--ac-2), color-mix(in srgb, var(--ac-2) 30%, transparent));
  border-radius: 2px;
  transform-origin: left;
  animation: heroUnderline 0.8s var(--ease-out-quint) 0.15s both;
}
@keyframes heroUnderline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ── Admin · Mitarbeiter row hover sublift ─────────────── */
.tbl-flush tbody tr {
  transition: background var(--dur-fast) var(--ease-out-quint);
}
.tbl-flush tbody tr:hover {
  background: var(--bg-el);
}

/* ── Subtle entrance for Page > article ──────────────────
   NUR opacity animieren — KEIN transform. animation-fill-mode:both ließ den
   Browser transform dauerhaft als "animiert" behandeln -> .page-wide war
   permanent Containing-Block für position:fixed -> inline gerenderte Overlays
   (Audit-Log etc.) wurden relativ zur Seite statt zum Viewport positioniert. */
@keyframes pageEnter {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.page,
.page-wide,
.fz-page,
.hk-page {
  animation: pageEnter 0.4s var(--ease-out-quint) both;
}

/* ── Iris-Card · subtle gradient mask on top ───────────── */
.iris-list,
.iris-mail-list {
  position: relative;
}

/* ── Search inputs · focus glow ────────────────────────── */
.fc-rec-search:focus-within,
.font-pick-search:focus-within {
  border-color: var(--ac-2);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac-2) 12%, transparent);
}

/* ── Logout / dot in header · subtle live indicator ─────── */
.lg-bar-r .dot {
  position: relative;
}

/* ── Reduced motion respect (carry-over from polish.css) ─ */
@media (prefers-reduced-motion: reduce) {
  .nav-item.active::before,
  .lg-card, .lg-brand-h, .lg-form-h, .lg-form, .lg-divider, .lg-sso, .lg-form-foot,
  .iris-list > li, .iris-mail-row, .iris-list-row,
  .uq-card, .page-wide .tbl tbody tr,
  .page, .page-wide, .fz-page, .hk-page,
  .mt-meta-block, .bar .bar-f, .dot.ok::after, .dot.er::after,
  .page-wide > div > h1::after {
    animation: none !important;
    transition: none !important;
  }
}