/* The look of the slides of the College at Musabaqat VIII: KU at night.
   Author: Dr. Denys Dutykh (Mathematics Department, Khalifa University of Science and Technology, Abu Dhabi, UAE)
   A navy canvas with a faint squared paper, KU blue, a warm gold for what matters, white text;
   Linux Libertine for titles and sentences, Inter for numbers and labels. Every position is
   given on a canvas of 1920 by 1080 pixels, which reveal.js scales to the screen. */

@font-face { font-family: "Libertine"; src: url("../fonts/libertine-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; }
@font-face { font-family: "Libertine"; src: url("../fonts/libertine-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; }
@font-face { font-family: "Libertine"; src: url("../fonts/libertine-semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; }
@font-face { font-family: "Libertine"; src: url("../fonts/libertine-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-regular.woff2") format("woff2"); font-weight: 400; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-medium.woff2") format("woff2"); font-weight: 500; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-semibold.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: "Inter"; src: url("../fonts/inter-bold.woff2") format("woff2"); font-weight: 700; }
@font-face { font-family: "Inter Display"; src: url("../fonts/interdisplay-semibold.woff2") format("woff2"); font-weight: 600; }
@font-face { font-family: "Inter Display"; src: url("../fonts/interdisplay-bold.woff2") format("woff2"); font-weight: 700; }
@font-face { font-family: "Inter Display"; src: url("../fonts/interdisplay-extrabold.woff2") format("woff2"); font-weight: 800; }

:root {
  --navy: #0B1E3C;
  --navy-deep: #061225;
  --blue: #005696;
  --pale: #6699C2;
  --sky: #A6C8E6;
  --gold: #D9A93A;
  --white: #F4F6F8;
  --grey: #B9C4D1;
  --dim: #8291A6;
  --line: rgba(255, 255, 255, 0.065);
  --card: rgba(255, 255, 255, 0.05);
  --card-edge: rgba(255, 255, 255, 0.13);
}

html, body { background: var(--navy); }
.reveal { font-family: "Libertine", Georgia, serif; font-size: 36px; color: var(--white); line-height: 1.3; }
.reveal .slides section { text-align: left; padding: 0; box-sizing: border-box; height: 1080px; overflow: hidden; }
.reveal .slide-background {
  background-color: var(--navy);
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 60px 60px;
}
.reveal .progress { background: rgba(255, 255, 255, 0.08); height: 4px; }
.reveal .progress span { background: var(--gold); }
.reveal .slides section .fragment.fade-up { transform: translateY(26px); }
.reveal .slides section .fragment.fade-up.visible { transform: none; }

/* Boxes placed on the canvas */
.at { position: absolute; }
.kicker { font-family: "Inter", sans-serif; font-weight: 600; font-size: 24px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.h1 { font-family: "Libertine", serif; font-weight: 600; font-size: 92px; line-height: 1.04; }
.h2 { font-family: "Libertine", serif; font-weight: 600; font-size: 66px; line-height: 1.1; }
.lead { font-size: 38px; line-height: 1.35; color: var(--grey); }
.ui { font-family: "Inter", sans-serif; }
.src { font-family: "Inter", sans-serif; font-size: 20px; color: var(--dim); }
.foot { position: absolute; left: 80px; bottom: 40px; font-family: "Inter", sans-serif; font-size: 20px; color: var(--dim); letter-spacing: 0.02em; }

/* Photographs under a veil */
.photo { position: absolute; inset: 0; background-size: cover; background-position: center; transform-origin: 50% 50%; animation: drift 50s ease-in-out infinite alternate; }
@keyframes drift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.08) translate(-16px, -10px); } }
.veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 30, 60, 0.97) 0%, rgba(11, 30, 60, 0.92) 38%, rgba(11, 30, 60, 0.55) 72%, rgba(11, 30, 60, 0.35) 100%); }
.veil.bottom { background: linear-gradient(180deg, rgba(11, 30, 60, 0.45) 0%, rgba(11, 30, 60, 0.72) 45%, rgba(11, 30, 60, 0.97) 100%); }
.logo-ku { position: absolute; left: 80px; top: 62px; height: 76px; }
.logo-ccms { position: absolute; right: 80px; top: 52px; height: 96px; border-radius: 6px; }

/* Numbers */
.num { font-family: "Inter Display", "Inter", sans-serif; font-weight: 800; font-size: 140px; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.num .plus { color: var(--gold); font-weight: 700; font-size: 0.66em; vertical-align: 0.2em; margin-left: 0.03em; }

/* Tiles of the glance */
.tile { position: absolute; width: 340px; height: 320px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 20px; padding: 36px 30px; box-sizing: border-box; }
.tile .num { font-size: 100px; }
.tile .lab { font-family: "Inter", sans-serif; font-weight: 600; font-size: 30px; margin-top: 22px; }
.tile .sub { font-family: "Inter", sans-serif; font-size: 22px; color: var(--grey); margin-top: 8px; line-height: 1.3; }

/* Cards */
.card { position: absolute; background: var(--card); border: 1px solid var(--card-edge); border-radius: 20px; padding: 28px 34px; box-sizing: border-box; }
.card .t { font-family: "Libertine", serif; font-weight: 600; font-size: 42px; line-height: 1.1; }
.card .d { font-family: "Inter", sans-serif; font-size: 25px; color: var(--grey); line-height: 1.38; margin-top: 10px; }
.card .deg { font-family: "Inter", sans-serif; font-size: 23px; color: var(--sky); line-height: 1.38; margin-top: 12px; }
.card.gold { border-color: rgba(217, 169, 58, 0.6); background: rgba(217, 169, 58, 0.08); }
.badge { position: absolute; right: 30px; top: 24px; width: 230px; text-align: center; }
.badge .r { font-family: "Inter Display", sans-serif; font-weight: 800; font-size: 68px; color: var(--gold); line-height: 1; }
.badge .s { font-family: "Inter", sans-serif; font-size: 17px; color: var(--dim); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 8px; line-height: 1.3; }

/* The five priorities */
.icon { position: absolute; display: flex; align-items: center; justify-content: center; }
.icon img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45)); }
.mini { position: absolute; width: 480px; height: 160px; background: var(--card); border: 1px solid var(--card-edge); border-radius: 16px; padding: 24px 28px; box-sizing: border-box; }
.mini .t { font-family: "Inter", sans-serif; font-weight: 600; font-size: 27px; color: var(--white); }
.mini .d { font-family: "Inter", sans-serif; font-size: 22px; color: var(--grey); margin-top: 8px; line-height: 1.3; }
.dots { position: absolute; display: flex; gap: 14px; align-items: center; }
.dots i { display: block; width: 16px; height: 16px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.dots i.on { background: var(--gold); }

/* Pills of the partners */
.pill { display: inline-block; font-family: "Inter", sans-serif; font-weight: 600; font-size: 28px; padding: 14px 28px; border-radius: 999px; border: 2px solid var(--pale); color: var(--white); margin: 0 18px 20px 0; }

/* The orbit of the centres */
.orbit { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; }
.sat .b { position: absolute; width: 116px; height: 116px; margin: -58px 0 0 -58px; border-radius: 50%; background: var(--navy); border: 4px solid var(--pale); display: flex; align-items: center; justify-content: center; font-family: "Inter Display", sans-serif; font-weight: 800; font-size: 32px; color: var(--white); box-sizing: border-box; }
.sat .n { position: absolute; font-family: "Libertine", serif; font-weight: 600; font-size: 36px; line-height: 1.12; }
.sat .th { position: absolute; font-family: "Inter", sans-serif; font-size: 22px; color: var(--grey); line-height: 1.32; }
.sat.left .n, .sat.left .th { text-align: right; }
.hub { position: absolute; left: 960px; top: 600px; width: 250px; height: 250px; margin: -125px 0 0 -125px; border-radius: 50%; background: var(--blue); border: 6px solid var(--sky); display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; }
.hub .a { font-family: "Inter Display", sans-serif; font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -0.02em; }
.hub .c { font-family: "Inter", sans-serif; font-size: 20px; color: var(--sky); margin-top: 10px; letter-spacing: 0.04em; }

/* Research pictures */
.fig { position: absolute; width: 560px; height: 360px; background: #FBF9F4; border-radius: 16px; padding: 14px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; }
.fig img { max-width: 100%; max-height: 100%; display: block; border-radius: 6px; }
.cap { position: absolute; font-family: "Libertine", serif; font-size: 29px; line-height: 1.3; color: var(--white); }
.cap .src { display: block; margin-top: 10px; }

/* The close */
.quote { font-family: "Libertine", serif; font-style: italic; font-size: 62px; line-height: 1.25; }
.quote .gold { color: var(--gold); }
.qr { position: absolute; width: 300px; height: 300px; background: #FFFFFF; border-radius: 16px; padding: 14px; box-sizing: border-box; }
.qr img { width: 100%; height: 100%; display: block; }

/* Still pictures and the PDF: nothing moves */
html.still .photo, html.print-pdf .photo { animation: none; }
html.still *, html.still *::before, html.still *::after { transition: none !important; animation: none !important; }