/* Ultra-Premium iOS App Cards with Apple-Perfect Animations
   Based on Apple's Design System with superior polish and transitions */

:root {
  /* Colors - Using Apple's exact color palette */
  --sf-blue-light: #007AFF;
  --sf-blue-dark: #0A84FF;
  --sf-background-light: #FFFFFF;
  --sf-background-dark: #1C1C1E;
  --sf-card-light: rgba(255, 255, 255, 0.8);
  --sf-card-dark: rgba(30, 30, 32, 0.8);
  --sf-text-primary-light: #000000;
  --sf-text-secondary-light: rgba(60, 60, 67, 0.7);
  --sf-text-primary-dark: #FFFFFF;
  --sf-text-secondary-dark: rgba(235, 235, 245, 0.6);

  /* Gradients */
  --sf-gradient-light: linear-gradient(145deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4));
  --sf-gradient-dark: linear-gradient(145deg, rgba(50, 50, 56, 0.7), rgba(30, 30, 36, 0.4));

  /* Shadows - Multi-layered for depth */
  --sf-shadow-light:
    0 2px 6px rgba(0, 0, 0, 0.03),
    0 8px 24px rgba(0, 0, 0, 0.06);
  --sf-shadow-dark:
    0 2px 8px rgba(0, 0, 0, 0.2),
    0 8px 24px rgba(0, 0, 0, 0.2);

  /* Radii - Consistent with iOS */
  --sf-radius-card: 16px;
  --sf-radius-button: 20px;
  --sf-radius-icon: 12px;

  /* Animation Timing */
  --sf-timing-standard: cubic-bezier(0.23, 1, 0.32, 1); /* Apple's easing */
  --sf-timing-spring: cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Springy effect */
  --sf-timing-smooth: cubic-bezier(0.42, 0, 0.58, 1); /* Smooth in-out */

  /* Spacing System */
  --sf-space-1: 4px;
  --sf-space-2: 8px;
  --sf-space-3: 12px;
  --sf-space-4: 16px;
  --sf-space-5: 24px;
  --sf-space-6: 32px;
  --sf-space-7: 48px;

  /* Card Dimensions */
  --app-card-padding: var(--sf-space-5);
  --app-card-spacing: var(--sf-space-4);

  /* Premium Effects */
  --sf-blur: 15px;
  --sf-saturation: 1.8;
}

/* Apply Light/Dark Mode Colors */
@media (prefers-color-scheme: light) {
  :root {
    --sf-blue: var(--sf-blue-light);
    --sf-background: var(--sf-background-light);
    --sf-card: var(--sf-card-light);
    --sf-text-primary: var(--sf-text-primary-light);
    --sf-text-secondary: var(--sf-text-secondary-light);
    --sf-gradient: var(--sf-gradient-light);
    --sf-shadow: var(--sf-shadow-light);
    --sf-shadow-hover:
      0 8px 32px rgba(0, 0, 0, 0.12),
      0 2px 8px rgba(0, 122, 255, 0.05);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --sf-blue: var(--sf-blue-dark);
    --sf-background: var(--sf-background-dark);
    --sf-card: var(--sf-card-dark);
    --sf-text-primary: var(--sf-text-primary-dark);
    --sf-text-secondary: var(--sf-text-secondary-dark);
    --sf-gradient: var(--sf-gradient-dark);
    --sf-shadow: var(--sf-shadow-dark);
    --sf-shadow-hover:
      0 8px 32px rgba(0, 0, 0, 0.3),
      0 2px 8px rgba(10, 132, 255, 0.1);
    --background: #1c1c1c;
  }
}

/* Base Container & Grid */
.ios-apps-container {
  padding: var(--sf-space-6) 0;
  overflow-x: hidden; /* Prevent horizontal overflow */
}

.ios-apps-category {
  margin-bottom: var(--sf-space-7);
  position: relative;
  z-index: 1;
}

.category-header {
  margin-bottom: var(--sf-space-6);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--sf-timing-standard),
              transform 0.8s var(--sf-timing-standard);
}

.category-header.animated {
  opacity: 1;
  transform: translateY(0);
}

