/* ============================================================
   AMOÉ TOKYO — home（トップページ専用）
   ============================================================ */

/* ---------- Hero ---------- */
.hero-stage{
  --cycle:420vh;         /* 1周（Mission→Values→退場）のスクロール量 */
  --cycles:1;            /* 何周ぶん用意するか（1 = ループなし）。JS もこの値を読む */
  position:relative;
  height:calc(var(--cycle) * var(--cycles));
}
.hero{
  --mp:0;                /* Mission パネルの進捗 0→1（JS が更新） */
  position:sticky;
  top:0;
  height:100vh;
  height:100svh;
  overflow:hidden;
  isolation:isolate;
}

/* ---------- 背景：波 ---------- */
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  /* JS が動かない場合のフォールバック（カラーイメージ準拠） */
  background:
    radial-gradient(90% 70% at 8% 62%,  rgba(240,205,180,.45) 0%, rgba(240,205,180,0) 62%),
    radial-gradient(80% 60% at 46% 46%, rgba(150,205,230,.45) 0%, rgba(150,205,230,0) 66%),
    linear-gradient(200deg,#eff8ff 0%,#ffffff 68%);
}
/* 参考動画は「黒地に紫のリボン」なので、反転して白地にしてから
   AMOE のパレット（淡いブルー〜オレンジ）へ寄せ、multiply で下地のグラデーションに馴染ませる */
.hero-poster,
.hero-video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:invert(1) sepia(.12) hue-rotate(158deg) saturate(1.12) brightness(1.05) contrast(.88);
  mix-blend-mode:multiply;
  opacity:0;
  transition:opacity 1.4s ease;
}
.hero-poster{opacity:.92;}
.hero-video.is-ready{opacity:.92;}
.hero-video{opacity:0;}
/* 動画が出たら静止画は隠す */
.hero-bg.has-video .hero-poster{opacity:0;transition:opacity .8s ease .3s;}

/* 前景の可読性を上げる薄いベール */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 38%, rgba(255,255,255,0) 62%);
}

/* ---------- 共通 ---------- */
/* .site-header の position は components.css 側で指定している。
   ここに position を書くと（後読みなので）そちらを打ち消してしまうため含めない。 */
.side-nav,.hero-copy,.hero-service{
  position:relative;
  z-index:2;
}
.site-header{z-index:4;}   /* 曇りガラスより前面 */

/* ---------- 左メニュー ---------- */
.side-nav{display:flex;flex-direction:column;margin-left:var(--nudge);}
.side-nav a{
  position:relative;
  font-size:13px;
  font-weight:500;
  line-height:1;
  color:var(--ink);
  margin-bottom:18px;
  width:max-content;
  transition:color .3s ease;
}
.side-nav a:last-child{margin-bottom:0;}
@media (hover:hover) and (pointer:fine){
  .side-nav a:hover{color:var(--accent);}
}

/* ---------- ヒーローコピー ---------- */
.hero-title{
  margin:0;
  font-size:clamp(40px,5.3vw,106px);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.012em;
  color:var(--ink);
  margin-left:-.02em; /* 光学的な左揃え */
}
.hero-title .t2{padding-left:.06em;}   /* 2行目だけわずかに右へ */
.hero-tagline{
  margin:25px 0 0 var(--nudge);
  font-size:clamp(12px,.98vw,19px);
  font-weight:400;
  letter-spacing:.005em;
  line-height:1.4;
  color:var(--ink);
}

/* ---------- 左下 Service ---------- */
.hero-service{margin-left:var(--nudge);}
.hero-service p{margin:0;}
.service-label,.service-list{
  font-weight:400;
  line-height:1.75;
  letter-spacing:.01em;
  color:var(--ink);
}
.hero-service .service-label{font-size:clamp(11px,.88vw,17px);margin-bottom:9px;}
.service-list{font-size:10px;}

/* 「/」の左右の余白 */
.sep{
  display:inline-block;
  margin:0 10px;
  color:inherit;
}

/* ============================================================
   Desktop（>=900px）：モックアップの座標を viewport 比で再現
   ============================================================ */
@media (min-width:900px){
  .side-nav{position:absolute;top:19.5%;left:var(--pad-x);}
  .hero-copy{position:absolute;top:47.5%;left:var(--pad-x);}
  .hero-service{position:absolute;top:85%;left:var(--pad-x);}
}

