/* ===== サービスのカード: トレーディングカード風 =====
   - ホログラムの縁（LABの色＋虹色の箔）と、内側の細い枠
   - 数秒おきに光の帯が斜めに走る
   - PCはマウスに合わせてカードが傾き、虹色の反射が動く（--mx / --my / --rx / --ry は JS が付ける）
   動きを減らす設定では、光の帯と傾きを止める。 */
#services .services-grid .service-card { --tc: #0369a1; --tc2: #22d3ee; }
#services #svc-04, #services #svc-05 { --tc: #be123c; --tc2: #fb7185; }
#services #svc-06 { --tc: #047857; --tc2: #34d399; }
#services #svc-07 { --tc: #a16207; --tc2: #fbbf24; }
#services #svc-08 { --tc: #6d28d9; --tc2: #a78bfa; }

#services .services-grid .service-card {
  position: relative; isolation: isolate; overflow: hidden;
  border: 3px solid transparent !important; border-radius: 22px !important;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, var(--tc) 0%, var(--tc2) 22%, #f0abfc 40%, #fde68a 55%, var(--tc2) 72%, var(--tc) 100%) border-box !important;
  /* 内側の細い枠（カードの額縁） */
  box-shadow:
    inset 0 0 0 5px #fff,
    inset 0 0 0 6px color-mix(in srgb, var(--tc) 30%, transparent),
    0 18px 34px -22px color-mix(in srgb, var(--tc) 80%, #000) !important;
  transform-style: preserve-3d; will-change: transform;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1), box-shadow .4s;
}
/* 元の上の色帯は、ホログラムの縁に置き換え */
#services .services-grid .service-card::before {
  content: "" !important; position: absolute; inset: 0 !important; z-index: 3; height: auto !important; width: auto !important;
  border-radius: inherit; pointer-events: none; opacity: 1 !important;
  /* 斜めに走る光の帯 */
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .55) 48%, rgba(255, 255, 255, .15) 52%, transparent 62%) !important;
  background-size: 260% 100% !important; background-position: 140% 0; background-repeat: no-repeat !important;
  mix-blend-mode: soft-light; animation: tcg-sheen 6.5s ease-in-out infinite;
}
#services .services-grid .service-card:nth-child(2n)::before { animation-delay: -1.6s; }
#services .services-grid .service-card:nth-child(3n)::before { animation-delay: -3.2s; }
@keyframes tcg-sheen { 0%, 62% { background-position: 140% 0; } 100% { background-position: -40% 0; } }
/* 虹色の反射（マウスの位置で動く。ふだんはごく薄く） */
#services .services-grid .service-card::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background:
    radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255, 255, 255, .55), transparent 42%),
    linear-gradient(125deg, rgba(34, 211, 238, .22), rgba(240, 171, 252, .22) 35%, rgba(253, 230, 138, .22) 60%, rgba(167, 139, 250, .22));
  background-size: 100% 100%, 200% 200%; background-position: 0 0, var(--mx, 30%) var(--my, 20%);
  mix-blend-mode: overlay; opacity: .35; transition: opacity .35s;
}

/* 番号をカードのナンバー風に */
#services .services-grid .service-card .service-num { font-style: italic; letter-spacing: -.02em; text-shadow: 0 2px 0 color-mix(in srgb, var(--tc2) 40%, transparent); }
#services .services-grid .service-card .service-brand { box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 30%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--tc) 60%, transparent); }

@media (hover: hover) and (pointer: fine) {
  #services .services-grid .service-card.is-tilting { transition: transform .08s linear, box-shadow .3s;
    transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-6px);
    box-shadow:
      inset 0 0 0 5px #fff,
      inset 0 0 0 6px color-mix(in srgb, var(--tc) 30%, transparent),
      0 30px 50px -24px color-mix(in srgb, var(--tc) 90%, #000) !important; }
  #services .services-grid .service-card.is-tilting::after { opacity: .9; }
}
@media (prefers-reduced-motion: reduce) {
  #services .services-grid .service-card::before { animation: none; opacity: 0 !important; }
  #services .services-grid .service-card.is-tilting { transform: none; }
}