/* Interactive Element Hover Effects */

.menu-item,
.footer-links a,
.hero-book-cta,
.profile-library-subtitle,
.book-cta-text,
.consult-right-content-text,
.community-entry-text {
  position: relative;
  transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.menu-item:hover,
.menu-item:focus {
  opacity: 1 !important;
  transform: scale(1.05);
  filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.2));
  color: #fff;
}

.menu-item::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 3px;
  background-color: #fff;
  transition: width 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.6);
}

.menu-item:hover::after,
.menu-item:focus::after {
  width: 60%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.8);
}

.footer-links a:hover,
.footer-links a:focus {
  opacity: 0.8;
  transform: scale(1.05);
}

.hero-book-cta:hover,
.hero-book-cta:focus {
  color: #ff2626;
  font-weight: 800;
  transform: scale(1.05);
}

button:hover,
button:focus,
a:hover,
a:focus {
  transition: all 0.3s ease-in-out;
}

@media (hover: none) and (pointer: coarse) {
  .menu-item {
    opacity: 1;
  }
  .menu-item:active {
    transform: scale(1.05);
    filter: drop-shadow(0 4px 8px rgba(255, 255, 255, 0.2));
  }
  .footer-links a:active {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

/* Glass shatters on hover */
.hero-book-card:hover::before,
.hero-book-card:focus::before {
  animation: glassShatters 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

.hero-book-card:hover,
.hero-book-card:focus {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
}

.hero-book-arrow {
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateX(0) scaleX(1);
}

.hero-book-card:hover .hero-book-arrow,
.hero-book-card:focus .hero-book-arrow {
  transform: translateX(18px) scaleX(1.35);
  filter: drop-shadow(0 8px 16px rgba(255, 38, 38, 0.7));
}

/* Make hero-book-cta red on card hover */
.hero-book-card:hover .hero-book-cta,
.hero-book-card:focus .hero-book-cta {
  color: #ff2626;
  font-weight: 800;
}

/* Books Section Card Hover Effects - Scale Pop Out */
.book-card {
  transition: all 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(1);
  position: relative;
}

.book-card:hover,
.book-card:focus {
  transform: scale(1.12);
  box-shadow: 0 30px 60px rgba(255, 38, 38, 0.4),
    0 0 40px rgba(255, 38, 38, 0.3);
}

.book-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    circle at center,
    rgba(255, 38, 38, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
  border-radius: inherit;
}

.book-card:hover::after,
.book-card:focus::after {
  opacity: 1;
}

/* Profile Library Card Hover Effects */
.profile-library-card {
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(1);
  position: relative;
}
.profile-library-card:hover,
.profile-library-card:focus {
  transform: scale(1.08);
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.5);
}
.profile-library-card::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
  transition: height 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}
.profile-library-card:hover::after,
.profile-library-card:focus::after {
  height: 35%;
}

/* Profile Consult Card Hover Effects */
.profile-consult-card {
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateY(0);
}
.profile-consult-card:hover,
.profile-consult-card:focus {
  transform: translateY(-15px);
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.5);
}
.profile-consult-btn {
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.profile-consult-card:hover .profile-consult-btn,
.profile-consult-card:focus .profile-consult-btn {
  background-color: #222;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

/* Profile Message Card Hover Effects */
.profile-message-card {
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: scale(1) rotate(0deg);
}
.profile-message-card:hover,
.profile-message-card:focus {
  transform: scale(1.12) rotate(-3deg);
  box-shadow: 0 40px 80px rgba(0, 255, 136, 0.5);
}

/* Hero Frame - Red Glow */
.hero-frame {
  transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
  filter: drop-shadow(0 0 60px rgba(255, 38, 38, 1))
    drop-shadow(0 0 90px rgba(255, 38, 38, 0.8));
}

/* 2. PROFILE CONSULT BUTTON - Download Progress */
.profile-consult-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.4s ease-in-out;
}
.profile-consult-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #ff2626, transparent);
  transition: left 0s ease-in-out;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(255, 38, 38, 0.8));
}
.profile-consult-card:hover .profile-consult-btn::before,
.profile-consult-card:focus .profile-consult-btn::before {
  animation: downloadProgress 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 3. CONSULT RIGHT CONTENT - Arrow Shake */
.consult-right-content-text {
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  cursor: pointer;
}
.consult-right-content-text:hover,
.consult-right-content-text:focus {
  color: #ff2626;
  text-shadow: 0 0 25px rgba(255, 38, 38, 0.9);
  transform: scale(1.1);
}
.consult-right-content-arrow {
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
  transform: translateY(0) scaleY(1);
}
.consult-bottom-right-contents:hover .consult-right-content-text {
  color: #ff2626;
  text-shadow: 0 0 25px rgba(255, 38, 38, 0.9);
  transform: scale(1.1);
}
.consult-bottom-right-contents:hover .consult-right-content-arrow {
  animation: arrowShake 0.7s ease-in-out infinite;
  transform: scaleY(1.6) scaleX(1.2);
  filter: drop-shadow(0 0 16px rgba(255, 38, 38, 0.9));
}

/* 4. CONSULT BOTTOM RIGHT BUTTON - Download Progress */
.consult-bottom-right-btn {
  position: relative;
  overflow: hidden;
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.consult-bottom-right-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #ff2626, transparent);
  transition: left 0s ease-in-out;
  pointer-events: none;
}
.consult-bottom-right-btn:hover::before,
.consult-bottom-right-btn:focus::before {
  animation: downloadProgress 2s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* 5. COMMUNITY X CARD - Lift & Glow */
.community-x-card {
  transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  backdrop-filter: blur(15px);
  border: 2px solid rgba(255, 255, 255, 0.25);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 48px rgba(31, 38, 135, 0.4),
    inset 0 2px 4px rgba(255, 255, 255, 0.3);
}
.community-x-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}
.community-x-card:hover,
.community-x-card:focus {
  transform: translateY(-12px) perspective(1000px) rotateX(3deg);
  box-shadow: 0 45px 90px rgba(255, 255, 255, 0.35),
    0 0 60px rgba(255, 255, 255, 0.2);
}
.community-x-card:hover::after,
.community-x-card:focus::after {
  opacity: 1;
}
.community-x-card:hover .community-x-content,
.community-x-card:focus .community-x-content {
  transform: scale(1.1);
}
.community-x-text {
  transition: all 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.community-x-card:hover .community-x-text,
.community-x-card:focus .community-x-text {
  color: #00ff88;
  text-shadow: 0 0 30px rgba(0, 255, 136, 0.8), 0 0 60px rgba(0, 255, 136, 0.4);
}

/* Touch Friendly Active States */
@media (hover: none) and (pointer: coarse) {
  .nav-menu a:active,
  .footer-link:active {
    opacity: 0.7;
  }
  .profile-library-card:active,
  .profile-consult-card:active,
  .profile-message-card:active,
  .hero-book-card:active,
  .book-card:active,
  .rating-card:active,
  .community-x-card:active {
    transform: scale(0.98);
  }
}