/* ================================
   main.css — 메인(인트로) 전용
   폰트 + 레이아웃 + 애니메이션
================================ */
@import url('./font.css?v=2.5');

/* 폰트 */
@font-face {
  font-family: 'SaenggeoJincheon';
  src: url('../font/Saenggeo Jincheon.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* [수정] 안정적인 CDN을 사용하는 새로운 코드로 교체 */
/*@font-face {*/
/*  font-family: 'Paperology';*/
/*  font-weight: normal;*/
/*  font-style: normal;*/
/*  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Paperology.woff') format('woff');*/
/*}*/
/* 컬러 토큰 */
:root{
  --page-bg: #000;
  --card-bg: #E5F0F0;

  /* 글래스 버튼 */
  --btn-ink: #fff;
  --btn-border: rgba(255,255,255,.85);
  --btn-blur: 8px;
}

/* reset */
*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  background-color: var(--page-bg);
  display:flex; justify-content:center; align-items:center;
  min-height:100vh;
  -webkit-tap-highlight-color: transparent;
  font-family:"Paperlogy", Pretendard,Roboto,"Noto Sans KR","Segoe UI","Malgun Gothic","Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol",sans-serif;
}

/* 중앙 정렬 + 최대 1024px, 390×800 비율 */
.container{
  width:100%;
  height:100vh;
  max-width:1024px;
  aspect-ratio:390/800;
  margin:auto;
  background-color:var(--card-bg);
  border-radius:0;
  border:1px solid #fff;
  box-shadow: inset 0 0 10px rgba(255,255,255,.3);
  overflow:hidden;
  background:url('../images/main_BG.png') center/cover no-repeat;
  display:flex; justify-content:center; align-items:center;
  filter: saturate(0.98) contrast(0.98);
}

.content-wrapper{
  width:90%; height:90%;
  display:flex; flex-direction:column; align-items:center;
  padding-top:15%;
  /*position:relative;*/
}

/* 타이틀 */
.title-wrapper{ width:100%; max-width:350px; display:flex; justify-content:center; align-items:center; pointer-events:none; }
.title{ display:flex; flex-direction:column; align-items:center; gap:8px; margin:0; }
.title span{
  font-family:'SaenggeoJincheon',sans-serif;
  font-weight:400;
  font-size:clamp(40px,5vw,50px);
  letter-spacing:-.05em;
  color:#fff;
  text-shadow:0 1px 5px rgba(0,0,0,.2);
  opacity:0; transform:translateY(-14px) scale(.98);
  will-change:transform,opacity;
}

/* 메인 이미지 */
.image-container{
  position:absolute; bottom:0; left:50%;
  transform:translateX(-50%);
  width:min(354px,90%);
  opacity:0; transform: translate(-50%, 18px) scale(.98);
  will-change: transform, opacity;
}
.main-image{ width:100%; height:auto; user-select:none; -webkit-user-drag:none; }

/* 글래스 버튼 */
.start-button{
  position:absolute; bottom:20%; left:50%;
  transform:translateX(-50%) translateY(10px) scale(.96);
  width:100%; height:59px; color:var(--btn-ink);
  background: rgba(255,255,255,0.0);
  border:1px solid var(--btn-border);
  border-radius:999px; padding:16px 0; cursor:pointer;
  font-family: Paperlogy;
  font-size:clamp(16px,2vw,18px); font-weight:500;
  backdrop-filter: blur(var(--btn-blur)); -webkit-backdrop-filter: blur(var(--btn-blur));
  transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
  overflow:hidden; opacity:0; will-change:transform,opacity,box-shadow;
}
.start-button::before{
  content:""; position:absolute; inset:0;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.32) 38%, transparent 55%);
  transform: translateX(-125%); pointer-events:none;
}
.start-button:focus-visible{ outline:0; box-shadow:0 0 0 3px rgba(255,255,255,.9), 0 0 0 6px rgba(0,0,0,.25); }
.start-button:hover{ background-color: rgba(255,255,255,.35); transform:translateX(-50%) translateY(6px) scale(.985); }