.category-title {
  font-size: 32px;
  font-weight: 600;
  margin-bottom: var(--sf-space-2);
  letter-spacing: -0.025em;
  color: var(--sf-text-primary);
  background: linear-gradient(90deg, var(--sf-blue), #5AC8FA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

[dir="rtl"] .category-title {
  background: linear-gradient(90deg, #5AC8FA, var(--sf-blue));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.category-description {
  font-size: 18px;
  font-weight: 400;
  max-width: 600px;
  margin: 0 auto;
  color: var(--sf-text-secondary);
  line-height: 1.5;
}

/* App Grid with Premium Scroll Effects */
.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 32px;
  margin-top: var(--sf-space-6);
  position: relative;
}

/* Premium App Card */
.app-card {
  position: relative;
  background: var(--sf-card);
  -webkit-backdrop-filter: blur(var(--sf-blur)) saturate(var(--sf-saturation));
  backdrop-filter: blur(var(--sf-blur)) saturate(var(--sf-saturation));
  border-radius: var(--sf-radius-card);
  box-shadow: var(--sf-shadow);
  overflow: hidden;
  transition: all 0.6s var(--sf-timing-standard);
  display: flex;
  flex-direction: column;
  position: relative;
  border: 1px solid var(--border);
  transform: translateY(60px);
  opacity: 0;
  will-change: transform, opacity, box-shadow;
}

.app-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--sf-gradient);
  border-radius: var(--sf-radius-card);
  opacity: 0;
  transition: opacity 0.5s var(--sf-timing-standard);
  z-index: -1;
}

/* Card Animation States */
.app-card.animated {
  transform: translateY(0);
  opacity: 1;
}

@media (hover: hover) {
  .app-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: var(--sf-shadow-hover);
  }

  .app-card:hover::before {
    opacity: 1;
  }

  /* .app-card:hover .app-icon-wrapper {
    transform: scale(1.08) translateY(-3px);
  } */

  .app-card:hover .app-title {
    background-position: 0 0;
  }
}

/* App Header */
.app-header {
  display: flex;
  align-items: flex-start;
  padding: var(--app-card-padding);
  padding-bottom: var(--app-card-spacing);
  position: relative;
  overflow: hidden;
  flex-direction: column;
}

.app-icon-wrapper {
  flex-shrink: 0;
  margin-bottom: var(--sf-space-4);
  width: 70px;
  height: 70px;
  position: relative;
  transform-origin: center;
  transition: transform 0.6s var(--sf-timing-spring);
}

/* [dir="rtl"] .app-card:hover .app-icon-wrapper {
  transform: scale(1.08) translateY(-3px);
} */
.app-icon {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--sf-radius-icon);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin: unset;
}

.app-title-container {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  padding: 0 var(--sf-space-1);
}

.app-title {
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--sf-text-primary);
  line-height: 1.2;
  letter-spacing: -0.015em;
  background: linear-gradient(90deg, var(--sf-blue) 0%, var(--sf-blue) 50%, #5AC8FA 100%);
  background-size: 200% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  transition: background-position 0.6s var(--sf-timing-standard);
}

[dir="rtl"] .app-title {
  background: linear-gradient(90deg, #5AC8FA 0%, var(--sf-blue) 50%, var(--sf-blue) 100%);
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
}

.app-description {
  font-size: 16px;
  line-height: 1.5;
  margin: 0;
  color: var(--sf-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Premium Features Toggle */
.app-detail {
  display: flex;
  flex-direction: column;
  padding: 0 var(--app-card-padding);
  flex-grow: 1;
}

.features-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 122, 255, 0.05);
  color: var(--sf-blue);
  border: 1px solid rgba(0, 122, 255, 0.2);
  padding: 10px 20px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-radius: var(--sf-radius-button);
  transition: all 0.4s var(--sf-timing-standard);
  align-self: flex-start;
  outline: none;
  position: relative;
  overflow: hidden;
  z-index: 2;
}

[dir="rtl"] .features-toggle {
  flex-direction: row-reverse;
}

.features-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 122, 255, 0.2);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.4s var(--sf-timing-standard);
  z-index: 0;
}

.features-toggle:hover::before {
  transform: scaleX(1);
}

.features-toggle:active {
  transform: scale(0.97);
}

.toggle-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  transition: transform 0.5s var(--sf-timing-spring);
  position: relative;
  z-index: 1;
}

.toggle-text {
  transition: opacity 0.3s var(--sf-timing-standard);
  position: relative;
  z-index: 1;
}

/* Premium Features Container */
.features-container {
  height: 0;
  overflow: hidden;
  opacity: 0;
  transition: height 0.5s var(--sf-timing-standard),
              opacity 0.4s var(--sf-timing-standard);
  margin-top: 0;
}

.app-card.features-expanded .features-container {
  opacity: 1;
  margin-top: var(--sf-space-3);
  margin-bottom: var(--sf-space-3);
}

.features-wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--sf-space-3);
  padding-bottom: var(--app-card-spacing);
}

/* Feature Item with Premium Animation */
.feature-item {
  display: flex;
  align-items: flex-start;
  border-radius: 12px;
  padding: var(--sf-space-3);
  background: rgba(0, 0, 0, 0.03);
  opacity: 0;
  transform: translateX(-10px);
  transition: all 0.4s var(--sf-timing-standard);
  position: relative;
  overflow: hidden;
}

