@charset "utf-8";
/* ETHER 홍보사이트 (index.html) · 01 HERO · 포지셔닝 띠 — index.html 에 적힌 순서대로 불러온다 */
/* ============ HERO ============ */
.hero{padding:var(--sp-9) 0 var(--sp-9);text-align:center;overflow:hidden;background:var(--bg-3);transition:background .5s}
.hero .eyebrow{margin-bottom:var(--sp-6)}
.hero h1{
  /* 램프(d1=500)에서 한 단계 더 내린다. 이 크기(fd-4)에서는 같은 굵기라도
     획이 두껍게 읽혀 혼자만 무거워 보인다 — 다른 d1 사용처(.step-no · 오브 글리프)는
     크기·불투명도가 달라 그대로 두고, 히어로에만 직접 지정한다. */
  font-family:var(--serif);font-weight:400;
  font-size:var(--fd-4);line-height:1.02;letter-spacing:var(--ls-d1);
}
.hero h1 .k{display:block}
/* 히어로문구샘플 C : 한 줄 문구 · 18px (--fs-5 리드 본문) */
.hero-sub{max-width:640px;margin:var(--sp-5) auto 0;color:var(--ink-2);font-size:var(--fs-5);line-height:1.6;letter-spacing:-.005em;word-break:keep-all}
.hero-sub .hero-brand{font-family:var(--serif);font-weight:400;font-style:normal;color:var(--cobalt-t);letter-spacing:.03em}
.hero-sub .hero-brand--ko{font-family:inherit;font-weight:600;letter-spacing:0}
@media (max-width:560px){.hero-sub br{display:none}}
.hero-cta{display:flex;gap:var(--sp-4);justify-content:center;margin-top:var(--sp-7)}
/* ── HERO CTA · AURORA BORDER (버튼샘플/02_aurora_border) ──
   오행 파스텔(木·火·土·金·水)이 테두리를 따라 5초에 한 바퀴 돌고, 호버 시 같은 색이 아래로 오로라처럼 번진다.
   히어로 두 버튼에만 적용 — .btn-primary 는 내비·폼에서도 쓰이므로 공용 규칙은 건드리지 않는다.
   레이어 : 버튼 자체 배경은 비우고 ::before(z -2) = 오로라 글로우, ::after(z -1) = 본체 + 회전 테두리.
   isolation 안에서 둘 다 그리므로, 호버 리프트(transform)로 쌓임 맥락이 바뀌어도 글로우는 항상 본체 아래에 있다. */
@property --ab-a{syntax:"<angle>";inherits:false;initial-value:0deg}
@keyframes abSpin{to{--ab-a:360deg}}
/* 주의 : 회전 각도(--ab-a)는 의사요소에서 애니메이션된다. 그라데이션을 버튼에 변수로 선언하면
   var() 가 버튼 쪽(0deg)에서 미리 풀려 멈춘 채로 내려온다 → 그라데이션은 반드시 의사요소에 직접 쓴다 */
