/* intro.css — 인트로 랜딩 페이지 */

#bg{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;display:block}
.aurora{position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(90px);opacity:.55}
.aurora span{position:absolute;border-radius:50%;mix-blend-mode:screen;animation:drift 22s var(--ease) infinite alternate}
.aurora .a1{width:46vw;height:46vw;left:-6vw;top:-8vw;background:radial-gradient(circle,#6d28d9,transparent 70%)}
.aurora .a2{width:40vw;height:40vw;right:-4vw;top:8vw;background:radial-gradient(circle,#0891b2,transparent 70%);animation-delay:-7s}
.aurora .a3{width:38vw;height:38vw;left:24vw;bottom:-12vw;background:radial-gradient(circle,#be185d,transparent 70%);animation-delay:-14s}
@keyframes drift{to{transform:translate(6vw,4vh) scale(1.15)}}

.wrap{position:relative;z-index:2}

/* ── HERO ── */
.hero{min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:120px 22px 80px;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:999px;
  border:1px solid var(--line-2);background:rgba(255,255,255,.03);backdrop-filter:blur(8px);
  font-size:13px;color:var(--fg-dim);font-family:var(--font-mono);letter-spacing:.02em;margin-bottom:30px}
.eyebrow .pulse{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);
  animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.7)}}

.hero h1{font-family:var(--font-display);font-weight:700;letter-spacing:-.04em;line-height:.95;
  font-size:clamp(44px,9.5vw,132px);margin-bottom:8px}
.hero h1 .line{display:block;overflow:hidden}
.hero h1 .ch{display:inline-block;opacity:0;transform:translateY(1.1em) rotate(6deg);
  animation:chIn .9s var(--ease) forwards}
@keyframes chIn{to{opacity:1;transform:none}}
.grad{background:var(--grad-aurora);-webkit-background-clip:text;background-clip:text;color:transparent;
  background-size:200% auto;animation:hue 8s linear infinite}
@keyframes hue{to{background-position:200% center}}
/* 그라디언트 줄은 글자 쪼개기 대신 통째로 페이드인
   (background-clip:text 은 transform 된 자식 span 과 만나면 렌더링이 깨짐) */
.hero h1 .grad-line{display:inline-block;opacity:0;
  animation:gradIn .9s var(--ease) .6s forwards,hue 8s linear infinite}
@keyframes gradIn{to{opacity:1}}

.hero p.lead{max-width:620px;font-size:clamp(16px,2.2vw,20px);color:var(--fg-dim);margin:26px auto 38px;
  opacity:0;animation:fadeUp .8s var(--ease) 1.1s forwards}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;
  opacity:0;animation:fadeUp .8s var(--ease) 1.3s forwards}

.live-chip{margin-top:34px;display:inline-flex;align-items:center;gap:16px;padding:12px 20px;border-radius:16px;
  border:1px solid var(--line);background:rgba(10,12,20,.55);backdrop-filter:blur(14px);
  font-family:var(--font-mono);font-size:13px;opacity:0;animation:fadeUp .8s var(--ease) 1.5s forwards}
.live-chip .live-txt{color:var(--fg-faint)}
.live-chip.live .live-txt{color:var(--lime)}
.live-chip b{color:var(--fg);font-size:15px}
.live-chip .sepv{width:1px;height:20px;background:var(--line-2)}

.scroll-hint{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);color:var(--fg-faint);
  font-size:12px;letter-spacing:.2em;text-transform:uppercase;display:flex;flex-direction:column;
  align-items:center;gap:10px;animation:bob 2.2s ease-in-out infinite}
.scroll-hint::after{content:'';width:1px;height:34px;background:linear-gradient(var(--fg-faint),transparent)}
@keyframes bob{50%{transform:translate(-50%,8px)}}

/* ── 섹션 공통 ── */
section.block{max-width:1180px;margin:0 auto;padding:100px 22px}
.sec-head{margin-bottom:52px}
.sec-tag{font-family:var(--font-mono);font-size:13px;color:var(--cyan);letter-spacing:.15em;text-transform:uppercase}
.sec-head h2{font-family:var(--font-display);font-weight:700;letter-spacing:-.03em;
  font-size:clamp(30px,5vw,56px);margin-top:12px;line-height:1.02}
.sec-head p{color:var(--fg-dim);margin-top:16px;max-width:560px;font-size:17px}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease) var(--d),transform .8s var(--ease) var(--d)}
.reveal.in{opacity:1;transform:none}

/* ── 인터랙션 카드 그리드 ── */
.i-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:18px}
.i-card{position:relative;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(160deg,var(--bg-2),var(--bg-1));overflow:hidden;
  transition:transform .3s var(--ease),border-color .3s;transform-style:preserve-3d;min-height:230px}