/* 인트로 애니메이션 */
@keyframes title-drop { 0%{opacity:0;transform:translateY(-14px) scale(.98);} 65%{opacity:1;transform:translateY(2px) scale(1.02);} 100%{opacity:1;transform:translateY(0) scale(1);} }
@keyframes books-rise { 0%{opacity:0;transform:translate(-50%,18px) scale(.98);} 60%{opacity:1;transform:translate(-50%,0) scale(1.02);} 100%{opacity:1;transform:translate(-50%,0) scale(1);} }
@keyframes books-float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-4px);} }
@keyframes btn-pop   { 0%{opacity:0;transform:translate(-50%,10px) scale(.96);} 60%{opacity:1;transform:translate(-50%,0) scale(1.04);} 100%{opacity:1;transform:translate(-50%,0) scale(1);} }
@keyframes btn-breathe{ 0%,100%{ transform: translate(-50%,0) scale(1); box-shadow:0 10px 26px rgba(0,0,0,.12);} 50%{ transform: translate(-50%,-1px) scale(1.01); box-shadow:0 18px 36px rgba(0,0,0,.18);} }
@keyframes btn-shine { 0%{transform: translateX(-125%);} 100%{transform: translateX(125%);} }

.image-container .main-image{ animation: books-float 6s ease-in-out 1.0s infinite; will-change:transform; }
body.ready .title span:nth-child(1){ animation: title-drop .65s cubic-bezier(.2,.9,.2,1) .05s forwards; }
body.ready .title span:nth-child(2){ animation: title-drop .65s cubic-bezier(.2,.9,.2,1) .18s forwards; }
body.ready .image-container{ animation: books-rise .7s cubic-bezier(.2,.9,.2,1) .28s forwards; }
body.ready .image-container .main-image{ animation: books-float 6s ease-in-out 1.0s infinite; }
body.ready .start-button{
  animation: btn-pop .7s cubic-bezier(.2,.9,.2,1) .45s forwards,
  btn-breathe 5.2s ease-in-out 1.2s infinite;
}
body.ready .start-button::before{ animation: btn-shine 1.3s ease 1.1s both; }

/* 클릭 시 런치 + 리플 */
@keyframes btn-launch{ 0%{transform:translate(-50%,0) scale(1);} 35%{transform:translate(-50%,2px) scale(.965);} 100%{transform:translate(-50%,-2px) scale(1.09);} }
.start-button.launch{ animation: btn-launch .55s cubic-bezier(.2,.9,.2,1) forwards; box-shadow:0 18px 40px rgba(0,0,0,.22); background-color:rgba(255,255,255,.45); pointer-events:none; }
.start-button::after{
  content:""; position:absolute; left:50%; top:50%; width:12px; height:12px; border-radius:50%;
  background: rgba(255,255,255,.55);
  transform:translate(-50%,-50%) scale(0); opacity:0; pointer-events:none;
}
@keyframes ripple{ 0%{ transform:translate(-50%,-50%) scale(0); opacity:.55;} 100%{ transform:translate(-50%,-50%) scale(18); opacity:0;} }
.start-button.launch::after{ animation: ripple .55s ease-out forwards; }

/* 페이지 전환(와이프) */
.page-transition{
  position:fixed; inset:0; z-index:9999;
  background: radial-gradient(90% 120% at 50% 100%, #CFE6E0 0%, #E5F0F0 40%, #E5F0F0 100%);
  transform: scaleY(0); transform-origin: bottom; pointer-events:none;
}
@keyframes page-wipe{ 0%{transform: scaleY(0);} 100%{transform: scaleY(1);} }
body.leaving .page-transition,
body.nav-leaving .page-transition{ animation: page-wipe .6s cubic-bezier(.2,.9,.2,1) forwards; }

/* 모션 최소화 */
@media (prefers-reduced-motion: reduce){
  .title span, .image-container, .image-container .main-image, .start-button, .start-button::before, .start-button::after, .page-transition{
    animation:none !important; transition:none !important; transform:none !important; opacity:1 !important;
  }
}