/* ナイショAI — teaser. 依存ゼロ。動画がなくても完成品として成立させること。 */

:root{
  --bg:#07070a;
  --bg-2:#0d0d13;
  --ink:#e9e5dd;
  --ink-dim:#8d8880;
  --gold:#c8a96a;
  --measure:min(92vw, 34rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP","Times New Roman",serif;
  font-weight:400;
  line-height:2;
  letter-spacing:.09em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* 背景 ─ 動画がなくてもここだけで成立する */
.veil{
  position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(130% 85% at 50% -12%, #1c1c28 0%, #101018 38%, transparent 66%),
    radial-gradient(90% 60% at 80% 110%, #12100c 0%, transparent 65%),
    linear-gradient(180deg,var(--bg) 0%,var(--bg-2) 55%,var(--bg) 100%);
  animation:drift 48s var(--ease) infinite alternate;
}
@keyframes drift{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.08) translate3d(0,-1.5%,0)}
}
.grain{
  position:fixed; inset:-50%; z-index:-1; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

main{position:relative}

/* ── HERO ───────────────────────────── */
.hero{
  min-height:100svh; min-height:100vh;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:6rem 1.5rem 5rem; position:relative; text-align:center;
}
.hero-media{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:-1; opacity:.34;
}
.hero-media[hidden]{display:none}

.invited{
  margin:0 0 3.5rem; font-size:.78rem; letter-spacing:.22em; color:var(--gold);
  opacity:0; animation:fade 1.6s var(--ease) .5s forwards;
}
.invited[hidden]{display:none}

.hashtag{
  margin:0; font-weight:400;
  font-size:clamp(2rem,8.5vw,3.9rem);
  line-height:1.55; letter-spacing:.14em;
  opacity:0; animation:rise 2.2s var(--ease) .3s forwards;
}
@keyframes rise{from{opacity:0;transform:translateY(1.2rem)}to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}

.scroll-hint{
  position:absolute; bottom:3.2rem; left:50%; transform:translateX(-50%);
  width:1px; height:4.5rem; overflow:hidden;
  background:linear-gradient(to bottom,transparent,rgba(233,229,221,.16));
}
.scroll-hint span{
  position:absolute; top:0; left:0; width:1px; height:1.6rem;
  background:var(--gold); animation:fall 3.4s var(--ease) infinite;
}
@keyframes fall{0%{top:-1.6rem;opacity:0}30%{opacity:1}100%{top:4.5rem;opacity:0}}

/* ── 記憶の断片 ─────────────────────── */
.fragments{padding:0 1.5rem}
.fragment{
  min-height:86svh; min-height:86vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  max-width:var(--measure); margin:0 auto; text-align:center;
  padding:4rem 0;
  opacity:0; transform:translateY(1.4rem);
  transition:opacity 1.5s var(--ease), transform 1.5s var(--ease);
}
.fragment.seen{opacity:1; transform:none}
.line{
  margin:0 0 .45em; font-size:clamp(1.12rem,4.6vw,1.6rem);
  line-height:2.1; color:var(--ink-dim);
}
.line.turn{color:var(--ink); margin-top:.9em}

/* ── 招待の宣言 ─────────────────────── */
.declaration{
  min-height:88svh; min-height:88vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:5rem 1.5rem; text-align:center;
}
.decl{
  margin:0; font-size:clamp(1.05rem,4.4vw,1.75rem); line-height:2.3; letter-spacing:.12em;
  opacity:0; transform:translateY(1.4rem);
  transition:opacity 1.5s var(--ease), transform 1.5s var(--ease);
}
.decl.seen{opacity:1; transform:none}

.gate{margin-top:5rem; min-height:1px}
.gate[hidden]{display:none}
.enter{
  display:inline-block; padding:1.15rem 3.2rem;
  border:1px solid rgba(200,169,106,.42); color:var(--gold);
  text-decoration:none; font-size:.92rem; letter-spacing:.28em;
  transition:border-color .6s var(--ease), background-color .6s var(--ease);
}
.enter:hover,.enter:focus-visible{border-color:var(--gold); background:rgba(200,169,106,.06)}
.soon{margin:0; color:var(--ink-dim); font-size:.86rem; letter-spacing:.24em}

/* ── フッター ───────────────────────── */
.foot{
  padding:5rem 1.5rem 4rem; text-align:center;
  border-top:1px solid rgba(233,229,221,.06);
}
.wordmark{margin:0 0 1.6rem; font-size:.72rem; letter-spacing:.3em; color:var(--ink-dim)}
.legal{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; justify-content:center}
.legal a{
  color:rgba(141,136,128,.72); text-decoration:none;
  font-size:.62rem; letter-spacing:.14em;
}
.legal a:hover,.legal a:focus-visible{color:var(--ink-dim); text-decoration:underline}

/* ── 404 / 手入力フォールバック（このページにだけ存在する） ── */
.closed{
  min-height:100svh; min-height:100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding:6rem 1.5rem; text-align:center;
}
.closed p{margin:0 0 3.5rem; font-size:clamp(1.1rem,4.6vw,1.5rem); line-height:2.2}
.recover{display:flex; flex-direction:column; gap:1.4rem; align-items:center; width:min(90vw,22rem)}
.recover input{
  width:100%; padding:1rem 1.1rem; background:transparent; color:var(--ink);
  border:0; border-bottom:1px solid rgba(233,229,221,.18);
  font-family:inherit; font-size:1rem; letter-spacing:.14em; text-align:center;
}
.recover input::placeholder{color:rgba(141,136,128,.45); letter-spacing:.14em}
.recover input:focus{outline:none; border-bottom-color:var(--gold)}
.recover button{
  padding:.9rem 2.6rem; background:transparent; border:1px solid rgba(200,169,106,.42);
  color:var(--gold); font-family:inherit; font-size:.85rem; letter-spacing:.26em; cursor:pointer;
}

/* ── お問い合わせフォーム（/contact/ にのみ存在する） ── */
.cform{display:flex; flex-direction:column; gap:1.9rem; margin:1.5rem 0 0}
.cform label{display:flex; flex-direction:column; gap:.6rem}
.cf-q{color:var(--ink-dim); font-size:.8rem; letter-spacing:.12em}
.cf-q em{color:var(--gold); font-style:normal}
.cform input,.cform textarea{
  width:100%; padding:.9rem 1rem; background:rgba(233,229,221,.03); color:var(--ink);
  border:1px solid rgba(233,229,221,.16);
  font-family:inherit; font-size:.95rem; letter-spacing:.05em; line-height:1.9;
}
.cform input:focus,.cform textarea:focus{outline:none; border-color:var(--gold)}
.cform textarea{resize:vertical; min-height:8rem}
.cf-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none}
.cform button{
  align-self:flex-start; padding:.95rem 2.8rem; background:transparent;
  border:1px solid rgba(200,169,106,.42); color:var(--gold);
  font-family:inherit; font-size:.85rem; letter-spacing:.26em; cursor:pointer;
  transition:border-color .6s var(--ease), background-color .6s var(--ease);
}
.cform button:hover:not(:disabled),.cform button:focus-visible{border-color:var(--gold); background:rgba(200,169,106,.06)}
.cform button:disabled{opacity:.45; cursor:default}
.cf-status{margin:0; min-height:1.3em; color:var(--ink); font-size:.85rem; letter-spacing:.07em}

/* ── 法務ページ ─────────────────────── */
.doc{max-width:min(92vw,42rem); margin:0 auto; padding:7rem 1.5rem 6rem}
.doc h1{font-size:1.3rem; font-weight:400; letter-spacing:.2em; margin:0 0 3.5rem}
.doc h2{font-size:.95rem; font-weight:400; letter-spacing:.16em; margin:3rem 0 .9rem; color:var(--gold)}
.doc p,.doc li{color:var(--ink-dim); font-size:.92rem; line-height:2.2}
.doc dl{margin:0}
.doc dt{color:var(--gold); font-size:.82rem; letter-spacing:.14em; margin-top:1.8rem}
.doc dd{margin:.3rem 0 0; color:var(--ink-dim); font-size:.92rem}
.doc .back{display:inline-block; margin-top:4.5rem; color:var(--ink-dim); font-size:.75rem; letter-spacing:.16em; text-decoration:none}
.doc .back:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .fragment,.decl{opacity:1; transform:none}
  .hashtag,.invited{opacity:1}
}


/* ── HERO サブライン ─────────────────── */
.subline{
  margin:2.6rem 0 0; font-size:.72rem; letter-spacing:.36em; color:var(--gold);
  opacity:0; animation:fade 2s var(--ease) 1.4s forwards;
}

/* ── 章 ───────────────────────────────── */
.chapter,.chapter-head{
  max-width:var(--measure); margin:0 auto;
  padding:8.5rem 1.5rem;
  text-align:center;
}
.chapter-head{padding-bottom:2rem}

.numeral{
  margin:0 0 3.2rem; font-size:.72rem; letter-spacing:.4em; color:var(--gold);
}
.numeral::after{
  content:""; display:block; width:1px; height:2.6rem; margin:1.4rem auto 0;
  background:linear-gradient(to bottom,rgba(200,169,106,.5),transparent);
}

.chapter-title{
  margin:0 0 3.6rem; font-weight:400;
  font-size:clamp(1.35rem,5.6vw,2.1rem); line-height:1.95; letter-spacing:.14em;
}

.stanza p{
  margin:0 0 2.6rem; color:var(--ink-dim);
  font-size:clamp(1.02rem,4.2vw,1.24rem); line-height:2.5; letter-spacing:.1em;
}
.stanza p:last-child{margin-bottom:0; color:var(--ink)}

.coda{
  margin:4.2rem 0 0; color:var(--ink);
  font-size:clamp(1.06rem,4.4vw,1.32rem); line-height:2.3; letter-spacing:.18em;
}
.coda::before{
  content:""; display:block; width:2.6rem; height:1px; margin:0 auto 3.2rem;
  background:rgba(200,169,106,.45);
}

/* ── Zero UI 五原則 ──────────────────── */
.principles{margin:1rem 0 0; text-align:left}
.principles > div{
  padding:1.7rem 0; border-top:1px solid rgba(233,229,221,.07);
}
.principles > div:last-child{border-bottom:1px solid rgba(233,229,221,.07)}
.principles dt{
  margin:0 0 .55rem; color:var(--gold);
  font-family:"Times New Roman",Georgia,serif;
  font-size:.7rem; letter-spacing:.32em; text-transform:uppercase;
}
.principles dd{
  margin:0; color:var(--ink-dim);
  font-size:clamp(.96rem,3.9vw,1.1rem); line-height:2.1; letter-spacing:.09em;
}

/* ── 内緒（約束） ────────────────────── */
.assurances{margin:1rem 0 0; padding:0; list-style:none; text-align:left}
.assurances li{
  position:relative; padding:1.5rem 0 1.5rem 1.9rem; color:var(--ink-dim);
  border-top:1px solid rgba(233,229,221,.07);
  font-size:clamp(.94rem,3.8vw,1.06rem); line-height:2.15; letter-spacing:.08em;
}
.assurances li:last-child{border-bottom:1px solid rgba(233,229,221,.07)}
.assurances li::before{
  content:""; position:absolute; left:.25rem; top:2.35rem;
  width:5px; height:5px; border:1px solid var(--gold); border-radius:50%;
}
.fine{margin:2.8rem 0 0; color:rgba(141,136,128,.8); font-size:.78rem; letter-spacing:.12em}
.fine a{color:var(--ink-dim)}
.fine a:hover{color:var(--gold)}

/* ── 断片に注釈を添える ──────────────── */
.frag-lines{margin:0}
.note{
  max-width:26rem; margin:3.2rem auto 0; color:rgba(155,150,142,.95);
  font-size:.88rem; line-height:2.25; letter-spacing:.07em;
}
.note::before{
  content:""; display:block; width:1.8rem; height:1px; margin:0 auto 1.6rem;
  background:rgba(233,229,221,.14);
}

/* ── 章の出現 ────────────────────────── */
.reveal{opacity:0; transform:translateY(1.6rem);
  transition:opacity 1.5s var(--ease), transform 1.5s var(--ease);}
.reveal.seen{opacity:1; transform:none}

@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1; transform:none}
  .subline{opacity:1}
}

/* 法務ページ内のリスト */
.doc ul,.doc ol{margin:.6rem 0 0; padding-left:1.3rem}
.doc li{margin:.55rem 0}
.doc li strong{color:var(--ink); font-weight:400}