/*	
	css for shah.de (c) 2025 macHobbes
*/

/*  ToDo:
	infos
	fullscreen
	hover disabled on touch
	font Alternativen
	lower res pics for small screens
*/

* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
	}
	
/*  -----------------------------------------  classes

html:	light
body:	fade-p fade-v fade-i play zoom view 
#app:	pag.cls (xtra pics text)
#dsp:	l1 l2 l3 l4
  	
/*  -----------------------------------------  borders * /

body 	{ border: 2px dotted cyan }
#app	{ border: 1px dotted green }
#dsp	{ border: 1px dotted green }
main	{ border: 2px dotted yellow }
header	{ border-block: 1px dotted gray }
	
/*  -----------------------------------------  html */

:root {
  	--hd: 13lvh;
  	--ft: 13lvh;
  	--mn: 74lvh;
  	--wd: min( 100vw, var(--mn) );  
  	
  	--ht: var(--wd);
  	--vs: calc( (var(--mn) - var(--ht))/2 );
  	--ex: max( -10vw, calc( (var(--wd) - 100vw)/4 + 3vw) );
  	--wdx: calc( (var(--wd) - 2*var(--ex)) );
  	
  	--bd: #555;
	}
	
.anim #top {
	opacity: 0;
	transform: scale(0.01);
	}
.anim #txt {
	opacity: 0;
	transform: translate(100%,100%) scale(6.0);
	}
	
html {
	font-size: max(16px,1.9svh); 
	text-align: right;
	color: #aaa;
	background: #303030 url(rsc/bg.png) center;
	background-size: 100% 100%;
	}

/*  -----------------------------------------  light */
	
.light {
	color: #333;
	background: #a0a0a0 url(rsc/bgl.png) center;
	--bd: #aaa;
	}
.light .lh {
	color: #777 }
.light img {
	box-shadow: 0 0 2vh #444 }
	
/*  -----------------------------------------  body */
			
#app {
	width:  var(--wd);
	height: 100vw;
	margin: 0 auto;
	opacity: 1;
	transition: opacity 500ms 300ms;
	}
#app.hidden {
	opacity: 0;
	}

header, footer {
	padding:  3vh 2vw;
	margin-inline: var(--ex);
	display: flex;
	justify-content: space-between;
	}
header {
	height: var(--hd);
	align-items: end;
	border-bottom: 1px dotted var(--bd); 
	}
footer {
	height: var(--ft);
	align-items: start;
	border-top: 1px dotted var(--bd); 
	}		
main {
	height: var(--mn);
	border: 1px transparent; /* needed for consistent height, no idea why */
	transition: opacity 800ms;
	touch-action: none;
	}		
	
.nofrills header, .nofrills footer {
	border: none }
	
/*  -----------------------------------------  main parts */

#dsp {
	display: flex;
	gap: 3vmin; 
	transition: opacity 1500ms ease-in;
	container-type: size;
	}	
#dsp:is(.l3) {
	height: 35%;
	padding-right: 6%;
	align-items: center;
	justify-content: right;
	}	
#dsp:not(.l3) {
	height: var(--mn);
	padding: var(--vs) 0;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	}
#dsp:is(.l2) {
	margin-inline: var(--ex);
	padding: 0;
	gap: 6vmin;
	xflex-direction: column;
	}

#top {
	height: 26%;
	display: flex;
	align-items: flex-end;
	justify-content: right;
	opacity: 1;
	transform: scale(1.0);
	transition: transform 2000ms;
	}	
#txt, #top > :first-child { 
	margin-right: 12%;
	padding-right: 4vmin; 
	border-right: dotted 1px #888;
	padding-left: 15%;
	max-height: 68lvh;
	text-wrap: balance;
	opacity: 1;
	overflow-x: hidden;
	transform: scale(1.0);
	transition: transform 2000ms;
	}
.text #txt {
	margin-block: 3lvh;
	}
.xtra .overflow {
	mask-image: none;
	}

nav, menu {
	display: flex;
	align-items: start;
	margin-right: 5vmin;
	gap: min(4vw, 1.2rem);
	opacity: 0.75;
	}	

.text :is(#top, #dsp, #men),
.view :is(#top, #txt, #sec)	{ 
	display: none }

.fade-p #ttl,
.fade-v main,
.fade-i #dsp {
	opacity: 0;
	transition: 700ms ease-out; 
	}
		
/*  -----------------------------------------  images */
		
img {
	display: block;
	width: auto;	
	box-shadow: 0 0 2vh #000;
	border-radius: 3px;
	transition: height 800ms;
	}
	
.l3 img { max-width: 25%; max-height: 55%; }

.l1 img { height: 66% }
.l2 img { height: 32% }
.l4 img { height: 35% }

.zoom .l1 img { height: 78% }
.zoom .l2 img { height: 40% }
.zoom .l4 img { height: 44% }
	
.zoom header, .zoom footer { border: none }
	
@container (min-aspect-ratio: 49/63) {
	.l2 img { 
		height: min( 66%, calc( 0.36 * var(--wdx) )) }
	.zoom .l2 img { 
		height: min( 72%, calc( 0.42 * var(--wdx) )) }
	}

/*  -----------------------------------------  svg */

