/* ============================================================
   EXCORP NETWORK — One engine. Seven worlds.
   Deep-ink cosmos / ember core / seven orbital identities
   ============================================================ */
:root{
  --ink:        #07080F;   /* deep space base            */
  --ink-2:      #0C0E19;   /* raised surface             */
  --ivory:      #EDEAE0;   /* primary text               */
  --ivory-dim:  rgba(237,234,224,.55);
  --ivory-faint:rgba(237,234,224,.28);
  --hair:       rgba(237,234,224,.09);
  --ember:      #E8C36A;   /* Excorp core — warm engine  */
  --ember-soft: rgba(232,195,106,.14);

  /* seven worlds */
  --c-logoku:  #FF4D3D;
  --c-excode:  #4D7CFF;
  --c-exwebs:  #9B6BFF;
  --c-excart:  #29D6E8;
  --c-shoppish:#FF6B9D;
  --c-exifix:  #FFAF3D;
  --c-exdu:    #3BD98F;

  --font-display:'Clash Display', system-ui, sans-serif;
  --font-body:'General Sans', system-ui, sans-serif;
  --font-mono:'JetBrains Mono', ui-monospace, monospace;

  --ease-out: cubic-bezier(.19,1,.22,1);
  --pad-x: clamp(20px, 5vw, 88px);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:auto; }
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
::selection{ background:var(--ember); color:var(--ink); }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }

:focus-visible{ outline:1.5px solid var(--ember); outline-offset:4px; border-radius:2px; }

/* ---------- shared type ---------- */
.mono{
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--ivory-dim);
}
.eyebrow{
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ivory-dim);
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:var(--ember); opacity:.8;
}

/* ---------- star field ---------- */
#stars{
  position:fixed; inset:0; z-index:0; pointer-events:none;
}

/* ---------- custom cursor ---------- */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0; z-index:1200; pointer-events:none;
  transform:translate(-50%,-50%);
}
.cursor-dot,.cursor-ring{ opacity:0; }
body.cursor-live .cursor-dot, body.cursor-live .cursor-ring{ opacity:1; }

.cursor-dot{
  width:4px; height:4px;
  background:var(--ember);
  box-shadow:0 0 8px var(--ember);
  border-radius:50%;
}

.cursor-ring{
  width:40px; height:40px;
  transition: width .35s var(--ease-out), height .35s var(--ease-out);
}
.cursor-ring::before, .cursor-ring::after {
  content: ""; position: absolute;
  transition: all .35s var(--ease-out);
}
/* Horizontal line */
.cursor-ring::before {
  top: 50%; left: 0; right: 0; height: 1px;
  transform: translateY(-50%);
  background: linear-gradient(to right, rgba(232,195,106,.6) 38%, transparent 38%, transparent 62%, rgba(232,195,106,.6) 62%);
}
/* Vertical line */
.cursor-ring::after {
  left: 50%; top: 0; bottom: 0; width: 1px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, rgba(232,195,106,.6) 38%, transparent 38%, transparent 62%, rgba(232,195,106,.6) 62%);
}

body.cursor-hover .cursor-ring{
  width: 64px; height: 64px;
}
body.cursor-hover .cursor-ring::before {
  background: linear-gradient(to right, rgba(232,195,106,.9) 30%, transparent 30%, transparent 70%, rgba(232,195,106,.9) 70%);
}
body.cursor-hover .cursor-ring::after {
  background: linear-gradient(to bottom, rgba(232,195,106,.9) 30%, transparent 30%, transparent 70%, rgba(232,195,106,.9) 70%);
}
@media (hover:none){ .cursor-dot,.cursor-ring{ display:none; } }

/* ---------- preloader ---------- */
#preloader{
  position:fixed; inset:0; z-index:1100;
  background:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px;
}
#preloader .seed-logo{
  background: #fff;
  padding: 14px;
  border-radius: 16px;
}
#preloader .mono{ color:var(--ivory-faint); }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--pad-x);
  pointer-events:none;
}
.nav > *{ pointer-events:auto; }
.nav .wordmark{
  font-family:var(--font-display); font-weight:600;
  display:flex; align-items:center; gap:12px;
}
.nav .wordmark-text {
  display: flex; flex-direction: column; line-height: 1;
}
.nav .wordmark-text .excorp {
  font-size: 15px; letter-spacing: .14em;
}
.nav .wordmark-text .network {
  font-family: var(--font-mono); font-weight: 500;
  font-size: 7.5px; letter-spacing: .82em;
  color: var(--ivory-dim);
  margin-top: 3px;
  margin-right: -.82em;
}
.nav .wordmark .logo{
  width:40px; height:40px; display:inline-block;
  filter:drop-shadow(0 0 10px rgba(232,195,106,.55));
}
.nav .scene-index{
  font-family:var(--font-mono); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ivory-dim);
  display:flex; align-items:center; gap:14px;
}
.nav .scene-index .bar{
  width:64px; height:1px; background:var(--hair); position:relative; overflow:visible;
}
.nav .scene-index .bar i{
  position:absolute; left:0; top:0; height:1px; width:0%;
  background:var(--ember); display:block;
}
#progressBar{
  position:fixed; top:0; left:0; height:2px; width:100%;
  transform-origin:0 50%; transform:scaleX(0);
  background:linear-gradient(90deg, var(--ember), rgba(232,195,106,.25));
  z-index:950;
}

