@charset "utf-8";

:root {
  --lane-color: #dd6c97;
  --lane-rgb: 221, 108, 151;
}

body[data-rikishi="ura"] {
  --lane-color: #dd6c97;
  --lane-rgb: 221, 108, 151;
}

body[data-rikishi="takayasu"] {
  --lane-color: #263f94;
  --lane-rgb: 38, 63, 148;
}

body[data-rikishi="nabatame"] {
  --lane-color: #4a2751;
  --lane-rgb: 74, 39, 81;
}

body[data-rikishi="shirokuma"] {
  --lane-color: #add06c;
  --lane-rgb: 173, 208, 108;
}

body[data-rikishi="takanosyou"] {
  --lane-color: #611b1b;
  --lane-rgb: 97, 27, 27;
}


/* =====================
   FACE LANE BASE
===================== */
.face-lane {
  position: fixed;
  left: 0;
  width: 100%;
  height: 90px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;

  display: flex;
  align-items: center;
}

/* 上 */
.face-lane--top {
  top: 10px;
}

/* 下 */
.face-lane--bottom {
  bottom: 10px;
}


.face-lane::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 30px;
  transform: translateY(-50%);
    
background: linear-gradient(
  90deg,
  transparent 0%,
  var(--lane-color) 3%,
  var(--lane-color) 97%,
  transparent 100%
);
    
  opacity: 0.5;
  box-shadow:
    0 0 6px rgba(var(--lane-rgb), 0.55),
    0 0 12px rgba(var(--lane-rgb), 0.35),
    0 0 20px rgba(var(--lane-rgb), 0.2);
  animation: faceLaneNeon 2.2s ease-in-out infinite;
}

.face-lane--top::before {
  opacity: 0.6;
}

.face-lane--bottom::before {
  opacity: 0.35;
}

/* =====================
   TRACK（流れる本体）
===================== */
.face-lane__track {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0px;
  width: max-content;
}

/* =====================
   FACE IMAGE
===================== */

.face-lane__item {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  object-fit: contain;
  flex-shrink: 0;
  opacity: 1;

  animation: faceSwing 2.4s ease-in-out infinite;
}

/* =====================
   SWING（傾き）
===================== */
@keyframes faceSwing {
  0%   { transform: rotate(-6deg); }
  50%  { transform: rotate(6deg); }
  100% { transform: rotate(-6deg); }
}


@keyframes faceLaneNeon {
  0%,
  100% {
    opacity: 0.72;
    box-shadow:
      0 0 4px rgba(var(--lane-rgb), 0.4),
      0 0 10px rgba(var(--lane-rgb), 0.22),
      0 0 16px rgba(var(--lane-rgb), 0.14);
  }
  50% {
    opacity: 1;
    box-shadow:
      0 0 8px rgba(var(--lane-rgb), 0.7),
      0 0 16px rgba(var(--lane-rgb), 0.45),
      0 0 26px rgba(var(--lane-rgb), 0.22);
  }
}


/* =====================
   MOVE（上：左へ）
===================== */
.face-lane--top .face-lane__track {
  animation: faceMoveLeft 40s linear infinite;
}

@keyframes faceMoveLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* =====================
   MOVE（下：右へ）
===================== */
.face-lane--bottom .face-lane__track {
  animation: faceMoveRight 40s linear infinite;
}

@keyframes faceMoveRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* =====================
   RESPONSIVE
===================== */
@media (max-width: 768px) {
  .face-lane {
    height: 70px;
  }

  .face-lane__item {
    width: 50px;
  }
}