@import url('https://fonts.googleapis.com/css2?family=BBH+Sans+Hegarty&display=swap');

body {
	background: #000;
}

.h-100vh {
	height: 100vh;
}

.w-100vw {
	width: 100vw;
}

#seq {
	opacity: 0;
}

#lead_str span {

/*	    transform: rotateX(25deg);*/
	    transform-origin: 0 50%;
	    opacity: 0;
}

.bg-video-container {
  position: relative;
  overflow: hidden;
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  z-index: -1;
  transform: translate(-50%, -50%);
  object-fit: cover;
}

.content {
  position: relative;
  z-index: 1;
}

#lead_str p {
	font-size: 2rem;
}

#txt_box {
	color: #fff;
	width: fit-content;
	height: fit-content;
	position: absolute;
	top: 20%;
	left: 0;
	right: 0;
	margin: auto;
}

#txt_box .h4-content {
	opacity: 0;
}

#txt_box #str1 {
	margin-top: 5rem;
}


#lead_str {
	font-family: "BBH Sans Hegarty", sans-serif;
    font-weight: 400;
    font-style: normal;

    perspective: 1000px;
    transform-style: preserve-3d;
    perspective-origin: 50% 50%;
}

.canvas-wrapper {
    position: relative;
/*    width: 100%;
    max-width: 1280px;
    margin: 0 auto;*/
}

#seq {
    display: block;
/*    width: 100%;
    height: auto;
    max-width: 1280px;*/
}

#str5, #str6, #str7, #str8, #str9, #str10 {
	opacity: 0;
	transform-origin: 50% 50% -150px;
}

.d_parent {
	perspective: 1000px;
	transform-style: preserve-3d;
	perspective-origin: 50% 50%;
}

#iphone_container .canvas-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

#iphone {
	position: absolute;
	top: 0;
	bottom: 0;
}

#info1, #info2, #info3 {
	z-index: 1;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: fit-content;
	margin-left: 45%;
}

#info_motion {
	margin-right: 40%;
}

.infobox h4, .infobox p {
	opacity: 0;
	will-change: transform;
}

.infobox p {
	font-size: 1.5rem;
	line-height: 3rem;
}

#last-container {
	position: fixed;
	left: 0;
	bottom: 0;
}


#info_notion h4, #info_notion p, #info_uniform h4, #info_uniform p {
	margin-right: 40%;
}


.loader {
  position: relative;
  margin: auto;
  box-sizing: border-box;
  background-clip: padding-box;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  border: 4px solid rgba(255, 255, 255, 0.1);
  -webkit-mask: linear-gradient(rgba(24, 24, 24, 0.2), rgba(24, 24, 24,0.9) 90%);
  transform-origin: 50% 60%;
  transform: perspective(200px) rotateX(66deg);
}

.loader:before, .loader:after {
  content: "";
  position: absolute;
  margin: -4px;
  box-sizing: inherit;
  width: inherit;
  height: inherit;
  border-radius: inherit;
  opacity: 0.05;
  border: inherit;
  border-color: transparent;
  animation: spinner-spin 1.2s cubic-bezier(0.6, 0.2, 0, 0.8) infinite, spinner-fade 1.2s linear infinite;
}

.loader:before {
  border-top-color: #66e6ff;
}

.loader:after {
  border-top-color: #f0db75;
  animation-delay: 0.3s;
}

@keyframes spinner-spin {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinner-fade {
  20% {
    opacity: 0.1;
  }

  40% {
    opacity: 1;
  }

  60% {
    opacity: 0.1;
  }
}

#loader_box {
	width: fit-content;
	height: fit-content;
	position: absolute;
	inset: 0;
	margin: auto;
}

#loader_box span {
	font-size: 2.5rem;
	position: absolute;
	width: fit-content;
	height: fit-content;
	inset: 0;
	margin: auto;
}

#notion_container {
	z-index: 2;
}

#last_container {
	z-index: 1;
	background-image: url(https://gods.tw/images/bg_stars.webp);
}

#audio_play {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}