@charset "utf-8";
/* CSS Document */
.wrap {
	width: 100%;
	height: 100vh;
	margin: 0;
	position: relative;
	overflow: hidden;
}
.index {
	position: relative;
	
}
.logo {
	position:relative;
	z-index: 9;
}
.subject {
	color: #0d0e10;
	font-weight: bold;
	text-align: center;
	margin: 115px auto 35px auto;
	position:relative;
	z-index: 9;

}
.subject h1 { position: relative;}
.subject h1::after {
	content:'課堂互動輕鬆教-點、點、掃「一鍵顯示QR code」';
	font-size: 0.38em;/*16px/42px*/
	color: #777;
	display: block;
	margin-top: 8px;
	line-height: normal;
}
.year {
	color: #f1ba3c;
	font-size: 2.25em;/*36px*/
	font-style: italic;
	padding: 0 5px;
	
}
.adacemic {
	font-size: 1.125em;
}

/******選單周圍小元件動畫******/
.mainMenu {
  	position: relative;
	z-index: 9;
}

/* 圓形們 */
.mainMenu::before {
  content: '';
  position: absolute;
  top: -75px;
  left: calc(50% - 300px);
  width: 600px;
  height: 225px;
  background: url(../../images/deco-circle.png),url(../../images/deco-circle.png);
   background-size: 28px 28px, 21px 21px;
  background-repeat: no-repeat;
  background-position: bottom 10px left 90px, top 30px right 70px;
  animation-delay: .2s;
  animation: float1 3s ease-in-out infinite;
  pointer-events: none;
}

/* 方形 + 三角形 */
.mainMenu::after {
  content: '';
  position: absolute;
  bottom: -75px;
  left: calc(50% - 300px);
  width: 600px;
  height: 225px;
  display: block;
  background: url(../../images/deco-square.png),url(../../images/deco-triangle.png);
  background-size: 21px 21px, 21px 17px;
  background-repeat: no-repeat;
  background-position: bottom 30px left, top 60px right;
  animation-delay: .2s;
  animation: float2 4s ease-in-out infinite;
  pointer-events: none;
}

/* 三角形用 clip-path */
.mainMenu::after {
  /*clip-path: polygon(50% 0%, 0% 100%, 100% 100%);*/
}
@keyframes float1 {
  0%, 100% { 
	  opacity: .2;
	  transform: translateY(0); 
	}
  50% { 
	  opacity: .9;
	  transform: translateY(-8px); 
	}
}

@keyframes float2 {
  0%, 100% { 
	  opacity: .9;
	  transform: translateY(0); 
	}
  50% { 
	  opacity: .2;
	  transform: translateY(6px);
	}
}





/******主要角色物件動畫******/

.index_bg {
	position: fixed;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;

  /* 群組偏移：這頁要求「高度落差大 → 彈性小一點」 */
  --gR-y: clamp(-24px, -3vh, 12px); /* 右邊組 */
  --gR-x: 0px;

  --gL-y: clamp(-22px, -2.8vh, 10px); /* 左邊組 */
  --gL-x: 0px;

  --gT-y: clamp(-16px, -2vh, 8px); /* 上方組 */
  --gT-x: 0px;
	
}
.index_bg div {
	position: absolute;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  display: block;
}


/* =========================
   共用動畫系統
========================= */

/* 浮動（上下） */
@keyframes floatY{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(var(--float-y, -12px)); }
  100% { transform: translateY(0); }
}

/* 微旋轉 */
@keyframes rotateSoft{
  0%   { transform: rotate(var(--rot-start, -2deg)); }
  50%  { transform: rotate(var(--rot-mid, 2deg)); }
  100% { transform: rotate(var(--rot-start, -2deg)); }
}

/* 🌏 地球專用（旋轉＋漂浮複合） */
@keyframes floatRotate{
  0%   { transform: translateY(0) rotate(-2deg); }
  50%  { transform: translateY(-18px) rotate(2deg); }
  100% { transform: translateY(0) rotate(-2deg); }
}


