/* =========================================================
   THE SOUL & SCRIPT — animations.css
   Reusable motion system: keyframes, scroll-reveal utility
   classes, hover motion, and one unique abstract .hero-*
   background per section (Writing, Gallery, Film & Talks,
   Events, Reflections, Manifesto, Team, Contact, Home).
   Loaded on EVERY page, after misc.css.
   ========================================================= */

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

/* ---------- Keyframes ---------- */
@keyframes drift-a{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(24px,18px) scale(1.06); } }
@keyframes drift-b{ 0%,100%{ transform: translate(0,0) scale(1); } 50%{ transform: translate(-22px,-14px) scale(0.96); } }
@keyframes drift-c{ 0%,100%{ transform: translate(0,0); } 50%{ transform: translate(14px,-20px); } }
@keyframes morph-blob{ 0%,100%{ border-radius: 42% 58% 62% 38% / 48% 40% 60% 52%; } 50%{ border-radius: 60% 40% 38% 62% / 38% 62% 38% 62%; } }
@keyframes spin-slow{ to{ transform: rotate(360deg); } }
@keyframes spin-slow-rev{ to{ transform: rotate(-360deg); } }
@keyframes sweep-light{ 0%{ transform: translateX(-60%) skewX(-12deg); } 100%{ transform: translateX(160%) skewX(-12deg); } }
@keyframes twinkle{ 0%,100%{ opacity:.35; } 50%{ opacity:1; } }
@keyframes swash-draw{ 0%{ stroke-dashoffset: 480; } 45%{ stroke-dashoffset: 0; } 100%{ stroke-dashoffset: -480; } }
@keyframes ripple-out{ 0%{ transform: scale(0.6); opacity:.5; } 100%{ transform: scale(1.9); opacity:0; } }
@keyframes fade-up{ from{ opacity:0; transform: translateY(16px); } to{ opacity:1; transform: translateY(0); } }
@keyframes soft-pulse{ 0%,100%{ opacity:.55; } 50%{ opacity:.9; } }

