/* ═══════════════════════════════════════════════════════════════
   GALILEO TOP ── Hybrid Film Engine
   LAYER1 AI Cinema (video/image) + LAYER2 particles + LAYER3 type
   ═══════════════════════════════════════════════════════════════ */
:root{
  --orange:#FFBA42; --orange-deep:#C8831A; --navy:#0D1F5C;
  --ink:#020308; --star:#F4F6FF; --f:'Inter','Noto Sans JP',sans-serif;
}
*{ margin:0; padding:0; box-sizing:border-box; }
html{ background:var(--ink); }
html.ft-loading{ overflow:hidden; }
body.film{ font-family:var(--f); background:var(--ink); color:var(--star); -webkit-font-smoothing:antialiased; overscroll-behavior:none; }
@media (pointer:fine){ body.film{ cursor:none; } body.film a, body.film button{ cursor:none; } }

/* ── loader ── */
#ft-loader{ position:fixed; inset:0; z-index:200; background:#010207; display:flex; align-items:center; justify-content:center; transition:opacity 1s ease .2s, visibility 0s linear 1.2s; }
html.ft-ready #ft-loader{ opacity:0; visibility:hidden; }
#ft-loader .l{ font-size:10px; letter-spacing:.62em; text-indent:.62em; color:rgba(244,246,255,.55); text-transform:uppercase; }
#ft-loader .l b{ color:var(--orange); font-weight:400; }
#ft-loader .l-logo{ width:clamp(150px,22vw,240px); height:auto; opacity:0; animation:ftlogo 1.5s cubic-bezier(.22,1,.36,1) forwards; }
@keyframes ftlogo{ 0%{ opacity:0; transform:translateY(8px) scale(.97); filter:blur(6px); } 100%{ opacity:1; transform:none; filter:none; } }

/* ── LAYER1 media stack ── */
#media{ position:fixed; inset:0; z-index:1; background:#000; }
#media .m{ position:absolute; inset:0; overflow:hidden; opacity:0; will-change:opacity; }
#media .kb{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform; }
/* per-scene focal crop for 3:2 stills in 21:9 viewport */
.m[data-ch="1"] .kb{ object-position:30% 40%; }  /* child on left */
.m[data-ch="3"] .kb{ object-position:60% 55%; }  /* earth/sunrise */

/* ── LAYER2 particle bridge ── */
#bridge{ position:fixed; inset:0; z-index:2; pointer-events:none; }

