/* ============================================
   Re'roots EC-learning — Custom Styles
   ============================================ */

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: #1e293b;
}

/* ---- Scroll offset for sticky nav ---- */
[id] { scroll-margin-top: 80px; }

/* ============================================
   Animations
   ============================================ */

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(40px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes pulseRing {
  0%   { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.5); opacity: 0; }
}

.animate-fade-in  { animation: fadeIn  0.7s ease both; }
.animate-slide-up { animation: slideUp 0.7s ease both; }
.animate-slide-left { animation: slideLeft 0.8s ease both; }

/* scroll-triggered reveal */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Module Tabs
   ============================================ */

.module-tab {
  background: white;
  color: #64748b;
  border: 1.5px solid #e2e8f0;
  cursor: pointer;
}

.module-tab:hover {
  border-color: #0d61d9;
  color: #0d61d9;
}

.module-tab.active-tab {
  background: #1a1a1a;
  color: white;
  border-color: #1a1a1a;
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.3);
}

/* ============================================
   Navbar scroll shadow
   ============================================ */

#navbar.scrolled {
  box-shadow: 0 2px 20px rgba(12, 37, 95, 0.08);
}

/* ============================================
   Hero gradient text
   ============================================ */

.gradient-text {
  background: linear-gradient(90deg, #DD832A, #1a1a1a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ============================================
   Pricing highlight ring
   ============================================ */

.pricing-featured {
  position: relative;
}
.pricing-featured::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 18px;
  background: linear-gradient(135deg, #1a1a1a, #DD832A);
  z-index: -1;
  opacity: 0.4;
}

/* ============================================
   Timeline connector (mobile)
   ============================================ */

@media (max-width: 767px) {
  .timeline-step {
    padding-left: 2rem;
    border-left: 2px solid #dbeafe;
    position: relative;
  }
  .timeline-step::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #1a1a1a;
  }
}

/* ============================================
   Form focus glow
   ============================================ */

input:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(224, 100, 0, 0.25);
}

/* ============================================
   Smooth hover cards
   ============================================ */

.card-hover {
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.card-hover:hover {
  box-shadow: 0 20px 40px rgba(12, 37, 95, 0.12);
  transform: translateY(-4px);
}

/* ============================================
   Gradient divider
   ============================================ */

.gradient-divider {
  height: 2px;
  background: linear-gradient(90deg, transparent, #1a1a1a 30%, #DD832A 70%, transparent);
  border: none;
}

/* ============================================
   Back to top button
   ============================================ */

#back-to-top {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #1a1a1a;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease, background 0.2s ease;
  z-index: 999;
  border: none;
  box-shadow: 0 4px 14px rgba(26, 26, 26, 0.3);
}

#back-to-top:hover { background: #DD832A; }

#back-to-top.show {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Mobile menu transition
   ============================================ */

#mobile-menu {
  transition: all 0.25s ease;
}

/* ============================================
   Responsive adjustments
   ============================================ */

@media (max-width: 640px) {
  h1 { font-size: 2.25rem; }
  h2 { font-size: 1.875rem; }
}

/* ============================================
   3 Services section — responsive
   ============================================ */

@media (max-width: 768px) {
  #services [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #services [style*="background: linear-gradient(135deg, #f0ece6"],
  #services [style*="background: linear-gradient(135deg, #1a1a1a"],
  #services [style*="background: linear-gradient(135deg, #f5e6c8"] {
    min-height: 200px !important;
    padding: 32px !important;
  }
  #services [style*="padding: 52px 56px"] {
    padding: 36px 28px !important;
  }

  /* Features responsive */
  #features [style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  #features [style*="padding: 48px 52px"] {
    padding: 36px 28px !important;
  }
  #features [style*="min-height: 280px"] {
    min-height: auto !important;
  }
  #features img {
    min-height: 200px;
  }

  /* Community responsive */
  #community [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 400px) {
  h1 { font-size: 1.875rem; }
}

/* ============================================
   Logo Ticker (infinite scroll marquee)
   ============================================ */

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

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

.logo-ticker-wrapper {
  /* 両端フェードアウト */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.logo-ticker-track {
  display: flex;
  width: 100%;
  overflow: hidden;
}

.logo-ticker-inner {
  display: flex;
  align-items: center;
  white-space: nowrap;
}

.ticker-ltr {
  animation: ticker-ltr 30s linear infinite;
}

.ticker-rtl {
  animation: ticker-rtl 30s linear infinite;
}

.logo-ticker-wrapper:hover .logo-ticker-inner {
  animation-play-state: paused;
}

.ticker-logo {
  display: inline-flex;
  align-items: center;
  font-family: 'Inter', 'Noto Sans JP', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  letter-spacing: 0.03em;
  padding: 5px 32px;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.ticker-logo:hover {
  color: #0c255f;
}