/* ============================================================
   samboo – index.html 固有スタイル
   assets/css/pages/index.css
   ============================================================ */

/* ---------- Hero Video ---------- */
.hero-video {
  transform: scale(1.5);
  transform-origin: top left;
  object-position: left top;
}

/* ---------- Text Gradient ---------- */
.text-gradient-blue {
  background: linear-gradient(135deg, #3399E0 0%, #60BFFF 40%, #0071CE 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ---------- Hero Slide Transitions ---------- */
.slide-enter  { opacity: 0; transform: translateX(60px);  pointer-events: none; }
.slide-active {
  opacity: 1; transform: translateX(0);
  transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
  pointer-events: auto;
}
.slide-exit   {
  opacity: 0; transform: translateX(-60px);
  transition: opacity .5s ease-in, transform .5s ease-in;
  pointer-events: none;
}

/* ---------- Hero Dot Progress ---------- */
.hero-dot { position: relative; overflow: hidden; }
.hero-dot::after {
  content: '';
  position: absolute;
  left: 0; top: 0;
  height: 100%; width: 0;
  background: rgba(0, 113, 206, .3);
  border-radius: inherit;
}
.hero-dot.active-bar::after { animation: dotProgress 7s linear forwards; }
@keyframes dotProgress { from { width: 0; } to { width: 100%; } }

/* ---------- Hero Typography ---------- */
.hero-headline {
  font-size: clamp(2.2rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.03em;
  color: #111;
  white-space: nowrap;
}
.sec-title-dynamic {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.2;
}

/* ---------- Pulse Dot Animation ---------- */
@keyframes pulseDot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,113,206,.4); }
  50%       { box-shadow: 0 0 0 8px transparent; }
}

/* ---------- Service Card Shine ---------- */
.service-card { position: relative; overflow: hidden; }
.service-card::before {
  content: '';
  position: absolute;
  top: 0; left: -75%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: skewX(-15deg);
  transition: none;
  z-index: 1;
  pointer-events: none;
}
.service-card:hover::before { animation: cardShine .8s ease forwards; }
@keyframes cardShine { to { left: 125%; } }

.count-up { display: inline-block; transition: transform .6s cubic-bezier(.16,1,.3,1); }
.service-card:hover .count-up { transform: translateY(-2px); }

/* ---------- News Item Hover Line ---------- */
.news-item { position: relative; }
.news-item::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: linear-gradient(90deg, #0071CE, transparent);
  transition: width .5s cubic-bezier(.16,1,.3,1);
}
.news-item:hover::before { width: 100%; }

/* ---------- Partner Card Float ---------- */
.partner-card { transition: transform .6s cubic-bezier(.16,1,.3,1), box-shadow .6s; }
.partner-card:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0,0,0,.08); }

/* ---------- YouTube Placeholder ---------- */
.yt-placeholder { position: relative; overflow: hidden; cursor: pointer; }
.yt-placeholder::after {
  content: '▶';
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  color: rgba(0,113,206,.15);
  transition: all .4s;
}
.yt-placeholder:hover::after { color: rgba(0,113,206,.35); transform: scale(1.1); }