/* ── atmospherics ── */
#ft-scrim{ position:fixed; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(to top, rgba(2,3,8,.72) 0%, rgba(2,3,8,.12) 26%, rgba(2,3,8,0) 46%, rgba(2,3,8,0) 70%, rgba(2,3,8,.35) 100%); }
#ft-vig{ position:fixed; inset:0; z-index:3; pointer-events:none; background:radial-gradient(ellipse at center, transparent 46%, rgba(0,0,3,.6) 100%); }
#ft-grain{ position:fixed; inset:-60px; z-index:6; pointer-events:none; opacity:.05; }
.ft-bar{ position:fixed; left:0; right:0; height:0; background:#000; z-index:7; pointer-events:none; transition:height .6s cubic-bezier(.76,0,.24,1); }
.ft-bar-t{ top:0; } .ft-bar-b{ bottom:0; }

/* ── header ── */
#ft-hdr{ position:fixed; top:0; left:0; right:0; z-index:40; display:flex; justify-content:space-between; align-items:center; padding:20px clamp(18px,3vw,40px); }
#ft-hdr .lg{ display:flex; align-items:center; }
#ft-hdr .lg img{ height:17px; }
.liquid-glass{ background:rgba(0,0,0,.32); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border:none; box-shadow:inset 0 1px 1px rgba(255,255,255,.1); position:relative; overflow:hidden; }
.liquid-glass::before{ content:''; position:absolute; inset:0; border-radius:inherit; padding:1.4px;
  background:linear-gradient(180deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.1) 20%, rgba(255,255,255,0) 40%, rgba(255,255,255,0) 60%, rgba(255,255,255,.1) 80%, rgba(255,255,255,.3) 100%);
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
#ft-nav{ display:flex; align-items:center; gap:8px; padding:8px 8px 8px 22px; border-radius:12px; }
#ft-nav a{ font-size:12px; letter-spacing:.08em; color:rgba(244,246,255,.82); text-decoration:none; padding:8px 12px; transition:color .25s; }
#ft-nav a:hover{ color:var(--orange); }
#ft-nav .cta{ background:var(--orange); color:var(--navy); font-weight:600; padding:9px 20px; border-radius:8px; }
#ft-nav .cta:hover{ background:var(--orange-deep); color:var(--navy); }
#ft-burger{ display:none; }
@media (max-width:900px){
  #ft-nav a:not(.cta){ display:none; }
  #ft-nav{ padding:8px; }
}

/* ── chapter rail ── */
#ft-rail{ position:fixed; right:clamp(14px,2.2vw,30px); top:50%; transform:translateY(-50%); z-index:40; display:flex; flex-direction:column; gap:13px; }
#ft-rail button{ background:none; border:none; cursor:pointer; text-align:right; padding:0; display:flex; align-items:center; justify-content:flex-end; gap:8px; }
#ft-rail .lbl{ font-size:8px; letter-spacing:.18em; color:rgba(244,246,255,0); text-transform:uppercase; transition:color .4s; white-space:nowrap; }
#ft-rail .dot{ width:20px; height:1px; background:rgba(244,246,255,.3); transition:background .4s,width .4s; }
#ft-rail button.on .dot{ background:var(--orange); width:32px; }
#ft-rail button.on .lbl{ color:rgba(244,246,255,.75); }
#ft-rail button:hover .lbl{ color:rgba(244,246,255,.5); }
@media (max-width:820px){ #ft-rail{ display:none; } }

/* ── LAYER3 chapters ── */
#ft-stage{ position:fixed; inset:0; z-index:20; pointer-events:none; }
.ft-ch{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; text-align:center; padding:0 8vw 17vh; opacity:0; visibility:hidden; }
.ft-ch .k{ font-size:10px; font-weight:600; letter-spacing:.4em; text-indent:.4em; color:var(--orange); text-transform:uppercase; margin-bottom:22px; }
.ft-ch h2{ font-weight:200; letter-spacing:.06em; line-height:1.5; text-shadow:0 2px 50px rgba(0,0,3,.9); }
.ft-ch .big{ font-size:clamp(28px,4.6vw,64px); }
.ft-ch .mid{ font-size:clamp(22px,3.2vw,44px); }
.ft-ch .sub{ margin-top:24px; font-size:clamp(13px,1.4vw,17px); font-weight:300; letter-spacing:.14em; line-height:2; color:rgba(244,246,255,.82); text-shadow:0 2px 30px rgba(0,0,3,.9); max-width:40em; }
.ft-ch .sub em{ font-style:normal; color:var(--orange); }
.ft-ch h2 em{ font-style:normal; color:var(--orange); }

/* char reveal */
.split .w{ display:inline-block; white-space:nowrap; }
.split .c{ display:inline-block; opacity:0; transform:translateX(-16px); }
.split.in .c{ opacity:1; transform:none; transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i)*30ms); }

/* chapter 1 special */
.q-line{ font-size:clamp(26px,4vw,58px); font-weight:200; letter-spacing:.3em; text-indent:.3em; color:var(--star);
  text-shadow:0 1px 4px rgba(0,0,5,.85), 0 2px 18px rgba(0,0,5,.9), 0 4px 60px rgba(0,0,5,.85); }
.why{ font-size:clamp(90px,22vw,340px); font-weight:200; line-height:1; letter-spacing:.03em; text-shadow:0 4px 80px rgba(0,0,3,.7); }
.why .d{ color:var(--orange); }
.ft-ch.center{ justify-content:center; padding-bottom:0; }
/* 第1章: 明るい空でも問いが読めるよう中央に薄い暗幕 */
.ft-ch[data-ch="0"]::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 62% 34% at 50% 48%, rgba(2,4,10,.44), transparent 72%); }

/* business integration mini-grid */
.biz7{ display:flex; flex-wrap:wrap; gap:8px 26px; justify-content:center; margin-top:18px; }
.biz7 span{ font-size:clamp(11px,1.25vw,15px); font-weight:300; letter-spacing:.12em; color:rgba(244,246,255,.9); }
.biz7 b{ color:var(--orange); font-weight:400; margin-right:.4em; }