/* ---------- Scroll reveal ---------- */
.reveal{ opacity:0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-visible{ opacity:1; transform: translateY(0); }

/* ---------- Hover motion on cards / links (adds to existing rules, doesn't replace) ---------- */
.card, .side-card, .hero-card, .team-card, .video-card, .photo-card{
  transition: transform .35s var(--ease), box-shadow .35s var(--ease);
}
.card:hover, .side-card:hover, .hero-card:hover, .video-card:hover, .photo-card:hover{
  transform: translateY(-4px);
}
.nav-cta{ transition: transform .25s var(--ease), box-shadow .25s var(--ease); }
.nav-cta:hover{ transform: translateY(-2px); }
.btn{ transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.btn:hover{ transform: translateY(-2px); }

/* ---------- Page hero shell ---------- */
.page-hero{
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  margin: 18px 0 30px;
  padding: 56px 24px 48px;
  text-align:center;
  isolation: isolate;
}
.page-hero .hero-inner{ position:relative; z-index:2; }
.page-hero .kicker-sm{
  font-family: var(--utility); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  opacity:.85; margin-bottom:10px; animation: fade-up .7s var(--ease) .05s both;
}
.page-hero h1{
  font-family: var(--display); font-weight:700; font-style:italic; font-size:clamp(2rem,5vw,3.1rem);
  margin:0 0 10px; animation: fade-up .7s var(--ease) .15s both;
}
.page-hero p{
  font-family: var(--body); font-size:15.5px; max-width:560px; margin:0 auto; opacity:.92;
  animation: fade-up .7s var(--ease) .28s both;
}
.page-hero .hero-decor{ position:absolute; inset:0; z-index:1; pointer-events:none; }
.page-hero svg.hero-swash{ position:absolute; inset:0; width:100%; height:100%; }
.page-hero .hero-swash path{ stroke-dasharray:480; stroke-dashoffset:480; animation: swash-draw 9s ease-in-out infinite; }
.page-hero .hero-swash path.s2{ animation-delay: 1.4s; }

/* ---- Home hero (index.html) — ink wash + swash, the flagship treatment ---- */
.hero-home{ background: linear-gradient(180deg, #F8F2E8, #F1E7D8); color: var(--ink); padding: 68px 24px 56px; }
.hero-home .blob{ position:absolute; border-radius:50%; filter: blur(38px); opacity:.55; }
.hero-home .blob.b1{ width:260px; height:260px; background:#C98B7E; top:-70px; left:-50px; animation: drift-a 15s ease-in-out infinite; }
.hero-home .blob.b2{ width:220px; height:220px; background:#C79A3C; bottom:-80px; right:-20px; animation: drift-b 17s ease-in-out infinite; }
.hero-home .blob.b3{ width:170px; height:170px; background:#6E1F1F; opacity:.25; top:20px; right:22%; animation: drift-c 13s ease-in-out infinite; }
.hero-home .hero-swash path{ stroke: var(--maroon); opacity:.28; }
.hero-home .hero-swash path.s2{ stroke: var(--gold); opacity:.35; }

/* ---- Writing hero (news.html) — poetry-toned ink wash ---- */
.hero-writing{ background: linear-gradient(180deg, #F6F1EA, #F0E6D8); color: var(--ink); }
.hero-writing .blob{ position:absolute; border-radius:50%; filter: blur(34px); opacity:.5; }
.hero-writing .blob.b1{ width:220px; height:220px; background:#C98B7E; top:-60px; left:-30px; animation: drift-a 14s ease-in-out infinite; }
.hero-writing .blob.b2{ width:180px; height:180px; background:#C79A3C; bottom:-60px; right:15px; animation: drift-b 16s ease-in-out infinite; }
.hero-writing .hero-swash path{ stroke: var(--maroon); opacity:.32; }
.hero-writing .hero-swash path.s2{ stroke: var(--gold); opacity:.4; }

/* ---- Reflections hero (opinions.html) — quiet ripples ---- */
.hero-reflections{ background: linear-gradient(180deg, #F2EFE6, #EAE4D4); color: var(--ink); }
.hero-reflections .ripple{ position:absolute; border-radius:50%; border:1.5px solid var(--maroon); opacity:0; left:50%; top:58%; transform: translate(-50%,-50%); }
.hero-reflections .r1{ width:80px; height:80px; animation: ripple-out 5s ease-out infinite; }
.hero-reflections .r2{ width:80px; height:80px; animation: ripple-out 5s ease-out infinite 1.7s; }
.hero-reflections .r3{ width:80px; height:80px; animation: ripple-out 5s ease-out infinite 3.4s; }

/* ---- Gallery hero (photos.html) — morphing watercolor + soft aperture ring ---- */
.hero-gallery{ background: linear-gradient(180deg, #F3EEE3, #EFE3D1); color: var(--ink); }
.hero-gallery .wblob{ position:absolute; filter: blur(4px); opacity:.6; animation: morph-blob 8s ease-in-out infinite; }
.hero-gallery .wblob.w1{ width:150px; height:150px; background:#2C5A45; opacity:.35; top:8%; left:6%; }
.hero-gallery .wblob.w2{ width:120px; height:120px; background:#C97B6E; opacity:.35; bottom:6%; right:10%; animation-delay:1.5s; animation-direction:reverse; }
.hero-gallery .ring{ position:absolute; border-radius:50%; border:1.5px dashed var(--maroon); opacity:.22; }
.hero-gallery .ring.ra{ width:230px; height:230px; top:50%; left:50%; transform:translate(-50%,-50%); animation: spin-slow 34s linear infinite; }
.hero-gallery .ring.rb{ width:170px; height:170px; top:50%; left:50%; transform:translate(-50%,-50%); animation: spin-slow-rev 26s linear infinite; }

/* ---- Film & Talks hero (videos.html) — dark, light-sweep ---- */
.hero-film{ background: linear-gradient(180deg, #16130F, #0F0D0A); color: #F3ECDD; }
.hero-film .sweep{ position:absolute; top:-20%; bottom:-20%; width:40%; background: linear-gradient(100deg, transparent, rgba(199,154,60,.28), transparent); animation: sweep-light 6s ease-in-out infinite; }
.hero-film .grain{ position:absolute; inset:0; background: repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 2px 4px); }
.hero-film .kicker-sm, .hero-film p{ opacity:.75; }

/* ---- Events hero (events.html) — stage spotlight + twinkle ---- */
.hero-events{ background: linear-gradient(180deg, #241A3D, #1A1230); color:#F2ECFB; }
.hero-events .spot{ position:absolute; left:50%; bottom:-30%; width:420px; height:420px; transform:translateX(-50%); border-radius:50%; background: radial-gradient(circle, rgba(199,154,60,.35), transparent 65%); animation: soft-pulse 4s ease-in-out infinite; }
.hero-events .dot{ position:absolute; width:5px; height:5px; border-radius:50%; background:#C79A3C; animation: twinkle 3s ease-in-out infinite; }
.hero-events .kicker-sm, .hero-events p{ opacity:.78; }

/* ---- Manifesto hero (about.html) — constellation of thought ---- */
.hero-manifesto{ background: linear-gradient(180deg, #F5F0E6, #ECE3D0); color: var(--ink); }
.hero-manifesto .node{ position:absolute; width:5px; height:5px; border-radius:50%; background: var(--maroon); opacity:.5; animation: twinkle 4s ease-in-out infinite; }
.hero-manifesto .cline{ stroke: var(--maroon); opacity:.18; }

/* ---- Team hero (team.html) — warm paper grid ---- */
.hero-team{ background: linear-gradient(180deg, #F6F1E8, #EFE6D5); color: var(--ink); }
.hero-team .grid-lines{ position:absolute; inset:0; background-image: linear-gradient(rgba(110,31,31,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(110,31,31,.06) 1px, transparent 1px); background-size: 34px 34px; animation: fade-up 1.4s ease-out both; }
.hero-team .wblob{ position:absolute; width:160px; height:160px; filter:blur(30px); opacity:.4; background:#C79A3C; top:-40px; right:8%; border-radius:50%; animation: drift-c 12s ease-in-out infinite; }

/* ---- Contact hero (contact.html) — simple warm wash ---- */
.hero-contact{ background: linear-gradient(180deg, #F7F1E6, #F0E5D2); color: var(--ink); padding: 46px 24px 40px; }
.hero-contact .blob{ position:absolute; border-radius:50%; filter: blur(36px); opacity:.4; }
.hero-contact .blob.b1{ width:200px; height:200px; background:#C98B7E; top:-60px; right:-40px; animation: drift-b 15s ease-in-out infinite; }

/* ---- Share Your Work hero (contribute.html) — inviting warm wash ---- */
.hero-invite{ background: linear-gradient(180deg, #F8F1E4, #F1E4CC); color: var(--ink); }
.hero-invite .blob{ position:absolute; border-radius:50%; filter: blur(34px); opacity:.5; }
.hero-invite .blob.b1{ width:210px; height:210px; background:#C79A3C; top:-50px; left:-30px; animation: drift-a 13s ease-in-out infinite; }
.hero-invite .blob.b2{ width:170px; height:170px; background:#6E1F1F; opacity:.22; bottom:-50px; right:8%; animation: drift-c 16s ease-in-out infinite; }

@media (max-width: 640px){
  .page-hero{ padding: 40px 16px 34px; border-radius:14px; }
  .hero-home{ padding: 46px 16px 38px; }
}