/* Urban Human Resources 1.1.123 motion layer.
   Page flights, directional navigation, first-visit entrance, live tool figures, tactile cards.
   Everything here is presentation only; with it removed, every page still works. */

/* ---------- Page to page: the header stays, the headline flies ---------- */
::view-transition-old(root) { animation: uhr-vt-out .26s cubic-bezier(.4,0,1,1) both; }
::view-transition-new(root) { animation: uhr-vt-in .5s cubic-bezier(.16,1,.3,1) both; }
@keyframes uhr-vt-out { to { opacity: 0; transform: translateX(-24px); } }
@keyframes uhr-vt-in { from { clip-path: inset(0 100% 0 0); transform: translateX(32px); } to { clip-path: inset(0 0 0 0); transform: none; } }
html:active-view-transition-type(uhr-back)::view-transition-old(root) { animation-name: uhr-vt-out-back; }
html:active-view-transition-type(uhr-back)::view-transition-new(root) { animation-name: uhr-vt-in-back; }
@keyframes uhr-vt-out-back { to { opacity: 0; transform: translateX(24px); } }
@keyframes uhr-vt-in-back { from { clip-path: inset(0 0 0 100%); transform: translateX(-32px); } to { clip-path: inset(0 0 0 0); transform: none; } }

::view-transition-group(uhr-nav) { z-index: 3; animation-duration: .3s; }
::view-transition-old(uhr-nav), ::view-transition-new(uhr-nav) { animation-duration: .3s; }

::view-transition-group(uhr-title) { z-index: 2; animation-duration: .56s; animation-timing-function: cubic-bezier(.2,.9,.2,1); }
::view-transition-old(uhr-title), ::view-transition-new(uhr-title) { height: 100%; width: auto; object-fit: contain; object-position: left top; }
::view-transition-old(uhr-title) { animation: uhr-title-out .22s ease both; }
::view-transition-new(uhr-title) { animation: uhr-title-in .4s .12s ease both; }
@keyframes uhr-title-out { to { opacity: 0; } }
@keyframes uhr-title-in { from { opacity: 0; } }

/* While a flight lands, the live render waits out of sight (it takes over the instant the flight ends) */
html:not(.uhr-live) #uhr-ssr ~ #dc-root { visibility: hidden; position: absolute; top: 0; left: 0; right: 0; }

