/* =====================================================================
   Tellhaven — Motion & polish layer
   Loaded AFTER site.css (see _Layout.cshtml). It only adds hover effects,
   scroll animations and small interaction details on top of the existing
   design, so it can be removed by deleting this file + its <link>/<script>.
   Everything respects prefers-reduced-motion (site.css already collapses
   all animation/transition durations for those users, and motion.js skips
   the scroll-reveal entirely).
   ===================================================================== */

/* ---- Page enter: gentle fade (opacity only — no transform, so it can't
        break fixed/sticky children) --------------------------------- */
.site-main {
    animation: tell-page-in 0.35s ease backwards;
}

@keyframes tell-page-in {
    from { opacity: 0; }
}

/* ---- Scroll reveal (classes added by motion.js) ---------------------
   Uses a one-shot animation with fill-mode "backwards" instead of a
   transition, so the elements' own hover transforms keep working after
   the reveal has finished. -------------------------------------------- */
.reveal {
    opacity: 0;
}

    .reveal.is-visible {
        opacity: 1;
        animation: tell-reveal-up 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms) backwards;
    }

@keyframes tell-reveal-up {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media print {
    .reveal {
        opacity: 1;
    }
}

/* ---- Header: soft shadow once the page is scrolled ----------------- */
.site-header {
    transition: box-shadow 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
}

    .site-header.is-scrolled {
        box-shadow: 0 8px 28px -16px rgba(0, 0, 0, 0.35);
    }

/* ---- Story rows (blog, stories, home feed) -------------------------- */
.feed-row__thumb {
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

    .feed-row__thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
    }

.feed-row:hover .feed-row__thumb {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px -16px rgba(0, 0, 0, 0.45);
}

    .feed-row:hover .feed-row__thumb img {
        transform: scale(1.07);
    }

.feed-row:hover .feed-row__main :is(h2, h3) {
    text-decoration: underline;
    text-decoration-color: var(--color-accent);
    text-decoration-thickness: 3px;
    text-underline-offset: 5px;
}

/* ---- Buttons -------------------------------------------------------- */
.btn {
    transition: background-color 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 200ms ease;
}

.btn--primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -12px rgba(110, 150, 15, 0.8);
}

.btn--primary:active {
    transform: scale(0.97);
    box-shadow: none;
}

/* ---- Reactions, bookmarks, share buttons, topic links --------------- */
.reaction-btn,
.bookmark-btn,
.share-btn,
a.topic-pill {
    transition: transform 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.2s ease;
}

    .reaction-btn:hover,
    .share-btn:hover,
    a.topic-pill:hover {
        transform: translateY(-2px);
    }

    .reaction-btn:active,
    .bookmark-btn:active,
    .share-btn:active,
    a.topic-pill:active {
        transform: scale(0.95);
    }

/* A reaction / bookmark that is switched on "pops" (this is what you see
   right after clicking, when the page comes back with it active). */
.reaction-btn--active,
.bookmark-btn--active {
    animation: tell-pop 0.45s cubic-bezier(0.3, 1.6, 0.5, 1);
}

@keyframes tell-pop {
    0% { transform: scale(0.9); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ---- Sidebar cards -------------------------------------------------- */
.blog-sidebar__cta {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

    .blog-sidebar__cta:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px -20px rgba(0, 0, 0, 0.5);
        border-color: var(--color-accent);
    }

/* ---- Back-to-top button (created by motion.js) ---------------------- */
.back-to-top {
    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 30;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-card);
    color: var(--color-text);
    cursor: pointer;
    box-shadow: 0 10px 26px -14px rgba(0, 0, 0, 0.5);
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease, background-color 0.15s ease, color 0.15s ease;
}

    .back-to-top.is-shown {
        opacity: 1;
        transform: none;
        pointer-events: auto;
    }

    .back-to-top:hover {
        background: var(--color-accent);
        color: var(--color-accent-ink);
    }

/* ---- Skeleton loading placeholder (utility, for future use) --------- */
.skeleton {
    background: linear-gradient(90deg, var(--color-border) 25%, var(--color-bg) 50%, var(--color-border) 75%);
    background-size: 200% 100%;
    animation: tell-shimmer 1.4s linear infinite;
    border-radius: var(--radius-sm);
}

@keyframes tell-shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

/* ---- Hero headline: rotating phrase ---------------------------------
   Problems fixed here:
   1. The full stop used to drop onto its own line when the phrase wrapped
      to two lines (the phrase was an inline-block). It is now plain
      inline text, so the "." always stays attached to the last word.
   2. The headline height changed with each phrase, so the buttons below
      jumped up and down. The headline now always reserves 3 lines.
   The slide effect uses position/top (works on inline text) instead of
   transform (which doesn't). ---------------------------------------- */
.hero-split h1 {
    min-height: 3.15em; /* 3 lines x line-height 1.05 */
}

.hero-rotate-word {
    display: inline;
    position: relative;
    top: 0;
    transition: opacity 0.35s ease, top 0.35s ease;
}

    .hero-rotate-word.is-swapping {
        opacity: 0;
        transform: none;
        top: 0.2em;
    }

@media (max-width: 900px) {
    .hero-split h1 {
        min-height: 2.4em;
    }
}