/* ============================================================
   MIRA プロジェクトページ  style.css
   ============================================================ */
:root{
  --ink:#07131F; --deep:#0B1A2A; --panel:#0E2130;
  --pine:#2C6B63; --pine-soft:#4A8B82; --coral:#EE7A54; --coral-deep:#D45F3B;
  --sand:#F6F2EC; --mist:rgba(246,242,236,.55); --faint:rgba(246,242,236,.32);
  --ff-disp:"Zen Old Mincho",serif;
  --ff-body:"Zen Kaku Gothic New",sans-serif;
  --ff-mono:"IBM Plex Mono",monospace;
  --maxw:1180px;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--ink);color:var(--sand);font-family:var(--ff-body);
  line-height:2;overflow-x:hidden;font-feature-settings:"palt";}
canvas{display:block;}
img{max-width:100%;height:auto;display:block;}
::selection{background:rgba(238,122,84,.25);}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px;}

/* ============ 密码门 ============ */
#gate{position:fixed;inset:0;z-index:1000;background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  background-image:linear-gradient(rgba(7,19,31,.55),rgba(7,19,31,.85)),url('../img/hero.jpg');
  background-size:cover;background-position:center 60%;
  transition:opacity 1.4s ease, visibility 1.4s ease;}
#gate.hidden{opacity:0;visibility:hidden;}
.gate-inner{position:relative;z-index:2;text-align:center;padding:0 24px;}
.gate-dot{width:9px;height:9px;border-radius:50%;background:var(--coral);margin:0 auto 30px;
  box-shadow:0 0 22px 6px rgba(238,122,84,.5);animation:breathe 4s ease-in-out infinite;}
@keyframes breathe{0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.25);}}
.gate-inner p{font-size:12.5px;letter-spacing:.16em;color:var(--mist);margin-bottom:30px;line-height:2.1;}
.gate-field{position:relative;display:inline-block;}
#pw{background:transparent;border:none;border-bottom:1px solid rgba(246,242,236,.25);
  color:var(--sand);font-family:var(--ff-body);font-size:16px;letter-spacing:.28em;
  width:230px;text-align:center;padding:10px 30px 12px 10px;transition:.3s;}
#pw:focus{outline:none;border-bottom-color:var(--coral);}
#pw::placeholder{color:rgba(246,242,236,.22);letter-spacing:.18em;}
.gate-enter{position:absolute;right:0;top:50%;transform:translateY(-50%);
  width:22px;height:22px;border-radius:50%;border:1px solid rgba(238,122,84,.5);
  background:transparent;cursor:pointer;transition:.3s;display:flex;align-items:center;justify-content:center;}
.gate-enter::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 8px 2px rgba(238,122,84,.5);animation:pulse 3s ease-in-out infinite;}
.gate-enter:hover{background:rgba(238,122,84,.15);border-color:var(--coral);}
@keyframes pulse{0%,100%{opacity:.6;transform:scale(1);}50%{opacity:1;transform:scale(1.3);}}
.gate-err{color:var(--coral);font-size:11.5px;letter-spacing:.1em;margin-top:20px;height:14px;opacity:0;transition:opacity .4s;}
.gate-err.show{opacity:.9;}

/* ============ Hero ============ */
.hero{position:relative;height:100vh;min-height:620px;width:100%;overflow:hidden;
  display:flex;align-items:center;justify-content:center;}
.hero-bg{position:absolute;inset:0;z-index:0;
  background:url('../img/hero.jpg') center 58%/cover no-repeat, var(--ink);
  animation:heroBreath 14s ease-in-out infinite;}
@keyframes heroBreath{0%,100%{transform:scale(1);filter:brightness(1);}50%{transform:scale(1.04);filter:brightness(1.08);}}
.hero-stars{position:absolute;inset:0;z-index:1;pointer-events:none;}
.hero::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(7,19,31,.5),rgba(7,19,31,0) 26%,rgba(7,19,31,0) 60%,var(--ink));}
/* 进入渐亮 */
.hero-veil{position:absolute;inset:0;z-index:5;background:var(--ink);opacity:1;
  transition:opacity 2.6s ease;pointer-events:none;}
