/**
 *
 * @package adv.ltd
 * @version v1.0, index.css - "Prasand J."
 * @copyright (c) 2024 ADV, Ltd.
 * @license Non-distributable / Proprietary
 *
 */

@charset 'utf-8';

/* PREMATURE:	an alphabetical list of items/tags defined before the structure.
		No classes nor IDs belong in this region, just tag definitions. */

:root {
    --grey-light:#CCC;
    --grey-medium:#777;
    --grey-dark:#222;

    --mask-height:33vw;
}

html, body { width:100%; height:100%; overflow:hidden; }
body { font-family:Roboto,Arial,sans-serif; font-size:12px; background-color:#000; margin:0; padding:0; display:table; }



/* STRUCTURE:	the consistent page items' size,positions,etc. ordered by their
 		appearance in the page source / structure.  */

main { width:100%; height:100%; overflow:hidden; display:flex; align-items:center; justify-content:center; }
main div { background:transparent url('images/logo_adv_badge.svg') center / auto 100%  no-repeat; width:var(--mask-height); height:var(--mask-height); position:relative; }
main div video { height:100%; margin-left:calc( -1 * ( ( ( ( var(--mask-height) / 9 ) * 16 ) - var(--mask-height) ) / 2 ) ); display:none; position:relative; z-index:0; }
main div video.advsociety { mask:url('images/logo_adv_badge_inverted.svg') center / auto 100% no-repeat;  }
main div video.advexpedition { mask:url('images/logo_adv_badge.svg') center / auto 100% no-repeat; }
main div video + video { position:absolute; top:0; left:0; z-index:1; }

footer { font-size:1em; width:100%; position:fixed; bottom:0; left:0; }
footer figure { margin-bottom:40px; display:flex; column-gap:1.3rem; align-items:center; justify-content:left; }
footer figure img { width:4rem; flex:1 0 4%; opacity:.3; }
footer figure figcaption { color:var(--grey-dark); padding:0; flex:1 1 96%; }
footer:hover figure img { opacity:1; }
footer:hover figcaption { color:var(--grey-medium); }

@media (orientation:portrait){

    :root {

        --mask-height:66vw;

    }

    main div { margin-bottom:5rem; }

	footer { font-size:1.8em; }
    footer figure { flex-direction:row-reverse; }
    footer figure img { width:6rem; }

}


/* DIFFERENCES:	the minor differences between pages, ordered by page structure.
		Items should be prefixed with their relative ID or class. */



/* STYLIZATION:	additional styles which do not affect the overall page's structure
		and / or style. Should be in alphabetical order. */

.hover object { opacity:0; z-index:-1; transition:z-index 3s step-end, opacity 3s linear; }