/* 所有裝飾插圖的基礎 class */
.float{
  animation: floatY var(--float-speed, 6s) ease-in-out infinite;
  will-change: transform;
}

.rotate-soft{
  animation: rotateSoft var(--rot-speed, 8s) ease-in-out infinite;
  transform-origin:center;
}

/* =========================
   共用進場動畫系統
========================= */

@keyframes introFloat{
  0%{
    opacity:0;
    transform: translateY(30px) scale(.96);
  }
  60%{
    opacity:1;
    transform: translateY(-6px) scale(1.02);
  }
  100%{
    opacity:1;
    transform: translateY(0) scale(1);
  }
}

/* 左側進場（由左微滑入） */
@keyframes introLeft{
  0%{
    opacity:0;
    transform: translateX(-40px) scale(.96);
  }
  60%{
    opacity:1;
    transform: translateX(6px) scale(1.02);
  }
  100%{
    opacity:1;
    transform: translateX(0) scale(1);
  }
}

/* 右側進場（由右微滑入） */
@keyframes introRight{
  0%{
    opacity:0;
    transform: translateX(40px) scale(.96);
  }
  60%{
    opacity:1;
    transform: translateX(-6px) scale(1.02);
  }
  100%{
    opacity:1;
    transform: translateX(0) scale(1);
  }
}
.intro{
  animation-duration: .9s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(.22,.61,.36,1);
  opacity:0;
}
.intro-up   { animation-name:introFloat; }
.intro-left { animation-name:introLeft; }
.intro-right{ animation-name:introRight; }
.delay-1{ animation-delay:.1s; }
.delay-2{ animation-delay:.2s; }
.delay-3{ animation-delay:.3s; }
.delay-4{ animation-delay:.4s; }
.delay-5{ animation-delay:.5s; }
.delay-6{ animation-delay:.6s; }
.delay-7{ animation-delay:.7s; }
.delay-8{ animation-delay:.8s; }




.boy {
	background-image: url("../../images/boy.svg");
	width: clamp(151px, 19.42vw, 373px);
  	aspect-ratio: 233 / 383;
  	left: calc(9.17% + var(--gL-x));
  	top:  calc(clamp(85px, 16.67vmin, 115px) + var(--gL-y));
	z-index: 6;
	animation:introLeft .9s .1s forwards; opacity:0;
}


.earth{ 
  background:url("../../images/earth.svg") center / contain no-repeat;
  left: calc(-2.5% + var(--gL-x));
  top:  calc(clamp(340px, 66.67vmin, 460px) + var(--gL-y));

  width: clamp(285px, 36.58vw, 702px);
  aspect-ratio: 439 / 439;
	animation:introLeft 1s  .2s forwards; opacity:0; 
}






.pad {
	background-image: url("../../images/pad.svg");
	width: clamp(38px, 4.83vw, 93px);
  	aspect-ratio: 58 / 69;
  	left: calc(6.67% + var(--gL-x));
  	top:  calc(clamp(190px, 37.17vh, 256px) + var(--gL-y));
	z-index: 3;
	animation:introLeft .8s .3s forwards; opacity:0;
}


.notebook {
	background-image: url("../../images/notebook.svg");
	width: clamp(52px, 6.67vw, 128px);
  	aspect-ratio: 80 / 90;

  	left: calc(1.67% + var(--gL-x));
  	top:  calc(clamp(224px, 44vh, 304px) + var(--gL-y));
	z-index: 4;
	animation:introLeft .8s .4s forwards; opacity:0; 
}


/* ----------------------------
   右邊組：girl / sittingBoy / protractor
   px -> % (right) ; top -> clamp(px*0.85, vh, px*1.15) + 群組偏移
---------------------------- */
.girl {
	background-image: url("../../images/girl.svg");
	width: clamp(152px, 19.5vw, 374px);
  	aspect-ratio: 234 / 339;

 	right: calc(10.83% + var(--gR-x));
  	top:   calc(clamp(179px, 35.17vh, 243px) + var(--gR-y));
	z-index: 10;
	animation:introRight 1s .2s forwards; opacity:0;
}


