@charset "utf-8";
/* ETHER 홍보사이트 (index.html) · 리빌 · SVG · 오브 · 카드 선택 모션 — index.html 에 적힌 순서대로 불러온다 */
/* ============ REVEAL ============ */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .8s cubic-bezier(.22,1,.36,1),transform .8s cubic-bezier(.22,1,.36,1)}
.reveal.in{opacity:1;transform:none}

/* ============ SVG MOTIONS ============ */
@keyframes rayPulse{0%,100%{transform:scale(.72);opacity:.35}50%{transform:scale(1);opacity:1}}
@keyframes layerDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
@keyframes shimmer{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes waveMove{0%{transform:translateX(0)}100%{transform:translateX(-40px)}}
.m-fire g{transform-origin:center;animation:rayPulse 2.6s ease-in-out infinite}
.m-earth rect{animation:layerDrift 4s ease-in-out infinite}
.m-earth rect:nth-child(2){animation-delay:.4s}
.m-earth rect:nth-child(3){animation-delay:.8s}
.m-earth rect:nth-child(4){animation-delay:1.2s}
.m-metal polygon{animation:shimmer 2.4s ease-in-out infinite}
.m-metal polygon:nth-child(2n){animation-delay:.6s}
.m-metal polygon:nth-child(3n){animation-delay:1.1s}
.m-water path{animation:waveMove 3.4s linear infinite}
.m-water path:nth-child(2){animation-delay:-1.7s;opacity:.5}

/* ============ ORB MOTIONS ============ */
/* ① 유영  ② 3D 텀블  ③ 360° 회전  ④ 내부 움직임  ⑤ 라인 발광  — 동시 구동 */
@keyframes orbFloat{
  0%{transform:translate(0,0)}22%{transform:translate(2.4%,-2.8%)}
  46%{transform:translate(3.4%,2%)}71%{transform:translate(-2%,3%)}100%{transform:translate(0,0)}
}
@keyframes castFloat{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.9}
  22%{transform:translate(-52%,-47%) scale(.94);opacity:.72}
  46%{transform:translate(-47%,-53%) scale(1.06);opacity:1}
  71%{transform:translate(-53%,-54%) scale(.97);opacity:.8}
  100%{transform:translate(-50%,-50%) scale(1);opacity:.9}
}
/* 3D 텀블 : 각도 진폭 3종 (강 / 중 / 약=土) */
@keyframes tumbleL{
  0%{transform:rotateX(0) rotateY(0) rotateZ(0)}
  25%{transform:rotateX(14deg) rotateY(-19deg) rotateZ(2deg)}
  50%{transform:rotateX(-8deg) rotateY(17deg) rotateZ(-3deg)}
  75%{transform:rotateX(-16deg) rotateY(8deg) rotateZ(1deg)}
  100%{transform:rotateX(0) rotateY(0) rotateZ(0)}
}
@keyframes tumbleM{
  0%{transform:rotateX(0) rotateY(0)}
  30%{transform:rotateX(-11deg) rotateY(13deg)}
  60%{transform:rotateX(9deg) rotateY(-12deg)}
  100%{transform:rotateX(0) rotateY(0)}
}
@keyframes tumbleS{
  0%{transform:rotateX(0) rotateY(0)}
  50%{transform:rotateX(5deg) rotateY(-6deg)}
  100%{transform:rotateX(0) rotateY(0)}
}
@keyframes orbSpin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes orbSpinRev{from{transform:rotate(0)}to{transform:rotate(-360deg)}}

