/* ============================================================================
   SITE REDESIGN — applies the homepage "Editorial Elevated" language to the
   WHOLE site: living aurora background on every page, animated serif banner
   headers for list/category/tag/post pages, and smooth cross-page transitions.
   Loaded in baseof.html on every page. Reuses professional.css color tokens.
   ========================================================================== */

:root{
  --sky:#A7C7E7; --lavender:#C9C2DE;
  --rdx-e:cubic-bezier(.16,1,.3,1);
}
html.dark, [data-theme="dark"]{ --sky:#5E7E9E; --lavender:#8F86AE; }

/* ─── Smooth cross-page transitions (View Transitions API) ──────────────────
   Progressive enhancement: Chrome/Edge animate page navigation; other browsers
   simply navigate normally. Same-origin only; anchor (#) jumps are unaffected. */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation:rdx-vt-out .32s var(--rdx-e) both; }
::view-transition-new(root){ animation:rdx-vt-in .42s var(--rdx-e) both; }
@keyframes rdx-vt-out{ to{ opacity:0; transform:translateY(-6px) } }
@keyframes rdx-vt-in{ from{ opacity:0; transform:translateY(10px) } }

/* ─── Living aurora + grain (fixed, behind everything, ALL pages) ──────────── */
.rdx-aurora{position:fixed; inset:-55%; z-index:0; pointer-events:none; opacity:.5; filter:blur(38px);
  background:
    radial-gradient(34% 34% at 24% 30%, color-mix(in srgb,var(--forest-pale) 92%, transparent), transparent 70%),
    radial-gradient(30% 30% at 76% 34%, color-mix(in srgb,var(--sky) 58%, transparent), transparent 70%),
    radial-gradient(40% 40% at 56% 82%, color-mix(in srgb,var(--lavender) 52%, transparent), transparent 70%),
    radial-gradient(26% 26% at 85% 76%, color-mix(in srgb,var(--ochre) 38%, transparent), transparent 72%);
  animation:rdx-aurora 70s linear infinite; will-change:transform}
@keyframes rdx-aurora{0%{transform:rotate(0deg) scale(1.08)}50%{transform:rotate(180deg) scale(1.22)}100%{transform:rotate(360deg) scale(1.08)}}
html.dark .rdx-aurora{opacity:.34}
.rdx-grain{position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html.dark .rdx-grain{mix-blend-mode:screen; opacity:.07}

/* keep real content above the fixed aurora (z-0). The header MUST stack above
   main, or the theme's dropdown menus (theme/color-scheme) render behind the
   page content and become unclickable. (Bugfix 2026-06-13.) */
body > main, body > footer{ position:relative; z-index:1 }
body > header{ position:relative; z-index:50 }

/* ─── Animated serif banner (list / category / tag pages) ──────────────────── */
.rdx-banner{position:relative; z-index:2; text-align:center; max-width:880px; margin:0 auto; padding:5.5rem 1.5rem 1rem}
.rdx-banner-eyebrow{display:inline-flex; align-items:center; gap:.7rem; font-family:var(--font-body);
  font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:1.2rem;
  opacity:0; animation:rdx-up .7s var(--rdx-e) .05s both}
.rdx-banner-eyebrow::before, .rdx-banner-eyebrow::after{content:''; width:24px; height:1.5px; background:var(--forest)}
.rdx-banner-title{font-family:var(--font-display); font-weight:400; letter-spacing:-.025em; line-height:1.04;
  font-size:clamp(2.4rem,6vw,4rem); margin:0 0 .6rem; color:var(--charcoal); position:relative;
  opacity:0; animation:rdx-up .8s var(--rdx-e) .15s both}
.rdx-banner-title .accent{color:var(--forest); font-style:italic}
.rdx-banner-title::after{content:''; position:absolute; left:50%; bottom:-.5rem; width:46px; height:3px; border-radius:3px;
  background:var(--forest); transform:translateX(-50%) scaleX(0); transform-origin:center;
  animation:rdx-grow .7s var(--rdx-e) .55s both}
.rdx-banner-sub{font-family:var(--font-body); color:var(--muted); font-size:1.02rem; margin:1rem 0 0;
  opacity:0; animation:rdx-up .8s var(--rdx-e) .3s both}

@keyframes rdx-up{from{opacity:0; transform:translateY(22px)} to{opacity:1; transform:none}}
@keyframes rdx-grow{from{transform:translateX(-50%) scaleX(0)} to{transform:translateX(-50%) scaleX(1)}}

/* stagger the list rows in under the banner */
.pro-archives .pro-post-item, .pro-archives .pro-archive-item, .pro-archives .pro-year{
  opacity:0; animation:rdx-up .6s var(--rdx-e) both}
.pro-archives .pro-post-item:nth-child(1){animation-delay:.30s}
.pro-archives .pro-post-item:nth-child(2){animation-delay:.36s}
.pro-archives .pro-post-item:nth-child(3){animation-delay:.42s}
.pro-archives .pro-post-item:nth-child(4){animation-delay:.48s}
.pro-archives .pro-post-item:nth-child(5){animation-delay:.54s}
.pro-archives .pro-post-item:nth-child(n+6){animation-delay:.6s}
.pro-archives .pro-year:nth-child(1){animation-delay:.30s}
.pro-archives .pro-year:nth-child(2){animation-delay:.40s}
.pro-archives .pro-year:nth-child(n+3){animation-delay:.5s}

/* ─── Post page: serif title (font-bug fix) + entrance ──────────────────────
   Was bold sans while the in-article headings are serif — unify the title to
   the display serif so the page reads consistently. */
.post-meta h1{ font-family:var(--font-display) !important; font-weight:400 !important; letter-spacing:-.02em; line-height:1.1 }
.post-main-content > .breadcrumb, .post-main-content nav[aria-label],
.post-meta{ animation:rdx-up .7s var(--rdx-e) both }
.post-meta{ animation-delay:.08s }

@media (prefers-reduced-motion: reduce){
  .rdx-aurora{ animation:none }
  ::view-transition-old(root), ::view-transition-new(root){ animation:none }
  .rdx-banner-eyebrow, .rdx-banner-title, .rdx-banner-sub, .rdx-banner-title::after,
  .pro-archives .pro-post-item, .pro-archives .pro-archive-item, .pro-archives .pro-year, .post-meta{
    opacity:1; transform:none; animation:none }
}