/* =============================================================
   ÖzgürTavla — Motion & polish layer
   - Skeleton loaders
   - Scroll-reveal animations
   - Toast notification stack
   - Micro-interactions (button press, focus, champion pulse)
   ============================================================= */

/* =============================================================
   1. Skeleton Loader sistemi
   ============================================================= */

@keyframes skel-pulse{
  0%   { background-position: 0% 0; }
  100% { background-position: -200% 0; }
}

.skel{
  position: relative;
  display: inline-block;
  background: linear-gradient(
    90deg,
    var(--c-neutral-100) 0%,
    var(--c-neutral-50) 50%,
    var(--c-neutral-100) 100%
  );
  background-size: 200% 100%;
  animation: skel-pulse 1.4s linear infinite;
  border-radius: var(--r-sm);
  color: transparent;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
}

/* Variants */
.skel-text{
  display: inline-block;
  height: .9em;
  width: 100%;
  border-radius: 4px;
  vertical-align: middle;
}

.skel-title{
  height: 1.4em;
  width: 60%;
  border-radius: 6px;
}

.skel-line{
  display: block;
  height: 12px;
  width: 100%;
  border-radius: 6px;
}

.skel-line + .skel-line{ margin-top: 8px; }

.skel-circle{
  display: inline-block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.skel-avatar{
  width: 42px;
  height: 42px;
  border-radius: 10px;
}

.skel-pill{
  width: 80px;
  height: 22px;
  border-radius: var(--r-pill);
}

.skel-button{
  width: 120px;
  height: 38px;
  border-radius: var(--r-pill);
}

/* Skeleton card — generic placeholder for timeline/lig/turnuva loading */
.skel-card{
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
}

.skel-row{
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.skel-row + .skel-row{ margin-top: var(--sp-3); }

/* Table row skeleton — standings/players tablo loading */
tr.skel-tr td{
  padding-top: .75rem !important;
  padding-bottom: .75rem !important;
}

tr.skel-tr .skel{
  height: 14px;
  border-radius: 4px;
  width: 80%;
}

tr.skel-tr td:first-child .skel{
  width: 28px;
  height: 28px;
  border-radius: 8px;
}

/* prefers-reduced-motion saygı — animasyonu kapat */
@media (prefers-reduced-motion: reduce){
  .skel{ animation: none; }
}

/* =============================================================
   2. Scroll-reveal animations
   ============================================================= */

[data-reveal]{
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity .6s cubic-bezier(.2,.8,.2,1),
    transform .6s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}

[data-reveal="fade"]{
  transform: none;
}

[data-reveal="scale"]{
  transform: scale(.96);
}

[data-reveal="slide-left"]{
  transform: translateX(20px);
}

[data-reveal].is-revealed{
  opacity: 1;
  transform: none;
}

/* Staggered children — parent[data-reveal-stagger] çocuklarına gecikme */
[data-reveal-stagger] > [data-reveal]{
  transition-delay: calc(var(--reveal-i, 0) * 80ms);
}

@media (prefers-reduced-motion: reduce){
  [data-reveal]{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =============================================================
   3. Toast notification stack
   ============================================================= */

#toast-stack{
  position: fixed;
  top: calc(var(--nav-h) + var(--sp-3));
  right: var(--sp-4);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  pointer-events: none;
  max-width: min(380px, calc(100vw - 32px));
}

@media (max-width: 575.98px){
  /* Alt navigasyon kaldırıldı; toast artık doğrudan ekranın altına oturur. */
  #toast-stack{
    top: auto;
    bottom: calc(var(--safe-bottom) + var(--sp-4));
    left: var(--sp-3);
    right: var(--sp-3);
    max-width: none;
  }
}

.toast-pro{
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-left: 4px solid var(--c-primary-600);
  border-radius: var(--r-md);
  box-shadow: var(--sh-md);
  font-family: var(--font-ui);
  font-size: .92rem;
  color: var(--c-text);
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity .25s ease, transform .25s ease;
  min-width: 0;
}

.toast-pro.is-in{
  opacity: 1;
  transform: translateY(0);
}

.toast-pro.is-out{
  opacity: 0;
  transform: translateY(-8px);
}

.toast-pro .toast-pro-icon{
  flex: 0 0 auto;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--c-primary-600);
}

.toast-pro .toast-pro-msg{
  flex: 1 1 auto;
  line-height: 1.4;
  min-width: 0;
  word-break: break-word;
}

.toast-pro .toast-pro-close{
  flex: 0 0 auto;
  appearance: none;
  background: none;
  border: 0;
  padding: 2px 4px;
  color: var(--c-text-subtle);
  cursor: pointer;
  line-height: 1;
  font-size: 1.05rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}

.toast-pro .toast-pro-close:hover{
  color: var(--c-text);
  background: var(--c-neutral-100);
}

/* Variants */
.toast-pro.is-success{
  border-left-color: var(--c-success-500);
}
.toast-pro.is-success .toast-pro-icon{ color: var(--c-success-700); }

.toast-pro.is-warning{
  border-left-color: var(--c-warning-500);
}
.toast-pro.is-warning .toast-pro-icon{ color: var(--c-warning-700); }

.toast-pro.is-danger{
  border-left-color: var(--c-danger-500);
}
.toast-pro.is-danger .toast-pro-icon{ color: var(--c-danger-700); }

.toast-pro.is-champion{
  border-left-color: var(--c-champion-500);
  background: linear-gradient(135deg, var(--c-champion-50) 0%, var(--c-surface) 100%);
}
.toast-pro.is-champion .toast-pro-icon{ color: var(--c-champion-700); }

@media (prefers-reduced-motion: reduce){
  .toast-pro{ transition: none; }
}

/* =============================================================
   4. Micro-interactions
   ============================================================= */

/* Button press feedback — tüm sportif butonlar */
.btn-primary-pro,
.btn-champion,
.btn-ghost-pro,
.btn-ghost-on-dark{
  transition: transform var(--t-fast), filter var(--t-base), box-shadow var(--t-base), background var(--t-base);
}

.btn-primary-pro:active,
.btn-champion:active,
.btn-ghost-pro:active,
.btn-ghost-on-dark:active{
  transform: translateY(1px) scale(.99);
}

/* Card hover yumuşak transform — tüm kart varyantları */
.card-elevated,
.home-item-card,
.lg-card,
.tk-row,
.recent-match-card{
  transform: translateZ(0);
}

/* Champion-pulse — top 1 rank için subtle nabız (sadece desktop) */
@keyframes champion-pulse{
  0%, 100% {
    box-shadow: 0 3px 10px rgba(var(--c-champion-rgb),.32),
                0 0 0 0 rgba(var(--c-champion-rgb),.4);
  }
  50% {
    box-shadow: 0 3px 10px rgba(var(--c-champion-rgb),.4),
                0 0 0 6px rgba(var(--c-champion-rgb),0);
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: no-preference){
  tr[data-rank="1"] .lig-rank-cell::before{
    animation: champion-pulse 2.4s ease-in-out infinite;
  }
}

/* Focus ring tutarlılığı — keyboard navigation odak halkası */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--c-primary-500);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Link smooth-underline */
a{
  text-underline-offset: 3px;
  transition: color var(--t-fast);
}

/* Scrollbar — yumuşak ince */
@media (min-width: 768px){
  :where(.table-responsive, .group-tabs-wrap, [data-overflow])::-webkit-scrollbar{
    height: 8px;
    width: 8px;
  }
  :where(.table-responsive, .group-tabs-wrap, [data-overflow])::-webkit-scrollbar-track{
    background: transparent;
  }
  :where(.table-responsive, .group-tabs-wrap, [data-overflow])::-webkit-scrollbar-thumb{
    background: var(--c-neutral-200);
    border-radius: var(--r-pill);
  }
  :where(.table-responsive, .group-tabs-wrap, [data-overflow])::-webkit-scrollbar-thumb:hover{
    background: var(--c-neutral-300);
  }
}

/* Page-top scroll smooth */
html{
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
}