@keyframes orbGrow{0%,100%{transform:scale(1)}50%{transform:scale(1.07) translateY(-1.4%)}}
@keyframes orbFlame{
  0%,100%{transform:scaleY(1) scaleX(1)}30%{transform:scaleY(1.05) scaleX(.99)}
  55%{transform:scaleY(1.008) scaleX(1.008)}78%{transform:scaleY(1.032) scaleX(.997)}
}
@keyframes orbSettle{0%,100%{transform:translateY(0) scale(1.008)}50%{transform:translateY(1.4%) scale(1)}}
@keyframes orbHone{0%,100%{filter:contrast(1) brightness(1)}50%{filter:contrast(1.06) brightness(1.03)}}
@keyframes orbFlow{
  0%{transform:rotate(-2deg) scale(1.01)}50%{transform:rotate(2deg) scale(1.035)}
  100%{transform:rotate(-2deg) scale(1.01)}
}
/* 라인 발광 흐름 — 원소마다 "사건"이 있는 리듬 (지나간 뒤 여백을 둬 반짝임이 읽히게) */
@keyframes sapRise{        /* 木 뿌리→잎끝으로 수액이 올라가고 잔광이 남는다 */
  0%{background-position:50% 0%;opacity:0}
  10%{opacity:.55}
  24%{opacity:1}
  70%{background-position:50% 100%;opacity:.88}
  84%{opacity:0}
  100%{background-position:50% 100%;opacity:0}
}
@keyframes emberRise{      /* 火 불티가 튀듯 불규칙하게 점멸하며 상승 */
  0%{background-position:50% 0%;opacity:.10}
  16%{opacity:1}
  32%{opacity:.38}
  46%{opacity:.96}
  62%{opacity:.32}
  76%{background-position:50% 100%;opacity:.85}
  92%{opacity:0}
  100%{background-position:50% 100%;opacity:0}
}
@keyframes strataSink{     /* 土 층마다 멈추며 무겁게 가라앉는다 */
  0%{background-position:50% 100%;opacity:0}
  6%{opacity:.88}
  20%{background-position:50% 76%}
  29%{background-position:50% 76%}
  43%{background-position:50% 52%}
  52%{background-position:50% 52%}
  66%{background-position:50% 28%}
  75%{background-position:50% 28%}
  90%{background-position:50% 4%;opacity:.45}
  97%{opacity:0}
  100%{background-position:50% 0%;opacity:0}
}
@keyframes currentSwirl{   /* 水 좌우로 감기며 깊이로 하강 */
  0%{background-position:18% 100%;opacity:0}
  12%{opacity:.9}
  35%{background-position:80% 72%;opacity:1}
  60%{background-position:20% 44%;opacity:.95}
  85%{background-position:72% 12%;opacity:.4}
  100%{background-position:42% 0%;opacity:0}
}
@keyframes lineDiag{       /* 金 대각 섬광 후 여백 (기준 리듬) */
  0%{background-position:0% 0%;opacity:0}
  10%{opacity:.95}
  55%{background-position:100% 100%;opacity:0}
  100%{background-position:100% 100%;opacity:0}
}
/* 라인 레이어 시차(패럴랙스) — 텀블과 같은 주기로 어긋나게 움직여 두께감 */
@keyframes lineParallax{
  0%{translate:0 0}25%{translate:-2.4% 1.6%}50%{translate:2% -1.4%}75%{translate:2.4% .8%}100%{translate:0 0}
}
@keyframes heatPulse{0%,100%{opacity:.05}45%{opacity:.55}}
@keyframes orbSheen{
  0%{background-position:170% 0;opacity:0}8%{opacity:.95}
  30%{background-position:-70% 0;opacity:0}100%{background-position:-70% 0;opacity:0}
}
@keyframes flowGlow{0%,100%{opacity:.12;background-position:0% 100%}50%{opacity:.42;background-position:100% 0%}}

/* ── ① 유영 + 접지 그림자 (카드별 위상 분산) ── */
.el-card.in .el-orb-wrap,.el-detail.in .el-orb-wrap{animation:orbFloat 22s ease-in-out infinite}
.el-card.in .el-shadow,.el-detail.in .el-shadow{animation:castFloat 22s ease-in-out infinite}
.el-card.in[data-el="fire"]  .el-orb-wrap,.el-card.in[data-el="fire"]  .el-shadow{animation-duration:18s;animation-delay:-4s}
.el-card.in[data-el="earth"] .el-orb-wrap,.el-card.in[data-el="earth"] .el-shadow{animation-duration:30s;animation-delay:-9s}
.el-card.in[data-el="metal"] .el-orb-wrap,.el-card.in[data-el="metal"] .el-shadow{animation-duration:26s;animation-delay:-13s}
.el-card.in[data-el="water"] .el-orb-wrap,.el-card.in[data-el="water"] .el-shadow{animation-duration:20s;animation-delay:-6s}

