/* EO Planet: planet-interaction. Loaded after style.css (layouts/application.html.erb).
   One hover/focus layer. Animates color, background-color, border-color, box-shadow, opacity,
   filter and transform up to 2px only. `body` prefix outranks the inline per-view style blocks. */

/* ---- Transition base (rest state is never changed) ---- */
body a,
body .btn,
body .follow-btn,
body .more-article-btn,
body .see-all-btn,
body .more-btn,
body .nav-link,
body .dropdown-item,
body .magazine-container,
body .magazine-container .title,
body .feed .link-container,
body .feed .link-container .title,
body .card-helper,
body .card-helper__title,
body .member-box,
body .card-shape,
body .card-title,
body .simple-article-container .title,
body .eo-btn,
body .eo-chip,
body .eo-tab,
body .eo-follow,
body .eo-like,
body .eo-icon-btn,
body .eo-badge,
body .eo-card,
body .dropdown-item {
  transition:
    color 160ms cubic-bezier(.2, 0, 0, 1),
    background-color 160ms cubic-bezier(.2, 0, 0, 1),
    border-color 160ms cubic-bezier(.2, 0, 0, 1),
    box-shadow 160ms cubic-bezier(.2, 0, 0, 1),
    opacity 160ms cubic-bezier(.2, 0, 0, 1),
    filter 160ms cubic-bezier(.2, 0, 0, 1),
    transform 160ms cubic-bezier(.2, 0, 0, 1);
}

