/* Tree Frog Plus — shared brand styles
 *
 * Tailwind (CDN) handles most layout/utility needs; this file carries
 * the small set of custom rules that don't fit inline or that need to
 * match the free-site look (animations, focus rings, copy-button
 * feedback). Keep it minimal.
 */

body {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Frog float + pulse ring (carried over from the free site). */
@keyframes tf-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}
.tf-float { animation: tf-float 4s ease-in-out infinite; }

@keyframes tf-pulse-ring {
    0%   { transform: scale(0.95); opacity: 0.6; }
    70%  { transform: scale(1.4);  opacity: 0;   }
    100% { transform: scale(1.4);  opacity: 0;   }
}
.tf-pulse-ring { animation: tf-pulse-ring 2.4s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* Generic focus ring that uses brand green. */
.tf-focus:focus-visible {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
}

/* Copy-to-clipboard button: brief "copied!" flash. */
.tf-copy {
    transition: background-color 120ms ease, color 120ms ease;
}
.tf-copy.is-copied {
    background-color: #22c55e !important;
    color: #111827 !important;
}

/* Cards: subtle hover lift used on plan tiles and the feature grid. */
.tf-card {
    transition: transform 160ms ease, border-color 160ms ease,
                box-shadow 160ms ease;
}
.tf-card:hover {
    transform: translateY(-2px);
    border-color: rgba(34, 197, 94, 0.45);
    box-shadow: 0 8px 24px -8px rgba(34, 197, 94, 0.15);
}

/* Toast for transient success/error messages (dashboard + login). */
.tf-toast {
    position: fixed;
    bottom: 1.5rem;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: #1f2937;
    color: #f9fafb;
    padding: 0.625rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid #374151;
    font-size: 0.875rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease, transform 180ms ease;
    z-index: 100;
}
.tf-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.tf-toast.is-error { border-color: #ef4444; }
.tf-toast.is-success { border-color: #22c55e; }

/* Spinner for in-flight async buttons. */
@keyframes tf-spin { to { transform: rotate(360deg); } }
.tf-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: tf-spin 0.7s linear infinite;
    vertical-align: -0.125rem;
}

/* Dialog modal (web player + cancel confirm). Matches the free site. */
dialog#tf-modal {
    background: transparent;
    padding: 0;
    border: 0;
    max-width: 64rem;
    width: 100%;
    color: #f9fafb;
}
dialog#tf-modal::backdrop {
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(2px);
}

/* Code block styling for the setup guide (Xtream Codes example). */
pre.tf-code {
    background: #0b1220;
    color: #e2e8f0;
    border: 1px solid #1f2937;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.8125rem;
    overflow-x: auto;
    white-space: pre;
}

/* --- Premium Animations & Liveliness --- */

.tf-fade-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.tf-fade-up.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.tf-glow-orb {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(34,197,94,0.08) 0%, rgba(34,197,94,0) 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(60px);
    animation: tf-orb-drift 15s ease-in-out infinite alternate;
}
.tf-glow-orb.delayed {
    animation-delay: -7s;
    animation-duration: 20s;
    background: radial-gradient(circle, rgba(16,185,129,0.06) 0%, rgba(16,185,129,0) 70%);
}

@keyframes tf-orb-drift {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(40px, -60px) scale(1.15); }
}

.tf-btn-hop {
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease, background-color 0.15s ease;
}
.tf-btn-hop:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -8px rgba(34, 197, 94, 0.4);
}