/* Five original line drawings share one atlas, but move as separate scenes. */
body.line-home { --scene-paper: #fff; --cobalt: #2663a1; }
body.line-home .line-source { display: none; }
body.line-home .world-hero { min-height: 570px; height: min(740px, calc(100svh - 156px)); background: var(--scene-paper); }
body.line-home .world-hero__copy { position: absolute; width: min(520px, 43%); top: 70px; left: 50%; margin: 0; padding: 0; transform: translateX(-50%); text-align: center; }
body.line-home .world-hero__location { display: block; margin: 0 0 14px; font-size: 11px; font-weight: 400; }
body.line-home .world-hero h1 { font: 400 116px/1.05 Georgia, serif; }
body.line-home .world-hero h1 > span { color: #de674c; }
body.line-home .world-hero__catch { margin: 24px 0 22px; font-size: 33px; line-height: 1.8; font-weight: 300; }
body.line-home .world-hero__fields { font-size: 10px; margin: 0; font-weight: 400; color: #4c6477; }
.line-scenes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.scene-thing { position: absolute; display: flex; flex-direction: column; align-items: center; pointer-events: auto; transition: translate 180ms ease; }
.line-art { display: block; width: 100%; aspect-ratio: 1; background: url('assets/ciel-line-world-20261024.png') no-repeat; background-size: 300% 200%; transform-origin: center; animation: line-breathe 7s ease-in-out infinite; }
.line-art--web { aspect-ratio: 600/512; background-size: 256% 200%; background-position: 0 0; }
.line-art--app { aspect-ratio: 420/512; background-size: 365.714286% 200%; background-position: 53.763441% 0; animation-delay: -2s; }
.line-art--ocr { background-position: 100% 0; animation-delay: -4s; }
.line-art--ai { background-position: 0 100%; animation-delay: -1s; }
.line-art--insole { background-position: 50% 100%; animation-delay: -5s; }
.scene-thing--web { width: min(25%, 310px); left: 2.5%; top: 3%; }
.scene-thing--app { width: min(14%, 175px); right: 7%; top: 2%; }
.scene-thing--ocr { width: min(23%, 290px); right: 1.5%; bottom: 5%; }
.scene-thing--ai { width: min(22%, 260px); left: 3%; bottom: 5%; }
.scene-thing--insole { width: min(20%, 225px); left: 46%; bottom: 1%; }
.scene-label { display: flex; align-items: center; gap: 15px; padding: 2px 5px; margin-top: -10px; font-size: 10px; font-weight: 400; background: var(--scene-paper); }
.scene-label b { font: 400 13px/1 sans-serif; }
.scene-thing:hover { translate: 0 -4px; }
.scene-thing:hover .scene-label { text-decoration: underline; text-underline-offset: 5px; }
.scene-thing:focus-visible { outline-offset: 0; }
@keyframes line-breathe { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-6px) rotate(.7deg); } }
.animation-paused .line-art { animation-play-state: paused; }
body.line-home .world-hero__scroll { bottom: 23px; font-size: 10px; }
body.line-home .world-hero__scroll span:last-child { width: 36px; height: 36px; }
body.line-home .atelier-sign { left: 50%; transform: translateX(-50%); bottom: auto; top: 18px; font: 400 8px/1.4 sans-serif; color: #4c6477; }
body.line-home .motion-toggle { z-index: 4; width: 34px; height: 34px; bottom: 23px; }
body.line-home .motion-toggle::after { position: absolute; content: ''; inset: -6px; }
body.line-home .nav-shell a.nav-contact { background: var(--cobalt); border-color: var(--cobalt); }
body.line-home .fresh-contact { background: var(--scene-paper); color: #263b4b; }
body.line-home .fresh-contact .fresh-eyebrow { color: var(--cobalt); }
body.line-home .contact-orbit { border-color: #50718b; }
body.line-home .contact-orbit:hover { color: var(--cobalt); }
body.line-home .business-doors { border-block: 1px solid #dfe5ea; }
body.line-home .business-doors > a { background: #fff; border-color: #dfe5ea; box-shadow: inset 0 3px var(--door-color); transition: background 180ms ease; }
body.line-home .business-doors > a:nth-child(1) { --door-color: #3266ad; }
body.line-home .business-doors > a:nth-child(2) { --door-color: #b8564f; }
body.line-home .business-doors > a:nth-child(3) { --door-color: #7261a1; }
body.line-home .business-doors > a:nth-child(4) { --door-color: #26776f; }
body.line-home .business-doors > a:nth-child(5) { --door-color: #8b6b19; }
body.line-home .business-doors strong { color: var(--door-color); }
body.line-home .business-doors > a::after { background: var(--door-color); }
body.line-home .business-doors > a:hover { background: #f7f9fb; }
body.line-home .atelier-ribbon { background: #fff; border-color: #dfe5ea; padding: 28px 24px; }
body.line-home .atelier-ribbon > div { width: min(100%, 960px); margin-inline: auto; padding: 0; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 24px; text-align: center; animation: none; }
body.line-home .atelier-ribbon span { font: 400 32px/1.25 sans-serif; color: #2663a1; }
body.line-home .atelier-ribbon i { font: 300 22px/1 sans-serif; color: #7b8d9b; }
body.line-home .fresh-company { background: #f5f6f8; border-color: #d8dfe5; }
body.line-home .studio-display[data-studio=web] { background: #f3f6f9; }
body.line-home .studio-visual--web > a { border-color: #a1b3c3; box-shadow: 12px 15px 0 #d9e4ef; }
@media (max-width: 1100px) {
  body.line-home .world-hero__copy { top: 65px; }
  body.line-home .world-hero h1 { font-size: 100px; }
  body.line-home .world-hero__catch { font-size: 29px; margin-block: 20px; }
  .scene-label { font-size: 9px; gap: 10px; }
}
@media (max-width: 900px) {
  body.line-home .world-hero { height: 620px; min-height: 560px; }
  body.line-home .world-hero__copy { top: 110px; width: 44%; }
  body.line-home .world-hero h1 { font-size: 92px; }
  body.line-home .world-hero__catch { font-size: 27px; }
  .scene-thing--web { width: 26%; left: 1.5%; top: 1%; }
  .scene-thing--app { width: 16%; right: 5%; top: 1%; }
  .scene-thing--ocr { width: 25%; right: 1%; bottom: 7%; }
  .scene-thing--ai { width: 24%; left: 1.5%; bottom: 7%; }
  .scene-thing--insole { width: 22%; left: 43%; bottom: 0; }
}
@media (max-width: 600px) {
  body.line-home .atelier-ribbon { padding: 24px 20px; }
  body.line-home .atelier-ribbon > div { gap: 12px; }
  body.line-home .atelier-ribbon span { font-size: 24px; }
  body.line-home .atelier-ribbon i { font-size: 16px; }
  body.line-home .world-hero { height: min(720px, calc(100svh - 154px)); min-height: 590px; }
  body.line-home .world-hero__copy { width: calc(100% - 64px); top: 24%; }
  body.line-home .world-hero__location { font-size: 10px; margin-bottom: 10px; }
  body.line-home .world-hero h1 { font-size: 78px; }
  body.line-home .world-hero__catch { font-size: 25px; line-height: 1.7; margin-block: 16px; }
  body.line-home .world-hero__fields { display: block; font-size: 8px; white-space: nowrap; }
  .scene-thing--web { width: 44%; left: 1%; top: 2%; }
  .scene-thing--app { width: 29%; right: 3%; top: 1%; }
  .scene-thing--ocr { width: 42%; right: 0; bottom: 12%; }
  .scene-thing--ai { width: 40%; left: 1%; bottom: 13%; }
  .scene-thing--insole { width: 31%; left: 36%; bottom: 0; }
  .scene-label { font-size: 8px; gap: 7px; margin-top: -4px; padding-inline: 2px; }
  .scene-label b { font-size: 10px; }
  body.line-home .atelier-sign { top: auto; bottom: 14px; left: 18px; transform: none; font-size: 6px; }
  body.line-home .world-hero__scroll { display: none; }
  body.line-home .motion-toggle { width: 32px; height: 32px; right: 14px; bottom: 14px; }
}
@media (max-width: 360px) {
  body.line-home .atelier-ribbon > div { gap: 8px; }
  body.line-home .atelier-ribbon span { font-size: 20px; }
}
@media (max-width: 600px) and (max-height: 740px) {
  body.line-home .world-hero { height: calc(100svh - 156px); min-height: 540px; }
  body.line-home .world-hero__copy { top: 25.5%; }
  body.line-home .world-hero h1 { font-size: 65px; }
  body.line-home .world-hero__catch { font-size: 22px; margin-block: 12px; }
  body.line-home .world-hero__location, body.line-home .world-hero__fields { display: none; }
  .scene-thing--web { width: 36%; top: 0; }
  .scene-thing--app { width: 26%; }
  .scene-thing--ai { width: 36%; }
  .scene-thing--ocr { width: 38%; }
}
@media (min-width: 601px) and (max-height: 800px) {
  body.line-home .world-hero__copy { top: 50px; }
  body.line-home .world-hero h1 { font-size: 92px; }
  body.line-home .world-hero__catch { font-size: 28px; margin-block: 16px; }
  .scene-thing--insole { width: 170px; }
}
@media (prefers-reduced-motion: reduce) {
  .line-art { animation: none; }
}