/* contact */
.ft-cta{ display:inline-block; margin-top:40px; padding:18px 54px; background:var(--orange); color:var(--navy); font-size:15px; font-weight:600; letter-spacing:.22em; text-indent:.22em; text-decoration:none; border-radius:2px; pointer-events:auto; will-change:transform; }
.ft-cta small{ display:block; margin-top:6px; font-size:9px; letter-spacing:.3em; color:rgba(13,31,92,.6); }
.ft-links{ margin-top:32px; display:flex; gap:24px; flex-wrap:wrap; justify-content:center; pointer-events:auto; }
.ft-links a{ font-size:11px; letter-spacing:.16em; color:rgba(244,246,255,.7); text-decoration:none; }
.ft-links a:hover{ color:var(--orange); }
.ft-title-en{ font-size:clamp(46px,11vw,150px); font-weight:200; text-transform:uppercase; color:var(--star); }

/* scroll hint */
#ft-hint{ position:fixed; bottom:28px; left:50%; transform:translateX(-50%); z-index:40; display:flex; flex-direction:column; align-items:center; gap:9px; }
#ft-hint span{ font-size:9px; letter-spacing:.5em; text-indent:.5em; color:rgba(244,246,255,.55); }
#ft-hint i{ width:1px; height:42px; background:linear-gradient(to bottom,var(--orange),transparent); transform-origin:top; animation:fthl 2.2s cubic-bezier(.65,0,.35,1) infinite; }
#ft-hint b{ font-size:9.5px; font-weight:400; letter-spacing:.22em; color:rgba(255,186,66,.8); text-shadow:0 1px 8px rgba(0,0,5,.8); white-space:nowrap; }
@media (max-width:600px){ #ft-hint b{ font-size:9px; letter-spacing:.12em; } }
@keyframes fthl{ 0%{transform:scaleY(0)}45%{transform:scaleY(1);transform-origin:top}46%{transform-origin:bottom}90%,100%{transform:scaleY(0);transform-origin:bottom} }

/* skip ── フィルムを飛ばして「Galileoとは」へ */
#ft-skip{ position:fixed; right:clamp(16px,3vw,40px); bottom:26px; z-index:45;
  display:inline-flex; align-items:center; gap:7px; padding:11px 18px;
  background:rgba(2,4,12,.4); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(244,246,255,.2); border-radius:999px; color:rgba(244,246,255,.85);
  font-size:10px; font-weight:600; letter-spacing:.22em; cursor:pointer;
  transition:opacity .5s ease, background .3s ease, border-color .3s ease, transform .3s ease; }
#ft-skip em{ font-style:normal; color:var(--orange); transition:transform .3s ease; }
#ft-skip small{ font-size:9px; font-weight:400; letter-spacing:.1em; color:rgba(244,246,255,.5); }
#ft-skip:hover{ background:rgba(255,186,66,.14); border-color:var(--orange); transform:translateY(-2px); }
#ft-skip:hover em{ transform:translateX(3px); }
/* フィルム終端では消す */
html:not(.ft-ready) #ft-skip{ opacity:0; }
@media (max-width:600px){ #ft-skip small{ display:none; } #ft-skip{ bottom:20px; padding:10px 14px; } }

/* cursor */
/* cursor ── どの背景でも見えるオレンジ発光リング */
#ft-cur{ position:fixed; left:0; top:0; z-index:300; pointer-events:none; }
#ft-cur .r{ position:absolute; left:-18px; top:-18px; width:36px; height:36px; border-radius:50%;
  border:1.5px solid rgba(255,186,66,.9); background:rgba(255,186,66,.06);
  box-shadow:0 0 16px rgba(255,186,66,.4), inset 0 0 10px rgba(255,186,66,.14), 0 0 2px rgba(0,0,0,.5);
  transition:transform .35s cubic-bezier(.22,1,.36,1), background .3s ease; }
#ft-cur .d{ position:absolute; left:-2.5px; top:-2.5px; width:5px; height:5px; border-radius:50%;
  background:#FFBA42; box-shadow:0 0 10px rgba(255,186,66,.95), 0 0 2px rgba(0,0,0,.4); }
