/* ==========================================================
   ADVANCED VISUAL EFFECTS
   ========================================================== */

/* --- Custom Neon Cursor --- */
body {
  /* Hide default cursor on desktop, keep on mobile */
  cursor: none;
}

/* Links and buttons should also hide default cursor so our custom one shows */
a, button, input, select, textarea, .form-check-input, .btn {
  cursor: none !important;
}

.isekai-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--ColorTemplate, #00f0ff);
  border-radius: 50%;
  pointer-events: none;
  z-index: 999999;
  transform: translate(-50%, -50%);
  transition: width 0.2s, height 0.2s, background-color 0.2s;
  box-shadow: 0 0 10px var(--ColorTemplate, #00f0ff), inset 0 0 5px var(--ColorTemplate, #00f0ff);
}

.isekai-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--ColorTemplate, #00f0ff);
  border-radius: 50%;
  pointer-events: none;
  z-index: 1000000;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px var(--ColorTemplate, #00f0ff);
}

.isekai-cursor--hover {
  width: 40px;
  height: 40px;
  background-color: rgba(0, 240, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

/* Hide custom cursor on small screens (mobile/tablets) */
@media (max-width: 991px) {
  .isekai-cursor, .isekai-cursor-dot {
    display: none !important;
  }
  body, a, button, input, select, textarea, .form-check-input, .btn {
    cursor: auto !important;
  }
  a, button, .btn {
    cursor: pointer !important;
  }
}

/* --- Scroll Animations (Entrance) --- */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Add some delay variations for grid items */
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* --- Preloader --- */
.isekai-preloader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #030304; z-index: 9999999; display: flex; align-items: center; justify-content: center; transition: opacity 0.6s ease, visibility 0.6s ease; }
.isekai-preloader.fade-out { opacity: 0; visibility: hidden; }
.isekai-preloader__skip { position: absolute; top: 30px; right: 40px; background: transparent; border: 1px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.6); padding: 8px 16px; border-radius: 4px; font-size: 0.8rem; font-family: var(--font-heading); cursor: pointer !important; letter-spacing: 1px; transition: all 0.3s ease; z-index: 10; }
.isekai-preloader__skip:hover { background: rgba(255,255,255,0.1); color: #fff; border-color: rgba(255,255,255,0.5); }
.isekai-preloader__content { display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; max-width: 400px; padding: 0 20px; }
.isekai-preloader__logo-container { position: relative; width: 220px; height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 25px; }
.isekai-preloader__logo { width: 190px; height: auto; z-index: 2; position: relative; transform: scale(1.6); }
.isekai-preloader__glow { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 110%; height: 110%; border-radius: 50%; background: radial-gradient(circle, var(--ColorTemplateAlpha, rgba(0, 240, 255, 0.4)) 0%, transparent 70%); border: 2px solid var(--ColorTemplate, #00f0ff); box-shadow: 0 0 30px var(--ColorTemplateAlpha, rgba(0, 240, 255, 0.4)), inset 0 0 20px var(--ColorTemplateAlpha, rgba(0, 240, 255, 0.2)); animation: pulseGlow 2s infinite; }
.isekai-preloader__subtitle { color: var(--ColorTemplate, #00f0ff); font-family: var(--font-heading); font-size: 0.8rem; font-weight: 800; letter-spacing: 1px; margin-bottom: 8px; text-transform: uppercase; text-shadow: 0 0 8px var(--ColorTemplateAlpha); }
.isekai-preloader__title { color: #fff; font-family: var(--font-heading); font-size: 1.4rem; font-weight: 800; text-transform: uppercase; margin-bottom: 20px; letter-spacing: 1px; }
.isekai-preloader__progress-bar { width: 100%; height: 4px; background: rgba(255, 255, 255, 0.1); border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.isekai-preloader__progress-fill { width: 0%; height: 100%; background: var(--ColorTemplate, #00f0ff); box-shadow: 0 0 10px var(--ColorTemplate, #00f0ff); transition: width 0.1s linear; }
.isekai-preloader__text { color: rgba(255, 255, 255, 0.5); font-size: 0.75rem; font-family: var(--font-primary); letter-spacing: 0.5px; }
@keyframes pulseGlow { 0% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.95); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.05); } 100% { opacity: 0.8; transform: translate(-50%, -50%) scale(0.95); } }


/* --- Advanced Community Widget --- */
.isekai-community-widget { position: fixed; right: 18px; bottom: 22px; z-index: 1200; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.isekai-community-trigger-wrapper { position: relative; }
.isekai-community-wsp-icon { position: absolute; right: -15px; top: -35px; width: 65px; z-index: 2; transition: opacity 0.3s ease, transform 0.3s ease; cursor: pointer; filter: drop-shadow(0 5px 15px rgba(37, 211, 102, 0.4)); }
.isekai-community-wsp-icon:hover { transform: scale(1.1); }
.isekai-community-toggle { display: inline-flex; align-items: center; gap: 9px; height: 48px; padding: 0 18px 0 35px; color: #111; background: #ffc107; border: 0; box-shadow: 0 14px 34px rgba(0, 0, 0, .38); font-size: 12px; font-weight: 900; text-transform: uppercase; border-radius: 8px; cursor: pointer; transition: all 0.3s ease; z-index: 1; position: relative; }
.isekai-community-toggle:hover { background: #ffca2c; transform: translateY(-2px); }
.isekai-community-panel { display: none; width: 280px; padding: 14px; background: rgba(12, 12, 12, .98); border: 1px solid rgba(255, 193, 7, .34); box-shadow: 0 20px 48px rgba(0, 0, 0, .48); border-radius: 12px; margin-bottom: 10px; }
.isekai-community-widget.open .isekai-community-panel { display: block; animation: popup 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards; transform-origin: bottom right; }
.isekai-community-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.isekai-community-head strong { color: #fff; font-size: 14px; text-transform: uppercase; }
.isekai-community-head button { width: 30px; height: 30px; color: #bbb; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); border-radius: 6px; cursor: pointer; transition: all 0.2s; }
.isekai-community-head button:hover { background: #ff2a2a; color: #fff; border-color: #ff2a2a; }
.isekai-community-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.isekai-community-actions a { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 10px; color: #fff; background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .07); font-size: 12px; font-weight: 800; border-radius: 8px; transition: all 0.2s; }
.isekai-community-actions a i { font-size: 16px; }
.isekai-community-actions a:hover { color: #111; background: #ffc107; border-color: #ffc107; text-decoration: none; transform: translateY(-2px); }
@keyframes popup { 0% { opacity: 0; transform: scale(0.9) translateY(20px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }

/* ==========================================
   FEATURES TABS SECTION
   ========================================== */
.features-tabs-section { position: relative; padding: 20px 25px; border-radius: 16px; background: rgba(5, 5, 10, 0.7); box-shadow: 0 0 30px var(--ColorTemplateAlpha, rgba(0, 240, 255, 0.1)), inset 0 0 15px var(--ColorTemplateAlpha, rgba(0, 240, 255, 0.05)); backdrop-filter: blur(10px); z-index: 1; }
.features-tabs-section::before { content: ""; position: absolute; top: -1px; left: -1px; right: -1px; bottom: -1px; border-radius: 16px; padding: 2px; background: linear-gradient(60deg, var(--ColorTemplate, #00f0ff), transparent 30%, transparent 70%, var(--ColorTemplate, #00f0ff)); background-size: 300% 300%; animation: animatedBorder 4s ease infinite alternate; -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: -1; }
@keyframes animatedBorder { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } }
.tabs-labels-container { overflow-x: auto; padding-top: 20px; padding-bottom: 5px; scrollbar-width: none; }
.tabs-labels-container::-webkit-scrollbar { display: none; }
.tab-label { flex: 0 0 auto; padding: 12px 20px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); display: flex; align-items: center; gap: 10px; min-width: 140px; }
.tab-label img { width: 24px; height: 24px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.3)); }
.tab-label span { font-size: 0.9rem; font-weight: 600; color: rgba(255,255,255,0.6); }
.tab-label:hover { background: var(--ColorTemplateAlpha, rgba(0,240,255,0.1)); border-color: var(--ColorTemplateAlpha, rgba(0,240,255,0.4)); transform: translateY(-2px); }
.tab-label.active { background: linear-gradient(135deg, var(--ColorTemplateAlpha, rgba(0,240,255,0.4)) 0%, rgba(0,0,0,0.2) 100%); border-color: var(--ColorTemplate, #00f0ff); box-shadow: 0 0 20px var(--ColorTemplateAlpha, rgba(0,240,255,0.2)); }
.tab-label.active span { color: #fff; }
.tab-label.active img { filter: drop-shadow(0 0 8px var(--ColorTemplate, #00f0ff)); }
.tabs-content-area { min-height: 400px; padding: 40px; }
.tab-pane { display: none; animation: fadeIn 0.5s ease-out; }
.tab-pane.active { display: block; }
.tab-media-wrapper { position: relative; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.1); }
.tab-media-wrapper img, .tab-media-wrapper video { transition: transform 0.5s ease; border-radius: 15px; }
.tab-media-wrapper:hover img, .tab-media-wrapper:hover video { transform: scale(1.03); }
@media (max-width: 991px) { .tabs-content-area { padding: 25px; } .tab-pane .row { flex-direction: column-reverse; gap: 30px; } }