/* Ambient motion, round 2: node-graph banner, page background, card spotlight, marquee.
   Own file, loaded after polish.css. Everything that moves stops for visitors who ask for reduced motion. */

/* ---------- banner (replaces the leaf-spine drawing) ---------- */
.net-strip { min-height: 150px; }
.net-strip .ns-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.net-strip .ns-text { max-width: 60%; gap: 8px; }
.net-strip .ns-text b { font-size: 26px; text-shadow: 0 2px 14px rgba(20,28,18,.5); }
.net-strip .ns-kicker { font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: #d6b45f; font-weight: 700; }
.net-strip .ns-rot-line { font-size: 14px; letter-spacing: .04em; text-transform: none; color: #d9e2cf; font-weight: 400; }
.ns-rot { display: inline-block; font-style: normal; font-weight: 800; color: #f0d989; min-width: 7ch; transition: opacity .35s ease, transform .35s ease; }
.ns-rot.out { opacity: 0; transform: translateY(6px); }

/* ---------- page background (desktop only; JS creates these) ---------- */
.amb-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.amb-aurora i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; will-change: transform; }
.amb-aurora i:nth-child(1) { left: -15vmax; top: -10vmax; background: radial-gradient(circle, rgba(214,180,95,.34), transparent 62%); animation: amb-drift1 38s ease-in-out infinite alternate; }
.amb-aurora i:nth-child(2) { right: -20vmax; bottom: -20vmax; background: radial-gradient(circle, rgba(70,120,70,.30), transparent 62%); animation: amb-drift2 46s ease-in-out infinite alternate; }
.amb-aurora i:nth-child(3) { left: 30vw; top: 35vh; width: 40vmax; height: 40vmax; background: radial-gradient(circle, rgba(255,106,43,.14), transparent 62%); animation: amb-drift1 54s ease-in-out infinite alternate-reverse; }
@keyframes amb-drift1 { to { transform: translate(14vw, 12vh) scale(1.15); } }
@keyframes amb-drift2 { to { transform: translate(-16vw, -10vh) scale(1.1); } }
.amb-bg { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.wrapper { position: relative; z-index: 1; }
/* the homepage content area had a solid fill that hid the background, so the fill moves to the body */
body:has(.amb-bg):has(.home-page) { background-color: #f0f5ec; }
body:has(.amb-bg) .home-page, body:has(.amb-bg):has(.home-page) .content-box { background: transparent; }

/* ---------- card spotlight ---------- */
.home-posts .post, .home-rail .rail-card { position: relative; }
.home-posts .post::after, .home-rail .rail-card:not(.play-card)::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s ease; border-radius: inherit;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(214,180,95,.20), transparent 65%);
}
.home-posts .post:hover::after, .home-rail .rail-card:hover::after { opacity: 1; }

/* ---------- rail headings: underline draws itself ---------- */
.home-rail .rail-card h3 { position: relative; display: inline-block; padding-bottom: 4px; }
.home-rail .rail-card h3::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; border-radius: 3px; background: linear-gradient(90deg, #d6b45f, #ff6a2b); transform: scaleX(0); transform-origin: 0 50%; animation: amb-draw 1.1s .3s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes amb-draw { to { transform: scaleX(1); } }

/* ---------- sidebar: floating avatar and a gold shine across the name ---------- */
.sidebar .cover-author-image img { animation: amb-float 6s ease-in-out infinite; }
@keyframes amb-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.sidebar .author-name { background: linear-gradient(90deg, #f8faf2 0 40%, #f0d989 50%, #f8faf2 60% 100%) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: amb-shine 7s linear infinite; }
@keyframes amb-shine { to { background-position: -250% 0; } }

/* ---------- topic marquee ---------- */
.amb-marquee { overflow: hidden; margin: 0 0 22px; padding: 10px 0; border-radius: 999px; border: 1px solid #ded4b8; background: rgba(251,248,239,.85); -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.amb-track { display: flex; width: max-content; gap: 12px; animation: amb-scroll 38s linear infinite; }
.amb-marquee:hover .amb-track { animation-play-state: paused; }
.amb-track a { white-space: nowrap; padding: 4px 14px; border-radius: 999px; background: #2f3d2c; color: #f8faf2 !important; font: 700 13px 'Lato', system-ui, sans-serif; text-decoration: none !important; }
.amb-track a:nth-child(3n+2) { background: #d6b45f; color: #2f3d2c !important; }
.amb-track a:nth-child(3n) { background: #fff; color: #2f3d2c !important; border: 1px solid #d6b45f; }
@keyframes amb-scroll { to { transform: translateX(-50%); } }

/* ---------- footer line ---------- */
.page-footer { position: relative; }
.page-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, #d6b45f, #ff6a2b, #d6b45f, transparent) 0 0 / 200% 100%; animation: amb-line 6s linear infinite; }
@keyframes amb-line { to { background-position: -200% 0; } }

@media only screen and (max-width: 768px) {
  .net-strip { min-height: 170px; }
  .net-strip .ns-text { max-width: 100%; }
  .net-strip .ns-text b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .amb-aurora i, .sidebar .cover-author-image img, .sidebar .author-name, .amb-track, .page-footer::before, .home-rail .rail-card h3::after { animation: none !important; }
  .home-rail .rail-card h3::after { transform: none; }
  .sidebar .author-name { -webkit-text-fill-color: currentColor; background: none; }
  .amb-track { flex-wrap: wrap; width: auto; justify-content: center; }
  .ns-rot { transition: none; }
}

/* ---------- frosted-glass cards: the background shows through, softly blurred, as if the cards float above it ---------- */
body:has(.amb-bg) .home-posts .post,
body:has(.amb-bg) .home-rail .rail-card:not(.play-card):not(.youtube-card) {
  background: rgba(251,248,239,.52); border-color: rgba(255,255,255,.75);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 10px 30px rgba(47,61,44,.10), inset 0 1px 0 rgba(255,255,255,.8);
}
body:has(.amb-bg) .home-posts .post .post-thumbnail { background-color: rgba(243,238,224,.30); }
body:has(.amb-bg) .home-posts .post:hover { background: rgba(251,248,239,.66); }
body:has(.amb-bg) .amb-marquee { background: rgba(251,248,239,.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ---------- post pages: calm wave header above the title ---------- */
.amb-post-hero { display: block; width: 100%; height: 84px; margin: 0 0 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(47,61,44,.06), rgba(214,180,95,.14)); }
@media only screen and (max-width: 768px) { .amb-post-hero { height: 64px; border-radius: 12px; } }

/* ---------- wide screens: the homepage now fills the width instead of stopping at 1460px ---------- */
@media only screen and (min-width: 1181px) {
  .home-page-with-rail { max-width: 1840px; margin: 0 auto; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; }
}

/* ---------- glass, round 2: coloured orbs glide behind the cards so the frosting is easy to see ---------- */
.amb-aurora b { position: absolute; width: 300px; height: 300px; border-radius: 50%; will-change: transform; opacity: .85; }
.amb-aurora b:nth-of-type(1) { left: 22%; top: 12%; background: radial-gradient(circle at 35% 35%, rgba(240,200,90,.75), rgba(240,200,90,0) 68%); animation: amb-roam1 26s ease-in-out infinite alternate; }
.amb-aurora b:nth-of-type(2) { left: 55%; top: 40%; width: 360px; height: 360px; background: radial-gradient(circle at 40% 40%, rgba(90,160,110,.60), rgba(90,160,110,0) 68%); animation: amb-roam2 31s ease-in-out infinite alternate; }
.amb-aurora b:nth-of-type(3) { left: 38%; top: 62%; width: 260px; height: 260px; background: radial-gradient(circle at 40% 40%, rgba(255,120,60,.55), rgba(255,120,60,0) 68%); animation: amb-roam3 23s ease-in-out infinite alternate; }
.amb-aurora b:nth-of-type(4) { left: 70%; top: 8%; width: 280px; height: 280px; background: radial-gradient(circle at 40% 40%, rgba(80,150,200,.45), rgba(80,150,200,0) 68%); animation: amb-roam4 34s ease-in-out infinite alternate; }
.amb-aurora b:nth-of-type(5) { left: 8%; top: 55%; width: 240px; height: 240px; background: radial-gradient(circle at 40% 40%, rgba(180,120,200,.38), rgba(180,120,200,0) 68%); animation: amb-roam2 29s ease-in-out infinite alternate-reverse; }
@keyframes amb-roam1 { to { transform: translate(30vw, 40vh); } }
@keyframes amb-roam2 { to { transform: translate(-35vw, -25vh); } }
@keyframes amb-roam3 { to { transform: translate(28vw, -35vh); } }
@keyframes amb-roam4 { to { transform: translate(-30vw, 45vh); } }
body:has(.amb-bg) .home-posts .post,
body:has(.amb-bg) .home-rail .rail-card:not(.play-card):not(.youtube-card) {
  background: rgba(255,252,243,.30); border-color: rgba(255,255,255,.85);
  -webkit-backdrop-filter: blur(18px) saturate(1.7); backdrop-filter: blur(18px) saturate(1.7);
}
body:has(.amb-bg) .home-posts .post:hover { background: rgba(255,252,243,.50); }
body:has(.amb-bg) .home-posts .post .post-thumbnail { background-color: rgba(243,238,224,.12); }
@media (prefers-reduced-motion: reduce) { .amb-aurora b { animation: none !important; } }

/* ---------- thumbnails: cut-out PNGs (background removed in the file itself) float on the glass; the others stay as they were ---------- */
body:has(.amb-bg) .home-posts .post .post-thumbnail { background-color: transparent; }
body:has(.amb-bg) .home-posts .post .post-thumbnail.thumb-cut { background-origin: content-box; padding: 14px 18px; filter: drop-shadow(0 6px 10px rgba(47,61,44,.20)); }

/* ---------- right panels scroll on their own: wheel over the panel moves the panel, not the page ---------- */
@media only screen and (min-width: 1181px) {
  .post-rail { max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(214,180,95,.8) transparent; }
  .home-rail { max-height: calc(100vh - 72px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(214,180,95,.8) transparent; }
  .post-rail::-webkit-scrollbar, .home-rail::-webkit-scrollbar { width: 6px; }
  .post-rail::-webkit-scrollbar-thumb, .home-rail::-webkit-scrollbar-thumb { background: rgba(214,180,95,.8); border-radius: 6px; }
  /* the cards inside need room so hover lift and shadow are not clipped by the scroll box */
  .home-rail { padding: 6px 8px 8px 2px; margin: -6px -8px -8px -2px; }
}