/* Exact protected keyframe bodies copied from client-artifacts/base-site/serras-vessel-portal/index.html. */
@keyframes cardEmerge {
    0%   { opacity:0;   filter:blur(6px) brightness(.6) saturate(.5); }
    38%  { opacity:.85; filter:blur(4px) brightness(.78) saturate(.7); }
    100% { opacity:1;   filter:none; } }

@keyframes cardLeave {
    0%   { opacity:1;   filter:none; }
    55%  { opacity:.6;  filter:blur(3px) brightness(.8) saturate(.72); }
    100% { opacity:0;   filter:blur(7px) brightness(.55) saturate(.45); } }

@keyframes stageIn { from { opacity:0; filter:blur(4px); } }

@keyframes markRipple {
    0%, 100% { transform:translateY(0); }
    25%      { transform:translateY(calc(var(--ra, .3px) * -1)); }
    75%      { transform:translateY(var(--ra, .3px)); } }

@keyframes btnEmerge {
    0%   { opacity:0;   filter:blur(9px) brightness(.55) saturate(.45); }
    28%  { opacity:.82; filter:blur(7px) brightness(.72) saturate(.6); }
    100% { opacity:1;   filter:none; } }

@keyframes mistPart {
    0%   { opacity:.9;  transform:translate(0,0) scale(1); }
    45%  { opacity:.6;  transform:translate(9px,-4px) scale(1.08); }
    100% { opacity:0;   transform:translate(28px,-14px) scale(1.28); } }

@keyframes apertureIn {
    0%   { opacity:0;  filter:blur(6px) brightness(.6); }
    45%  { opacity:.7; filter:blur(2px) brightness(.82); }
    100% { opacity:1;  filter:none; } }

@keyframes apRingBreath {
    0%, 100% { opacity:.42; }
    50%      { opacity:.58; } }

@keyframes apScan {
    0%   { opacity:.9; transform:rotate(-90deg); }
    100% { opacity:0;  transform:rotate(200deg); } }

@keyframes apSpin {
    from { transform:rotate(var(--spin0, 0deg)); }
    to   { transform:rotate(calc(var(--spin0, 0deg) + 360deg)); } }

@keyframes apBeadBreath {
    0%, 100% { opacity:.68;
      filter:drop-shadow(0 0 2px rgba(255,182,39,.45))
             drop-shadow(0 0 6px rgba(255,182,39,.14)); }
    50% { opacity:1;
      filter:drop-shadow(0 0 3px rgba(255,182,39,.60))
             drop-shadow(0 0 9px rgba(255,182,39,.24)); } }

@keyframes railPaneIn {
    0%   { opacity:0;  filter:blur(6px) brightness(.6);
           transform:translateX(18px); }
    55%  { opacity:.85; filter:blur(2px) brightness(.82);
           transform:translateX(6px); }
    100% { opacity:1;  filter:none; transform:none; } }

@keyframes railPaneOut {
    0%   { opacity:1; filter:none; transform:none; }
    100% { opacity:0; filter:blur(6px) brightness(.6);
           transform:translateX(14px); } }

@keyframes railIn {
    0%   { opacity:0;  transform:translateX(14px);
           filter:blur(5px) brightness(.75); }
    55%  { opacity:.85; transform:translateX(4px);
           filter:blur(2px) brightness(.88); }
    100% { opacity:1;  transform:none; filter:none; } }

@keyframes railOut {
    0%   { opacity:1; transform:none; filter:none; }
    100% { opacity:0; transform:translateX(10px);
           filter:blur(5px) brightness(.75); } }

@keyframes cmdWellIn {
    0%   { opacity:0;  transform:translateY(7px);
           filter:blur(5px) brightness(.75); }
    55%  { opacity:.85; transform:translateY(2px);
           filter:blur(2px) brightness(.88); }
    100% { opacity:1;  transform:none; filter:none; } }

@keyframes cmdSwapOut { to   { opacity:0; filter:blur(4px); } }

@keyframes cmdSwapIn  { from { opacity:0; filter:blur(4px); } }

