/* TetherShip - 공통 스타일 (밝은 화이트/민트 테마) */

:root {
    --bg: #f6fdfb;
    --bg-soft: #ecfdf5;
    --panel: #ffffff;
    --border: #d1fae5;
    --brand: #10b981;
    --brand-2: #34d399;
    --brand-ink: #059669;
    --text-1: #0f2e26;
    --text-2: #5b7a72;
    --text-3: #8aa39b;
}

* { box-sizing: border-box; }

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

/* 등장 애니메이션 */
@keyframes floatUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
}
.reveal { animation: floatUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) both; }
.reveal-1 { animation-delay: 0.05s; }
.reveal-2 { animation-delay: 0.12s; }
.reveal-3 { animation-delay: 0.20s; }

/* 일러스트 부유 */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
.float-slow { animation: floatSlow 5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
    .reveal, .float-slow { animation: none; }
    * { transition: none !important; }
}

/* 티커 무한 스크롤 */
@keyframes tickerScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
.ticker-track {
    display: inline-flex;
    animation: tickerScroll 32s linear infinite;
    white-space: nowrap;
}
.ticker-track:hover { animation-play-state: paused; }

/* 카드 호버 */
.lift { transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), border-color 0.3s, box-shadow 0.3s; }
.lift:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 44px -16px rgba(16, 185, 129, 0.28);
}

/* 부드러운 카드 그림자 */
.soft-shadow { box-shadow: 0 10px 30px -12px rgba(16,185,129,0.18); }

/* 스크롤바 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #ecfdf5; }
::-webkit-scrollbar-thumb { background: #a7f3d0; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #6ee7b7; }

/* 상승/하락 */
.up { color: #059669; }
.down { color: #e11d48; }

/* 포커스 접근성 */
a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
}

/* ============ 글래스모피즘 & 프리미엄 디테일 ============ */

/* 유리 카드 */
.glass {
    background: rgba(255, 255, 255, 0.55);
    backdrop-filter: blur(20px) saturate(160%);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.7);
    box-shadow: 0 8px 32px -8px rgba(16, 185, 129, 0.18),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
}
.glass-strong {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(24px) saturate(170%);
    -webkit-backdrop-filter: blur(24px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.85);
    box-shadow: 0 12px 40px -10px rgba(16, 185, 129, 0.22),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.glass-tint {
    background: linear-gradient(135deg, rgba(209,250,229,0.6), rgba(255,255,255,0.35));
    backdrop-filter: blur(18px) saturate(150%);
    -webkit-backdrop-filter: blur(18px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

/* 그라데이션 텍스트 */
.grad-text {
    background: linear-gradient(120deg, #059669, #0ea5e9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* 은은한 테두리 하이라이트 */
.ring-glow { box-shadow: 0 0 0 1px rgba(255,255,255,0.6), 0 20px 50px -20px rgba(16,185,129,0.35); }

/* 배경 도트 그리드 */
.dot-grid {
    background-image: radial-gradient(rgba(16,185,129,0.12) 1px, transparent 1px);
    background-size: 22px 22px;
}

/* 배경 블롭 부유 */
@keyframes blobFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -20px) scale(1.05); }
    66% { transform: translate(-15px, 15px) scale(0.97); }
}
.blob { animation: blobFloat 18s ease-in-out infinite; }
.blob-2 { animation: blobFloat 22s ease-in-out infinite reverse; }

/* 코인/배지 부유 (일러스트 위 오버레이용) */
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-14px); }
}
.float-y { animation: floatY 4.5s ease-in-out infinite; }
.float-y-slow { animation: floatY 6s ease-in-out infinite; }

/* 미세한 광택 이동 */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.shimmer {
    background: linear-gradient(110deg, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%);
    background-size: 200% 100%;
    animation: shimmer 3.5s infinite;
}

/* 버튼 광택 hover */
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after {
    content: ''; position: absolute; top: 0; left: -75%;
    width: 50%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: skewX(-20deg); transition: left 0.6s;
}
.btn-shine:hover::after { left: 130%; }

@media (prefers-reduced-motion: reduce) {
    .blob, .blob-2, .float-y, .float-y-slow, .shimmer { animation: none; }
}