body.lit .hero-veil{opacity:0;}
.hero-inner{position:relative;z-index:4;text-align:center;padding:0 24px;transform:translateY(-5vh);}
.hero-eyebrow{font-family:var(--ff-mono);font-size:11px;letter-spacing:.4em;color:var(--coral);
  margin-bottom:32px;opacity:0;transition:opacity 1.4s ease 1.5s;text-transform:uppercase;}
body.lit .hero-eyebrow{opacity:1;}
.hero h1{font-family:var(--ff-disp);font-weight:500;font-size:clamp(38px,6vw,72px);
  letter-spacing:.14em;line-height:1.35;margin-bottom:30px;}
.hero h1 .ch{display:inline-block;opacity:0;transform:translateY(18px) scale(1.35);filter:blur(12px);
  transition:opacity 1s ease,transform 1s ease,filter 1s ease;}
.hero-sub{font-family:var(--ff-disp);font-size:clamp(15px,2vw,21px);letter-spacing:.2em;
  color:rgba(246,242,236,.85);opacity:0;transition:opacity 1.6s ease 2.8s;}
body.lit .hero-sub{opacity:1;}
.scroll-hint{position:absolute;bottom:42px;left:50%;transform:translateX(-50%);z-index:4;
  opacity:0;transition:opacity 1.4s ease 3.4s;text-align:center;}
body.lit .scroll-hint{opacity:1;}
.scroll-hint span{display:block;font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.32em;color:var(--mist);margin-bottom:12px;}
.scroll-hint .line{width:1px;height:48px;background:linear-gradient(var(--coral),transparent);margin:0 auto;
  animation:flow 2.4s ease-in-out infinite;transform-origin:top;}
@keyframes flow{0%{transform:scaleY(0);opacity:0;}45%{opacity:1;}100%{transform:scaleY(1);opacity:0;}}

/* ============ 章節共通 ============ */
.chapter{position:relative;padding:130px 0;}
.chapter--narrow .wrap{max-width:720px;}
.ch-num{font-family:var(--ff-mono);font-size:11px;letter-spacing:.32em;color:var(--coral);
  text-transform:uppercase;margin-bottom:28px;display:block;}
/* 字号阶梯：标题 28-34 / 正文 16.5-17.5，差距缩小，中间用行距和留白过渡 */
.ch-lead{font-family:var(--ff-disp);font-weight:500;font-size:clamp(21px,2.6vw,31px);
  line-height:1.85;letter-spacing:.04em;margin-bottom:40px;color:var(--sand);}
.ch-body{font-size:clamp(15.5px,1.15vw,17px);line-height:2.3;color:rgba(246,242,236,.8);
  letter-spacing:.02em;font-weight:300;}
.ch-body p{margin-bottom:1.7em;}
.ch-body p:last-child{margin-bottom:0;}
.ch-body .em{color:var(--coral);font-weight:400;}
.ch-body .soft{color:var(--mist);}

/* 章節間の過渡帯 */
.divider{position:relative;height:200px;display:flex;align-items:center;justify-content:center;}
.divider .d-dot{width:6px;height:6px;border-radius:50%;background:var(--coral);
  box-shadow:0 0 18px 5px rgba(238,122,84,.4);animation:breathe 5s ease-in-out infinite;position:relative;z-index:2;}
.divider .d-line{position:absolute;top:0;left:50%;width:1px;height:100%;
  background:linear-gradient(transparent,rgba(74,139,130,.35),transparent);}

/* 叙事段（1-3）：左右分栏。图は文字より広く、画面端へせり出す（方案A） */
.story{position:relative;padding:120px 0;overflow:hidden;}
/* wrap を使わず、フル幅グリッドで図を端まで伸ばす */
.story-grid{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);
  gap:56px;align-items:center;max-width:1440px;margin:0 auto;
  padding-left:max(28px,calc((100vw - var(--maxw))/2));padding-right:0;}
.story--rev .story-grid{grid-template-columns:minmax(0,1fr) minmax(0,460px);
  padding-left:0;padding-right:max(28px,calc((100vw - var(--maxw))/2));}
