/* =========================================================
   トップ 第6弾（2026-10-04）
   近未来のロボット／札幌から世界へ広がる金色の光／ロボットの画面の上下に全サービス／
   AXel Ignition を品よく金色に
   ========================================================= */

/* ---------- 近未来のロボット ---------- */
.rf-halo { transform-origin: 200px 64px; animation: rf-halo 7s ease-in-out infinite; }
@keyframes rf-halo { 0%, 100% { transform: rotate(-3deg) scaleX(1); } 50% { transform: rotate(3deg) scaleX(.9); } }
.rf-halo-dot { transform-origin: 200px 64px; animation: rf-orbit 4s linear infinite; }
@keyframes rf-orbit { 0% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(-256px); opacity: .3; } 100% { transform: translateX(0); opacity: 1; } }
.rf-eyes { animation: rf-scan 3.2s ease-in-out infinite; }
@keyframes rf-scan { 0%, 100% { opacity: .75; transform: translateX(-6px); } 50% { opacity: 1; transform: translateX(6px); } }
.rf-pupils { transform-box: fill-box; transform-origin: center; animation: rf-blink 5.5s infinite; }
@keyframes rf-blink { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.15); } }
.rf-glint { animation: rf-glint 6s ease-in-out infinite; }
@keyframes rf-glint { 0%, 55% { transform: translateX(0); } 85%, 100% { transform: translateX(300px); } }
.rf-core { animation: rf-core 2.2s ease-in-out infinite; }
@keyframes rf-core { 50% { opacity: .55; } }
.rf-seam { animation: hs-flow 2.8s linear infinite; }

/* ---------- 札幌から世界へ広がる金色の光 ---------- */
.hs-gold {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.hg-waves circle {
    stroke-width: 2.5;
    vector-effect: non-scaling-stroke;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: hg-wave 4.5s ease-out infinite;
}
.hg-waves circle:nth-child(2) { animation-delay: 1.5s; }
.hg-waves circle:nth-child(3) { animation-delay: 3s; }
@keyframes hg-wave {
    0% { transform: scale(1); opacity: .9; }
    100% { transform: scale(26); opacity: 0; }
}
.hg-arc {
    stroke: url(#hgLine);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    opacity: .9;
    animation: hg-draw 6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes hg-draw {
    0% { stroke-dashoffset: 100; opacity: 0; }
    10% { opacity: .95; }
    45% { stroke-dashoffset: 0; opacity: .95; }
    80% { stroke-dashoffset: 0; opacity: .55; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}
.hg-pulse {
    stroke: #fff3c4;
    stroke-width: 5;
    stroke-linecap: round;
    stroke-dasharray: 3 97;
    stroke-dashoffset: 100;
    animation: hg-pulse 6s ease-in-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes hg-pulse {
    0%, 8% { stroke-dashoffset: 100; opacity: 0; }
    12% { opacity: 1; }
    45% { stroke-dashoffset: 3; opacity: 1; }
    52%, 100% { stroke-dashoffset: 3; opacity: 0; }
}
.hg-city {
    fill: #f2c14e;
    transform-box: fill-box;
    transform-origin: center;
    opacity: 0;
    animation: hg-city 6s ease-out infinite;
    animation-delay: var(--d, 0s);
}
@keyframes hg-city {
    0%, 40% { opacity: 0; transform: scale(.4); }
    48% { opacity: 1; transform: scale(1.6); }
    60%, 85% { opacity: .9; transform: scale(1); }
    100% { opacity: 0; transform: scale(1); }
}
.hg-core { transform-box: fill-box; transform-origin: center; animation: hg-core 2.4s ease-in-out infinite; }
@keyframes hg-core { 50% { transform: scale(1.25); opacity: .75; } }

/* ---------- ロボットの画面の上下に全サービス ---------- */
.hero-services {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    transition: opacity .6s ease, visibility .6s ease;
}
.hero:has(.hero-slide--banner.active) .hero-services { opacity: 0; visibility: hidden; }
.hsv-row {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(1240px, calc(100% - 32px));
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
    pointer-events: auto;
}
.hsv-row--top { top: 12px; grid-template-columns: repeat(4, minmax(0, 210px)); justify-content: end; }
.hsv-row--bottom { bottom: 68px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.hsv-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 100%;
    padding: 6px 8px 6px 6px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(255, 255, 255, .95);
    box-shadow: 0 8px 22px rgba(20, 40, 90, .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #0b1638;
    text-decoration: none;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.hsv-item:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(20, 40, 90, .2); border-color: #f36f21; }
.hsv-item img { flex: none; width: 58px; height: 40px; object-fit: cover; object-position: left top; border-radius: 8px; }
.hsv-item span { min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.hsv-item b { font-family: "Inter", sans-serif; font-size: 12.5px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hsv-item small { font-size: 10.5px; color: #5b6577; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.corp .hero-nav { bottom: 18px; }
@media (max-width: 1100px) {
    .hsv-row--bottom { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hsv-row--bottom li:nth-child(n+5) { display: none; }
}
@media (max-width: 768px) { .hero-services { display: none; } }

/* ---------- AXel Ignition を品よく金色に ---------- */
.is-gold {
    border-color: #d4af37 !important;
    background: linear-gradient(135deg, #fffdf6 0%, #fff4d8 100%) !important;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .55), 0 10px 26px rgba(196, 150, 40, .22) !important;
}
.is-gold b {
    background: linear-gradient(90deg, #9c7416 0%, #d4af37 45%, #b8860b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.is-gold i { color: #c9a227 !important; }
.pr-item.is-gold::after { background: linear-gradient(135deg, #e6c25a, #b8860b); }
.is-gold::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 40%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .85), transparent);
    transform: skewX(-18deg);
    animation: gold-sheen 5.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}
@keyframes gold-sheen { 0%, 70% { left: -60%; } 100% { left: 140%; } }
.pr-item.is-gold { overflow: hidden; }
/* 画像の中の AXel Ignition のタイル：金色の縁がやわらかく呼吸する */
.hb-spot.is-gold {
    outline: 0;
    background: none;
    box-shadow: 0 0 0 2px rgba(230, 194, 90, .95), 0 0 22px rgba(230, 180, 60, .55) !important;
    animation: gold-breathe 3.2s ease-in-out infinite;
}
.hb-spot.is-gold::before { content: none; }
@keyframes gold-breathe { 50% { box-shadow: 0 0 0 2px rgba(230, 194, 90, .55), 0 0 8px rgba(230, 180, 60, .25); } }
/* AXel Ignition のセクション見出し */
.ignition-section .ig-en {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;
    letter-spacing: .28em;
    background: linear-gradient(90deg, #9c7416, #d4af37 45%, #b8860b);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.ignition-section .ig-en::before,
.ignition-section .ig-en::after {
    content: "";
    width: 46px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #d4af37);
}
.ignition-section .ig-en::after { background: linear-gradient(90deg, #d4af37, transparent); }

@media (prefers-reduced-motion: reduce) {
    .rf-halo, .rf-halo-dot, .rf-eyes, .rf-pupils, .rf-glint, .rf-core, .rf-seam,
    .hg-waves circle, .hg-arc, .hg-pulse, .hg-city, .hg-core,
    .is-gold::before, .hb-spot.is-gold { animation: none !important; }
    .hg-arc { stroke-dashoffset: 0; opacity: .8; }
    .hg-city { opacity: 1; }
}