/* ═══════════════════════════════════════════════════════════
   NAFOS STUDIOS — Auto-Swipe Showcase
   Inter · #050505 · glass cards · hardware-accelerated slides
   ═══════════════════════════════════════════════════════════ */

   .nafos-autoswipe {
    --nafos-autoswipe-accent:           #FFFFFF;
    --nafos-autoswipe-accent-soft:      rgba(255, 255, 255, 0.25);
    --nafos-autoswipe-hero-h-desk:      640px;
    --nafos-autoswipe-hero-h-mob:       580px;
    --nafos-autoswipe-glass-blur:       24px;
    --nafos-autoswipe-card-w-desk:      220px;
    --nafos-autoswipe-card-h:           180px;
    --nafos-autoswipe-show-arrows:      none;
    --nafos-autoswipe-show-dots:        flex;
    --nafos-autoswipe-show-bottom:      block;
  
    width:       100%;
    overflow:    hidden;
    padding-bottom: 24px;
    background:  transparent;
  }
  
  /* ── Hero Carousel ── */
  .nafos-autoswipe__hero {
    position: relative;
    width:    100%;
    overflow: hidden;
  }
  
  .nafos-autoswipe__hero-viewport {
    overflow: hidden;
    padding:  12px 0 4px;
    cursor:   grab;
    touch-action: pan-y pinch-zoom;
  }
  
  .nafos-autoswipe__hero-viewport.is-dragging {
    cursor: grabbing;
  }
  
  .nafos-autoswipe__hero-track {
    display:    flex;
    gap:        16px;
    will-change: transform;
    transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1);
  }
  
  .nafos-autoswipe__hero-viewport.is-dragging .nafos-autoswipe__hero-track {
    transition: none;
  }
  
  .nafos-autoswipe__hero-slide {
    position:      relative;
    flex:          0 0 86%;
    height:        var(--nafos-autoswipe-hero-h-desk);
    overflow:      hidden;
    border-radius: 10px;
    background:    linear-gradient(135deg, #1a1a2e 0%, #0f0f1a 100%);
    border:        1px solid rgba(255, 255, 255, 0.08);
    opacity:       1 !important;
    filter:        none !important;
    transform:     scale(0.92);
    transition:    transform 1.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
    will-change:   transform;
  }
  
  .nafos-autoswipe__hero-slide.is-active {
    transform:  scale(1);
    box-shadow: none;
  }
  
  @media (max-width: 767px) {
    .nafos-autoswipe__hero-slide {
      flex:   0 0 92%;
      height: var(--nafos-autoswipe-hero-h-mob);
    }
  }
  
  .nafos-autoswipe__hero-bg {
    position:   absolute;
    inset:      0;
    z-index:    0;
    background-size:     cover;
    background-position: center;
    pointer-events:      none;
    filter:     none;
    transition: transform 8s ease;
  }
  
  .nafos-autoswipe__hero-slide.is-active .nafos-autoswipe__hero-bg {
    transform: scale3d(1.03, 1.03, 1);
  }
  
  .nafos-autoswipe__hero-overlay {
    position:        absolute;
    inset:           0;
    background:      #000;
    opacity:         0 !important;
    display:         none !important;
    z-index:         1;
    pointer-events:  none;
  }
  
  .nafos-autoswipe__hero-glow {
    display:    none;
    position:   absolute;
    top:        50%;
    left:       50%;
    transform:  translate3d(-50%, -50%, 0);
    width:      60%;
    height:     60%;
    background: radial-gradient(circle, var(--nafos-autoswipe-accent) 0%, transparent 65%);
    opacity:    0.25;
    z-index:    1;
    pointer-events: none;
    filter:     blur(40px);
  }
  
  .nafos-autoswipe__hero-content {
    position:       absolute;
    bottom:         0;
    left:           0;
    z-index:        3;
    padding:        clamp(20px, 5vw, 60px);
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            12px;
    max-width:      70%;
    transform:      translateY(15px);
    opacity:        0;
    transition:
      transform 1.2s cubic-bezier(0.25, 1, 0.5, 1),
      opacity   1.2s cubic-bezier(0.25, 1, 0.5, 1);
  }

  .nafos-autoswipe__hero-slide.is-active .nafos-autoswipe__hero-content {
    transform: translateY(0);
    opacity:   1;
  }
  
  @media (max-width: 767px) {
    .nafos-autoswipe__hero-content {
      max-width: 100%;
      padding:   24px 20px;
    }
  }
  
  .nafos-autoswipe__hero-title {
    font-size:      clamp(36px, 6vw, 80px);
    font-weight:    900;
    font-style:     italic;
    line-height:    0.95;
    letter-spacing: -0.04em;
    margin:         0;
    text-transform: uppercase;
    color:          #ffffff;
    text-shadow:
      0 0 40px rgba(255, 255, 255, 0.3),
      0 4px 20px rgba(0, 0, 0, 0.8);
  }
  
  @media (max-width: 767px) {
    .nafos-autoswipe__hero-title {
      font-size: 24px !important;
      letter-spacing: -0.03em;
    }
  }
  
  .nafos-autoswipe__hero-subtitle {
    font-size:   clamp(13px, 1.4vw, 17px);
    font-weight: 400;
    font-style:  normal;
    margin:      0;
    line-height: 1.5;
    max-width:   420px;
    color:       rgba(255, 255, 255, 0.78);
  }
  
  .nafos-autoswipe__hero-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    padding:         12px 28px;
    border-radius:   999px;
    font-family:     inherit;
    font-size:       clamp(13px, 1.1vw, 16px);
    font-weight:     700;
    text-decoration: none;
    letter-spacing:  0.02em;
    text-transform:  uppercase;
    color:           #000;
    background:      #ffffff;
    transition:      transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow:      0 4px 20px rgba(0, 0, 0, 0.4);
    white-space:     nowrap;
    margin-top:      4px;
  }
  
  .nafos-autoswipe__hero-btn:hover {
    transform:  translate3d(0, -2px, 0) scale(1.03);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.5);
  }
  
  .nafos-autoswipe__hero-badge {
    position:       absolute;
    bottom:         clamp(16px, 3vw, 40px);
    right:          clamp(16px, 3vw, 40px);
    z-index:        3;
    font-size:      clamp(20px, 2.5vw, 36px);
    font-weight:    900;
    font-style:     italic;
    color:          rgba(255, 255, 255, 0.5);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
  }
  
  /* ── Hero Arrows ── */
  .nafos-autoswipe__arrow {
    position:        absolute;
    top:             50%;
    z-index:         10;
    transform:       translate3d(0, -50%, 0);
    width:           40px;
    height:          40px;
    display:         var(--nafos-autoswipe-show-arrows, flex);
    align-items:     center;
    justify-content: center;
    background:      rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius:   4px;
    border:          1px solid rgba(255, 255, 255, 0.08);
    color:           #fff;
    cursor:          pointer;
    padding:         0;
    transition:      background 0.2s ease, border-color 0.2s ease;
  }
  
  .nafos-autoswipe__arrow:hover {
    background:   rgba(255, 255, 255, 0.2);
    border-color: var(--nafos-autoswipe-accent);
  }
  
  .nafos-autoswipe__arrow--prev { left: 12px; }
  .nafos-autoswipe__arrow--next { right: 12px; }
  
  .nafos-autoswipe__arrow svg {
    display: block;
    width:   14px;
    height:  14px;
    stroke:  currentColor;
    fill:    none;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  
  /* ── Bottom Cards Row ── */
  .nafos-autoswipe__bottom {
    display: var(--nafos-autoswipe-show-bottom, block);
    padding: 0;
    margin-top: 4px;
    overflow: hidden;
  }
  
  .nafos-autoswipe__bottom-label {
    font-size:      11px;
    font-weight:    700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color:          var(--nafos-autoswipe-accent);
    margin:         0 0 10px 16px;
  }
  
  .nafos-autoswipe__bottom-viewport {
    overflow: hidden;
    padding:  0 12px;
    cursor:   grab;
    touch-action: pan-y pinch-zoom;
  }
  
  .nafos-autoswipe__bottom-viewport.is-dragging {
    cursor: grabbing;
  }
  
  .nafos-autoswipe__bottom-track {
    display:     flex;
    gap:         10px;
    will-change: transform;
    transition:  transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }
  
  .nafos-autoswipe__bottom-viewport.is-dragging .nafos-autoswipe__bottom-track {
    transition: none;
  }
  
  .nafos-autoswipe__card {
    position:      relative;
    flex:          0 0 calc((100% - 10px) / 2.1);
    min-width:     0;
    height:        var(--nafos-autoswipe-card-h, 180px);
    border-radius: 6px;
    overflow:      hidden;
    cursor:        pointer;
    background:    rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(var(--nafos-autoswipe-glass-blur));
    -webkit-backdrop-filter: blur(var(--nafos-autoswipe-glass-blur));
    border:        1px solid rgba(255, 255, 255, 0.08);
    transition:
      transform 0.25s ease,
      border-color 0.25s ease,
      box-shadow 0.25s ease;
    will-change: transform;
  }
  
  @media (min-width: 480px) {
    .nafos-autoswipe__card {
      flex: 0 0 calc((100% - 24px) / 2.5);
    }
  }
  
  @media (min-width: 768px) {
    .nafos-autoswipe__bottom-track { gap: 14px; }
    .nafos-autoswipe__card {
      flex: 0 0 var(--nafos-autoswipe-card-w-desk, 220px);
    }
  }
  
  @media (min-width: 1024px) {
    .nafos-autoswipe__bottom-track { gap: 16px; }
    .nafos-autoswipe__card {
      flex: 0 0 var(--nafos-autoswipe-card-w-desk, 220px);
    }
  }
  
  @media (min-width: 1440px) {
    .nafos-autoswipe__card {
      flex: 0 0 var(--nafos-autoswipe-card-w-desk, 220px);
    }
  }
  
  .nafos-autoswipe__card:hover {
    transform:    translate3d(0, -4px, 0);
    border-color: var(--nafos-autoswipe-accent);
    box-shadow:   0 0 20px var(--nafos-autoswipe-accent-soft);
  }
  
  .nafos-autoswipe__card-bg {
    position:   absolute;
    inset:      0;
    z-index:    0;
    background-size:     cover;
    background-position: center;
    pointer-events:      none;
  }
  
  .nafos-autoswipe__card-overlay {
    position:       absolute;
    inset:          0;
    background:     linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
    z-index:        1;
    pointer-events: none;
  }
  
  .nafos-autoswipe__card-content {
    position:       absolute;
    bottom:         0;
    left:           0;
    right:          0;
    z-index:        2;
    padding:        12px;
    display:        flex;
    flex-direction: column;
    gap:            4px;
    align-items:    flex-start;
  }
  
  .nafos-autoswipe__card-title {
    font-size:      clamp(12px, 1.2vw, 15px);
    font-weight:    800;
    font-style:     italic;
    color:          #fff;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height:    1.1;
  }
  
  .nafos-autoswipe__card-desc {
    font-size:   10px;
    color:       rgba(255, 255, 255, 0.7);
    font-weight: 400;
    line-height: 1.3;
  }
  
  .nafos-autoswipe__card-btn {
    display:         inline-flex;
    align-items:     center;
    padding:         5px 14px;
    border-radius:   999px;
    background:      rgba(255, 255, 255, 0.9);
    color:           #000;
    font-family:     inherit;
    font-size:       11px;
    font-weight:     700;
    text-decoration: none;
    text-transform:  uppercase;
    letter-spacing:  0.03em;
    margin-top:      4px;
    transition:      background 0.2s ease, transform 0.2s ease;
  }
  
  .nafos-autoswipe__card-btn:hover {
    background: #fff;
    transform:  scale(1.04);
  }
  
  @media (max-width: 767px) {
    .nafos-autoswipe__hero-slide[style*="--hero-bg-mob"] .nafos-autoswipe__hero-bg {
      background-image: var(--hero-bg-mob) !important;
    }
  }

  /* ── Dots ── */
  .nafos-autoswipe__dots {
    display:         var(--nafos-autoswipe-show-dots, flex);
    justify-content: center;
    align-items:     center;
    gap:             8px;
    margin-top:      14px;
    padding:         0 16px;
  }
  
  .nafos-autoswipe__dot {
    width:         8px;
    height:        8px;
    border-radius: 4px;
    border:        none;
    padding:       0;
    background:    rgba(255, 255, 255, 0.3);
    cursor:        pointer;
    transition:    width 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
  }
  
  .nafos-autoswipe__dot.is-active {
    width:      24px;
    background: var(--nafos-autoswipe-accent);
    box-shadow: 0 0 12px var(--nafos-autoswipe-accent);
  }
  
  @media (prefers-reduced-motion: reduce) {
    .nafos-autoswipe__hero-track,
    .nafos-autoswipe__bottom-track,
    .nafos-autoswipe__hero-slide,
    .nafos-autoswipe__hero-bg {
      transition: none !important;
    }
  }