/* Beamtouch About insignia — B MATERIAL. Clean owner-review candidate. * The approved static drawing is the base state; the motion pass at the end of this * file animates duplicate "live" elements that rest at opacity 0, so reduced motion * renders the untouched static material. * * `data-insig="B"` is set statically on . The attribute is kept in these * selectors deliberately: it preserves the exact cascade the owner approved. It * should be flattened away when this file is folded into styles.css at promotion, * with a pixel diff to prove the flatten changed nothing. */ html body .principles .principle .principle-mark { -webkit-mask-image: none !important; mask-image: none !important; background: none !important; width: auto !important; height: auto !important; aspect-ratio: auto !important; --mk-h: clamp(150px, 12.6vw, 172px); display: block; margin-bottom: clamp(20px, 1.8vw, 26px); } html body .principles .principle .principle-mark .mk { display: block; height: var(--mk-h); width: auto; overflow: visible; } html body .principle-mark-foundation .mk { height: calc(var(--mk-h) * .92); } /* ---- palette (light default, dark override) ------------------------------------ */ html body .principles .principle .principle-mark { --ig-deep: #6E3413; --ig-base: #8C4419; --ig-mid: #A0561F; --ig-lit: #B5612C; --ig-gold: #B57A1E; --ig-hi: #C98F2E; --wPri: 2.4; --wSec: 1.35; --wTer: .9; --wIn: 1.0; --haloO: 0; /* a halo on ivory reads as a smudge, never light */ --shadowO: 0; --dy2: 0px; --dy3: 0px; } html[data-theme="dark"] body .principles .principle .principle-mark { --ig-deep: #7A3E1B; --ig-base: #A0561F; --ig-mid: #B5612C; --ig-lit: #CE7D3A; --ig-gold: #E6B15C; --ig-hi: #F2CE8C; --wPri: 2.0; --wSec: 1.1; --wTer: .72; --wIn: .8; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body .principles .principle .principle-mark { --ig-deep: #7A3E1B; --ig-base: #A0561F; --ig-mid: #B5612C; --ig-lit: #CE7D3A; --ig-gold: #E6B15C; --ig-hi: #F2CE8C; --wPri: 2.0; --wSec: 1.1; --wTer: .72; --wIn: .8; } } /* ---- roles --------------------------------------------------------------------- */ html body .principle-mark .mk .ig-pri { stroke-width: var(--wPri); opacity: .96; } html body .principle-mark .mk .ig-sec { stroke: var(--ig-secC, var(--ig-mid)); stroke-width: var(--wSec); opacity: var(--secO, .68); } html body .principle-mark .mk .ig-ter { stroke: var(--ig-terC, var(--ig-base)); stroke-width: var(--wTer); opacity: var(--terO, .5); } html body .principle-mark .mk .ig-in { stroke-width: var(--wIn); opacity: .85; } html body .principle-mark .mk .g0 { stop-color: var(--e0); } html body .principle-mark .mk .g1 { stop-color: var(--e1); } html body .principle-mark .mk .g2 { stop-color: var(--e2); } html body .principle-mark .mk .ig-core { fill: var(--coreC, var(--ig-gold)); } html body .principle-mark .mk .ig-halo { fill: var(--ig-gold); opacity: var(--haloO); } html body .principle-mark .mk .ig-shadow path { stroke: #1A130C; stroke-width: calc(var(--wPri) + .7); opacity: var(--shadowO); transform: translateY(2.2px); filter: url(#igsb); } html body .principle-mark .mk .ig-l2 { transform: translateY(var(--dy2)); } html body .principle-mark .mk .ig-l3 { transform: translateY(var(--dy3)); } /* per-element trims */ html body .principle-mark .mk.mk-origin .ig-sec { opacity: calc(var(--secO, .68) + .1); } html body .principle-mark .mk.mk-origin .ig-ter { opacity: calc(var(--terO, .5) + .1); } html body .principle-mark .mk .p1 { stroke-width: calc(var(--wSec) + .18); opacity: .68; } html body .principle-mark .mk .p2 { opacity: .4; } html body .principle-mark .mk .p3 { stroke-width: calc(var(--wTer) + .18); opacity: .52; } html body .principle-mark .mk .p4 { stroke-width: calc(var(--wPri) * .72); } html body .principle-mark .mk .sp { stroke-width: calc(var(--wPri) * .92); } html body .principle-mark .mk .td { stroke-width: calc(var(--wPri) * .66); } html body .principle-mark .mk .sd { stroke-width: calc(var(--wSec) + .05); opacity: .8; } html body .principle-mark .mk .e2 { opacity: .58; } html body .principle-mark .mk .e3 { opacity: .46; } html body .principle-mark .mk .rg { stroke-width: calc(var(--wPri) * .66); } html body .principle-mark .mk .cm { stroke-width: calc(var(--wPri) * .64); } html body .principle-mark .mk .co { opacity: .55; } /* ---- B · MATERIAL ---------------------------------------------------------------- */ html[data-insig="B"] body .principle-mark { --e0: #F6DCA0; --e1: var(--ig-gold); --e2: var(--ig-deep); --ig-secC: var(--ig-base); --ig-terC: var(--ig-deep); --coreC: #F6DCA0; --wPri: 2.2; } html[data-insig="B"][data-theme="light"] body .principle-mark, html[data-insig="B"]:not([data-theme="dark"]) body .principle-mark { --e0: var(--ig-hi); --e1: var(--ig-gold); --e2: #5A2A0E; --coreC: var(--ig-hi); --wPri: 2.6; } html[data-insig="B"][data-theme="dark"] body .principle-mark { --haloO: .7; } /* dark override must also win when the theme attribute never landed */ @media (prefers-color-scheme: dark) { html[data-insig="B"]:not([data-theme="light"]) body .principle-mark { --haloO: .7; } } /* silhouette test: kill all light, flatten all material */ html[data-igflat] body .principle-mark .mk [stroke^="url"] { stroke: var(--ig-lit) !important; } html[data-igflat] body .principle-mark .mk .ig-halo, html[data-igflat] body .principle-mark .mk .ig-shadow, html[data-igflat] body .principle-mark .mk .ig-live, html[data-igflat] body .principle-mark .mk .ig-shade, html[data-igflat] body .principle-mark .mk .ig-live-core, html[data-igflat] body .principle-mark .mk .lv-enc, html[data-igflat] body .principle-mark .mk .lv-tr, html[data-igflat] body .principle-mark .mk .lv-rgGlow { display: none; } html[data-igflat] body .principle-mark .mk * { filter: none !important; } @media (forced-colors: active) { html body .principle-mark .mk path, html body .principle-mark .mk circle { stroke: CanvasText !important; } html body .principle-mark .mk .ig-core { fill: CanvasText !important; } html body .principle-mark .mk .ig-halo, html body .principle-mark .mk .ig-shadow, html body .principle-mark .mk .ig-live, html body .principle-mark .mk .ig-shade, html body .principle-mark .mk .ig-live-core, html body .principle-mark .mk .lv-enc, html body .principle-mark .mk .lv-tr, html body .principle-mark .mk .lv-rgGlow { display: none; } } /* ---- ADOPTED PHASE 4 DECISION · W2 ------------------------------------------------ The principle descriptions were leaving a single word alone on the last line at 1600 and above ("market." under One foundation). The cause is the grid column, not the 34ch cap, so the measure cannot be widened without breaking the three equal tracks. This asks the browser for a considered final line instead, which changes no geometry at all: row width, column tracks, line counts and titles are untouched. Progressive enhancement — where it is unsupported the paragraph wraps exactly as it does today. */ html body .principles .principle p, html body .principles .principle h3 { text-wrap: pretty; } /* ================================================================================ MOTION PASS — direction B only. A slow interior light. Each mark carries a duplicate "live" filament layer — thinner strokes in the highlight tone, resting at opacity 0 — revealed by a soft luminance band that travels through an SVG mask (the .ig-band rect, one per mark). CSS keyframes only: no JS clock, no transform on the symbol itself, no stroke drawing. The three cadences (6.8s / 7.6s / 8.4s) never divide into one another, and each pass ends in a long idle, so the row never reads as a loop. Reduced motion, MOTION OFF, data-still, the silhouette test and forced colors all leave the approved static drawing untouched. */ /* live geometry rests dark */ html body .principle-mark .mk .ig-live, html body .principle-mark .mk .ig-shade, html body .principle-mark .mk .ig-live-core, html body .principle-mark .mk .lv-enc, html body .principle-mark .mk .lv-tr, html body .principle-mark .mk .lv-rgGlow { opacity: 0; } html body .principle-mark .mk .lv-tr, html body .principle-mark .mk .lv-rgGlow { fill: var(--lv-c); } /* The shade re-uses the specular geometry and only swaps the ink. It is deliberately NOT banded: banding it put the dark exactly where the specular then painted over it, so the two cancelled and ivory saw almost nothing. Instead the whole contour oxidises for the duration of the pass and the narrow specular travels through that darker ground — the highlight is then read against bronze, not against the resting cinnamon it is nearly the same value as. */ /* The specular and shade layers are two instances of one geometry set, so the ink cannot come from a custom property: a selector never matches into a shadow tree, and the clone would simply carry the original's computed stroke — which is what silently painted the shade in the specular's gold. currentColor is resolved per instance at used-value time, so the wrapper's `color` is what each copy is actually drawn in. */ html body .principle-mark .mk .lv { stroke: currentColor; } html body .principle-mark .mk .ig-live { color: var(--lv-c); } /* The shade carries its own copy of the contours rather than a of the specular's: a clone inside an opacity-animated group would not paint here, and a selector cannot reach into a use shadow tree to recolour it anyway. Real elements take the stroke rules directly, which is worth the duplicated path data. */ html body .principle-mark .mk .ig-shade .lv { stroke: var(--lv-shade-c); } html body .principle-mark .mk .lv-enc { stroke: var(--lv-c); fill: none; } html body .principle-mark .mk .ig-live-core { fill: var(--lv-c); } /* the blurred under-copy: a soft halo the travelling light carries with it, in the same family as the marks' resting core glows */ html body .principle-mark .mk .lv-glow { opacity: var(--lv-gO); } /* filaments cover the base strokes fully, so the passing light owns the line for a moment instead of tinting it */ html body .principle-mark .mk .lv-pri { stroke-width: var(--wPri); opacity: .95; } html body .principle-mark .mk .lv-sec { stroke-width: var(--wSec); opacity: .7; } html body .principle-mark .mk .lv-ter { stroke-width: var(--wTer); opacity: .55; } html body .principle-mark .mk .lv-in { stroke-width: calc(var(--wIn) * 1.1); opacity: .95; } html body .principle-mark .mk .lv-p1 { stroke-width: calc((var(--wSec) + .18) * .9); opacity: .5; } html body .principle-mark .mk .lv-p2 { stroke-width: calc(var(--wTer) * .9); opacity: .35; } html body .principle-mark .mk .lv-p3 { stroke-width: var(--wTer); opacity: .55; } html body .principle-mark .mk .lv-br { stroke-width: calc(var(--wSec) * .95); opacity: .6; } html body .principle-mark .mk .lv-sd { stroke-width: calc(var(--wSec) + .05); opacity: .5; } html body .principle-mark .mk .lv-p4 { stroke-width: calc(var(--wPri) * .72); opacity: .9; } html body .principle-mark .mk .lv-sp { stroke-width: calc(var(--wPri) * .92); opacity: 1; } html body .principle-mark .mk .lv-td { stroke-width: calc(var(--wPri) * .66); opacity: .6; } html body .principle-mark .mk .lv-ax { stroke-width: calc(var(--wSec) * 1.05); } html body .principle-mark .mk .lv-enc { stroke-width: calc(var(--wPri) * .8); } /* Intensity. Dark and light are not the same effect: in dark, LIGHT makes the contrast, so a warm white filament on a near-black ground is enough. On ivory the resting cinnamon and a gold highlight sit in almost the same band, so the contrast has to come from MATERIAL — the shade oxidises the contour to a deep bronze, the specular answers in hot gold, and the eye reads travel, not glow. --lv-shO is 0 in dark: the shade layer exists only for the ivory ground. */ html body .principles .principle .principle-mark { --lv-c: #EFB457; --lv-hot: #F7D08A; --lv-shade-c: #8F421F; --lvO: 1; --lv-shO: .96; --lv-coreO: .45; --lv-encO: .16; --lv-gO: 0; --lv-trO: .7; --lv-rgO: .4; } html[data-theme="dark"] body .principles .principle .principle-mark { --lv-c: #F9E4B3; --lv-hot: #F9E4B3; --lv-shO: 0; --lvO: 1; --lv-coreO: .62; --lv-encO: .2; --lv-gO: .34; --lv-trO: .85; --lv-rgO: .5; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body .principles .principle .principle-mark { --lv-c: #F9E4B3; --lv-hot: #F9E4B3; --lv-shO: 0; --lvO: 1; --lv-coreO: .62; --lv-encO: .2; --lv-gO: .34; --lv-trO: .85; --lv-rgO: .5; } } /* The lit slice must out-read the material it crosses. The resting gradient is already a warm gold near the core (~#F8D093 mid-mark), so the old #F9E4B3 specular sat within a few values of it and simply vanished — the pass was invisible even though every layer was animating. The highlight now goes to near-white with a travelling bloom. Scoped to the two marks being fixed, so Owner-operated keeps the tones it was approved with. */ html body .principle-mark-origin, html body .principle-mark-foundation { --lv-c: #FFD98A; --lv-hot: #FFE7B4; --lv-gO: .3; } html[data-theme="dark"] body .principle-mark-origin, html[data-theme="dark"] body .principle-mark-foundation { --lv-c: #FFF7E6; --lv-hot: #FFF7E6; --lv-gO: .5; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body .principle-mark-origin, html:not([data-theme="light"]) body .principle-mark-foundation { --lv-c: #FFF7E6; --lv-hot: #FFF7E6; --lv-gO: .5; } } /* the small hot core reads as the one specular point, not a lamp */ html body .principle-mark .mk .ig-live-core, html body .principle-mark .mk .lv-tr { fill: var(--lv-hot); } /* Band length is the difference between "the mark changes colour" and "light is traversing the mark". Dark can afford a long soft band because the filament is the only bright thing on the ground. On ivory the same band lights most of the symbol at once and reads as a tint, so light mode gets a short specular with a tighter oxidised envelope around it: at any instant only part of the contour is hot, and the eye follows the edge. SVG geometry properties are settable in CSS, so this is a per-theme value on the same element — no second rect. */ /* 34 on a ~142-tall mark. The band was 120 here, which lit nearly the whole symbol at once: there was no edge to follow and the pass read as a tint rather than as travel. A short band means only a slice of the contours is hot at any instant, and that slice is what the eye tracks. Same value in both themes — the width is what makes the movement legible, and that is not a per-theme concern. */ html body .principle-mark .mk .ig-band-l { height: 34px; } /* Owner-operated, ivory only. A uniformly lit axis is exactly the flat gold-on-gold that fails here, so on ivory the whole circuit — mount, axis, ring — is put behind the same travelling band as the other two marks, and the ring and mount join in. In dark the ring and mount are inert and the group is unmasked, so the approved dark behaviour (lit axis, travelling point) is untouched. */ html body .principle-mark .mk .lv-ax { opacity: var(--lv-axO); } html body .principle-mark .mk .ig-shade .lv-ax { opacity: 1; } html body .principle-mark .mk .lv-rg, html body .principle-mark .mk .lv-cm { opacity: var(--lv-cirO); } html body .principle-mark .mk .lv-rg { stroke-width: calc(var(--wPri) * .66); } html body .principle-mark .mk .lv-cm { stroke-width: calc(var(--wPri) * .64); } html body .principle-mark .mk .ig-shade .lv-rg, html body .principle-mark .mk .ig-shade .lv-cm { opacity: 1; } html body .principles .principle .principle-mark { --lv-axO: .95; --lv-cirO: .92; } html body .principle-mark-ownership .mk .ig-live { mask: url(#igw-lm); } html[data-theme="dark"] body .principles .principle .principle-mark { --lv-cirO: 0; } html[data-theme="dark"] body .principle-mark-ownership .mk .ig-live { mask: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body .principles .principle .principle-mark { --lv-cirO: 0; } html:not([data-theme="light"]) body .principle-mark-ownership .mk .ig-live { mask: none; } } /* cadence: each symbol owns its clock; phases never align */ html body .principle-mark-origin { --lv-dur: 6.8s; --lv-ph: -.4s; } html body .principle-mark-foundation { --lv-dur: 7.6s; --lv-ph: -3.6s; } html body .principle-mark-ownership { --lv-dur: 8.4s; --lv-ph: -6.6s; } @media (prefers-reduced-motion: no-preference) { /* A · ORIGINAL — contained genesis: the base node brightens, one rise carries light up through the shells; the inner contour completes first and the outer shells answer late, because the band meets their crowns last. */ html[data-insig="B"]:not([data-still]) body .principle-mark-origin .ig-live { animation: igm-live-a var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-origin .ig-live-core { animation: igm-core-a var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-origin .ig-band { animation: igm-band-a var(--lv-dur) linear var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-origin .ig-shade { animation: igm-shade-a var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } /* B · FOUNDATION — energy gathers low: a slow shimmer climbs the stacked planes, concentrates at the centre, then one lift runs the spine; branches and terminal diamonds answer in the band's wake. */ html[data-insig="B"]:not([data-still]) body .principle-mark-foundation .ig-live { animation: igm-live-b var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-foundation .ig-live-core { animation: igm-core-b var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-foundation .ig-band { animation: igm-band-b var(--lv-dur) linear var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-foundation .ig-shade { animation: igm-shade-b var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } /* C · OWNER-OPERATED — a closed circuit: a small light leaves the core, climbs the axis, is held a moment at the upper node (which answers with its own glow), and settles back into the core. The enclosure only answers — a low sympathetic warmth, never the subject. */ html[data-insig="B"]:not([data-still]) body .principle-mark-ownership .ig-live { animation: igm-live-c var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-ownership .ig-live-core { animation: igm-core-c var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-ownership .lv-tr { animation: igm-tr-move var(--lv-dur) linear var(--lv-ph) infinite, igm-tr-op var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-ownership .lv-rgGlow { animation: igm-rgGlow-c var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-ownership .lv-enc { animation: igm-enc-c var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-ownership .ig-shade { animation: igm-shade-c var(--lv-dur) cubic-bezier(.45,.1,.35,.95) var(--lv-ph) infinite; } /* the shade bands ride the same travel as their specular, so the oxidation and the highlight are one moving material event rather than two effects that coincide */ html[data-insig="B"]:not([data-still]) body .principle-mark-origin .ig-band-s { animation: igm-band-a var(--lv-dur) linear var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-foundation .ig-band-s { animation: igm-band-b var(--lv-dur) linear var(--lv-ph) infinite; } html[data-insig="B"]:not([data-still]) body .principle-mark-ownership .ig-band-w, html[data-insig="B"]:not([data-still]) body .principle-mark-ownership .ig-band-lw { animation: igm-tr-move var(--lv-dur) linear var(--lv-ph) infinite; } /* dark mode makes its contrast with light alone — the oxidising layer is ivory-only and is not merely invisible there, it does not run */ html[data-theme="dark"] body .principle-mark .ig-shade, html[data-theme="dark"] body .principle-mark .ig-band-s, html[data-theme="dark"] body .principle-mark .ig-band-w { animation: none; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) body .principle-mark .ig-shade, html:not([data-theme="light"]) body .principle-mark .ig-band-s, html:not([data-theme="light"]) body .principle-mark .ig-band-w { animation: none; } } @keyframes igm-shade-a { 0%, 3% { opacity: 0; } 12% { opacity: var(--lv-shO); } 52% { opacity: var(--lv-shO); } 70% { opacity: 0; } 100% { opacity: 0; } } @keyframes igm-shade-b { 0%, 1% { opacity: 0; } 10% { opacity: var(--lv-shO); } 57% { opacity: var(--lv-shO); } 73% { opacity: 0; } 100% { opacity: 0; } } @keyframes igm-shade-c { 0%, 3% { opacity: 0; } 11% { opacity: var(--lv-shO); } 62% { opacity: var(--lv-shO); } 74% { opacity: 0; } 100% { opacity: 0; } } /* ORIGINAL. One continuous climb from the base node to the crown, covering the mark's own height (163 units) rather than racing 300 units mostly through empty space. Held opacity across the whole traverse, so the slice is lit wherever it is: at a quarter of the cycle it is on the lower contours, at half the middle, at three quarters the crown. */ @keyframes igm-band-a { 0%, 6% { transform: translateY(0); animation-timing-function: cubic-bezier(.5,.08,.5,.92); } 80% { transform: translateY(-163px); } 100% { transform: translateY(-163px); } } @keyframes igm-live-a { 0%, 2% { opacity: 0; } 10% { opacity: var(--lvO); } 72% { opacity: var(--lvO); } 84% { opacity: 0; } 100% { opacity: 0; } } @keyframes igm-core-a { 0%, 2% { opacity: 0; } 9% { opacity: var(--lv-coreO); } 30% { opacity: calc(var(--lv-coreO) * .45); } 60% { opacity: calc(var(--lv-coreO) * .22); } 80% { opacity: 0; } 100% { opacity: 0; } } /* ONE FOUNDATION. Two events the eye can separate. First a slow sweep inward across the stacked planes (0 to -35), then a brief gather at the shared centre (-35 to -42), then the rise up the spine to the terminal diamond (-42 to -150). The branches and tips are not animated separately: the same slice reaches them on its way past, which is why they answer late without being told to. */ @keyframes igm-band-b { 0%, 4% { transform: translateY(0); animation-timing-function: cubic-bezier(.5,.1,.5,.95); } 32% { transform: translateY(-35px); animation-timing-function: linear; } 42% { transform: translateY(-42px); animation-timing-function: cubic-bezier(.5,.08,.5,.94); } 82% { transform: translateY(-150px); } 100% { transform: translateY(-150px); } } @keyframes igm-live-b { 0%, 2% { opacity: 0; } 10% { opacity: var(--lvO); } 78% { opacity: var(--lvO); } 88% { opacity: 0; } 100% { opacity: 0; } } @keyframes igm-core-b { 0%, 22% { opacity: 0; } 36% { opacity: var(--lv-coreO); } 52% { opacity: calc(var(--lv-coreO) * .4); } 68% { opacity: 0; } 100% { opacity: 0; } } @keyframes igm-tr-move { 0%, 11% { transform: translateY(0); animation-timing-function: cubic-bezier(.42,.06,.26,.99); } 34% { transform: translateY(-48px); } 46% { transform: translateY(-48px); animation-timing-function: cubic-bezier(.42,.06,.3,.99); } 68% { transform: translateY(0); } 100% { transform: translateY(0); } } @keyframes igm-tr-op { 0%, 7% { opacity: 0; } 15% { opacity: var(--lv-trO); } 60% { opacity: calc(var(--lv-trO) * .9); } 72% { opacity: 0; } 100% { opacity: 0; } } @keyframes igm-rgGlow-c { 0%, 26% { opacity: 0; } 38% { opacity: var(--lv-rgO); } 52% { opacity: calc(var(--lv-rgO) * .55); } 64% { opacity: 0; } 100% { opacity: 0; } } @keyframes igm-live-c { 0%, 6% { opacity: 0; } 15% { opacity: var(--lvO); } 64% { opacity: var(--lvO); } 78% { opacity: 0; } 100% { opacity: 0; } } @keyframes igm-core-c { 0%, 4% { opacity: 0; } 13% { opacity: var(--lv-coreO); } 36% { opacity: calc(var(--lv-coreO) * .3); } 56% { opacity: calc(var(--lv-coreO) * .35); } 68% { opacity: calc(var(--lv-coreO) * .85); } 82% { opacity: 0; } 100% { opacity: 0; } } @keyframes igm-enc-c { 0%, 28% { opacity: 0; } 42% { opacity: var(--lv-encO); } 58% { opacity: calc(var(--lv-encO) * .6); } 74% { opacity: 0; } 100% { opacity: 0; } } }