/* ==========================================================================
   Prime Research Marketing — global stylesheet
   Custom (non-Tailwind) styles shared across every page.
   Tailwind utility classes are generated at runtime by the CDN script
   loaded in includes/header.php, using the design tokens defined there.
   ========================================================================== */

/* ==========================================================================
   Responsive foundation
   Keeps images/SVGs/canvases from overflowing their containers, and stops
   any fixed-width decorative element from forcing horizontal scroll on
   small screens. Font sizes themselves are fluid via clamp() in the
   Tailwind fontSize config in includes/header.php.
   ========================================================================== */
html {
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
body {
    overflow-x: hidden;
}
img,
svg,
canvas,
video {
    max-width: 100%;
    height: auto;
}
/* Elements that set an explicit inline height (e.g. shader canvases sized
   to fill a parent) should keep that height rather than being squashed
   by the max-width/height:auto rule above. */
canvas.shader-canvas {
    height: 100%;
}

/* Material Symbols icon font settings */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    line-height: 1;
}

/* Custom cursor dot that follows the mouse */
.cursor-follower {
    width: 20px;
    height: 20px;
    background: var(--tw-primary);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    transition: transform 0.1s ease-out;
}

/* Buttons that nudge toward the cursor on hover */
.magnetic-btn {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Scroll reveal animation */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Frosted glass card style */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Soft, blurred background blobs */
.blob-bg {
    filter: blur(80px);
    opacity: 0.4;
    z-index: -1;
}

/* Infinite horizontal logo/text marquee (used on the home page) */
.marquee-content {
    display: flex;
    width: max-content;
    animation: marquee 30s linear infinite;
}
@keyframes marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Animated SVG path draw-on effect (used on the home page) */
.curved-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: dash 3s linear forwards;
}
@keyframes dash {
    to { stroke-dashoffset: 0; }
}

/* Dashed connector line between step numbers (used on the approach page) */
.step-connector {
    stroke-dasharray: 6 6;
}

/* Decorative donut charts (used on the approach page) */
.donut-chart {
    width: 140px;
    height: 140px;
    border-radius: 9999px;
    background: conic-gradient(#a83900 0% 35%, #732ee4 35% 55%, #FED24C 55% 75%, #ab82ff 75% 90%, #dae2fd 90% 100%);
    position: relative;
}
.donut-chart::after {
    content: "";
    position: absolute;
    inset: 22px;
    border-radius: 9999px;
    background: #faf8ff;
}

.mini-donut {
    width: 100%;
    height: 100%;
    border-radius: 9999px;
    background: conic-gradient(#732ee4 0% 55%, #ab82ff 55% 80%, #FED24C 80% 100%);
    position: relative;
}
.mini-donut::after {
    content: "";
    position: absolute;
    inset: 26%;
    border-radius: 9999px;
    background: #ffffff;
}

/* Filter pill buttons (used on the insights & projects pages) */
.filter-pill {
    transition: all 0.25s ease;
}

/* Article cards (used on the insights page) */
.article-card {
    transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.article-card:hover {
    transform: translateY(-6px);
}
.article-thumb {
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.article-card:hover .article-thumb {
    transform: scale(1.05);
}

/* Project cards (used on the projects page) */
.project-card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(168, 57, 0, 0.12);
}