/* ---------- sections base ---------- */
main{ position:relative; z-index:1; }
section{ position:relative; }

/* ---------- 01 origin / hero ---------- */
#origin{
  min-height:100vh; min-height:100svh;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad-x);
  overflow:hidden;
}
#origin .halo{
  position:absolute; left:50%; top:50%;
  width:min(72vw,720px); aspect-ratio:1;
  transform:translate(-50%,-50%);
  border-radius:50%;
  background:radial-gradient(circle,
     rgba(232,195,106,.16) 0%,
     rgba(232,195,106,.05) 34%,
     transparent 68%);
  pointer-events:none;
  animation:haloBreathe 7s ease-in-out infinite;
}
@keyframes haloBreathe{ 50%{ transform:translate(-50%,-50%) scale(1.08); opacity:.85; } }
#origin .seed-core{
  position:absolute; left:50%; top:50%;
  width:10px; height:10px; border-radius:50%;
  transform:translate(-50%,-50%);
  background:var(--ember);
  box-shadow:0 0 30px 8px rgba(232,195,106,.55);
  animation:seedPulse 3.4s ease-in-out infinite;
}
#origin .hero-inner{ position:relative; text-align:center; }
#origin h1{
  font-family:var(--font-display);
  font-weight:600;
  font-size:clamp(64px, 15.5vw, 232px);
  line-height:.92;
  letter-spacing:.015em;
  margin:26px 0 30px;
}
#origin h1 .ch{ display:inline-block; will-change:transform; }
#origin .sub{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(18px, 2.4vw, 30px);
  color:var(--ivory);
}
#origin .sub em{ font-style:normal; color:var(--ember); }
#origin .lede{
  max-width:520px; margin:22px auto 0;
  color:var(--ivory-dim); font-size:15px;
}
#origin .scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
}
#origin .scroll-cue .line{
  width:1px; height:52px; overflow:hidden; background:var(--hair); position:relative;
}
#origin .scroll-cue .line i{
  position:absolute; top:-40%; left:0; width:1px; height:40%;
  background:var(--ember); display:block;
  animation:cueDrop 1.8s var(--ease-out) infinite;
}
@keyframes cueDrop{ to{ top:110%; } }

/* ---------- 02 genesis (pinned canvas scene, phases 01-04) ---------- */
#genesis{ height:100vh; overflow:hidden; }
#genesis canvas{ position:absolute; inset:0; width:100%; height:100%; }
#genesisCanvas{ opacity:1; transition:opacity .4s linear; }
#ecoCanvas{ opacity:0; pointer-events:none; transition:opacity .4s linear; }
#genesis.is-phase4 #ecoCanvas{ pointer-events:auto; }
#genesis .steps{
  position:absolute; left:var(--pad-x); top:50%;
  transform:translateY(-50%);
  width:min(70%, 620px); max-width:none; z-index:2;
  display:grid;
}
#genesis .step{
  position:relative;
  grid-area:1 / 1;
  width:100%;
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  pointer-events:none;
}
#genesis .step.is-active{ opacity:1; transform:none; pointer-events:auto; }
#genesis .step h3{
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(32px,6vw,84px); line-height:1.1;
  margin-top:16px;
  max-width:20ch;
}
#genesis .step p{ margin-top:14px; color:var(--ivory-dim); font-size:15px; max-width:52ch; }

