/* motion.css: rörelsen, hissfärden och Paus-knappen (.lift-*). Laddas sist före print.css. KROKARNA. Fasaderna (css/facades.css) och minitornet på gatan (css/street.css) rör sig och tänds bara genom ärvda custom properties, som sätts på värden (li.floor, .roof, svg.mini-fl) och når in i -instanserna: --lit 0 eller 1 (saknas: tänt). Nyckelfönstrets tända lager och minitornets mörkläggning. --lit-dur, tändningens transition (saknas: 0s), alltid steps(2, end). --lit-delay --play running eller paused (saknas: paused). Varje oändlig animation på sidan har animation-play-state: var(--play, paused). --key-y0/1 nyckelfönstrets överkant och nederkant i symbolens viewBox- enheter (css/facades.css), för hissens stopp och ankomstljuset. Blocket nedan är det enda stället som sätter --play till running (facades.test.js vaktar det). Klasserna html.js, html.paused, .dim, .lit och .offscreen sätts bara av js/tower.js. */ @media (prefers-reduced-motion: no-preference) { html.js .floor.dim { --lit: 0; } html.js:not(.paused) { --play: running; } } .floor.lit { --lit-dur: 160ms; } .roof.offscreen, .floor.offscreen, .street.offscreen { --play: paused; } /* ---------------------------------------------------------------- hissen Vakten för nyckelfönstret och Paus-knappen. */ /* Under en etapp i hissfärden: varje steg är ett eget scrollTo, aldrig en mjukscroll. */ html.lift-moving { scroll-behavior: auto; } /* Vakten: en osynlig ruta på nyckelfönstrets plats (tower.js räknar top och height ur symbolens viewBox och --key-y0/--key-y1), som IntersectionObserver kan se. */ .lift-key { position: absolute; grid-column: 1 / 2; grid-row: 1 / 2; left: 0; width: 1px; visibility: hidden; pointer-events: none; } /* Paus och Fortsätt: fast nere till höger, ett litet papperskort som skyltarna. Högst 44 × 120 px (WCAG 2.5.8 kräver minst 24 × 24). Namnet byts av js/tower.js och säger vad ett tryck gör; ikonen följer (data-mode): två staplar för Paus, en spela-triangel för Fortsätt, ritade med kanter som syns också i forced-colors. */ .lift-toggle:not([hidden]) { position: fixed; right: max(12px, env(safe-area-inset-right)); bottom: max(12px, env(safe-area-inset-bottom)); z-index: var(--z-hud); display: inline-flex; align-items: center; gap: 8px; height: 36px; max-width: 120px; margin: 0; padding: 0 13px 0 11px; overflow: hidden; font: 600 12px/1 var(--font-mono); letter-spacing: 0.06em; color: var(--paper-ink); background: var(--paper-bg); border: 1px solid var(--paper-line); border-radius: var(--radius-1); box-shadow: 0 1px 0 oklch(30% 0.02 70 / 0.25); cursor: pointer; -webkit-tap-highlight-color: transparent; translate: 0 calc(-1 * var(--lift-dodge, 0px)); } .lift-toggle:hover { border-color: var(--paper-ink); } /* I papperssektionen (gatan har lämnat bilden uppåt, js/tower.js sätter .lift-away) syns ingenting som rör sig och ingen färd finns kvar, så knappen behövs inte där och ska inte ligga över radslut. Den tonar bort och ur tabbordningen, men aldrig medan den har synligt fokus från tangentbordet. Fokus efter ett tryck med finger eller mus (Android, skrivbordet) håller den inte kvar. */ .lift-toggle { transition: opacity 200ms var(--ease-sober), visibility 0s linear 0s; } .lift-toggle.lift-away:not(:focus-visible) { opacity: 0; visibility: hidden; transition: opacity 200ms var(--ease-sober), visibility 0s linear 200ms; } /* Knappen ligger över allt från ljus himmel till mörka fasader: en mörk ring direkt på kortet och en ljus krans utanför, så att ringen alltid står mot något ljust. */ .lift-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 0; box-shadow: 0 0 0 5px var(--paper-bg); } @media (pointer: coarse) { .lift-toggle:not([hidden]) { height: 40px; } } /* Bara ikonen, en kvadrat, där skylten annars hamnar under knappen. Ordet står kvar för skärmläsare (namnet är fortfarande Paus eller Fortsätt). - Låg skärm (liggande telefon): annars låg knappen över NU-skyltens högerkant under hela första läspausen. - Mobilens enkolumnslayout (stående under 700 px, allt under 560 px, samma gräns som css/tower.css): skylten går kant i kant ovanpå fasaden, och dess text slutar 35 px från skärmens kant (16 px marginal, 6 px ram, 1 px kant, 12 px utfyllnad). Knappen står därför i marginalen, 28 px bred och 4 px från kanten, så att den aldrig täcker skylttext. Den enda text som når in i marginalen är måttstockens årtal; ligger ett sådant under knappen flyttar js/tower.js upp den över årtalet (--lift-dodge) och mäter om varje gång en rullning har stannat. Mätt i första vyn och längs hela färden i 320 till 430 px bredd (Safaris verktygsfält gör den synliga höjden lägre än skärmen, så ordet hade hamnat över text också på 390 px). - Stående surfplatta upp till 834 px bredd (tvåkolumnslayouten): tavlan och skyltarna slutar 24 px från kanten och tavlans årtal cirka 44 px från den. Ordknappen (75 till 106 px) låg över årtalen i färdens sista läspaus på 744 till 810 px, och en ikon på 36 till 40 px vid 12 px hade gjort det också. Samma marginalläge som på mobil löser det. */ @media (max-width: 559px), (max-width: 834px) and (orientation: portrait), (max-height: 480px) { .lift-toggle:not([hidden]) { width: 36px; padding: 0; justify-content: center; } .lift-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } } @media (max-height: 480px) and (pointer: coarse) { .lift-toggle:not([hidden]) { width: 40px; } } /* Liggande telefon under 760 px bredd: skyltkolumnen går ut till 24 px från kanten, och en klistrad skylt står under knappen så länge våningen passerar. Knappen blir 34 px (över 24 × 24) och flyttar ut i marginalen, så att den bara täcker skyltens kant och luft, aldrig text (skylttexten slutar minst 42 px från kanten). */ @media (orientation: landscape) and (max-height: 480px) and (max-width: 759px) { .lift-toggle:not([hidden]) { right: max(4px, env(safe-area-inset-right)); bottom: max(4px, env(safe-area-inset-bottom)); width: 34px; height: 34px; } } /* Mobilens enkolumnslayout och stående surfplatta (se ovan): 28 px bred i marginalen. Kommer efter regeln för liggande telefon, som annars hade gett 34 px under 560 px bredd. */ @media (max-width: 559px), (max-width: 834px) and (orientation: portrait) { .lift-toggle:not([hidden]) { right: max(4px, env(safe-area-inset-right)); bottom: max(4px, env(safe-area-inset-bottom)); width: 28px; } } .lift-icon { display: block; box-sizing: border-box; width: 9px; height: 11px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; } .lift-toggle[data-mode="resume"] .lift-icon { width: 0; height: 0; border-left: 9px solid currentColor; border-right: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; } /* Förloppslinjen: medan hissen står i en läspaus fylls en tunn linje längs knappens nederkant, från vänster, på den tid som är kvar (--lift-wait sätts av tower.js). När den är full åker hissen. Ren dekor (aria-hidden), ingen JS per bildruta: två likadana animationer som växlar namn (data-wait a eller b), så att varje ny paus börjar om från tom. NU-markörens orange, ritad som kant så att den syns också i forced-colors. Utan läspaus (etapp, Paus, avbrott) syns den inte. */ .lift-wait { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-top: 2px solid var(--sun-orange); transform: scaleX(0); transform-origin: 0 50%; visibility: hidden; pointer-events: none; } .lift-toggle[data-wait] .lift-wait { visibility: visible; animation-duration: var(--lift-wait, 3.5s); animation-timing-function: linear; animation-fill-mode: both; } .lift-toggle[data-wait="a"] .lift-wait { animation-name: lift-fill-a; } .lift-toggle[data-wait="b"] .lift-wait { animation-name: lift-fill-b; } @keyframes lift-fill-a { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes lift-fill-b { from { transform: scaleX(0); } to { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .lift-wait { display: none; } }