/* ═══════════════════════════════════════════════
   KOYOI — 映像・スクロール没入型ポートフォリオ TOPページ
   LUMEN / Progress とは配色・フォント・演出を完全分離
═══════════════════════════════════════════════ */
:root {
  --night:  #14110E;
  --night2: #1F1A15;
  --sand:   #F3E9DA;
  --sand2:  rgba(243,233,218,.62);
  --sand3:  rgba(243,233,218,.36);
  --ember:  #D9A066;
  --terracotta: #C1653F;
  --jade:   #33463D;
  --line:   rgba(243,233,218,.14);

  --ff-en:  'Italiana', serif;
  --ff-jp-serif: 'Zen Old Mincho', serif;
  --ff-jp:  'Zen Kaku Gothic New', -apple-system, sans-serif;

  --px: clamp(24px,5vw,72px);
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:auto; }
html.intro-lock, html.intro-lock body { height:100%; overflow:hidden; }
body {
  background:var(--night); color:var(--sand);
  font-family:var(--ff-jp);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; background:none; border:none; color:inherit; }
img { max-width:100%; display:block; }

/* ── NAV ── */
#nav {
  position:fixed; top:0; left:0; right:0; z-index:600;
  display:flex; align-items:center; justify-content:space-between;
  padding:22px var(--px);
  mix-blend-mode:difference;
}
.nav-logo { font-family:var(--ff-en); font-size:18px; letter-spacing:.22em; color:var(--sand); }
.nav-links { display:flex; gap:28px; font-size:11px; letter-spacing:.12em; color:var(--sand2); }
.nav-links button:hover { color:var(--sand); }
@media (max-width:760px) { .nav-links { display:none; } }

/* ── INTRO（初回のみ再生） ── */
#intro {
  position:fixed; inset:0; z-index:1000;
  background:var(--night);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
#intro.intro--out { opacity:0; transition:opacity .9s ease; pointer-events:none; }
.intro-glow {
  position:absolute; left:50%; top:52%; width:70vmax; height:70vmax;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(217,160,102,.55), rgba(217,160,102,.12) 42%, transparent 70%);
  opacity:0; filter:blur(10px);
  animation:koyoiGlowIn 1.4s ease-out forwards, koyoiGlowPulse 3.2s ease-in-out 1.4s infinite;
}
.intro-horizon {
  position:absolute; left:0; right:0; bottom:0; height:46%;
  background:linear-gradient(to top, rgba(217,160,102,.16), transparent);
  opacity:0;
  animation:koyoiFadeIn 1.8s ease-out 1.0s forwards;
}
.intro-body { position:relative; z-index:2; text-align:center; }
.intro-logo-wrap { overflow:hidden; }
.intro-logo {
  font-family:var(--ff-en); font-size:clamp(38px,8vw,74px); letter-spacing:.34em;
  padding-left:.34em; color:var(--sand);
  clip-path:inset(0 100% 0 0);
  animation:koyoiWipe 1.1s cubic-bezier(.65,0,.14,1) 2.5s forwards;
}
.intro-tag-wrap { overflow:hidden; margin-top:22px; }
.intro-tag {
  font-family:var(--ff-jp-serif); font-size:clamp(13px,1.6vw,16px); letter-spacing:.08em; color:var(--sand2);
  clip-path:inset(0 100% 0 0);
  animation:koyoiWipe .95s cubic-bezier(.65,0,.14,1) 3.35s forwards;
}
.intro-scrollcue {
  position:absolute; left:50%; bottom:52px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:10px;
  opacity:0; animation:koyoiFadeIn .8s ease-out 4.3s forwards;
}
.intro-scrollcue-line { width:1px; height:34px; background:linear-gradient(to bottom, var(--ember), transparent); animation:koyoiCueDrop 1.8s ease-in-out infinite; }
.intro-scrollcue-text { font-size:10px; letter-spacing:.28em; color:var(--sand3); }

