/* ============================================================
   slecs.net — effects.css
   richardmattka-tier WebGL + card 3D tilt + magnetic glow.
   site CI 유지: bg #0a0a0a / accent #ff5b1f.
   ============================================================ */

/* S-Core Dream — 9 weights (전역 폰트, hedvion + profile.werebridge 와 통일) */
@font-face { font-family: 'S-Core Dream'; font-weight: 100; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-1Thin.woff') format('woff'); }
@font-face { font-family: 'S-Core Dream'; font-weight: 200; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-2ExtraLight.woff') format('woff'); }
@font-face { font-family: 'S-Core Dream'; font-weight: 300; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff'); }
@font-face { font-family: 'S-Core Dream'; font-weight: 400; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff'); }
@font-face { font-family: 'S-Core Dream'; font-weight: 500; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff'); }
@font-face { font-family: 'S-Core Dream'; font-weight: 600; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-6Bold.woff') format('woff'); }
@font-face { font-family: 'S-Core Dream'; font-weight: 700; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff'); }
@font-face { font-family: 'S-Core Dream'; font-weight: 800; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-8Heavy.woff') format('woff'); }
@font-face { font-family: 'S-Core Dream'; font-weight: 900; font-display: swap; src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff'); }

/* 전역 폰트 override — 기존 Pretendard 우선 → S-Core Dream */
html body {
  font-family: 'S-Core Dream', 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}

/* ============================================================
   Section-level canvases — Experience / Stack / Work
   ============================================================ */
#experience, #stack, #work {
  position: relative;
  overflow: hidden;
}
.section-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.65;
}
#experience > .container,
#stack > .container,
#work > .container {
  position: relative;
  z-index: 1;
}

/* Hero WebGL canvas */
.hero { position: relative; overflow: hidden; isolation: isolate; }
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.95;
}
.hero > .container,
.hero > div:not(.hero-canvas):not(.orb) { position: relative; z-index: 2; }

/* mega title sweep — 영문 워드 살짝 광택 그라데이션 */
.hero h1 { position: relative; z-index: 2; }
.hero h1 .accent {
  background: linear-gradient(135deg, #ff7a3a 0%, #ff5b1f 45%, #ff8a5a 80%, #ff5b1f 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  animation: slecs-accent-shimmer 6s linear infinite;
}
@keyframes slecs-accent-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* About — 우측 meta-card 옆에 작은 토러스 캔버스 */
#about { position: relative; }
.about-canvas {
  position: absolute;
  right: -40px; top: 40%;
  width: 360px; height: 360px;
  z-index: 0;
  pointer-events: none;
  opacity: 0.65;
  transform: translateY(-50%);
}
@media (max-width: 900px) { .about-canvas { display: none; } }
#about .container { position: relative; z-index: 1; }

/* Contact — 별자리 constellation */
#contact, .contact-block { position: relative; overflow: hidden; isolation: isolate; }
.contact-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.7;
}
#contact .container, .contact-block .container,
#contact > *:not(.contact-canvas), .contact-block > *:not(.contact-canvas) {
  position: relative; z-index: 1;
}

/* ============================================================
   Card 3D tilt + radial glow tracking (project / chip / tl-item / meta-card)
   ============================================================ */
.project, .tl-item, .meta-card {
  --glow-x: 50%;
  --glow-y: 50%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform .25s ease, box-shadow .3s ease, background .25s ease;
  will-change: transform;
}

.project::before, .tl-item::before, .meta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle 280px at var(--glow-x) var(--glow-y),
    rgba(255, 91, 31, 0.13),
    rgba(255, 122, 58, 0.05) 40%,
    transparent 65%);
  opacity: 0;
  transition: opacity .35s ease;
  pointer-events: none;
  z-index: 0;
}
.project > *, .tl-item > *, .meta-card > * { position: relative; z-index: 1; }
.project:hover::before, .tl-item:hover::before, .meta-card:hover::before { opacity: 1; }

/* tl-item — 좌측 period 컬럼 강조 라인 */
.tl-item {
  padding-left: 14px;
  margin-left: -14px;
  border-radius: 12px;
}
.tl-item::after {
  content: '';
  position: absolute;
  left: 0; top: 36px; bottom: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--accent), transparent 80%);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .5s cubic-bezier(.2,.65,.3,1);
  pointer-events: none;
}
.tl-item:hover::after { transform: scaleY(1); }
.tl-item:first-child { padding-top: 14px; }

/* Chips — magnetic lift + 코퍼 글로우 */
.chip {
  transition: border-color .2s, color .2s, transform .2s, box-shadow .3s;
}
.chip:hover {
  box-shadow: 0 8px 24px rgba(255, 91, 31, 0.30),
              0 0 0 1px rgba(255, 91, 31, 0.4);
  transform: translateY(-3px) scale(1.03);
}

/* Buttons — 강화 */
.btn:hover {
  box-shadow: 0 10px 28px rgba(255, 91, 31, 0.25);
}
.btn.primary:hover {
  box-shadow: 0 12px 32px rgba(255, 91, 31, 0.45);
}

/* reveal on scroll */
.fx-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.65,.3,1);
}
.fx-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* reduced motion guard */
@media (prefers-reduced-motion: reduce) {
  .hero-canvas, .about-canvas, .contact-canvas { display: none !important; }
  .tilt-card { transform: none !important; }
  .fx-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero h1 .accent { animation: none !important; }
}