/* ============================================
   THE KRISTEN SAM — Effects
   Hover states, transitions, animations,
   decorative pseudo-elements, scroll reveals
   ============================================ */


/* === Transition defaults === */

.nav-cta {
    transition: all 0.25s ease;
}
.nav-cta:hover {
    background: var(--tks-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--tks-shadow-primary);
    color: #fff !important;
}

.btn {
    transition: all 0.25s ease;
}
.btn-primary:hover {
    background: var(--tks-primary-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--tks-shadow-primary);
    text-decoration: none;
}
.btn-secondary:hover {
    background: var(--tks-primary-soft);
    color: var(--tks-primary);
    text-decoration: none;
}
.btn-dark:hover {
    background: var(--tks-dark-deep);
    color: var(--tks-bg);
    transform: translateY(-2px);
    text-decoration: none;
}
.btn-white:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--tks-bg);
    border-color: rgba(250, 248, 245, 0.7);
    text-decoration: none;
}

.logo {
    transition: opacity 0.2s ease;
}

.logo img {
    transition: filter 0.35s ease;
}

.header {
    transition: all 0.35s ease;
}

.menu-toggle span {
    transition: all 0.3s ease;
}

.topic-card {
    transition: border-color 0.3s ease;
}
.topic-card:hover { text-decoration: none; }
.topic-card:hover h3 { color: var(--tks-primary-deep); }
.topic-card h3 { transition: color 0.2s ease; }

.footer-col a {
    transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--tks-primary); }


/* === Link hover states === */

.section-header .view-all {
    transition: border-color 0.2s ease;
}
.section-header .view-all:hover {
    border-bottom-color: var(--tks-primary);
}

.featured-lead-image {
    transition: opacity 0.4s ease;
}
.featured-lead a:hover .featured-lead-image {
    opacity: 0.92;
}
.featured-lead a:hover h3 {
    color: var(--tks-primary-deep);
}

.post-list-item {
    transition: background 0.2s ease;
}
.post-list-item:hover h3 {
    color: var(--tks-primary-deep);
}

.hero-preview-card {
    transition: transform 0.4s var(--tks-ease), box-shadow 0.4s var(--tks-ease);
}
.hero-preview-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
}

.blog-card {
    transition: transform 0.3s var(--tks-ease), box-shadow 0.3s var(--tks-ease);
}
.blog-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--tks-shadow-lg);
}
.blog-card:hover h3 {
    color: var(--tks-primary-deep);
}

.blog-featured a {
    text-decoration: none;
}
.blog-featured a:hover h2 {
    color: var(--tks-primary-deep);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    border-color: var(--tks-primary);
    box-shadow: 0 0 0 3px var(--tks-primary-soft);
}

.form-group input,
.form-group textarea,
.form-group select {
    transition: border-color 0.2s;
}

.newsletter-form input:focus {
    border-color: var(--tks-primary);
    box-shadow: 0 0 0 3px rgba(32, 178, 170, 0.15);
}


/* === Decorative pseudo-elements === */

/* Section heading underline accent */
.section-header h2::after,
.section-topics .section-intro h2::after,
.about-content h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 48px;
    height: 3px;
    background: var(--tks-primary);
    border-radius: 2px;
}

/* Hero background layers */
.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url('/assets/images/hero/hero-home.png');
    background-size: cover;
    background-position: center right;
    opacity: 0.18;
    pointer-events: none;
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(30, 45, 58, 0.93) 0%, rgba(30, 45, 58, 0.82) 100%),
        radial-gradient(ellipse at 20% 80%, rgba(32, 178, 170, 0.06) 0%, transparent 60%),
        radial-gradient(ellipse at 85% 20%, rgba(237, 106, 94, 0.03) 0%, transparent 50%);
    pointer-events: none;
}

/* Topics section decorative corner */
.section-topics::after {
    content: '';
    position: absolute;
    bottom: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background-image: url('/assets/images/accent-geometric-teal.png');
    background-size: cover;
    opacity: 0.15;
    pointer-events: none;
}

/* About section decorative corner */
.section-about::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 200px;
    height: 200px;
    background-image: url('/assets/images/accent-geometric-coral.png');
    background-size: cover;
    opacity: 0.08;
    pointer-events: none;
}

/* About image decorative element */
.about-image-wrapper::after {
    content: '';
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 140px;
    height: 140px;
    border-radius: var(--tks-radius-lg);
    background-image: url('/assets/images/accent-geometric-coral.png');
    background-size: cover;
    opacity: 0.4;
    z-index: -1;
}

/* Newsletter atmospheric backgrounds */
.section-newsletter::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(32, 178, 170, 0.12) 0%, transparent 65%);
    pointer-events: none;
}

.section-newsletter::after {
    content: '';
    position: absolute;
    bottom: -40%;
    left: -15%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(237, 106, 94, 0.06) 0%, transparent 60%);
    pointer-events: none;
}


/* === Animations === */

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.hero-preview-dot {
    animation: pulse-dot 2.5s ease-in-out infinite;
}


/* === Scroll Reveal === */

.reveal {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.reveal-delay-1 { transition-delay: 0.15s; }
.reveal-delay-2 { transition-delay: 0.3s; }
.reveal-delay-3 { transition-delay: 0.45s; }