/* EnemoAi in motion (#109): one picture per page, and movement that is quick, quiet and purposeful. Legal text never moves.
   Nothing here is needed to read or use a page, and everything moving stops for anyone who asked for less motion. */
html { overflow-x: clip; }
/* One frame on every public page (#121): the same column and the same bar height, so the logo and the picture hold still between pages. */
body:not(:has(#hero)) > .wrap { max-width: 820px; padding-top: 0; }
body:not(:has(#hero)) > .wrap > header { display: flex; align-items: center; min-height: 64px; margin: 0; padding-block: 0; border-bottom: 0; }
.band { position: relative; overflow: hidden; background: var(--ink, #050817); }
.band-img { position: absolute; inset: 0; background-size: cover; opacity: 0; transition: opacity .9s ease; }
.band-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(5, 8, 23, .06), rgba(5, 8, 23, .34)); }
.band.in .band-img { opacity: 1; }
.band-credit { position: absolute; inset-block-end: 10px; inset-inline-end: 12px; padding: 3px 9px; border-radius: 999px; background: rgba(5, 8, 23, .7); color: rgba(255, 255, 255, .95); display: inline-flex; align-items: center; min-height: 24px; font-size: .68rem; font-weight: 400; line-height: 1.5; text-decoration: none; }
.band-credit:hover { text-decoration: underline; }
/* moving pictures */
.film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.film-btn { position: absolute; inset-block-end: 8px; inset-inline-start: 10px; z-index: 2; width: 34px; height: 34px; padding: 7px; border: 0; border-radius: 50%; background: rgba(5, 8, 23, .62); cursor: pointer; }
.film-btn:hover { background: rgba(5, 8, 23, .85); }
.film-btn svg { display: block; width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.film-btn .p-play { display: none; fill: #fff; } .film-btn.is-paused .p-play { display: block; } .film-btn.is-paused .p-pause { display: none; }
.hero-stage > .film { top: 0; bottom: 0; left: 50%; right: auto; width: 100vw; transform: translateX(-50%); z-index: -2; }
/* on a tall phone, keep the lit coast in the frame rather than the clouds */
@media (max-width: 640px) { .hero-stage > .film { object-position: 58% center; } .hero-stage:has(#hero:not([hidden])) { background-position: 58% center; background-size: auto 100%; } }
.hero-stage:not(:has(#hero:not([hidden]))) > .film, .hero-stage:not(:has(#hero:not([hidden]))) > .film-btn { display: none; }
.t-evidence > .film { top: 0; bottom: 0; left: 50%; right: auto; width: 100vw; transform: translateX(-50%); z-index: -2; object-position: center 30%; }
.t-evidence > .film-btn { inset-block-end: 12px; }
/* The boardroom scene, mid page (#111): framed, not full width, because the dark Replays section follows it. */
.room-film { position: relative; overflow: hidden; aspect-ratio: 16 / 9; width: min(100%, 880px); margin-inline: auto; border-radius: 14px; background: #15171c url(/brand/video/boardroom.jpg) center / cover; }
.t-room .photo-credit { color: var(--muted); font-weight: 400; }
.t-room .photo-credit:hover { color: inherit; }
/* the picture's space is held from the first paint, so nothing jumps when it arrives (the app's own views insert theirs while hidden) */
main:not(:has(#hero)) { --band-h: clamp(170px, 27vw, 340px); position: relative; padding-top: var(--band-h); }
.wrap:has(> header.top) main:not(:has(#hero)), main.tv:not(:has(#hero)) { --band-h: clamp(110px, 15vw, 190px); }
main.tv:not(:has(#hero)) { margin-top: 0; padding-top: calc(var(--band-h) + var(--s5, 20px)); }
.band-page { position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: var(--band-h); }
.band-inset { height: clamp(110px, 19vw, 170px); border-radius: var(--r-lg, 16px); margin: var(--s3, 12px) 0 var(--s4, 16px); }
@media print { .band { display: none; } main:not(:has(#hero)) { padding-top: 0; } }

/* icons */
.ic { width: 22px; height: 22px; fill: none; stroke: var(--blue, #0043f9); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.cards a .ic { width: 26px; height: 26px; margin-bottom: 6px; }
main h2 > .ic { vertical-align: -4px; margin-inline-end: 9px; }
main li a .t > .ic { vertical-align: -5px; margin-inline-end: 8px; }

/* the signature features, drawn */
.viz { display: block; height: 84px; width: auto; margin-bottom: var(--s3, 12px); fill: none; stroke: var(--blue, #0043f9); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.viz-radar circle { stroke-opacity: .28; }
.viz-radar .sweep { fill: var(--blue, #0043f9); fill-opacity: .16; stroke: none; transform-box: view-box; transform-origin: 60px 60px; }
.viz-radar .dot { fill: var(--blue, #0043f9); stroke: none; }
.viz-path .base, .viz-ledger .line { stroke-opacity: .25; }
.viz-path circle { fill: var(--blue, #0043f9); stroke: none; }
.viz-path .climb, .viz-ledger .tick { stroke-width: 2.4; }

/* the wallet's balance over its recent history */
.spark { margin: var(--s2, 8px) 0 var(--s3, 12px); }
.spark svg { display: block; width: 100%; height: 56px; overflow: visible; }
.spark .fill { fill: var(--blue-soft, #edf2ff); stroke: none; }
.spark .line { fill: none; stroke: var(--blue, #0043f9); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
/* one bar over light and dark alike: the frost is the only background */
body:has(#hero):not(:has(#nav:not([hidden]))) header.bar { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }

.stat { transition: transform .2s ease; }

/* the signed-in bar: the logo keeps its size, and the bar is wide enough for its links in every language */
@media (min-width: 901px) { .wrap:has(#nav:not([hidden])) > header.bar .brand { flex-shrink: 0; } }
@media (min-width: 1024px) {
  .wrap:has(#nav:not([hidden])) > header.bar { width: min(1120px, calc(100vw - 48px)); margin-left: calc((100% - min(1120px, calc(100vw - 48px))) / 2); }
  html[dir="rtl"] .wrap:has(#nav:not([hidden])) > header.bar { margin-left: 0; margin-right: calc((100% - min(1120px, calc(100vw - 48px))) / 2); }
}

/* the signed-in home: a slow light behind the owl */
.welcome { position: relative; isolation: isolate; }
.welcome::before { content: ""; position: absolute; inset: 0 0 auto; height: 300px; z-index: -1; pointer-events: none;
  background: radial-gradient(38% 60% at 34% 34%, rgba(0, 67, 249, .13), transparent 70%), radial-gradient(34% 56% at 68% 42%, rgba(61, 115, 255, .12), transparent 70%); }

@media (prefers-reduced-motion: no-preference) {
  /* moving between pages is a dissolve, not a jump */
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

  @keyframes alive-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes alive-settle { from { transform: scale(1.07); } to { transform: none; } }
  @keyframes alive-breathe { 0%, 100% { box-shadow: 0 0 0 0 rgba(0, 67, 249, .22), var(--shadow); } 50% { box-shadow: 0 0 0 14px rgba(0, 67, 249, 0), var(--shadow); } }
  @keyframes alive-drift { 0%, 100% { opacity: .75; transform: translateX(-2%); } 50% { opacity: 1; transform: translateX(2%); } }
  @keyframes alive-think { 0%, 100% { opacity: .62; } 50% { opacity: 1; } }
  @keyframes alive-dialog { from { opacity: 0; transform: translateY(10px) scale(.98); } to { opacity: 1; transform: none; } }
  @keyframes alive-veil { from { opacity: 0; } to { opacity: 1; } }

  .band.in .band-img { animation: alive-settle 2.6s cubic-bezier(.2, .7, .2, 1) both; }

  /* pages arrive; a page's reading text arrives once and then stays still. Never the legal documents */
  html:not(.alive-legal) main > h1, html:not(.alive-legal) main > .lede, .guide-article > .crumbs { animation: alive-rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  html:not(.alive-legal) main > .lede { animation-delay: .07s; }
  @supports (animation-timeline: view()) {
    .guide-index .cards li, .guide-article > h2, .guide-article > figure, .guide-article > .facts > *, .tr main > section, .tr .card { animation: alive-rise linear both; animation-timeline: view(); animation-range: entry 0% entry 18%; }
  }

  /* the app: each view settles in as it opens */
  section[id^="view-"]:not([hidden]):not(#view-ask) > * { animation: alive-rise .45s cubic-bezier(.2, .7, .2, 1) both; }
  section[id^="view-"]:not([hidden]):not(#view-ask) > :nth-child(2) { animation-delay: .05s; }
  section[id^="view-"]:not([hidden]):not(#view-ask) > :nth-child(3) { animation-delay: .1s; }
  section[id^="view-"]:not([hidden]):not(#view-ask) > :nth-child(n+4) { animation-delay: .15s; }
  .welcome > img { animation: alive-breathe 4.5s ease-in-out infinite; }
  .welcome::before { animation: alive-drift 16s ease-in-out infinite; }
  .thinking .what { animation: alive-think 2.2s ease-in-out infinite; }
  dialog[open] { animation: alive-dialog .24s cubic-bezier(.2, .7, .2, 1) both; }
  dialog[open]::backdrop { animation: alive-veil .24s ease both; }

  /* everything you can press answers you */
  .primary, .secondary, .wp-btn, .hdr-signin, .act, .link, .btn { transition: transform .12s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }
  .primary:active, .secondary:active, .wp-btn:active, .hdr-signin:active, .act:active, .btn:active { transform: scale(.975); }
  .t-cards li { transition: transform .2s ease, box-shadow .2s ease; }
  .t-cards li:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .t-modes details > :not(summary) { animation: alive-rise .3s ease both; }

  /* the drawings play when they come into view */
  @keyframes alive-sweep { to { transform: rotate(360deg); } }
  @keyframes alive-blip { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
  @keyframes alive-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  .viz-radar .sweep { animation: alive-sweep 5s linear infinite; }
  .viz-radar .dot { animation: alive-blip 5s ease-in-out infinite; }
  .viz-radar .d2 { animation-delay: 1.6s; } .viz-radar .d3 { animation-delay: 3.1s; }
  .viz-path .climb, .viz-ledger .tick { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .viz.in .climb { animation: alive-draw 1.8s cubic-bezier(.3, .7, .2, 1) forwards; }
  .viz.in .tick { animation: alive-draw .5s ease-out forwards; }
  .viz.in .r2 .tick { animation-delay: .45s; } .viz.in .r3 .tick { animation-delay: .9s; }
  @keyframes alive-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
  .spark svg { animation: alive-wipe 1.3s cubic-bezier(.3, .7, .2, 1) both; }
  /* the sample forecast's bars rise into place */
  @keyframes alive-bar { from { transform: scaleY(.15); opacity: .4; } to { transform: none; opacity: 1; } }
  @supports (animation-timeline: view()) {
    .fc-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: alive-bar linear both; animation-timeline: view(); animation-range: entry 10% entry 70%; }
  }

}
dialog::backdrop { -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }