/* ============================================================
   BUNCHIN 設計思想デッキ — deck.css
   High Contrast Terminal / Paperweight Anchor
   ============================================================ */

@font-face{font-family:"GenEi M Gothic 2";src:url("fonts/GenEiMGothic2-Regular.ttf") format("truetype");font-weight:400;font-display:swap;}
@font-face{font-family:"GenEi M Gothic 2";src:url("fonts/GenEiMGothic2-Medium.ttf") format("truetype");font-weight:500;font-display:swap;}
@font-face{font-family:"GenEi M Gothic 2";src:url("fonts/GenEiMGothic2-Heavy.ttf") format("truetype");font-weight:900;font-display:swap;}
@font-face{font-family:"DenkiChip";src:url("fonts/DenkiChip.ttf") format("truetype");font-weight:400;font-display:swap;}

:root{
  /* families */
  --font-display:"GenEi M Gothic 2","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-body:"GenEi M Gothic 2","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-mono:"JetBrains Mono","SFMono-Regular","Consolas",monospace;
  --font-pixel:"DenkiChip","JetBrains Mono",monospace;

  /* color */
  --flat-black:#050505;
  --panel:#0D0D0D;
  --panel-2:#111111;
  --line:#262626;
  --line-2:#1A1A1A;
  --fg1:#F7F3EA;
  --fg2:#9C9C9C;
  --fg3:#5E5E5E;
  --blue:#6EB6FF;
  --yellow:#FFE45C;
  --amber:#FFC24D;
  --green:#78FF9E;
  --coral:#FF7B66;

  /* type scale @1920x1080 */
  --type-mega:128px;
  --type-display:92px;
  --type-title:62px;
  --type-subtitle:40px;
  --type-lead:34px;
  --type-body:28px;
  --type-small:25px;
  --type-kicker:25px;

  /* spacing */
  --pad-x:112px;
  --pad-top:84px;
  --pad-bottom:80px;
  --gap-title:40px;
  --gap-item:24px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--flat-black);}
deck-stage:not(:defined){visibility:hidden;}
deck-stage{background:#000;}

section{
  background:var(--flat-black);
  color:var(--fg1);
  font-family:var(--font-body);
  overflow:hidden;
}

/* faint grid texture */
.grid-bg::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(0deg,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:64px 64px;
}
.scanlines::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0,rgba(255,255,255,.022) 1px,transparent 1px,transparent 3px);
}

/* ---- shared slide frame ---- */
.frame{
  position:absolute;inset:0;
  padding:var(--pad-top) var(--pad-x) var(--pad-bottom);
  display:flex;flex-direction:column;
}

/* ---- kicker / labels ---- */
.kicker{
  font-family:var(--font-mono);font-weight:500;
  font-size:var(--type-kicker);letter-spacing:.22em;text-transform:uppercase;
  color:var(--fg2);
  display:flex;align-items:center;gap:18px;
}
.kicker .sq{width:13px;height:13px;background:var(--fg2);display:inline-block;}
.kicker .num{color:var(--fg1);}
.kicker.acc-blue .sq{background:var(--blue);}
.kicker.acc-amber .sq{background:var(--amber);}
.kicker.acc-yellow .sq{background:var(--yellow);}
.kicker.acc-green .sq{background:var(--green);}
.kicker.acc-coral .sq{background:var(--coral);}

/* ---- headings ---- */
.h-title{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--type-title);line-height:1.06;letter-spacing:-.01em;
  color:var(--fg1);margin:0;text-wrap:pretty;
}
.h-display{
  font-family:var(--font-display);font-weight:900;
  font-size:var(--type-display);line-height:1.02;letter-spacing:-.015em;
  color:var(--fg1);margin:0;text-wrap:balance;
}
.lead{
  font-family:var(--font-body);font-weight:400;
  font-size:var(--type-lead);line-height:1.5;color:var(--fg2);margin:0;
  max-width:1180px;text-wrap:pretty;
}
.body{
  font-family:var(--font-body);font-weight:400;
  font-size:var(--type-body);line-height:1.62;color:var(--fg1);margin:0;
  text-wrap:pretty;
}
em.hl{font-style:normal;color:var(--fg1);font-weight:500;border-bottom:2px solid var(--accent,var(--fg1));padding-bottom:1px;}
.pixel{font-family:var(--font-pixel);letter-spacing:.04em;}
.mono{font-family:var(--font-mono);}