/* ---------- Home, first page of a visit: staged entrance ---------- */
@keyframes uhr-enter { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes uhr-enter-photo { from { clip-path: inset(0 0 100% 0); transform: scale(1.06); } to { clip-path: inset(0 0 0 0); transform: none; } }
html.uhr-intro #uhr-ssr main aside > * { animation: uhr-enter .7s cubic-bezier(.16,1,.3,1) both; }
html.uhr-intro #uhr-ssr main aside > *:nth-child(2) { animation-delay: .42s; }
html.uhr-intro #uhr-ssr main aside img { animation: uhr-enter-photo .8s .05s cubic-bezier(.16,1,.3,1) both; }
html.uhr-intro #uhr-ssr #uhr-gate > p { animation: uhr-enter .6s .1s cubic-bezier(.16,1,.3,1) both; }
html.uhr-intro #uhr-ssr #uhr-gate > div > * { animation: uhr-enter .7s cubic-bezier(.16,1,.3,1) both; animation-delay: .2s; }
html.uhr-intro #uhr-ssr #uhr-gate > div > *:nth-child(2) { animation-delay: .32s; }

/* ---------- Tools: figures count to their new value, the result card reshapes ---------- */
.uhr-tool [data-o] { transition: background-color .5s ease; }
.uhr-bump { animation: uhr-bump .42s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
@keyframes uhr-bump { 0% { transform: scale(.96); } 60% { transform: scale(1.035); } 100% { transform: none; } }
.uhr-tool .uhr-big { font-variant-numeric: tabular-nums; }
.uhr-tool b, .uhr-tool [data-o=total], .uhr-tool [data-o=counter] { font-variant-numeric: tabular-nums; }

/* ---------- Touch: cards and doors press in, then spring back ---------- */
html.uhr-motion a.blueprint, html.uhr-motion .uhr-door { transition: transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease; }
html.uhr-motion a.blueprint:active, html.uhr-motion .uhr-door:active { transform: scale(.985); transition-duration: .08s; }
html.uhr-motion .btn { transition: transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .18s ease, background-color .18s ease; }
html.uhr-motion .btn:active { transition-duration: .06s; }

/* ---------- Forms: a completed required field confirms itself ---------- */
html.uhr-motion form input:is([type=text], [type=email], [type=tel], [type=url], :not([type]))[required]:user-valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%231A424B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 38px;
  animation: uhr-valid .32s cubic-bezier(.34,1.56,.64,1) both;
}
html[data-theme="dark"].uhr-motion form input[required]:user-valid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.5l3 3 7-7' fill='none' stroke='%23E8B48F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@keyframes uhr-valid { from { background-size: 0 0; } to { background-size: 16px 16px; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  html.uhr-intro #uhr-ssr * { animation: none !important; }
  .uhr-bump { animation: none; }
}
@media print { html.uhr-intro #uhr-ssr * { animation: none !important; opacity: 1 !important; } }
/* 1.1.125: the Bay Bridge, drawn in line across the home page. San Francisco on the left, Oakland on the right. */
.uhr-baybridge { margin: 0 0 18px; line-height: 0; color: var(--color-text); }
.uhr-baybridge-svg { display: block; width: 100%; height: clamp(64px, 9vw, 118px); overflow: visible; }
.uhr-baybridge-svg path { fill: none; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.uhr-baybridge-svg .b-deck { stroke: currentColor; stroke-width: 1.6; opacity: .85; }
.uhr-baybridge-svg .b-tower { stroke: currentColor; stroke-width: 1.6; }
.uhr-baybridge-svg .b-land { stroke: currentColor; stroke-width: 1.2; opacity: .5; }
.uhr-baybridge-svg .b-water { stroke: var(--color-divider); stroke-width: 1; }
.uhr-baybridge-svg .b-hanger { stroke: currentColor; stroke-width: .7; opacity: .38; }
.uhr-baybridge-svg .b-cable { stroke: var(--color-accent-700); stroke-width: 1.8; }

/* Drawn once per visit. Before the live page takes over, the lines wait undrawn; then they draw in order. */
html.uhr-baybridge-draw .uhr-baybridge-svg path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
html.uhr-baybridge-draw.uhr-live .uhr-baybridge-svg .b-water { animation: uhr-draw .9s ease-out both; }
html.uhr-baybridge-draw.uhr-live .uhr-baybridge-svg .b-deck { animation: uhr-draw 1.1s .1s cubic-bezier(.45,0,.2,1) both; }
html.uhr-baybridge-draw.uhr-live .uhr-baybridge-svg .b-land { animation: uhr-draw .7s .5s ease-out both; }
html.uhr-baybridge-draw.uhr-live .uhr-baybridge-svg .b-tower { animation: uhr-draw .9s .45s cubic-bezier(.45,0,.2,1) both; }
html.uhr-baybridge-draw.uhr-live .uhr-baybridge-svg .b-cable { animation: uhr-draw 1.3s .85s cubic-bezier(.45,0,.2,1) both; }
html.uhr-baybridge-draw.uhr-live .uhr-baybridge-svg .b-hanger { animation: uhr-draw .35s both; animation-delay: calc(1.2s + var(--i) * 14ms); }
@keyframes uhr-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { html.uhr-baybridge-draw .uhr-baybridge-svg path { stroke-dasharray: none; stroke-dashoffset: 0; animation: none !important; } }
@media print { .uhr-baybridge-svg path { stroke-dasharray: none !important; stroke-dashoffset: 0 !important; } }

/* Cable dividers on the home page: each section rule is a suspension cable that draws as it scrolls in. */
.uhr-cable { display: block; height: 14px; margin: 0 0 32px; line-height: 0; }
.uhr-cable svg { display: block; width: 100%; height: 14px; overflow: visible; }
.uhr-cable path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.uhr-cable .c-deck { stroke: var(--color-divider); stroke-width: 1; }
.uhr-cable .c-cable { stroke: var(--color-accent-700); stroke-width: 1.4; opacity: .75; }
@supports (animation-timeline: view()) {
  html.uhr-motion .uhr-cable .c-cable { stroke-dasharray: 1 1; animation: uhr-draw-back linear both; animation-timeline: view(); animation-range: entry 10% cover 40%; }
  @keyframes uhr-draw-back { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
}
@media (prefers-reduced-motion: reduce) { .uhr-cable .c-cable { stroke-dasharray: none !important; animation: none !important; } }