.i-card::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;
  background:radial-gradient(400px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.09),transparent 45%)}
.i-card:hover{border-color:var(--line-2)}
.i-card:hover::before{opacity:1}
.i-card .pad{position:relative;z-index:2;padding:24px;height:100%;display:flex;flex-direction:column}
.i-card h3{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:-.01em}
.i-card p{color:var(--fg-dim);font-size:14px;margin-top:6px}
.i-card .num{font-family:var(--font-mono);font-size:12px;color:var(--fg-faint)}
.i-card .stage{flex:1;position:relative;margin-top:16px;border-radius:12px;overflow:hidden;min-height:110px}
.span-6{grid-column:span 6}.span-4{grid-column:span 4}.span-8{grid-column:span 8}.span-12{grid-column:span 12}
@media(max-width:860px){.span-6,.span-4,.span-8{grid-column:span 12}.span-12{grid-column:span 12}}

canvas.fill{width:100%;height:100%;display:block;cursor:crosshair}

/* 구이 메타볼: blur 캔버스 + 부모 contrast 로 경계가 붙는 트릭 */
.goo-wrap{background:#05060a;filter:contrast(16)}
.goo-wrap canvas{filter:blur(9px)}

/* 디코더 텍스트 */
.scramble{font-family:var(--font-mono);font-weight:500;text-align:center;
  font-size:clamp(20px,4.2vw,42px);letter-spacing:.05em;color:var(--fg);
  cursor:default;user-select:none;padding:10px}
.scramble .x{color:var(--cyan);opacity:.85}

/* 자석 버튼 데모 */
.mag-stage{display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,rgba(139,92,246,.12),transparent)}
.magnetic{padding:16px 30px;border-radius:999px;background:var(--grad-warm);color:#0a0a0a;font-weight:700;
  transition:transform .25s var(--ease);box-shadow:0 10px 30px rgba(244,114,182,.35)}

/* 그라디언트 메시 데모 */
.mesh{background:conic-gradient(from 0deg,#8b5cf6,#22d3ee,#e879f9,#a3e635,#8b5cf6);
  filter:blur(4px) saturate(140%);animation:spin-slow 10s linear infinite;transform:scale(1.4)}

/* 마퀴 밴드 */
.marquee{border-block:1px solid var(--line);padding:26px 0;overflow:hidden;white-space:nowrap;margin-top:20px}
.marquee .track{display:inline-block;animation:scroll-x 26s linear infinite;will-change:transform}
.marquee:nth-of-type(even) .track{animation-direction:reverse}
.marquee span{font-family:var(--font-display);font-size:clamp(28px,5vw,58px);font-weight:700;letter-spacing:-.02em;
  padding:0 26px;color:transparent;-webkit-text-stroke:1px var(--fg-faint)}
.marquee span.fill{color:var(--fg);-webkit-text-stroke:0}
.marquee span.g{background:var(--grad-cool);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-stroke:0}
@keyframes scroll-x{to{transform:translateX(-50%)}}

/* 페이지 카드(앞으로 만들 페이지) */
.pages-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.page-card{position:relative;border-radius:var(--radius);border:1px solid var(--line);overflow:hidden;
  background:linear-gradient(160deg,var(--bg-2),var(--bg-1));padding:28px;min-height:200px;
  display:flex;flex-direction:column;transition:transform .3s var(--ease),border-color .3s}
.page-card:hover{transform:translateY(-6px);border-color:var(--line-2)}
.page-card .glow{position:absolute;inset:0;opacity:.5;pointer-events:none}
.page-card .badge{align-self:flex-start;font-family:var(--font-mono);font-size:11px;padding:5px 11px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--fg-dim);margin-bottom:auto}
.page-card .badge.on{color:var(--lime);border-color:rgba(163,230,53,.4);background:rgba(163,230,53,.08)}
.page-card .ic{margin-bottom:14px;line-height:0}
.page-card .ic svg{filter:drop-shadow(0 4px 14px rgba(139,92,246,.35))}
.page-card.soon .ic svg{filter:none}
.page-card h3{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.02em;margin-top:14px}
.page-card p{color:var(--fg-dim);font-size:14px;margin-top:8px}
.page-card .go{margin-top:18px;display:inline-flex;align-items:center;gap:8px;color:var(--cyan);font-weight:600;font-size:14px}
.page-card.soon{border-style:dashed;opacity:.75}
.page-card.soon .ic{filter:grayscale(1);opacity:.6}

footer{border-top:1px solid var(--line);padding:40px 22px;text-align:center;color:var(--fg-faint);
  font-family:var(--font-mono);font-size:13px}
footer a{color:var(--fg-dim)}