/* =============================================
   animation.css — アニメーション & モバイル強化
============================================= */

#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0%;
  background: linear-gradient(to right, var(--accent), var(--red-light));
  z-index: 9999;
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
}

.site-header.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
  background: rgba(255,255,255,.98);
}

.will-animate {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: var(--delay, 0s);
}
.will-animate.animated {
  opacity: 1;
  transform: translateY(0);
}

.tl-hidden {
  opacity: 0;
  transform: translateX(-24px);
  transition: opacity .5s ease, transform .5s ease;
  transition-delay: var(--tl-delay, 0s);
}
.tl-visible {
  opacity: 1;
  transform: translateX(0);
}

.hero-particle {
  position: absolute;
  pointer-events: none;
  user-select: none;
  animation: particle-float linear infinite;
}
@keyframes particle-float {
  0%   { transform: translateY(0)    rotate(0deg)   scale(1); }
  25%  { transform: translateY(-30px) rotate(20deg)  scale(1.1); }
  50%  { transform: translateY(10px) rotate(-10deg) scale(.95); }
  75%  { transform: translateY(-20px) rotate(15deg)  scale(1.05); }
  100% { transform: translateY(0)    rotate(0deg)   scale(1); }
}

.char-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px) scale(.8);
  animation: char-in .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
@keyframes char-in {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.enjoy-slide-in {
  opacity: 0;
  transform: translateX(-40px);
  animation: enjoy-in .7s .1s cubic-bezier(.25,.46,.45,.94) forwards;
}
@keyframes enjoy-in {
  to { opacity: .88; transform: translateX(0); }
}

.pulse-btn {
  position: relative;
}
.pulse-btn::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 99px;
  border: 3px solid rgba(255,255,255,.6);
  animation: pulse-ring 2s ease-out infinite;
  pointer-events: none;
}
@keyframes pulse-ring {
  0%   { transform: scale(1);    opacity: .7; }
  70%  { transform: scale(1.12); opacity: 0; }
  100% { transform: scale(1.12); opacity: 0; }
}

.nav a.nav-active {
  color: var(--red) !important;
  border-bottom: 2px solid var(--red);
  padding-bottom: 2px;
}

@media (hover: none) {
  .concept-card:hover     { transform: none; box-shadow: none; }
  .timeline-content:hover { transform: none; }
  .info-item:hover        { background: var(--white); }
}

@media (max-width: 375px) {
  .hero-title-main  { font-size: clamp(3rem, 22vw, 4rem); }
  .hero-title-enjoy { font-size: 1.3rem; }
  .hero-meta        { flex-direction: column; gap: 6px; font-size: .85rem; }
  .btn-hero         { padding: 13px 32px; font-size: .95rem; }
  .section-title    { font-size: 1.35rem; }
  .concept-lead     { font-size: .88rem; }
  .info-item        { padding: 14px 12px; gap: 10px; }
  .info-item-icon   { font-size: 1.4rem; }
  .info-item-label  { font-size: .7rem; }
  .info-item-val    { font-size: .85rem; }
  .time-badge       { min-width: 48px; font-size: .75rem; }
  .timeline-content { padding: 12px 14px; }
  .timeline-content h4 { font-size: .9rem; }
  .timeline-content p  { font-size: .82rem; }
}

@media (max-width: 480px) {
  .hero-meta span { background: rgba(255,255,255,.15); border-radius: 99px; padding: 4px 12px; display: inline-block; }
  .card-img-title { font-size: 1.4rem; letter-spacing: .02em; }
  .card-body { padding: 14px 16px 18px; }
  .timeline::before { left: 44px; }
  .time-badge { min-width: 44px; }
  .time-badge::after { right: -11px; }
  .team-tag { font-size: .82rem; padding: 6px 12px; }
  .apply { padding: 64px 0; }
  .apply-box h2 { font-size: 1.4rem; }
  .line-contact-block { gap: 24px; }
  .line-qr-img { width: 90px; height: 90px; }
}

