/* ============================================================
   animations.css — Luxury motion for preview.sittida.com
   ============================================================ */

/* ---- Scroll Reveal ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Button hover refinements ---- */
.btn {
  transition:
    opacity      0.3s,
    transform    0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow   0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background-color 0.35s,
    color        0.35s,
    border-color 0.35s;
}

.btn:hover {
  opacity: 1;
}

.btn-dark:hover {
  background: var(--bg);
  color: var(--text);
  box-shadow: inset 0 0 0 1.5px var(--text);
}

.btn-outline:hover {
  background: transparent;
  color: var(--text);
  opacity: 0.55;
}

/* ---- Sticky Feature CTA ---- */
.sticky-feature-cta:hover {
  background-color: #ebebeb;
}

/* ---- Student Banner CTA ---- */
.student-banner-cta svg {
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.student-banner-cta:hover svg {
  transform: translateX(4px);
}



/* ---- FAQ accordion (height animated by JS) ---- */
.faq-a-wrap {
  overflow: hidden;
  transition: height 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ブラウザのネイティブ非表示を上書き（閉じるアニメーション中も表示を維持） */
details.faq-item > .faq-a-wrap {
  display: block !important;
}

/* Smoother chevron */
.faq-item .faq-q::after {
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/*---- Mobile nav link hover ---- */
.mobile-nav-link {
  transition: opacity 0.25s, padding-left 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.mobile-nav-link:hover {
  padding-left: 8px;
  opacity: 0.55;
}