/* phase 04 — interactive constellation overlay */
#genesis .hint{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  z-index:3; color:var(--ivory-faint); pointer-events:none;
  opacity:0; transition:opacity .5s var(--ease-out);
}
#genesis.is-phase4 .hint{ opacity:1; }
/* brand selector chips (touch / a11y) */
.eco-chips{
  position:absolute; bottom:64px; left:50%; transform:translateX(-50%);
  z-index:4; display:flex; gap:8px; flex-wrap:wrap; justify-content:center;
  padding:0 16px; max-width:720px;
  opacity:0; pointer-events:none;
  transition:opacity .5s var(--ease-out);
}
#genesis.is-phase4 .eco-chips{ opacity:1; pointer-events:auto; }
.eco-chips button{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ivory-dim);
  border:1px solid var(--hair); border-radius:100px;
  padding:8px 14px;
  transition:color .3s, border-color .3s, background .3s;
}
.eco-chips button:hover, .eco-chips button.is-active{
  color:var(--ivory); border-color:var(--chip, var(--ember));
  background:color-mix(in srgb, var(--chip, var(--ember)) 12%, transparent);
}
/* detail card */
.eco-card{
  position:absolute; z-index:5;
  right:var(--pad-x); top:50%;
  width:min(360px, calc(100vw - 40px));
  transform:translateY(-50%) translateX(24px);
  opacity:0; pointer-events:none;
  background:linear-gradient(160deg, rgba(18,20,34,.92), rgba(10,11,20,.92));
  border:1px solid var(--hair);
  border-radius:14px;
  padding:26px 26px 24px;
  backdrop-filter:blur(14px);
  transition:opacity .5s var(--ease-out), transform .5s var(--ease-out);
}
.eco-card.is-open{ opacity:1; pointer-events:auto; transform:translateY(-50%); }
.eco-card .card-top{ display:flex; align-items:center; justify-content:space-between; }
.eco-card .badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--ivory-dim);
}
.eco-card .badge i{ width:7px;height:7px;border-radius:50%;background:var(--accent,var(--ember));
  box-shadow:0 0 10px var(--accent,var(--ember)); display:inline-block; }
.eco-card .close{ color:var(--ivory-faint); font-size:18px; line-height:1; padding:4px; }
.eco-card .close:hover{ color:var(--ivory); }
.eco-card h3{
  font-family:var(--font-display); font-weight:600;
  font-size:30px; margin:14px 0 4px;
}
.eco-card .role{ color:var(--accent, var(--ember)); font-size:13px; font-weight:500; letter-spacing:.02em; }
.eco-card p{ margin-top:12px; color:var(--ivory-dim); font-size:14px; }
.eco-card .visit{
  margin-top:18px;
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--ivory);
  border-bottom:1px solid var(--accent, var(--ember));
  padding-bottom:6px;
}
.eco-card .visit svg{ transition:transform .3s var(--ease-out); }
.eco-card .visit:hover svg{ transform:translate(3px,-3px); }

/* ---------- 03 chapters (horizontal journey) ---------- */
#chapters{ overflow:hidden; }
#chapters .track{
  display:flex; height:100vh; width:max-content;
  will-change:transform;
}
.chapter{
  position:relative;
  width:100vw; height:100vh; flex-shrink:0;
  display:flex; align-items:center;
  padding:0 var(--pad-x);
  overflow:hidden;
}
.chapter .wash{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 80% 70% at 72% 42%,
     color-mix(in srgb, var(--accent) 13%, transparent) 0%,
     transparent 62%);
}
.chapter .ghost{
  position:absolute; right:-4vw; top:50%; transform:translateY(-50%);
  font-family:var(--font-display); font-weight:600;
  font-size:56vh; line-height:1;
  color:transparent;
  -webkit-text-stroke:1px color-mix(in srgb, var(--accent) 30%, transparent);
  pointer-events:none; user-select:none;
}
.chapter .col{ position:relative; max-width:640px; }
.chapter .idx{
  font-family:var(--font-mono); font-size:12px; letter-spacing:.26em;
  color:var(--accent);
}
.chapter .idx span{ color:var(--ivory-faint); }
.chapter h3{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(52px, 8.6vw, 128px); line-height:.98;
  margin:20px 0 10px;
}
.chapter .tag{
  font-family:var(--font-display); font-weight:400;
  font-size:clamp(17px,2vw,24px); color:var(--ivory-dim);
}
.chapter .tag b{ color:var(--accent); font-weight:500; }
.chapter p{ margin-top:20px; max-width:46ch; color:var(--ivory-dim); font-size:15px; }
.chapter .visit{
  margin-top:30px;
  display:inline-flex; align-items:center; gap:12px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius:100px; padding:14px 24px;
  transition:background .35s, color .35s;
  will-change:transform;
}
.chapter .visit:hover{
  background:color-mix(in srgb, var(--accent) 16%, transparent);
}
.chapter .link-node{
  width:7px;height:7px;border-radius:50%;
  background:var(--accent); box-shadow:0 0 10px var(--accent);
}
#chapters .rail{
  position:absolute; bottom:30px; left:var(--pad-x); right:var(--pad-x);
  height:1px; background:var(--hair); z-index:5;
}
#chapters .rail i{
  position:absolute; left:0; top:0; height:1px; width:0%;
  background:var(--ember); display:block;
}
#chapters .rail .mono{
  position:absolute; right:0; bottom:10px; letter-spacing:.3em;
}

