/*
Theme Name: TheWriter ID
Theme URI: https://thewriter.id
Author: TheWriter.id
Author URI: https://thewriter.id
Description: Premium ghostwriter portfolio theme for FTTH & Telecom industry specialists. Built for TheWriter.id.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thewriter-id
Tags: portfolio, business, professional
*/

/* Base resets & font */
body {
  font-family: 'Inter', sans-serif;
  -webkit-font-smoothing: antialiased;
  background-color: #f8fafc;
  color: #0f172a;
}

/* Selection color */
::selection {
  background-color: #0ea5e9;
  color: #fff;
}

/* Blob animation */
@keyframes blob {
  0%   { transform: translate(0px, 0px) scale(1); }
  33%  { transform: translate(30px, -50px) scale(1.1); }
  66%  { transform: translate(-20px, 20px) scale(0.9); }
  100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 7s infinite; }

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.animate-fade-in { animation: fadeIn 0.5s ease-out; }

@keyframes ping {
  75%, 100% { transform: scale(2); opacity: 0; }
}
.animate-ping { animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; }

/* Prose base styles for article content */
.prose p        { margin-bottom: 1.25rem; line-height: 1.8; }
.prose h2       { font-size: 1.5rem; font-weight: 700; color: #111827; margin-top: 2.5rem; margin-bottom: 1rem; }
.prose h3       { font-size: 1.25rem; font-weight: 700; color: #111827; margin-top: 2rem; margin-bottom: 0.75rem; }
.prose ul       { list-style-type: disc; padding-left: 1.5rem; margin-bottom: 1.25rem; }
.prose ul li    { margin-bottom: 0.5rem; }
.prose blockquote { border-left: 4px solid #0ea5e9; padding: 1rem 1rem 1rem 1.5rem; font-style: italic; color: #1f2937; background: #f9fafb; border-radius: 0 0.5rem 0.5rem 0; margin: 2rem 0; }
.prose strong   { font-weight: 700; }
.prose em       { font-style: italic; }
.prose a        { color: #0284c7; text-decoration: underline; }
.lead           { font-size: 1.25rem; color: #4b5563; font-weight: 500; margin-bottom: 2rem; }

/* Scroll progress bar */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: #0284c7;
  z-index: 9999;
  width: 0%;
  transition: width 0.1s linear;
}

/* Glass panel */
.glass-panel {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Ping dot */
.ping-dot {
  position: relative;
  display: inline-flex;
  height: 0.5rem;
  width: 0.5rem;
}
.ping-dot span:first-child {
  position: absolute;
  display: inline-flex;
  height: 100%;
  width: 100%;
  border-radius: 50%;
  background-color: #38bdf8;
  opacity: 0.75;
  animation: ping 1s cubic-bezier(0,0,.2,1) infinite;
}
.ping-dot span:last-child {
  position: relative;
  display: inline-flex;
  border-radius: 50%;
  height: 0.5rem;
  width: 0.5rem;
  background-color: #0ea5e9;
}