:root {
  --t-fast:  .14s;
  --t-base:  .22s;
  --t-slow:  .42s;
  --ease-out: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.32, .64, 1);
}

.reveal {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

.reveal.d1 { transition-delay: .04s }
.reveal.d2 { transition-delay: .08s }
.reveal.d3 { transition-delay: .12s }
.reveal.d4 { transition-delay: .16s }

.gcard, .scard, .card, .rvcard, .pitem {
  transition: transform var(--t-base) var(--ease-out),
              border-color var(--t-base) var(--ease-out),
              box-shadow var(--t-base) var(--ease-out),
              background-color var(--t-base) var(--ease-out);
}
@media (hover: hover) {
  .gcard:hover, .scard:hover, .card:hover, .rvcard:hover {
    transform: translateY(-3px);
    border-color: var(--line-3);
    box-shadow: var(--sh-2);
  }
  
  .gcard .gimg img, .card .gimg img { transition: transform var(--t-slow) var(--ease-out); }
  .gcard:hover .gimg img, .card:hover .gimg img { transform: scale(1.045); }
}
.gcard:active, .scard:active, .card:active { transform: translateY(-1px) scale(.995); }

.btn { transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out),
                   border-color var(--t-fast) var(--ease-out), color var(--t-fast) var(--ease-out); }
.btn:active { transform: scale(.97); }

@keyframes freshIn {
  from { opacity: 0; transform: translateY(-6px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
.is-fresh { animation: freshIn var(--t-slow) var(--ease-spring); }
.is-fresh::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  border: 1px solid var(--accent-line);
  animation: freshRing 2.4s var(--ease-out) 1 forwards;
  pointer-events: none;
}
@keyframes freshRing {
  0%   { opacity: 1; box-shadow: 0 0 0 0 var(--accent-soft); }
  70%  { opacity: 1; box-shadow: 0 0 0 7px transparent; }
  100% { opacity: 0; box-shadow: none; }
}

.livedot {
  width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0;
  background: var(--ok); position: relative;
}
.livedot::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--ok); animation: livePulse 2.2s var(--ease-out) infinite;
}
@keyframes livePulse {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(2.6); opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

@keyframes bumpUp {
  0%   { transform: none;             color: inherit; }
  30%  { transform: translateY(-3px); color: var(--accent); }
  100% { transform: none;             color: inherit; }
}
.bumped { animation: bumpUp .5s var(--ease-out); }

.st-RESERVED::before { animation: softBlink 1.9s var(--ease-out) infinite; }
@keyframes softBlink { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.sk, .skeleton {
  position: relative; overflow: hidden;
  background: var(--surface-2);
}
.sk::after, .skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 20%,
              rgba(255,255,255,.055) 42%, rgba(255,255,255,.055) 58%, transparent 80%);
  transform: translateX(-100%);
  animation: shimmer 1.35s linear infinite;
}
@keyframes shimmer { to { transform: translateX(100%); } }

.livebar {
  display: flex; align-items: center; gap: var(--s3);
  min-height: 42px; padding: 0 var(--s4);
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface) 0%, var(--bg-2) 100%);
  overflow: hidden;
}
.livebar .lb-head {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  font-size: var(--f-xs); font-weight: 800; letter-spacing: .06em;
  color: var(--text-3); text-transform: uppercase;
}
.livebar .lb-track { position: relative; flex: 1; height: 42px; overflow: hidden; }
.livebar .lb-item {
  position: absolute; inset: 0; display: flex; align-items: center; gap: var(--s2);
  font-size: var(--f-md); color: var(--text-2);
  white-space: nowrap; overflow: hidden;
}

.livebar .lb-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.livebar .lb-item b { color: var(--text); font-weight: 700; }
.livebar .lb-item .when { color: var(--text-4); font-size: var(--f-xs); margin-left: auto; flex-shrink: 0; }
.lb-item.enter { animation: lbEnter var(--t-slow) var(--ease-out); }
.lb-item.leave { animation: lbLeave var(--t-base) var(--ease-out) forwards; }
@keyframes lbEnter { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }
@keyframes lbLeave { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-100%); } }

.tnum { font-variant-numeric: tabular-nums; }

.shine {
  background: linear-gradient(100deg,
              var(--text) 0%, var(--text) 38%,
              #9FD2FA 50%, var(--text) 62%, var(--text) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shineSweep 5.5s var(--ease-out) infinite;
}
@keyframes shineSweep {
  0%, 62%  { background-position: 160% 0; }
  100%     { background-position: -60% 0; }
}

#view > * { animation: pageIn var(--t-base) var(--ease-out); }
@keyframes pageIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .shine { animation: none; background: none; -webkit-text-fill-color: var(--text); color: var(--text); }
}