/* 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); } }

/* The document's Firstlight gradients are the silent, complete no-WebGL state. */
#vessel-canvas {
  z-index: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 180ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 180ms;
}

:root:not([data-theme="light"]) body.gl-ready[data-scheme="dark"] #vessel-canvas {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

:root[data-theme="light"] #vessel-canvas,
body[data-scheme="light"] #vessel-canvas,
body.gl-unavailable #vessel-canvas,
body.gl-context-lost #vessel-canvas {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  #vessel-canvas { transition: none; }
}