.feature-item::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
              rgba(0, 122, 255, 0.03),
              rgba(10, 132, 255, 0.01));
  opacity: 0;
  transition: opacity 0.3s var(--sf-timing-standard);
}

@media (prefers-color-scheme: dark) {
  .feature-item {
    background: rgba(255, 255, 255, 0.05);
  }

  .feature-item::before {
    background: linear-gradient(to right,
                rgba(10, 132, 255, 0.08),
                rgba(0, 122, 255, 0.03));
  }
}

.app-card.features-expanded .feature-item {
  opacity: 1;
  transform: translateX(0);
}

.feature-item:hover::before {
  opacity: 1;
}

.feature-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--sf-space-3);
  margin-top: 2px;
  color: var(--sf-blue);
  font-size: 18px;
  position: relative;
  z-index: 1;
}

[dir="rtl"] .feature-icon {
  margin-right: unset;
  margin-left: var(--sf-space-3);
}
[dir="rtl"] .feature-item {
  padding-left: var(--app-card-padding);
  padding-right: var(--app-card-spacing);
}
[dir="rtl"] .feature-item:hover::before {
  transform: scaleX(-1);
}

.feature-content {
  flex-grow: 1;
  position: relative;
  z-index: 1;
}

.feature-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 3px;
  color: var(--sf-text-primary);
  letter-spacing: -0.01em;
}

.feature-description {
  font-size: 14px;
  line-height: 1.5;
  margin: 0;
  color: var(--sf-text-secondary);
}

/* App Store Link */
.app-store-link {
  /* padding: var(--app-card-padding);
  padding-top: var(--app-card-spacing); */
  display: flex;
  /* justify-content: center; */
  margin-top: auto;
  position: relative;
}

.app-store-badge {
  height: 40px;
  transition: all 0.5s var(--sf-timing-spring);
  will-change: transform;
}

.app-store-badge:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.1));
}

/* Toggle Expanded State */
.app-card.features-expanded .toggle-icon {
  transform: rotate(45deg);
}

.app-card.features-expanded .toggle-text {
  opacity: 0;
  transform: translateX(10px);
}

/* Scroll-Based Animations */
/* .app-card[data-scroll="in-view"] {
  transform: translateY(0);
  opacity: 1;
} */

/* Special Animation for First Card */
/* .app-card:first-child {
  transform: translateY(40px) scale(0.95);
}

.app-card:first-child.animated {
  transform: translateY(0) scale(1);
  transition-delay: 0.1s;
} */

/* Premium Animation Keyframes */
@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

@keyframes cardEntranceLeft {
  from {
    opacity: 0;
    transform: translateX(-30px) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0) translateY(0);
  }
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: 0 0;
  }
}

/* Apply Unique Animation to Each Card in Grid */
/* .app-card:nth-child(3n+1).animated {
  animation: cardEntrance 0.8s var(--sf-timing-standard) forwards;
}

.app-card:nth-child(3n+2).animated {
  animation: cardEntranceRight 0.8s var(--sf-timing-standard) forwards;
}

.app-card:nth-child(3n+3).animated {
  animation: cardEntranceLeft 0.8s var(--sf-timing-standard) forwards;
} */

/* Premium Card Focus Effect */
.app-card:focus-within {
  box-shadow: 0 0 0 3px var(--sf-blue), var(--sf-shadow);
  outline: none;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .apps-grid {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    overflow: visible;
  }

  :root {
    --app-card-padding: 20px;
    --app-card-spacing: 14px;
  }

  .category-title {
    font-size: 28px;
  }

  .category-description {
    font-size: 16px;
  }

  .app-icon-wrapper {
    width: 60px;
    height: 60px;
  }

  .app-title {
    font-size: 20px;
  }
}

@media (max-width: 480px) {
  .apps-grid {
    grid-template-columns: 1fr;
  }

  :root {
    --app-card-padding: 16px;
    --app-card-spacing: 12px;
  }

  .app-icon-wrapper {
    width: 56px;
    height: 56px;
  }

  .app-title {
    font-size: 18px;
  }
}

.app-icon:hover {
  transform: unset;
  transition: unset;
}

.app-card:hover .app-icon {
  transform: unset;
}

