/* ============================================================
   JBNC SOLUTIONS — company hub
   3-tier vertical split. Each panel previews its product's world
   (its palette + display font). Hover/focus expands a panel;
   clicking enters that product's page. Entering Dandori fires a
   katana-slice transition.
   ============================================================ */

:root{
  --ink:#07090c;
  --paper:#f3eee3;
  --paper-dim:rgba(243,238,227,.6);
  --paper-faint:rgba(243,238,227,.32);
  --ease:cubic-bezier(.16,1,.3,1);

  /* per-product accents */
  --camp-bg1:#0B1F1F; --camp-bg2:#0a1815; --camp-accent:#E89B3C;
  --dan-bg1:#1a0f0c;  --dan-bg2:#0b0a09;   --dan-accent:#e6391c;
  --klas-bg1:#0e1430; --klas-bg2:#080b1a;  --klas-accent:#f5c451;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--ink);color:var(--paper);
  font-family:"Inter",system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  overflow:hidden;
}
a{color:inherit;text-decoration:none}

/* ---------- Top brand bar ---------- */
.topbar{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:26px 24px 0;pointer-events:none}
.topbar .wm{font-family:"Inter",sans-serif;font-weight:800;letter-spacing:.42em;font-size:clamp(.95rem,2vw,1.3rem);
  text-transform:uppercase;text-indent:.42em}
.topbar .wm em{font-style:normal;color:var(--paper-dim);font-weight:500}
.topbar .tag{margin-top:8px;font-family:"JetBrains Mono",monospace;font-size:.66rem;letter-spacing:.26em;
  text-transform:uppercase;color:var(--paper-faint)}

/* ---------- Split container ---------- */
.split{display:flex;width:100vw;height:100vh}
.panel{
  position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(28px,4vw,56px);
  transition:flex-grow .7s var(--ease),filter .5s var(--ease),opacity .5s var(--ease);
  border-right:1px solid rgba(0,0,0,.5);
  outline:none;
}
.panel:last-child{border-right:none}

/* per-product theming */
.panel.camp{background:linear-gradient(165deg,var(--camp-bg1),var(--camp-bg2));--accent:var(--camp-accent)}
.panel.dan {background:linear-gradient(165deg,var(--dan-bg1),var(--dan-bg2));--accent:var(--dan-accent)}
.panel.klas{background:linear-gradient(165deg,var(--klas-bg1),var(--klas-bg2));--accent:var(--klas-accent)}

/* expand on hover / keyboard focus */
.split:hover .panel{flex-grow:.72;filter:saturate(.7) brightness(.72)}
.split .panel:hover,.split .panel:focus-visible,.panel.is-active{flex-grow:2.6;filter:none}
.split:not(:hover) .panel:focus-visible{flex-grow:2.6;filter:none}

/* darken siblings when one is keyboard-active */
.split.has-active .panel:not(.is-active){flex-grow:.72;filter:saturate(.7) brightness(.72)}

