/* Orange side panel on /signup and /login: small logo on top, the terminal as the hero, words pop in.
   Transforms/opacity only; the static SVG terminal paints first, the live 3D scene (js/panel3d.js) fades in over it. */
.su-side { background: var(--orange); padding: 28px clamp(20px, 3.6vw, 52px) 32px; display: flex; flex-direction: column; gap: 18px; position: relative; overflow: hidden; min-width: 0; }
.su-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.su-side .back { font: 700 16px/1 var(--font-h); text-decoration: none; color: var(--black); display: inline-flex; gap: 6px; align-items: center; }
.su-side .back svg { width: 18px; height: 18px; }
.su-logo { width: 84px; height: auto; filter: drop-shadow(0 5px 0 rgba(14,11,15,.16)); }
.su-stage { position: relative; width: 100%; height: clamp(200px, 40vh, 430px); flex: none; }
.su-term { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: contain; transition: opacity .6s ease; }
.su-3d { position: absolute; inset: -4% -8%; width: 116%; height: 108%; opacity: 0; transition: opacity .6s ease; pointer-events: none; }
.su-stage.on .su-3d { opacity: 1; }
.su-stage.on .su-term { opacity: 0; }
.su-title { font-size: clamp(38px, 4vw, 60px); margin: 0; }
.su-title .w { display: inline-block; }
.su-ticks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; font-weight: 800; }
.su-ticks li { display: flex; gap: 10px; align-items: center; }
.su-ticks li svg { width: 24px; height: 24px; color: var(--black); flex: none; }
.su-side .bir { margin-top: auto; margin-bottom: 0; font-size: 14px; font-weight: 700; color: #4A2A10; }

/* entrance: pure CSS so it never waits for JS; site.css turns animations off for reduced motion (end state shows) */
@keyframes su-pop { from { opacity: 0; transform: translateY(.55em) rotate(var(--r, 0deg)) scale(.82); } to { opacity: 1; transform: none; } }
@keyframes su-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes su-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes su-float { 0%, 100% { transform: none; } 50% { transform: translateY(-6px) rotate(-.6deg); } }
.su-title .w { animation: su-pop .75s cubic-bezier(.34, 1.56, .64, 1) both; animation-delay: calc(120ms + var(--i, 0) * 75ms); }
.su-title .w:nth-child(odd) { --r: -6deg; }
.su-title .w:nth-child(even) { --r: 5deg; }
.su-ticks li { animation: su-rise .55s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(480ms + var(--i, 0) * 90ms); }
.su-top .back, .su-side .bir { animation: su-fade .5s ease both; animation-delay: 300ms; }
.su-term { animation: su-float 5s ease-in-out 1.2s infinite; }

@media (max-width: 860px) {
  .su-side { display: grid; grid-template-columns: 124px minmax(0, 1fr); grid-template-areas: "top top" "stage title" "ticks ticks" "bir bir"; align-items: center; column-gap: 14px; row-gap: 12px; padding: 16px 16px 22px; }
  .su-top { grid-area: top; }
  .su-logo { width: 54px; }
  .su-stage { grid-area: stage; height: 100px; }
  .su-3d { display: none; }
  .su-title { grid-area: title; font-size: clamp(28px, 7.6vw, 40px); }
  .su-ticks { grid-area: ticks; gap: 6px; font-size: 15px; line-height: 1.3; }
  .su-ticks li svg { width: 20px; height: 20px; }
  .su-side .bir { grid-area: bir; margin-top: 0; font-size: 12.5px; }
}