/* ============================================
   HN Creative - Shared Stylesheet
   style.css
   ============================================ */

/* --- CSS Variables --- */
:root {
    --color-sage:        #9CAF88;
    --color-sage-dark:   #5D6D4E;
    --color-sage-light:  #F1F4EE;
    --color-sage-muted:  rgba(156, 175, 136, 0.1);
    --color-bg:          #F8F9F5;
    --font-main:         'Poppins', sans-serif;
}

/* --- Base --- */
body {
    font-family: var(--font-main);
    scroll-behavior: smooth;
    letter-spacing: -0.015em;
}

/* --- Sage Color Utilities --- */
.sage-bg    { background-color: var(--color-sage); }
.sage-light { background-color: var(--color-sage-light); }
.sage-text  { color: var(--color-sage-dark); }
.sage-border { border-color: var(--color-sage); }

.dark .sage-light  { background-color: var(--color-sage-muted); }
.dark .sage-text   { color: var(--color-sage); }

/* --- Hero Gradient --- */
.hero-gradient {
    background: linear-gradient(180deg, var(--color-sage-light) 0%, var(--color-bg) 100%);
}
.dark .hero-gradient {
    background: linear-gradient(180deg, #111827 0%, #1f2937 100%);
}

/* --- Heading Tight --- */
.heading-tight {
    line-height: 1.4;
    letter-spacing: -0.025em;
}

/* --- Blur Word Entrance Animation --- */
@keyframes blurTextAnimation {
    0%   { filter: blur(10px); opacity: 0; transform: translateY(-20px); }
    60%  { filter: blur(4px);  opacity: 0.6; transform: translateY(4px); }
    100% { filter: blur(0px);  opacity: 1; transform: translateY(0); }
}

.blur-word {
    display: inline-block;
    opacity: 0;
    animation: blurTextAnimation 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
    animation-delay: calc(var(--word-index) * 0.12s);
    will-change: transform, filter, opacity;
    margin-right: 0.2em;
}

/* --- Hover Float Card Effect --- */
.hover-float {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hover-float:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* --- Floating Image Animation --- */
@keyframes floating {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
.animate-float { animation: floating 4s ease-in-out infinite; }

/* --- Hide Scrollbar (for horizontal scroll sections) --- */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}