/* Home scene "encryption" (tools/templates/pages/home/encryption.mjs, assets/scenes/encryption.js). Scoped to
   .sc-encryption; the engine and the shared type (.h-xl, .dim, .scene, .scene-pin, .lead, .traffic) are in
   site.css.

   The window is two copies of one face stacked: the readable one (.enc-plain) and the sealed one (.enc-sealed),
   clipped on either side of a line at the angle of the mark's seam (1 : 3). --s moves the line across the
   window (0 = it touches the top left corner, 1 = it leaves at the bottom right): a gentle start, then an even
   pace while it seals the data (s 0…0.82), and it leaves faster over the labels, which do not change. --k is how far
   the line leans over half the window's height (height / 6), so the clip and the light meet exactly. */

.sc-encryption { --enc-ink: #ECEEF2; --enc-sealed: 132, 156, 214; }
.sc-encryption .enc { position: relative; }
.sc-encryption .enc-head { text-align: center; }
.sc-encryption .enc-head .lead { max-width: 640px; margin-inline: auto; text-wrap: balance; }
.sc-encryption .enc-key { color: var(--text-primary); }

/* MARK: The window */

.sc-encryption .enc-card {
  --h: 352px;
  --k: calc(var(--h) / 6);
  --tt: var(--t, 0.6);
  --q: min(var(--tt), 0.2);
  --s: calc((var(--q) * var(--q) / 0.4 + clamp(0, var(--tt) - 0.2, 0.68)) / 0.78 * 0.82 + max(0, var(--tt) - 0.88) * 1.5);
  --x: calc(var(--s) * (100% + 2 * var(--k)) - var(--k));
  position: relative; width: min(620px, 100%); height: var(--h); flex: none;
  border-radius: 14px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), 0 36px 80px -16px rgba(0, 0, 0, 0.7), 0 12px 28px rgba(0, 0, 0, 0.3);
  text-align: left;
}
.sc-encryption .enc-face {
  position: absolute; inset: 0; overflow: hidden; border-radius: inherit;
  background: linear-gradient(180deg, #181A20, #121419 62%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.07);
}
.sc-encryption .enc-plain { clip-path: polygon(calc(var(--x) + var(--k)) 0, 100% 0, 100% 100%, calc(var(--x) - var(--k)) 100%); }
.sc-encryption .enc-sealed { clip-path: polygon(0 0, calc(var(--x) + var(--k)) 0, calc(var(--x) - var(--k)) 100%, 0 100%); }

.sc-encryption .enc-bar { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.07); background: rgba(255, 255, 255, 0.018); }
.sc-encryption .enc-bar .traffic { margin-right: 12px; }
.sc-encryption .enc-bar .avatar { border-radius: 7px !important; font-weight: 600; }
.sc-encryption .enc-name { font: 600 15px/20px var(--font); color: var(--enc-ink); letter-spacing: -0.01em; }
.sc-encryption .enc-meta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font: 400 13px/18px var(--font); color: var(--text-tertiary); white-space: nowrap; }
.sc-encryption .enc-rows { list-style: none; padding: 0; margin: 0; }
.sc-encryption .enc-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: 14px; height: 60px; padding: 0 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.055); }
.sc-encryption .enc-row:last-child { border-bottom: 0; }
.sc-encryption .enc-tile { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.075); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); font: 600 15px/1 var(--font); color: #DADDE4; }
.sc-encryption .enc-txt { display: grid; gap: 2px; min-width: 0; }
.sc-encryption .enc-t, .sc-encryption .enc-s { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-encryption .enc-t { font: 500 15px/20px var(--font); color: var(--enc-ink); letter-spacing: -0.005em; }
.sc-encryption .enc-s { font: 400 13px/18px var(--font); color: var(--text-secondary); }
.sc-encryption .enc-dots { margin-left: 10px; letter-spacing: 0.06em; color: var(--text-tertiary); }
.sc-encryption .enc-kind { font: 400 13px/18px var(--font); color: var(--text-tertiary); white-space: nowrap; padding-left: 12px; }

/* The sealed copy: the same rows, every field ciphertext (base64, like AES-GCM output written out); the tiles
   are empty. No letter-spacing, so the script can take the lines over glyph for glyph. */
.sc-encryption .ct { text-overflow: clip; -webkit-mask-image: linear-gradient(90deg, #000 78%, transparent); mask-image: linear-gradient(90deg, #000 78%, transparent); }
.sc-encryption .enc-t.ct { font: 400 14px/20px var(--font-mono); color: rgba(var(--enc-sealed), 0.78); }
.sc-encryption .enc-s.ct { font: 400 12px/18px var(--font-mono); color: rgba(var(--enc-sealed), 0.46); }
.sc-encryption .enc-sealed .enc-tile { background: rgba(111, 143, 234, 0.035); box-shadow: inset 0 0 0 1px rgba(143, 178, 255, 0.16); }

/* The light: a hairline core with a soft glow, leaning like the seam, clipped to the window; where it crosses
   the window's top and bottom edges the edge catches it. A sheen trails it over the sealed side. */
.sc-encryption .enc-light { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; --on: clamp(0, min(var(--s), 1 - var(--s)) * 14, 1); opacity: var(--on); }
.sc-encryption .enc-beam {
  position: absolute; top: -4%; bottom: -4%; left: var(--x); width: 2px; margin-left: -1px;
  transform: rotate(18.435deg);
  background: linear-gradient(180deg, rgba(178, 198, 255, 0.7), rgba(226, 234, 255, 0.95) 35%, #FFFFFF 50%, rgba(226, 234, 255, 0.95) 65%, rgba(178, 198, 255, 0.7));
}
.sc-encryption .enc-beam::before { content: ""; position: absolute; inset: 0 -40px; background: linear-gradient(90deg, transparent, rgba(111, 143, 234, 0.16) 35%, rgba(143, 178, 255, 0.34) 50%, rgba(111, 143, 234, 0.16) 65%, transparent); }
.sc-encryption .enc-beam::after { content: ""; position: absolute; top: 18%; bottom: 18%; left: -4px; right: -4px; border-radius: 4px; background: radial-gradient(closest-side, rgba(226, 234, 255, 0.5), transparent); }
.sc-encryption .enc-glint { position: absolute; width: 150px; height: 1px; margin-left: -75px; background: linear-gradient(90deg, transparent, rgba(226, 234, 255, 0.95), transparent); }
.sc-encryption .enc-glint-t { top: 0; left: calc(var(--x) + var(--k)); }
.sc-encryption .enc-glint-b { bottom: 0; left: calc(var(--x) - var(--k)); }
.sc-encryption .enc-sheen {
  position: absolute; top: -20%; height: 140%; width: 200px; left: calc(var(--x) - 200px); pointer-events: none;
  transform-origin: 100% 50%; transform: rotate(18.435deg);
  background: linear-gradient(90deg, transparent, rgba(111, 143, 234, 0.05) 55%, rgba(143, 178, 255, 0.2));
  opacity: clamp(0, min(var(--s), 1 - var(--s)) * 14, 1);
}

/* MARK: The end: the two names, set large */

.sc-encryption .enc-foot { text-align: center; }
.sc-encryption .enc-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); justify-content: center; margin: 0; }
.sc-encryption .enc-specs > div { padding: 0 40px; }
.sc-encryption .enc-specs > div + div { box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.1); }
.sc-encryption .enc-specs dt { font: 600 40px/44px var(--font-display); letter-spacing: -0.03em; color: #F5F6F8; white-space: nowrap; }
.sc-encryption .enc-specs dd { margin: 10px 0 0; font: 400 16px/23px var(--font); color: var(--text-secondary); text-wrap: balance; }

.sc-encryption .enc-cv { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* MARK: Without scenes: one still - the key line, the window half sealed with the lock beside it, the names
   (the lead is in the window already; it stays for screen readers) */

html:not(.js-scenes) .sc-encryption .enc-lead { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html:not(.js-scenes) .sc-encryption .enc-say { margin-top: 22px; }
html:not(.js-scenes) .sc-encryption .enc-key { margin-top: 0; }
html:not(.js-scenes) .sc-encryption .enc-stage { position: relative; display: grid; grid-template-columns: minmax(0, 620px) 360px; justify-content: center; align-items: center; column-gap: 72px; margin-top: 72px; }
html:not(.js-scenes) .sc-encryption .enc-lockbox { width: 360px; height: 380px; }
html:not(.js-scenes) .sc-encryption .enc-foot { margin-top: 72px; }
/* Without JavaScript the lock is a picture of the same drawing (assets/scenes/encryption/lock.png, made from the
   still at 2x with a 24 px margin; it is only fetched when JavaScript is off). */
html.no-js .sc-encryption .enc-lockbox { position: relative; }
html.no-js .sc-encryption .enc-lockbox::before { content: ""; position: absolute; inset: -24px; background: url(encryption/lock.png) center / contain no-repeat; }

/* MARK: Playing: the stage pins; the window, then the lock, then the names in the same place */

.js-scenes .sc-encryption .enc { display: grid; grid-template-columns: minmax(0, 1fr); padding-top: var(--header-h); }
.js-scenes .sc-encryption .enc-stage { --f: var(--t, 0); position: relative; grid-row: 2; grid-column: 1; height: clamp(420px, calc(100vh - 380px), 600px); margin-top: 34px; }
.js-scenes .sc-encryption .enc-say { display: grid; margin-top: 22px; }
.js-scenes .sc-encryption .enc-say > .lead { grid-area: 1 / 1; margin-top: 0; }
.js-scenes .sc-encryption .enc-lead { opacity: calc(1 - clamp(0, var(--t, 0) * 2.2, 1)); transform: translateY(calc(clamp(0, var(--t, 0) * 2.2, 1) * -8px)); }
.js-scenes .sc-encryption .enc-key { opacity: clamp(0, var(--t, 0) * 2.2 - 1.2, 1); transform: translateY(calc((1 - clamp(0, var(--t, 0) * 2.2 - 1.2, 1)) * 10px)); }
.js-scenes .sc-encryption .enc-card { position: absolute; left: 50%; top: 18px; transform: translateX(-50%); opacity: calc(1 - clamp(0, var(--f) / 0.12, 1)); }
.js-scenes .sc-encryption .enc-sealed .ct { opacity: calc(1 - clamp(0, var(--f) * 2000, 1)); }
.js-scenes .sc-encryption .enc-lockbox { display: none; }
.js-scenes .sc-encryption .enc-cv { left: 50%; width: min(720px, 100%); transform: translateX(-50%); }
.js-scenes .sc-encryption .enc-foot { grid-row: 2; grid-column: 1; align-self: end; position: relative; z-index: 1; opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 24px)); }

/* MARK: Tablets */

@media (max-width: 1099px) {
  html:not(.js-scenes) .sc-encryption .enc-stage { grid-template-columns: minmax(0, 560px) 320px; column-gap: 48px; }
  html:not(.js-scenes) .sc-encryption .enc-lockbox { width: 320px; height: 340px; }
}
@media (max-width: 899px) {
  .sc-encryption .enc-specs > div { padding: 0 26px; }
  html:not(.js-scenes) .sc-encryption .enc-stage { grid-template-columns: minmax(0, 620px); row-gap: 48px; }
  html:not(.js-scenes) .sc-encryption .enc-lockbox { justify-self: center; }
}

/* MARK: Phones: a portrait composition - the window full width, then the lock, the names under it */

@media (max-width: 599px) {
  .sc-encryption .enc-card { --h: 328px; width: 100%; border-radius: 13px; }
  .sc-encryption .enc-bar { height: 48px; padding: 0 14px; gap: 8px; }
  .sc-encryption .enc-bar .traffic { gap: 6px; margin-right: 8px; }
  .sc-encryption .enc-bar .traffic i { width: 10px; height: 10px; }
  .sc-encryption .enc-name { font-size: 15px; }
  .sc-encryption .enc-meta { font-size: 13px; gap: 6px; }
  .sc-encryption .enc-row { grid-template-columns: 30px minmax(0, 1fr) auto; column-gap: 12px; height: 56px; padding: 0 14px; }
  .sc-encryption .enc-tile { width: 30px; height: 30px; border-radius: 8px; }
  .sc-encryption .enc-t { font-size: 15px; }
  .sc-encryption .enc-s { font-size: 13px; }
  .sc-encryption .enc-kind { font-size: 13px; padding-left: 8px; }
  .sc-encryption .enc-dots { margin-left: 6px; letter-spacing: 0.02em; }
  .sc-encryption .enc-dots-3 { display: none; }
  .sc-encryption .enc-specs { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
  .sc-encryption .enc-specs > div { padding: 0; }
  .sc-encryption .enc-specs > div + div { box-shadow: none; }
  .sc-encryption .enc-specs dt { font-size: 28px; line-height: 32px; letter-spacing: -0.025em; }
  .sc-encryption .enc-specs dd { margin-top: 4px; font-size: 15px; line-height: 21px; max-width: 310px; margin-inline: auto; }
  html:not(.js-scenes) .sc-encryption .enc-stage { margin-top: 40px; row-gap: 36px; }
  html:not(.js-scenes) .sc-encryption .enc-lockbox { width: 300px; height: 320px; }
  html:not(.js-scenes) .sc-encryption .enc-foot { margin-top: 40px; }
  .js-scenes .sc-encryption .enc-stage { height: clamp(420px, calc(100svh - 330px), 560px); margin-top: 22px; }
  .js-scenes .sc-encryption .enc-say { margin-top: 14px; }
  .js-scenes .sc-encryption .enc-card { left: 0; top: 50%; margin: -164px 0 0; transform: none; }
  .js-scenes .sc-encryption .enc-cv { left: 0; width: 100%; transform: none; }
}
/* Narrow phones: the locale without the time zone, and a shorter password, so nothing in the window is cut */
@media (max-width: 389px) {
  .sc-encryption .enc-meta-tz, .sc-encryption .enc-dots-2 { display: none; }
}