/*
Theme Name: Negavid Blog Theme
Theme URI: https://negavid.com
Author: Negavid
Author URI: https://negavid.com
Description: A modern RTL blog theme for Negavid with dark design and Persian language support
Version: 1.0.0
Text Domain: negavid
*/

/* IRANYekan X Font */
@font-face {
  font-family: 'IRANYekanX';
  src: url('./images/Font/IRANYekanX-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANYekanX';
  src: url('./images/Font/IRANYekanX-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'IRANYekanX';
  src: url('./images/Font/IRANYekanX-DemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Disable horizontal scroll globally */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

/* Repeating circular gradients on left and right in yellow over the dark bg */
body {
  font-family: 'IRANYekanX', sans-serif;
  /* Alternating rows: left and right circles, repeat only vertically */
  background-image:
    radial-gradient(
      circle 32rem at 15% 50%,
      rgba(250, 204, 21, 0.34) 0%,
      rgba(250, 204, 21, 0.18) 28%,
      rgba(250, 204, 21, 0.08) 55%,
      transparent 78%
    ),
    radial-gradient(
      circle 32rem at 85% 50%,
      rgba(250, 204, 21, 0.34) 0%,
      rgba(250, 204, 21, 0.18) 28%,
      rgba(250, 204, 21, 0.08) 55%,
      transparent 78%
    );
  /* Per-layer size: width of each edge column x row height */
  background-size: 50rem 128rem, 50rem 128rem;
  /* Left anchored at far left; right anchored at far right; second layer shifted down half a row */
  background-position: left 0 top 0, right 0 top 64rem;
  /* Repeat vertically only so columns stay on edges */
  background-repeat: no-repeat repeat, no-repeat repeat;
}

/* Mobile-specific adjustments */
@media (max-width: 640px) {
  /* Reduce overlap between user cards on small screens */
  .users-row .user-card + .user-card {
    margin-right: 0;
  }

  /* Slightly adjust folder tab size/position on small screens */
  .folder-tab {
    left: 55%;
    width: 35%;
    height: 22px;
  }
}

/* User avatars - rounded top, flat bottom */
.user-avatar {
  border-radius: 50% 50% 0 0;
}

/* Users management: grayscale toggle via :has() when checkbox is unchecked */
.user-card:has(input[type="checkbox"]:not(:checked)) img {
  filter: grayscale(100%);
  opacity: 0.8;
}

/* Smooth on/off color transition + subtle emphasis when ON */
.user-card img {
  transition: filter 300ms ease, opacity 300ms ease, transform 250ms ease, box-shadow 250ms ease;
}
.user-card:has(input[type="checkbox"]:checked) img {
  filter: none;
  opacity: 1;
  transform: none;
  box-shadow: none;
}

/* Label color transition to reflect state */
.user-card input + label {
  transition: color 200ms ease;
}
.user-card:has(input[type="checkbox"]:checked) input + label {
  color: rgb(165 180 252); /* indigo-300 */
}

/* Custom toggle control (image-based) */
.toggle-ctrl {
  appearance: none;
  -webkit-appearance: none;
  width: 56px;
  height: 32px;
  background: url('./images/toggle-off.svg') no-repeat center/contain;
  cursor: pointer;
  border: none;
  outline: none;
  display: inline-block;
}
.toggle-ctrl:checked {
  background-image: url('./images/toggle-on.svg');
}

/* Consistent crowd overlap: apply a fixed negative margin to each subsequent card */
.users-row .user-card + .user-card {
  margin-right: -4rem; /* tune overlap here */
}

/* Progress bar animation on scroll */
.progress-circle {
  stroke-dashoffset: 251.2; /* Start all circles hidden */
}

.progress-circle.animate {
  transition: stroke-dashoffset 1.5s ease-out;
}

/* Analytics section animations */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#analytics img {
  animation: float 3s ease-in-out infinite;
}

#analytics .flex.flex-col.items-center {
  animation: fadeInUp 0.6s ease-out forwards;
  opacity: 0;
}

#analytics .flex.flex-col.items-center:nth-child(1) {
  animation-delay: 0.2s;
}

#analytics .flex.flex-col.items-center:nth-child(2) {
  animation-delay: 0.4s;
}

