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

   Without the scenes the section is its last picture: the headline, the window with Safari's error (the site gone,
   only the faint light a dim screen gives), the two captions. With them, every part reads its --t (0 before its
   range, 1 after it), and proxy.js moves the camera and the line over the window. */

.sc-proxy { --px-w: 960px; --px-h: 400px; --glow-on: 0.3; --glow-off: 0.05; --px-stop: 0.62; overflow-x: clip; }
.sc-proxy .px { display: flex; flex-direction: column; align-items: center; }
.sc-proxy .px-top { display: grid; justify-items: center; align-items: center; text-align: center; width: 100%; }
.sc-proxy .px-top > * { grid-area: 1 / 1; }
.sc-proxy .px-head { max-width: 900px; }
/* The line over the window before the headline: the proxy at work, then the moment it stops */
.sc-proxy .px-status { display: none; margin: 0; max-width: 820px; font: 400 26px/34px var(--font-display); letter-spacing: -0.016em; color: var(--text-tertiary); text-wrap: balance; }
.sc-proxy .px-status strong { font-weight: 600; color: var(--text-primary); }
.sc-proxy .px-nb { white-space: nowrap; }
.sc-proxy .px-stage { position: relative; width: 100%; max-width: var(--px-w); margin-top: 44px; }
.sc-proxy .px-cam { position: relative; transform-origin: 0 0; }

/* The light of the window in a dark room: one smooth, pre-rendered falloff stretched round the window (no blur is
   ever recomputed while the camera moves). Lit, it is the white page's light; out, only a dim screen's. */
.sc-proxy .px-light {
  position: absolute; inset: -220px -280px -340px; pointer-events: none; opacity: var(--glow-off);
  background: url("proxy/glow.png") 0 0 / 100% 100% no-repeat;
}

