/* Image-light crystal artwork. The existing optical-* hooks are kept for every page. */
.optical-scene,.optical-domain { --crystal-a: #e9faff; --crystal-b: #8bd8fa; --crystal-c: #508fde; --crystal-d: #5c64bb; position: relative; isolation: isolate; overflow: hidden; }
.optical-scene::before,.optical-domain::before { content: ''; position: absolute; z-index: -1; width: 72%; aspect-ratio: 1; left: 20%; top: 12%; border-radius: 50%; background: radial-gradient(circle,rgb(133 196 255 / 20%),rgb(130 150 240 / 8%) 42%,transparent 70%); filter: blur(20px); pointer-events: none; }
.optical-core,.optical-orbit { display: block; position: absolute; pointer-events: none; transform-origin: 50% 50%; }
.optical-core { z-index: 2; width: 48%; aspect-ratio: .81; top: 17%; left: 30%; clip-path: polygon(46% 0,79% 12%,100% 43%,77% 86%,39% 100%,5% 71%,0 34%); background: conic-gradient(from 202deg at 45% 40%,#1761ac 0deg,var(--crystal-c) 39deg,#d2f7ff 81deg,#fff 109deg,var(--crystal-b) 146deg,#3376d4 191deg,var(--crystal-d) 239deg,#95dfff 280deg,#eaffff 323deg,#1761ac 360deg); filter: drop-shadow(0 20px 26px rgb(27 80 161 / 22%)); animation: crystal-float 9s ease-in-out infinite; }
.optical-core::before { content: ''; position: absolute; inset: 1.3%; clip-path: polygon(46% 1%,78% 13%,98% 43%,76% 85%,39% 98%,6% 70%,1% 34%); background: linear-gradient(143deg,rgb(255 255 255 / 91%) 0 12%,rgb(219 248 255 / 72%) 13% 25%,rgb(96 168 228 / 32%) 26% 42%,rgb(13 87 176 / 55%) 43% 58%,rgb(142 216 255 / 48%) 59% 77%,rgb(255 255 255 / 71%) 78% 100%); }
.optical-core::after { content: ''; position: absolute; inset: 0; clip-path: polygon(46% 0,79% 12%,59% 40%,100% 43%,59% 40%,77% 86%,59% 40%,39% 100%,59% 40%,5% 71%,59% 40%,0 34%,59% 40%); background: rgb(255 255 255 / 75%); opacity: .75; }
.optical-orbit { z-index: 1; width: 35%; aspect-ratio: .74; left: 13%; top: 34%; clip-path: polygon(49% 0,90% 19%,100% 73%,58% 100%,4% 82%,0 29%); background: linear-gradient(134deg,#f8ffff 1%,#98dbf9 18%,#3f89db 44%,#a8e8ff 56%,#5d72cb 75%,#e9fcff 100%); opacity: .86; filter: drop-shadow(0 15px 21px rgb(43 100 184 / 18%)); transform: rotate(-22deg); animation: crystal-sway 12s ease-in-out infinite; }
.optical-orbit::before { content: ''; position: absolute; inset: 0; clip-path: polygon(49% 0,90% 19%,52% 42%,100% 73%,52% 42%,58% 100%,52% 42%,4% 82%,52% 42%,0 29%,52% 42%); background: rgb(255 255 255 / 65%); }
.optical-orbit-secondary { width: 19%; left: 70%; top: 8%; opacity: .72; transform: rotate(24deg); animation-delay: -4s; }
.optical-hero { position: absolute; inset: 0 0 68px; z-index: -1; }
.optical-hero .optical-core { width: 28%; left: 61%; top: 18%; }
.optical-hero .optical-orbit:not(.optical-orbit-secondary) { width: 16%; left: 51%; top: 46%; }
.optical-hero .optical-orbit-secondary { width: 10%; left: 82%; top: 8%; }
.optical-vision { min-height: 470px; }
.optical-vision .optical-core { width: 44%; left: 33%; top: 12%; transform: rotate(14deg); }
.optical-vision .optical-orbit { width: 31%; left: 12%; top: 37%; }
.optical-company { min-height: 230px; max-width: 420px; }
.optical-company .optical-core { width: 33%; left: 42%; top: 10%; }
.optical-company .optical-orbit { width: 25%; left: 23%; top: 34%; }
.optical-service { min-height: 420px; }
.optical-service .optical-core { width: 45%; left: 37%; top: 10%; }
.optical-service .optical-orbit { width: 29%; left: 16%; top: 40%; }
.optical-feature { min-height: 380px; }
.optical-feature .optical-core { width: 41%; left: 38%; top: 11%; }
.optical-feature .optical-orbit { width: 27%; left: 18%; top: 42%; }
.optical-tatemiru { --crystal-c: #4895d1; --crystal-d: #6073b5; }
.optical-venture { --crystal-c: #6d88dc; --crystal-d: #8077cb; }
.optical-postory { --crystal-c: #368dcc; --crystal-d: #567ac6; }
.optical-recruit { min-height: 340px; }
.optical-recruit .optical-core { width: 40%; left: 41%; top: 9%; }
.optical-recruit .optical-orbit { width: 29%; left: 17%; top: 38%; }

/* Each small index is a cut crystal, not a circular glass lens. */
.domain-glyph { display: block; position: relative; width: 84%; height: 128px; margin-inline: auto; filter: drop-shadow(0 12px 13px rgb(36 103 181 / 16%)); transition: transform .5s ease,filter .5s ease; }
.domain-glyph::before { content: ''; position: absolute; width: 65px; height: 87px; left: calc(50% - 32px); top: 19px; clip-path: polygon(46% 0,83% 16%,100% 56%,63% 100%,20% 86%,0 36%); background: conic-gradient(from 172deg at 48% 44%,#387bc7,#d8f7ff,#fff,#76c5ef,#6675cc,#3677bf); }
.domain-glyph::after { content: ''; position: absolute; width: 65px; height: 87px; left: calc(50% - 32px); top: 19px; clip-path: polygon(46% 0,83% 16%,55% 45%,100% 56%,55% 45%,63% 100%,55% 45%,20% 86%,55% 45%,0 36%,55% 45%); background: rgb(255 255 255 / 78%); }
.photo-navigation a:nth-child(2) .domain-glyph { transform: rotate(-17deg); }
.photo-navigation a:nth-child(3) .domain-glyph { transform: rotate(12deg); }
.photo-navigation a:nth-child(4) .domain-glyph { transform: rotate(-8deg); }
.photo-navigation a:nth-child(5) .domain-glyph { transform: rotate(21deg); }
.photo-navigation a:hover .domain-glyph { transform: translateY(-5px) rotate(4deg); filter: drop-shadow(0 17px 15px rgb(36 103 181 / 24%)); }
.business-panel-media.optical-domain { min-height: 360px; border: 1px solid rgb(196 226 251 / 50%); border-radius: 18px; background: linear-gradient(145deg,rgb(255 255 255 / 18%),rgb(152 212 246 / 12%) 48%,rgb(98 137 219 / 8%)); }
.optical-domain::before { z-index: 0; }
.optical-domain::after { content: attr(data-index); position: absolute; z-index: 0; right: 5%; top: -12%; color: rgb(90 150 218 / 12%); font: 300 clamp(10rem,22vw,20rem)/1 Arial,sans-serif; }
.optical-domain .optical-core { width: 42%; left: 31%; top: 7%; }
.optical-domain .optical-orbit { width: 29%; left: 16%; top: 33%; }
.optical-domain figcaption { z-index: 4; }

@keyframes crystal-float { 0%,100% { translate: 0 0; } 50% { translate: 0 -11px; } }
@keyframes crystal-sway { 0%,100% { translate: 0 0; } 50% { translate: 7px -9px; } }
@media (max-width: 900px) {
  .optical-hero { position: relative; inset: auto; z-index: 0; width: 100%; height: clamp(270px,53vw,410px); }
  .optical-hero .optical-core { width: 36%; left: 44%; top: 4%; }
  .optical-hero .optical-orbit:not(.optical-orbit-secondary) { width: 25%; left: 24%; top: 35%; }
  .optical-hero .optical-orbit-secondary { width: 15%; left: 76%; top: 0; }
  .optical-vision { min-height: 330px; }
  .optical-service { min-height: 280px; }
  .business-panel-media.optical-domain { min-height: 270px; }
  .optical-domain .optical-core { width: 32%; left: 38%; }
  .optical-domain .optical-orbit { width: 21%; left: 26%; }
}
@media (max-width: 600px) {
  .optical-hero { height: 290px; }
  .optical-hero .optical-core { width: 49%; left: 39%; }
  .optical-hero .optical-orbit:not(.optical-orbit-secondary) { width: 31%; left: 17%; top: 40%; }
  .optical-vision { min-height: 280px; }
  .optical-service,.optical-feature { min-height: 240px; }
  .optical-company { min-height: 190px; }
  .optical-recruit { min-height: 240px; }
  .domain-glyph { height: 108px; }
  .domain-glyph::before,.domain-glyph::after { top: 10px; }
  .business-panel-media.optical-domain { min-height: 220px; }
  .optical-domain .optical-core { width: 40%; left: 35%; top: 3%; }
  .optical-domain .optical-orbit { width: 26%; left: 18%; top: 30%; }
}
@media (prefers-reduced-motion: reduce) {
  .optical-core,.optical-orbit { animation: none; }
  .domain-glyph { transition: none; }
}
@media (forced-colors: active) {
  .optical-core,.optical-orbit,.domain-glyph::before { background: CanvasText; opacity: .45; }
  .optical-core::before,.optical-core::after,.optical-orbit::before,.domain-glyph::after { display: none; }
}