/*
 * DWR Africa — motion (minimal). Quiet, short and purposeful; nothing moves on its own after it has appeared.
 * Scoped to html.dwr-motion, which dwr-motion.js sets only when JavaScript runs and the visitor has not asked for
 * reduced motion. Without it the page is the static design.
 *   1. pages cross-fade when moving between them (the header stays still)
 *   2. a thin gold reading line under the menu shows how far down the page you are
 *   3. sections, cards and covers rise into place once, in sequence, as they come into view
 *   4. photographs settle in (a slight zoom-out) as they appear
 *   5. covers, cards and portraits respond gently to the pointer
 */

/* 1 · Page transitions (same-site navigation, supporting browsers only) */
@view-transition { navigation: auto; }
.dwr-mast { view-transition-name: dwr-mast; }
.dwr-nav { view-transition-name: dwr-nav; }
::view-transition-old(root) { animation: dwr-vt-out .22s ease both; }
::view-transition-new(root) { animation: dwr-vt-in .38s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes dwr-vt-out { to { opacity: 0; } }
@keyframes dwr-vt-in { from { opacity: 0; transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* 2 · Reading line */
.dwr-motion .dwr-nav::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%; background: var(--dwr-gold); opacity: .85; transform: scaleX(var(--dwr-scroll, 0)); transform-origin: left; pointer-events: none; }

/* 3 · Cards and covers rise into place in sequence (the theme's own reveal handles whole sections) */
.dwr-motion :is(.dwr-shelf2 > li, .dwr-edition, .dwr-latest-list > li, .dwr-person) { transition: opacity .7s ease, transform .8s cubic-bezier(.16, 1, .3, 1); transition-delay: calc(var(--i, 0) * 70ms); }
.dwr-motion :is(.dwr-shelf2 > li, .dwr-edition, .dwr-latest-list > li, .dwr-person):not(.is-in) { opacity: 0; transform: translateY(16px); }

/* 4 · Photographs settle in */
.dwr-motion :is(.dwr-latest-media, .dwr-story-frame, .dwr-director-photo .dwr-portrait) img { transition: transform 1.2s cubic-bezier(.16, 1, .3, 1), opacity .8s ease; }
.dwr-motion :is(.dwr-latest-lead, .dwr-director):not(.is-in) :is(.dwr-latest-media, .dwr-director-photo .dwr-portrait) img { opacity: 0; transform: scale(1.05); }

/* 5 · Pointer: covers lift, portraits brighten, buttons press */
.dwr-motion .dwr-flatcover { transition: transform .45s cubic-bezier(.16, 1, .3, 1), box-shadow .45s cubic-bezier(.16, 1, .3, 1); }
.dwr-motion .dwr-person-photo img { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.dwr-motion .dwr-person:hover .dwr-person-photo img { transform: scale(1.06); }
.dwr-motion .dwr-btn { transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; }
.dwr-motion .dwr-btn:active { transform: translateY(1px); }

/* ================================================================================================================
 * 6 · Interactive layer (Father's request, 31 Oct 2026): the page answers the reader's pointer and scroll.
 *     Everything stays short and gentle; all of it is off for visitors who ask for reduced motion.
 * ================================================================================================================ */

/* Hero photograph: a slow settle (Ken Burns) on arrival, then a light parallax as the page scrolls (dwr-motion.js) */
@keyframes dwr-kenburns { from { transform: scale(1.16); } to { transform: scale(1.08); } }
.dwr-motion .dwr-story-frame { overflow: hidden; display: block; }
.dwr-motion .dwr-story-frame img { animation: dwr-kenburns 9s cubic-bezier(.16, 1, .3, 1) both; translate: 0 var(--dwr-par, 0px); }

/* Current-issue band slides up after the lead story */
@keyframes dwr-band-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.dwr-motion .dwr-issuebar-issue, .dwr-motion .dwr-issuebar-director { animation: dwr-band-in .9s cubic-bezier(.16, 1, .3, 1) both; }
.dwr-motion .dwr-issuebar-issue { animation-delay: .55s; }
.dwr-motion .dwr-issuebar-director { animation-delay: .7s; }

/* Menu: a gold underline slides in under the hovered item */
.dwr-motion .dwr-menu a { position: relative; }
.dwr-motion .dwr-menu a::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: 6px; height: 2px; background: var(--dwr-gold); transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
.dwr-motion .dwr-menu a:hover::after, .dwr-motion .dwr-menu a:focus-visible::after { transform: scaleX(1); }

/* Buttons: arrow nudges forward, a soft light passes across, and a ripple answers the click */
.dwr-motion :is(.dwr-btn, .dwr-link) svg { transition: transform .3s cubic-bezier(.16, 1, .3, 1); }
.dwr-motion :is(.dwr-btn, .dwr-link):hover svg { transform: translateX(4px); }
.dwr-motion .dwr-btn { position: relative; overflow: hidden; isolation: isolate; }
.dwr-motion .dwr-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .22) 50%, transparent 70%); transform: translateX(-120%); transition: transform .8s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.dwr-motion .dwr-btn:hover::before { transform: translateX(120%); }
.dwr-ripple { position: absolute; border-radius: 50%; pointer-events: none; background: rgba(255, 255, 255, .35); transform: scale(0); animation: dwr-ripple .65s ease-out forwards; }
@keyframes dwr-ripple { to { transform: scale(2.6); opacity: 0; } }

/* Newsletter covers: lift towards the reader with a light sweeping across the paper */
.dwr-motion .dwr-flatcover { overflow: hidden; }
.dwr-motion .dwr-flatcover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-130%); transition: transform 1s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.dwr-motion .dwr-flatcover:hover { transform: translateY(-6px); box-shadow: 0 2px 6px rgba(22, 26, 23, .1), 0 26px 50px -22px rgba(22, 26, 23, .45); }
.dwr-motion .dwr-flatcover:hover::after { transform: translateX(130%); }

