/* ShutUp "S" QR: the redrawn code is a <canvas> that replaces the plain picture (see js/sqr.js). */
.sqr-on { background: none !important; box-shadow: none !important; border-radius: 0 !important; width: auto !important; height: auto !important; padding: 0 !important; display: block !important; }
.sqr-canvas { display: block; width: auto; height: auto; max-width: min(100%, 300px); max-height: 74vh; margin: 0 auto; }
.welcome-qr-wrap .sqr-canvas { max-width: min(100%, 300px); max-height: 74vh; }
@media (max-width: 480px) { .welcome-qr-wrap .sqr-canvas { max-width: 100%; } }

/* the code breaking into glowing particles when a scan succeeds */
.sqr-burst { position: fixed; inset: 0; z-index: 99990; pointer-events: none; }
.sqr-burst i { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #5fe0ff; box-shadow: 0 0 10px 3px rgba(80, 200, 255, 0.9); animation: sqr-fly 0.9s ease-out forwards; }
.sqr-burst i:nth-child(3n) { background: #b57bff; box-shadow: 0 0 10px 3px rgba(180, 120, 255, 0.9); }
@keyframes sqr-fly { from { opacity: 1; transform: translate(0, 0) scale(1); } to { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); } }

/* ── Identity reveal: a glass window with a holographic scanner ───────────── */
.idr { position: fixed; inset: 0; z-index: 99999; display: grid; place-items: center; color: #eaf4ff; cursor: pointer; perspective: 1400px;
  background: radial-gradient(90% 80% at 50% 45%, #0b1b4a 0%, #050818 58%, #02030c 100%); animation: idr-in 0.35s ease-out both; }
.idr.idr-out { animation: idr-out 0.45s ease-in forwards; }
@keyframes idr-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes idr-out { to { opacity: 0; } }
.idr-skip { position: absolute; top: 16px; right: 16px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(140, 190, 255, 0.4); background: rgba(10, 20, 60, 0.6); color: #cfe6ff; font: 600 13px/1 Inter, system-ui, sans-serif; cursor: pointer; z-index: 2; }

.idr-win { position: relative; width: min(92vw, 520px); padding: 0 0 22px; border-radius: 22px; text-align: center;
  background: linear-gradient(160deg, rgba(14, 28, 80, 0.88), rgba(5, 8, 28, 0.94)); backdrop-filter: blur(6px);
  border: 1px solid rgba(110, 190, 255, 0.55); box-shadow: 0 0 0 1px rgba(150, 100, 255, 0.35), 0 0 40px rgba(60, 140, 255, 0.45), 0 40px 90px -30px rgba(0, 0, 0, 0.9), inset 0 0 40px rgba(60, 120, 255, 0.12);
  transform-style: preserve-3d; animation: idr-win-in 0.9s cubic-bezier(.2, .8, .2, 1) both, idr-float 6s 0.9s ease-in-out infinite; }
@keyframes idr-win-in { from { opacity: 0; transform: rotateY(-24deg) rotateX(8deg) scale(0.86) translateZ(-120px); } to { opacity: 1; transform: rotateY(-4deg) rotateX(2deg) scale(1) translateZ(0); } }
@keyframes idr-float { 0%, 100% { transform: rotateY(-4deg) rotateX(2deg) translateY(0); } 50% { transform: rotateY(-2deg) rotateX(1deg) translateY(-6px); } }
.idr-bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; text-align: left; }
.idr-logo { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #36e4ff, #8a5cff); color: #fff; font: 800 15px/1 Inter, system-ui, sans-serif; }
.idr-bar b { font: 700 16px/1 Inter, system-ui, sans-serif; background: linear-gradient(90deg, #7fe8ff, #b57bff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.idr-ctl { margin-left: auto; display: flex; gap: 10px; } .idr-ctl u { width: 11px; height: 11px; border: 1.5px solid rgba(200, 220, 255, 0.55); border-radius: 2px; }
.idr-ctl u:first-child { border-width: 0 0 1.5px; border-radius: 0; height: 8px; }

.idr-stage { position: relative; width: min(78vw, 400px, 52vh); aspect-ratio: 1; margin: 0 auto; }
.idr-hud { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.idr-circuit path, .idr-circuit circle { fill: none; stroke: rgba(90, 160, 255, 0.55); stroke-width: 1; opacity: 0; animation: idr-fade 0.6s 0.9s ease-out forwards; }
.idr-circuit circle { fill: rgba(90, 200, 255, 0.9); }
.idr-hex { fill: none; stroke: #4aa8ff; stroke-width: 2.2; stroke-dasharray: 1500; stroke-dashoffset: 1500; filter: drop-shadow(0 0 6px #3b8cff); animation: idr-draw 0.9s 0.35s ease-out forwards; }
.idr-hex2 { fill: none; stroke: #8a5cff; stroke-width: 1; opacity: 0; stroke-dasharray: 5 8; animation: idr-fade 0.6s 0.9s ease-out forwards; }
@keyframes idr-draw { to { stroke-dashoffset: 0; } }
@keyframes idr-fade { to { opacity: 0.8; } }
.idr-ticks { opacity: 0; transform-origin: 200px 200px; animation: idr-fade 0.5s 0.8s ease-out forwards, idr-spin 40s 0.8s linear infinite reverse; }
.idr-ticks line { stroke: #2f8cff; stroke-width: 2; stroke-linecap: round; }
.idr-ticks-hot { transform-origin: 200px 200px; opacity: 0; animation: idr-fade 0.5s 0.9s ease-out forwards, idr-spin 6s 0.9s linear infinite; }
.idr-ticks-hot path { fill: none; stroke: #6df0ff; stroke-width: 12; stroke-dasharray: 2 5; filter: drop-shadow(0 0 6px #35e0ff); }
.idr-ring { fill: none; transform-origin: 200px 200px; opacity: 0; }
.idr-ring.r2 { stroke: #2f8cff; stroke-width: 4; stroke-dasharray: 3 5; animation: idr-fade 0.5s 1s ease-out forwards, idr-spin 14s 1s linear infinite reverse; }
.idr-ring.r3 { stroke: #8a5cff; stroke-width: 2; stroke-dasharray: 60 18 6 18; animation: idr-fade 0.5s 1.05s ease-out forwards, idr-spin 20s 1.05s linear infinite; }
.idr-core { fill: none; stroke: #35e0ff; stroke-width: 5; filter: drop-shadow(0 0 12px #35e0ff) drop-shadow(0 0 26px rgba(53, 224, 255, 0.6)); opacity: 0; animation: idr-fade 0.5s 0.95s ease-out forwards; }
@keyframes idr-spin { to { transform: rotate(360deg); } }

.idr-photo { position: absolute; left: 50%; top: 50%; width: 56%; height: 56%; transform: translate(-50%, -50%) scale(0.8); border-radius: 50%; overflow: hidden; display: grid; place-items: center; z-index: 2;
  background: linear-gradient(135deg, #2f6bff, #15aabf); font: 700 clamp(28px, 9vw, 54px)/1 Inter, system-ui, sans-serif; color: #fff;
  box-shadow: 0 0 0 3px rgba(53, 224, 255, 0.9), 0 0 30px 6px rgba(53, 224, 255, 0.45); opacity: 0; animation: idr-photo 0.7s 1.3s cubic-bezier(.2, .8, .2, 1) forwards; }
.idr-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.idr-mesh { position: absolute; inset: -22%; width: 144%; height: 144%; opacity: 0.55; mix-blend-mode: screen; }
.idr-mesh line { stroke: rgba(120, 220, 255, 0.55); stroke-width: 0.6; } .idr-mesh circle { fill: #9ff0ff; }
@keyframes idr-photo { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.idr-scan { position: absolute; left: 22%; width: 56%; height: 3px; top: 22%; z-index: 3; border-radius: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, #7fe8ff, transparent); box-shadow: 0 0 14px 3px rgba(80, 220, 255, 0.9); animation: idr-sweep 1.4s 1.2s ease-in-out both; }
@keyframes idr-sweep { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(min(78vw, 400px, 52vh) * 0.56)); } }

.idr-particles span { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #7fe8ff; box-shadow: 0 0 8px 2px rgba(80, 200, 255, 0.8); opacity: 0; animation: idr-spark 2.2s ease-in-out infinite; }
@keyframes idr-spark { 0%, 100% { opacity: 0; transform: translateY(8px); } 50% { opacity: 0.9; transform: translateY(-10px); } }

.idr-name { margin-top: 6px; font: 700 clamp(22px, 5vw, 30px)/1.2 Inter, system-ui, sans-serif; opacity: 0; transform: translateY(8px); animation: idr-text 0.45s 1.8s ease-out forwards; text-shadow: 0 0 18px rgba(70, 150, 255, 0.7); }
.idr-status { margin-top: 8px; font: 600 12.5px/1 Inter, system-ui, sans-serif; letter-spacing: 0.22em; text-transform: uppercase; color: #6fe8ff; display: inline-flex; gap: 8px; align-items: center; opacity: 0; animation: idr-text 0.45s 2s ease-out forwards; }
.idr-status b { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid #35e0ff; font-size: 12px; box-shadow: 0 0 10px rgba(53, 224, 255, 0.6); }
@keyframes idr-text { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .idr-win { animation: none; transform: none; }
  .idr, .idr * { animation-duration: 0.01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}

/* real-time 3D layer over the stationary code (js/s3d.js): never takes clicks, never moves the code */
.sqr-3d { pointer-events: none; z-index: 1; }

/* real 3D scanner (js/hex3d.js): when it runs it replaces the SVG HUD and the CSS sparks */
.idr-3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }
.idr-3d-on .idr-hud, .idr-3d-on .idr-particles { display: none; }

/* On short windows the welcome card must scroll from its top (centring used to push the top of the code out of reach). */
#auth-screen.welcome { justify-content: flex-start; overflow-y: auto; }
#auth-screen.welcome .auth-shell { margin-block: auto; }

.sqr-canvas { animation: sqr-float 5s ease-in-out infinite; }
@keyframes sqr-float { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 0 6px rgba(70, 140, 255, 0.35)); } 50% { transform: translateY(-5px); filter: drop-shadow(0 0 14px rgba(150, 100, 255, 0.55)); } }
@media (prefers-reduced-motion: reduce) { .sqr-canvas { animation: none; } }

/* The app hides inactive tab panels with .hidden; the code wrapper must never override that (it did on the QR "Scan" tab). */
.sqr-on.hidden, .sqr-on[hidden] { display: none !important; }