/* ================================
   ------------------------
   ---------------------
   ------------------
	 ---------------

   common.css

            ---------------
         ------------------
      ---------------------
   ------------------------
================================ */

/* =====================
========================
========================

	=Reset

	normalize.css v8.0.1

========================
========================
===================== */

html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button;appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* =====================
========================
========================

	=Variables

========================
========================
===================== */

/* ---------------------

	=Basic vars

--------------------- */



/* ---------------------

	=Color vars

--------------------- */
/* Colors */
:root {

	/* Official Brand Colors */
	--black:           #16161D;
	--blue-deep:       #000C36;
	--blue-broadridge: #001F5A;
	--blue-rich:       #082485;
	--blue-true:       #0F3DB5;
	--blue-vibrant:    #2662FC;
	--blue-fresh:      #6CA5FE;
	--cyan:            #00C2FF;
	--blue-open:       #BAD1F5;
	--blue-clear:      #E7F1FC;
	--grey-neutral:    #F9F9F9;
	--white:           #FFFFFF;

	/* Unofficial */
	--bluedark:        #062366;
	--bluebrightlight: #0466c8;
	--greylight:       #EBEBEB;

}

/* Dimensions */
:root {
	--ad-w: 970px;
	--ad-h: 250px;
}


/* =====================
========================
========================

	Basic =Elements

========================
========================
===================== */

/* ---------------------

	=Basics

--------------------- */
*:before, *:after,
* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html,
body {
	height: 100%;
	word-wrap: break-word;
	text-rendering: optimizeSpeed;
}

html {

	margin: 0;
	overflow: hidden;

	/* Enable fast-tap for iOS */
	-ms-touch-action: manipulation;
	touch-action:     manipulation;

}

/* =body */
body {
	background-color: transparent;
	font-size: 16px;
}

