@charset "utf-8";
/* ============================================================
   hero.css
   ヒーロービュー（既存デザインそのまま）
   ※ ヒーロー内にあった 01/04 のカウンターは、右側のインジケーター（.side-index）が
     ヒーローぶんも受け持つようになったため撤去しています
   ============================================================ */

.hero{
  position:relative;height:100svh;min-height:720px;
  overflow:hidden;background:#07101a;isolation:isolate;
}
#space{position:absolute;inset:0;width:100%;height:100%;display:block}

.hero-copy{
  position:absolute;z-index:3;left:8.5vw;top:50%;transform:translateY(-50%);
  width:430px;pointer-events:none;
}
.eyebrow{
  margin:0 0 28px;color:#778595;font-size:9px;letter-spacing:.35em;
  opacity:0;animation:tcUp .8s .1s forwards;
}
.hero h1{
  margin:0;font-size:clamp(78px,9.6vw,155px);line-height:.78;
  font-weight:300;letter-spacing:-.07em;
}
.hero h1 span{display:block;opacity:0;transform:translateY(30px)}
.hero h1 span:first-child{animation:tcUp 1s .25s forwards}
.hero h1 span:last-child{animation:tcUp 1s .4s forwards}

.accent{
  width:350px;height:1px;margin:40px 0 28px;
  background:linear-gradient(90deg,var(--pink),var(--violet),var(--cyan));
  box-shadow:0 0 16px rgba(255,40,168,.4);
  transform-origin:left;background-size:220% 100%;
  animation:tcGradientLoop 3.8s ease-in-out infinite;
}
.services{margin:0 0 30px;font-size:10px;letter-spacing:.27em;opacity:0;animation:tcFade .7s 1s forwards}
.services i{font-style:normal;color:var(--pink);margin:0 8px}
.services i:last-child{color:var(--cyan)}
.lead{
  margin:0;color:#dfe5ea;font-size:13px;line-height:2.05;letter-spacing:.08em;
  opacity:0;animation:tcUp .8s 1.1s forwards;
}
.cta{
  display:inline-flex;gap:28px;align-items:center;margin-top:43px;padding:12px 0;
  border-bottom:1px solid #626e7b;font-size:10px;letter-spacing:.3em;
  opacity:0;animation:tcFade .8s 1.3s forwards;pointer-events:auto;transition:.35s;
}
.cta:hover{gap:42px;border-color:var(--pink)}
.cta b{font-size:18px;font-weight:300}

.status{position:absolute;z-index:3;right:4vw;top:112px;font-size:8px;letter-spacing:.3em;color:#607183}
.status span{color:#72ffd0;text-shadow:0 0 10px #72ffd0}

.scroll{
  position:absolute;z-index:3;left:38px;bottom:30px;
  display:flex;flex-direction:column;align-items:center;gap:13px;
  font-size:8px;letter-spacing:.35em;
}
.scroll i{width:1px;height:74px;background:linear-gradient(var(--pink),var(--cyan))}

@media(max-width:900px){
  .hero{min-height:100svh}
  .hero-copy{left:7vw;width:80%;top:43%}
  .status{top:auto;bottom:28px;right:24px}
  .scroll{left:20px}
}
@media(max-width:600px){
  .hero h1{font-size:22vw}
  .accent{width:72%}
  .services{font-size:8px;letter-spacing:.18em}
  .lead{font-size:12px}
  .hero-copy{left:8vw}
}