/* iOS 17+ Specific Styles */
@supports (-webkit-backdrop-filter: blur(0)) {
  .app-card {
    -webkit-backdrop-filter: blur(var(--sf-blur)) saturate(var(--sf-saturation));
    backdrop-filter: blur(var(--sf-blur)) saturate(var(--sf-saturation));
  }
}
@supports (-webkit-backdrop-filter: blur(0)) and (backdrop-filter: blur(0)) {
  .app-card {
    -webkit-backdrop-filter: blur(var(--sf-blur)) saturate(var(--sf-saturation));
    backdrop-filter: blur(var(--sf-blur)) saturate(var(--sf-saturation));
  }
}
@supports (-webkit-backdrop-filter: blur(0)) and (backdrop-filter: blur(0)) and (backdrop-filter: none) {
  .app-card {
    -webkit-backdrop-filter: blur(var(--sf-blur)) saturate(var(--sf-saturation));
    backdrop-filter: blur(var(--sf-blur)) saturate(var(--sf-saturation));
  }
}


    /* Apple-style link with chevron arrow */
    .app-link {
      display: inline-flex;
      align-items: baseline;
      font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-size: 17px;
      font-weight: 400;
      text-decoration: none;
      color: #0066cc;
      position: relative;
      transition: color 0.2s ease;
      margin-top: var(--sf-space-2);
      /* padding: 0 var(--sf-space-2); */
      /* border-radius: var(--sf-radius-button); */
      /* background: rgba(0, 122, 255, 0.05); */
      /* box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); */
      /* padding: var(--sf-space-2) var(--sf-space-3); */
      /* border: 1px solid rgba(0, 122, 255, 0.2); */
      /* border-radius: var(--sf-radius-button); */
      transition: all 0.3s ease;
      /* margin-bottom: var(--sf-space-3); */
      cursor: pointer;
      /* will-change: transform, box-shadow;
      overflow: hidden;
      text-align: center;
      background-clip: padding-box; */
    }

    /* RTL support for Hebrew text */
    [dir="rtl"] .app-link {
      flex-direction: row-reverse;
    }

    .app-link .link-text {
      position: relative;
      border-bottom: 1px solid transparent;
      transition: border-color 0.2s ease;
      display: inline-block;
    }

    /* Chevron arrow after the text (for LTR languages like English) */
    .app-link::after {
      content: '';
      display: inline-block;
      width: 7px;
      height: 7px;
      border-style: solid;
      border-width: 0 1px 1px 0;
      margin-left: 0.5em;
      transform: rotate(-45deg) translateY(-2px);
      transition: transform 0.2s ease;
    }

    /* Chevron arrow before the text (for RTL languages like Hebrew) */
    [dir="rtl"] .app-link::before {
      content: '';
      display: inline-block;
      width: 7px;
      height: 7px;
      border-style: solid;
      border-width: 0 1px 1px 0;
      margin-right: 0.5em;
      transform: rotate(135deg) translateY(-2px);
      transition: transform 0.2s ease;
    }

    [dir="rtl"] .app-link::after {
      content: none;
    }

    /* Hover effects */
    .app-link:hover {
      color: #0066cc; /* Apple keeps the same blue color on hover */
    }

    .app-link:hover .link-text {
      border-bottom: 1px solid #0066cc; /* Underline on hover, only under the text */
    }

    .app-link:hover::after {
      transform: rotate(-45deg) translate(3px);
    }

    [dir="rtl"] .app-link:hover::before {
      transform: rotate(135deg) translate(3px);
    }

    /* Focus styles for accessibility */
    .app-link:focus {
      outline: none;
    }

    .app-link:focus .link-text {
      border-bottom: 1px solid #0066cc;
    }

.app-detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--app-card-padding);
  position: relative;
  overflow: hidden;
  padding-inline: var(--sf-space-1);
}

.app-store-badge:hover {
transform: unset;
}


/* Apple official device bezel */
.preview-container {
  position: relative;
  width: 100%;
  max-width: 390px;
  height: auto;
  filter: drop-shadow(0 24px 64px rgba(0, 0, 0, 0.25))
          drop-shadow(0 8px 24px rgba(0, 0, 0, 0.18));
  transition: all var(--duration-slow) var(--ease-out);
  margin: 0 auto;
}

.preview-container:hover {
  transform: translateY(-6px);
  filter: drop-shadow(0 32px 80px rgba(0, 0, 0, 0.3))
          drop-shadow(0 12px 32px rgba(0, 0, 0, 0.22));
}

@media (prefers-color-scheme: dark) {
  .preview-container {
    filter: drop-shadow(0 24px 64px rgba(0, 0, 0, 0.5))
            drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
  }

  .preview-container:hover {
    filter: drop-shadow(0 32px 80px rgba(0, 0, 0, 0.6))
            drop-shadow(0 12px 32px rgba(0, 0, 0, 0.5));
  }
}

/* Device bezel image */
.device-bezel {
  width: 100%;
  height: auto;
  display: block;
  position: relative;
  z-index: 2;
  pointer-events: none;
  user-select: none;
}

/* Screen content area - adjust percentages based on your bezel (1350x2760px) */
.device-screen {
    position: absolute;
    left: 5.3%;
    right: 5%;
    bottom: 2.5%;
    overflow: hidden;
    border-radius: 2.96%;
    background: #000;
    z-index: 1;
    border-radius: 30px;
    top: 2.4%;
}

/* Video content */
.app-preview-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}