@keyframes cpPlateIn {
    0%   { opacity:0; filter:blur(6px) brightness(.6); }
    55%  { opacity:1; filter:blur(2px) brightness(.85); }
    100% { opacity:1; filter:none; } }

@keyframes cpPopIn {
    0%   { opacity:0; filter:blur(6px) brightness(.7); transform:translateY(-4px); }
    100% { opacity:1; filter:none; transform:none; } }

@keyframes cpPopOut {
    0%   { opacity:1; filter:none; }
    100% { opacity:0; filter:blur(5px) brightness(.7); } }

@keyframes srRowIn { from { opacity:0; filter:blur(4px); transform:translateY(4px); }
                       to   { opacity:1; filter:blur(0); transform:none; } }

@keyframes cpPaneDip {
      0%, 100% { opacity:1; filter:none; }
      45%      { opacity:.85; filter:blur(2px); } }

@keyframes prSettle { 0% { transform:rotate(32deg); }
                        100% { transform:rotate(50deg); } }

@keyframes dvTabIn { from { opacity:0; filter:blur(6px); }
                       to   { opacity:1; filter:blur(0); } }

/* Tarva integration: preserve the protected bodies above and bind them to the existing guide. */
:root,
:root[data-theme="light"] {
  --amber: #ffb627;
  --tarva-fog-in-duration: 620ms;
  --tarva-fog-out-duration: 380ms;
  --tarva-fog-in-ease: cubic-bezier(.33, 0, .18, 1);
  --tarva-fog-out-ease: cubic-bezier(.45, .05, .6, 1);
  --tarva-press-ease: cubic-bezier(.2, .72, .2, 1);
}

html.js body .site-rail {
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  backdrop-filter: blur(16px) saturate(1.15);
}

html.js body .rail-scrim {
  background: transparent;
  -webkit-backdrop-filter: blur(3px) saturate(.94);
  backdrop-filter: blur(3px) saturate(.94);
}

html.js body .site-rail[data-motion-contract-state="opening"] {
  visibility: visible;
  pointer-events: auto;
  animation: railPaneIn var(--tarva-fog-in-duration) var(--tarva-fog-in-ease) both;
}

html.js body .site-rail[data-motion-contract-state="closing"] {
  visibility: visible;
  pointer-events: none;
  animation: railPaneOut var(--tarva-fog-out-duration) var(--tarva-fog-out-ease) both;
}

html.js body .site-rail[data-motion-contract-state="opening"] :where(.guide-level:not([hidden]) > *, .guide-context-list:not([hidden]) > li) {
  animation: railIn 520ms var(--tarva-fog-in-ease) both;
}

html.js body .site-rail[data-motion-contract-state="closing"] :where(.guide-level:not([hidden]) > *, .guide-context-list:not([hidden]) > li) {
  animation: railOut 360ms var(--tarva-fog-out-ease) both;
}

:where(.rail-main-grid a, .guide-context-list a):active {
  transform: translateY(1px) !important;
  transition: transform 120ms var(--tarva-press-ease);
}

/* Podium's asymmetric press grammar [SPEC 9.1]: press-in is fast (.12s),
   controls always move down, never up: 1px for wells, rows, chips and plain
   buttons, 2px only for keys (Begin, Send message, the pressed filter key).
   UI round 9 (was 2px for every button). */
:where(button:not(.signal-aperture), [role="button"], [data-motion-press]):active {
  transform: translateY(1px) !important;
  transition: transform 120ms var(--tarva-press-ease);
}

:where(.arrival-begin, .contact-submit, .work-filters button[aria-pressed="true"]):active {
  transform: translateY(2px) !important;
}

[data-live-signal="aperture-bead"] {
  color: #ffb627;
}

[data-live-signal="active-rail-strip"],
[data-live-signal="attention-item"] {
  border-color: #ffb627;
}

.site-rail :where(a[aria-current="page"], button[aria-pressed="true"]) {
  color: var(--cyan);
}

/* UI round 9: the aperture lives again. The rule that stopped .ap-ring,
   .ap-rotor and .ap-bead (animation: none !important) is removed, so the 45s
   ring breath, the 60s spin and the 4.6s bead breath run [SPEC 8.6, 9.2];
   reduced motion still freezes all three (signal-aperture.html and the global
   reduced-motion rules). */

