/* ============================================================
   TempoPlay v2.1 — Storefront Enhancement Layer
   Micro-interactions & polish. Non-destructive: only adds,
   never overrides layout structure.
   ============================================================ */

/* --- App card hover lift --- */
.tp-card {
    transition: transform .28s cubic-bezier(.22,1,.36,1), box-shadow .28s ease;
    will-change: transform;
}
.tp-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 38px -14px rgba(0,0,0,.35);
}
.tp-card img {
    transition: transform .45s cubic-bezier(.22,1,.36,1);
}
.tp-card:hover img {
    transform: scale(1.06);
}

/* --- Primary download button shine sweep --- */
.tp-btn-primary {
    position: relative;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .25s ease, filter .2s ease;
}
.tp-btn-primary:hover {
    transform: translateY(-2px);
    filter: brightness(1.07);
    box-shadow: 0 12px 28px -8px rgba(0,0,0,.45);
}
.tp-btn-primary:active {
    transform: translateY(0);
}
.tp-btn-primary::after {
    content: "";
    position: absolute;
    top: 0; left: -80%;
    width: 55%; height: 100%;
    background: linear-gradient(105deg, transparent, rgba(255,255,255,.35), transparent);
    transform: skewX(-20deg);
    transition: left .6s ease;
    pointer-events: none;
}
.tp-btn-primary:hover::after {
    left: 130%;
}

/* --- Images (v2.2) ---
   The v2.1 fade hook pre-hid every <img> (opacity: 0 + shimmer) until its
   load event fired, which made the whole page — header logo included —
   blink on every navigation, and could strand broken images invisible.
   The layout script that applied the class is gone; images render
   immediately. The class is kept as a harmless no-op hook so any cached
   markup still referencing it can never hide an image again. */
.tp-fade-img, .tp-fade-img.tp-loaded {
    opacity: 1;
}

/* --- Timer page: pulse the download button when ready --- */
@keyframes tp-ready-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34,197,94,.45); }
    50% { box-shadow: 0 0 0 12px rgba(34,197,94,0); }
}
.tp-download-ready {
    animation: tp-ready-pulse 1.8s ease-in-out infinite;
}

/* --- Section headings: subtle underline accent --- */
.tp-section-title {
    position: relative;
    display: inline-block;
}
.tp-section-title::after {
    content: "";
    position: absolute;
    left: 0; bottom: -6px;
    width: 42px; height: 3px;
    border-radius: 3px;
    background: var(--primary-accent, #f97316);
}

/* --- Mirror/server rows: hover affordance --- */
.tp-server-row {
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}
.tp-server-row:hover {
    transform: translateX(4px);
}

/* --- Smoother scroll + nicer focus --- */
html { scroll-behavior: smooth; }
a:focus-visible, button:focus-visible {
    outline: 2px solid var(--primary-accent, #f97316);
    outline-offset: 2px;
    border-radius: 6px;
}

/* --- Badge pop-in --- */
@keyframes tp-badge-pop {
    from { transform: scale(.6); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.tp-badge {
    animation: tp-badge-pop .35s cubic-bezier(.22,1,.36,1) backwards;
}

/* --- Marquee strip for trending keywords (used on homepage) --- */
.tp-marquee {
    overflow: hidden;
    white-space: nowrap;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tp-marquee > div {
    display: inline-block;
    animation: tp-marquee-scroll 28s linear infinite;
}
.tp-marquee:hover > div {
    animation-play-state: paused;
}
@keyframes tp-marquee-scroll {
    to { transform: translateX(-50%); }
}

/* --- Reduced motion respect --- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
    html { scroll-behavior: auto; }
}