/* NOTE: Layout is optimized using JS-calculated --vh units.
   Any new full-screen or fixed-height components should use:
   height: calc(var(--vh) * 100) 
   instead of hardcoded vh or %.
*/

/* ===========================================
   Global Height Setup Using --vh Custom Prop
   ===========================================
   This sets the base page height using `--vh`, which is calculated in JS
   to match the *visible* mobile height (fixes Chrome/Safari address bar bugs).
   Without this, elements using 100vh might be too tall or misaligned.
*/

html, body {
  height: calc(var(--vh, 1vh) * 100);
}

#whiteout {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150px;
  pointer-events: none;
  z-index: 1; /* Make sure it overlays UI elements */
  background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1));
}

#playPauseButton {
    position: absolute;
    bottom: 11px;
    z-index: 500;
    left: calc(15vw - 30px);
    border: 0;
    background-color: transparent;
}

body,
#narrator,
#content 
{
	margin:0;
	font-family: sans-serif;
}

#bg,
#logo,
#content,
#narrator,
#countdown 	
{
	position:absolute;
	opacity: 0;
	transition: opacity 0.5s ease, transform 0.5s ease;
}

#content,
#narrator 
{	
	position:absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, calc(-50% + 35px)) scale(90%);
}

#mux 
{
	opacity: 1;
	transition: opacity 0.5s ease;
} 

#playButton 
{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(.5);
	z-index: 10;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.5s ease;
}



#content 
{
	z-index: 50;
  	transition: opacity 0.5s ease, transform 0.5s ease;;
}

/* graceful slide transitions */
#content.fade-out {
	opacity: 0 !important;
}

#content img {
  width: 100%;
  max-width: 640px;
  height: auto;
  display: block;
  margin: 1vh auto;
  object-fit: contain; /* Optional for extra safety */
}

#content ul {
	list-style: disc;
	padding-left: 1.5em;
	opacity: 1;
}

#content li.hidden {
	opacity: 0;
	transform: translateX(-12px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}

#content li.show {
	opacity: 1;
	transform: translateX(0);
}



#narrator {
	z-index: 55;
	background-image: url('assets/pause.png');
	/** change pause.png scale here **/
	background-size: auto 40%; /* Stretch to 100% of height */
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 1s ease, transform 0.5s ease;
	opacity: 0;
}

#bg 
{
	position: fixed;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    z-index: 0;
		transition: opacity 1s ease, transform 1s ease;
}

#bg.fade-out {
  opacity: 0;
}

#bg.fade-in {
  opacity: 1;
}

/* Blackout overlay uses --vh for true screen coverage,
   subtracting padding/margin to account for insets on small devices.
*/



#logo 
{
    top: 12px;
    left: 12px;
    position: absolute;
    transition: opacity .5s;
    z-index: 30;
	transition: opacity 0.5s ease, top 0.5s ease, left 0.5s ease ;
}

#logo img 
{
    height: 20px;
	transition: height 0.5s ease ;
}



/***** countdown *****/

#countdown 
{
  pointer-events: none;
  top: 12px;
  right: 15px;
  position: absolute;
  color: #999;
  font-size: 2rem;
  font-weight: 600;
  font-family: sans-serif;
  transition: opacity 0.5s ease;
  z-index: 40;
  transition: opacity 0.5s ease, top 0.5s ease, right 0.5s ease, font-size 0.5 ease ;
}

#countdown.show {
  opacity: 1;
}

#countdown.fade-out {
  opacity: 0;
}

/***** text *****/

#text 
{
    position: absolute;
    text-align: center;
    width: calc(100vw - 36px);
    height: auto;
    left: 18px;
    bottom: 32px;
    font-size: 1.3rem;
    font-family: sans-serif;
    z-index: 75;
}

.hide {
	display:none;
}



/****** chapters ******/

#chapterNav {
	position: absolute;
	height: 8px;
	width: 70vw;
	left: 15vw;
	bottom: 16px;
	background-color: rgba(0, 122, 255, 0.13);
	z-index: 800;
}

