/* 스플래시 포털 */

/* About SNOWN */
#about{position:relative;z-index:2;background:var(--ink);color:var(--paper)}
#abbar{position:fixed;top:0;left:0;height:6px;background:var(--neon);width:0;z-index:97;
  box-shadow:0 0 20px var(--neon),0 2px 12px rgba(198,255,61,.55);
  border-radius:0 4px 4px 0;transition:width .12s linear}
#abclose{position:fixed;bottom:clamp(18px,4vh,34px);right:clamp(16px,4vw,60px);z-index:98;
  font-family:var(--pre);font-weight:800;font-size:14px;letter-spacing:-.01em;cursor:none;
  background:var(--neon);color:#0B0F16;border:2px solid var(--neon);border-radius:100px;
  padding:12px 22px;opacity:0;pointer-events:none;transition:var(--t-base) var(--ease)}
#abclose.on{opacity:1;pointer-events:auto}
#abclose:hover{background:var(--paper);border-color:var(--paper);transform:translateY(-2px)}



/* 스플래시 : 겨울 스포츠 세계로 들어가는 포털 */
#pre{position:fixed;inset:0;z-index:90;background:var(--ink);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  transition:opacity 1s var(--ease),visibility 1s}
#pre::-webkit-scrollbar{width:9px}
#pre::-webkit-scrollbar-thumb{background:rgba(198,255,61,.45);border-radius:6px}
#pre{scrollbar-width:thin;scrollbar-color:rgba(198,255,61,.45) transparent}
#hero{position:relative;min-height:100vh;min-height:100dvh;display:grid;place-items:center;
  overflow:hidden;z-index:1}
#drift{overflow:visible}
#pre.gone{opacity:0;visibility:hidden;pointer-events:none}

/* 떠다니는 아이템 */
#drift{position:absolute;inset:0;pointer-events:none;opacity:0;will-change:opacity}
.dw{position:absolute;left:0;top:0;will-change:transform}
.di{transform:translate(-50%,-50%);min-width:54px;
  transition:filter .8s var(--ease);
  filter:grayscale(.9) brightness(.6) drop-shadow(0 14px 30px rgba(0,0,0,.6))}
.di img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
#pre.pulled .di{filter:grayscale(0) brightness(1)
  drop-shadow(0 14px 30px rgba(0,0,0,.6)) drop-shadow(0 0 26px rgba(198,255,61,.16))}
@media (max-width:640px){.di{min-width:44px}}

/* 중앙 포털 */
#portal{position:relative;z-index:3;display:flex;flex-direction:column;
  align-items:center;gap:clamp(20px,3.4vh,34px);
  transition:opacity .12s linear,transform .12s linear}
#ask{position:relative;cursor:none;background:none;border:0;padding:clamp(12px,2vh,22px) clamp(26px,4vw,52px);
  font-family:var(--en);font-weight:800;letter-spacing:-.045em;line-height:1;
  font-size:clamp(42px,8.6vw,116px);color:var(--neon);
  border-radius:200px;transition:transform .75s var(--ease),text-shadow .75s var(--ease);
  animation:breathe 4.2s ease-in-out infinite;will-change:transform}
@keyframes breathe{0%,100%{text-shadow:0 0 40px rgba(198,255,61,.28)}
  50%{text-shadow:0 0 70px rgba(198,255,61,.52)}}
#ask .ch{display:inline-block;transition:transform .55s var(--ease),opacity .45s var(--ease),
  width .55s var(--ease);will-change:transform,opacity}
#ask .ch.hide{opacity:0;transform:translateY(-.16em) scale(.6);width:0}
#ask .ch.show{opacity:1;transform:none}
#ask .ch.pre{opacity:0;transform:translateY(.2em) scale(.6);width:0}
#pre.pulled #ask{transform:scale(1.09);animation:none;
  text-shadow:0 0 60px rgba(198,255,61,.6),0 0 130px rgba(198,255,61,.3)}
#ask::after{content:'';position:absolute;inset:-2px;border-radius:200px;
  border:1.5px solid rgba(198,255,61,.5);opacity:0;pointer-events:none;transition:opacity .6s}