.story--rev .story-text{order:2;}
.story--rev .story-fig{order:1;}
.story-text{max-width:460px;}
.story--rev .story-text{justify-self:end;}
.story-fig{position:relative;border-radius:14px 0 0 14px;overflow:hidden;
  aspect-ratio:16/10;background:#060f18;box-shadow:0 24px 70px rgba(0,0,0,.5);
  border:1px solid rgba(74,139,130,.18);border-right:none;
  opacity:0;transform:scale(1.03);transition:opacity 1.4s ease,transform 1.8s ease;}
.story--rev .story-fig{border-radius:0 14px 14px 0;border-right:1px solid rgba(74,139,130,.18);border-left:none;}
.story.in .story-fig{opacity:1;transform:scale(1);}
.story-fig img{width:100%;height:100%;object-fit:cover;
  animation:figBreath 18s ease-in-out infinite;cursor:zoom-in;}
@keyframes figBreath{0%,100%{transform:scale(1);}50%{transform:scale(1.045);}}

/* 説明段（4-6）：图居中清晰 */
.explain{text-align:center;}
.explain .ch-num,.explain .ch-lead{text-align:center;}
.explain .ch-lead{margin-left:auto;margin-right:auto;max-width:20em;}
.explain-fig{margin:48px auto 0;max-width:1080px;border-radius:10px;overflow:hidden;
  box-shadow:0 20px 60px rgba(0,0,0,.4);border:1px solid rgba(74,139,130,.15);}
.explain-fig img{width:100%;}
.explain-caption{margin-top:22px;font-size:13px;color:var(--mist);letter-spacing:.04em;}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s ease;}
.rv.in{opacity:1;transform:none;}
.rv.d1{transition-delay:.12s;} .rv.d2{transition-delay:.24s;} .rv.d3{transition-delay:.36s;}

/* ============ 応答機制 3枚カード ============ */
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:52px;}
.principle{background:linear-gradient(180deg,rgba(22,48,62,.55),rgba(14,33,48,.4));
  border:1px solid rgba(74,139,130,.22);border-radius:10px;padding:38px 30px;text-align:center;transition:.35s;}
.principle:nth-child(3){border-color:rgba(238,122,84,.4);}
.principle:hover{transform:translateY(-5px);border-color:rgba(238,122,84,.5);box-shadow:0 16px 40px rgba(0,0,0,.35);}
.principle .p-tag{font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;color:var(--mist);margin-bottom:18px;text-transform:uppercase;}
.principle .p-icon{width:52px;height:52px;margin:0 auto 22px;border-radius:50%;
  background:radial-gradient(circle,rgba(238,122,84,.85),rgba(238,122,84,0) 70%);
  display:flex;align-items:center;justify-content:center;}
.principle h3{font-family:var(--ff-disp);font-size:18px;font-weight:600;color:var(--coral);margin-bottom:16px;line-height:1.5;}
.principle p{font-size:13.5px;line-height:1.95;color:rgba(246,242,236,.78);}
.principle .p-note{margin-top:18px;padding-top:16px;border-top:1px solid rgba(74,139,130,.18);
  font-size:12.5px;color:var(--mist);line-height:1.85;}

/* ============ Q&A ============ */
.qa-list{max-width:800px;margin:52px auto 0;}
.qa-item{border-bottom:1px solid rgba(74,139,130,.18);}
.qa-q{width:100%;background:none;border:none;cursor:pointer;text-align:left;
  padding:26px 44px 26px 0;position:relative;color:var(--sand);font-family:var(--ff-body);
  font-size:clamp(15px,1.7vw,17px);letter-spacing:.03em;line-height:1.6;transition:color .25s;}
.qa-q:hover{color:var(--coral);}
.qa-q::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1.5px solid var(--coral);border-bottom:1.5px solid var(--coral);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s;}
.qa-item.open .qa-q::after{transform:translateY(-30%) rotate(225deg);}
.qa-a{max-height:0;overflow:hidden;transition:max-height .45s ease;}
.qa-a-inner{padding:0 0 30px;font-size:14.5px;line-height:2.1;color:rgba(246,242,236,.8);}
.qa-item.open .qa-a{max-height:400px;}