#chapterNav2 {
	position: absolute;
	height: 100%;
	width: 0%;
	background-color: rgba(0, 122, 255, 0.17);
	pointer-events: none;
	z-index: 799;
  transition: width .5s ease;
}

.chapter-dot {
  position: absolute;
  bottom: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #999;
  transform: translateX(-50%) translateY(2px);
}

.chapter-dot:hover {
  background-color: #3fa9f5;
  cursor: pointer;
}

.chapter-dot.active {
  background-color: black;
}

	.chapter-dot.red {
	  background-color: red !important;
	}
	
	.chapter-dot.green {
	  background-color: green !important;
	}
	
	.review {
	  background-color: red !important;
	}

#chapterLabel {
  text-align: center;
  font-size: 13px;
  color: black;
  transition: color 0.2s ease;
  height:16px;
}

/***** charts *****/

/* =============================
   Proportional Element Sizing
   =============================
   .chart-container uses vw/ratio-based width and aspect-ratio
   to ensure responsive scaling in all layouts. This ensures
   consistent behavior for charts, collages, or centered visuals
   regardless of screen size.
*/

.chart-container {
  width: 45vw;
  max-width: 100%;
  aspect-ratio: 2 / 1;
  position: relative;
}

.chart-container canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* Whiteout and Blackout overlays use --vh for true screen coverage,
   subtracting padding/margin to account for insets on small devices.
*/

#blackout {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: calc(var(--vh) * 100 - 24px);
  background: rgba(0,0,0,0.3);
  color: white;
  font-size: 1.5rem;
  font-family: sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

#blackout.visible {
  opacity: 1;
}

#bg.whiteout {
  opacity: 0.3;
}

.visible {
  opacity: 1 !important;
}



body.solo #narrator 	{	opacity: 1;	transform: translate(-50%, -50%) scale(150%);	}
body.solo #content 	{	opacity: 0;	transform: translate(-50%, -50%) scale(50%);	}

body.split #narrator 	{	opacity: 1;	transform: translate(-97%, -50%) scale(80%);	}
body.split #content 	{	opacity: 1;	transform: translate(-3%, -50%) scale(90%);		}

body.pitch #narrator 	{	opacity: 1;	transform: translate(-120%, -50%) scale(50%);	}
body.pitch #content 	{	opacity: 1;	transform: translate(-23%, -50%) scale(100%);	}

body.pip #narrator 	{	opacity: 1;	transform: translate(-130%, -50%) scale(35%);	}
body.pip #content 	{	opacity: 1;	transform: translate(-33%, -50%) scale(100%);	}

body.audio #narrator 	{	opacity: 0; 	transform: translate(-130%, -50%) scale(35%);	}
body.audio #content 	{	opacity: 1;	transform: translate(-50%,-50%) scale(150%);	}

@media (max-width: 600px) 
{
	#logo 
	{
	    left: 10px;
	}

	#countdown 
	{
	    top: 21px;
	    right: 15px;
	}

}


/* vh responsive blocks for html content */

/* Centered content blocks (e.g. slides, charts, videos)
   are sized to max-width 640px and centered with margins,
   using viewport units to preserve consistent rhythm across devices.
*/

/* === WIP Responsive Slide Content === */
#content {
  max-width: 100%;
  padding: 2vw;
  box-sizing: border-box;
}

#content canvas,
#content iframe {
  width: 100%;
  max-width: 640px;
  aspect-ratio: 16 / 9;
  display: block;
  margin: 1vh auto;
}

/* Bullet Templates */
.bullet-block {
  margin: 2vh auto;
  text-align: left;
}

.bullet-block h2 {
  font-size: 2.2vw;
  margin-bottom: 1vh;
}

.bullet-block ul {
  padding-left: 1.5em;
}

.bullet-block li {
  font-size: 1.4vw;
  line-height: 1.6;
  margin-bottom: 0.5vh;
}

/* Forms */
#content form {
  max-width: 480px;
  margin: 2vh auto;
  font-size: 1.2vw;
}

#content input,
#content textarea,
#content select,
#content button {
    width: 100%;
    height: 100%;
    padding: 1vh 0;
    margin: 2vh 0;
    box-sizing: border-box;
    font-size: 2vh;
}

