/* =========================================================
   IM FREE — HOME (light, corporate hero layout)
   Loaded only by index.html, after styles.css
   ========================================================= */

body[data-page="home"] { background: var(--white); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: 132svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--paper);
  overflow: hidden;
  padding-top: var(--header-h);
  justify-content: flex-start;
  /* shared KV framing — feature the reflective glass towers, let the foreground sprawl run off-bottom */
  --kv-left: -11%; --kv-bottom: -13%; --kv-w: 122%;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* layer 1 — blue sky gradient */
.hero__sky {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, #7fbcff 0%, #a9d6ff 42%, #d9eeff 72%, #eef7ff 100%);
}

/* layer 2 — clouds drift across the sky BEHIND the buildings (so the city occludes them naturally) */
.hero__clouds {
  position: absolute; left: 0; right: 0; top: 0; height: 56%;
  z-index: 1; overflow: hidden; pointer-events: none;
}
.hero__cloud {
  position: absolute; height: auto;
  will-change: transform;
  filter: drop-shadow(0 6px 16px rgba(120,140,170,.12));
}
@media (prefers-reduced-motion: no-preference) {
  .hero__cloud--1 { top: 10%; width: 26vw; opacity: .92; animation: cloudDrift 64s linear infinite; }
  .hero__cloud--2 { top: 30%; width: 18vw; opacity: .78; animation: cloudDrift 88s linear infinite; animation-delay: -32s; }
  .hero__cloud--3 { top: 3%;  width: 15vw; opacity: .66; animation: cloudDrift 74s linear infinite; animation-delay: -55s; }
  .hero__cloud--4 { top: 20%; width: 21vw; opacity: .6;  animation: cloudDrift 102s linear infinite; animation-delay: -70s; }
}
@keyframes cloudDrift {
  from { transform: translateX(-32vw); }
  to   { transform: translateX(132vw); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__cloud--1 { top: 10%; width: 26vw; left: 6%; opacity:.9; }
  .hero__cloud--2 { top: 30%; width: 18vw; left: 58%; opacity:.75; }
  .hero__cloud--3 { top: 3%;  width: 15vw; left: 38%; opacity:.6; }
  .hero__cloud--4 { top: 20%; width: 21vw; left: 80%; opacity:.55; }
}

/* layer 3 — the city skyline (transparent sky), anchored to the bottom, full width */
.hero__city { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero__city-img {
  position: absolute; left: var(--kv-left); bottom: var(--kv-bottom); width: var(--kv-w); max-width: none; height: auto; min-height: 0;
  object-fit: cover; object-position: bottom center; display: block;
}
/* layer 4 — glass reflection: a diagonal light sweep clipped to the building shapes */
.hero__shine {
  position: absolute; left: var(--kv-left); bottom: var(--kv-bottom); width: var(--kv-w); height: auto; min-height: 0;
  top: auto; aspect-ratio: 1685 / 933;
  background: linear-gradient(115deg, transparent 38%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.85) 50%, rgba(255,255,255,.55) 52%, transparent 62%);
  background-size: 260% 100%;
  -webkit-mask: url("assets/city-skyline.png") bottom center / 100% auto no-repeat;
          mask: url("assets/city-skyline.png") bottom center / 100% auto no-repeat;
  mix-blend-mode: screen; opacity: .9;
}
@media (prefers-reduced-motion: no-preference) {
  .hero__shine { animation: glassShine 9s ease-in-out infinite; }
}
@keyframes glassShine {
  0%   { background-position: 140% 0; }
  55%  { background-position: -40% 0; }
  100% { background-position: -40% 0; }
}
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(95deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.74) 26%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(255,255,255,0) 60%, rgba(255,255,255,.5) 100%);
}

/* layer 5 — moving CARS (separate layer above the city; the city photo itself
   stays 100% static — only these elements translate along the roads).
   The layer box is positioned identically to .hero__city-img (same --kv vars
   + the image's 1685:933 ratio), so car coordinates are in image-% and stay
   glued to the roads at any viewport / crop. */
