/* Real page panoramas keep automatic previews available without a video player.
   v5 (CEO, 21/09/2026 noite): as duas telas seguem o MESMO cronograma por marcos
   da gravacao v3 (motion-schedule.mjs): topo, faixa, titulo da welcome e secao
   Featured chegam sob a nav no mesmo instante no desktop e no celular. Os
   keyframes de cada tela sao a curva y(t) amostrada a cada 1% do ciclo de 27s
   (parado 2s, desce 12s, parado 3s, sobe 8s, parado 2s), interpolada linear entre
   amostras (erro maximo 0.9px na pagina), gerados dos manifestos v3 pelo
   scripts/render-sync-keyframes.mjs. Na v4 cada tela percorria a sua propria
   distancia nos mesmos 12s e o celular chegava antes. */
.device-preview { position: relative; max-width: 960px; margin-inline: auto; }
.device-scroll { position: absolute; inset: 0; overflow: hidden; contain: paint; pointer-events: none; background: #fff; }
.device-scroll[hidden] { display: none; }
.device-scroll[data-scroll-visible="false"] { visibility: hidden; }
.device-scroll > img { display: block; width: 100%; max-width: none; height: auto; }
.device-scroll-page { animation: real-preview-scroll 27s linear infinite both; }
.phone .device-scroll-page { animation-name: real-preview-scroll-phone; }
.device-scroll-nav, .device-scroll-bar { position: absolute; left: 0; opacity: 0; }
.device-scroll-nav { top: 0; animation: real-preview-nav 27s linear infinite both; }
.device-scroll-bar { bottom: 0; animation: real-preview-dock 27s linear infinite both; }
.device-scroll[data-scroll-state="paused"] > img { animation-play-state: paused; }
.device-scroll[data-scroll-state="playing"] > img { animation-play-state: running; }
/* Nav, dock e tom da barra ligam/desligam nos cruzamentos do mesmo cronograma
   (scrollY > 6 e scrollY > hero * 0.7), com a transicao do site original. */
/* @sync-keyframes v3: gerado por scripts/render-sync-keyframes.mjs a partir de capture-conflei-v3.json e capture-conflei-scroll-v3.json; nao editar a mao. */
@keyframes real-preview-scroll {
  0%, 7.407407% { transform: translate3d(0,0,0); }
  8.407407% { transform: translate3d(0,-0.0738%,0); }
  9.407407% { transform: translate3d(0,-0.2948%,0); }
  10.407407% { transform: translate3d(0,-0.6624%,0); }
  11.407407% { transform: translate3d(0,-1.1755%,0); }
  12.407407% { transform: translate3d(0,-1.8322%,0); }
  13.407407% { transform: translate3d(0,-2.6306%,0); }
  14.407407% { transform: translate3d(0,-3.5678%,0); }
  15.407407% { transform: translate3d(0,-4.6405%,0); }
  16.407407% { transform: translate3d(0,-5.8448%,0); }
  17.407407% { transform: translate3d(0,-7.1764%,0); }
  18.407407% { transform: translate3d(0,-8.6299%,0); }
  19.407407% { transform: translate3d(0,-10.1996%,0); }
  20.407407% { transform: translate3d(0,-11.8789%,0); }
  21.407407% { transform: translate3d(0,-13.6607%,0); }
  22.407407% { transform: translate3d(0,-15.5370%,0); }
  23.407407% { transform: translate3d(0,-17.4994%,0); }
  24.407407% { transform: translate3d(0,-19.5386%,0); }
  25.407407% { transform: translate3d(0,-21.6449%,0); }
  26.407407% { transform: translate3d(0,-23.8078%,0); }
  27.407407% { transform: translate3d(0,-26.0165%,0); }
  28.407407% { transform: translate3d(0,-28.2597%,0); }
  29.407407% { transform: translate3d(0,-30.5257%,0); }
  30.407407% { transform: translate3d(0,-32.8027%,0); }
  31.407407% { transform: translate3d(0,-35.0784%,0); }
  32.407407% { transform: translate3d(0,-37.3408%,0); }
  33.407407% { transform: translate3d(0,-39.6396%,0); }
  34.407407% { transform: translate3d(0,-41.9954%,0); }
  35.407407% { transform: translate3d(0,-44.2166%,0); }
  36.407407% { transform: translate3d(0,-46.1375%,0); }
  37.407407% { transform: translate3d(0,-47.8544%,0); }
  38.407407% { transform: translate3d(0,-49.4552%,0); }
  39.407407% { transform: translate3d(0,-50.9299%,0); }
  40.407407% { transform: translate3d(0,-52.2720%,0); }
  41.407407% { transform: translate3d(0,-53.4783%,0); }
  42.407407% { transform: translate3d(0,-54.5484%,0); }
  43.407407% { transform: translate3d(0,-55.4846%,0); }
  44.407407% { transform: translate3d(0,-56.2911%,0); }
  45.407407% { transform: translate3d(0,-56.9741%,0); }
  46.407407% { transform: translate3d(0,-57.5402%,0); }
  47.407407% { transform: translate3d(0,-57.9970%,0); }
  48.407407% { transform: translate3d(0,-58.3514%,0); }
  49.407407% { transform: translate3d(0,-58.6099%,0); }
  50.407407% { transform: translate3d(0,-58.7776%,0); }
  51.851852%, 62.962963% { transform: translate3d(0,-58.8665%,0); }
  63.962963% { transform: translate3d(0,-58.7706%,0); }
  64.962963% { transform: translate3d(0,-58.4778%,0); }
  65.962963% { transform: translate3d(0,-57.9744%,0); }
  66.962963% { transform: translate3d(0,-57.2397%,0); }
  67.962963% { transform: translate3d(0,-56.2496%,0); }
  68.962963% { transform: translate3d(0,-54.9808%,0); }
  69.962963% { transform: translate3d(0,-53.4149%,0); }
  70.962963% { transform: translate3d(0,-51.5430%,0); }
  71.962963% { transform: translate3d(0,-49.3695%,0); }
  72.962963% { transform: translate3d(0,-46.9142%,0); }
  73.962963% { transform: translate3d(0,-44.0998%,0); }
  74.962963% { transform: translate3d(0,-40.6911%,0); }
  75.962963% { transform: translate3d(0,-37.2157%,0); }
  76.962963% { transform: translate3d(0,-33.8150%,0); }
  77.962963% { transform: translate3d(0,-30.3994%,0); }
  78.962963% { transform: translate3d(0,-27.0099%,0); }
  79.962963% { transform: translate3d(0,-23.6863%,0); }
  80.962963% { transform: translate3d(0,-20.4671%,0); }
  81.962963% { transform: translate3d(0,-17.3883%,0); }
  82.962963% { transform: translate3d(0,-14.4834%,0); }
  83.962963% { transform: translate3d(0,-11.7828%,0); }
  84.962963% { transform: translate3d(0,-9.3136%,0); }
  85.962963% { transform: translate3d(0,-7.0992%,0); }
  86.962963% { transform: translate3d(0,-5.1597%,0); }
  87.962963% { transform: translate3d(0,-3.5121%,0); }
  88.962963% { transform: translate3d(0,-2.1697%,0); }
  89.962963% { transform: translate3d(0,-1.1432%,0); }
  90.962963% { transform: translate3d(0,-0.4402%,0); }
  91.962963% { transform: translate3d(0,-0.0658%,0); }
  92.592593%, 100% { transform: translate3d(0,0,0); }
}
@keyframes real-preview-scroll-phone {
  0%, 7.407407% { transform: translate3d(0,0,0); }
  8.407407% { transform: translate3d(0,-0.0771%,0); }
  9.407407% { transform: translate3d(0,-0.3078%,0); }
  10.407407% { transform: translate3d(0,-0.6906%,0); }
  11.407407% { transform: translate3d(0,-1.2228%,0); }
  12.407407% { transform: translate3d(0,-1.9010%,0); }
  13.407407% { transform: translate3d(0,-2.7205%,0); }
  14.407407% { transform: translate3d(0,-3.6761%,0); }
  15.407407% { transform: translate3d(0,-4.7615%,0); }
  16.407407% { transform: translate3d(0,-5.9697%,0); }
  17.407407% { transform: translate3d(0,-7.2931%,0); }
  18.407407% { transform: translate3d(0,-8.7236%,0); }
  19.407407% { transform: translate3d(0,-10.2525%,0); }
  20.407407% { transform: translate3d(0,-11.8708%,0); }
  21.407407% { transform: translate3d(0,-13.5691%,0); }
  22.407407% { transform: translate3d(0,-15.3376%,0); }
  23.407407% { transform: translate3d(0,-17.1668%,0); }
  24.407407% { transform: translate3d(0,-19.0467%,0); }
  25.407407% { transform: translate3d(0,-20.9674%,0); }
  26.407407% { transform: translate3d(0,-22.9191%,0); }
  27.407407% { transform: translate3d(0,-24.8918%,0); }
  28.407407% { transform: translate3d(0,-26.8761%,0); }
  29.407407% { transform: translate3d(0,-28.8622%,0); }
  30.407407% { transform: translate3d(0,-30.8408%,0); }
  31.407407% { transform: translate3d(0,-32.8027%,0); }
  32.407407% { transform: translate3d(0,-34.7390%,0); }
  33.407407% { transform: translate3d(0,-36.5924%,0); }
  34.407407% { transform: translate3d(0,-38.3270%,0); }
  35.407407% { transform: translate3d(0,-40.0712%,0); }
  36.407407% { transform: translate3d(0,-41.9351%,0); }
  37.407407% { transform: translate3d(0,-43.8672%,0); }
  38.407407% { transform: translate3d(0,-45.7971%,0); }
  39.407407% { transform: translate3d(0,-47.7061%,0); }
  40.407407% { transform: translate3d(0,-49.5747%,0); }
  41.407407% { transform: translate3d(0,-51.3826%,0); }
  42.407407% { transform: translate3d(0,-53.1092%,0); }
  43.407407% { transform: translate3d(0,-54.7338%,0); }
  44.407407% { transform: translate3d(0,-56.2362%,0); }
  45.407407% { transform: translate3d(0,-57.5971%,0); }
  46.407407% { transform: translate3d(0,-58.7986%,0); }
  47.407407% { transform: translate3d(0,-59.8244%,0); }
  48.407407% { transform: translate3d(0,-60.6603%,0); }
  49.407407% { transform: translate3d(0,-61.2947%,0); }
  50.407407% { transform: translate3d(0,-61.7186%,0); }
  51.851852%, 62.962963% { transform: translate3d(0,-61.9477%,0); }
  63.962963% { transform: translate3d(0,-61.7007%,0); }
  64.962963% { transform: translate3d(0,-60.9678%,0); }
  65.962963% { transform: translate3d(0,-59.7722%,0); }
  66.962963% { transform: translate3d(0,-58.1518%,0); }
  67.962963% { transform: translate3d(0,-56.1563%,0); }
  68.962963% { transform: translate3d(0,-53.8451%,0); }
  69.962963% { transform: translate3d(0,-51.2841%,0); }
  70.962963% { transform: translate3d(0,-48.5428%,0); }
  71.962963% { transform: translate3d(0,-45.6902%,0); }
  72.962963% { transform: translate3d(0,-42.7930%,0); }
  73.962963% { transform: translate3d(0,-39.9720%,0); }
  74.962963% { transform: translate3d(0,-37.3702%,0); }
  75.962963% { transform: translate3d(0,-34.6322%,0); }
  76.962963% { transform: translate3d(0,-31.7154%,0); }
  77.962963% { transform: translate3d(0,-28.7520%,0); }
  78.962963% { transform: translate3d(0,-25.7729%,0); }
  79.962963% { transform: translate3d(0,-22.8100%,0); }
  80.962963% { transform: translate3d(0,-19.8959%,0); }
  81.962963% { transform: translate3d(0,-17.0638%,0); }
  82.962963% { transform: translate3d(0,-14.3470%,0); }
  83.962963% { transform: translate3d(0,-11.7787%,0); }
  84.962963% { transform: translate3d(0,-9.3915%,0); }
  85.962963% { transform: translate3d(0,-7.2167%,0); }
  86.962963% { transform: translate3d(0,-5.2837%,0); }
  87.962963% { transform: translate3d(0,-3.6195%,0); }
  88.962963% { transform: translate3d(0,-2.2481%,0); }
  89.962963% { transform: translate3d(0,-1.1894%,0); }
  90.962963% { transform: translate3d(0,-0.4593%,0); }
  91.962963% { transform: translate3d(0,-0.0688%,0); }
  92.592593%, 100% { transform: translate3d(0,0,0); }
}
@keyframes real-preview-nav { 0%, 9.309208% { opacity: 0; } 10.235134%, 91.324725% { opacity: 1; } 92.250651%, 100% { opacity: 0; } }
@keyframes real-preview-dock { 0%, 28.286865% { opacity: 0; } 29.323902%, 78.672954% { opacity: 1; } 79.709991%, 100% { opacity: 0; } }
@keyframes real-preview-tone { 0%, 9.282138% { background-color: var(--status-hero); color: var(--status-hero-fg); } 10.208064%, 91.342772% { background-color: var(--status-page); color: var(--status-page-fg); } 92.268698%, 100% { background-color: var(--status-hero); color: var(--status-hero-fg); } }
/* @sync-keyframes end */

/* Phone status bar (CEO, 21/09/2026): the strip above the screen is drawn like a
   real one (time, island, signal, wifi, battery) and takes the tone of what is
   under it, as Safari tints its own bar: dark over the hero photo, light once
   the solid site nav is pinned right below it. The site inside stays light in
   both themes, so the bar follows the site, not the page theme. The long
   selector chain outranks theme-v1's dark-mode chrome background on purpose. */
.device-stage .device-pair .phone .device-chrome.device-status {
  --status-hero: #34424e; --status-hero-fg: #fff;
  --status-page: #fffefa; --status-page-fg: #1c1c1e;
  position: relative; justify-content: space-between; padding: 0 9px 0 10px;
  background: var(--status-hero); color: var(--status-hero-fg);
  font: 600 8px/1 -apple-system, "SF Pro Text", system-ui, "Segoe UI", sans-serif; letter-spacing: .02em;
  /* Short fade: the recorded nav turns solid within one frame, and the review of
     21/09/2026 counted the fade time as part of the bar arriving late. */
  transition: background-color 160ms ease, color 160ms ease;
}
.device-stage .device-pair .phone[data-device-tone="page"] .device-chrome.device-status {
  background: var(--status-page); color: var(--status-page-fg);
}
.device-stage .phone .device-status > i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.device-stage .phone .status-time { font-weight: 600; font-size: inherit; letter-spacing: 0; }
.device-stage .phone .status-icons { display: flex; align-items: center; gap: 3px; }
.device-stage .phone .status-icons svg { display: block; height: .95em; width: auto; fill: currentColor; }
.device-stage .phone .status-battery { height: .9em; }
@media (max-width: 760px) { .device-stage .device-pair .phone .device-chrome.device-status { font-size: 5px; padding: 0 5px 0 6px; } }

/* Fallback path: the bar follows the same 27s timeline as the pinned nav
   (real-preview-tone above), and keeps its phase when playback pauses, exactly
   like the page images below. */
.device-stage .device-pair .phone:has(.device-scroll:not([hidden])) .device-chrome.device-status {
  animation: real-preview-tone 27s linear infinite both; animation-play-state: paused;
}
.device-stage .device-pair .phone:has(.device-scroll[data-scroll-state="playing"][data-scroll-visible="true"]) .device-chrome.device-status {
  animation-play-state: running;
}
/* Motion off shows the original poster (top of the page): the bar goes back to the
   hero tone without touching the paused timeline, so resuming stays in phase.
   Only once the fallback is on screen: the hidden panel keeps visible="false"
   in the video path, where data-device-tone owns the bar. */
.device-stage .device-pair .phone:has(.device-scroll:not([hidden])[data-scroll-visible="false"]) .device-chrome.device-status {
  background-color: var(--status-hero) !important; color: var(--status-hero-fg) !important;
}

@media (prefers-reduced-motion: reduce) {
  html:not([data-motion-preference="on"]) .device-scroll { visibility: hidden; }
  html:not([data-motion-preference="on"]) .device-scroll > img { animation-play-state: paused !important; }
}
/* Same opt-in correction as device-scroll-access-v1.css, for the bar timeline and
   for what that frozen file cannot know: the phone has its own keyframes (v5) and
   the sampled curves need linear timing between samples, not its cubic-bezier. */
@media screen and (prefers-reduced-motion: reduce) {
  html.motion-v7-ready[data-motion-preference="on"] .device-pair .device-scroll-page {
    animation-timing-function: linear !important;
  }
  html.motion-v7-ready[data-motion-preference="on"] .device-pair .phone .device-scroll-page {
    animation-name: real-preview-scroll-phone !important;
  }
  html.motion-v7-ready[data-motion-preference="on"] .device-stage .device-pair .phone:has(.device-scroll:not([hidden])) .device-chrome.device-status {
    animation: real-preview-tone 27s linear infinite both !important; animation-play-state: paused !important;
  }
  html.motion-v7-ready[data-motion-preference="on"][data-motion-enabled="true"]
    .device-stage .device-pair .phone:has(.device-scroll[data-scroll-state="playing"][data-scroll-visible="true"]) .device-chrome.device-status {
    animation-play-state: running !important;
  }
}
@media print { .device-scroll { display: none !important; } }