/* Product hero application windows: a real desktop application drawn in the DOM, laid out like the app itself
   (one partial and one stylesheet per application under Pages/Shared/Sections/HeroApps and app-window-*.css).
   This file holds what every window shares: the frame, the typing caret and the keyframes. Self-contained on
   purpose: no Tailwind, no site tokens, everything scoped under .tec-appwin. The window fills the box its caller
   gives it.

   Animation (CSS only, runs once): the data is typed, the symbol is drawn one module at a time. The base styles are
   the finished state, so reduced motion simply switches the animations off. */

.tec-appwin {
  --aw-start: 1s;                /* when typing starts, after the hero has faded in */
  --aw-rate: 110ms;              /* per typed character */

  container-type: inline-size;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  font: 400 12px/1.3 system-ui, sans-serif;
  text-align: left;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .16), 0 40px 90px -30px rgba(40, 0, 30, .65);
  -webkit-font-smoothing: antialiased;
}
.tec-appwin *, .tec-appwin *::before, .tec-appwin *::after { box-sizing: border-box; }
.tec-appwin :where(ul, dl, dd, p) { margin: 0; padding: 0; list-style: none; }
.tec-appwin u { text-decoration: underline; text-underline-offset: 2px; }

/* ---- browser bar (HeroApps/_BrowserBar) around web windows ---- */
.tec-appwin__browser { position: relative; flex: none; height: 36px; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #dfe3ea; background: #f6f6f8; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.tec-appwin__browser-lights { position: absolute; left: 13px; top: 50%; display: flex; gap: 7px; transform: translateY(-50%); }
.tec-appwin__browser-lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.tec-appwin__browser-lights i:nth-child(2) { background: #febc2e; }
.tec-appwin__browser-lights i:nth-child(3) { background: #28c840; }
.tec-appwin__browser-url { display: inline-flex; align-items: center; gap: 6px; width: min(56%, 360px); justify-content: center; padding: 5px 12px; border-radius: 999px; background: #e9e9ed; font-size: 11.5px; color: #4b5060; white-space: nowrap; overflow: hidden; }
.tec-appwin__browser-url svg { width: 11px; height: 11px; flex: none; }
.tec-appwin__browser-url-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 520px) {
  .tec-appwin__browser-url { width: auto; max-width: calc(100% - 140px); padding: 4px 10px; font-size: 10px; }
  .tec-appwin__browser-url svg { display: none; }
}

/* ---- typing: each character of the data appears in turn, after a blinking caret ---- */
/* Zero duration: hidden until its delay, then visible. (A short step-end animation can stop at 0.99999 progress and
   leave the character hidden.) */
.tec-appwin__typed span { animation: tec-appwin-key 0s calc(var(--aw-start) + var(--i) * var(--aw-rate)) both; }
.tec-appwin__input::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1.15em;
  margin-left: 1px;
  vertical-align: text-bottom;
  background: currentColor;
  animation: tec-appwin-caret .9s step-end calc(var(--aw-start) - .4s) 4 both;
}

@keyframes tec-appwin-key { from { visibility: hidden; } to { visibility: visible; } }
@keyframes tec-appwin-caret { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes tec-appwin-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes tec-appwin-show { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .tec-appwin *, .tec-appwin *::after { animation: none !important; }
}