#pre.pulled #ask::after{opacity:1;animation:portalring 2.6s ease-out infinite}
@keyframes portalring{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.3);opacity:0}}

#sublead{font-family:var(--pre);font-weight:700;font-size:clamp(16px,1.9vw,22px);
  letter-spacing:-.01em;color:rgba(244,241,233,.62);text-align:center;
  transition:.7s var(--ease);min-height:1.4em}
#pre.pulled #sublead{color:rgba(244,241,233,.92)}

/* 눈 파티클 (호버 시) */
#presnow{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1.1s var(--ease)}
#pre.pulled #presnow{opacity:1}

/* 하단 진행/서브 진입 */


/* 줌 트랜지션 */
#pre.warp{animation:portalwarp .78s cubic-bezier(.65,0,.35,1) forwards}
@keyframes portalwarp{
  0%{transform:scale(1);filter:blur(0);opacity:1}
  55%{filter:blur(2px)}
  100%{transform:scale(7);filter:blur(16px);opacity:0}}
#pre.warp #drift{opacity:0;transition:opacity .35s}

/* About 스크롤 유도 */
#abscroll{position:absolute;left:50%;bottom:clamp(64px,11vh,96px);transform:translateX(-50%);
  opacity:0;
  display:flex;flex-direction:column;align-items:center;gap:10px;cursor:none;
  background:none;border:0;color:var(--paper);
  font-family:var(--pre);font-weight:600;font-size:13px;letter-spacing:.04em;
  transition:opacity .18s linear,transform .55s var(--ease)}
#abscroll.on{opacity:1}
#abscroll.hide{opacity:0!important;transform:translateX(-50%) translateY(14px);pointer-events:none}
#abscroll .lbl{animation:fadepulse 2.6s ease-in-out infinite}
#abscroll .arr{width:22px;height:34px;stroke:var(--neon);stroke-width:1.7;fill:none;
  stroke-linecap:round;stroke-linejoin:round;animation:arrdrop 1.9s ease-in-out infinite}
@keyframes arrdrop{0%,100%{transform:translateY(-4px);opacity:.45}
  50%{transform:translateY(5px);opacity:1}}
@keyframes fadepulse{0%,100%{opacity:.5}50%{opacity:.95}}
#abscroll:hover .arr{stroke:var(--paper)}


.ebtn{position:relative;display:inline-flex;align-items:center;gap:12px;cursor:none;
  font-family:var(--pre);letter-spacing:-.01em;border-radius:100px;transition:var(--t-base) var(--ease)}
.ebtn.main{padding:18px 34px;font-size:clamp(15px,1.7vw,19px);font-weight:800;
  background:var(--neon);color:#0B0F16;border:2.5px solid var(--neon);
  box-shadow:0 0 30px rgba(198,255,61,.4)}
.ebtn.main:hover{background:var(--paper);border-color:var(--paper);
  box-shadow:0 0 44px rgba(244,241,233,.55);transform:translateY(-2px)}
.ebtn .dot{width:11px;height:11px;border-radius:50%;background:currentColor;
  animation:blink 1.6s ease-in-out infinite}
#loader{position:fixed;inset:0;z-index:99;background:var(--ink);
  display:grid;place-items:center;
  transition:opacity .8s var(--ease),visibility .8s,transform .8s var(--ease)}
#loader .lnum{display:flex;align-items:baseline;gap:.06em;
  font-family:var(--en);font-weight:800;letter-spacing:-.045em;color:var(--paper);
  font-size:clamp(44px,8.5vw,112px);line-height:1}
#loader #loadnum{font-variant-numeric:tabular-nums}
#loader .u{font-size:.34em;opacity:.45;letter-spacing:-.01em;font-weight:700}
#loader.done{opacity:0;visibility:hidden;transform:scale(1.08)}
/* 로딩 중에는 히어로 숨김 */
#hero{opacity:0;transition:opacity 1.1s var(--ease)}
#pre.ready #hero{opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition-duration:.01ms!important}}