/* focusEDU whimsy · Insights lane (prefix wi-) · 2026-09-28
   Loaded on blog/listing.html, blog/post.html and the home "Higher Education Insights" row.
   Decorates only. Never touches .insights-chips / [data-insights-*] / insights-nav.*.

   1. Index-card lift on post cards (listing grid, home row, "Related Articles")
   2. Reading pencil under the sticky header (post pages)            -> built by insights.js
   3. Highlighter sweep behind article h2s, once, as they scroll in   -> built by insights.js
   4. Fountain-pen flourish on the rule that closes the article      -> built by insights.js */

/* ---------------------------------------------------------------- 1. index cards
   The three card grids share one shape: <a class="group ... overflow-hidden"> inside .grid,
   [image div] + text div. Nothing else on these pages matches it (the section chips are
   plain <a> in [data-insights-chips], not in a .grid). */
main .grid > a.group.overflow-hidden {
    --wi-pad: 1.5rem;
    --wi-tilt: -.55deg;
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), box-shadow .45s ease, opacity .6s ease;
}
main .grid > a.group.overflow-hidden:nth-child(even) { --wi-tilt: .45deg; }
main .grid > a.group.overflow-hidden > .p-4 { --wi-pad: 1rem; }

main .grid > a.group.overflow-hidden:is(:hover, :focus-visible) {
    transform: translateY(-4px) rotate(var(--wi-tilt));
    /* Tailwind composes box-shadow from these vars, so the home row keeps its ring-1 */
    --tw-shadow: 0 16px 26px -14px rgba(15, 34, 64, .38), 0 4px 10px -6px rgba(15, 34, 64, .16);
}

main .grid > a.group.overflow-hidden > div:last-child { position: relative; }

/* the red rule an index card has across its top, drawn in from the left */
main .grid > a.group.overflow-hidden > div:last-child::before {
    content: "";
    position: absolute;
    left: var(--wi-pad); right: var(--wi-pad);
    top: calc(var(--wi-pad) * .5 - .5px);
    height: 1px;
    background: #b81321;
    opacity: .5;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform .55s cubic-bezier(.3, .7, .2, 1) .06s;
    pointer-events: none;
}
main .grid > a.group.overflow-hidden:is(:hover, :focus-visible) > div:last-child::before,
main .grid > a.group.overflow-hidden.wi-seen > div:last-child::before { transform: scaleX(1); }

