/**
 * Inner-page motion layer — animations only.
 * Scoped to body.er-inner-animations. Resting layout unchanged.
 */

/* ── Scroll to top ───────────────────────────────────────── */
.er-scroll-top {
  position: fixed;
  right: 30px;
  bottom: 100px;
  z-index: 9998;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: #2563eb;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 12px, 0) scale(0.92);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease,
    transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.25s ease;
}

.er-scroll-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0) scale(1);
}

.er-scroll-top:hover {
  box-shadow: 0 12px 28px rgba(37, 99, 235, 0.2);
  transform: translate3d(0, -2px, 0) scale(1);
}

.er-scroll-top:active {
  transform: scale(0.94);
}

.er-scroll-top:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.er-scroll-top svg {
  display: block;
}

/* ── Ripple ──────────────────────────────────────────────── */
.er-ripple-host {
  position: relative;
  overflow: hidden;
}

.er-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  transform: scale(0);
  opacity: 0.6;
  pointer-events: none;
  animation: er-ripple-wave 0.55s ease-out forwards;
}

@keyframes er-ripple-wave {
  to {
    transform: scale(2.8);
    opacity: 0;
  }
}

/* ── Loading button ──────────────────────────────────────── */
.er-btn-loading {
  position: relative;
  pointer-events: none;
}

.er-btn-loading > *:not(.er-btn-spinner) {
  opacity: 0.15;
}

.er-btn-spinner {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: er-spin 0.65s linear infinite;
}