.sittingBoy {
	background-image: url("../../images/sittingBoy.svg");
	width: clamp(162px, 20.75vw, 398px);
  	aspect-ratio: 249 / 155;

  	right: calc(-2.5% + var(--gR-x));
  	top:   calc(clamp(201px, 39.5vh, 273px) + var(--gR-y));
	z-index: 9;
	animation:introRight 1s .35s forwards; opacity:0;
}
.protractor {
	background-image: url("../../images/protractor.svg");
	width: clamp(50px, 6.42vw, 123px);
  	aspect-ratio: 77 / 84;
  	right: calc(3.92% + var(--gR-x));
  	top:   calc(clamp(405px, 79.5vh, 549px) + var(--gR-y));
	z-index: 7;
	animation:introRight .9s .5s forwards; opacity:0;
}



.magnetGirl {
	background-image: url("../../images/magnetGirl.svg");
	width: clamp(33px, 4.25vw, 82px);
  	aspect-ratio: 51 / 123;

  	right: calc(6.67% + var(--gT-x));
  	top:   calc(clamp(30px, 5.83vh, 40px) + var(--gT-y));
	z-index: 8;
	animation:introFloat .9s .3s forwards; opacity:0;
}


.planet {
	display: none;
}


.triangle {
	background-image: url("../../images/triangle.svg");
	width: clamp(103px, 13.25vw, 254px);
  	aspect-ratio: 159 / 86;

  	right: calc(19.75% + var(--gT-x));
  	top:   calc(clamp(80px, 15.67vh, 108px) + var(--gT-y));
	z-index: 7;
	animation:introFloat .9s .4s forwards; opacity:0;
}


.flask {
	background-image: url("../../images/flask.svg");
	width: clamp(34px, 4.33vw, 83px);
  	aspect-ratio: 52 / 107;

  	right: calc(18.92% + var(--gT-x));
  	top:   calc(clamp(9px, 1.67vh, 12px) + var(--gT-y));
	z-index: 7;
	animation:introFloat .9s .5s forwards; opacity:0;
}


.penHolder {
	background-image: url("../../images/penHolder.svg");
	width: clamp(66px, 8.5vw, 163px);
 	 aspect-ratio: 102 / 126;

  	right: calc(32.92% + var(--gT-x));
  	top:   calc(clamp(-12px, -1.67vh, -9px) + var(--gT-y));
	z-index: 7;
	animation:introFloat .9s .6s forwards; opacity:0; 
}


.bg-l {
	background-image: url("../../images/bg-inner-l.svg");
	width: clamp(418px, 53.58vw, 1029px);
  	aspect-ratio: 643 / 600;

  	left: -25%;
  	top:  clamp(-345px, -50vh, -255px);
	z-index: -1;
	animation:introFloat 1.2s 0s forwards; opacity:0;
}


.bg-r {
	background-image: url("../../images/bg-inner-r.svg");
	width: clamp(541px, 69.33vw, 1331px);
  	aspect-ratio: 832 / 776;

  	right: -25%;
  	bottom: clamp(-345px, -50vh, -255px);
	z-index: -1;
	animation:introFloat 1.2s .1s forwards; opacity:0;
}