/* ---------- background glyph ---------- */
.p-glyph{position:absolute;top:50%;left:50%;transform:translate(-50%,-55%);z-index:0;
  opacity:.07;pointer-events:none;line-height:1;white-space:nowrap;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.panel:hover .p-glyph,.panel.is-active .p-glyph{opacity:.12;transform:translate(-50%,-58%) scale(1.05)}
.p-glyph.kanji{font-family:"Shippori Mincho",serif;font-weight:800;font-size:46vh;color:var(--dan-accent)}
.p-glyph.frau{font-family:"Fraunces",serif;font-style:italic;font-weight:300;font-size:30vh;color:var(--camp-accent)}
.p-glyph svg{width:42vh;height:42vh;stroke:var(--klas-accent);fill:none;stroke-width:1.4;opacity:.9}

/* accent rule at top of each panel */
.p-rule{position:absolute;top:0;left:0;height:4px;width:100%;background:var(--accent);
  transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.panel:hover .p-rule,.panel.is-active .p-rule,.panel:focus-visible .p-rule{transform:scaleX(1)}

/* ---------- panel content ---------- */
.p-content{position:relative;z-index:2;max-width:520px}
.p-eyebrow{font-family:"JetBrains Mono",monospace;font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:.7em;margin-bottom:14px}
.p-eyebrow .idx{opacity:.7}
.p-name{line-height:.98;margin-bottom:10px}
.panel.camp .p-name{font-family:"Fraunces",serif;font-weight:300;font-size:clamp(2.2rem,4.6vw,4rem)}
.panel.camp .p-name em{font-style:italic}
.panel.dan  .p-name{font-family:"Zen Kaku Gothic New",sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(2.1rem,4.4vw,3.8rem)}
.panel.klas .p-name{font-family:"Plus Jakarta Sans",sans-serif;font-weight:800;letter-spacing:-.02em;font-size:clamp(2.2rem,4.6vw,4rem)}
.panel.klas .p-name em{font-style:normal;color:var(--klas-accent)}
.p-line{font-size:clamp(1rem,1.5vw,1.22rem);color:var(--paper);font-weight:500;max-width:30ch;margin-bottom:18px}

/* the "more" layer — revealed on expand */
.p-more{max-height:0;opacity:0;overflow:hidden;
  transition:max-height .6s var(--ease),opacity .5s var(--ease) .05s,transform .5s var(--ease);
  transform:translateY(8px)}
.panel:hover .p-more,.panel.is-active .p-more,.panel:focus-visible .p-more{max-height:280px;opacity:1;transform:none}
.p-bullets{list-style:none;display:flex;flex-direction:column;gap:9px;margin:4px 0 22px}
.p-bullets li{font-size:.92rem;color:var(--paper-dim);padding-left:22px;position:relative;line-height:1.45}
.p-bullets li::before{content:"";position:absolute;left:0;top:.46em;width:10px;height:6px;
  border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}
.p-enter{display:inline-flex;align-items:center;gap:10px;font-family:"JetBrains Mono",monospace;
  font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  padding:13px 22px;border-radius:10px;background:var(--accent);
  color:#0b0a09;transition:gap .25s var(--ease),box-shadow .25s,transform .25s}
.panel.klas .p-enter{color:#241a02}
.panel:hover .p-enter{gap:16px;box-shadow:0 12px 30px rgba(0,0,0,.4)}
.p-enter svg{width:18px;height:8px;stroke:currentColor;stroke-width:1.4;fill:none}

/* collapsed hint shown when nothing is hovered */
.p-hint{position:absolute;bottom:clamp(28px,4vw,56px);right:clamp(28px,4vw,56px);z-index:2;
  font-family:"JetBrains Mono",monospace;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--paper-faint);opacity:1;transition:opacity .4s}
.panel:hover .p-hint,.panel.is-active .p-hint{opacity:0}

/* ---------- katana-slice rig (Dandori entry) ---------- */
#flash{position:fixed;inset:0;z-index:90;background:#fff;opacity:0;pointer-events:none}
#katana-rig{position:fixed;inset:0;z-index:91;pointer-events:none;display:none}
#katana-rig.live{display:block}
.katana{position:absolute;top:50%;left:0;display:flex;align-items:center;
  transform:translate(-60vw,-50%) rotate(-4deg);filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))}
.tsuka{width:clamp(48px,7vw,92px);height:clamp(10px,1.5vw,18px);
  background:repeating-linear-gradient(45deg,#1a1714 0 5px,#2a241e 5px 10px);border-radius:3px}
.tsuba{width:clamp(7px,.9vw,12px);height:clamp(20px,3vw,38px);background:linear-gradient(#3a3a3e,#17171a);border-radius:3px;margin:0 1px}
.blade{width:clamp(220px,46vw,720px);height:clamp(8px,1.2vw,15px);position:relative;
  background:linear-gradient(to bottom,#fff 0%,#eef1f5 30%,#b9bfc7 52%,#d7dce2 70%,#f4f6f9 100%);
  clip-path:polygon(0 0,calc(100% - 26px) 0,100% 50%,calc(100% - 26px) 100%,0 100%)}
.streak{position:absolute;left:-6%;right:-6%;top:50%;height:2px;transform:translateY(-50%) scaleX(0);transform-origin:left center;
  background:linear-gradient(90deg,transparent,#fff 18%,var(--dan-accent) 50%,#fff 82%,transparent);
  box-shadow:0 0 22px 2px rgba(255,255,255,.6);opacity:0}

/* shared: the real destination page, rendered behind a rig and revealed as it opens */
.reveal-frame{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:0;background:#0b0a09}

/* ---------- firefly-gather rig (Campsite entry) — lights converge, then burst onto the page ---------- */
#fire-rig{position:fixed;inset:0;z-index:91;display:none;background:#0B1F1F}
#fire-rig.live{display:block}
#fire-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
#fire-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(248,224,150,.95), rgba(232,170,80,.4) 30%, rgba(232,155,60,0) 60%)}

/* ---------- star-warp rig (Klaslink entry) — dive through the night sky onto the page ---------- */
#warp-rig{position:fixed;inset:0;z-index:91;display:none;background:#070a18}
#warp-rig.live{display:block}
#warp-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2}
#warp-flash{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 50%, rgba(245,196,81,.95), rgba(245,196,81,.25) 34%, rgba(245,196,81,0) 62%)}

/* ---------- mobile: stacked accordion ---------- */
@media (max-width:820px){
  body{overflow:auto}
  .split{flex-direction:column;height:auto;min-height:100vh}
  .panel{flex:none;min-height:30vh;justify-content:flex-end;border-right:none;border-bottom:1px solid rgba(0,0,0,.5)}
  .split:hover .panel,.split.has-active .panel:not(.is-active){flex-grow:0;filter:none}
  .panel.is-active{min-height:74vh}
  .p-glyph.kanji{font-size:30vh}.p-glyph.frau{font-size:20vh}.p-glyph svg{width:26vh;height:26vh}
  .p-more{max-height:0}
  .panel.is-active .p-more{max-height:320px;opacity:1;transform:none}
  .p-hint{display:none}
  .topbar{position:static;padding-top:84px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
}