/* Shared visual transfer and inter-page eye loader. */
.transition-layer { position: absolute; z-index: 20; inset: 0; overflow: hidden; pointer-events: none; isolation: isolate; }
.transition-darkness, .transition-crt-break, .transition-eye, .transition-warp { position: absolute; inset: 0; }
.transition-darkness { z-index: 0; opacity: 0; background: #03060a; pointer-events: none; }
.transition-darkness::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 20% 18% at 49.4% 40.8%, #17334b80 0%, #10223545 43%, transparent 100%); }
#scene[data-state="ACTION_CONFIRM"] .transition-darkness { opacity: .16; transition: opacity 300ms ease-out; }
#scene[data-state="DARKEN"] .transition-darkness { animation: cinematic-darken var(--bb-room-darken,680ms) cubic-bezier(.4,0,.2,1) forwards; }
#scene[data-state="CRT_BREAK"] .transition-darkness,
#scene[data-state="LOGO_TAKEOVER"] .transition-darkness,
#scene[data-state="LOGO_ROTATE"] .transition-darkness,
#scene[data-state="PUPIL_WARP"] .transition-darkness,
#scene[data-state="TRANSITION_VIDEO"] .transition-darkness,
#scene[data-state="ROUTE_LOADING"] .transition-darkness,
#scene[data-state="NAVIGATE"] .transition-darkness { opacity: .94; }
@keyframes cinematic-darken { 0% { opacity: .16; } 30% { opacity: .35; } 65% { opacity: .65; } 100% { opacity: .92; } }

#scene[data-state="ACTION_CONFIRM"] .controls,
#scene[data-state="ACTION_CONFIRM"] .signature,
#scene[data-state="ACTION_CONFIRM"] .connection,
#scene[data-state="ACTION_CONFIRM"] .doorway { pointer-events: none; animation: ui-shutdown var(--bb-ui-shutdown,420ms) ease-out both; }
@keyframes ui-shutdown {
  0% { opacity: 1; filter: brightness(1); transform: translateX(0); }
  24% { opacity: .94; filter: brightness(.72); }
  48% { opacity: .82; filter: brightness(.42) contrast(1.3); transform: translateX(2px) skewX(.45deg); }
  72% { opacity: .46; filter: brightness(.28) contrast(1.5); transform: translateX(-3px) skewX(-.7deg); }
  100% { opacity: 0; filter: brightness(.16); transform: translateX(0); }
}

.transition-crt-break { z-index: 1; visibility: hidden; opacity: 0; background: linear-gradient(transparent 0 25%,#8edfff45 25% 29%,transparent 29% 47%,#ff718b38 47% 50%,transparent 50% 76%,#d8f5ff55 76% 78%,transparent 78%); mix-blend-mode: screen; }
.transition-crt-break::before, .transition-crt-break::after { content: ""; position: absolute; inset: 0; background: inherit; }
.transition-crt-break::before { transform: translateX(-5px); filter: drop-shadow(3px 0 #ff466044); }
.transition-crt-break::after { background: linear-gradient(180deg,#e4f8ff15,transparent 34%,#6dc9ff22 52%,transparent 72%); }
#scene[data-state="CRT_BREAK"] .transition-crt-break { visibility: visible; animation: global-crt-failure var(--bb-crt-break,180ms) steps(1,end) both; }
@keyframes global-crt-failure {
  0%,100% { opacity: 0; }
  12% { opacity: .72; transform: translateX(0); }
  25% { opacity: .22; transform: translateX(-1.4%); }
  39% { opacity: .9; transform: translateX(1.1%); filter: saturate(1.8) brightness(1.25); }
  56% { opacity: .08; transform: translateX(0); filter: brightness(.12); }
  70% { opacity: .7; transform: translateX(-.6%); filter: brightness(1.1); }
  84% { opacity: .18; transform: translateX(.4%); }
}

.transition-eye { z-index: 2; display: grid; place-items: center; visibility: hidden; opacity: 0; }
.transition-eye img { position: relative; z-index: 0; display: block; width: clamp(120px,24vw,300px); height: auto; filter: brightness(.58) drop-shadow(0 0 18px #3d9df266); transform: scale(.62) rotate(-3deg); }
.transition-eye__pupil { position: absolute; z-index: 1; top: 50%; left: 50%; width: min(6.25vw,18.75px); aspect-ratio: 1; border-radius: 50%; background: #00040a; opacity: .94; transform: translate(-50%,-50%) scale(.75); transform-origin: center; }
#scene[data-state="LOGO_TAKEOVER"] .transition-eye,
#scene[data-state="LOGO_ROTATE"] .transition-eye,
#scene[data-state="PUPIL_WARP"] .transition-eye,
#scene[data-state="TRANSITION_VIDEO"] .transition-eye { visibility: visible; opacity: 1; }
#scene[data-state="LOGO_TAKEOVER"] .transition-eye img { animation: eye-logo-takeover var(--bb-logo-takeover,360ms) cubic-bezier(.2,.8,.2,1) both; }
#scene[data-state="LOGO_TAKEOVER"] .transition-eye__pupil { animation: pupil-settle var(--bb-logo-takeover,360ms) ease-out both; }
@keyframes eye-logo-takeover { 0% { opacity: .18; filter: brightness(.32) blur(1.5px) drop-shadow(0 0 2px #3d9df233); transform: scale(.62) rotate(-3deg); } 64% { opacity: .82; filter: brightness(.72) blur(.35px) drop-shadow(0 0 24px #3d9df288); transform: scale(.93) rotate(2deg); } 100% { opacity: 1; filter: brightness(.92) blur(0) drop-shadow(0 0 26px #3d9df288); transform: scale(.9) rotate(0); } }
@keyframes pupil-settle { to { transform: translate(-50%,-50%) scale(1); } }
#scene[data-state="LOGO_ROTATE"] .transition-eye img { animation: eye-logo-rotate var(--bb-logo-rotate,820ms) cubic-bezier(.38,.02,.82,.48) both; }
@keyframes eye-logo-rotate { 0% { transform: scale(.9) rotate(0); filter: brightness(.92) drop-shadow(0 0 26px #3d9df288); } 28% { transform: scale(.96) rotate(34deg); } 100% { transform: scale(1.16) rotate(270deg); filter: brightness(1.12) blur(.7px) drop-shadow(0 0 42px #5cbaffaa); } }
#scene[data-state="PUPIL_WARP"] .transition-eye img { animation: eye-pulled-forward var(--bb-pupil-warp,520ms) cubic-bezier(.2,.85,.18,1) both; }
#scene[data-state="PUPIL_WARP"] .transition-eye__pupil { animation: pupil-takeover var(--bb-pupil-warp,520ms) cubic-bezier(.2,.85,.18,1) both; }
@keyframes eye-pulled-forward { from { transform: scale(1.16) rotate(270deg); filter: brightness(1.12) blur(.7px) drop-shadow(0 0 42px #5cbaffaa); } 70% { opacity: .82; } to { transform: scale(3.8) rotate(270deg); opacity: .12; filter: brightness(.45) blur(4px) drop-shadow(0 0 0 transparent); } }
@keyframes pupil-takeover { from { transform: translate(-50%,-50%) scale(1); } 62% { opacity: 1; } to { transform: translate(-50%,-50%) scale(22); opacity: 1; } }

.transition-warp { z-index: 3; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0; clip-path: circle(0 at 50% 50%); }
.transition-warp.is-visible { opacity: 1; animation: warp-from-pupil var(--bb-warp-crossfade,180ms) cubic-bezier(.2,.7,.2,1) both; }
.transition-warp.is-ending { clip-path: circle(150% at 50% 50%); animation: warp-end-fade var(--bb-warp-end-fade,220ms) ease-out both; }
@keyframes warp-from-pupil { from { opacity: 0; clip-path: circle(0 at 50% 50%); filter: brightness(.32) blur(3px); } to { opacity: 1; clip-path: circle(150% at 50% 50%); filter: brightness(1) blur(0); } }
@keyframes warp-end-fade { from { opacity: 1; } to { opacity: 0; } }

.route-loader { position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; overflow: hidden; visibility: hidden; opacity: 0; background: radial-gradient(ellipse at 50% 46%,#081321 0%,#030609 58%,#020407 100%); transition: opacity 220ms ease; pointer-events: none; }
.route-loader::after { content: ""; position: absolute; inset: 0; opacity: .16; background: linear-gradient(transparent 0 48%,#8bcfff40 49%,transparent 50%); transform: translateY(-100%); animation: loader-scan 5.2s linear infinite; }
.route-loader img { display: block; width: clamp(88px,18vw,148px); height: auto; filter: drop-shadow(0 0 18px #338fca55); animation: loader-eye-calm 8s ease-in-out infinite; }
.route-loader.is-visible { visibility: visible; opacity: 1; }
.route-loader.is-leaving { opacity: 0; }
.debug-panel.is-hidden { opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
@keyframes loader-eye-calm { 0% { transform: rotate(0) scale(1); } 25% { transform: rotate(90deg) scale(1.015); } 50% { transform: rotate(180deg) scale(1); } 75% { transform: rotate(270deg) scale(.99); } 100% { transform: rotate(360deg) scale(1); } }
@keyframes loader-scan { to { transform: translateY(100%); } }

html.bb-route-pending { min-height: 100%; background: #030609; }
html.bb-route-pending body > :not(.route-loader) { opacity: 0; transition: opacity 360ms ease; }
html.bb-route-pending body > .route-loader { visibility: visible; opacity: 1; }
html.bb-route-pending.bb-route-revealing body > :not(.route-loader) { opacity: 1; }
html.bb-route-pending.bb-route-revealing body > .route-loader { opacity: 0; }
html.bb-route-pending::before, html.bb-route-pending::after { content: ""; position: fixed; z-index: 2147483647; inset: 0; pointer-events: none; opacity: 1; transition: opacity 360ms ease; }
html.bb-route-pending::before { background: linear-gradient(180deg,transparent 0 49.7%,#8bcfff20 50%,transparent 50.3%),radial-gradient(ellipse at 50% 46%,#081321 0%,#030609 58%,#020407 100%); background-size: 100% 180px,100% 100%; animation: loader-scan 5.2s linear infinite; }
html.bb-route-pending::after { inset: 0; margin: auto; width: clamp(88px,18vw,148px); height: clamp(88px,18vw,148px); background: url("./assets/favicon/favicon.svg") center / contain no-repeat; filter: drop-shadow(0 0 18px #338fca55); animation: loader-eye-calm 8s ease-in-out infinite; }
html.bb-route-pending.bb-route-revealing::before, html.bb-route-pending.bb-route-revealing::after { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #scene[data-state="ACTION_CONFIRM"] .controls,
  #scene[data-state="ACTION_CONFIRM"] .signature,
  #scene[data-state="ACTION_CONFIRM"] .connection,
  #scene[data-state="ACTION_CONFIRM"] .doorway { animation-duration: 420ms; }
  #scene[data-state="LOGO_TAKEOVER"] .transition-eye img { animation: none; opacity: 1; filter: brightness(.92) drop-shadow(0 0 20px #3d9df266); transform: scale(.9); }
  .transition-crt-break { display: none; }
  .route-loader::after { animation: none; }
  .route-loader img { animation: none; }
  html.bb-route-pending::before, html.bb-route-pending::after { animation: none; }
  #scene[data-state="LOGO_ROTATE"] .transition-eye img,
  #scene[data-state="PUPIL_WARP"] .transition-eye img,
  #scene[data-state="PUPIL_WARP"] .transition-eye__pupil { animation: none; }
  .transition-warp { display: none; }
}