/* Trial 2026-10-06: shared finish for every page. Remove this file (and shared/rich-ui.js) to go back. */

/* B3 Page change. The user chose sheet (the default); wipe and curtain stay for comparison. The inline head script sets
   html[data-vt] from ?vt=wipe|sheet|curtain (kept for the tab) so the incoming page knows which one to play.
   - wipe: the old page is cut away along a diagonal, a navy band passes and the next page follows it.
   - sheet: the page lifts off as one sheet over the navy table, slides away, and the next sheet is laid down.
   - curtain: a teal and a navy band rise over the page, the company mark shows on the navy, and the bands lift off the next page.
   Browsers without cross-document view transitions simply navigate as before; reduced motion changes pages at once.
   The opt-in has to stay at the top level: Chrome ignores it for the incoming page when it sits inside @media. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}
::view-transition-old(root),::view-transition-new(root){mix-blend-mode:normal}
/* Empty fixed layers that only give the curtain its bands and mark (never visible on the page itself). */
.vt-bands span{position:fixed;opacity:0;pointer-events:none}
.vt-band{inset:0}
.vt-mark{left:50%;top:50%;width:min(300px,58vw);aspect-ratio:153.57/32.39;translate:-50% -50%}

@media (prefers-reduced-motion:no-preference){
  :root[data-vt=wipe]::view-transition-image-pair(root){background:#092b43}
  :root[data-vt=wipe]::view-transition-old(root){animation:adv-page-out .5s cubic-bezier(.65,0,.35,1) both}
  :root[data-vt=wipe]::view-transition-new(root){animation:adv-page-in .5s cubic-bezier(.65,0,.35,1) .14s both}

  :root[data-vt=sheet]::view-transition{background:radial-gradient(120% 90% at 50% 38%,#0e3d5c,#061d2e)}
  :root[data-vt=sheet]::view-transition-old(root),:root[data-vt=sheet]::view-transition-new(root){overflow:clip}
  :root[data-vt=sheet]::view-transition-old(root){animation:adv-sheet-out 1.1s both}
  :root[data-vt=sheet]::view-transition-new(root){animation:adv-sheet-in 1.1s both}

  :root[data-vt=curtain] .vt-band-a{view-transition-name:adv-band-a}
  :root[data-vt=curtain] .vt-band-b{view-transition-name:adv-band-b}
  :root[data-vt=curtain] .vt-mark{view-transition-name:adv-mark}
  :root[data-vt=curtain]::view-transition-old(root){animation:adv-curtain-old 1.3s both}
  :root[data-vt=curtain]::view-transition-new(root){animation:adv-curtain-new 1.3s both}
  :root[data-vt=curtain]::view-transition-old(adv-band-a),:root[data-vt=curtain]::view-transition-new(adv-band-a),
  :root[data-vt=curtain]::view-transition-old(adv-band-b),:root[data-vt=curtain]::view-transition-new(adv-band-b),
  :root[data-vt=curtain]::view-transition-old(adv-mark),:root[data-vt=curtain]::view-transition-new(adv-mark){animation:none;opacity:0}
  :root[data-vt=curtain]::view-transition-group(adv-band-a){background:#087f83;animation:adv-band-a 1.3s both}
  :root[data-vt=curtain]::view-transition-group(adv-band-b){background:#092b43;animation:adv-band-b 1.3s both}
  :root[data-vt=curtain]::view-transition-group(adv-mark){background:#fff;mask:url(../assets/logo.svg) center/contain no-repeat;animation:adv-mark 1.3s both}
}
@keyframes adv-page-out{
  from{clip-path:polygon(0 0,120% 0,120% 100%,-14% 100%)}
  to{clip-path:polygon(114% 0,120% 0,120% 100%,100% 100%)}
}
@keyframes adv-page-in{
  from{clip-path:polygon(-20% 0,0 0,-14% 100%,-20% 100%)}
  to{clip-path:polygon(-20% 0,114% 0,100% 100%,-20% 100%)}
}
/* Sheet: lift (0-30%), slide away while the next sheet comes in (30-70%), lay it down flat (70-100%). */
@keyframes adv-sheet-out{
  0%{transform:none;border-radius:0;box-shadow:0 0 0 rgba(2,14,24,0);animation-timing-function:cubic-bezier(.6,0,.25,1)}
  30%{transform:scale(.84);border-radius:14px;box-shadow:0 40px 100px rgba(2,14,24,.5);animation-timing-function:cubic-bezier(.55,0,.8,.25)}
  62%,100%{transform:translateX(-122%) rotate(-5deg) scale(.84);border-radius:14px;box-shadow:0 40px 100px rgba(2,14,24,.5)}
}
@keyframes adv-sheet-in{
  0%,36%{transform:translateX(122%) rotate(5deg) scale(.84);border-radius:14px;box-shadow:0 40px 100px rgba(2,14,24,.5);animation-timing-function:cubic-bezier(.2,.75,.3,1)}
  70%{transform:scale(.84);border-radius:14px;box-shadow:0 40px 100px rgba(2,14,24,.5);animation-timing-function:cubic-bezier(.6,0,.2,1)}
  100%{transform:none;border-radius:0;box-shadow:0 0 0 rgba(2,14,24,0)}
}
/* Curtain: bands rise with a slanted edge (teal leads, navy follows), the mark shows on the navy, then both lift off. */
@keyframes adv-band-a{
  0%{clip-path:polygon(0 112%,100% 106%,100% 106%,0 112%);animation-timing-function:cubic-bezier(.7,0,.25,1)}
  32%,64%{clip-path:polygon(0 -6%,100% -12%,100% 106%,0 112%);animation-timing-function:cubic-bezier(.7,0,.25,1)}
  96%,100%{clip-path:polygon(0 -6%,100% -12%,100% -12%,0 -6%)}
}
@keyframes adv-band-b{
  0%,6%{clip-path:polygon(0 112%,100% 106%,100% 106%,0 112%);animation-timing-function:cubic-bezier(.7,0,.25,1)}
  38%,58%{clip-path:polygon(0 -6%,100% -12%,100% 106%,0 112%);animation-timing-function:cubic-bezier(.7,0,.25,1)}
  90%,100%{clip-path:polygon(0 -6%,100% -12%,100% -12%,0 -6%)}
}
@keyframes adv-mark{
  0%,32%{opacity:0;translate:0 14px;animation-timing-function:cubic-bezier(.2,.7,.3,1)}
  44%,56%{opacity:1;translate:0 0;animation-timing-function:cubic-bezier(.6,0,.8,.3)}
  64%,100%{opacity:0;translate:0 -10px}
}
@keyframes adv-curtain-old{
  0%{transform:none;animation-timing-function:cubic-bezier(.6,0,.9,.4)}
  34%{transform:translateY(-6vh);opacity:1}
  34.1%,100%{transform:translateY(-6vh);opacity:0}
}
/* The new page paints above the old one, so it stays hidden until the bands cover the screen. */
@keyframes adv-curtain-new{
  0%,40%{transform:translateY(9vh);opacity:0}
  40.1%,56%{transform:translateY(9vh);opacity:1;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  100%{transform:none;opacity:1}
}

/* B4 Mouse only: ENTRY letters roll over to a fresh copy, the menu marks the pointed item with a sliding pill. */
.roll-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* One line tall whatever the label's line height, so the copy waiting below never shows under the word. */
.roll{display:inline-block;line-height:1;clip-path:inset(0 -.4em)}
.roll-ch{display:inline-block;text-shadow:0 1.3em currentColor}
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .roll-ch{transition:transform .46s cubic-bezier(.7,0,.2,1) calc(var(--i) * 30ms)}
  a:hover .roll-ch{transform:translateY(-1.3em)}

  .global-nav{position:relative}
  .global-nav a{z-index:1}
  .nav-pill{position:absolute;left:0;top:5px;bottom:5px;width:var(--w,0);border-radius:999px;background:#e3f1f0;opacity:0;transform:translateX(var(--x,0));pointer-events:none;
    transition:transform .42s cubic-bezier(.65,0,.25,1),width .42s cubic-bezier(.65,0,.25,1),opacity .22s ease}
  .global-nav.has-pill .nav-pill{opacity:1}
  .nav-pill.is-placing{transition:opacity .22s ease}
}

/* Trial 2026-10-08: a heading's last phrase stays on one line, so a narrow phone never leaves one or two characters
   alone on the last line (the sales page has the same rule in sales.css). Important, because rules for the line
   spans of a heading (.company-title span, .company-body span) would otherwise reach these spans too. */
.keep{display:inline-block!important}
/* The last few characters of each line of body text, wrapped by shared/rich-ui.js. */
adv-nobr{white-space:nowrap}
/* The PAGE TOP ring turns as a square, and its corners reach past the screen's right edge for a moment on phones.
   Its letters stay inside the circle, so the footer clips sideways only (clip, not hidden: nothing becomes a scroller). */
.site-footer{overflow-x:clip}