/* Shared base for every page except suan.html and brand.html, which carry their own styles.
   Loaded after ds.css and before each page's own <style>, which keeps the page-specific
   layout and responsive rules. Hover and focus rules are appended by build.mjs. */

/* The old client-side runtime set this on every page; kept so nothing shifts. */
html, body { height: 100%; margin: 0; }

body { margin: 0; background: #f3f2f2; color: #201f1d; font-family: "Lora", serif; }
a { color: #7d5411; text-decoration: none; }
a:hover { color: #b68235; }
::selection { background: #ffe3bf; }
:focus-visible { outline: 2px solid #b68235; outline-offset: 2px; }
html { scroll-behavior: smooth; }

/* Elements site.js shows and hides carry inline display styles, so the attribute needs to win. */
[hidden] { display: none !important; }

@keyframes twp-drift { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* the island breathes: a very slow push in, so the two figures never sit perfectly still */
@keyframes twp-tide { from { transform: scale(1.015) translate3d(0, 0, 0); } to { transform: scale(1.055) translate3d(-0.9%, -0.8%, 0); } }
@keyframes twp-cloud { from { transform: scale(1.02) translate3d(-1.4%, 0, 0); } to { transform: scale(1.06) translate3d(1.4%, 1%, 0); } }
@keyframes twp-island { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -5px, 0); } }
@keyframes twp-haar { from { transform: translate3d(-4%, 0, 0); opacity: 0.5; } to { transform: translate3d(4%, -1.5%, 0); opacity: 0.8; } }
/* A drop gathers on an edge, swells, lets go and falls (the Suan notice on the home page). */
@keyframes twp-drip {
  0%   { opacity: 0;    transform: translate3d(0, 0, 0) scale(0.3, 0.3); }
  12%  { opacity: 0.9;  transform: translate3d(0, 0, 0) scale(0.7, 0.6); }
  58%  { opacity: 1;    transform: translate3d(0, 0, 0) scale(1, 1.15); }
  66%  { opacity: 1;    transform: translate3d(0, 3px, 0) scale(0.85, 1.6); }
  100% { opacity: 0;    transform: translate3d(0, 64px, 0) scale(0.7, 2.2); }
}
@keyframes twp-fall { from { transform: translate3d(0, -30vh, 0); } to { transform: translate3d(0, 122vh, 0); } }

/* Every animation stops under reduced motion: the hero push-in and haar, the rain, the footer island,
   the poem panels' drift-in, and anything added later. The blanket rule matches suan.html's; the named
   rules stay so the intent is readable. The rain is also hidden, so its streaks don't sit frozen. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
  html { scroll-behavior: auto; }
  [data-hero-art], [data-hero-haar], [data-rain], [data-foot-island] { animation: none !important; }
  [data-hero-rain] { opacity: 0 !important; }
}

/* Generated by build.mjs from style-hover / style-focus attributes in src/. Do not edit here. */
.hv-1:hover { background: #1a2238 !important }
.hv-2:hover { box-shadow: 0 12px 32px rgba(26,25,23,0.3) !important; border-color: rgba(182,130,53,0.6) !important }
.hv-3:hover { background: rgba(182,130,53,0.16) !important; color: #f3f2f2 !important }
.hv-4:hover { background: rgba(182,130,53,0.16) !important; border-color: #e1ad66 !important }
.hv-5:hover { border-color: #e1ad66 !important }
.hv-6:hover { background: rgba(182,130,53,0.14) !important; border-color: rgba(182,130,53,0.9) !important }
.hv-7:hover { box-shadow: 0 10px 28px rgba(45,43,43,0.14) !important; border-color: rgba(182,130,53,0.55) !important }
.hv-8:hover { color: #201f1d !important; border-bottom-color: #b68235 !important }
.hv-9:hover { background: #fff3e4 !important }
.hv-10:hover { background: #fff3e4 !important; color: #5a3b0a !important }
.hv-11:hover { border-bottom-color: #b68235 !important }
.hv-12:hover { border-color: #b68235 !important; background: #fff !important }
.hv-13:hover { background: #eae9e9 !important; padding-left: 22.4px !important }
.hv-14:hover { box-shadow: 0 18px 44px rgba(45,43,43,0.22) !important; transform: translateY(-4px) !important }
.hv-15:hover { box-shadow: 0 14px 36px rgba(45,43,43,0.2) !important; transform: translateY(-4px) !important }
.hv-16:hover { box-shadow: 0 12px 32px rgba(45,43,43,0.18) !important; transform: translateY(-5px) !important; border-color: rgba(182,130,53,0.55) !important }
.hv-17:hover { border-color: rgba(182,130,53,0.55) !important; background: #eae9e9 !important; transform: translateY(-4px) !important }
.hv-18:hover { background: #eae9e9 !important }
.hv-19:hover { border-color: rgba(182,130,53,0.6) !important; box-shadow: 0 12px 32px rgba(26,25,23,0.28) !important }
.fc-1:focus { border-color: #b68235 !important; outline: none !important }
.hv-20:hover { background: #f3f2f2 !important; color: #5a3b0a !important }
.hv-21:hover { background: #fff3e4 !important; border-color: #b68235 !important }
.hv-22:hover { background: rgba(182,130,53,0.18) !important }
.hv-23:hover { background: rgba(182,130,53,0.14) !important }
.hv-24:hover { border-color: rgba(182,130,53,0.6) !important; box-shadow: 0 12px 32px rgba(26,25,23,0.3) !important; transform: translateY(-3px) !important }