[data-guide-state="open"] .ap-scan {
  animation: apScan 900ms var(--tarva-fog-in-ease) 1;
}

[data-motion-materialize] {
  animation: cardEmerge 460ms cubic-bezier(.16, 1, .3, 1) both;
}

/*
 * UI round 9 (operator decision 4): content emergence [SPEC 9.3 "Dashboard
 * entry" / "Station swap"; MAPPING 15.1]. On every route the column's blocks
 * fog in once, Podium's cardEmerge for the head block and cmdWellIn for each
 * well after it, on the fog curve with Podium's stagger (0, .07, .13, .17,
 * .21, .27s) after a .12s beat (its fast-mode timing; the slower 3.3s
 * dashboard-entry timing is not used). It starts only when the route is settled (on a first
 * Home visit, after Begin), never without JavaScript, and resolves instantly
 * under reduced motion (reduced-motion.css). Visibility never rides the
 * animation at rest: `backwards` fill hides a block only during its delay.
 */
:is(html.js.arrival-seen body, html.js body:not([data-arrival-state="pending"])) [data-route-content] > .section-surface > :not(.work-index):not(.content-end-recovery):not(style),
:is(html.js.arrival-seen body, html.js body:not([data-arrival-state="pending"])) [data-route-content] .work-index > :not(style),
:is(html.js.arrival-seen body, html.js body:not([data-arrival-state="pending"])) [data-route-content] > .work-detail-surface > .work-detail > *,
:is(html.js.arrival-seen body, html.js body:not([data-arrival-state="pending"])) [data-route-content] > .work-detail-surface > .work-sequence,
:is(html.js.arrival-seen body, html.js body:not([data-arrival-state="pending"])) [data-route-content] > .concept-surface > :not(.content-end-recovery) {
  animation: cmdWellIn .55s cubic-bezier(.33, 0, .18, 1) calc(.12s + var(--cd, .27s)) backwards;
}
:is(html.js.arrival-seen body, html.js body:not([data-arrival-state="pending"])) [data-route-content] > .section-surface > :first-child:not(.work-index):not(.content-end-recovery):not(style),
:is(html.js.arrival-seen body, html.js body:not([data-arrival-state="pending"])) [data-route-content] .work-index > :first-child,
:is(html.js.arrival-seen body, html.js body:not([data-arrival-state="pending"])) [data-route-content] > .work-detail-surface > .work-detail > :first-child,
:is(html.js.arrival-seen body, html.js body:not([data-arrival-state="pending"])) [data-route-content] > .concept-surface > :first-child {
  animation: cardEmerge .9s cubic-bezier(.33, 0, .18, 1) .12s backwards;
}
[data-route-content] :is(.section-surface, .work-index, .work-detail, .concept-surface) > :nth-child(2) { --cd: .07s; }
[data-route-content] :is(.section-surface, .work-index, .work-detail, .concept-surface) > :nth-child(3) { --cd: .13s; }
[data-route-content] :is(.section-surface, .work-index, .work-detail, .concept-surface) > :nth-child(4) { --cd: .17s; }
[data-route-content] :is(.section-surface, .work-index, .work-detail, .concept-surface) > :nth-child(5) { --cd: .21s; }

/* The glass header bar fogs in with the column (Podium cpPlateIn). */
html.js body:not([data-arrival-state="pending"]) .shell::before {
  animation: cpPlateIn 1s cubic-bezier(.33, 0, .18, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  html.js body .site-rail[data-motion-contract-state],
  html.js body .site-rail[data-motion-contract-state] *,
  [data-guide-state="open"] .ap-scan,
  [data-motion-materialize],
  [data-route-content] *,
  .shell::before {
    animation: none !important;
  }
  html.js body .site-rail[data-motion-contract-state],
  html.js body .site-rail[data-motion-contract-state] *,
  [data-guide-state="open"] .ap-scan,
  [data-motion-materialize] {
    transition: none !important;
    transform: none !important;
  }
}
html[data-motion-preference="reduce"] [data-route-content] *,
html[data-motion-preference="reduce"] .shell::before { animation: none !important; }