#contact-1 h2, #contact-1 p span {
	font-size: 3vh;
}

#contact-1 p {
	font-size: 2vh;
}

#contact-1 input, #contact-1 textarea {
	font-family: sans-serif; 
	padding: 1vh;
  margin: 1vh 0;
}

#contact-1 button {
	width: auto;
	padding: 1vh;
	margin: 1vh 0;
	font-family: sans-serif;
}

/* image collage */
.collage-container {
  width: 30vw;
  height: 50vw;
  margin: 2vh auto;
  position: relative;
  box-sizing: border-box;
  pointer-events: none;
}

.collage-img {
  position: absolute;
  max-width: 100%;
  opacity: 0;
  transition: transform 1s ease, opacity 1s ease;
  aspect-ratio: auto !important;
  width: 40% !important;
  height: auto !important;
}

.collage-img.reveal {
  opacity: 1;
}


.displayNone	{	display: none !important;		}

.whitebg 	{	background-color: white !important;	} 



/******** Timeline dots ********/

.timeline-wrapper {
  position: relative;
  width: 47vw;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  background-image: url('../assets/oxygen.png');
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

form h2 {
  font-size: 2rem; /* 3vw; */
}

.quiz-choices {
	/*
  display: flex;
	*/
  justify-content: space-around;
  gap: 1rem;
  font-size: 1.2rem;
	margin-bottom: 1rem !important;
}

.quiz-choices input {
	margin: 0 !important;
}

.quiz-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 1.3rem; /* 2.5vw ; */
  margin-bottom: 0.5vh;
  cursor: pointer;
}

.quiz-label input[type="radio"] {
  height: 1.2em;
  border-radius: 50%;
  border: 2px solid #999;
  position: relative;
  display: inline-block;
  background-color: white;
}

.quiz-label input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 25%;
  left: 25%;
  width: 50%;
  height: 50%;
  border-radius: 50%;
  background-color: black;
}

form button {
	font-size: 2vw !important;
	border-radius: 1rem;
	border: 0 solid;
	background-color: cornflowerblue;
	color: white;
}

#timeline {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  transition: all 0.8s ease-in-out;
}

.dot-group {
  position: absolute;
  top: 47%;
  display: flex;
  gap: .6vw;
  transition: all 0.8s ease-in-out;
}

.dot {
  width: 1vw;
  aspect-ratio: 1 / 1;
  background-color: yellow;
  transition: all 0.8s ease-in-out;
}

/* Default: square */
.stage-1 .dot, .stage-2 .dot, .stage-3 .dot {
  clip-path: inset(0);
  transform: rotate(0deg);
}

/* Stage 4: morph to hexagon */
.stage-4 .dot {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  border-radius: 0;
}

/* Stage-based horizontal positioning: divide by 2 (becuase content is half the screen width) */
.stage-1 .dot-group { left: 7vw; }
.stage-2 .dot-group { left: 18vw; }
.stage-3 .dot-group { left: 30vw; }
.stage-4 .dot-group { left: 38vw; } 

/* Reset all */
.dot {
  transform: translateY(0);
}

/* Dancing states */
.stage-2 .first,
.stage-4 .first,
.stage-1 .second,
.stage-3 .second,
.stage-2 .third,
.stage-4 .third,
.stage-1 .fourth,
.stage-3 .fourth {
  transform: translateY(1.2vh);
}

.timeline-controls {
  position: absolute;
  bottom: 10px;
  left: 50%; transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.timeline-controls button {
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid gray;
  font-size: 1vw !important;
  margin: 0 !important; 
  padding: 0.5vw 1vw !important;
}

.timeline-controls button.active {
  background-color: black;
  color: white;
}

/* chart-oxygen.html */

#chart-container {
	width: 45vw;
	/*
  max-width: 800px;
  */
	margin: auto;
  padding: 1rem;
}

#chart-container canvas {
	
  width: 100% !important;
	
	aspect-ratio: 2 / 1;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#chart-container h3 {
	text-align: center;
  font-size: 1.3vw;
	text-align: center;
	font-weight: 400;
}