#ft-cur.hov .r{ transform:scale(1.65); background:rgba(255,186,66,.14); }
@media (pointer:coarse){ #ft-cur{ display:none; } }

/* ══ film scroll driver + sticky viewport ══ */
#film-scroll{ position:relative; height:760vh; z-index:1; }
#film-sticky{ position:sticky; top:0; height:100vh; overflow:hidden; }
#media,#bridge,#ft-scrim,#ft-vig,#ft-stage{ position:absolute; }
/* rail/cursor/grain/bars/header stay fixed (declared above) */

/* ══════════════════════════════════════════════════════════════
   CORPORATE SECTIONS ── dark cinematic, continues from the film
   ══════════════════════════════════════════════════════════════ */
#after{ position:relative; z-index:10; background:var(--ink); }
.fx{ position:relative; padding:clamp(90px,11vw,150px) 8vw; }
.fx-in{ max-width:1180px; margin:0 auto; position:relative; }
.fx.alt{ background:linear-gradient(180deg, #05070f 0%, #04060c 100%); }
.fx-head{ display:flex; align-items:baseline; gap:20px; margin-bottom:clamp(38px,4.5vw,60px); }
.fx-num{ font-size:11px; font-weight:600; letter-spacing:.2em; color:var(--orange); }
.fx-title{ font-size:clamp(26px,3.2vw,42px); font-weight:200; letter-spacing:.04em; color:var(--star); }
.fx-en{ font-size:10px; font-weight:600; letter-spacing:.3em; color:rgba(244,246,255,.34); text-transform:uppercase; }
.fx-div{ flex:1; height:1px; background:rgba(244,246,255,.12); }
.fx-lead{ font-size:clamp(19px,2.4vw,30px); font-weight:200; color:var(--star); line-height:2; letter-spacing:.05em; }
.fx-lead em{ font-style:normal; color:var(--orange); }
.fx-body{ margin-top:26px; font-size:14.5px; line-height:2.25; color:rgba(244,246,255,.66); max-width:720px; }
.fx-body strong{ color:var(--star); font-weight:400; }

/* MVV */
.fx-mvv{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(244,246,255,.1); border:1px solid rgba(244,246,255,.1); margin-top:clamp(40px,5vw,64px); }
.fx-mvv .cell{ background:var(--ink); padding:clamp(26px,3vw,42px); }
.fx-mvv .lbl{ font-size:10px; font-weight:700; letter-spacing:.28em; color:var(--orange); text-transform:uppercase; margin-bottom:16px; }
.fx-mvv .txt{ font-size:clamp(14px,1.35vw,17px); color:var(--star); line-height:2; font-weight:300; }
@media(max-width:860px){ .fx-mvv{ grid-template-columns:1fr; } }

/* Architect × Disruptor */
.fx-duo{ display:grid; grid-template-columns:1fr auto 1fr; gap:clamp(14px,2.2vw,30px); align-items:stretch; margin-top:clamp(48px,6vw,80px); }
.fx-duo .cell{ position:relative; overflow:hidden; background:var(--navy); padding:clamp(28px,3.2vw,48px); }
.fx-duo .cell::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,186,66,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,186,66,.06) 1px,transparent 1px); background-size:40px 40px; transition:transform 1.2s cubic-bezier(.22,1,.36,1); }
.fx-duo .cell:hover::before{ transform:scale(1.1); }
.fx-duo .en{ position:relative; font-size:clamp(18px,2vw,26px); font-weight:300; letter-spacing:.12em; color:var(--orange); }
.fx-duo .jp{ position:relative; margin-top:10px; font-size:14px; font-weight:500; letter-spacing:.14em; color:var(--star); }
.fx-duo .desc{ position:relative; margin-top:16px; font-size:12.5px; line-height:2; color:rgba(244,246,255,.66); }
.fx-duo .x{ align-self:center; font-size:clamp(22px,2.6vw,34px); font-weight:200; color:var(--orange-deep); }
@media(max-width:760px){ .fx-duo{ grid-template-columns:1fr; } .fx-duo .x{ text-align:center; } }

/* Business rows */
.fx-biz{ border-top:1px solid rgba(244,246,255,.12); }
.fx-row{ position:relative; overflow:hidden; display:grid; grid-template-columns:64px 1.05fr 1.25fr 60px; gap:clamp(16px,2.4vw,40px); align-items:center; padding:clamp(28px,3.4vw,48px) 6px; border-bottom:1px solid rgba(244,246,255,.12); text-decoration:none; }
.fx-row::before{ content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,186,66,.08),transparent 70%); transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.22,1,.36,1); z-index:0; }
.fx-row:hover::before{ transform:scaleX(1); }
.fx-row>*{ position:relative; z-index:1; }
.fx-row .rn{ font-size:15px; font-weight:200; color:var(--orange); letter-spacing:.08em; }
.fx-row .rt{ font-size:clamp(19px,2.2vw,30px); font-weight:300; color:var(--star); letter-spacing:.05em; transition:transform .45s cubic-bezier(.22,1,.36,1); }
.fx-row:hover .rt{ transform:translateX(10px); }
.fx-row .re{ display:block; margin-top:6px; font-size:9px; font-weight:600; letter-spacing:.3em; color:rgba(244,246,255,.36); text-transform:uppercase; }
.fx-row .rd{ font-size:12.5px; line-height:2; color:rgba(244,246,255,.62); }
.fx-row .ra{ justify-self:end; font-size:20px; font-weight:200; color:var(--orange-deep); transition:transform .45s cubic-bezier(.22,1,.36,1); }
.fx-row:hover .ra{ transform:translateX(8px); }
@media(max-width:860px){ .fx-row{ grid-template-columns:44px 1fr 36px; } .fx-row .rd{ display:none; } }

