/* Premium polish layer, loaded last on every page.
   Motion, spacing and hover/touch behaviour only. Colours, typography scale and page layout
   are inherited from css/site.css and css/pages.css.

   Technique note: scroll reveals use `transform` and `opacity`; hover lifts and zooms use the
   separate `translate` and `scale` properties, so the two never fight each other. */

/* ---------- Typography finishing ---------- */
body{text-rendering:optimizeLegibility}
h1,h2,h3{text-wrap:balance}
p,li{text-wrap:pretty}
::selection{background:var(--gold2);color:var(--ink)}
main p,main li,main a,main td,main dd{overflow-wrap:anywhere}

/* ---------- Smooth scrolling ---------- */
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--hd) + 16px)}
.nav{overscroll-behavior:contain}

/* ---------- Scroll progress hairline ---------- */
.scroll-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:300;pointer-events:none;background:linear-gradient(90deg,var(--gold),var(--gold2));transform-origin:0 50%;transform:scaleX(0);will-change:transform}

/* ---------- Header depth once the page scrolls ---------- */
.hd{transition:box-shadow .4s ease,background-color .4s ease}
.hd.is-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.22)}

/* ---------- Back to top: shown while scrolling up, hidden while scrolling down ---------- */
.to-top{position:fixed;right:max(16px,env(safe-area-inset-right,0px) + 12px);bottom:max(16px,env(safe-area-inset-bottom,0px) + 12px);width:48px;height:48px;border-radius:50%;border:1px solid var(--gold);background:var(--ink);color:var(--gold);display:grid;place-items:center;cursor:pointer;z-index:90;padding:0;box-shadow:0 10px 24px rgba(17,21,23,.25);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.7,.2,1),visibility .35s,background-color .25s,color .25s}
.to-top svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--gold);color:var(--ink)}
.to-top:active{transform:scale(.94)}
@media (max-width:700px){.to-top{width:44px;height:44px}}

/* ---------- Buttons: tactile press ---------- */
.btn:active{transform:translateY(0) scale(.98)}

/* =====================================================================
   SCROLL REVEAL (both directions)
   Content eases in as it enters the screen and eases back out when it
   leaves, so it animates again when scrolling back up. js/enhance.js adds
   .rv (plus a direction class) to content blocks and toggles .rv-in.
   ===================================================================== */
.rv{
  opacity:0;
  transform:translate3d(0,30px,0);
  transition:
    opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),
    transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s);
}
.rv.rv-l{transform:translate3d(-40px,0,0)}
.rv.rv-r{transform:translate3d(40px,0,0)}
.rv.rv-s{transform:scale(.96)}
.rv.rv-in{opacity:1;transform:none}

/* Condition cards: the card box fades; the inside rises. The card's own hover lift is untouched. */
.ccard.rv{transform:none;transition:opacity .9s cubic-bezier(.2,.7,.2,1) var(--d,0s),transform .35s ease,box-shadow .35s ease}
.ccard.rv .cc-body{transform:translate3d(0,22px,0);transition:transform .9s cubic-bezier(.2,.7,.2,1) var(--d,0s)}
.ccard.rv.rv-in{opacity:1}
.ccard.rv.rv-in .cc-body{transform:none}

/* ---------- Hover: pointer devices only ---------- */
@media (hover:hover) and (pointer:fine){
  .inst article,.loc-mini li,.why-c,.tl li>div{transition:translate .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s ease}
  .inst article:hover,.loc-mini li:hover,.why-c:hover,.tl li>div:hover{translate:0 -4px}
  .ft-nav a{transition:translate .3s ease,color .25s ease}
  .ft-nav a:hover{translate:4px 0}
  .g-item img{transition:scale .8s cubic-bezier(.2,.7,.2,1)}
  .g-item:hover img{scale:1.04}
  .split figure img{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
  .split figure:hover img{transform:scale(1.025)}
}

/* ---------- Touch devices: press response instead of a sticky lift ---------- */
@media (hover:none){
  .ccard:hover{transform:none;box-shadow:0 2px 10px rgba(17,21,23,.06)}
  .ccard:hover .cc-media img{transform:none}
  .ccard:active{transform:scale(.985)}
}

/* ---------- Reduced motion: everything visible, no movement ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .scroll-progress{display:none}
  .to-top,.rv,.ccard.rv,.ccard.rv .cc-body,.split figure img,.g-item img{transition:none!important}
  .rv{opacity:1;transform:none}
  .ccard.rv{opacity:1}
  .ccard.rv .cc-body{transform:none}
  .ccard:hover,.btn:active,.to-top:active{transform:none}
}