/* Article cards and lists: lift, photo zooms gently, title turns green */
.dwr-motion :is(.dwr-latest-list > li, .dwr-edition, .dwr-shelf2 > li):hover { transform: translateY(-3px); }
.dwr-motion .dwr-latest-media { overflow: hidden; }
.dwr-motion .dwr-latest-media img { transition: transform 1s cubic-bezier(.16, 1, .3, 1), opacity .8s ease; }
.dwr-motion .dwr-latest-lead:hover .dwr-latest-media img { transform: scale(1.05); }
.dwr-motion :is(.dwr-latest-lead, .dwr-latest-list > li) :is(h3, h2) a { transition: color .25s ease; }
.dwr-motion :is(.dwr-latest-lead, .dwr-latest-list > li):hover :is(h3, h2) a { color: var(--dwr-green); }

/* Editorial board: a gold ring and a small lift on the hovered portrait */
.dwr-motion .dwr-person-photo { transition: box-shadow .35s ease, transform .45s cubic-bezier(.16, 1, .3, 1); }
.dwr-motion .dwr-person:hover .dwr-person-photo { transform: translateY(-3px); box-shadow: 0 0 0 3px var(--dwr-card), 0 0 0 5px var(--dwr-gold), 0 14px 28px -14px rgba(22, 26, 23, .45); }
.dwr-motion :is(.dwr-issuebar-portrait, .dwr-story-avatar) { transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease; }
.dwr-motion :is(.dwr-issuebar-director, .dwr-story-byline):hover :is(.dwr-issuebar-portrait, .dwr-story-avatar) { transform: scale(1.06); box-shadow: 0 0 0 3px var(--dwr-gold-soft); }

/* Language pills and icon buttons: a soft press; the sun/moon turns */
.dwr-motion :is(.dwr-langnav a, .dwr-icon-btn, .dwr-search-btn) { transition: background .2s ease, color .2s ease, transform .2s ease; }
.dwr-motion :is(.dwr-langnav a, .dwr-icon-btn, .dwr-search-btn):active { transform: scale(.94); }
.dwr-motion .dwr-mode-btn svg { transition: transform .5s cubic-bezier(.16, 1, .3, 1); }
.dwr-motion .dwr-mode-btn:hover svg { transform: rotate(-20deg) scale(1.1); }

/* Social icons in the footer: rise with a small tilt */
.dwr-motion .dwr-social :is(a, .dwr-social-soon) { transition: transform .3s cubic-bezier(.16, 1, .3, 1), background .2s ease, color .2s ease; }
.dwr-motion .dwr-social :is(a, .dwr-social-soon):hover { transform: translateY(-3px) rotate(-4deg); }

/* ================================================================================================================
 * 7 · Living movement (Father's request): a moving news bar, drifting light on the dark green bands and a
 *     shimmering gold line on the header. Calm speeds; paused on hover; off for visitors who ask for reduced motion.
 * ================================================================================================================ */