.footer {
	width: 100%;
	color: #999;
	font-size: 0.9375em;
	line-height: 1.4em;
	text-align: center;
	padding: 40px 1em 10px 1em;
	position: fixed;
	bottom: 0;
	align-content: center;
	
}
.footer a, .footer a:link { color: #555;}
@media screen and (max-width: 1260px) {
	.boy {
  		top:  calc(clamp(150px, 33.33vmin, 250px) + var(--gL-y));
	}

}
@media screen and (max-width: 640px) {
	.boy {
  		top:  calc(clamp(225px, 50vmin, 375px) + var(--gL-y));
	}
	.earth{ 
	  top:  calc(clamp(340px, 75vmin, 562px) + var(--gL-y));
	}
	.girl {
		top:   calc(clamp(210px, 46.66vh, 350px) + var(--gR-y));
	}
}
@media screen and (max-width: 490px) {
	.boy {
  		top:  calc(clamp(300px, 66.66vmin, 500px) + var(--gL-y));
	}
	.earth{ 
		left: calc(-5.5% + var(--gL-x));
	  	top:  calc(clamp(375px, 108vmin, 625px) + var(--gL-y));
	}
	.girl {
		width: clamp(112.5px, 12.5vw, 225px);
		top:   calc(clamp(210px, 46.66vh, 350px) + var(--gR-y));
	}
}

/****************************************************RWD*****************************************************/


@media screen and (max-width: 1400px) {
	.mainMenu::after, .mainMenu::before {
		display: none;
	}
}
@media screen and (max-width: 1180px) {
	.index .footer span {
		display: block;
		visibility: hidden;
		height: 1px;
	}
}

@media screen and (max-width: 1010px) {
	
	.index_bg .pad { display: none;}
	.index_bg .notebook { display: none;}
	
	
}

@media screen and (max-width: 1000px) {
	.subject {
		width: 260px;
	}
	
}

@media screen and (max-width: 860px) {
	.index {
		/*height: 750px;*/
	}
	.index_bg div { height: auto;}
	.index_bg .triangle { display: none;}


	.subject {
		margin: 15px auto 300px auto;
	}
}

@media screen and (max-width: 780px) {
	
		
}


@media screen and (max-width: 680px) {
	
}

@media screen and (max-width: 500px) {
	

}

@media screen and (max-width: 490px) {
	.index_bg .flask, .index_bg .penHolder, .index_bg .magnetGirl {
		display: none;
	}
	.footer span {
		display: block;
		visibility: hidden;
		height: 1px;
	}
}

@media screen and (max-width: 430px) {
	
	
	
}


/*0226 新增開起選單按鈕*/
/* 1) 預設隱藏（桌機 > 1400px 不出現） */
.planet {
  display: none;
}

/* 2) <= 1400px 才啟用 CTA */
 @keyframes ctaFloat {
     0%, 100% { transform: translate(-50%, -50%) translateY(0); }
  	 50% { transform: translate(-50%, -50%) translateY(-6px); }
  }
@media (max-width: 1400px) {
  .planet {
    display: block;

    /* 讓它可點 + 在畫面上方 */
    pointer-events: auto;
    cursor: pointer;
    z-index: 60;

    /* 如果你原本 .index_bg > div 都是 absolute，這裡給定位 */
    position: absolute;

    /* 你可依畫面調整位置：先放中間偏下 */
    left: 50%;
    top: 440px;
    transform: translate(-50%, -50%);

    /* 讓 .paint 看起來像按鈕 */
    width: max-content;
    padding: 14px 36px;
    border-radius: 999px;
    background: #f1ba3c;
    /*box-shadow: 0 8px 20px rgba(0, 0, 0, .05);*/

    /* 文字（用偽元素塞字，不改 HTML） */
    color: transparent; /* 避免你原本 paint 背景圖干擾字 */
  }

  .planet::before {
    content: "開啟選單";
    color: #222;
    font-size: 18px;
    font-weight: 700;
  	letter-spacing: .02em;
  	display: inline-flex;
  	align-items: center;
  	gap: 18px;
	margin-right: 10px;
  }
	
	.planet::after {
	  content: "";
	  display: inline-block;
	  width: 18px;
	  height: 13px;
	  background: url("../../images/icon-arrow.png") no-repeat center;
	  background-size: contain;
	}

  /* 微微上下飄動 */
  .planet {
    animation: ctaFloat 6s cubic-bezier(.4,0,.2,1) infinite;
  will-change: transform;
  backface-visibility: hidden;
  }

 

  /* 選單打開時：按鈕變淡 + 不能點 */
  .planet.is-dim {
    opacity: .45;
    pointer-events: none;
    box-shadow: none;
  }
}