@keyframes er-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .er-scroll-top,
  .er-scroll-top.is-visible {
    transition: none;
    transform: none;
  }

  body.er-inner-animations .page-shell main,
  body.er-inner-animations .page-shell main .er-reveal,
  body.er-inner-animations .page-shell main .er-reveal.er-in-view {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  body.er-inner-animations .page-shell main .er-reveal img,
  body.er-inner-animations .page-shell main .blog-card-visual img {
    transform: none !important;
  }

  .er-ripple,
  .er-btn-spinner {
    animation: none !important;
    display: none !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  /* ── Page entrance ───────────────────────────────────── */
  body.er-inner-animations.er-inner-entering .page-shell main {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
  }

  body.er-inner-animations.er-inner-entered .page-shell main {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    transition:
      opacity 0.45s ease,
      transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* ── Scroll reveal ───────────────────────────────────── */
  body.er-inner-animations .page-shell main .er-reveal {
    /* opacity: 0; */
    transform: translate3d(0, 16px, 0);
    transition:
      opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--er-delay, 0ms);
    will-change: opacity, transform;
  }

  body.er-inner-animations .page-shell main .er-reveal.er-in-view {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
  }

  /* Breadcrumbs */
  body.er-inner-animations .page-shell main [class*="breadcrumb"],
  body.er-inner-animations .page-shell main .calc-breadcrumb,
  body.er-inner-animations .page-shell main .legal-page__bc {
    transition: opacity 0.5s ease, transform 0.5s ease;
  }

  /* ── Card hover lift + shadow (inner pages) ──────────── */
  body.er-inner-animations .page-shell main .blog-card,
  body.er-inner-animations .page-shell main .about-expert-card,
  body.er-inner-animations .page-shell main .about-creative-mission-card,
  body.er-inner-animations .page-shell main .about-service-item,
  body.er-inner-animations .page-shell main .about-choose-item,
  body.er-inner-animations .page-shell main .contact-hour-info-card,
  body.er-inner-animations .page-shell main .gsr-plan,
  body.er-inner-animations .page-shell main .tax-plan-card,
  body.er-inner-animations .page-shell main .pricing-card,
  body.er-inner-animations .page-shell main .legal-olc-card,
  body.er-inner-animations .page-shell main .faq-item {
    transition:
      transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.er-inner-animations .page-shell main .blog-card:hover,
  body.er-inner-animations .page-shell main .about-expert-card:hover,
  body.er-inner-animations .page-shell main .about-creative-mission-card:hover,
  body.er-inner-animations .page-shell main .about-service-item:hover,
  body.er-inner-animations .page-shell main .about-choose-item:hover,
  body.er-inner-animations .page-shell main .contact-hour-info-card:hover,
  body.er-inner-animations .page-shell main .gsr-plan:hover,
  body.er-inner-animations .page-shell main .tax-plan-card:hover,
  body.er-inner-animations .page-shell main .pricing-card:hover,
  body.er-inner-animations .page-shell main .legal-olc-card:hover,
  body.er-inner-animations .page-shell main .faq-item:hover {
    transform: translate3d(0, -4px, 0);
    box-shadow: 0 16px 32px rgba(15, 23, 42, 0.1);
  }

  /* ── Image zoom on hover ─────────────────────────────── */
  body.er-inner-animations .page-shell main .blog-card-visual,
  body.er-inner-animations .page-shell main .about-creative-team-photo,
  body.er-inner-animations .page-shell main .dynamic-static-page img {
    overflow: hidden;
  }

  body.er-inner-animations .page-shell main .blog-card-visual img,
  body.er-inner-animations .page-shell main .about-creative-team-photo img,
  body.er-inner-animations .page-shell main .dynamic-static-page .about-creative-team-card img {
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
  }

  body.er-inner-animations .page-shell main .blog-card:hover .blog-card-visual img,
  body.er-inner-animations .page-shell main .about-creative-team-card:hover img,
  body.er-inner-animations .page-shell main .dynamic-static-page .about-creative-team-card:hover img {
    transform: scale3d(1.05, 1.05, 1);
  }

  /* ── Buttons ─────────────────────────────────────────── */
  body.er-inner-animations .page-shell main .btn,
  body.er-inner-animations .page-shell main .gsr-btn,
  body.er-inner-animations .page-shell main .tmr-btn,
  body.er-inner-animations .page-shell main .contact-hour-submit,
  body.er-inner-animations .page-shell main .pricing-btn,
  body.er-inner-animations .page-shell main .itr-price-btn-primary {
    transition:
      transform 0.22s ease,
      box-shadow 0.22s ease,
      opacity 0.22s ease;
  }

  body.er-inner-animations .page-shell main .btn:hover,
  body.er-inner-animations .page-shell main .gsr-btn:hover,
  body.er-inner-animations .page-shell main .tmr-btn:hover,
  body.er-inner-animations .page-shell main .contact-hour-submit:hover,
  body.er-inner-animations .page-shell main .pricing-btn:hover {
    transform: translate3d(0, -1px, 0);
  }

  body.er-inner-animations .page-shell main .btn:active,
  body.er-inner-animations .page-shell main .gsr-btn:active,
  body.er-inner-animations .page-shell main .tmr-btn:active,
  body.er-inner-animations .page-shell main .contact-hour-submit:active {
    transform: scale(0.97);
  }

  /* ── Content link underline ──────────────────────────── */
  body.er-inner-animations .page-shell main .legal-page__body a:not(.btn):not(.legal-olc-cta__btn),
  body.er-inner-animations .page-shell main .blog-empty-text a,
  body.er-inner-animations .page-shell main .dynamic-static-page a:not(.btn):not(.pricing-btn):not(.tp-cta) {
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0 1px;
    transition: background-size 0.28s ease;
  }

  body.er-inner-animations .page-shell main .legal-page__body a:not(.btn):hover,
  body.er-inner-animations .page-shell main .blog-empty-text a:hover,
  body.er-inner-animations .page-shell main .dynamic-static-page a:not(.btn):not(.pricing-btn):hover {
    background-size: 100% 1px;
  }

  /* ── Icon hover ──────────────────────────────────────── */
  body.er-inner-animations .page-shell main .about-creative-mission-icon,
  body.er-inner-animations .page-shell main .contact-hour-info-icon,
  body.er-inner-animations .page-shell main .legal-olc-card__icon,
  body.er-inner-animations .page-shell main .icon-box {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  body.er-inner-animations .page-shell main .about-creative-mission-card:hover .about-creative-mission-icon,
  body.er-inner-animations .page-shell main .contact-hour-info-card:hover .contact-hour-info-icon,
  body.er-inner-animations .page-shell main .legal-olc-card:hover .legal-olc-card__icon,
  body.er-inner-animations .page-shell main .feature-item:hover .icon-box {
    transform: scale(1.08) rotate(-4deg);
  }

  /* ── Accordion / details ─────────────────────────────── */
  body.er-inner-animations .page-shell main .legal-faq-item summary,
  body.er-inner-animations .page-shell main .gsr-signup-docs__group summary,
  body.er-inner-animations .page-shell main .faq-item summary {
    transition: color 0.2s ease;
  }

  body.er-inner-animations .page-shell main .legal-faq-answer,
  body.er-inner-animations .page-shell main .gsr-signup-docs__group > :not(summary) {
    opacity: 0;
    transform: translate3d(0, -6px, 0);
    transition:
      opacity 0.32s ease,
      transform 0.32s ease;
  }

  body.er-inner-animations .page-shell main .legal-faq-item[open] .legal-faq-answer,
  body.er-inner-animations .page-shell main .gsr-signup-docs__group[open] > :not(summary) {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  body.er-inner-animations .page-shell main .accordion-collapse {
    transition: height 0.32s ease;
  }

  body.er-inner-animations .page-shell main .accordion-button {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  /* ── Tables ──────────────────────────────────────────── */
  body.er-inner-animations .page-shell main table tbody tr {
    transition: background-color 0.2s ease, transform 0.2s ease;
  }

  body.er-inner-animations .page-shell main table tbody tr:hover {
    background-color: rgba(37, 99, 235, 0.04);
    transform: translate3d(2px, 0, 0);
  }

  /* ── Pagination ──────────────────────────────────────── */
  body.er-inner-animations .page-shell main .blog-paginate .page-link,
  body.er-inner-animations .page-shell main .pagination .page-link {
    transition:
      transform 0.2s ease,
      background-color 0.2s ease,
      border-color 0.2s ease,
      color 0.2s ease;
  }

  body.er-inner-animations .page-shell main .blog-paginate .page-link:hover,
  body.er-inner-animations .page-shell main .pagination .page-link:hover {
    transform: translate3d(0, -2px, 0);
  }

  /* ── Form focus ──────────────────────────────────────── */
  body.er-inner-animations .page-shell main input:not([type="checkbox"]):not([type="radio"]),
  body.er-inner-animations .page-shell main select,
  body.er-inner-animations .page-shell main textarea {
    transition:
      border-color 0.22s ease,
      box-shadow 0.22s ease,
      transform 0.2s ease;
  }

  body.er-inner-animations .page-shell main input:focus,
  body.er-inner-animations .page-shell main select:focus,
  body.er-inner-animations .page-shell main textarea:focus {
    transform: translate3d(0, -1px, 0);
  }

  /* ── Header shadow on scroll (inner pages) ───────────── */
  body.er-inner-animations .tp-header {
    transition:
      box-shadow 0.35s ease,
      background-color 0.35s ease;
  }

  body.er-inner-animations .tp-header.fixed {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  }

  /* ── Counter display ─────────────────────────────────── */
  body.er-inner-animations .page-shell main .er-counter-active {
    display: inline-block;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
}