/* News bar under the menu (markup in partials/_dwr_header.php; works without JavaScript) */
.dwr-ticker { position: relative; display: flex; align-items: stretch; background: linear-gradient(90deg, #1d3328, #27443a 50%, #1d3328); color: #f4f1e8; border-bottom: 1px solid rgba(220, 201, 160, .35); font: 500 .875rem/1 var(--dwr-f-sans); overflow: hidden; }
.dwr-ticker-label { flex: none; display: inline-flex; align-items: center; gap: 9px; padding: 0 18px 0 clamp(16px, 4vw, 40px); background: #a8844a; color: #1d3328; font-weight: 700; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; position: relative; z-index: 2; }
.dwr-ticker-label::after { content: ""; position: absolute; right: -14px; top: 0; bottom: 0; width: 14px; background: #a8844a; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.dwr-ticker-dot { width: 8px; height: 8px; border-radius: 50%; background: #1d3328; box-shadow: 0 0 0 0 rgba(29, 51, 40, .55); animation: dwr-pulse 1.8s ease-out infinite; }
@keyframes dwr-pulse { 0% { box-shadow: 0 0 0 0 rgba(29, 51, 40, .55); } 70% { box-shadow: 0 0 0 9px rgba(29, 51, 40, 0); } 100% { box-shadow: 0 0 0 0 rgba(29, 51, 40, 0); } }
.dwr-ticker-viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.dwr-ticker-track { display: flex; width: max-content; animation: dwr-ticker 55s linear infinite; }
.dwr-ticker:hover .dwr-ticker-track, .dwr-ticker:focus-within .dwr-ticker-track { animation-play-state: paused; }
.dwr-ticker-list { display: flex; margin: 0; padding: 0 0 0 28px; list-style: none; }
.dwr-ticker-list li { display: flex; align-items: center; white-space: nowrap; }
.dwr-ticker-list li::after { content: "✦"; margin: 0 22px; color: #dcc9a0; font-size: .7rem; }
.dwr-ticker-list a { display: block; padding: 12px 0; color: #f4f1e8; text-decoration: none; transition: color .2s ease; }
.dwr-ticker-list a:hover, .dwr-ticker-list a:focus-visible { color: #dcc9a0; text-decoration: underline; text-underline-offset: 4px; }
@keyframes dwr-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 575.98px) { .dwr-ticker { font-size: .8125rem; } .dwr-ticker-label { padding-inline: 12px 10px; letter-spacing: .08em; } .dwr-ticker-track { animation-duration: 45s; } }
@media (prefers-reduced-motion: reduce) {
    .dwr-ticker-track { animation: none; }
    .dwr-ticker-viewport { overflow-x: auto; mask-image: none; -webkit-mask-image: none; }
    .dwr-ticker-list[aria-hidden="true"] { display: none; }
    .dwr-ticker-dot { animation: none; }
}

/* Dark green bands (current issue, newsletter spotlight, footer): a slow glow of gold and sage drifting across */
@keyframes dwr-aurora { 0% { background-position: 0% 50%, 100% 50%; } 50% { background-position: 100% 30%, 0% 70%; } 100% { background-position: 0% 50%, 100% 50%; } }
.dwr-motion :is(.dwr-issuebar, .dwr-spot, .dwr-footer) { position: relative; isolation: isolate; }
.dwr-motion :is(.dwr-issuebar, .dwr-spot, .dwr-footer)::before { content: ""; display: block; border: 0; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(40% 120% at 20% 40%, rgba(220, 201, 160, .16), transparent 70%), radial-gradient(45% 130% at 80% 60%, rgba(121, 183, 145, .20), transparent 70%);
    background-size: 160% 160%, 170% 170%; animation: dwr-aurora 18s ease-in-out infinite; }
/* a band of light crosses the current-issue bar every few seconds */
@keyframes dwr-sweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
.dwr-motion .dwr-issuebar { overflow: hidden; }
.dwr-motion .dwr-issuebar::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(100deg, transparent 35%, rgba(244, 241, 232, .09) 50%, transparent 65%); animation: dwr-sweep 7s ease-in-out infinite; }

/* Header: a thin gold line with light running along it */
@keyframes dwr-shimmer { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.dwr-motion :is(.dwr-mast, .dwr-mbar) { position: relative; }
.dwr-motion :is(.dwr-mast, .dwr-mbar)::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; pointer-events: none; z-index: 5;
    background: linear-gradient(90deg, #a8844a, #dcc9a0, #79b791, #dcc9a0, #a8844a); background-size: 200% 100%; animation: dwr-shimmer 6s linear infinite; }

/* Lead story kicker: the small gold dash breathes */
@keyframes dwr-breathe { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
.dwr-motion .dwr-story-kicker::before { animation: dwr-breathe 3.2s ease-in-out infinite; }