/* home.html — page-specific styles, extracted from inline */

.hero{background:var(--obsidian);height:100vh;padding:0}
/* poster 二重化: 背景画像として hero-stage にも適用 (video opacity:0 時の黒画面救済 — P0-12 fix) */
.hero-stage{
  position:absolute;inset:0;overflow:hidden;
  background:#050810 url('/assets/spaces/kv-poster.webp') center/cover no-repeat;
}

/* KV Movie 背景レイヤー — poster 即時表示 + 動画フェードイン */
.hero-bg-video{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  z-index:1;
  opacity:0;
  animation:heroBgIn 1.4s var(--ease) .4s forwards;
  background:transparent;
}
@keyframes heroBgIn{
  0%{opacity:0}
  100%{opacity:1}
}

/* 背景の上の暗幕（テキスト可読性） */
.hero-cover{
  position:absolute;inset:0;
  background:
    radial-gradient(ellipse at center,transparent 15%,rgba(5,8,16,.55) 65%,rgba(0,0,0,.92) 100%),
    linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 25%,transparent 65%,rgba(0,0,0,.85) 100%);
  z-index:2;
}

/* 下端の暖色光（カーテン上昇直前の劇場フットライト） */
.hero-spill{
  position:absolute;left:0;right:0;bottom:0;height:55%;
  background:radial-gradient(ellipse at 50% 100%,rgba(184,168,122,.22) 0%,rgba(184,168,122,.08) 30%,transparent 65%);
  z-index:3;
  opacity:0;
  animation:spillIn 1.6s var(--ease) .4s forwards,spillFade 2.5s var(--ease) 2.5s forwards;
}
@keyframes spillIn{0%{opacity:0}100%{opacity:1}}
@keyframes spillFade{0%{opacity:1}100%{opacity:.18}}

/* コンテンツ — タグライン主役・ロゴ控えめ */
.hero-content{
  position:relative;z-index:4;
  text-align:center;width:100%;padding:0 32px;
  opacity:0;transform:translateY(20px);
  animation:heroContentIn 1.4s var(--ease) 1.6s forwards;
}
@keyframes heroContentIn{to{opacity:1;transform:translateY(0)}}
.hero-content .logo-hero{
  max-width:min(56vw,520px);max-height:22vh;
  margin:0 auto 48px;
  opacity:.95;
  filter:drop-shadow(0 4px 30px rgba(184,168,122,.45));
}
.hero-content .tagline{
  font-family:'Noto Serif JP',serif;
  font-weight:300;
  font-size:clamp(28px,5.4vw,72px);
  letter-spacing:.1em;
  color:var(--bone);
  line-height:1.55;
  text-shadow:0 4px 40px rgba(0,0,0,.85),0 0 80px rgba(184,168,122,.18);
  word-break:keep-all;line-break:strict;
  text-align:center;
}
.hero-content .tagline strong{
  font-weight:500;
  background:var(--foil);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  background-size:300% auto;
  animation:foilShift 9s ease-in-out infinite;
}
.hero-content .tagline-en{
  font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:300;
  font-size:clamp(14px,1.6vw,20px);
  color:var(--gold);opacity:.7;
  margin-top:24px;letter-spacing:.1em;
}

@media(max-width:768px){
  .hero-content{padding:0 20px}
  .hero-content .logo-hero{max-width:75vw;max-height:18vh;margin-bottom:36px}
  .hero-content .tagline{font-size:clamp(22px,6vw,32px);letter-spacing:.06em;line-height:1.6}
  .hero-content .tagline-en{font-size:11px;letter-spacing:.06em;margin-top:18px}
  /* Faster pacing on mobile so KV_Movie appears sooner */
  .hero-bg-video{animation:heroBgIn 1.6s var(--ease) .4s forwards}
  .hero-content{animation:heroContentIn 1.4s var(--ease) 1.0s forwards}
}
/* (Removed: hero-curtain-video / curtain-rise.mp4 演出は廃止 — 2026-05-10) */
@keyframes curtainFadeIn{from{opacity:0}to{opacity:1}}
/* Scroll affordance — iconic SVG mouse + chevron */
.hero-scroll{
  position:absolute;bottom:36px;left:50%;
  transform:translateX(-50%);
  color:var(--gold);opacity:.6;z-index:10;
  display:flex;flex-direction:column;align-items:center;gap:6px;
  pointer-events:none;
}
.scroll-dot{animation:scrollDot 2s ease-in-out infinite}
.scroll-chevron{animation:scrollChevron 2s ease-in-out infinite;animation-delay:.3s}
@keyframes scrollDot{
  0%,100%{transform:translateY(0);opacity:1}
  50%{transform:translateY(12px);opacity:.4}
}
@keyframes scrollChevron{
  0%,100%{transform:translateY(0);opacity:.5}
  50%{transform:translateY(6px);opacity:1}
}