/* body, */
svg text {
	/* font-family: 'Aptos Web', sans-serif; */
	font-family: sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ---------------------

	=Images

--------------------- */
svg, img {
	max-width: 100%;
	height: auto;
}

/* ---------------------

	=Iframes
	=Embeds
	=Video
	=Canvas

--------------------- */
iframe,
video,
audio,
canvas,
embed,
object {
	max-width: 100%;
}

/* ---------------------

	=Line Breaks
	=hr

--------------------- */
hr {
	border-style: none;
	border-top-width: .3rem;
	border-top-style: solid;
	border-top-color: var(--black,  black);
	height: 1px;
}

/* ---------------------

	=Hilites / =Marks

--------------------- */
mark {
	background-color: var(--bluebrightlight);
	color: var(--white);
	padding: .2rem .6rem;
}

/* ---------------------

	=Blockquotes
	=Quotes
	=Figures
	=Small
	=Captions
	=Superscript
	=Citations
	=Exponents

--------------------- */
blockquote {
	margin: 0;
}

figure {
	max-width: 100%;
	margin: 0;
}

figcaption,
small {
	font-size: .7rem;
}

sup {
	font-size: .7rem;
}

/* ---------------------

	=Tables

--------------------- */
/* table {

} */

/* Fix Chrome bug */
table img { max-width: none; }


/* ================================

	# Accessibility

	@keywords: a11y

================================ */

/* ------------------------------------------------
 * Disable animations if the visitor...
 * prefers-reduced-motion
 *
 * Note: "Reduced" motion doesn't necessarily call for _no_ motion, so this CSS is only a bare minimum starting point: https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
 * ------------------------------------------------ */

@media screen and
	(prefers-reduced-motion: reduce),
	(update: slow) {
	* {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
	}
}


/* ------------------------------------------------
 * .focus-visible / :focus-visible
 *
 * Polyfill:
 * @link npmjs.com/package/focus-visible
 * ------------------------------------------------ */

:focus-visible {
	outline: var(--border-w, 2px) solid var(--black, #000000);
	outline-color: var(--btn-color-wire, #000000);
	outline-offset: max(var(--border-w, 2px), 2px);
	transition-duration: 0s !important;
}

[tabindex="-1"]:focus-visible {
	outline-offset: calc(var(--border-w, 2px) * -1);
}


/* ------------------------------------------------
 * Screen Reader Text
 * ------------------------------------------------ */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}


/* ------------------------------------------------
 * Skip links
 * for keyboard navigation & switch navigation
 * ------------------------------------------------ */

body .skip-link:hover,
body .skip-link {
	background-color: var(--black);
	color: var(--white);
	outline-color: var(--black);
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
	font-family: var(--font-system);
}

/*
 * No need for focus-visible since these are visually hidden by default
 * http://rachievee.com/applications-screen-reader-text-class/
 * https://make.wordpress.org/accessibility/handbook/markup/the-css-class-screen-reader-text/
 */
.skip-link:focus {
	clip: auto !important;
	clip-path: none;
	display: block;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* =====================
========================
========================

	=Layout / =Structure

========================
========================
===================== */

/* =====================

	=Frame
	=Container
	=Wrapper
	=Main

===================== */

main {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	justify-content: center;
	align-items: center;
}

main[data-orientation="portrait"] {
	flex-direction: row;
	justify-content: center;
}

.frame {
	position: relative;
	overflow: hidden;
	width:  var(--ad-w);
	height: var(--ad-h);
	margin: auto;

	/* @match framebghue */
	background: var(--blue-rich);
	background: linear-gradient(30deg, #082485 0%, #001F5A 100%);

	color: var(--white, white);
	font-family: Arial, sans-serif;
}

.frame--debug-ref {
	display: none;
	margin: 0;
}

.frame--main {
	margin: 0;
}

.frame--main:focus-within .btn {
	outline: 1px solid currentColor;
	outline-offset: 1px;
}

/* ---------------------

	=REF
	=VIDEO
	=IMG

--------------------- */
.video-ref,
.ref {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.ref {
	visibility: hidden !important;
}

/* =====================

	=Background =Layers
	=BG

===================== */
.bg {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background-color: var(--blue-rich);
}

/* =====================

	=FACETS

===================== */
.facets {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	overflow: hidden;
}

.facets--static {
	opacity: 1;
}

.facet {
	transform-origin: center;
	filter: drop-shadow(0 0 20px rgba(0,0,0,0.3));
	filter: drop-shadow(0 0 20px rgba(0,0,0,0.09));
	filter: drop-shadow(0 0 20px rgba(0,0,0,0.15));
}

.facets img,
.facets svg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	overflow: hidden;
}

.facet--a {
	transform-origin: center;
}

/* =====================

	=TITLES

===================== */
.title {
	position: absolute;
	/* opacity: 0; we don't need top-level opacity: 0, set on paths (letters) because titles are revealed letter-by-letter */
}

html.top-to-bottom-mode .title--b1 {
	display: none !important;
}

.title svg {
	position: relative;
}

.title path {
	/* @match letterxletter */
	opacity: 0;
}

.title--b1,
.title--a1 {
	color: var(--cyan, #00C2FF);
}

.title--b2,
.title--a2 {
	color: var(--white, white);
}

.title--c {
	color: var(--cyan, #00C2FF);
	will-change: transform;
}

.title--c path {
	opacity: 1;
}


/* =====================

	=CONNECTORS

===================== */
.connector {
	position: absolute;
}

.connector svg {
	position: relative;
}

.connector path {
	opacity: 0;
}

/* =====================

	=DESCRIPTION

===================== */
.desc {
	position: absolute;
	opacity: 0;
	z-index: 3;
	will-change: transform;
}

/* =====================

	=CTA =BTN =BUTTON

===================== */
.btn {
	position: absolute;
	z-index: 3;
	opacity: 0;
	will-change: transform;
}

.btn svg {
	margin-bottom: -4px; /* negative marg-b to counteract img bug */
}

/* =====================

	=Blanket

===================== */
.blanket {

	position: absolute;
	width:  100%;
	height: 100%;
	left:   0;
	right:  0;
	top:    0;
	bottom: 0;

	z-index: 9960;
	/* visibility: hidden; */

	opacity: 0;

	/* @match framebghue */
	background: var(--blue-rich);
	background: linear-gradient(30deg, #082485 0%, #001F5A 100%);

}

/* =====================

	=Link

===================== */
.link {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
}

/* =====================

	=Logo

===================== */
.logo {
	position: absolute;
	left: 0;
	top: 0;
	width: 163px;
	z-index: 9980;
}

.logo img {
	width: 100%;
	margin-bottom: -4px; /* negative marg-b to counteract img bug */
}