/* Business 3D accent */
.fx-biz-3d{ position:relative; margin-top:clamp(40px,5vw,70px); height:clamp(300px,44vw,520px); }
#biz3d{ position:absolute; inset:0; width:100%; height:100%; }
.fx-biz-3d .cap{ position:absolute; left:0; bottom:0; font-size:10px; letter-spacing:.28em; color:rgba(244,246,255,.4); text-transform:uppercase; }

/* Company table */
.fx-tbl{ width:100%; border-collapse:collapse; }
.fx-tbl th,.fx-tbl td{ padding:clamp(15px,1.7vw,22px) 6px; border-bottom:1px solid rgba(244,246,255,.12); font-size:13.5px; text-align:left; vertical-align:top; }
.fx-tbl th{ width:190px; font-weight:500; color:var(--star); letter-spacing:.08em; white-space:nowrap; }
.fx-tbl td{ color:rgba(244,246,255,.66); line-height:2; }
.fx-tbl a{ color:var(--orange); text-decoration:none; }
@media(max-width:640px){ .fx-tbl th{ width:104px; } }

/* CTA band */
.fx-cta{ position:relative; overflow:hidden; background:var(--navy); padding:clamp(90px,11vw,140px) 8vw; text-align:center; }
.fx-cta::before{ content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,186,66,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,186,66,.05) 1px,transparent 1px); background-size:54px 54px; }
.fx-cta .inner{ position:relative; }
.fx-cta .line{ font-size:clamp(24px,3.6vw,48px); font-weight:200; color:var(--star); letter-spacing:.12em; line-height:1.9; }
.fx-cta .en{ margin-top:18px; font-size:10px; letter-spacing:.4em; text-indent:.4em; color:rgba(244,246,255,.45); text-transform:uppercase; }

/* footer */
.fx-foot{ background:#010207; padding:64px 8vw 40px; position:relative; z-index:10; }
.fx-foot .in{ max-width:1180px; margin:0 auto; }
.fx-foot .top{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.fx-foot img{ height:18px; }
.fx-foot .addr{ margin-top:16px; font-size:11px; color:rgba(244,246,255,.45); line-height:2; letter-spacing:.06em; }
.fx-foot nav{ display:flex; gap:clamp(22px,4vw,54px); flex-wrap:wrap; }
.fx-foot nav a{ font-size:12px; letter-spacing:.14em; color:rgba(244,246,255,.7); text-decoration:none; }
.fx-foot nav a:hover{ color:var(--orange); }
.fx-foot nav a small{ display:block; font-size:9.5px; letter-spacing:.24em; color:rgba(244,246,255,.38); margin-top:3px; }
.fx-foot .bot{ margin-top:48px; padding-top:22px; border-top:1px solid rgba(244,246,255,.1); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.fx-foot .bot p{ font-size:10px; letter-spacing:.14em; color:rgba(244,246,255,.35); }
.fx-foot .bot a{ color:rgba(244,246,255,.45); text-decoration:none; }

/* reveal ── hidden only when JS is active (html.ft-anim); no-JS = visible */
.ft-anim .rv{ opacity:0; transform:translateY(34px); transition:opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1); }
.ft-anim .rv.in{ opacity:1; transform:none; }
.rv.d1{ transition-delay:.08s; } .rv.d2{ transition-delay:.16s; } .rv.d3{ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){ .ft-anim .rv{ opacity:1; transform:none; } }

/* rail auto-hide after film */
#ft-rail.hidden{ opacity:0; visibility:hidden; transition:opacity .5s; }

@media (prefers-reduced-motion:reduce){
  .split .c{ opacity:1; transform:none; transition:none; }
  #ft-hint i{ animation:none; height:28px; }
}
@media (max-width:640px){
  .ft-ch{ padding:0 6vw 15vh; }
  .ft-ch .sub{ letter-spacing:.08em; }
}