/* Brand essence section */
.essence{background:radial-gradient(ellipse at center,#142540 0%,#0A1424 50%,#050810 100%);padding:160px 32px;position:relative}
.essence::before{content:"";position:absolute;inset:0;background:url('/assets/programme/spread-01-essence.webp') center/cover no-repeat;opacity:.18;filter:brightness(.6)}
.essence::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 30%,#000 80%)}
.essence-inner{position:relative;z-index:10;max-width:900px;margin:0 auto;text-align:center}
.essence .label{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.6em;color:var(--gold);text-transform:uppercase;opacity:.7;margin-bottom:32px}
.essence h2{font-family:'Noto Serif JP',serif;font-weight:300;font-size:clamp(32px,5vw,64px);color:var(--bone);line-height:1.6;letter-spacing:.06em;margin-bottom:24px}
.essence h2 strong{font-weight:500;color:var(--gold-light)}
.essence p.en{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(18px,2vw,26px);color:var(--gold);opacity:.7;letter-spacing:.04em}

/* Position / Mission / Philosophy 4-tier */
.tiers{background:linear-gradient(180deg,#0A0F1A 0%,#0F1A2E 50%,#080D17 100%);padding:120px 32px;border-top:1px solid rgba(184,168,122,.1)}
.tiers-inner{max-width:1100px;margin:0 auto}
.tier{display:grid;grid-template-columns:200px 1fr;gap:48px;padding:48px 0;border-bottom:1px solid rgba(184,168,122,.1);align-items:start}
.tier:last-child{border-bottom:none}
.tier-label{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.5em;color:var(--gold);text-transform:uppercase;opacity:.7;padding-top:8px}
.tier-content h3{font-family:'Noto Serif JP',serif;font-weight:300;font-size:clamp(22px,2.8vw,36px);color:var(--bone);line-height:1.6;letter-spacing:.04em;margin-bottom:12px}
.tier-content p{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:clamp(15px,1.6vw,20px);color:var(--gold);opacity:.7;letter-spacing:.04em}

/* Map navigation hub teaser */
.hub{background:radial-gradient(ellipse at center,#142540 0%,#0A1424 40%,#050810 80%,#000 100%);padding:120px 32px}
.hub-inner{max-width:1100px;margin:0 auto;text-align:center}
.hub-heading{margin-bottom:64px;text-align:center}
.hub-heading .lux-eyebrow{display:block;margin-bottom:8px}
.hub-heading h3{font-family:'Cormorant Garamond','Cinzel',serif;font-weight:400;font-size:clamp(40px,5.6vw,72px);letter-spacing:.04em;color:var(--bone);line-height:1.2;margin:16px 0}
.hub-heading h3 em{font-style:italic;color:var(--gold);font-family:'Cormorant Garamond',serif}
.hub-heading h3::after{content:"";display:block;width:60px;height:1px;background:var(--gold);margin:32px auto 0;opacity:.5}
.hub-heading .hub-jp{font-family:'Noto Serif JP',serif;font-weight:300;font-size:clamp(22px,2.6vw,32px);letter-spacing:.08em;color:var(--bone);margin-top:24px;line-height:1.5;opacity:.85}
.hub-heading .hub-sub{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:var(--bone);opacity:.55;letter-spacing:.06em;margin-top:24px;font-style:italic;font-family:'Cormorant Garamond',serif}
/* Wide circular layout — Seven Chambers around central Stage (2026-05-11 v3)
 * PC: 円形配置 + 舞台中心にゆっくり公転 / SP: stack
 */
.hub-radial{
  position:relative;
  width:min(720px,82vw);
  aspect-ratio:1/1;
  margin:48px auto 0;
}
/* PC: Stageを中心に7部屋がゆっくり公転 (約5分で1周) — Stageは静止、外周カードは均等配置 + 正立保持 */
@media(min-width:1024px) and (hover:hover) and (prefers-reduced-motion:no-preference){
  .hub-radial{
    animation: hubOrbit 300s linear infinite;
    transform-origin: 50% 50%;
    will-change: transform;
  }
  /* Stage含む全カードに counter-rotate を適用 → Stageは完全静止 / 外周は正立保持 */
  .hub-card{
    animation: hubOrbitCounter 300s linear infinite;
    will-change: transform;
  }
  /* hover-pause を撤去 — 自動スクロールは常時継続（2026-05-11 ユーザー指示） */
  @keyframes hubOrbit{
    from{transform:rotate(0deg)}
    to  {transform:rotate(360deg)}
  }
  @keyframes hubOrbitCounter{
    from{transform:translate(-50%,-50%) rotate(0deg)}
    to  {transform:translate(-50%,-50%) rotate(-360deg)}
  }
}
/* 円形ガイドライン */
.hub-radial::before{
  content:"";position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:88%;height:84%;
  border:1px solid rgba(184,168,122,.13);
  border-radius:50%;
  pointer-events:none;
}
.hub-radial::after{
  content:"";position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:34%;height:38%;
  border:1px dashed rgba(184,168,122,.1);
  border-radius:50%;
  pointer-events:none;
}
.hub-card{
  position:absolute;
  width:200px;
  height:210px;
  padding:22px 16px;
  border:1px solid rgba(184,168,122,.25);
  background:rgba(10,15,26,.85);
  backdrop-filter:blur(8px);
  transition:all .5s var(--ease);
  text-decoration:none;color:inherit;cursor:pointer;
  text-align:center;
  transform:translate(-50%,-50%);
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  box-sizing:border-box;
}
.hub-card:hover{border-color:var(--gold);background:rgba(184,168,122,.12);transform:translate(-50%,-50%) scale(1.06)}

.hub-card.is-stage{
  width:240px;height:240px;padding:32px 24px;
  top:50%;left:50%;
  background:radial-gradient(circle at 40% 30%,rgba(20,37,64,.98) 0%,rgba(15,26,46,.95) 60%,rgba(10,15,26,.95) 100%);
  border:1px solid var(--gold);
  border-radius:50%;
  box-shadow:0 0 60px rgba(184,168,122,.25),inset 0 0 40px rgba(184,168,122,.06);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
.hub-card.is-stage h4{margin:8px 0 6px}
.hub-card.is-stage p{font-size:12px;line-height:1.6;opacity:.78}
/* Current page indicator — combined with Stage to avoid duplicate label */
.hub-card.current-room{
  border-color:var(--gold-light);
  background:linear-gradient(135deg,rgba(184,168,122,.18) 0%,rgba(212,201,160,.10) 100%);
  box-shadow:0 0 60px rgba(212,201,160,.45),inset 0 0 40px rgba(184,168,122,.12);
  pointer-events:none;
}
.hub-card.is-stage.current-room h4::before{
  content:"⊙ 現在地 · ";
  font-family:'Cinzel',serif;font-size:.65em;letter-spacing:.3em;
  color:var(--gold-light);
  display:block;margin-bottom:6px;font-weight:400;
}
.hub-card.is-stage.current-room p{display:none}
.hub-card.is-stage.current-room .num,
.hub-card.is-stage.current-room .greek-sub{opacity:.7}
.hub-card.is-stage:hover{transform:translate(-50%,-50%) scale(1.08);box-shadow:0 0 100px rgba(184,168,122,.5),inset 0 0 50px rgba(184,168,122,.1)}
.hub-card.is-stage .num::before{content:"★ ";color:var(--gold-light)}
.hub-card.is-stage h4{font-size:24px;color:var(--bone)}

/* Circular layout — 7 chambers evenly distributed around Stage (360/7 ≈ 51.43°)
 * 入口=12時から時計回りに 7等分配置 / 半径42% (PC)
 * (2026-05-11 v3: 均等配置に再計算)
 */
.hub-card.pos-0{top:8.0%;  left:50.0%}   /* 入口  · 0°    (12時) */
.hub-card.pos-1{top:23.8%; left:82.8%}   /* 事業  · 51.4° (1-2時) */
.hub-card.pos-2{top:59.3%; left:91.0%}   /* 作品  · 102.9°(3-4時) */
.hub-card.pos-5{top:87.8%; left:68.2%}   /* 記録  · 154.3°(5時) */
.hub-card.pos-6{top:87.8%; left:31.8%}   /* 出口  · 205.7°(7時) */
.hub-card.pos-3{top:59.3%; left:9.0%}    /* メンバー· 257.1°(8-9時)*/
.hub-card.pos-4{top:23.8%; left:17.2%}   /* 宣言  · 308.6°(10-11時)*/

/* Spoke 線は今回非表示（地図風配置で不要） */
.hub-spoke{display:none}

/* Tablet (600-900px): 2-col grid + Stage center span */
@media(max-width:900px) and (min-width:600px){
  .hub-radial{
    height:auto;width:100%;
    display:grid;grid-template-columns:1fr 1fr;
    gap:14px;margin-top:40px;
    aspect-ratio:auto;
  }
  .hub-radial::before,.hub-radial::after,.hub-spoke{display:none}
  .hub-card{
    position:static !important;width:auto !important;
    transform:none !important;padding:22px 18px;
    min-height:130px;
    display:flex;flex-direction:column;justify-content:center;
  }
  /* 入口 (Foyer): grid 上部全幅 */
  .hub-card.pos-0{grid-column:1 / -1;order:1}
  /* Stage: 真ん中・全幅 */
  .hub-card.is-stage{grid-column:1 / -1;order:5;padding:30px 24px}
  /* 5部屋: 2列で2-3行 */
  .hub-card.pos-1{order:2}    /* domains */
  .hub-card.pos-4{order:3}    /* mirror */
  .hub-card.pos-2{order:4}    /* works */
  .hub-card.pos-3{order:6}    /* people */
  .hub-card.pos-5{order:7}    /* chronicle */
  /* 出口: grid 最下部全幅 */
  .hub-card.pos-6{grid-column:1 / -1;order:8}
  .hub-card:hover{transform:translateY(-2px) !important}
}
/* Mobile (<600px): 1-col stack with 入口→部屋群→出口 順序保持 */
@media(max-width:599px){
  .hub-radial{
    height:auto;width:100%;
    display:flex;flex-direction:column;gap:14px;
    margin-top:32px;aspect-ratio:auto;
  }
  .hub-radial::before,.hub-radial::after,.hub-spoke{display:none}
  .hub-card{
    position:static !important;width:100% !important;
    transform:none !important;padding:22px 20px;
    min-height:auto;
  }
  .hub-card.pos-0{order:1}
  .hub-card.is-stage{order:2;padding:28px 20px}
  .hub-card.pos-1{order:3}
  .hub-card.pos-2{order:4}
  .hub-card.pos-3{order:5}
  .hub-card.pos-4{order:6}
  .hub-card.pos-5{order:7}
  .hub-card.pos-6{order:8}
  .hub-card:hover{transform:translateY(-2px) !important}
}
.hub-card .num{font-family:'Cinzel',serif;font-size:9px;letter-spacing:.5em;color:var(--gold);opacity:.5}
.hub-card h4{font-family:'Noto Serif JP',serif;font-size:22px;color:var(--bone);margin:12px 0 8px;font-weight:400;letter-spacing:.04em}
.hub-card .greek-sub{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.3em;color:var(--gold);opacity:.6;margin-bottom:12px}
.hub-card p{font-family:'Noto Sans JP',sans-serif;font-size:13px;color:var(--bone);opacity:.7;line-height:1.7}

/* Tagline line-break protection */
.tagline,.business-headline,.business-lead,.essence h2,.tier-content h3,.business-detail p{
  word-break:keep-all;
  overflow-wrap:normal;
  line-break:strict;
}

/* Business Statement */
.business-statement{
  background:linear-gradient(180deg,#0A0F1A 0%,#0F1A2E 50%,#080D17 100%);
  padding:120px 32px;
  border-top:1px solid rgba(184,168,122,.1);
  border-bottom:1px solid rgba(184,168,122,.1);
}
.business-statement::before{
  content:"";position:absolute;inset:0;
  background:url('/assets/spaces/destination.webp') center/cover no-repeat;
  opacity:.32;
  filter:hue-rotate(-8deg) saturate(.85) brightness(.75) contrast(1.1);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}
.business-statement::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 20%,rgba(10,15,26,.55) 65%,rgba(8,13,23,.85) 100%);
  pointer-events:none;
  z-index:1;
}
.business-inner{
  max-width:880px;margin:0 auto;
  position:relative;z-index:5;text-align:center;
}
.business-headline{
  font-family:'Noto Serif JP',serif;
  font-weight:300;
  font-size:clamp(36px,5vw,64px);
  color:var(--bone);
  letter-spacing:.06em;line-height:1.4;
  margin:24px 0 48px;
}
.business-lead{
  font-family:'Noto Serif JP',serif;
  font-weight:300;
  font-size:clamp(17px,1.8vw,22px);
  color:var(--bone);
  line-height:1.95;
  letter-spacing:.04em;
  margin-bottom:40px;
}
.business-lead strong{font-weight:500;color:var(--gold-light)}
.business-detail p{
  font-family:'Noto Sans JP',sans-serif;
  font-size:clamp(13px,1.4vw,16px);
  color:var(--bone);opacity:.78;
  line-height:1.95;letter-spacing:.04em;
  margin-bottom:18px;
}

/* Hub map CTA */
.hub-map-cta{margin-top:64px;text-align:center}
.map-cta-btn{
  display:inline-flex;align-items:center;gap:14px;
  padding:18px 36px;
  border:1px solid var(--gold);
  background:rgba(15,26,46,.5);
  color:var(--gold);
  font-family:'Cinzel',serif;font-size:12px;letter-spacing:.4em;
  text-transform:uppercase;cursor:pointer;
  transition:all .5s var(--ease);
  backdrop-filter:blur(4px);
}
.map-cta-btn:hover{background:var(--gold);color:var(--obsidian);transform:translateY(-2px);box-shadow:0 12px 40px rgba(184,168,122,.3)}
.map-cta-btn .muted{font-size:10px;opacity:.6;letter-spacing:.2em;text-transform:none;font-style:italic;font-family:'Cormorant Garamond',serif}
.map-cta-btn svg{width:20px;height:20px}

/* Architecture image as hub atmospheric background */
/* 7 Pillars of Placecraft as hub atmospheric background */
.hub::before{
  content:"";position:absolute;inset:0;
  background:url('/assets/spaces/seven-pillars-bg.webp') center/cover no-repeat;
  opacity:.22;
  filter:hue-rotate(-10deg) saturate(.85) brightness(.65);
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}
.hub::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center,transparent 25%,rgba(10,15,26,.55) 70%,rgba(5,8,16,.85) 100%);
  pointer-events:none;z-index:1;
}
.hub-inner{position:relative;z-index:5}

/* (decor-band CSS は site.css に集約 / 2026-05-10) */

/* The Stage = current center indicator */
.stage-center{
  margin:0 auto 40px;
  max-width:520px;
  padding:32px 24px;
  border:1px solid rgba(212,201,160,.6);
  background:linear-gradient(135deg,rgba(184,168,122,.1) 0%,rgba(212,201,160,.05) 100%);
  text-align:center;position:relative;
  box-shadow:0 0 0 4px rgba(184,168,122,.15),0 0 60px rgba(184,168,122,.25);
}
.stage-center::before{
  content:"⊙";position:absolute;top:-14px;left:50%;
  transform:translateX(-50%);
  font-size:24px;color:var(--gold-light);
  background:#0F1A2E;padding:0 12px;
  text-shadow:0 0 12px rgba(212,201,160,.7);
}
.stage-center .sc-eyebrow{
  font-family:'Cinzel',serif;font-size:10px;letter-spacing:.5em;
  color:var(--gold-light);text-transform:uppercase;opacity:.85;
}
.stage-center h4{
  font-family:'Cormorant Garamond','Noto Serif JP',serif;
  font-weight:400;font-size:clamp(22px,2.6vw,30px);
  color:var(--bone);margin:8px 0 4px;letter-spacing:.06em;
}
.stage-center .sc-jp{
  font-family:'Noto Serif JP',serif;font-size:14px;color:var(--gold-light);
  letter-spacing:.1em;opacity:.85;margin-top:4px;
}
.stage-center .sc-note{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:13px;color:var(--bone);opacity:.65;
  margin-top:14px;letter-spacing:.04em;line-height:1.5;
}

@media(max-width:768px){
  .tier{grid-template-columns:1fr;gap:8px}
  .business-statement{padding:80px 24px}
  .business-detail p{font-size:13px}
  .hub-map-cta{margin-top:48px}
  .map-cta-btn{padding:14px 24px;font-size:10px;letter-spacing:.3em}
  .map-cta-btn .muted{display:none}
}

/* ───── Welcome Overlay (feature-prologue ON / 第3弾 2026-05-10 第3幕) ───── */
.welcome-overlay{
  position:fixed;inset:0;z-index:55;
  background:radial-gradient(ellipse at center,#0d0810 0%,#000 80%);
  display:none;
  align-items:center;justify-content:center;
  pointer-events:none;
}
body.feature-prologue .welcome-overlay{
  display:flex;pointer-events:auto;
  animation:welcomeOverlayOut 1.4s ease-in 3.4s forwards;
}
@keyframes welcomeOverlayOut{
  to{opacity:0;visibility:hidden;pointer-events:none}
}
.welcome-stage{
  position:relative;
  width:min(800px,90vw);
  text-align:center;
}
.welcome-theatre{
  width:100%;height:auto;
  opacity:0;
  animation:welcomeTheatreIn 1.4s ease-out .2s forwards;
  filter:drop-shadow(0 8px 40px rgba(184,168,122,.18));
}
@keyframes welcomeTheatreIn{
  0%{opacity:0;transform:scale(.94)}
  100%{opacity:.9;transform:scale(1)}
}
.welcome-spotlight{
  opacity:0;
  animation:welcomeSpotIn 1.6s ease-out 1.2s forwards;
  transform-origin:50% 0;
}
@keyframes welcomeSpotIn{
  0%{opacity:0;transform:scaleY(.4)}
  100%{opacity:1;transform:scaleY(1)}
}
.welcome-spot-glow{
  opacity:0;
  animation:welcomeGlowIn 1.4s ease-out 1.6s forwards;
}
@keyframes welcomeGlowIn{to{opacity:.85}}
.welcome-tagline{
  margin-top:48px;
  opacity:0;
  animation:welcomeTaglineIn 1.6s ease-out 2.2s forwards;
}
.welcome-tagline .wt-jp{
  font-family:'Noto Serif JP',serif;font-weight:300;
  font-size:clamp(20px,3vw,34px);
  color:var(--bone,#E8E0CE);letter-spacing:.1em;
  line-height:1.55;
  text-shadow:0 4px 30px rgba(0,0,0,.85),0 0 60px rgba(184,168,122,.18);
}
.welcome-tagline .wt-jp strong{
  font-weight:500;color:var(--gold-light,#D4C9A0);
}
.welcome-tagline .wt-en{
  font-family:'Cormorant Garamond',serif;font-style:italic;
  font-size:clamp(13px,1.5vw,18px);
  color:var(--gold,#B8A87A);opacity:.72;
  letter-spacing:.06em;margin-top:14px;
}
@keyframes welcomeTaglineIn{
  0%{opacity:0;transform:translateY(14px)}
  100%{opacity:1;transform:translateY(0)}
}
.welcome-skip{position:absolute;right:0;bottom:-60px;opacity:0;animation:skipBtnIn .8s ease-out 2.5s forwards}
@media(max-width:768px){
  .welcome-tagline{margin-top:32px}
  .welcome-skip{bottom:-44px;right:14px}
}

.nyx-skip-to-content{
  position:fixed;left:-9999px;top:8px;z-index:9999;
  padding:10px 16px;background:#0A0A0A;color:#B8A87A;
  font-family:'Cinzel',serif;font-size:11px;letter-spacing:.3em;
  border:1px solid #B8A87A;text-decoration:none;text-transform:uppercase;
}
.nyx-skip-to-content:focus{left:8px}

.works-reel{padding:clamp(56px,8vw,96px) 0;position:relative;background:linear-gradient(180deg,transparent 0%,rgba(184,168,122,.04) 50%,transparent 100%)}
  .works-reel-head{max-width:1280px;margin:0 auto 32px;padding:0 clamp(20px,4vw,40px);display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
  .works-reel-head .heading-block{flex:1 1 auto;min-width:0}
  .works-reel-head .lux-eyebrow{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.5em;color:var(--gold);text-transform:uppercase;opacity:.85;margin-bottom:10px}
  .works-reel-head h3{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:clamp(28px,4vw,44px);line-height:1.2;color:var(--bone);margin:0;letter-spacing:.01em}
  .works-reel-head h3 em{color:var(--gold);font-style:italic}
  .reel-all-cta{font-family:'Cinzel',serif;font-size:11px;letter-spacing:.4em;color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(184,168,122,.4);padding:14px 8px;min-height:44px;display:inline-flex;align-items:center;text-transform:uppercase;white-space:nowrap;transition:color .3s,border-color .3s}
  .reel-all-cta:hover{color:var(--gold);border-color:var(--gold)}
  .works-reel-track-wrap{position:relative;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%)}
  .works-reel-track{
    display:flex;gap:20px;
    /* 開始時に1枚目（BABEL=完成事例）が viewport center に来るよう左 padding を中央寄せ */
    padding:8px clamp(20px,4vw,40px) 32px;
    padding-left:calc(50vw - clamp(130px,14vw,160px));
    width:max-content;
    /* 4秒間中央表示 → ゆっくり 90秒でループ。最後にまた BABEL が中央へ */
    animation:reelScroll 90s linear 4s infinite;
    will-change:transform;
  }
  /* hover-pause を撤去 — 自動スクロールは常時継続（2026-05-11 ユーザー指示） */
  @keyframes reelScroll{
    from{transform:translateX(0)}
    to{transform:translateX(calc(-50% - 10px))}
  }
  @media (prefers-reduced-motion:reduce){
    .works-reel-track{animation:none}
  }
  .work-card{flex:0 0 auto;width:clamp(260px,28vw,320px);display:flex;flex-direction:column;background:rgba(15,26,46,.4);border:1px solid rgba(184,168,122,.18);text-decoration:none;transition:border-color .35s,transform .35s,box-shadow .35s;position:relative;overflow:hidden}
  .work-card:hover{border-color:var(--gold);transform:translateY(-4px);box-shadow:0 24px 60px rgba(0,0,0,.45)}
  .work-card:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
  .work-card-img{position:relative;width:100%;aspect-ratio:4/5;overflow:hidden;background:#0F1A2E}
  .work-card-img img{width:100%;height:100%;object-fit:cover;opacity:.86;filter:contrast(1.05) saturate(.92);transition:transform .8s var(--ease),opacity .35s}
  .work-card:hover .work-card-img img{transform:scale(1.04);opacity:.95}
  .work-card-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(5,8,16,.55) 100%);pointer-events:none}
  .work-card-meta{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.32em;color:var(--gold);opacity:.8;margin:18px 22px 6px;text-transform:uppercase}
  .work-card h4{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:400;font-size:clamp(20px,2vw,26px);color:var(--bone);margin:0 22px 8px;letter-spacing:.01em}
  .work-card p{font-family:'Noto Serif JP',serif;font-weight:300;font-size:13.5px;line-height:1.75;color:rgba(245,240,230,.78);margin:0 22px 16px}
  .work-card-go{font-family:'Cinzel',serif;font-size:10px;letter-spacing:.4em;color:var(--gold);margin:auto 22px 18px;opacity:.78;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px}
  .work-card-go::after{content:"→";transition:transform .3s}
  .work-card:hover .work-card-go::after{transform:translateX(4px)}
  /* 自動スクロール式に切替済 (2026-05-11) — 手動アローは非表示 */
  .reel-arrow{display:none !important;position:absolute;top:38%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(15,26,46,.92);border:1px solid rgba(184,168,122,.4);color:var(--gold);font-size:22px;line-height:1;cursor:pointer;z-index:10;transition:background .3s,border-color .3s,opacity .3s;align-items:center;justify-content:center}
  .reel-arrow:hover{background:rgba(184,168,122,.16);border-color:var(--gold)}
  .reel-arrow:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
  .reel-arrow-prev{left:8px}.reel-arrow-next{right:8px}
  @media(max-width:768px){
    .works-reel-track{grid-auto-columns:minmax(240px,78vw);gap:16px}
    .reel-arrow{display:none}
  }
  @media(prefers-reduced-motion:reduce){
    .works-reel-track{scroll-behavior:auto}
    .work-card:hover{transform:none}
    .work-card:hover .work-card-img img{transform:none}
  }

/* ───── Hero brand reading (NYX · ニックス) ───── */
.hero-brand-reading{
  margin-top:48px;
  display:flex;justify-content:center;align-items:center;gap:14px;
  font-family:'Cinzel',serif;
  font-size:11px;letter-spacing:.5em;
  color:var(--gold);opacity:0;
  text-transform:uppercase;
  animation:hbrFade 1.4s ease-out 1.4s forwards;
}
.hero-brand-reading .hbr-jp{
  font-family:'Noto Sans JP',sans-serif;
  font-weight:300;
  font-size:11px;
  letter-spacing:.4em;
  color:var(--bone);opacity:.78;
  text-transform:none;
}
.hero-brand-reading .hbr-sep{opacity:.4;font-size:10px}
@keyframes hbrFade{from{opacity:0;transform:translateY(6px)}to{opacity:.85;transform:none}}
@media(max-width:768px){
  .hero-brand-reading{margin-top:32px;gap:10px;font-size:10px;letter-spacing:.4em}
  .hero-brand-reading .hbr-jp{font-size:10px;letter-spacing:.3em}
}
@media(prefers-reduced-motion:reduce){
  .hero-brand-reading{animation:none;opacity:.85}
}

/* ───── Works fraction note (selected fraction framing) ───── */
.works-fraction-note{
  margin-top:14px;
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:13px;
  letter-spacing:.02em;
  color:var(--gold);
  opacity:.68;
  line-height:1.7;
}
.works-fraction-note span{
  display:block;
  font-family:'Noto Serif JP',serif;
  font-style:normal;
  font-size:12px;
  color:rgba(232,224,206,.6);
  letter-spacing:.02em;
  margin-top:4px;
}
@media(max-width:768px){
  .works-fraction-note{font-size:12px}
  .works-fraction-note span{font-size:11px}
}

/* ───── Phase 2C: Tonight's Chronicle (sunset gate) ───── */
.tonight-chronicle{
  display:none;
  padding:80px 24px;
  text-align:center;
  background:radial-gradient(ellipse at center, rgba(15,26,46,.5) 0%, transparent 70%);
  position:relative;
}
body.is-night-hour .tonight-chronicle{
  display:block;
  animation:tcReveal 2s ease-out;
}
@keyframes tcReveal{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.tonight-chronicle .tc-eyebrow{
  display:inline-block;
  font-family:'Cinzel',serif;
  font-size:11px;letter-spacing:.5em;
  color:var(--gold);opacity:.78;
  text-transform:uppercase;
  margin-bottom:32px;
}
.tonight-chronicle .tc-text{
  font-family:'Noto Serif JP',serif;
  font-weight:300;
  font-size:clamp(22px,2.4vw,32px);
  color:var(--bone);
  line-height:1.85;letter-spacing:.04em;
  margin-bottom:24px;
}
.tonight-chronicle .tc-en{
  font-family:'Cormorant Garamond',serif;
  font-style:italic;
  font-size:.7em;
  color:var(--gold-light);
  opacity:.7;
}
.tonight-chronicle .tc-link{
  display:inline-block;
  font-family:'Cinzel',serif;
  font-size:11px;letter-spacing:.4em;
  color:var(--gold);text-decoration:none;
  padding:14px 32px;
  border:1px solid rgba(184,168,122,.32);
  text-transform:uppercase;
  margin-top:24px;
  transition:all .5s ease;
}
.tonight-chronicle .tc-link:hover{
  background:rgba(184,168,122,.08);
  border-color:var(--gold-light);
  letter-spacing:.5em;
}
@media(prefers-reduced-motion:reduce){
  body.is-night-hour .tonight-chronicle{animation:none}
}