/* ---------- 05 the loop (manifesto) ---------- */
#loop{
  padding:24vh var(--pad-x) 26vh;
  display:flex; flex-direction:column; align-items:center; gap:9vh;
  position:relative;
}
#loop .spine{
  position:absolute; top:0; bottom:0; left:50%; width:1px;
  background:linear-gradient(180deg, transparent, var(--ember-soft) 12%, var(--ember-soft) 88%, transparent);
  transform-origin:top center; transform:scaleY(0);
}
#loop .line{
  position:relative; z-index:1; text-align:center;
  font-family:var(--font-display); font-weight:500;
  font-size:clamp(30px, 5.4vw, 72px); line-height:1.06;
  max-width:16ch;
}
#loop .line em{ font-style:normal; }
#loop .line .accent{ color:var(--accent, var(--ember)); }
#loop .line.final{ font-weight:600; }
#loop .line.final .accent{ color:var(--ember); }
#loop .node-dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--ember); box-shadow:0 0 14px rgba(232,195,106,.8);
  position:relative; z-index:1;
}

/* ---------- 06 contact / footer ---------- */
#contact{
  border-top:1px solid var(--hair);
  padding:16vh var(--pad-x) 42px;
  position:relative; overflow:hidden;
}
#contact .glow{
  position:absolute; left:50%; bottom:-38vh; width:110vw; height:80vh;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at center,
    rgba(232,195,106,.12), transparent 62%);
  pointer-events:none;
}
#contact h2{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(44px, 8vw, 120px); line-height:1;
  margin:18px 0 40px; max-width:12ch;
}
#contact h2 em{ font-style:normal; color:var(--ember); }
.contact-grid{
  display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:48px;
  padding-top:48px; border-top:1px solid var(--hair);
}
.contact-grid h4{
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.24em; text-transform:uppercase;
  color:var(--ivory-faint); margin-bottom:20px;
}
.contact-grid ul{ list-style:none; display:flex; flex-direction:column; gap:10px; }
.contact-grid a{ color:var(--ivory-dim); font-size:14px; transition:color .3s; }
.contact-grid a:hover{ color:var(--ivory); }
.contact-grid .brand-link{ display:inline-flex; align-items:center; gap:10px; }
.contact-grid .brand-link i{
  width:6px;height:6px;border-radius:50%;
  background:var(--accent); box-shadow:0 0 8px var(--accent);
  display:inline-block;
}
.email-btn{
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--font-display); font-weight:500; font-size:clamp(17px,2vw,22px);
  color:var(--ivory);
  border:1px solid rgba(232,195,106,.5); border-radius:100px;
  padding:18px 30px;
  transition:background .35s;
  will-change:transform;
}
.email-btn:hover{ background:var(--ember-soft); }
.email-btn i{
  width:8px;height:8px;border-radius:50%;
  background:var(--ember); box-shadow:0 0 12px rgba(232,195,106,.8);
}
.footer-bottom{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  margin-top:80px; padding-top:26px; border-top:1px solid var(--hair);
  color:var(--ivory-faint); font-family:var(--font-mono); font-size:11px;
  letter-spacing:.18em; text-transform:uppercase;
}

/* ---------- brand logo badges (used in Chapters + Phase 04 detail card) ---------- */
.logo-badge{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:14px;
  background:#fff;
  padding:12px 18px;
}
.logo-badge.is-dark{
  background:linear-gradient(160deg, rgba(18,20,34,.95), rgba(10,11,20,.95));
  border:1px solid var(--hair);
}
.logo-badge img{ display:block; height:100%; width:auto; object-fit:contain; }

.chapter .logo-badge{ height:56px; margin-bottom:26px; }
.chapter .logo-badge img{ max-height:30px; max-width:150px; }

.eco-card .logo-badge{ height:38px; padding:8px 14px; border-radius:10px; }
.eco-card .logo-badge img{ max-height:20px; max-width:110px; }

/* ---------- reveal defaults ---------- */
[data-reveal]{ opacity:0; transform:translateY(38px); }
html.no-motion [data-reveal]{ opacity:1; transform:none; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .contact-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  #genesis .steps{ left:20px; right:20px; top:auto; bottom:85px; transform:none; max-width:none; align-items:end; }
  #genesis .step p{ display:none; }
  .eco-card{ right:50%; top:120px; bottom:auto;
    transform:translate(50%, -16px); }
  .eco-card.is-open{ transform:translate(50%, 0); }
  .eco-chips{
    bottom:20px;
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    width:100vw;
    padding:0 20px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none; /* Firefox */
  }
  .eco-chips::-webkit-scrollbar{ display:none; } /* Chrome/Safari */
  .eco-chips button{ flex-shrink:0; }
  #genesis .hint{ display:none; }
  .chapter .ghost{ font-size:34vh; right:-16vw; }
  .contact-grid{ grid-template-columns:1fr; gap:36px; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}
html.no-motion .cursor-dot, html.no-motion .cursor-ring{ display:none; }