/* 横幅は広いが背が低い画面（ノートPCの横向きなど）は絶対配置をやめる */
@media (min-width:900px) and (max-height:620px){
  .site-header{position:static;padding:26px var(--pad-r) 0 var(--pad-x);}
  .side-nav,.hero-copy,.hero-service{position:static;}
  .hero{display:flex;flex-direction:column;padding-bottom:36px;}
  .side-nav{margin:5vh 0 0 var(--pad-x);}
  .hero-copy{margin:auto 0 0 var(--pad-x);}
  .hero-service{margin:6vh 0 0 var(--pad-x);}
}

/* ============================================================
   Tablet / Mobile（<900px）
   ============================================================ */
@media (max-width:899.98px){
  .hero{
    display:flex;
    flex-direction:column;
    padding:104px var(--pad-x) 36px;
  }
  .side-nav{margin-top:4vh;}
  .hero-copy{margin-top:auto;}
  .hero-title{font-size:clamp(38px,12.5vw,72px);}
  .hero-service{margin-top:auto;padding-top:7vh;margin-bottom:7vh;}
}

/* ============================================================
   Mission / Values：スクロールで右から中央まで出てくる曇りガラス
   ============================================================ */
.glass{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  left:50%;
  z-index:3;
  background:linear-gradient(100deg, rgba(255,255,255,.44), rgba(255,255,255,.26));
  -webkit-backdrop-filter:blur(20px) saturate(1.06);
  backdrop-filter:blur(20px) saturate(1.06);
  border-left:1px solid rgba(255,255,255,.62);
  border-radius:18px 0 0 18px;
  box-shadow:-30px 0 60px -42px rgba(60,85,115,.3);
  transform:translateX(calc((1 - var(--mp)) * 100%));
  will-change:transform;
  pointer-events:none;
}

/* Mission と Values は同じ位置に重ねてクロスフェード */
.panel{
  position:absolute;
  left:13%;
  right:6%;
  top:50%;
  transform:translateY(-50%);
  opacity:0;
  will-change:opacity;
}
.panel-title{
  margin:0;
  font-size:clamp(34px,4.5vw,90px);
  font-weight:600;
  line-height:1;
  letter-spacing:.05rem;
  color:#fff;
  text-shadow:0 2px 30px rgba(45,70,100,.42);
}

/* Mission */
.panel-lead{
  display:flex;
  align-items:center;
  gap:clamp(12px,1.3vw,26px);
  margin:25px 0 0;
  margin-left:clamp(-42px,-2.1vw,-16px);
}

/* Values */
.values-list{
  list-style:none;
  margin:28px 0 0 14px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:clamp(12px,1.5vw,27px);
}
.values-list li{
  display:flex;
  align-items:center;
  gap:clamp(14px,1.5vw,27px);
}

.rule{
  display:block;
  flex:none;
  width:clamp(13px,1.03vw,20px);   /* Values の線（Mission 用は下で上書き） */
  height:2px;
  background:var(--accent);
}
.panel-lead .rule{width:clamp(28px,2.85vw,57px);}

.panel-text{
  font-size:clamp(11px,.95vw,19px);
  font-weight:400;
  letter-spacing:.16em;
  line-height:1.9;
  color:var(--ink);
}

/* 左メニュー：表示中のセクションをアクセントカラーに */
.side-nav a.is-active{color:var(--accent);}

/* スマホは横幅が足りないので、下から立ち上がるパネルにする */
@media (max-width:899.98px){
  .glass{
    inset:auto 0 0 0;
    height:66%;                 /* 画面の 2/3 */
    border-left:0;
    border-top:1px solid rgba(255,255,255,.62);
    border-radius:18px 18px 0 0;
    box-shadow:0 -30px 60px -42px rgba(60,85,115,.3);
    transform:translateY(calc((1 - var(--mp)) * 100%));
  }
  .panel{left:calc(var(--pad-x) + 18px);right:var(--pad-x);top:43%;}
  .panel-title{font-size:clamp(30px,9vw,54px);}
  .panel-lead{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    margin:22px 0 0;
  }
  .values-list{margin-top:22px;gap:13px;}
  .panel-text{font-size:13px;letter-spacing:.12em;}

  /* パネルと重ならないよう、せり上がりに合わせてコピーを消す */
  .hero-copy,.hero-service{opacity:calc(1 - var(--mp));}
}

/* 極端に狭い端末 */
@media (max-width:359.98px){
  .logo-mark{height:19px;}
  .hero-title{font-size:36px;}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero-bg canvas{transition:none;}
  .global-nav{transition:none;}
  .hero-bg.has-video .hero-poster{transition:none;}
}