/* ============================================================
   1st Fire Protection: website motion for the OS
   The same motion language as 1stfpservices.com: the ease-fp
   curve, slow blur-up reveals on scroll, cards that lift with a
   faint red hairline, buttons that rise with a red glow, blue
   text links with a chevron, bars that grow, rows that fade up.

   Load AFTER /brand/site-theme.css, with /brand/site-motion.js.
   Mark blocks with data-reveal="<delay ms>"; add .lift to cards,
   .tlink to text links, .grow to bars. Respects reduced motion,
   and everything is fully visible when printed.
   ============================================================ */
:root{--ease-fp:cubic-bezier(.2,.7,.2,1);--ease-std:cubic-bezier(.4,0,.2,1)}

/* ---- reveal on scroll: opacity, a 28px rise, a hint of scale and blur, staggered by data-reveal ---- */
/* The entrance owns the transition until it finishes (.rv-done); hover lifts take over after. */
.js-rv [data-reveal]:not(.rv-done){transition:opacity 1s var(--ease-fp) var(--rv-d,0ms),transform 1.1s var(--ease-fp) var(--rv-d,0ms),filter 1s ease var(--rv-d,0ms)}
.js-rv [data-reveal]:not(.rv-in){opacity:0;transform:translate3d(0,28px,0) scale(.985);filter:blur(6px)}

/* The website reveal replaces the older quick rise-in on .view screens. */
.js-rv .view>*{animation:none}

/* ---- the OS's standard cards, chips and fields pick up the website's hover feel ---- */
.kpi,.os-kpi,.os-acard,details.setup{transition:transform .45s var(--ease-fp),box-shadow .45s var(--ease-fp),border-color .2s var(--ease-std)}
.kpi:hover,.os-kpi:hover,.os-acard:hover,details.setup:hover{transform:translateY(-3px);box-shadow:0 22px 44px -24px rgba(0,0,0,.22),0 0 0 1px rgba(214,45,42,.22)}
.os-chip,.chip,.os-fb{transition:background-color .2s var(--ease-std),border-color .2s var(--ease-std),color .2s var(--ease-std),box-shadow .35s var(--ease-fp)}
.os-chip:not(.on):hover,.chip:not(.on):hover,.os-fb:not(.on):hover{border-color:var(--ink);color:var(--ink)}
input,textarea,select{transition:border-color .2s var(--ease-std),box-shadow .2s var(--ease-std)}
a,.linkbtn{transition:color .2s var(--ease-std)}

/* ---- cards lift on hover ---- */
.lift{transition:transform .55s var(--ease-fp),box-shadow .55s var(--ease-fp)}
.lift:hover{transform:translateY(-6px);box-shadow:0 34px 70px -28px rgba(0,0,0,.28),0 0 0 1px rgba(214,45,42,.28)}
.lift-sm{transition:transform .45s var(--ease-fp),box-shadow .45s var(--ease-fp)}
.lift-sm:hover{transform:translateY(-3px);box-shadow:0 22px 44px -24px rgba(0,0,0,.22),0 0 0 1px rgba(214,45,42,.22)}

/* ---- buttons rise; the primary one glows red (its hover colour comes from site-theme) ---- */
.btn,.btn-primary,.os-btn{transition:transform .35s var(--ease-fp),box-shadow .35s var(--ease-fp),background-color .35s var(--ease-fp),border-color .35s var(--ease-fp),color .2s var(--ease-std)}
.btn:hover,.os-btn:hover{transform:translateY(-2px)}
.btn-primary:hover,.os-btn.primary:hover{transform:translateY(-2px);box-shadow:0 8px 22px -6px rgba(214,45,42,.6),0 0 0 5px rgba(214,45,42,.12)}
.btn:active,.btn-primary:active,.os-btn:active{transform:translateY(0);transition-duration:.12s}

/* ---- text links: blue, red on hover, the chevron nudges right ---- */
.tlink{display:inline-flex;align-items:center;gap:4px;color:var(--link);font-weight:500;text-decoration:none;cursor:pointer;
  background:none;border:0;padding:0;font:inherit;font-weight:500;transition:color .2s var(--ease-std)}
.tlink:hover{color:var(--brand)}
.tlink .chev{display:inline-block;transition:transform .35s var(--ease-fp)}
.tlink:hover .chev{transform:translateX(3px)}
.crumb{transition:color .2s var(--ease-std)}

/* ---- bars grow from the left once their block is revealed ---- */
.grow{transform-origin:left center}
.js-rv [data-reveal]:not(.rv-in) .grow{transform:scaleX(0)}
.rv-in .grow{animation:fp-grow 1.4s var(--ease-fp) both;animation-delay:calc(var(--rv-d,0ms) + var(--gd,0ms) + 150ms)}
@keyframes fp-grow{0%{transform:scaleX(0)}}

/* ---- table rows fade up one after another ---- */
.rv-in .rows-in tbody tr{animation:fp-rowin .6s var(--ease-fp) both;animation-delay:calc(var(--rv-d,0ms) + var(--ri,0) * 45ms + 120ms)}
@keyframes fp-rowin{0%{opacity:0;transform:translateY(10px)}}

/* ---- a live dot, as on the site's emergency banner ---- */
.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#ff453a;animation:fp-ping 2s ease-out infinite;flex:none}
@keyframes fp-ping{0%{box-shadow:0 0 0 0 rgba(255,69,58,.6)}80%,100%{box-shadow:0 0 0 8px rgba(255,69,58,0)}}

@media (prefers-reduced-motion:reduce){
  [data-reveal],.lift,.lift-sm,.btn,.btn-primary,.os-btn,.tlink .chev{transition:none!important}
  .js-rv [data-reveal]:not(.rv-in){opacity:1;transform:none;filter:none}
  .grow,.rows-in tbody tr,.live-dot{animation:none!important;transform:none!important}
  .lift:hover,.lift-sm:hover,.btn:hover,.btn-primary:hover,.os-btn:hover,.kpi:hover,.os-kpi:hover,.os-acard:hover,details.setup:hover{transform:none}
  .kpi,.os-kpi,.os-acard,details.setup{transition:none!important}
}
@media print{
  .js-rv [data-reveal]:not(.rv-in){opacity:1;transform:none;filter:none}
  [data-reveal],.grow,.rows-in tbody tr{transition:none!important;animation:none!important;transform:none!important}
}