/* Keenable v3 kit: the one source of type, colour, grain and motion for the deck, the video and every rendered asset.
   Canvas is 1920x1080. Link it, don't copy values out of it. */
@font-face{font-family:"Switzer";src:url(fonts/Switzer-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:block}
@font-face{font-family:"Switzer";src:url(fonts/Switzer-VariableItalic.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:block}
@font-face{font-family:"Fragment Mono";src:url(fonts/FragmentMono-400-latin.woff2) format("woff2");font-weight:400;font-display:block}

:root{
  /* colour: white page, black ink, one blue */
  --white:#FFFFFF;
  --paper:#F4F6FA;          /* quiet panels, never a card shadow */
  --ink:#0B0B0C;
  --ink-70:rgba(11,11,12,.70);
  --ink-50:rgba(11,11,12,.50);
  --ink-12:rgba(11,11,12,.12); /* hairlines */
  --ink-06:rgba(11,11,12,.06);
  --blue:#005CFF;           /* Keenable blue, the only accent */
  --blue-deep:#0033CC;
  --blue-night:#06124D;     /* darkest blue, for grain grounds only */
  --blue-mid:#4C8BFF;
  --blue-ice:#C7DAFF;
  --blue-mist:#EAF1FF;

  /* type */
  --display:"Switzer","Helvetica Neue",Arial,sans-serif;   /* one Swiss family for display and text (Fontshare, free commercial) */
  --text:"Switzer","Helvetica Neue",Arial,sans-serif;
  --mono:"Fragment Mono",ui-monospace,Menlo,monospace;      /* Keenable brand mono, Helvetica-drawn */

  /* motion: one family of curves for everything */
  --ease:cubic-bezier(.16,1,.3,1);      /* expo out: every entrance */
  --ease-in:cubic-bezier(.7,0,.84,0);   /* expo in: every exit */
  --ease-io:cubic-bezier(.87,0,.13,1);  /* expo in-out: wipes, blinks, camera moves */
  --t-fast:.32s; --t:.7s; --t-slow:1.1s; --stagger:.07s;
}

/* rendering: crisp, no filters on type, ever */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision;font-kerning:normal}
body{font-family:var(--text);color:var(--ink);background:var(--white)}

/* type scale @1920 */
.k-mega{font:800 260px/.84 var(--display);letter-spacing:-.06em;text-transform:uppercase;margin:0}
.k-h1{font:750 156px/.9 var(--display);letter-spacing:-.052em;margin:0}
.k-h2{font:700 104px/.94 var(--display);letter-spacing:-.045em;margin:0}
.k-h3{font:650 46px/1.08 var(--display);letter-spacing:-.025em;margin:0}
.k-lede{font:400 40px/1.3 var(--text);letter-spacing:-.012em;color:var(--ink-70);margin:0}
.k-body{font:400 30px/1.42 var(--text);letter-spacing:-.006em;color:var(--ink-70);margin:0}
.k-label{font:400 19px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-50)}
.k-num{font-variant-numeric:tabular-nums}
.k-blue{color:var(--blue)}
.k-white{color:var(--white)}
/* the one emphasis device in running type: a blue block behind one word (Sui style), white type on it */
.k-hl{display:inline-block;background:var(--blue);color:#fff;padding:0 .14em;margin:0 -.02em;border-radius:.06em;line-height:.98}

/* grounds */
.k-ground-white{background:var(--white)}
/* aura: white page, blue light rising from below (Sui / reference 2) */
.k-aura{background:
  radial-gradient(70% 60% at 50% 118%,#005CFF 0%,rgba(0,92,255,.85) 22%,rgba(76,139,255,.55) 42%,rgba(199,218,255,.45) 60%,rgba(255,255,255,0) 78%),
  #fff}
.k-aura-top{background:
  radial-gradient(70% 60% at 50% -18%,#005CFF 0%,rgba(0,92,255,.85) 22%,rgba(76,139,255,.55) 42%,rgba(199,218,255,.45) 60%,rgba(255,255,255,0) 78%),
  #fff}
/* blue grain ground (references 12-13): section breaks only */
.k-ground-blue{background:
  radial-gradient(60% 70% at 30% 40%,#2B74FF 0%,rgba(43,116,255,0) 70%),
  radial-gradient(80% 80% at 80% 90%,#001E99 0%,rgba(0,30,153,0) 70%),
  var(--blue);color:#fff}

/* grain: add class k-grain to any positioned ground. Heavier on blue, a whisper on white. */
.k-grain{position:relative;isolation:isolate}
.k-grain::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.6 -.55'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:300px 300px;opacity:.05;mix-blend-mode:multiply}
.k-ground-blue.k-grain::after,.k-aura.k-grain::after,.k-aura-top.k-grain::after{opacity:.55;mix-blend-mode:soft-light}
.k-grain.k-grain-live::after{animation:k-grain .9s steps(6) infinite}
@keyframes k-grain{0%{background-position:0 0}20%{background-position:-60px 40px}40%{background-position:80px -30px}60%{background-position:-20px 90px}80%{background-position:50px 10px}100%{background-position:0 0}}

/* diagram strokes (SVG): thin blue lines, dot ends, dashed construction */
.k-line{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round}
.k-line-faint{fill:none;stroke:var(--blue-ice);stroke-width:2}
.k-construct{fill:none;stroke:rgba(0,92,255,.38);stroke-width:1.2;stroke-dasharray:3 7}
.k-dot{fill:var(--blue)}
.k-hatch{fill:url(#k-hatch)}   /* define <pattern id="k-hatch"> from kit/svg-defs.svg in each SVG */

/* the eyes (kit/eyes.svg): .lid groups hold the white + pupil; shut = lids collapse to the baseline */
.k-eyes .lid{transform-box:fill-box;transform-origin:50% 100%;transition:transform .14s var(--ease-io)}
.k-eyes.shut .lid{transform:scaleY(.04)}
.k-eyes .p{transition:transform .45s var(--ease)}

/* motion utilities: word/line mask reveal (Swiss editorial). Wrap each line in .k-mask > span */
/* the clip box carries room for ascenders and descenders: display line-heights (.84–.94) are tighter than the glyphs */
.k-mask{display:block;overflow:hidden;padding:.16em 0 .14em;margin:-.16em 0 -.14em}
.k-mask>span{display:inline-block;transform:translateY(105%)}
.on .k-mask>span,.k-play .k-mask>span{animation:k-rise var(--t-slow) var(--ease) forwards;animation-delay:calc(var(--i,0) * var(--stagger) + var(--d,0s))}
@keyframes k-rise{to{transform:none}}
.k-fade{opacity:0;transform:translateY(18px)}
.on .k-fade,.k-play .k-fade{animation:k-fadeup var(--t) var(--ease) forwards;animation-delay:var(--d,0s)}
@keyframes k-fadeup{to{opacity:1;transform:none}}