svg {
	height: 1.4rem;
	width: 1.4rem;
	text-align: left;
	margin-bottom: -0.5rem;
	box-shadow: none;
	}

/*  -----------------------------------------  text  ----- */

.overflow {
	overflow-y: scroll;
	mask-image: linear-gradient(to bottom, black 82%, transparent 100%) 
	}
.overflow div p:last-of-type {
	margin-bottom: 9lvh;
	} 
.lh {
	letter-spacing: .03em;
	color: #ddd;
	}
.li {
	padding-right: 2em; 
	}
	
/*  -----------------------------------------  opacity  ----- */

.xtra footer,	
.xtra nav, 
.nofrills nav,
.play nav,
.play #men	{ opacity: 0.0 ; pointer-events: none }		
.play .h2	{ opacity: 0.4 ; pointer-events: none }
.text .tdim	{ opacity: 0.2 ; pointer-events: none }

.xtra header { border: none }
		
/*  -----------------------------------------  fonts */

@font-face { font-family: 'head';  
	font-weight: normal;
	src: url('fnt/ubuntu/ubuntu-sans-200.ttf');
	font-feature-settings: 'smcp', 'cpsp', 'onum', 'pnum';
	}
@font-face { font-family: 'text'; 
	font-weight: normal;
	src: url('fnt/ubuntu/ubuntu-sans-300.ttf');
	font-feature-settings: 'onum', 'pnum';
	}
@font-face { font-family: 'sign'; 
	font-weight: normal;
	src: url('fnt/sign/Brisa Alternates.ttf');
	font-feature-settings: 'onum', 'pnum';
	}
@font-face { font-family: 'menu'; 
	font-weight: normal;
	src: url('fnt/ubuntu/ubuntu-sans-700.ttf');
	font-feature-settings: 'onum', 'pnum';
	}

body, p {
	font: 1rem/1.6rem 'text';
	font-variant-numeric: oldstyle-nums proportional-nums;
	}
	
.h2, .h3 {
	display: inline;
	font: 1.6rem/1.2rem 'head';
	font-variant-numeric: oldstyle-nums proportional-nums;
	font-variant: small-caps;
	letter-spacing: min(.3vw, 0.2rem);
	text-transform: lowercase;
	}
.h3 {
	font: 1.4rem/1.4rem 'head';
	letter-spacing: min(.2vw, 0.2rem);
	}
.h4 {
	font: 1.8rem/1.8rem 'sign';
	letter-spacing: min(1vw,0.25rem);
	filter: brightness(130%);
	background: inherit;
	color: inherit;
	padding-right: .2em;
	}	
	
.big {
	font-size: 2.4rem;
	letter-spacing: 0.5rem;
	}

menu {
	font: 1rem/1.1rem 'menu';
	font-variant-numeric: proportional-nums;
	display: none;
	}
.view menu {
	display: flex;
	}
	
em {
	font-style: normal;
	font-variant: small-caps;
	letter-spacing: .1em;
	margin: 0 .33em;
	}		
em:has(br) {
	margin-right: 0 
	}
	
hr {
	margin-block: .8rem }

s {
	text-decoration: none;
	width: 1.2em;
	text-align: center;
	opacity: 0.7;
	}	
		
/*  -----------------------------------------  extras */

a, img	{
	text-decoration: none;
	cursor: pointer;
	}	
	
button {
	background: none;
	color: inherit;
	cursor: pointer;
	}
	
header, .h3 {
	filter: blur(.8px);
	transition: all 500ms ease-in-out;
	}
/* 
nav a {
	opacity: 0.6;
	}
.hf a {	
	filter: blur(.8px);
	transition: all 500ms ease-in-out;
	}
.hf a:hover {	
	filter: blur(0px) brightness(160%);
	opacity: 1;
	}		
.hf a:active {	
	filter: blur(0px);
	opacity: 0.5;
	}		
 */
				
#txt a { /* anchors in info texts etc */
	padding-left: .66em;
	white-space: nowrap;
	}
	
/*  -----------------------------------------  menus */
	
ul {
	position: absolute;
	list-style: none;
	bottom: 11lvh;
	min-width: 8em;
	border-radius: 6px;
	padding: 5px;
	background-color: #222;
	color: #999;
	display: flex;
	flex-direction: column;
	opacity: 0;
	transition: all 600ms;
	pointer-events: none;
	}		
ul.show {
	opacity: 1;
	pointer-events: auto;
	}	
li {
	padding: 5px;
	border-radius: 4px;
	display: flex;
	justify-content: space-between;
	transition: all 200ms;
	cursor: pointer;
	}

li:hover {
	background: #999;
	color: #222;
	}
li:active {
	background: #ccc;
	}	


/*  -----------------------------------------  transitions */

	
.hide {
	opacity: 0;
	pointer-events: none;
	transition: 1000ms ease-out; 
	}

.dim, .infos .dimInfo {
	opacity: 0.25;
	pointer-events: none;
	transition: 400ms ease-out;
	}
	
.hint {
	display: block;
	padding-top: 1lh;
	margin-right: .2em;
	opacity: 1;
	transition: 1s ease-out;
	}
.show {
	opacity: 0.7; 
	}

/* ----- end of site.css ----- */