/* KAGT brand elements for kagt.co.uk. */

/* Tile field: the host needs position: relative; its content sits above the board. */
.kagt-field-host { position: relative; overflow: hidden; isolation: isolate; }
.kagt-field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.kagt-field rect { transition: fill 700ms cubic-bezier(.2, .7, .2, 1); transform-box: fill-box; }

/* Divider: a small 2 by 2 puzzle between sections. The teal piece slides in when it scrolls into view.
   <div class="kagt-divider" role="separator"><i></i><i></i><i></i><i></i></div> */
.kagt-divider {
  display: grid; grid-template-columns: repeat(2, 10px); gap: 3px;
  justify-content: center; margin-block: 56px;
}
.kagt-divider i { width: 10px; height: 10px; border-radius: 2.5px; background: #E2E5EC; }
.kagt-divider i:last-child { background: #00BFA5; transition: transform 420ms cubic-bezier(.34, 1.4, .64, 1), opacity 200ms; }
.kagt-divider.is-waiting i:last-child { transform: translate(8px, 8px); opacity: 0; }
.kagt-on-navy .kagt-divider i { background: #2A3868; }
.kagt-on-navy .kagt-divider i:last-child { background: #00BFA5; }

/* Text selection in the brand's soft teal. */
::selection { background: #D9F7F2; color: #0E1733; }