/* a paperclip holding the photo to the card (only when there is a photo above the text) */
main .grid > a.group.overflow-hidden > div:not(:first-child)::after {
    content: "";
    position: absolute;
    top: calc(var(--wi-pad) * -.8);
    right: calc(var(--wi-pad) + 4px);
    width: calc(var(--wi-pad) * .64);
    height: calc(var(--wi-pad) * 1.64);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13 34'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23b4bcc7'/%3E%3Cstop offset='.5' stop-color='%236e7a8b'/%3E%3Cstop offset='1' stop-color='%23485465'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M4.2 10.5V25a2.6 2.6 0 0 0 5.2 0V5.6a3.95 3.95 0 0 0-7.9 0V28a5 5 0 0 0 10 0V12' fill='none' stroke='url(%23g)' stroke-width='1.55' stroke-linecap='round'/%3E%3Cpath d='M4.2 10.5V25a2.6 2.6 0 0 0 5.2 0V5.6a3.95 3.95 0 0 0-7.9 0V28a5 5 0 0 0 10 0V12' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='.45' stroke-linecap='round' transform='translate(-.35 -.3)'/%3E%3C/svg%3E") no-repeat center / contain;
    filter: drop-shadow(0 1px .6px rgba(15, 34, 64, .45));
    opacity: 0;
    transform: translateY(-7px) rotate(5deg);
    transition: opacity .2s ease .1s, transform .5s cubic-bezier(.3, 1.45, .5, 1) .1s;
    pointer-events: none;
}
main .grid > a.group.overflow-hidden:is(:hover, :focus-visible) > div:not(:first-child)::after {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

/* ---------------------------------------------------------------- 2. reading pencil */
.wi-read {
    position: fixed; left: 0; right: 0; top: 0; height: 0;
    z-index: 51;                 /* just over the sticky header (z 50) so the nib can touch its edge;
                                    it fades out whenever a header menu is open (see insights.js) */
    pointer-events: none;
    transition: opacity .2s ease;
}
.wi-read.is-hidden { opacity: 0; } /* a header menu is open (desktop dropdown or mobile menu) */
.wi-read__line {
    position: absolute; left: 0; top: 0; width: 100%; height: 2px;
    background: #b81321;
    background-image: linear-gradient(180deg, #cf2733, #a30f1c);
    transform: scaleX(0);
    transform-origin: 0 50%;
}
.wi-read__pencil {
    position: absolute; left: -38px; top: -5px; width: 40px; height: 12px;
}
.wi-read__nib {
    display: block; width: 40px; height: 12px;
    transform-origin: 100% 50%;
    transform: rotate(13deg);
    opacity: 0;
    transition: opacity .25s ease, transform .35s cubic-bezier(.3, .7, .2, 1);
}
.wi-read__nib svg { display: block; width: 40px; height: 12px; }
.wi-read.is-writing .wi-read__nib { opacity: 1; }
.wi-read.is-done .wi-read__nib { transform: rotate(13deg) translate(3px, -7px); }
/* 64px phone header: a flatter pencil keeps its tail clear of the logo's tagline */
@media (max-width: 767.98px) {
    .wi-read__nib { transform: rotate(6deg); }
    .wi-read.is-done .wi-read__nib { transform: rotate(6deg) translate(3px, -6px); }
}

/* ---------------------------------------------------------------- 3. highlighter */
.wi-hl-host { position: relative; z-index: 0; }   /* no offsets: nothing moves */
.wi-hl { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wi-hl i {
    position: absolute; display: block;
    background: rgba(184, 19, 33, .13);           /* #333 text on it: ~10.6:1 */
    border-radius: 2px 7px 3px 8px / 5px 3px 7px 4px;
    transform-origin: 0 50%;
    transform: scaleX(0) rotate(-.35deg);
}
.wi-hl.is-on i { animation: wi-sweep .6s cubic-bezier(.35, .55, .25, 1) forwards; animation-delay: calc(var(--i, 0) * .42s + .1s); }
.wi-hl.is-static i { transform: scaleX(1) rotate(-.35deg); }
@keyframes wi-sweep { to { transform: scaleX(1) rotate(-.35deg); } }

/* ---------------------------------------------------------------- 4. closing flourish */
.wi-end-host { position: relative; }              /* no offsets: nothing moves */
.wi-end {
    position: absolute; left: 50%;
    top: calc(100% + var(--wi-gap, 40px));
    transform: translate(-50%, -50%);
    z-index: 0;
    padding: 0 12px;
    line-height: 0;
    pointer-events: none;
}
/* the white behind the pen stroke: the rule parts from the centre, then the ink is drawn */
.wi-end::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: #fff;
    transform: scaleX(0);
}
.wi-end.is-on::before { animation: wi-part .4s cubic-bezier(.3, .7, .2, 1) forwards; }
.wi-end.is-static::before { transform: none; }
@keyframes wi-part { to { transform: scaleX(1); } }
.wi-end svg { display: block; width: 140px; height: 24px; overflow: visible; }
.wi-end .wi-ink { stroke-dasharray: 1 1.1; stroke-dashoffset: 1.02; }
.wi-end.is-on .wi-ink { animation: wi-ink 1.6s cubic-bezier(.45, .05, .35, 1) .3s forwards; }
.wi-end.is-static .wi-ink { stroke-dashoffset: 0; }
@keyframes wi-ink { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- reduced motion: final state, no motion */
@media (prefers-reduced-motion: reduce) {
    main .grid > a.group.overflow-hidden,
    main .grid > a.group.overflow-hidden > div:last-child::before,
    main .grid > a.group.overflow-hidden > div:not(:first-child)::after,
    .wi-read, .wi-read__nib { transition: none !important; }
    main .grid > a.group.overflow-hidden:is(:hover, :focus-visible) { transform: none; }
    main .grid > a.group.overflow-hidden > div:not(:first-child)::after { transform: none; }
    .wi-hl i, .wi-hl.is-on i { animation: none !important; transform: scaleX(1) rotate(-.35deg); }
    .wi-end .wi-ink { animation: none !important; stroke-dashoffset: 0; }
    .wi-end::before { animation: none !important; transform: none; }
}

@media print {
    .wi-read, .wi-end, .wi-hl { display: none !important; }
}