@keyframes koyoiGlowIn { from{opacity:0; transform:translate(-50%,-50%) scale(.85);} to{opacity:1; transform:translate(-50%,-50%) scale(1);} }
@keyframes koyoiGlowPulse { 0%,100%{opacity:1;} 50%{opacity:.72;} }
@keyframes koyoiFadeIn { from{opacity:0;} to{opacity:1;} }
@keyframes koyoiWipe { from{clip-path:inset(0 100% 0 0);} to{clip-path:inset(0 0 0 0);} }
@keyframes koyoiCueDrop { 0%{opacity:0; transform:translateY(-6px);} 40%{opacity:1;} 100%{opacity:0; transform:translateY(14px);} }

@media (prefers-reduced-motion: reduce) {
  .intro-glow, .intro-horizon, .intro-logo, .intro-tag, .intro-scrollcue { animation:none !important; opacity:1 !important; clip-path:inset(0 0 0 0) !important; }
  .intro-scrollcue-line { animation:none !important; }
}

/* ── HERO ── */
#hero {
  position:relative; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
/* HERO_VIDEO_SLOT: /assets/video/hero.mp4 ・ /assets/img/hero-poster.jpg が
   揃うまでは常にこの状態（暗闇→灯りのにじみ）で表示される。判定は js/koyoi.js。 */
.hero-media { position:absolute; inset:0; z-index:0; background:var(--night); background-size:cover; background-position:center; overflow:hidden; }
.hero-media::before {
  content:""; position:absolute; left:50%; bottom:-10%; width:120vw; height:120vw;
  transform:translateX(-50%);
  background:radial-gradient(circle, rgba(217,160,102,.34), rgba(217,160,102,.08) 38%, transparent 62%);
  animation:koyoiHeroBreath 9s ease-in-out infinite;
  transition:opacity .8s ease;
}
.hero-media::after {
  content:""; position:absolute; inset:0; z-index:2;
  background:linear-gradient(to top, rgba(20,17,14,.55), rgba(20,17,14,.05) 46%, rgba(20,17,14,.35));
}
@keyframes koyoiHeroBreath { 0%,100%{opacity:.85; transform:translateX(-50%) scale(1);} 50%{opacity:1; transform:translateX(-50%) scale(1.06);} }

/* 動画レイヤー：読み込み成功時のみ video-ready が付与され表示される */
.hero-video {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity 1.3s ease;
}
.hero-media.video-ready .hero-video { opacity:1; }
.hero-media.video-ready::before { opacity:.4; } /* 動画の上では光暈を控えめに */

/* 静止画フォールバック（動画未使用時・モバイル簡略時）：hero-poster.jpg があれば適用 */
.hero-media.poster-ready::before { opacity:.3; }

/* 水面の光の揺らぎを補うごく淡いシマー（動画の有無に関わらず一貫した質感を出す） */
.hero-shimmer {
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.14; mix-blend-mode:screen;
  background:linear-gradient(115deg, transparent 40%, rgba(217,160,102,.5) 50%, transparent 60%);
  background-size:220% 220%;
  animation:koyoiShimmer 13s ease-in-out infinite;
}
@keyframes koyoiShimmer { 0%{background-position:0% 50%;} 50%{background-position:100% 50%;} 100%{background-position:0% 50%;} }
@media (prefers-reduced-motion: reduce) {
  .hero-shimmer { animation:none; opacity:.08; }
}

.hero-body { position:relative; z-index:2; padding:0 24px; }
.hero-eyebrow { font-size:11px; letter-spacing:.32em; color:var(--sand3); margin-bottom:22px; }
.hero-logo { font-family:var(--ff-en); font-size:clamp(40px,9vw,84px); letter-spacing:.3em; padding-left:.3em; color:var(--sand); }
.hero-tag { font-family:var(--ff-jp-serif); font-size:clamp(15px,2vw,19px); letter-spacing:.06em; color:var(--sand2); margin-top:24px; }
.hero-scrollcue {
  position:absolute; left:50%; bottom:44px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:10px;
}
.hero-scrollcue-line { width:1px; height:34px; background:linear-gradient(to bottom, var(--ember), transparent); animation:koyoiCueDrop 1.8s ease-in-out infinite; }
.hero-scrollcue-text { font-size:10px; letter-spacing:.28em; color:var(--sand3); }
@media (prefers-reduced-motion: reduce) {
  .hero-media::before { animation:none; }
  .hero-scrollcue-line { animation:none; }
}