.hero__cars {
  position: absolute; left: var(--kv-left); bottom: var(--kv-bottom);
  width: var(--kv-w); aspect-ratio: 1685 / 933;
  z-index: 1; pointer-events: none;
}
.hero__car {
  position: absolute; top: 0; left: 0;
  width: clamp(11px, 1.15vw, 22px); aspect-ratio: 2.2 / 1; border-radius: 3px;
  background: linear-gradient(180deg, #fcfdff 0%, #dbe2ea 52%, #aab3c0 100%);
  box-shadow: 0 1px 3px rgba(18,28,48,.45);
  opacity: 0; will-change: left, top, transform, opacity;
}
.hero__car::after {
  content: ""; position: absolute; inset: 16% 24% 16% 58%;
  background: rgba(40,55,80,.5); border-radius: 1px;
}
.hero__car--dark { background: linear-gradient(180deg,#626d7c 0%,#39414e 60%,#262c36 100%); }
.hero__car--dark::after { background: rgba(210,220,235,.55); }
.hero__car--enji { background: linear-gradient(180deg,#bf3a5b 0%,#8C0026 72%); }
.hero__car--enji::after { background: rgba(255,225,230,.5); }

@media (prefers-reduced-motion: no-preference) {
  .hero__car { animation: carAway 9s linear infinite; }
  .hero__car--toward { animation-name: carToward; animation-duration: 10.5s; }
}
/* main avenue — receding up-left (cars shrink toward the horizon) */
@keyframes carAway {
  0%   { left: 31%;  top: 99%; transform: translate(-50%,-50%) rotate(35deg) scale(1);   opacity: 0; }
  12%  { opacity: .9; }
  82%  { opacity: .6; }
  100% { left: 10%;  top: 72%; transform: translate(-50%,-50%) rotate(35deg) scale(.28); opacity: 0; }
}
/* main avenue — oncoming, growing toward the camera (parallel lane, offset) */
@keyframes carToward {
  0%   { left: 12.5%; top: 73%; transform: translate(-50%,-50%) rotate(30deg) scale(.28); opacity: 0; }
  16%  { opacity: .7; }
  86%  { opacity: .92; }
  100% { left: 38%;   top: 99%; transform: translate(-50%,-50%) rotate(30deg) scale(1);   opacity: 0; }
}
/* lower cross street removed — only the main avenue is framed in the hero crop */
@media (prefers-reduced-motion: reduce) { .hero__cars { display: none; } }
.hero__inner { position: relative; z-index: 3; width: 100%; padding-bottom: clamp(34px, 5vh, 60px); margin-top: clamp(60px, 12svh, 160px); }
.hero__sub {
  font-family: var(--mono); font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--crimson); display: inline-flex; align-items: center; gap: 14px; margin-bottom: 22px;
}
.hero__sub::before { content: ""; width: 40px; height: 1px; background: var(--crimson); }
.hero__title {
  font-family: var(--en); font-weight: 800; text-transform: lowercase;
  font-size: clamp(54px, 12vw, 188px); line-height: .84; letter-spacing: -.04em; color: var(--ink);
  /* 高さを「2行分」に固定：中の文字を何行に変えても hero の高さが変わらず、
     背景（bottom:% 基準の建物）が絶対にズレない。2マスク×(.84em+.04em)=1.76em で現状と完全一致。 */
  height: 2.04em;
}
.hero__line-mask { display: block; overflow: hidden; padding-bottom: .18em; }
.hero__line { display: block; will-change: transform; }
/* 1行タイトル用：箱の高さ(1.76em)は変えず、中の文字だけ1行に収まるサイズへ。
   下寄せで日本語リードのすぐ上に配置。背景には一切影響しない。 */
.hero__title--single { display: flex; flex-direction: column; justify-content: flex-end; }
.hero__title--single .hero__line { font-size: clamp(28px, 6.4vw, 100px); line-height: .9; white-space: nowrap; }
.hero__title .accent { color: var(--crimson); }
.hero__title .hero__outline { color: transparent; -webkit-text-stroke: 2px var(--crimson); }
.hero__lead {
  margin-top: 16px; max-width: 46ch; font-weight: 500;
  font-size: clamp(18px, 2.3vw, 26px); line-height: 1.75; color: var(--ink-2);
  /* 2行分を予約：短い文に変えても hero 高さが縮まず背景が動かない */
  min-height: 3.5em;
}

/* Hero link cards (企業/事業/採用) */
.hero__cards {
  position: relative; z-index: 3; width: 100%;
  margin-top: auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(8px, 1vw, 16px);
  margin-bottom: clamp(28px, 5vh, 64px);
  background: transparent;
}
.hero-card {
  position: relative; overflow: hidden;
  background: rgba(255,255,255,.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  padding: clamp(20px, 2.4vw, 32px) clamp(18px, 2vw, 30px);
  display: flex; align-items: center; justify-content: center; gap: 16px; text-align: center;
  border: 1px solid var(--line);
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
}
.hero-card:first-child { border-left: 1px solid var(--line); }
.hero-card:hover { background: var(--crimson); color: #fff; border-color: var(--crimson); }
.hero-card__title { font-family: var(--en); font-weight: 800; font-size: clamp(17px, 1.8vw, 22px); text-transform: lowercase; letter-spacing: -.01em; color: var(--crimson); transition: color .35s var(--ease); }
.hero-card:hover .hero-card__title { color: #fff; }
.hero-card__title span { display: block; font-family: var(--jp); font-size: 12px; font-weight: 500; color: var(--ink); opacity: .6; margin-top: 3px; transition: color .35s var(--ease); }
.hero-card:hover .hero-card__title span { opacity: .85; color: #fff; }
.hero-card__arrow { font-family: var(--en); transition: transform .3s var(--ease); }
.hero-card:hover .hero-card__arrow { transform: translateX(5px); }

/* =========================================================
   Hero entrance animation (pure CSS, auto-plays on load)
   ========================================================= */
.hero__line { transform: translateY(112%); animation: heroLineRise 1s cubic-bezier(.2,.7,.2,1) both; }
.hero__line-mask:nth-child(1) .hero__line { animation-delay: .15s; }
.hero__line-mask:nth-child(2) .hero__line { animation-delay: .30s; }
@keyframes heroLineRise { to { transform: translateY(0); } }

.hero__sub  { opacity: 0; transform: translateY(20px); animation: heroFadeUp .8s var(--ease) .1s both; }
.hero__lead { opacity: 0; transform: translateY(20px); animation: heroFadeUp .9s var(--ease) .5s both; }
.hero-card  { opacity: 0; transform: translateY(24px); animation: heroFadeUp .7s var(--ease) both; }
.hero-card:nth-child(1) { animation-delay: .6s; }
.hero-card:nth-child(2) { animation-delay: .72s; }
.hero-card:nth-child(3) { animation-delay: .84s; }
@keyframes heroFadeUp { to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .hero__sub, .hero__lead, .hero-card { opacity: 1; transform: none; animation: none; }
  .hero__line { transform: none; animation: none; }
}

/* card 3D hover tilt（カードは最初から表示・ホバーで立体的に傾く） */
.home-biz .business-card {
  transition: background .4s var(--ease),
              transform .5s cubic-bezier(.2,.8,.25,1),
              box-shadow .4s var(--ease);
  transform-style: preserve-3d;
  transform: perspective(900px)
             rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg))
             translate3d(var(--mx, 0px), var(--my, 0px), 0);
}
.home-biz .business-card:hover {
  box-shadow: 0 26px 50px -24px rgba(140,0,38,.55);
  z-index: 2;
}
.home-biz .business-card .business-card__icon,
.home-biz .business-card h3,
.home-biz .business-card__no {
  transition: transform .5s var(--ease);
}
.home-biz .business-card:hover .business-card__icon { transform: translateZ(40px); }
.home-biz .business-card:hover h3 { transform: translateZ(26px); }
.home-biz .business-card:hover .business-card__no { transform: translateZ(18px); }
@media (prefers-reduced-motion: reduce) {
  .home-biz .business-card { transform: none !important; }
}

/* ---------- Statement ---------- */
.statement { background: var(--white); overflow: hidden; }
.statement__inner { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
.statement__inner--split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 80px); align-items: center; }
.statement h2 {
  font-family: var(--jp); font-weight: 700; line-height: 1.5; letter-spacing: .01em;
  font-size: clamp(26px, 3.6vw, 50px); margin: 22px 0 24px;
}
.statement h2 b { color: var(--crimson); }
.statement p { color: var(--ink-2); max-width: 50ch; }
.statement__links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 32px; }

/* ---------- News (light) ---------- */
.home-news { background: var(--paper); }

/* ---------- Business (light) ---------- */
.home-biz { background: var(--white); }
.business-grid--light { background: var(--line); border: 1px solid var(--line); grid-template-columns: repeat(3, 1fr); }
.business-grid--light .business-card { background: var(--paper); color: var(--ink); }
.business-grid--light .business-card:hover { background: var(--crimson); color: #fff; }
.business-grid--light .business-card__icon .icon-line { stroke: var(--ink); }
.business-grid--light .business-card:hover .business-card__icon .icon-line { stroke: #fff; }
.business-grid--light .business-card h3 + span { color: var(--ink-2); }
.business-grid--light .business-card:hover h3 + span { color: rgba(255,255,255,.7); }
.business-grid--light .business-card p { color: var(--ink-2); }
.business-grid--light .business-card:hover p { color: rgba(255,255,255,.78); }

/* marquee strip on wine */
.marquee-strip { background: var(--wine); color: #fff; }
.marquee-strip .marquee { border-color: var(--line-light); }

@media (max-width: 900px) {
  .statement__inner { grid-template-columns: 1fr; }
  .statement__inner--split { grid-template-columns: 1fr; }
  .statement__inner--split .statement__copy { order: 2; }
  .statement__inner--split .orbit { order: 1; }
  .business-grid--light { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .hero__cards { grid-template-columns: 1fr; }
  /* 携帯版：車が走る大通りが画面内に収まるよう再フレーミング（道路＋車＋建物が見える） */
  .hero { --kv-left: -34%; --kv-bottom: -6%; --kv-w: 168%; }
  /* 携帯版：デスクトップの背景拡張(132svh)＋カード最下部固定はやめ、自然な1画面レイアウトに */
  .hero { min-height: 100svh; justify-content: flex-end; }
  .hero__inner { margin-top: auto; }
  .hero__cards { margin-top: clamp(20px, 4svh, 40px); }
}

/* =========================================================
   Statement — staged scroll reveal（下から上がってフェードイン）
   IntersectionObserver が .statement に .in を付与 →
   各要素が opacity + translateY で順番に立ち上がる。
   ========================================================= */
.statement__inner--split .section-label,
.statement__inner--split h2 .icon-line,
.statement__inner--split p,
.statement__inner--split .statement__links {
  opacity: 0;
}

/* 見出し：1行目は左から、2行目は右からスライドイン。間をあけて結びの3行目 */
.statement__inner--split h2 .icon-line {
  display: block;
  transition: opacity .8s var(--ease), transform .9s cubic-bezier(.22,.61,.36,1);
}
.statement__inner--split h2 .icon-line:nth-child(1) { transform: translateX(-60px); }
.statement__inner--split h2 .icon-line:nth-child(2) { transform: translateX(60px); }
.statement__inner--split h2 .icon-line:nth-child(3) { transform: translateY(34px); }
.statement.in h2 .icon-line { opacity: 1; transform: none; }
.statement.in h2 .icon-line:nth-child(1) { transition-delay: .15s; }
.statement.in h2 .icon-line:nth-child(2) { transition-delay: .45s; }
/* 3行目：たっぷり間をあけてから、少しゆっくり立ち上がる（結びの強調） */
.statement.in h2 .icon-line:nth-child(3) {
  transition: opacity 1s var(--ease), transform 1s cubic-bezier(.22,.61,.36,1);
  transition-delay: 1.25s;
}

/* ラベル */
.statement__inner--split .section-label {
  transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.statement.in .section-label { opacity: 1; transform: none; }

/* 本文（結びの行が出てから続く） */
.statement__inner--split p {
  transform: translateY(24px);
  transition: opacity .8s var(--ease) 1.7s, transform .8s var(--ease) 1.7s;
}
.statement.in p { opacity: 1; transform: none; }

/* ボタン */
.statement__inner--split .statement__links {
  transform: translateY(24px);
  transition: opacity .8s var(--ease) 1.85s, transform .8s var(--ease) 1.85s;
}
.statement.in .statement__links { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .statement__inner--split .section-label,
  .statement__inner--split h2 .icon-line,
  .statement__inner--split p,
  .statement__inner--split .statement__links {
    opacity: 1; transform: none; filter: none;
  }
}

/* =========================================================
   3-business orbit diagram (中央 IM FREE ＋ 外周3ノード／周回ドット)
   ========================================================= */
.orbit {
  position: relative;
  width: 100%;
  max-width: 470px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
}

/* 周回する装飾リング＆ドット */
.orbit__spokes line { stroke: rgba(140,0,38,.5); stroke-width: 2; stroke-dasharray: 2 10; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
  .statement.in .orbit__spokes line { animation: spokeFlow 1.1s linear infinite; }
}
@keyframes spokeFlow { to { stroke-dashoffset: -12; } }
.orbit__rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.orbit__spin { transform-origin: 50% 50%; transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .orbit__spin--cw  { animation: orbitSpin 46s linear infinite; }
  .orbit__spin--ccw { animation: orbitSpin 60s linear infinite reverse; }
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.orbit__ring-dash {
  fill: none; stroke: rgba(140,0,38,.32);
  stroke-width: 1.4; stroke-dasharray: 2 12; stroke-linecap: round;
}
.orbit__ring-dash--faint { stroke: rgba(176,141,87,.5); stroke-dasharray: 2 16; }
.orbit__dot--enji { fill: var(--crimson); }
.orbit__dot--gold { fill: #b08d57; }

/* 中央：IM FREE */
.orbit__core {
  position: absolute; left: 50%; top: 58.5%; transform: translate(-50%, -50%);
  width: 33%; aspect-ratio: 1; border-radius: 50%;
  background: var(--crimson); color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 3%; z-index: 3;
}
.orbit__core-name { font-family: var(--en); font-weight: 800; font-size: clamp(15px, 1.9vw, 22px); letter-spacing: .01em; }
.orbit__core .orbit__core-sub { font-family: var(--jp); font-size: clamp(7.5px, .85vw, 10px); line-height: 1.6; color: #fff; margin-top: 6px; max-width: none; }

/* 外周ノード（リング円＋アイコン＋見出し＋説明） */
.orbit__node {
  position: absolute; width: 31%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px solid var(--crimson);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; background: var(--white); z-index: 2; padding: 2%;
}
.orbit__node--top   { left: 50%; top: 0;    transform: translateX(-50%); }
.orbit__node--left  { left: 0;  bottom: 0; }
.orbit__node--right { right: 0; bottom: 0; }
.orbit__icon { width: 20%; margin-bottom: 3%; }
.orbit__icon svg { width: 100%; height: auto; stroke: var(--crimson); display: block; }
.orbit__node h3 { font-family: var(--jp); font-weight: 700; color: var(--crimson); font-size: clamp(13px, 1.5vw, 19px); letter-spacing: .1em; }
.orbit__node h3::after { content: ""; display: block; width: 22px; height: 1px; background: #b08d57; margin: 5px auto 0; }
.orbit__node p { font-family: var(--jp); font-size: clamp(8px, .85vw, 11px); line-height: 1.55; color: var(--ink-2); margin-top: 5px; }

/* 登場：中央→外周の順にふわっと */
.orbit__core, .orbit__node {
  opacity: 0; transition: opacity .6s var(--ease), transform .7s cubic-bezier(.34,1.56,.64,1);
}
.orbit__core { transform: translate(-50%, -50%) scale(.6); }
.orbit__node--top   { transform: translateX(-50%) scale(.6); }
.orbit__node--left, .orbit__node--right { transform: scale(.6); }
.statement.in .orbit__core { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: .1s; }
.statement.in .orbit__node--top   { opacity: 1; transform: translateX(-50%) scale(1); transition-delay: .35s; }
.statement.in .orbit__node--left  { opacity: 1; transform: scale(1); transition-delay: .5s; }
.statement.in .orbit__node--right { opacity: 1; transform: scale(1); transition-delay: .65s; }

@media (prefers-reduced-motion: reduce) {
  .orbit__spin { animation: none; }
  .orbit__core { opacity: 1; transform: translate(-50%, -50%); }
  .orbit__node--top { opacity: 1; transform: translateX(-50%); }
  .orbit__node--left, .orbit__node--right { opacity: 1; transform: none; }
}

/* =========================================================
   Extra flair (home only)
   ========================================================= */

/* CTA: animated radial glow + shimmering sweep on "build" */
.home-news ~ .contact-band,
body[data-page="home"] .contact-band { position: relative; overflow: hidden; }
body[data-page="home"] .contact-band::after {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 80vw; height: 80vw; max-width: 1000px; max-height: 1000px;
  left: 50%; top: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%);
  transform: translate(-50%, -50%);
  animation: ctaGlow 7s ease-in-out infinite;
}
body[data-page="home"] .contact-band__inner { position: relative; z-index: 1; }
@keyframes ctaGlow {
  0%, 100% { opacity: .5; transform: translate(-50%, -50%) scale(.85); }
  50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.1); }
}

/* News heading: enji underline sweeps in under the big EN word */
/* News heading (big EN word) */
body[data-page="home"] .home-news .heading-en {
  position: relative; display: inline-block;
}

/* "view all" / "もっと詳しく" link arrows nudge continuously to invite clicks */
@media (prefers-reduced-motion: no-preference) {
  body[data-page="home"] .preview-cta .link-btn .arrow { animation: arrowNudge 1.6s ease-in-out infinite; }
}
@keyframes arrowNudge { 0%,100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .contact-band::after { animation: none; }
}