/* ==========================================================================
   VARSHA AUDIO — Interactions, hovers & responsive polish
   Load after refinement.css
   ========================================================================== */

/* --- Scroll reveal disabled (content always visible; avoids scroll height jumps) --- */
.reveal,
.reveal--left,
.reveal--right,
.reveal--up,
[data-reveal-item] {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.revealed {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* --- Global interactive polish --- */
@media (hover: hover) and (pointer: fine) {
  .btn--primary,
  .contact__submit {
    transition:
      background 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      color 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      box-shadow 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .btn--primary:hover,
  .contact__submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  .btn--primary:active,
  .contact__submit:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  }

  .header__brand:hover .header__brand-icon {
    transform: scale(1.02);
  }

  .header__brand-icon {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .footer__brand-link:hover,
  .footer__partner-link:hover {
    opacity: 0.82;
  }

  .footer__brand-link,
  .footer__partner-link {
    transition: opacity 0.3s ease;
  }

  .footer__social-link {
    transition:
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      background 0.3s ease,
      border-color 0.3s ease,
      color 0.3s ease;
  }

  .footer__social-link:hover {
    transform: translateY(-3px);
  }

  .footer__legal-nav a {
    transition: color 0.25s ease, opacity 0.25s ease;
  }

  .contact__item {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .contact__item:hover {
    transform: translateX(4px);
  }

  .contact__icon {
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.3s ease,
      background 0.3s ease;
  }

  .contact__item:hover .contact__icon {
    transform: scale(1.08);
    border-color: #0a0a0a;
    background: #fafafa;
  }

  .contact__item-body a {
    transition: color 0.25s ease;
  }

  .services__icon-circle {
    transition:
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.3s ease,
      background 0.3s ease;
  }

  .services__icon-item:hover .services__icon-circle {
    transform: scale(1.07);
    border-color: #0a0a0a;
    background: #fafafa;
  }

  .services__icon-label {
    transition: color 0.25s ease;
  }

  .services__icon-item:hover .services__icon-label {
    color: #0a0a0a;
  }

  .projects__highlight {
    transition: background 0.35s ease;
  }

  .projects__highlight:hover {
    background: #fafafa;
  }

  .projects__highlight-num {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .projects__highlight:hover .projects__highlight-num {
    transform: scale(1.04);
  }

  .projects__filter {
    transition:
      background 0.3s ease,
      border-color 0.3s ease,
      color 0.3s ease,
      transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .projects__filter:hover:not(.active) {
    transform: translateY(-1px);
  }

  .clients__item {
    transition:
      background 0.35s ease,
      transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  }

  .clients__item:hover {
    background: var(--surface-soft, #fafafa);
  }

  .clients__item.has-logo:hover .clients__img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.04);
  }

  .clients__item:not(.has-logo):hover .clients__name {
    color: #0a0a0a;
  }

  .gallery__item:hover {
    border-color: var(--ink, #0a0a0a);
    box-shadow: var(--shadow-soft, 0 8px 24px rgba(0, 0, 0, 0.1));
    transform: translateY(-3px);
  }

  .gallery__item:hover .gallery__figure img {
    transform: scale(1.05);
    filter: grayscale(0%);
  }

  .gallery__item:hover .gallery__caption {
    opacity: 1;
  }

  .projects__dot {
    transition:
      transform 0.3s ease,
      background 0.3s ease,
      border-color 0.3s ease;
  }

  .projects__dot:hover:not(.is-active) {
    transform: scale(1.15);
  }
}

/* --- Touch devices: no hover lift --- */
@media (hover: none), (pointer: coarse) {
  .btn--primary:hover,
  .contact__submit:hover,
  .services__icon-item:hover .services__icon-circle,
  .contact__item:hover,
  .projects__filter:hover:not(.active),
  .gallery__item:hover,
  .footer__social-link:hover {
    transform: none;
  }

  .gallery__item:hover .gallery__figure img {
    transform: none;
  }

  .gallery__caption {
    opacity: 1;
  }

  .gallery__figure img {
    filter: grayscale(35%);
  }

  .btn--primary:active,
  .contact__submit:active {
    opacity: 0.88;
  }
}

/* --- Focus accessibility --- */
:focus-visible {
  outline: 2px solid #0a0a0a;
  outline-offset: 3px;
}

.footer :focus-visible {
  outline-color: #ffffff;
}

/* --- Hero entrance --- */
.hero.hero--static .hero-slide__inner {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero.hero--static.is-ready .hero-slide__video {
  transition: transform 8s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) and (pointer: fine) {
  .hero.hero--static.is-ready:hover .hero-slide__video {
    transform: scale(1.02);
  }
}

/* --- Section rules draw prep --- */
.about__rule,
.services__rule {
  transform-origin: left center;
}

/* --- Contact form focus lift --- */
.contact__field input,
.contact__field textarea {
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.contact__field input:focus,
.contact__field textarea:focus {
  transform: translateY(-1px);
}

.contact__form-note.success {
  color: #1a6b3c;
}

.contact__form-note.error {
  color: #b42318;
}

/* --- Projects toolbar mobile scroll --- */
.projects__filters {
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.projects__filters::-webkit-scrollbar {
  display: none;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* --- Projects toolbar scroll (tablet / small desktop) --- */
@media (max-width: 1280px) {
  .projects__toolbar {
    overflow-x: auto;
    margin-inline: calc(-1 * max(1.125rem, env(safe-area-inset-left)));
    padding-inline: max(1.125rem, env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .projects__toolbar::-webkit-scrollbar {
    display: none;
  }

  .projects__filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
    padding-bottom: 0.25rem;
  }

  .projects__filter {
    flex-shrink: 0;
  }
}

@media (max-width: 991.98px) {
  .about.section,
  .services.section {
    padding-block: 0;
  }

  .projects.section,
  .contact.section {
    padding-block: clamp(3rem, 8vw, 4.5rem);
  }

  .gallery.section,
  .clients.section {
    padding-block: clamp(3rem, 8vw, 4.5rem);
  }

  .about__intro {
    padding-inline: max(1.125rem, 5%);
  }

  .services__intro {
    padding-inline: max(1.125rem, 5%);
  }

  .about__headline {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
  }

  .services__icons {
    margin-top: 1.5rem;
  }

  .projects__toolbar {
    overflow-x: auto;
    margin-inline: calc(-1 * max(1.125rem, env(safe-area-inset-left)));
    padding-inline: max(1.125rem, env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch;
  }

  .projects__filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    width: max-content;
    min-width: 100%;
    padding-bottom: 0.25rem;
  }

  .projects__filter {
    flex-shrink: 0;
  }

  .contact__layout {
    gap: 1.25rem;
  }

  .contact__form {
    grid-template-columns: 1fr;
  }

  .contact__visual figcaption {
    font-size: 0.8125rem;
  }
}

@media (max-width: 767.98px) {
  .section__label,
  .about__eyebrow,
  .services__eyebrow {
    font-size: 0.875rem;
    letter-spacing: 0.08em;
  }

  .about__intro-grid,
  .services__intro-grid {
    gap: 2rem;
  }

  .services__icon-label {
    font-size: 0.75rem;
    max-width: 9rem;
  }

  .projects__slide-title {
    font-size: clamp(1.35rem, 5vw, 1.75rem);
  }

  .projects__slider-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .projects__thumbs {
    gap: 0.5rem;
  }
}

@media (max-width: 575.98px) {
  .about__intro {
    padding-top: clamp(2.5rem, 8vw, 3.5rem);
    padding-bottom: clamp(1.5rem, 5vw, 2rem);
  }

  .services__intro {
    padding-top: clamp(1.5rem, 5vw, 2rem);
    padding-bottom: clamp(2.5rem, 8vw, 3.5rem);
  }

  .services__icon-circle {
    width: 3.5rem;
    height: 3.5rem;
  }

  .services__icon-circle svg {
    width: 3.75rem;
    height: 3rem;
  }

  .footer__brands {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .footer__brand-divider {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero.hero--static.is-ready:hover .hero-slide__video {
    transform: none;
  }

  .contact__field input:focus,
  .contact__field textarea:focus {
    transform: none;
  }
}