/* ---- Hover (hover-capable devices only) ---- */
@media (hover: hover) {

  /* Cards: surface steps one up (gray-5 to gray-4), title to Neon, images untouched */
  html body .magazine-container:hover,
  html body .feed .link-container:hover,
  html body .profile-container .card-helper:hover,
  html body .follower-container .card-helper:hover,
  html body .member-box:hover {
    background-color: var(--eo-gray-4-dark);
    background: var(--eo-gray-4-dark);
  }

  html body .magazine-container:hover .magazine-content-container .title,
  html body .magazine-container:hover > .title,
  html body .feed .link-container:hover .info-container .title-container .title,
  html body .card-helper:hover .card-helper__title,
  html body .member-box:hover .user-name,
  html body .card-shape:hover .card-title,
  html body .event:hover .card-title,
  html body .simple-article-container:hover .title {
    color: var(--eo-accent-ink);
  }

  /* One hover rule set (2026-10-08, Jay: hover must read clearly).
     Neon fills go to Air White (black ink stays); gray fills step up one; edges go to halo. */
  html body .eo-btn--primary:not(:disabled):not(.disabled):hover,
  html body .eo-follow:not(.is-following):not(:disabled):hover,
  html body .eo-like.is-liked:hover,
  html body .eo-like.active:hover,
  html body .btn-primary:not(:disabled):not(.disabled):hover,
  html body .follow-btn:not(.unfollow):hover,
  html body .btn-deep-green:hover,
  html body .btn-green:hover {
    background-color: var(--eo-halo);
    border-color: var(--eo-halo);
    color: var(--eo-black);
    filter: none;
  }
  html body .eo-btn--secondary:not(:disabled):not(.disabled):hover,
  html body .eo-icon-btn:not(.eo-icon-btn--round):hover {
    background-color: var(--eo-gray-2-dark);
    border-color: var(--eo-gray-2-dark);
    color: var(--eo-halo);
  }
  html body .eo-btn--outline:not(:disabled):not(.disabled):hover,
  html body .eo-follow.is-following:hover,
  html body .eo-like:not(.is-liked):not(.active):hover {
    background-color: var(--eo-gray-4-dark);
  }
  html body .eo-btn--outline:not(:disabled):not(.disabled):hover { border-color: var(--eo-halo); color: var(--eo-halo); }
  html body .eo-btn--ghost:not(:disabled):not(.disabled):hover {
    background-color: var(--eo-gray-4-dark);
    color: var(--eo-halo);
  }
  html body .eo-icon-btn--round:hover { outline: 2px solid var(--eo-gray-2-dark); outline-offset: 2px; }
  html body .eo-btn:not(:disabled):not(.disabled):active { transform: translateY(1px); }

  /* Tabs, menu rows, clickable cards, quiet text links */
  html body .eo-tab:not(.active):hover { color: var(--eo-halo); border-bottom-color: var(--eo-gray-2-dark); }
  html body .dropdown-menu .dropdown-item:hover,
  html body .eo-menu__item:hover { background-color: var(--eo-gray-2-dark); color: var(--eo-halo); }
  html body a.eo-card:hover,
  html body .eo-card--link:hover { background-color: var(--eo-gray-4-dark); }
  html body a.eo-card:hover .title,
  html body .eo-card--link:hover .title { color: var(--eo-accent-ink); }
  html body .eo-link:hover { color: var(--eo-halo); }

  /* Outline / secondary buttons */
  html body .btn-secondary:not(:disabled):not(.disabled):not(.active):hover,
  html body .btn-outline-secondary:not(:disabled):not(.disabled):not(.active):hover,
  html body .btn-outline-light:not(:disabled):not(.disabled):not(.active):hover,
  html body .more-article-btn:hover,
  html body .member-box .user-buttons .btn-profile:hover,
  html body .member-box .user-buttons .btn-company:hover {
    border-color: var(--eo-gray-2-light);
    color: var(--eo-halo);
  }


  /* Neon-filled buttons and anchors: ink stays black on hover */
  html body .btn-feedback:hover,
  html body .btn-business-plan:hover,
  html body .btn-done:hover,
  html body .btn-reward:hover,
  html body .btn-deep-green:hover,
  html body .btn-interview:hover,
  html body .floating-btn:hover,
  html body .start-btn:hover,
  html body .btn-start:hover,
  html body .btn-retry:hover,
  html body a.vod-btn:hover,
  html body a.final-evaluation-btn:hover,
  html body a.contact-btn:hover,
  html body .web-meeing-link-button-container .web-meeing-link-button:hover,
  html body .page-item.active .page-link:hover {
    color: var(--eo-black);
  }

  /* Quiet text controls */
  html body .see-all-btn:hover,
  html body .feed .function-container .btn-comment:hover,
  html body .feed .function-container .btn-share:hover {
    color: var(--eo-halo);
  }

  /* Header and menu nav links: to halo, no underline change */
  html body .navbar .nav-link:not(.active):hover,
  html body .navbar .nav-item.nav-link:not(.active):hover,
  html body .peerlearning-menu:not(.active):hover,
  html body .dropdown-menu .dropdown-item:hover {
    color: var(--eo-halo);
  }

  /* Text links in content: Neon, underline offset only where already underlined */
  html body .view-body .ck-content a:not(.btn):hover,
  html body .post-body a:not(.btn):hover,
  html body .comment-body a:not(.btn):hover,
  html body .feed .body a:not(.btn):hover,
  html body .feed .info-container .link:hover {
    color: var(--eo-accent-ink);
  }
  html body .view-body .ck-content a[style*="underline"]:hover,
  html body .view-body .ck-content a.underline:hover,
  html body .post-body a[style*="underline"]:hover,
  html body .comment-body a[style*="underline"]:hover {
    text-underline-offset: 3px;
  }
}

/* ---- Focus (all devices) ---- */
html body a:focus-visible,
html body button:focus-visible,
html body input:focus-visible,
html body select:focus-visible,
html body textarea:focus-visible,
html body summary:focus-visible,
html body [tabindex]:not([tabindex="-1"]):focus-visible,
html body [role="button"]:focus-visible,
html body .btn:focus-visible,
html body .nav-link:focus-visible,
html body .dropdown-item:focus-visible,
html body .follow-btn:focus-visible,
html body .more-article-btn:focus-visible {
  outline: 2px solid var(--eo-neon);
  outline-offset: 2px;
  box-shadow: none;
}

html body a:focus:not(:focus-visible),
html body button:focus:not(:focus-visible),
html body .btn:focus:not(:focus-visible),
html body [tabindex]:focus:not(:focus-visible),
html body [role="button"]:focus:not(:focus-visible) {
  outline: none;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  html body *,
  html body *::before,
  html body *::after {
    transition: none !important;
  }
}