/* Site-wide polish (Alex's checklist, docs/proposals/website-polish-checklist.md).
   Loaded after each page's own styles. One easing curve for everything; all
   motion switches off under prefers-reduced-motion. maintenance.html carries
   an inline copy because it must work with no other file. */
:root{--ease:cubic-bezier(.2,.7,.2,1)}

/* ---------- admin pages get the boxed layout too ---------- */
html:has(.shell){background:#050403 radial-gradient(ellipse at 50% 0%,rgba(122,29,24,.35),transparent 60%) fixed;min-height:100%}
html:has(.shell)::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 18% 30%,rgba(224,112,63,.10),transparent 45%),radial-gradient(ellipse at 82% 70%,rgba(201,164,92,.08),transparent 45%),repeating-linear-gradient(135deg,rgba(201,164,92,.035) 0 2px,transparent 2px 22px)}
html:has(.shell) body{max-width:1360px;margin:0 auto;min-height:100vh;background:var(--page);box-shadow:0 0 0 1px var(--line),0 0 60px rgba(0,0,0,.85);position:relative}
@media (min-width:1361px){html:has(.shell) body{border-left:1px solid var(--bronze);border-right:1px solid var(--bronze)}}

/* ---------- short pages: the footer sits at the bottom of the screen, not mid-page ---------- */
html:not(:has(.shell)) body{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
html:not(:has(.shell)) body > main{flex:1 0 auto;width:100%}
html:not(:has(.shell)) body > footer{flex-shrink:0}

/* ---------- crossfade between pages; the top bar and admin sidebar hold still ---------- */
@view-transition{navigation:auto}
.top{view-transition-name:site-top}
.ribbon{view-transition-name:site-ribbon}
.shell > .side{view-transition-name:admin-side}
::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation-duration:.2s;animation-timing-function:var(--ease)}

/* ---------- smooth in-page scrolling; the heading you land on flashes softly ---------- */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
[id]{scroll-margin-top:84px}
.flash{animation:p-flash 1.1s ease-out 1;border-radius:4px}
@keyframes p-flash{0%{background-color:rgba(201,164,92,.20);box-shadow:0 0 0 6px rgba(201,164,92,.20)}100%{background-color:transparent;box-shadow:0 0 0 6px transparent}}

/* ---------- gentle reveal (polish.js marks the elements) ---------- */
.rv{opacity:0;transform:translateY(8px)}
.rv.in{opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}

/* ---------- loading placeholders: shimmer bars shaped like rows ---------- */
.skel-on{position:relative}
.skel-on > *{visibility:hidden}
.skel-on::before{content:"";position:absolute;inset:4px 0;border-radius:6px;
  background:repeating-linear-gradient(180deg,#211b17 0 calc(var(--skel-row,48px) - 20px),transparent 0 var(--skel-row,48px));
  -webkit-mask:linear-gradient(90deg,#000 0 55%,rgba(0,0,0,.35) 80%,transparent);mask:linear-gradient(90deg,#000 0 55%,rgba(0,0,0,.35) 80%,transparent)}
.skel-on::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(255,235,210,.07) 50%,transparent 70%) no-repeat;background-size:60% 100%;animation:p-shimmer 1.1s linear infinite}
@keyframes p-shimmer{from{background-position:-150% 0}to{background-position:250% 0}}

/* ---------- hover lift on clickable cards: rises 2px, border warms toward gold ---------- */
a.panel,button.panel,a.card,button.card,.feat,button.realm,.slc{transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
a.panel:hover,button.panel:hover,a.card:hover,button.card:hover,.feat:hover,button.realm:hover,.slc:hover{
  transform:translateY(-2px);border-color:#7a5f36;box-shadow:inset 0 1px 0 rgba(201,164,92,.14),0 8px 22px rgba(0,0,0,.5)}

/* ---------- buttons: soft glow on hover, slight press-in on click ---------- */
.btn{transition:border-color .15s var(--ease),background .15s var(--ease),box-shadow .2s var(--ease),transform .12s var(--ease)}
.btn:not(.btnp):not(.ghost):not(.danger):hover{box-shadow:0 0 0 1px rgba(201,164,92,.16),0 0 16px rgba(201,164,92,.14)}
.btn:active:not(:disabled){transform:translateY(1px) scale(.98)}
.btnp:active:not(:disabled){box-shadow:inset 0 2px 6px rgba(0,0,0,.35),0 0 12px rgba(224,112,63,.25)}

/* ---------- one sheen across the ember buttons after the page loads ---------- */
.btnp{position:relative;overflow:hidden;isolation:isolate}
.btnp::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-120%);
  background:linear-gradient(105deg,transparent 30%,rgba(255,226,196,.38) 50%,transparent 70%)}
.p-sheen .btnp::after{animation:p-sheen .8s .35s var(--ease) 1 forwards}
@keyframes p-sheen{to{transform:translateX(120%)}}

/* ---------- underlines that draw in, left to right, on text links ---------- */
:is(main p,main li,main dd,main td,footer) a:not([class]),a.more,.fl a{
  text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .25s var(--ease),color .15s}
:is(main p,main li,main dd,main td,footer) a:not([class]):hover,a.more:hover,.fl a:hover,
:is(main p,main li,main dd,main td,footer) a:not([class]):focus-visible,a.more:focus-visible,.fl a:focus-visible{background-size:100% 1px}

/* ---------- tooltips and menus ease in (fade plus a 4px slide) ---------- */
.nav.open,[role="dialog"],[role="menu"],[role="listbox"]{animation:p-in .14s var(--ease)}
@keyframes p-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* ---------- gold focus rings for keyboard users, everywhere ---------- */
:focus-visible{outline:2px solid var(--gold2)!important;outline-offset:2px}
:is(input,textarea,select):focus-visible{outline-color:rgba(226,192,126,.7)!important;outline-offset:1px}
.btn:focus-visible,.btnp:focus-visible{box-shadow:0 0 0 4px rgba(226,192,126,.18)}

/* ---------- grain: a very light noise over the dark backgrounds ---------- */
body::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;opacity:.05;mix-blend-mode:overlay;
  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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- everything off for players who turn animations off ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .rv{opacity:1;transform:none}
  .flash,.skel-on::after,.p-sheen .btnp::after,.nav.open,[role="dialog"],[role="menu"],[role="listbox"]{animation:none}
  a.panel:hover,button.panel:hover,a.card:hover,button.card:hover,.feat:hover,button.realm:hover,.slc:hover,.btn:active:not(:disabled){transform:none}
}