@font-face{
  font-family:"KOR";
  src:url("./fonts/PretendardVariable.woff2") format("woff2");
  font-weight:45 920;
  font-style:normal;
  font-display:swap;
}

:root{
  --font-kor:"KOR";
  --c1:#1972E6; /* Blue */
  --c2:#10703E; /* Green */
  --c3:#F15A22; /* Orange */
  --c4:#0A0E27; /* Navy */
}

*{ margin:0; padding:0; box-sizing:border-box; }

body{
  overflow:hidden;
  cursor:none;
  font-family: var(--font-kor), system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  background: var(--c4);
}

/* WebGL canvas */
#webGLApp{
  position:fixed;
  top:0; left:0;
  width:100%;
  height:100%;
  z-index:1;
}

/* ✅ 타이틀: 4색 그라디언트가 천천히 흐르도록 */
.heading{
  position:fixed;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:10;
  pointer-events:none;

  white-space:nowrap;
  text-align:center;
  font-size: clamp(2.2rem, 7.2vw, 7.6rem);
  font-weight: 750;
  letter-spacing: -0.03em;
  line-height: 1;

  /* 텍스트 그라디언트 */
  background: linear-gradient(
    90deg,
    var(--c1),
    var(--c2),
    var(--c3),
    #ffffff,
    var(--c1)
  );
  background-size: 320% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;

  /* 살짝 빛/가독성 */
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.35));

  /* ✅ 변화는 과하지 않게 “천천히” */
  animation: titleHue 18s ease-in-out infinite alternate;
}

@keyframes titleHue{
  0%   { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* Footer */
.footer{
  position:fixed;
  bottom:2rem;
  left:50%;
  transform:translateX(-50%);
  z-index:10;
  color: rgba(255,255,255,0.75);
  font-size: 0.95rem;
  font-weight:500;
  letter-spacing:0.08em;
  text-transform:uppercase;
  text-align:center;
  pointer-events:auto;
}

/* Custom Cursor */
.custom-cursor{
  position:fixed;
  width:40px;
  height:40px;
  border:2px solid rgba(255,255,255,0.9);
  border-radius:50%;
  pointer-events:none;
  z-index:1000;
  transform: translate(-50%, -50%);
  background: transparent;
  will-change: transform;
  transition: width 0.2s ease, height 0.2s ease, border-width 0.2s ease, opacity 0.2s ease;
}

.custom-cursor::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  width:8px;
  height:8px;
  background: rgba(255,255,255,0.9);
  border-radius:50%;
}