.brand-transition {
  --transition-bg: var(--surface-page, #0b1120);
  --transition-ink: var(--text-primary, #e7edf5);
  --transition-muted: var(--text-secondary, #a0aec0);
  --transition-gold: #d5ae6e;
  --transition-cyan: #58bdcd;
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
  overflow: hidden;
  padding: max(28px, env(safe-area-inset-top)) 28px max(24px, env(safe-area-inset-bottom));
  background: var(--transition-bg);
  color: var(--transition-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", sans-serif;
}
.transition-ambient { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 43%, color-mix(in srgb, var(--transition-gold) 10%, transparent), transparent 53%); }
.transition-ambient::before, .transition-ambient::after { content: ""; position: absolute; inset: 8% -15%; opacity: .65; }
.transition-ambient::before { background: radial-gradient(ellipse at 35% 40%, #d5ae6e13, transparent 48%), radial-gradient(ellipse at 65% 55%, #58bdcd16, transparent 46%); }
.transition-ambient::after { inset: 18% 0 8%; background-image: radial-gradient(circle, color-mix(in srgb, var(--transition-gold) 35%, transparent) .75px, transparent 1px); background-size: 57px 57px; mask-image: radial-gradient(ellipse at center, #000, transparent 66%); opacity: .45; }
.transition-wordmark { display: flex; align-items: center; align-self: flex-start; gap: 10px; font-size: 17px; font-weight: 650; letter-spacing: -.4px; }
.transition-wordmark img { border-radius: 8px; object-fit: contain; }
.wordmark-period { color: var(--transition-gold); }
.transition-content { margin: auto; padding: 28px 0 48px; width: min(100%, 480px); text-align: center; }
.transition-emblem { position: relative; display: grid; place-items: center; width: 300px; height: 300px; margin: 0 auto 24px; }
.emblem-halo { position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, #d5ae6e20, #58bdcd0b 45%, transparent 70%); }
.emblem-pulse { position: absolute; inset: 23%; border: 1px solid color-mix(in srgb, var(--transition-gold) 24%, transparent); border-radius: 50%; opacity: .4; }
.emblem-reticle { position: absolute; inset: 7%; border: 1px dashed color-mix(in srgb, var(--transition-gold) 17%, transparent); border-radius: 50%; }
.emblem-reticle::before, .emblem-reticle::after { content: ""; position: absolute; inset: -9%; border: 1px solid color-mix(in srgb, var(--transition-cyan) 11%, transparent); border-radius: 50%; }
.emblem-reticle::after { inset: 14%; border-color: color-mix(in srgb, var(--transition-gold) 12%, transparent); }
.emblem-plane { position: absolute; inset: 0; border-radius: 50%; transform: rotate(-32deg) scaleY(.48); }
.plane-cyan { inset: 10px; transform: rotate(42deg) scaleY(.6); }
.plane-inner { inset: 32px; transform: rotate(95deg) scaleY(.78); }
.emblem-orbit { position: absolute; inset: 0; border: 1px solid color-mix(in srgb, var(--transition-gold) 30%, transparent); border-radius: 50%; }
.emblem-orbit::before { content: ""; position: absolute; inset: -2px; border-radius: 50%; padding: 2px; background: conic-gradient(from 0deg, transparent 48%, #d5ae6e30 75%, #f9d28e 99%, transparent); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; }
.emblem-orbit::after { content: ""; position: absolute; top: -3px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; background: #ffe2a4; box-shadow: 0 0 10px 3px #eec28288, 0 0 26px #d5ae6e66; }
.plane-cyan .emblem-orbit { transform: rotate(140deg); border-color: #58bdcd38; }
.plane-cyan .emblem-orbit::before { background: conic-gradient(transparent 52%, #58bdcd25 78%, #8de6eb 99%, transparent); }
.plane-cyan .emblem-orbit::after { background: #bcf7f8; box-shadow: 0 0 10px 3px #58bdcd77, 0 0 24px #58bdcd55; }
.plane-inner .emblem-orbit { transform: rotate(230deg); opacity: .55; }
.emblem-particles { position: absolute; inset: 0; }
.emblem-particles i { --particle-angle: 15deg; --particle-delay: 0s; position: absolute; left: calc(50% - 1.5px); top: calc(50% - 1.5px); width: 3px; height: 3px; border-radius: 50%; background: var(--transition-gold); box-shadow: 0 0 7px currentColor; opacity: .55; transform: rotate(var(--particle-angle)) translateX(126px); }
.emblem-particles i:nth-child(2) { --particle-angle: 65deg; --particle-delay: -.7s; }
.emblem-particles i:nth-child(3) { --particle-angle: 118deg; --particle-delay: -2.2s; background: var(--transition-cyan); }
.emblem-particles i:nth-child(4) { --particle-angle: 157deg; --particle-delay: -1.1s; }
.emblem-particles i:nth-child(5) { --particle-angle: 205deg; --particle-delay: -2.8s; }
.emblem-particles i:nth-child(6) { --particle-angle: 246deg; --particle-delay: -1.8s; background: var(--transition-cyan); }
.emblem-particles i:nth-child(7) { --particle-angle: 293deg; --particle-delay: -.4s; }
.emblem-particles i:nth-child(8) { --particle-angle: 330deg; --particle-delay: -3.2s; background: var(--transition-cyan); }
.emblem-core { position: relative; display: grid; place-items: center; width: 108px; height: 108px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--transition-gold) 52%, transparent); border-radius: 32px; background: linear-gradient(145deg, color-mix(in srgb, var(--transition-bg) 84%, var(--transition-gold)), var(--transition-bg) 70%); box-shadow: 0 16px 42px #00000025, 0 0 44px #d5ae6e18, inset 0 1px 0 #fff3, inset 0 -1px 0 #58bdcd33; transform: rotate(-6deg); }
.emblem-core::after { content: ""; position: absolute; inset: -50%; background: linear-gradient(110deg, transparent 42%, #ffffff28 49%, #ffffff08 54%, transparent 61%); transform: translateX(-80%); pointer-events: none; }
.emblem-core img { width: 66px; height: 66px; border-radius: 20px; object-fit: contain; }
.transition-eyebrow { margin: 0 0 14px; color: var(--transition-muted); font-size: 11px; letter-spacing: 4px; }
.transition-content h1 { margin: 0; font-size: clamp(25px, 4.5vw, 34px); font-weight: 550; line-height: 1.4; letter-spacing: -.8px; text-wrap: balance; }
.transition-description { max-width: 380px; margin: 16px auto 0; color: var(--transition-muted); font-size: 14px; line-height: 1.85; text-wrap: pretty; overflow-wrap: anywhere; }
.transition-progress { width: 132px; height: 3px; margin: 28px auto 0; overflow: hidden; background: color-mix(in srgb, var(--transition-gold) 15%, transparent); border-radius: 3px; }
.transition-progress span { display: block; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, var(--transition-gold) 48%, var(--transition-cyan), transparent); }
.transition-detail { margin-top: 26px; }
.transition-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.transition-actions a, .transition-actions button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; padding: 10px 22px; border: 1px solid color-mix(in srgb, var(--transition-gold) 45%, transparent); border-radius: 12px; background: color-mix(in srgb, var(--transition-gold) 9%, var(--transition-bg)); color: var(--transition-ink); font: inherit; font-size: 13px; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s; }
.transition-actions a:hover, .transition-actions button:hover { background: color-mix(in srgb, var(--transition-gold) 18%, var(--transition-bg)); border-color: var(--transition-gold); }
.transition-actions :focus-visible { outline: 2px solid var(--transition-gold); outline-offset: 4px; }
.transition-footer { display: flex; align-items: center; justify-content: center; gap: 16px; color: var(--transition-muted); font-size: 11px; letter-spacing: 1.5px; line-height: 1.8; }
.footer-line { width: 26px; height: 1px; background: color-mix(in srgb, var(--transition-gold) 30%, transparent); }

/* Motion uses transform/opacity; the decorative layers never delay navigation. */
.is-busy .transition-ambient::before { animation: ambient-drift 12s ease-in-out infinite alternate; }
.is-busy .transition-emblem { animation: emblem-arrive .8s cubic-bezier(.16, 1, .3, 1) both; }
.is-busy .emblem-halo { animation: halo-breathe 4s ease-in-out infinite; }
.is-busy .emblem-pulse { animation: energy-expand 3.6s ease-out infinite; }
.is-busy .pulse-late { animation-delay: -1.8s; }
.is-busy .emblem-reticle { animation: orbit-travel 48s linear infinite reverse; }
.is-busy .emblem-orbit { animation: orbit-travel 4.8s linear infinite; }
.is-busy .plane-cyan .emblem-orbit { animation-duration: 6.8s; animation-direction: reverse; animation-delay: -2.4s; }
.is-busy .plane-inner .emblem-orbit { animation-duration: 9s; animation-delay: -5.7s; }
.is-busy .emblem-particles i { animation: particle-drift 3.6s ease-out var(--particle-delay) infinite; }
.is-busy .emblem-core { animation: core-float 4s ease-in-out infinite; }
.is-busy .emblem-core::after { animation: core-sheen 4.8s ease-in-out infinite; }
.is-busy .transition-eyebrow { animation: content-arrive .6s .1s ease-out both; }
.is-busy .transition-content h1 { animation: content-arrive .6s .16s ease-out both; }
.is-busy .transition-description { animation: content-arrive .6s .22s ease-out both; }
.is-busy .transition-progress span { animation: progress-travel 1.8s ease-in-out infinite; }
@keyframes orbit-travel { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes ambient-drift { to { transform: translate3d(4%, -3%, 0) rotate(8deg); opacity: 1; } }
@keyframes halo-breathe { 50% { transform: scale(1.15); opacity: .55; } }
@keyframes energy-expand { from { transform: scale(.85); opacity: 0; } 18% { opacity: .45; } to { transform: scale(1.85); opacity: 0; } }
@keyframes particle-drift { from { transform: rotate(var(--particle-angle)) translateX(84px) scale(.5); opacity: 0; } 25% { opacity: .8; } to { transform: rotate(calc(var(--particle-angle) + 18deg)) translateX(158px) scale(.2); opacity: 0; } }
@keyframes core-float { 50% { transform: translateY(-7px) rotate(2deg); } }
@keyframes core-sheen { 0%, 25% { transform: translateX(-80%); } 65%, 100% { transform: translateX(80%); } }
@keyframes progress-travel { from { transform: translateX(-110%); } to { transform: translateX(290%); } }
@keyframes emblem-arrive { from { opacity: 0; transform: scale(.8) rotate(-12deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes content-arrive { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  .brand-transition { padding-inline: 22px; }
  .transition-emblem { width: 250px; height: 250px; margin-bottom: 20px; }
  .emblem-particles { inset: 0 -25px; transform: scale(.82); }
  .emblem-particles i:nth-child(n+6) { display: none; }
  .transition-content { padding-block: 28px 36px; }
  .transition-footer { font-size: 10px; gap: 10px; }
}
@media (max-height: 680px) {
  .transition-content { padding-block: 20px; }
  .transition-emblem { width: 190px; height: 190px; margin-bottom: 16px; }
  .emblem-core { width: 86px; height: 86px; border-radius: 26px; }
  .emblem-core img { width: 54px; height: 54px; border-radius: 16px; }
  .emblem-particles { inset: 0 -55px; transform: scale(.62); }
  .transition-description { margin-top: 12px; }
  .transition-progress { margin-top: 20px; }
}
/* Keep the recovery link available immediately when motion is disabled. */
.brand-boot-recovery { animation: boot-recovery 12s step-end both; }
@keyframes boot-recovery { from { visibility: hidden; } to { visibility: visible; } }
@media (prefers-reduced-motion: reduce) {
  .brand-transition *, .brand-transition *::before, .brand-transition *::after { animation: none !important; transition: none !important; }
  .transition-progress span { margin: auto; }
  .pulse-late { display: none; }
}