/* Hold the outgoing scene across navigation; JS releases it only after the new logo decodes. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: grol-hold-frame 4s linear forwards; opacity: 1; }
::view-transition-new(root) { animation: none; opacity: 0; }
html.grol-bridge-ready::view-transition-old(root) { animation: grol-chrome-reveal .25s ease-out reverse forwards; }
html.grol-bridge-ready::view-transition-new(root) { animation: grol-chrome-reveal .25s ease-out forwards; }
@keyframes grol-hold-frame { from { opacity: 1; } to { opacity: 1; } }
/* The authenticated destination is already rendered behind this one-time welcome. */
.grol-arrival { display: none; }
.app-login .login-logo { display: block; width: min(148px, 45vw); margin: 0 auto 12px; }
html.grol-departing .grol-arrival,
html.grol-arrival-pending .grol-arrival,
html.grol-arriving .grol-arrival {
  display: block; position: fixed; inset: 0; z-index: 10000;
  color: var(--brand-ink); isolation: isolate;
}
.grol-arrival-backdrop { position: absolute; inset: 0; background: var(--brand-surface); overflow: hidden; }
.grol-arrival-canvas, .grol-arrival-halo { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Particle opacity shares the logo's clock; a second canvas fade would create a gap. */
.grol-arrival-halo {
  background: radial-gradient(ellipse at 50% 44%, var(--brand-accent-soft), transparent 56%),
              radial-gradient(ellipse at 72% 65%, var(--brand-support-soft), transparent 65%);
}
html.grol-arriving .grol-arrival-halo { animation: grol-light-bloom 3.6s ease-in-out both; }
@keyframes grol-light-bloom {
  0%, 100% { transform: scale(1); filter: saturate(1); }
  45% { transform: scale(1.18); filter: saturate(1.65); }
}
.grol-arrival-mark {
  position: absolute; width: min(340px, 58vw); height: auto;
  /* Viewport coordinates remain identical when the destination gains a scrollbar. */
  left: 50vw; top: 43vh; transform: translate(-50%, -50%);
  transform-origin: 0 0;
}
.grol-arrival-copy {
  position: absolute; top: calc(43% + min(190px, 34vw)); left: 16px; right: 16px;
  text-align: center;
}
.grol-arrival-copy p { margin: 0 0 6px; color: var(--brand-ink-muted); font-size: 14px; }
.grol-arrival-copy h1 { margin: 0 0 10px; font-size: clamp(24px, 4vw, 40px); font-weight: 800; }
.grol-arrival-copy span { color: var(--brand-ink-muted); font-size: 14px; }
.grol-arrival-skip {
  position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom));
  min-height: 44px; padding: 10px 16px; border: 1px solid var(--brand-rule);
  border-radius: var(--brand-radius); background: var(--brand-surface); color: var(--brand-ink-muted);
  font: 600 13px var(--brand-font); cursor: pointer;
}
.grol-arrival-skip:hover { background: var(--brand-accent-soft); color: var(--brand-accent-text); }
.grol-arrival-skip:focus-visible { outline: 2px solid var(--brand-support-text); outline-offset: 3px; }
html.grol-arrival-pending .app-header,
html.grol-arrival-pending .app-subnav,
html.grol-arrival-pending .app-main { visibility: hidden; }
/* Measure the final header slot, not a point in its usual entrance animation. */
html.grol-arrival-pending .app-header { animation: none !important; transform: none; }
html.grol-arrival-pending .header-home .g-logo-sm,
html.grol-arriving .header-home .g-logo-sm { opacity: 0; animation: none; }
html.grol-arrival-pending .header-home::after,
html.grol-arriving .header-home::after { opacity: 0; animation: none; }
html.grol-arriving .app-header,
html.grol-arriving .app-subnav { animation: grol-chrome-reveal .6s var(--brand-ease-out) 1s backwards !important; }
html.grol-arriving .app-main { animation: grol-workspace-reveal .8s var(--brand-ease-out) 1s backwards !important; }
/* Hand off to the established header motion without replaying its entrance. */
html.grol-welcomed .app-header.m-chrome,
html.grol-welcomed .app-main { animation: none !important; }
html.grol-welcomed .header-home .g-logo-sm { animation: m-logo-breathe 10s ease-in-out 2s infinite; }
@keyframes grol-chrome-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes grol-workspace-reveal { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@media (max-height: 580px) {
  .grol-arrival-mark { width: min(200px, 38vw); top: 37vh; }
  .grol-arrival-copy { top: 63%; }
  .grol-arrival-copy span { display: none; }
}
@media print {
  .grol-arrival { display: none !important; }
  html.grol-arrival-pending .app-main { visibility: visible; }
}