/* ============ Footer ============ */
.foot{position:relative;padding:100px 0 50px;text-align:center;border-top:1px solid rgba(74,139,130,.15);}
.foot .f-dot{width:8px;height:8px;border-radius:50%;background:var(--coral);margin:0 auto 30px;
  box-shadow:0 0 20px 6px rgba(238,122,84,.4);animation:breathe 5s ease-in-out infinite;}
.foot .f-word{font-family:var(--ff-disp);font-size:clamp(17px,2.4vw,24px);letter-spacing:.1em;
  line-height:1.9;margin-bottom:40px;color:rgba(246,242,236,.9);}
.foot .f-back{display:inline-block;font-family:var(--ff-mono);font-size:12px;letter-spacing:.14em;
  color:var(--coral);text-decoration:none;border:1px solid rgba(238,122,84,.4);
  padding:12px 28px;border-radius:999px;transition:.3s;}
.foot .f-back:hover{background:rgba(238,122,84,.12);}
.foot .f-copy{margin-top:44px;font-size:11px;letter-spacing:.1em;color:var(--faint);}

.demo-note{position:fixed;top:12px;left:12px;z-index:1100;font-family:var(--ff-mono);font-size:10px;
  letter-spacing:.06em;color:rgba(246,242,236,.3);background:rgba(0,0,0,.45);padding:5px 11px;border-radius:4px;}

/* ============ レスポンシブ ============ */
@media (max-width:860px){
  .chapter{padding:88px 0;}
  .story{padding:80px 0;}
  /* 上下堆叠：图在上、文在下，图全宽显示 */
  .story-grid{grid-template-columns:1fr!important;gap:32px;
    padding-left:22px!important;padding-right:22px!important;max-width:100%;}
  .story--rev .story-grid{grid-template-columns:1fr!important;}
  .story-text{max-width:100%!important;order:2;justify-self:stretch!important;}
  .story-fig{order:1;aspect-ratio:16/10;border-radius:12px!important;
    border:1px solid rgba(74,139,130,.18)!important;}
  .story-fig img{animation:none;cursor:default;}
  .principles{grid-template-columns:1fr;gap:18px;}
  .divider{height:130px;}
  .explain-fig{margin-top:32px;}
  .ch-lead{font-size:clamp(20px,5.4vw,26px);line-height:1.8;}
  .ch-body{font-size:16px;line-height:2.2;}
}
@media (max-width:480px){
  .wrap{padding:0 22px;}
  .chapter{padding:72px 0;}
  .story{padding:64px 0;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;}
  .hero-bg{animation:none!important;}
  .hero h1 .ch{opacity:1;transform:none;filter:none;}
  .rv{opacity:1;transform:none;}
  .story-bg{opacity:.92;transform:none;}
}

/* ============ DEMO 入口 ============ */
.demo-entry{padding-top:40px;padding-bottom:100px;}
.demo-card{max-width:720px;margin:0 auto;text-align:center;
  background:linear-gradient(180deg,rgba(22,48,62,.5),rgba(14,33,48,.35));
  border:1px solid rgba(74,139,130,.22);border-radius:14px;padding:64px 44px;}
.demo-tag{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.28em;color:var(--coral);
  text-transform:uppercase;display:block;margin-bottom:26px;}
.demo-lead{font-family:var(--ff-disp);font-weight:500;font-size:clamp(19px,2.4vw,26px);
  line-height:1.75;letter-spacing:.04em;margin-bottom:22px;color:var(--sand);}
.demo-desc{font-size:14.5px;color:rgba(246,242,236,.7);line-height:2;margin-bottom:38px;}
.demo-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--ff-body);
  font-size:15px;letter-spacing:.1em;color:var(--sand);text-decoration:none;
  border:1px solid rgba(238,122,84,.5);border-radius:999px;padding:15px 40px;transition:.3s;position:relative;}
.demo-btn::after{content:"→";color:var(--coral);transition:transform .3s;}
.demo-btn:hover{background:rgba(238,122,84,.12);border-color:var(--coral);}
.demo-btn:hover::after{transform:translateX(4px);}
.demo-caveat{margin-top:30px;font-size:11.5px;letter-spacing:.04em;color:var(--faint);line-height:1.8;}
@media (max-width:820px){
  .demo-card{padding:48px 26px;}
  .demo-entry{padding-bottom:72px;}
}