/* ============================================================================
   The Garden — quiet.css
   Shared polish for all public secondary pages (about, how-it-works, faq,
   privacy, terms, 404). Brand-anchored chrome + page-load fade + scroll-
   reveal hooks + refined focus rings + link micro-interactions.

   Loaded by /about, /how-it-works, /faq, /privacy, /terms. Not loaded
   by / (landing) or /app — those have their own internal animation
   systems and a brand anchor would be redundant against the hero.

   Premium minimal: nothing flashes, nothing jumps, nothing demands.
   Just gentle continuity across every surface a visitor might land on.
============================================================================ */

:root{
  --q-ink:#f4ecdd;
  --q-ink-soft:#d3cab6;
  --q-ink-faint:#b0a795;
  --q-ember:#e8aa72;
  --q-ember-deep:#c47f4a;
  --q-ember-glow:rgba(232,170,114,.35);
  --q-line-soft:rgba(240,231,214,.09);
}

/* Page-load fade — replaces the harsh blank→content flash with a quiet
   rise. The transform is tiny on purpose; nothing should feel busy. */
@keyframes qPageFade{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}
body{animation:qPageFade .55s cubic-bezier(.2,.8,.3,1) both;}

/* Brand wordmark at the top of every secondary page. Same bloom as the
   app, same Fraunces wordmark — visually says "you're still in the same
   building." Soft breathe loop on the bloom adds the only animation a
   static page needs. */
@keyframes qBrandBreathe{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.045);}
}
.q-brand{
  display:flex;align-items:center;justify-content:center;gap:10px;
  text-decoration:none;color:var(--q-ink-soft);
  font-family:'Fraunces',Georgia,serif;font-weight:300;font-size:18px;
  letter-spacing:.005em;
  margin:0 auto 44px;width:max-content;
  padding:6px 8px;border-radius:10px;
  transition:color .35s ease,transform .35s cubic-bezier(.2,.8,.3,1);
}
.q-brand:hover{color:var(--q-ember);}
.q-brand:active{transform:scale(.98);}
.q-brand svg{
  width:22px;height:22px;flex:0 0 auto;
  animation:qBrandBreathe 5.5s ease-in-out infinite;
  filter:drop-shadow(0 0 8px var(--q-ember-glow));
}

/* Scroll-reveal: opt-in via the .q-reveal class. The IntersectionObserver
   in quiet.js adds .q-seen when the element enters the viewport. */
.q-reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .8s cubic-bezier(.2,.8,.3,1),transform .8s cubic-bezier(.2,.8,.3,1);
  will-change:opacity,transform;
}
.q-reveal.q-seen{opacity:1;transform:translateY(0);}

/* Refined keyboard focus ring — accessibility is a trust signal. The
   ember outline matches the brand instead of the browser default. */
:focus-visible{
  outline:2px solid var(--q-ember);
  outline-offset:3px;
  border-radius:8px;
}

/* Quiet smooth-scroll for anchor links (e.g. #faq jump). */
html{scroll-behavior:smooth;}

/* Underline-draw on hover for inline links inside content. The
   gradient-as-underline trick lets the line slide in from the left
   instead of just appearing. */
.q-content a,
article a:not(.q-brand):not(.btn-quiet){
  text-decoration:none;
  color:var(--q-ember);
  background-image:linear-gradient(transparent calc(100% - 1px),var(--q-ember) 1px);
  background-size:0 100%;background-repeat:no-repeat;
  transition:background-size .35s cubic-bezier(.2,.8,.3,1);
}
.q-content a:hover,
article a:not(.q-brand):not(.btn-quiet):hover{
  background-size:100% 100%;
}

/* Soft hover lift on the quiet pill button (used across about, faq, etc).
   Existing pages already style .btn-quiet — these rules only ADD the
   micro-interaction without overriding the base look. */
.btn-quiet{transition:background .35s ease,transform .35s cubic-bezier(.2,.8,.3,1),box-shadow .35s ease;}
.btn-quiet:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(232,170,114,.18);}
.btn-quiet:active{transform:translateY(0);box-shadow:none;}

/* Quiet hover on the persistent public-pages footer that every secondary
   page uses. Original CSS only changed color; adding a slow underline
   draw makes the whole footer feel considered rather than functional. */
.pubfoot a{
  background-image:linear-gradient(transparent calc(100% - 1px),var(--q-ember) 1px);
  background-size:0 100%;background-repeat:no-repeat;
  transition:color .3s ease,background-size .35s cubic-bezier(.2,.8,.3,1);
}
.pubfoot a:hover{background-size:100% 100%;}

/* Honour users who prefer reduced motion — every animation goes still. */
@media (prefers-reduced-motion: reduce){
  body,.q-reveal,.q-brand,.q-brand svg,.btn-quiet,.pubfoot a{
    animation:none !important;
    transition:none !important;
    transform:none !important;
  }
  .q-reveal{opacity:1;}
  html{scroll-behavior:auto;}
}