/* ---- lens two-column ---- */
.lens{
  display:grid;grid-template-columns:1fr 1px 1.05fr;gap:0;
  flex:1;min-height:0;margin-top:auto;
}
.lens-col{display:flex;flex-direction:column;gap:var(--gap-item);padding-top:var(--gap-title);}
.lens-col.left{padding-right:64px;}
.lens-col.right{padding-left:64px;}
.lens-rule{background:var(--line);width:1px;}
.col-label{
  font-family:var(--font-mono);font-weight:500;font-size:24px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fg3);
  display:flex;align-items:center;gap:14px;margin-bottom:6px;
}
.col-label .bar{width:34px;height:2px;background:var(--fg3);}
.lens-col.right .col-label{color:var(--accent,var(--fg1));}
.lens-col.right .col-label .bar{background:var(--accent,var(--fg1));}

.theory{display:flex;flex-direction:column;gap:6px;}
.theory-name{font-family:var(--font-display);font-weight:500;font-size:32px;line-height:1.2;color:var(--fg1);}
.theory-src{font-family:var(--font-mono);font-size:24px;letter-spacing:.02em;color:var(--fg3);}
.theory-desc{font-size:var(--type-small);line-height:1.5;color:var(--fg2);}

.build{display:flex;flex-direction:column;gap:10px;}
.build .body{font-size:var(--type-body);}

/* ---- section divider ---- */
.divider .part-no{
  font-family:var(--font-mono);font-weight:700;font-size:26px;letter-spacing:.3em;
  text-transform:uppercase;color:var(--accent,var(--fg1));
}
.divider .h-display{margin-top:auto;}
.div-bar{height:6px;width:0;background:var(--accent,var(--fg1));margin-top:40px;}
[data-deck-active] .div-bar{animation:none;}

/* ---- quote ---- */
.quote{
  font-family:var(--font-display);font-weight:900;
  font-size:78px;line-height:1.18;letter-spacing:-.01em;color:var(--fg1);
  margin:0;text-wrap:balance;
}
.quote .accent{color:var(--accent,var(--green));}

/* ---- chips ---- */
.chip{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-mono);font-size:24px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--fg2);border:1px solid var(--line);padding:12px 20px;
}
.chip .dot{width:10px;height:10px;display:inline-block;}

/* ---- color blocks ---- */
.swatch{display:flex;flex-direction:column;justify-content:flex-end;padding:26px;min-height:0;border:1px solid var(--line);}
.swatch .nm{font-family:var(--font-pixel);font-size:34px;letter-spacing:.04em;}
.swatch .st{font-family:var(--font-mono);font-size:24px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg2);margin-top:8px;}
.swatch .hx{font-family:var(--font-mono);font-size:24px;letter-spacing:.08em;color:var(--fg3);margin-top:6px;}

/* ---- device screen mock ---- */
.lcd{
  position:relative;background:#000;border:1px solid #1c1c1c;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.lcd .lcd-scan{position:absolute;inset:0;pointer-events:none;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0,rgba(255,255,255,.04) 1px,transparent 1px,transparent 3px);}
.lcd .topbar{position:absolute;top:16px;left:18px;right:18px;display:flex;justify-content:space-between;font-family:var(--font-pixel);font-size:24px;letter-spacing:.06em;}
.lcd .signal{position:absolute;bottom:40px;font-family:var(--font-pixel);font-size:30px;letter-spacing:.12em;}
.lcd .baseline{position:absolute;bottom:24px;left:0;right:0;height:2px;}

/* footer mark on most slides */
.foot{
  position:absolute;left:var(--pad-x);bottom:38px;right:var(--pad-x);
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--font-mono);font-size:15px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg3);
}
.foot .wm{font-family:var(--font-pixel);letter-spacing:.06em;color:var(--fg2);font-size:17px;}

/* entrance */
@media (prefers-reduced-motion:no-preference){
  [data-deck-active] .anim{animation:rise .6s both cubic-bezier(.2,.7,.2,1);}
  [data-deck-active] .anim-2{animation:rise .6s .08s both cubic-bezier(.2,.7,.2,1);}
  [data-deck-active] .anim-3{animation:rise .6s .16s both cubic-bezier(.2,.7,.2,1);}
  [data-deck-active] .div-bar{animation:grow .7s .2s both cubic-bezier(.3,.7,.2,1);}
}
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes grow{from{width:0;}to{width:240px;}}