/* MARK: The Safari window - macOS 26, dark appearance */
.sc-proxy .pxw {
  position: relative; z-index: 1; height: var(--px-h); display: flex; flex-direction: column; overflow: hidden;
  border-radius: 18px; background: #1E1E20; color: #E6E6E9; font-family: var(--font); text-align: left;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.13);
}
.sc-proxy .pxw::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); }
.sc-proxy .pxw-bar {
  position: relative; z-index: 2; flex: none; height: 52px; display: flex; align-items: center; gap: 10px; padding: 0 12px 0 20px;
  background: #29292C; border-bottom: 1px solid rgba(0, 0, 0, 0.6); color: #C9C9CE;
}
.sc-proxy .pxw-lights { display: flex; gap: 8px; margin-right: 18px; flex: none; }
.sc-proxy .pxw-lights i { width: 12px; height: 12px; border-radius: 50%; display: block; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.25); }
.sc-proxy .pxw-lights i:nth-child(1) { background: #FF5F57; }
.sc-proxy .pxw-lights i:nth-child(2) { background: #FEBC2E; }
.sc-proxy .pxw-lights i:nth-child(3) { background: #28C840; }
.sc-proxy .pxw-cap, .sc-proxy .pxw-addr { height: 32px; border-radius: 16px; background: rgba(255, 255, 255, 0.075); box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.14), 0 0 0 0.5px rgba(0, 0, 0, 0.4); }
.sc-proxy .pxw-cap { flex: none; display: inline-flex; align-items: center; gap: 10px; padding: 0 11px; }
.sc-proxy .pxw-cap svg { display: block; flex: none; }
.sc-proxy .pxw-side { gap: 3px; }
.sc-proxy .pxw-hist { gap: 12px; }
.sc-proxy .pxw-hist svg:last-child { opacity: 0.4; }
.sc-proxy .pxw-prof { gap: 7px; padding: 0 13px 0 9px; font: 500 13px/1 var(--font); color: #E9E9EC; }
.sc-proxy .pxw-prof .flag { flex: none; }
.sc-proxy .pxw-addr { position: relative; flex: 1 1 auto; min-width: 0; max-width: 470px; margin: 0 auto; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 0 38px; }
.sc-proxy .pxw-pg { position: absolute; left: 11px; top: 8px; color: #9C9CA2; display: block; }
.sc-proxy .pxw-pg svg { display: block; }
.sc-proxy .pxw-url { font: 500 13px/1 var(--font); color: #EDEDF0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -0.003em; }
/* Reload at the field's end; while the page loads it is Stop */
.sc-proxy .pxw-rl { position: absolute; right: 11px; top: 8px; width: 16px; height: 16px; color: #9C9CA2; --rl: var(--t, 0); }
.sc-proxy .pxw-rl-in, .sc-proxy .pxw-rl svg { position: absolute; inset: 0; display: block; }
.sc-proxy .pxw-rl svg:last-child { opacity: 0; }
/* Safari's progress bar along the bottom of the address field */
.sc-proxy .pxw-load { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; opacity: 0; }
.sc-proxy .pxw-load i { display: block; height: 100%; width: 0; background: #3B7EF6; border-radius: 0 2px 2px 0; }
.sc-proxy .pxw-tools { gap: 15px; padding: 0 13px; }

.sc-proxy .pxw-page { position: relative; flex: 1 1 auto; min-height: 0; background: #1E1E20; container-type: size; }

/* Safari's own error page (dark appearance), a little above the middle as Safari sets it */
.sc-proxy .pxw-err { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; padding: max(36px, 27cqh) 48px 0; text-align: center; }
.sc-proxy .pxw-err b { font: 600 25px/31px var(--font-display); letter-spacing: -0.012em; color: #DADADE; max-width: 640px; text-wrap: balance; }
.sc-proxy .pxw-err span { font: 400 14px/21px var(--font); color: #8E8E94; max-width: 480px; text-wrap: balance; }
.sc-proxy .pxw-err i { font-style: normal; white-space: nowrap; }

/* The site: a store's sign-in page (sample data), white - the light of the scene until it goes out */
.sc-proxy .pxw-site { position: absolute; inset: 0; background: #FFFFFF; color: #1D1D1F; opacity: 0; visibility: hidden; }
.sc-proxy .pxs { height: 100%; display: flex; flex-direction: column; }
.sc-proxy .pxs-top { flex: none; height: 58px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 0 28px; border-bottom: 1px solid #EDEDF0; }
.sc-proxy .pxs-ico { display: block; justify-self: start; width: 17px; color: #1D1D1F; }
.sc-proxy .pxs-ico:last-child { justify-self: end; }
.sc-proxy .pxs-ico svg { display: block; width: 17px; height: 17px; }
.sc-proxy .pxs-logo { font: 600 13px/1 var(--font); letter-spacing: 0.26em; text-transform: uppercase; color: #1D1D1F; white-space: nowrap; }
.sc-proxy .pxs-main { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 10px 24px 22px; }
.sc-proxy .pxs-form { width: min(300px, 100%); display: flex; flex-direction: column; }
.sc-proxy .pxs-h { font: 600 28px/34px var(--font-display); letter-spacing: -0.022em; color: #1D1D1F; }
.sc-proxy .pxs-sub { margin-top: 5px; font: 400 14px/20px var(--font); color: #6E6E73; }
.sc-proxy .pxs-label { margin-top: 22px; font: 500 12px/16px var(--font); color: #6E6E73; }
.sc-proxy .pxs-field { margin-top: 7px; height: 44px; display: flex; align-items: center; padding: 0 14px; border: 1px solid #D2D2D7; border-radius: 11px; font: 400 15px/1 var(--font); color: #1D1D1F; white-space: nowrap; overflow: hidden; }
.sc-proxy .pxs-btn { position: relative; overflow: hidden; margin-top: 14px; height: 44px; border-radius: 22px; background: #1D1D1F; color: #FFFFFF; display: grid; place-items: center; font: 500 15px/1 var(--font); --press: var(--t, 0); }
.sc-proxy .pxs-press { position: absolute; inset: 0; background: #48484C; opacity: 0; }
.sc-proxy .pxs-btn span { position: relative; }
.sc-proxy .pxs-alt { margin-top: 16px; font: 400 13px/18px var(--font); color: #6E6E73; text-align: center; }
.sc-proxy .pxs-alt u { text-decoration: none; color: #0066CC; }

/* A short window: the sign-in page tightens, as a real one would at that height */
@container (max-height: 300px) {
  .sc-proxy .pxs-top { height: 46px; }
  .sc-proxy .pxs-main { padding-top: 4px; padding-bottom: 8px; }
  .sc-proxy .pxs-h { font-size: 22px; line-height: 28px; }
  .sc-proxy .pxs-sub, .sc-proxy .pxs-alt { display: none; }
  .sc-proxy .pxs-label { margin-top: 12px; }
  .sc-proxy .pxs-field, .sc-proxy .pxs-btn { height: 38px; }
  .sc-proxy .pxs-btn { margin-top: 10px; }
}

/* MARK: The captions under the window: a bold start, then grey */
.sc-proxy .px-notes { width: 100%; max-width: var(--px-w); margin-top: 34px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; }
.sc-proxy .px-note { margin: 0; max-width: 440px; font: 400 19px/28px var(--font); letter-spacing: -0.006em; color: var(--text-tertiary); text-wrap: pretty; }
.sc-proxy .px-note strong { font-weight: 600; color: var(--text-primary); }

/* MARK: Playing (JavaScript, no Reduce Motion, not a shot): every part follows its --t */
.js-scenes .sc-proxy { --px-h: clamp(320px, calc(100svh - 480px), 400px); }
.js-scenes .sc-proxy .px { padding-top: var(--header-h); }
.js-scenes .sc-proxy .px-head { opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 18px)); }
/* The room light holds, then goes with the page */
.js-scenes .sc-proxy .px-light { opacity: calc(var(--glow-on) - (var(--glow-on) - var(--glow-off)) * var(--t, 0) * var(--t, 0)); }
/* The page does not fade: it holds bright, then drops */
.js-scenes .sc-proxy .pxw-site { visibility: visible; opacity: calc(1 - var(--t, 0) * var(--t, 0) * var(--t, 0)); }
/* Safari's error comes up once it fits the screen (proxy.js sets --px-err: 0.49, or later where the close-up is too
   close for it) */
.js-scenes .sc-proxy .pxw-err { --e: clamp(0, (var(--p, 0) - var(--px-err, 0.49)) * 18, 1); opacity: var(--e); transform: translateY(calc((1 - var(--e)) * 6px)); }
.js-scenes .sc-proxy .pxw-load { opacity: calc(1 - var(--t, 0)); }
/* Safari's bar runs fast at first and slows as it goes - here to a dead stop: the proxy has gone quiet */
.js-scenes .sc-proxy .pxw-load i { width: calc((1 - (1 - var(--t, 0)) * (1 - var(--t, 0)) * (1 - var(--t, 0))) * var(--px-stop) * 100%); }
/* (a switch, not a fade: Stop while the outer range has passed its middle and the inner one has not) */
.js-scenes .sc-proxy .pxw-rl-in { --stop: calc(clamp(0, (var(--rl) - 0.5) * 1000, 1) * clamp(0, (0.5 - var(--t, 0)) * 1000, 1)); }
.js-scenes .sc-proxy .pxw-rl svg:first-child { opacity: calc(1 - var(--stop)); }
.js-scenes .sc-proxy .pxw-rl svg:last-child { opacity: var(--stop); }
/* Continue: pressed, then let go */
.js-scenes .sc-proxy .pxs-press { opacity: calc(var(--press) * (1 - var(--t, 0))); }
.js-scenes .sc-proxy .px-status { display: block; opacity: var(--t, 0); }
.js-scenes .sc-proxy .px-status > span { display: block; opacity: calc(1 - var(--t, 0)); }
.js-scenes .sc-proxy .px-drop { transform: translateY(calc((1 - var(--t, 0)) * 10px)); }
.js-scenes .sc-proxy .px-closed,
.js-scenes .sc-proxy .px-proof { opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 14px)); }
.js-scenes .sc-proxy .px-note > span { display: block; }

/* MARK: Tablets */
@media (max-width: 1099px) {
  .sc-proxy { --px-w: 860px; }
  .sc-proxy .px-status { font-size: 24px; line-height: 32px; max-width: 700px; }
  .sc-proxy .px-notes { gap: 36px; }
  .sc-proxy .px-note { font-size: 17px; line-height: 26px; }
}

/* MARK: Narrow windows (small tablets): Safari's compact toolbar - the chip and the address, nothing else */
@media (max-width: 759px) {
  .sc-proxy { --px-stop: 0.5; }
  .sc-proxy .pxw-side, .sc-proxy .pxw-hist, .sc-proxy .pxw-tools { display: none; }
  .sc-proxy .pxw-addr { max-width: none; padding: 0 34px 0 32px; justify-content: flex-start; }
  .sc-proxy .pxs-form { width: min(240px, 40cqw); }
}
/* Portrait tablets: a taller window, as the screen is */
@media (min-width: 600px) and (max-width: 1099px) and (orientation: portrait) {
  .js-scenes .sc-proxy { --px-h: clamp(320px, calc(100svh - 500px), 520px); }
}

/* MARK: Phones: a narrow window, the captions one under the other (playing: one at a time) */
@media (max-width: 599px) {
  .sc-proxy { --px-h: 400px; }
  .sc-proxy .px-head { max-width: 340px; }
  .sc-proxy .px-status { font-size: 19px; line-height: 26px; letter-spacing: -0.01em; max-width: 360px; }
  .sc-proxy .px-stage { margin-top: 26px; }
  .sc-proxy .pxw { border-radius: 14px; }
  .sc-proxy .px-light { inset: -110px -130px -170px; background-image: url("proxy/glow-phone.png"); }
  .sc-proxy .pxw-bar { height: 46px; gap: 7px; padding: 0 9px 0 14px; }
  .sc-proxy .pxw-lights { gap: 6px; margin-right: 16px; }
  .sc-proxy .pxw-lights i { width: 10px; height: 10px; }
  .sc-proxy .pxw-cap, .sc-proxy .pxw-addr { height: 30px; border-radius: 15px; }
  .sc-proxy .pxw-prof { padding: 0 8px; }
  .sc-proxy .pxw-prof span { display: none; }
  .sc-proxy .pxw-pg, .sc-proxy .pxw-rl { top: 7px; }
  .sc-proxy .pxw-pg { left: 9px; }
  .sc-proxy .pxw-rl { right: 10px; }
  .sc-proxy .pxw-load { height: 2.5px; }
  .sc-proxy .pxw-err { padding: max(30px, 22cqh) 22px 0; gap: 12px; }
  .sc-proxy .pxw-err b { font-size: 21px; line-height: 26px; max-width: 280px; }
  .sc-proxy .pxw-err span { font-size: 15px; line-height: 21px; max-width: 280px; }
  .sc-proxy .pxs-top { height: 48px; padding: 0 18px; }
  .sc-proxy .pxs-logo { font-size: 12px; letter-spacing: 0.22em; }
  .sc-proxy .pxs-main { padding: 6px 18px 14px; }
  .sc-proxy .pxs-form { width: min(196px, 42cqw); }
  .sc-proxy .pxs-h { font-size: 24px; line-height: 30px; }
  .sc-proxy .pxs-sub { font-size: 13px; line-height: 18px; }
  .sc-proxy .pxs-label { margin-top: 16px; }
  .sc-proxy .pxs-field { height: 40px; font-size: 13px; padding: 0 11px; }
  .sc-proxy .pxs-btn { height: 40px; margin-top: 12px; }
  .sc-proxy .pxs-alt > span { display: none; }
  .sc-proxy .px-notes { grid-template-columns: minmax(0, 1fr); gap: 18px; margin-top: 26px; }
  .sc-proxy .px-note { font-size: 17px; line-height: 25px; }
  /* Playing on a phone: a taller window, and one caption at a time under it - "no way around it", then the proof */
  .js-scenes .sc-proxy { --px-h: clamp(280px, calc(100svh - 390px), 440px); }
  .js-scenes .sc-proxy .px-stage { margin-top: 24px; }
  .js-scenes .sc-proxy .px-notes { gap: 0; margin-top: 24px; }
  .js-scenes .sc-proxy .px-notes > * { grid-area: 1 / 1; }
  .js-scenes .sc-proxy .px-closed > span { opacity: calc(1 - var(--t, 0)); transform: translateY(calc(var(--t, 0) * -12px)); }
  .js-scenes .sc-proxy .px-proof { opacity: 1; transform: none; }
  .js-scenes .sc-proxy .px-proof > span { opacity: var(--t, 0); transform: translateY(calc((1 - var(--t, 0)) * 12px)); }
}