/* ── SCENES（スクロール連動クロスフェード） ── */
.scenes { position:relative; height:calc(var(--scene-count) * 100svh); }
.scenes-stage { position:sticky; top:0; height:100svh; overflow:hidden; }
.scene-bg {
  position:absolute; inset:0;
  background-size:cover; background-position:center;
  opacity:0; will-change:opacity, transform;
}
.scene-overlay {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(to top, rgba(20,17,14,.62), rgba(20,17,14,.08) 42%, rgba(20,17,14,.22));
}
.scene-content { position:absolute; inset:0; z-index:2; }
.scene-text {
  position:absolute; left:var(--px); bottom:88px; max-width:520px;
  opacity:0; will-change:opacity, transform;
}
.scene-num { font-family:var(--ff-en); font-size:12px; letter-spacing:.3em; color:var(--ember); margin-bottom:14px; }
.scene-title { font-family:var(--ff-en); font-size:clamp(32px,5.2vw,58px); letter-spacing:.08em; color:var(--sand); }
.scene-copy { font-family:var(--ff-jp-serif); font-size:clamp(14px,1.6vw,16.5px); color:var(--sand2); margin-top:16px; letter-spacing:.03em; }

.scene-progress {
  position:absolute; right:var(--px); top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; gap:14px;
}
.scene-progress i {
  display:block; width:6px; height:6px; border-radius:50%;
  background:rgba(243,233,218,.28); transition:background .3s ease, transform .3s ease;
}
.scene-progress i.on { background:var(--ember); transform:scale(1.4); }
@media (max-width:760px) { .scene-progress { display:none; } }

@media (max-width:760px) {
  .scene-text { bottom:64px; left:24px; right:24px; max-width:none; }
  .scene-title { font-size:clamp(28px,9vw,40px); }
}

@media (prefers-reduced-motion: reduce) {
  .scenes { height:auto; }
  .scenes-stage { position:relative; height:auto; }
  .scene-bg { position:relative; height:100svh; opacity:1 !important; transform:none !important; }
  .scene-content { position:static; }
  .scene-text { position:relative; inset:auto; opacity:1 !important; transform:none !important; left:0; bottom:0; padding:0 var(--px) 60px; max-width:560px; }
  .scene-overlay { position:absolute; }
}

/* ── CLOSING ── */
#closing {
  position:relative; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
}
.closing-media { position:absolute; inset:0; background:var(--night); }
.closing-media::before {
  content:""; position:absolute; left:50%; top:50%; width:60vmax; height:60vmax; transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(217,160,102,.24), transparent 65%);
}
.closing-body { position:relative; z-index:2; padding:0 24px; }
.closing-eyebrow { font-size:11px; letter-spacing:.3em; color:var(--sand3); margin-bottom:20px; }
.closing-title { font-family:var(--ff-jp-serif); font-size:clamp(22px,3.4vw,32px); color:var(--sand); line-height:1.7; }
.closing-note { margin-top:26px; font-size:12px; color:var(--sand3); letter-spacing:.04em; }
.closing-top {
  display:inline-flex; align-items:center; gap:8px; margin-top:34px;
  padding:14px 32px; border:1px solid var(--line); border-radius:999px;
  font-size:12px; letter-spacing:.14em; color:var(--sand2); transition:border-color .25s ease, color .25s ease;
}
.closing-top:hover { border-color:var(--ember); color:var(--sand); }

footer.site-footer { position:relative; z-index:2; padding:26px var(--px); text-align:center; background:var(--night); }
footer.site-footer p { font-size:10.5px; color:var(--sand3); letter-spacing:.03em; }