/* ── ①-b Z축 깊이 : 그래픽이 천천히 앞으로 다가왔다 뒤로 물러난다 ──
   el-orb-wrap 의 perspective(520px) 안에서 translateZ −36px ↔ +56px (보이는 크기 약 0.94 ↔ 1.12배).
   개별 'translate' 속성으로 걸어 기존 transform 애니메이션(드리프트 · 텀블 · 스핀 · 선택 모션)과 겹치지 않고 합성된다.
   그림자는 반대로 : 앞으로 나오면 바닥에서 멀어지듯 작아지고 옅어진다. 원소마다 주기·위상을 달리해 다섯 장이 따로 숨쉰다 */
@keyframes orbDepth{0%,100%{translate:0 0 -36px}50%{translate:0 0 56px}}
@keyframes castDepth{0%,100%{scale:1.06;opacity:1}50%{scale:.86;opacity:.72}}
.el-card.in .el-orb-pick,.el-detail.in .el-orb-pick{animation-name:orbDepth;animation-duration:9s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.el-card.in .el-shadow,.el-detail.in .el-shadow{animation-name:castFloat,castDepth;animation-duration:22s,9s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.el-card.in[data-el="fire"]  .el-orb-pick{animation-duration:6.5s;animation-delay:-2s}
.el-card.in[data-el="earth"] .el-orb-pick{animation-duration:12s;animation-delay:-5s}
.el-card.in[data-el="metal"] .el-orb-pick{animation-duration:8s;animation-delay:-3s}
.el-card.in[data-el="water"] .el-orb-pick{animation-duration:7.5s;animation-delay:-1s}
.el-card.in[data-el="fire"]  .el-shadow{animation-duration:18s,6.5s;animation-delay:-4s,-2s}
.el-card.in[data-el="earth"] .el-shadow{animation-duration:30s,12s;animation-delay:-9s,-5s}
.el-card.in[data-el="metal"] .el-shadow{animation-duration:26s,8s;animation-delay:-13s,-3s}
.el-card.in[data-el="water"] .el-shadow{animation-duration:20s,7.5s;animation-delay:-6s,-1s}
@media (prefers-reduced-motion:reduce){.el-card .el-orb-pick,.el-detail .el-orb-pick{animation:none;translate:none}}

/* ── ② 3D 텀블 ── */
.el-card.in[data-el="wood"]  .el-orb-tilt,.el-detail.in[data-el="wood"]  .el-orb-tilt{animation:tumbleL 19s ease-in-out infinite}
.el-card.in[data-el="fire"]  .el-orb-tilt,.el-detail.in[data-el="fire"]  .el-orb-tilt{animation:tumbleM 13s ease-in-out infinite}
.el-card.in[data-el="earth"] .el-orb-tilt,.el-detail.in[data-el="earth"] .el-orb-tilt{animation:tumbleS 34s ease-in-out infinite}
.el-card.in[data-el="metal"] .el-orb-tilt,.el-detail.in[data-el="metal"] .el-orb-tilt{animation:tumbleM 17s ease-in-out infinite}
.el-card.in[data-el="water"] .el-orb-tilt,.el-detail.in[data-el="water"] .el-orb-tilt{animation:tumbleL 15s ease-in-out infinite}

/* ── ③ 360° 회전 ── */
.el-card.in[data-el="wood"]  .el-orb-spin,.el-detail.in[data-el="wood"]  .el-orb-spin{animation:orbSpin 96s linear infinite}
.el-card.in[data-el="fire"]  .el-orb-spin,.el-detail.in[data-el="fire"]  .el-orb-spin{animation:orbSpinRev 74s linear infinite}
.el-card.in[data-el="earth"] .el-orb-spin,.el-detail.in[data-el="earth"] .el-orb-spin{animation:orbSpin 132s linear infinite}
.el-card.in[data-el="metal"] .el-orb-spin,.el-detail.in[data-el="metal"] .el-orb-spin{animation:orbSpinRev 88s linear infinite}
.el-card.in[data-el="water"] .el-orb-spin,.el-detail.in[data-el="water"] .el-orb-spin{animation:orbSpin 62s linear infinite}

/* ── ④ 속성별 내부 움직임 ── */
.el-card.in[data-el="wood"] .el-orb,.el-detail.in[data-el="wood"] .el-orb{transform-origin:50% 72%;animation:orbGrow 8.4s cubic-bezier(.45,0,.55,1) infinite}
.el-card.in[data-el="fire"] .el-orb,.el-detail.in[data-el="fire"] .el-orb{transform-origin:50% 100%;animation:orbFlame 3.4s ease-in-out infinite}
.el-card.in[data-el="earth"] .el-orb,.el-detail.in[data-el="earth"] .el-orb{animation:orbSettle 13s ease-in-out infinite}
.el-card.in[data-el="metal"] .el-orb,.el-detail.in[data-el="metal"] .el-orb{animation:orbHone 7s ease-in-out infinite}
.el-card.in[data-el="water"] .el-orb,.el-detail.in[data-el="water"] .el-orb{transform-origin:50% 55%;animation:orbFlow 12s ease-in-out infinite}

/* ── ⑤ 라인 발광 : 방향·속도·리듬 모두 원소 성격에 맞춤 ── */
.el-lines{background-size:100% 320%;animation-fill-mode:both}
.el-card[data-el="water"] .el-lines,.el-detail[data-el="water"] .el-lines{background-size:170% 320%}
.el-card[data-el="metal"] .el-lines,.el-detail[data-el="metal"] .el-lines{background-size:260% 260%}
.el-card.in[data-el="wood"] .el-lines,.el-detail.in[data-el="wood"] .el-lines{
  animation:sapRise 4.6s cubic-bezier(.35,0,.5,1) infinite,lineParallax 19s ease-in-out infinite;
}
.el-card.in[data-el="fire"] .el-lines,.el-detail.in[data-el="fire"] .el-lines{
  animation:emberRise 1.85s linear infinite,lineParallax 13s ease-in-out infinite;
}
.el-card.in[data-el="earth"] .el-lines,.el-detail.in[data-el="earth"] .el-lines{
  animation:strataSink 9.5s linear infinite,lineParallax 34s ease-in-out infinite;
}
.el-card.in[data-el="metal"] .el-lines,.el-detail.in[data-el="metal"] .el-lines{
  animation:lineDiag 6.2s cubic-bezier(.3,0,.2,1) infinite,lineParallax 17s ease-in-out infinite;
}
.el-card.in[data-el="water"] .el-lines,.el-detail.in[data-el="water"] .el-lines{
  animation:currentSwirl 6.4s ease-in-out infinite,lineParallax 15s ease-in-out infinite;
}
/* 木火土水는 가산 합성으로 발광을 강화 (金은 기존 screen 유지) */
@supports (mix-blend-mode:plus-lighter){
  .el-card[data-el="wood"] .el-lines,.el-detail[data-el="wood"] .el-lines,
  .el-card[data-el="fire"] .el-lines,.el-detail[data-el="fire"] .el-lines,
  .el-card[data-el="earth"] .el-lines,.el-detail[data-el="earth"] .el-lines,
  .el-card[data-el="water"] .el-lines,.el-detail[data-el="water"] .el-lines{mix-blend-mode:plus-lighter}
}

/* ── 광택 / 열 / 발광 ── */
.el-card.in[data-el="fire"] .el-sheen,.el-detail.in[data-el="fire"] .el-sheen{
  background-image:radial-gradient(58% 44% at 50% 62%,rgba(255,186,96,.85),rgba(255,120,60,.22) 58%,transparent 78%);
  animation:heatPulse 2.15s ease-in-out infinite;
}
.el-card.in[data-el="metal"] .el-sheen,.el-detail.in[data-el="metal"] .el-sheen{
  background-image:linear-gradient(100deg,transparent 41%,rgba(255,255,255,.72) 50%,transparent 59%);
  background-size:240% 100%;animation:orbSheen 6.8s cubic-bezier(.32,0,.2,1) infinite;
}
.el-card.in[data-el="water"] .el-sheen,.el-detail.in[data-el="water"] .el-sheen{
  background-image:radial-gradient(46% 34% at 42% 68%,rgba(180,225,255,.9),transparent 72%);
  background-size:116% 116%;animation:flowGlow 9s ease-in-out infinite;
}
/* 상세 패널은 면적이 커서 진폭·속도 하향 */
.el-detail .el-orb-wrap,.el-detail .el-shadow{animation-duration:28s!important}
.el-detail .el-orb{animation-duration:15s!important}
.el-detail.in[data-el="fire"] .el-orb{animation-duration:4.2s!important}

/* 섹션이 뷰포트 밖이면 모션 정지 — 불필요한 합성/페인트 차단 */
.elements:not(.is-live) .el-viz *,.elements:not(.is-live) .d-viz *{animation-play-state:paused!important}

/* ============ 카드 선택 모션 (원소별 1회성 · 상시 모션과 다르게) ============ */
@keyframes pickWood{  /* 木 아래에서 위로 솟구침 */
  0%{transform:scale(1) translateY(0)}28%{transform:scale(1.16) translateY(-9%)}
  58%{transform:scale(.96) translateY(1.5%)}80%{transform:scale(1.03) translateY(-.5%)}100%{transform:none}
}
@keyframes pickFire{  /* 火 폭발적 팽창 후 잔진동 */
  0%{transform:scale(1)}14%{transform:scale(1.26)}34%{transform:scale(.92)}
  52%{transform:scale(1.09)}70%{transform:scale(.97)}86%{transform:scale(1.03)}100%{transform:none}
}
@keyframes pickEarth{ /* 土 무겁게 낙하·착지 */
  0%{transform:translateY(-13%) scale(1.05)}46%{transform:translateY(3%) scale(.96)}
  68%{transform:translateY(-2%) scale(1.02)}86%{transform:translateY(.6%) scale(.99)}100%{transform:none}
}
@keyframes pickMetal{ /* 金 축을 중심으로 1회 스핀 */
  0%{transform:rotateY(0) scale(1)}50%{transform:rotateY(180deg) scale(1.07)}100%{transform:rotateY(360deg) scale(1)}
}
@keyframes pickWater{ /* 水 소용돌이 */
  0%{transform:rotate(0) scale(1)}40%{transform:rotate(200deg) scale(1.09)}
  72%{transform:rotate(320deg) scale(.97)}100%{transform:rotate(360deg) scale(1)}
}
@keyframes vizFlash{0%{filter:brightness(1.24) saturate(1.18)}100%{filter:none}}
/* 선택 모션 + Z축 깊이(orbDepth)를 함께 건다. 같은 이름의 애니메이션은 목록에 남아 있으면 재시작되지 않으므로
   클릭해도 깊이 움직임이 끊기거나 튀지 않는다 (주기·위상은 위 ①-b 와 동일하게) */
.el-card.pick[data-el="wood"]  .el-orb-pick,.el-detail.pick[data-el="wood"]  .el-orb-pick{animation:pickWood .95s cubic-bezier(.2,.9,.2,1),orbDepth 9s ease-in-out infinite}
.el-card.pick[data-el="fire"]  .el-orb-pick,.el-detail.pick[data-el="fire"]  .el-orb-pick{animation:pickFire .78s cubic-bezier(.3,1.4,.4,1),orbDepth 6.5s ease-in-out -2s infinite}
.el-card.pick[data-el="earth"] .el-orb-pick,.el-detail.pick[data-el="earth"] .el-orb-pick{animation:pickEarth 1.15s cubic-bezier(.25,.8,.3,1),orbDepth 12s ease-in-out -5s infinite}
.el-card.pick[data-el="metal"] .el-orb-pick,.el-detail.pick[data-el="metal"] .el-orb-pick{animation:pickMetal 1.35s cubic-bezier(.5,0,.2,1),orbDepth 8s ease-in-out -3s infinite}
.el-card.pick[data-el="water"] .el-orb-pick,.el-detail.pick[data-el="water"] .el-orb-pick{animation:pickWater 1.5s cubic-bezier(.45,.05,.25,1),orbDepth 7.5s ease-in-out -1s infinite}
.el-card.pick .el-viz,.el-detail.pick .d-viz{animation:vizFlash .7s ease-out}