/* ============================================
   THLAB.studio — UI Enhancement Layer
   Progress bar, hover effects, skeleton loader,
   page transitions, status pulse
   ============================================ */

/* === 1. TOP PROGRESS BAR === */
#thlab-progress{position:fixed;top:0;left:0;width:0;height:2px;background:linear-gradient(90deg,#00d4ff,#00e87b,#ffb224);z-index:9999;transition:width 0.3s ease;box-shadow:0 0 8px rgba(0,212,255,0.4)}
#thlab-progress.done{opacity:0;transition:width 0.2s ease, opacity 0.4s ease 0.2s}

/* === 2. CARD HOVER MICRO-INTERACTIONS === */
.th-card-hover{transition:transform 0.3s cubic-bezier(0.4,0,0.2,1),box-shadow 0.3s cubic-bezier(0.4,0,0.2,1)}
.th-card-hover:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,0.3),0 0 1px rgba(0,212,255,0.15)}

/* Card open link animation */
.th-card-hover .card-open,.th-card-hover [class*="open"]{transition:transform 0.25s ease,color 0.25s ease}
.th-card-hover:hover .card-open,.th-card-hover:hover [class*="open"]{transform:translateX(4px)}

/* Card tag glow on hover */
.th-card-hover:hover .tag,.th-card-hover:hover [class*="tag"]{filter:brightness(1.2)}

/* === 3. SKELETON LOADER === */
@keyframes th-shimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.th-skeleton{background:linear-gradient(90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.03) 75%);background-size:200% 100%;animation:th-shimmer 1.5s ease-in-out infinite;border-radius:4px}
.th-skeleton-line{height:14px;margin-bottom:10px;border-radius:3px}
.th-skeleton-line.w80{width:80%}
.th-skeleton-line.w60{width:60%}
.th-skeleton-line.w40{width:40%}
.th-skeleton-title{height:28px;width:60%;margin-bottom:16px}
.th-skeleton-block{height:120px;margin-bottom:16px}

/* === 4. PAGE TRANSITION — FADE IN === */
@keyframes th-fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.th-page-enter{animation:th-fadeIn 0.35s ease-out both}
.th-page-enter-delay-1{animation-delay:0.08s}
.th-page-enter-delay-2{animation-delay:0.16s}
.th-page-enter-delay-3{animation-delay:0.24s}

/* === 5. STATUS PULSE ANIMATIONS === */
@keyframes th-pulse{0%,100%{box-shadow:0 0 4px currentColor}50%{box-shadow:0 0 10px currentColor,0 0 20px currentColor}}
.th-status-pulse{animation:th-pulse 2.5s ease-in-out infinite}

/* Status dot with pulse */
@keyframes th-dot-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.6;transform:scale(1.3)}}
.th-dot-pulse{animation:th-dot-pulse 2s ease-in-out infinite}

/* === 6. SMOOTH SCROLL === */
html{scroll-behavior:smooth}

/* === 7. LINK TRANSITION OVERLAY === */
#thlab-transition{position:fixed;inset:0;background:rgba(8,11,20,0.6);backdrop-filter:blur(4px);z-index:9998;opacity:0;pointer-events:none;transition:opacity 0.2s ease}
#thlab-transition.active{opacity:1;pointer-events:auto}