#analytics .flex.flex-col.items-center:nth-child(3) {
  animation-delay: 0.6s;
}

#analytics .flex.flex-col.items-center:nth-child(4) {
  animation-delay: 0.8s;
}

/* Showcase Section */
#showcase-section {
  position: relative;
  overflow: visible;
}

.showcase-card {
  transition: all 0.5s ease;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
  background-color: #000000;
  /* Apply folder mask to the entire card */
  -webkit-mask-image: url('./frame/mask/mask.png');
  mask-image: url('./frame/mask/mask.png');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Folder tab overlay at top */
.folder-tab {
  position: absolute;
  left: 60%;
  width: 30%;
  top: 0;
  height: 28px;
  background: linear-gradient(180deg, rgba(95, 110, 105, 0.9), rgba(80, 95, 90, 0.8));
  backdrop-filter: blur(4px);
  border-radius: 15px 15px 0 0;
  z-index: 100;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-bottom: none;
  box-shadow: 
    0 -2px 8px rgba(0, 0, 0, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.25),
    inset 0 -1px 3px rgba(0, 0, 0, 0.3);
}

/* Stacked layer 1 */
.showcase-card::before {
  content: '';
  position: absolute;
  top: 10px;
  left: -15px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(95, 110, 105, 0.7), rgba(80, 95, 90, 0.6));
  z-index: -1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -8px 8px 25px rgba(0, 0, 0, 0.5);
  -webkit-mask-image: url('./frame/mask/mask.png');
  mask-image: url('./frame/mask/mask.png');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* Stacked layer 2 */
.showcase-card::after {
  content: '';
  position: absolute;
  top: 20px;
  left: -30px;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(80, 95, 90, 0.6), rgba(65, 80, 75, 0.5));
  z-index: -2;
  border: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: -12px 12px 30px rgba(0, 0, 0, 0.6);
  -webkit-mask-image: url('./frame/mask/mask.png');
  mask-image: url('./frame/mask/mask.png');
  -webkit-mask-size: cover;
  mask-size: cover;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.showcase-card:hover {
  transform: translateY(-8px) translateX(-2px);
  box-shadow: 
    0 25px 70px rgba(0, 0, 0, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

#showcaseMain {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.thumbnail {
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Features Section - Horizontal Scroll */
#features .overflow-x-auto {
  scrollbar-width: none; /* Firefox */
  scroll-behavior: smooth;
  -ms-overflow-style: none; /* IE and Edge */
}

/* Webkit browsers (Chrome, Safari) */
#features .overflow-x-auto::-webkit-scrollbar {
  display: none;
}

/* Ensure no horizontal overlap on mobile (override base rule order) */
@media (max-width: 640px) {
  .users-row .user-card + .user-card {
    margin-right: 0 !important;
  }
}

/* Page load fade-in animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in-section {
  opacity: 0;
}

.fade-in-section.visible {
  animation: fadeInUp 0.8s ease-out forwards;
}

/* Smooth hover animations for pricing cards */
.pricing-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: default;
}

.pricing-card:hover {
  transform: translateY(-8px) scale(1.02);
  background: rgba(60, 62, 71, 0.5) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3), 0 0 20px rgba(97, 149, 255, 0.1);
}

/* Encouraging button animations within pricing cards */
.pricing-card button {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.pricing-card:hover button {
  transform: scale(1.05);
  box-shadow: 0 8px 20px rgba(97, 149, 255, 0.4);
}

.pricing-card button:hover {
  transform: scale(1.1) !important;
  box-shadow: 0 12px 28px rgba(97, 149, 255, 0.5);
}

.pricing-card button:active {
  transform: scale(1.02);
}