@media (max-width: 768px) {
  .concept, .details, .schedule, .apply, .line-contact { padding: 64px 0; }
  .concept-cards { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
  .details-lower { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .info-item { border-right: none !important; }
  .info-item:nth-last-child(-n+2) { border-bottom: 1px solid #FFD0D5; }
  .info-item:last-child { border-bottom: none; }
  .timeline { padding-left: 0; }
  .apply-meta { flex-direction: column; gap: 8px; }
  .btn-apply  { padding: 14px 32px; font-size: .95rem; }
  .complete-line { flex-direction: column; text-align: center; }
}

@media (min-width: 769px) {
  ::-webkit-scrollbar       { width: 6px; }
  ::-webkit-scrollbar-track { background: #f0f0f0; }
  ::-webkit-scrollbar-thumb { background: var(--red-light); border-radius: 3px; }
}

/* ─── チームタグ強化 ─── */
.team-tag {
  transition: all .2s cubic-bezier(.34,1.56,.64,1) !important;
  cursor: pointer;
}
.team-tag:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 6px 20px rgba(232,25,44,.25), 0 0 0 2px rgba(232,25,44,.3) !important;
}
.team-tag::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255,255,255,.15), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.team-tag { position: relative; overflow: hidden; }
.team-tag:hover::before { opacity: 1; }

/* ─── スコアボードカウンター（背番号表示強化） ─── */
.badge.confirmed {
  animation: confirmed-glow 3s ease-in-out infinite;
}
@keyframes confirmed-glow {
  0%,100% { box-shadow: 0 0 0 rgba(34,197,94,0); }
  50% { box-shadow: 0 0 8px rgba(34,197,94,.5); }
}

/* ─── ヒーロー 走査線エフェクト ─── */
.hero::after {
  content: '';
  position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0,0,0,.03) 2px,
    rgba(0,0,0,.03) 4px
  );
  pointer-events: none;
  z-index: 1;
}

/* ─── チームモーダル コンフェッティ ─── */
.confetti-piece {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 2px;
  pointer-events: none;
  animation: confetti-fall .8s ease-out forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotate(0deg) scale(1); opacity: 1; }
  100% { transform: translateY(80px) rotate(360deg) scale(0); opacity: 0; }
}

/* ─── モーダル強化リング ─── */
.team-modal-img-wrap {
  box-shadow: 0 0 0 4px rgba(232,25,44,.4), 0 0 40px rgba(232,25,44,.3), 0 20px 60px rgba(0,0,0,.6) !important;
}
.team-modal-overlay.active .team-modal-img-wrap {
  animation: modal-ring-in .4s ease forwards, glow-pulse 2s .4s ease-in-out infinite;
}
@keyframes modal-ring-in {
  0%   { transform: scale(.6); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ─── ヒーローボタン パルス ─── */
@keyframes hero-btn-pulse {
  0%,100% { box-shadow: 0 6px 24px rgba(0,0,0,.2); }
  50%      { box-shadow: 0 10px 40px rgba(0,0,0,.3), 0 0 0 8px rgba(255,255,255,.06); }
}
.btn-hero { animation: hero-btn-pulse 2.5s ease-in-out infinite; }
.btn-hero:hover { animation: none; transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,.3) !important; }

/* ─── コンセプトカード シマー ─── */
@keyframes card-shimmer {
  0%   { transform: translateX(-130%) skewX(-12deg); }
  100% { transform: translateX( 230%) skewX(-12deg); }
}
.card-img-wrap { overflow: hidden; position: relative; }
.card-img-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
  transform: translateX(-130%) skewX(-12deg);
  pointer-events: none;
}
.concept-card:hover .card-img-wrap::after {
  animation: card-shimmer .7s ease forwards;
}

/* ─── タイムライン ドット発光 ─── */
.timeline-item:hover .time-badge::after {
  box-shadow: 0 0 0 4px var(--red), 0 0 14px rgba(232,25,44,.6) !important;
}
.timeline-content {
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}
.timeline-content:hover {
  transform: translateX(7px) !important;
  border-color: rgba(232,25,44,.4) !important;
  box-shadow: 0 4px 20px rgba(232,25,44,.1) !important;
}

/* ─── セクションラベル グロー ─── */
@keyframes label-glow {
  0%,100% { box-shadow: none; }
  50%      { box-shadow: 0 0 14px rgba(232,25,44,.4); }
}
.section-label { animation: label-glow 3s ease-in-out infinite; }

/* ─── 応募ボタン ネオン ─── */
@keyframes apply-neon {
  0%,100% { box-shadow: 0 6px 24px rgba(0,0,0,.2); }
  50%      { box-shadow: 0 6px 24px rgba(0,0,0,.2), 0 0 50px rgba(255,255,255,.12); }
}
.btn-apply { animation: apply-neon 2.2s ease-in-out infinite; }
.btn-apply:hover { animation: none; transform: translateY(-4px); }

/* ─── チームタグ グリッド ─── */
.teams-grid { gap: 12px; }
.team-tag { font-size: .88rem; padding: 9px 16px; }

/* ─── info-item ホバー強化 ─── */
.info-item { transition: background .2s, transform .2s; }
.info-item:hover { background: #fff0f2 !important; transform: translateX(3px); }