/* Shared behaviour styles for the example sites. Loaded after each page's own CSS. */

/* reveal on scroll: springs up, then settles */
.rv{opacity:0;transform:translateY(22px) scale(.99);transition:opacity .5s ease,transform .72s cubic-bezier(.34,1.56,.64,1)}
.rv.in{opacity:1;transform:none}

/* active section in the page nav */
nav a.is-active:not(.book):not(.cta){box-shadow:inset 0 -2px 0 currentColor;opacity:1}

/* demo forms */
.df{display:grid;gap:.75rem;max-width:34rem;margin-top:1.2rem}
.df .fr{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.df label{display:grid;gap:.3rem;font-size:.85rem;font-weight:600;color:inherit}
.df input,.df select,.df textarea{font:inherit;font-size:.95rem;font-weight:400;width:100%;padding:.62rem .7rem;border:1px solid rgba(17,24,39,.22);border-radius:8px;background:#fff;color:#111827}
.df textarea{resize:vertical;min-height:4.5rem}
.df input:focus-visible,.df select:focus-visible,.df textarea:focus-visible{outline:2px solid #111827;outline-offset:1px;border-color:#111827}
.df button{font:inherit;font-weight:700;padding:.72rem 1.2rem;border:0;border-radius:8px;background:#111827;color:#fff;cursor:pointer;justify-self:start;transition:transform .15s ease,filter .15s ease}
.df button:hover{filter:brightness(1.25)}
.df button:active{transform:scale(.97)}
.df button:disabled{cursor:progress;opacity:.7}
.df .ok{margin:0;font-size:.9rem;font-weight:600;color:#15803d}
.df .ok[hidden]{display:none}

@media(max-width:620px){.df .fr{grid-template-columns:1fr}}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .df button{transition:none}
}

.ok.err{color:#b3261e}