.hero-cta .btn{
  position:relative;isolation:isolate;overflow:visible;border:0;background:none;box-shadow:none;animation:none;
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.hero-cta .btn::before,.hero-cta .btn::after,
.hero-cta .btn:hover::before,.hero-cta .btn:hover::after{
  content:"";position:absolute;border-radius:inherit;transform:none;
  animation:abSpin var(--ab-dur,5s) linear var(--ab-delay,0s) infinite var(--ab-dir,normal)}
/* 두 버튼이 같은 박자로 돌지 않게 : 주기를 확실히 벌리고(5s / 9s) 흰 버튼은 반대 방향으로 돌린다.
   5s/6.8s 에 같은 방향이면 눈으로는 같은 움직임으로 읽혔다.
   변수로 버튼에 두는 이유 — :hover 규칙의 animation 단축 속성이 duration 을 5s 로 되돌리며 튀지 않도록 */
.hero-cta .btn-ghost{--ab-dur:9s;--ab-delay:-3.4s;--ab-dir:reverse}
/* 본체 + 2px 회전 테두리 */
.hero-cta .btn::after{inset:0;left:0;width:auto;z-index:-1;opacity:1;border:2px solid transparent}
/* 흰 버튼 : 흰색 86% 막 아래로 같은 오행 파스텔이 함께 돌며 아주 옅게 비친다 (순수 #fff 대신 '빛이 스민 흰색') */
.hero-cta .btn-ghost::after{
  background:linear-gradient(rgba(255,255,255,.86),rgba(255,255,255,.86)) padding-box,
    conic-gradient(from var(--ab-a),#459EFA,#B6F0FF,#E2F5C4,#FFE7B0,#FFD1E6,#459EFA) padding-box,
    conic-gradient(from var(--ab-a),#459EFA,#B6F0FF,#E2F5C4,#FFE7B0,#FFD1E6,#459EFA) border-box}
/* 오로라 글로우 : 본체가 불투명해 안쪽에 두면 가려진다 → 본체보다 크게 바깥으로 펼쳐
   테두리 둘레(특히 아래)로 번지게 하고, 정지 상태에서도 보이게 둔다 */
.hero-cta .btn::before{inset:-6px -10px -14px;z-index:-2;
  background:conic-gradient(from var(--ab-a),#459EFA,#B6F0FF,#E2F5C4,#FFE7B0,#FFD1E6,#459EFA);filter:blur(14px);
  opacity:.55;transition:opacity .35s ease,filter .35s ease}
.hero-cta .btn:hover,.hero-cta .btn:focus-visible{transform:translateY(-2px);box-shadow:none}
.hero-cta .btn:hover::before,.hero-cta .btn:focus-visible::before{opacity:1;filter:blur(18px)}
.hero-cta .btn:active{transform:translateY(0) scale(.97);box-shadow:none}
.hero-cta .btn-ghost{color:var(--ink)}
.hero-cta .btn-ghost:hover{background:none}
.hero-cta .btn-primary{color:#fff}
.hero-cta .btn-primary::after{
  background:linear-gradient(100deg,#459EFA,#68B2FF 60%,#80BFFF) padding-box,
    conic-gradient(from var(--ab-a),#fff,#B6F0FF,#FFD1E6,#fff,#E2F5C4,#fff) border-box}
.hero-cta .btn-primary::before{opacity:.65}
.hero-cta .btn-primary:hover::before,.hero-cta .btn-primary:focus-visible::before{opacity:1}
@media (prefers-reduced-motion:reduce){.hero-cta .btn::before,.hero-cta .btn::after{animation:none}}

/* hero stage */
.stage{position:relative;margin-top:var(--sp-8);height:460px;display:grid;place-items:center}
/* ── FLOW FIELD (ported from ETHER_hero_v2C_flowfield_확정) ──
   20장의 룩 카드가 3D 공간을 자유 유영 → 하나의 링으로 정렬 → 다시 풀린다.
   14초 한 바퀴 : 4s 유영 → 2s 정렬 → 6s 링 회전 → 2s 해제. 깊이(z)에 따라 투명도·블러·크기 변화.
   히어로 문구(.hero-intro) 뒤의 배경으로 깔린다 : 화면 폭 전체 · 문구 블록 높이 전체.
   링은 살짝 기울여 문구를 감싸는 타원으로 돌고, 가운데에는 배경색 베일을 깔아 글자 가독성을 지킨다. */
.hero-intro{position:relative;isolation:isolate}
.hero-intro>:not(.flow-stage){position:relative;z-index:2}
.stage.flow-stage{position:absolute;top:0;bottom:0;left:50%;width:calc(100vw / var(--vz,1));height:auto;margin:0 0 0 calc(-50vw / var(--vz,1));display:block;z-index:0;pointer-events:none}
.flow-stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse 34% 40% at 50% 50%,var(--bg-3) 0%,color-mix(in srgb,var(--bg-3) 70%,transparent) 45%,transparent 100%)}
.flow-scene{position:absolute;inset:0;perspective:1800px;perspective-origin:50% 50%;z-index:0;pointer-events:none}
.flow-field{position:absolute;left:50%;top:50%;transform-style:preserve-3d}
.flow-field .fc{position:absolute;left:0;top:0;transform-style:preserve-3d;will-change:transform}
.flow-field .card{position:absolute;width:120px;height:150px;margin:-75px 0 0 -60px;border-radius:3px;overflow:hidden;
  background:#dfe9f5;box-shadow:0 24px 50px -24px rgba(11,31,58,.35)}
.flow-field .card img{width:100%;height:100%;object-fit:cover;display:block}
.flow-mark{display:none}   /* 가운데 마크는 제목과 겹치므로 배경 모드에서는 숨긴다 */
@media (max-width:720px){.flow-field .card{width:80px;height:100px;margin:-50px 0 0 -40px}
  .flow-stage::after{background:radial-gradient(ellipse 60% 42% at 50% 50%,var(--bg-3) 0%,color-mix(in srgb,var(--bg-3) 75%,transparent) 50%,transparent 100%)}}
/* ── ASSEMBLY LOOP ── 다섯 원소 그래픽이 중심으로 모여 ETHER 마크가 되고, 다시 다섯으로 풀린다.
   12초 한 바퀴 : 0–38% 흩어짐 → 38–50% 합체 → 50–82% 마크 → 82–94% 분해.
   기호(--orb-*)는 그래픽 시스템의 볼륨형 모티브, 마크는 그 다섯 기운이 응축된 형태. */
.asm{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
.asm-ring{position:absolute;width:420px;height:420px;border-radius:50%;border:1px solid var(--line);
  animation:asmRing 12s linear infinite}
.asm-mark{position:absolute;width:150px;height:auto;color:var(--ink);opacity:0;
  animation:asmMark 12s cubic-bezier(.22,.61,.36,1) infinite}
.asm-sym{position:absolute;width:150px;height:188px;background-size:contain;background-repeat:no-repeat;background-position:center;
  filter:drop-shadow(0 18px 28px rgba(56,140,235,.22));
  animation:asmSym 12s cubic-bezier(.22,.61,.36,1) infinite;animation-delay:var(--d)}
.asm-sym.wood{background-image:var(--orb-wood)} .asm-sym.fire{background-image:var(--orb-fire)}
.asm-sym.earth{background-image:var(--orb-earth)} .asm-sym.metal{background-image:var(--orb-metal)}
.asm-sym.water{background-image:var(--orb-water)}
.asm-lab{position:absolute;bottom:0;font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.16em;color:var(--ink-3);
  display:inline-flex;gap:10px;align-items:baseline;animation:asmLab 12s steps(1) infinite}
.asm-lab span{color:var(--cobalt-t)}
.asm-lab-a{left:0} .asm-lab-b{right:0;animation-delay:6s}
@keyframes asmSym{
  0%,36%{transform:translate(var(--tx),var(--ty)) scale(1);opacity:1}
  50%,80%{transform:translate(0,0) scale(.18);opacity:0}
  94%,100%{transform:translate(var(--tx),var(--ty)) scale(1);opacity:1}}
@keyframes asmMark{0%,44%{opacity:0;transform:scale(.6) rotate(-6deg)} 54%,78%{opacity:1;transform:scale(1) rotate(0)} 90%,100%{opacity:0;transform:scale(.6) rotate(6deg)}}
@keyframes asmRing{0%{transform:rotate(0) scale(1);opacity:.9}50%{transform:rotate(180deg) scale(.42);opacity:.5}100%{transform:rotate(360deg) scale(1);opacity:.9}}
@keyframes asmLab{0%,46%{opacity:1}47%,100%{opacity:.28}}
@media (prefers-reduced-motion:reduce){.asm-sym,.asm-mark,.asm-ring,.asm-lab{animation:none}.asm-mark{opacity:1}.asm-sym{opacity:.35}}
@media (max-width:720px){.asm-sym{width:96px;height:120px}.asm-ring{width:280px;height:280px}.asm-mark{width:104px}}
.stage-core{
  width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, var(--cobalt-soft), transparent 70%);
  position:relative;display:grid;place-items:center;
}
.stage-core svg{width:300px;height:300px}
#etherCanvas{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.stage .stage-core{z-index:1}
.stage .orb{z-index:2}
.orb{font-weight:var(--fw-d3);
  position:absolute;width:78px;height:78px;border-radius:var(--r-3);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  display:grid;place-items:center;font-family:var(--serif);font-size:var(--fg-0);
  will-change:transform;letter-spacing:var(--ls-d3)}
.orb small{position:absolute;bottom:8px;font-family:var(--mono);font-size:var(--fs-1);letter-spacing:.1em;color:var(--ink-3)}
.orb.wood{color:var(--wood-t);top:6%;left:16%;animation:float1 7s ease-in-out infinite}
.orb.fire{color:var(--fire-t);top:2%;right:20%;animation:float2 8s ease-in-out infinite}
.orb.earth{color:var(--earth-t);bottom:20%;left:8%;animation:float2 6.4s ease-in-out infinite}
.orb.metal{color:var(--metal-t);top:44%;right:6%;animation:float1 7.6s ease-in-out infinite}
.orb.water{color:var(--water-t);bottom:8%;right:22%;animation:float1 6.8s ease-in-out infinite}
@keyframes float1{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-20px) rotate(2deg)}}
@keyframes float2{0%,100%{transform:translateY(0) rotate(2deg)}50%{transform:translateY(22px) rotate(-2deg)}}

/* ============ POSITIONING BAND ============ */
.band{padding:var(--sp-9) 0;background:var(--bg);transition:background .5s}
.band-quote{
  font-family:var(--serif);font-weight:var(--fw-d3);font-size:var(--fd-t);
  line-height:1.3;text-align:center;margin:0 auto var(--sp-4);letter-spacing:var(--ls-d3);
  word-break:keep-all;   /* 좁은 화면에서 줄이 바뀌어도 '소/비'처럼 낱말 중간에서 끊기지 않게 */
}
.band-quote em{font-style:normal;color:var(--cobalt-t)}
.bm{letter-spacing:.04em}
.band-cap{text-align:center;color:var(--ink-2);margin-bottom:var(--sp-9)}
.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.value-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-m);
  padding:var(--sp-6) var(--sp-6);box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s;position:relative;
}
.value-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.value-icon{position:absolute;top:28px;right:28px;width:46px;height:46px;border-radius:var(--r-2);
  background:var(--cobalt-soft);color:var(--cobalt-t);display:grid;place-items:center}
.value-icon svg{width:23px;height:23px}
.value-num{font-family:var(--mono);font-size:var(--fs-2);letter-spacing:.1em;color:var(--cobalt-t);margin-bottom:var(--sp-5);padding-right:var(--sp-8)}
.value-card h3{font-size:var(--fs-5);font-weight:600;margin-bottom:var(--sp-3);word-break:keep-all}   /* 제목은 아이콘(top 28 + 46 = 74px) 아래에서 시작 → 오른쪽 여백 불필요 */
.value-card p{color:var(--ink-2);font-size:var(--fs-4);line-height:1.65;word-break:keep-all}   /* 낱말 중간(금/속)에서 줄이 끊기지 않게 */