/* Values Section - Cards com Flip */
.values {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* Background azul escuro limpo */
  background: #0a1040;
}

/* Linha de luz lateral esquerda */
.values::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 4%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(42, 80, 176, 0.08) 0%,
    rgba(42, 80, 176, 0.05) 40%,
    rgba(42, 80, 176, 0.05) 70%,
    rgba(42, 80, 176, 0) 100%
  );
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 1;
  filter: blur(0px);
}

/* Linha de luz lateral direita */
.values::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 4%;
  height: 100%;
  background: linear-gradient(
    to left,
    rgba(42, 80, 176, 0.08) 0%,
    rgba(42, 80, 176, 0.05) 40%,
    rgba(42, 80, 176, 0.05) 70%,
    rgba(42, 80, 176, 0) 100%
  );
  opacity: 0;
  transition: opacity 1.5s ease-in-out;
  z-index: 1;
  filter: blur(0px);
}

/* Quando a seção está em vista, mostra a linha de luz com animação */
.values.in-view::before {
  opacity: 1;
  background: linear-gradient(
    to right,
    #0f1f50 0%,
    #1a2860 20%,
    #253070 40%,
    #303880 60%,
    #3b4090 80%,
    #4648a0 100%
  );
  transition: opacity 1.5s ease-in-out, background 3s ease-in-out;
  filter: blur(8px);
  box-shadow: 
    /* Núcleo do feixe - muito intenso */ 0 0 80px
      rgba(74, 112, 208, 0.8),
    0 0 150px rgba(106, 128, 216, 0.6), 0 0 220px rgba(138, 149, 224, 0.5),
    /* Expansão principal - massiva */ 0 0 400px rgba(74, 112, 208, 0.4),
    0 0 650px rgba(106, 128, 216, 0.3), 0 0 900px rgba(138, 149, 224, 0.2),
    /* Halo gigantesco */ 0 0 1200px rgba(42, 80, 176, 0.08),
    0 0 1600px rgba(42, 80, 176, 0.06), 0 0 2000px rgba(26, 48, 128, 0.08),
    0 0 2500px rgba(26, 48, 128, 0.05),
    /* Dispersão lateral máxima */ -100px 0 400px rgba(74, 112, 208, 0.15),
    100px 0 400px rgba(74, 112, 208, 0.15),
    -200px 0 650px rgba(106, 128, 216, 0.12),
    200px 0 650px rgba(106, 128, 216, 0.12),
    -300px 0 900px rgba(138, 149, 224, 0.08),
    300px 0 900px rgba(138, 149, 224, 0.08),
    -400px 0 1200px rgba(42, 80, 176, 0.05),
    400px 0 1200px rgba(42, 80, 176, 0.05);
}

/* Quando a seção está em vista, mostra a linha de luz direita com animação */
.values.in-view::after {
  opacity: 1;
  background: linear-gradient(
    to left,
    #0f1f50 0%,
    #1a2860 20%,
    #253070 40%,
    #303880 60%,
    #3b4090 80%,
    #4648a0 100%
  );
  transition: opacity 1.5s ease-in-out, background 3s ease-in-out;
  filter: blur(7px);
  box-shadow: 
    /* Núcleo do feixe - muito intenso */ 0 0 80px
      rgba(74, 112, 208, 0.8),
    0 0 150px rgba(106, 128, 216, 0.6), 0 0 220px rgba(138, 149, 224, 0.5),
    /* Expansão principal - massiva */ 0 0 400px rgba(74, 112, 208, 0.4),
    0 0 650px rgba(106, 128, 216, 0.3), 0 0 900px rgba(138, 149, 224, 0.2),
    /* Halo gigantesco */ 0 0 1200px rgba(42, 80, 176, 0.08),
    0 0 1600px rgba(42, 80, 176, 0.06), 0 0 2000px rgba(26, 48, 128, 0.08),
    0 0 2500px rgba(26, 48, 128, 0.05),
    /* Dispersão lateral máxima */ -100px 0 400px rgba(74, 112, 208, 0.15),
    100px 0 400px rgba(74, 112, 208, 0.15),
    -200px 0 650px rgba(106, 128, 216, 0.12),
    200px 0 650px rgba(106, 128, 216, 0.12),
    -300px 0 900px rgba(138, 149, 224, 0.08),
    -300px 0 900px rgba(138, 149, 224, 0.08),
    300px 0 900px rgba(138, 149, 224, 0.08),
    -400px 0 1200px rgba(42, 80, 176, 0.05),
    400px 0 1200px rgba(42, 80, 176, 0.05);
}

.values .container {
  position: relative;
  z-index: 2;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Grid de Cards */
.grid-card {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-2xl);
  width: 100%;
  max-width: 1650px;
  margin: 0 auto;
  justify-items: center;
  align-items: center;
}

/* Card Styles */
.card {
  background: transparent;
  perspective: 1000px;
  width: 100%;
  max-width: 450px;
  height: 625px;
  cursor: pointer;
  margin: 0 auto;
}

.card-flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform 1.2s;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
}

.card-flip.flipped .card-flip-inner {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

.card-front,
.card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg)var(--spacing-2xl);
  box-shadow: var(--shadow-lg);
}

.card-front {
  background: rgba(17, 22, 77, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.card-back {
  background: rgba(17, 22, 77, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
}

.card-front h1 {
  font-weight: var(--font-weight-benzin-bold);
  color: white;
  text-transform: uppercase;
}

.card-front img {
  max-width: 200px;
  max-height: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.card-back p {
  color: white;
  line-height: 1.5;
  font-family: var(--font-family-body);
  font-size: var(--font-md);
}

/* Hover Effects */
@media (min-width: 810px) {
  .card:hover .card-flip-inner {
    transform: rotateY(180deg) scale(1.02);
    -webkit-transform: rotateY(180deg) scale(1.02);
    -moz-transform: rotateY(180deg) scale(1.02);
  }

  .card-flip.flipped:hover .card-flip-inner {
    transform: rotateY(180deg) scale(1.02);
    -webkit-transform: rotateY(180deg) scale(1.02);
    -moz-transform: rotateY(180deg) scale(1.02);
  }
}

@media (max-width: 810px) {
  .card:hover .card-flip-inner {
    transform: scale(1.02);
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
  }

  .card-flip.flipped:hover .card-flip-inner {
    transform: rotateY(180deg) scale(1.02);
    -webkit-transform: rotateY(180deg) scale(1.02);
    -moz-transform: rotateY(180deg) scale(1.02);
  }
}

/* Firefox-specific fixes */
@-moz-document url-prefix() {
  .card {
    perspective: 1200px;
  }

  .card-flip-inner {
    -moz-transform-style: preserve-3d;
    -moz-backface-visibility: hidden;
  }

  .card-front,
  .card-back {
    -moz-backface-visibility: hidden;
  }

  .card-back {
    -moz-transform: rotateY(180deg);
  }

  .card-flip.flipped .card-flip-inner {
    -moz-transform: rotateY(180deg);
  }
}

/* Responsive Design */
@media (max-width: 1024px) {
  .grid-card {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-lg);
    justify-items: center;
  }
}

@media (max-width: 810px) {

  .grid-card {
    grid-template-columns: 1fr;
    gap: var(--spacing-2xl);
    max-width: 450px;
    justify-items: center;
  }

  .card {
    height: 450px;
    max-width: 100%;
    cursor: default; /* Remove cursor pointer no mobile */
  }
  
  /* Transição mais suave para mobile */
  .card-flip-inner {
    transition: transform 1.5s ease-in-out;
  }

  .card-front h1 {
    letter-spacing: 1px;
  }

  .card-back p {
    font-size: var(--font-sm);
  }

  .card-front img {
    max-width: 150px;
    max-height: 100px;
  }

  .card-front, .card-back {
    padding: var(--spacing-sm) var(--spacing-2xl);
  }
}

@media (max-width: 485px) {
  .values .container {
    padding: 3rem var(--spacing-sm);
  }

  .card {
    max-width: 100%;
  }

  .card-front img {
    max-width: 120px;
    max-height: 80px;
  }

  .card-front, .card-back {
    padding: var(--spacing-sm) var(--spacing-2xl);
  }

  .card-back p {
    font-size: var(--font-xs);
  }
}

/* Melhorias de compatibilidade cross-browser */
.card {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  perspective: 1000px;
}

.card-flip-inner {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1.2s;
  -moz-transition: -moz-transform 1.2s;
  transition: transform 1.2s;
}

.card-front,
.card-back {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.card-back {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.card-flip.flipped .card-flip-inner {
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

/* Desktop - Volta com vídeo de background */
@media (min-width: 769px) {
  .values {
    background: #0a1040;
    position: relative;
  }

  .values::before,
  .values::after {
    display: none !important;
  }

  /* Container para vídeo de background */
  .values-video-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
  }

  .values-video-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    pointer-events: none;
  }

  .values .container {
    position: relative;
    z-index: 2;
  }

  /* Overlay escuro para melhor contraste no desktop */
  .values-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(10, 16, 64, 0.4);
    z-index: 1;
  }
}

/* Mobile - Mantém os feixes de luz mais intensos */
@media (max-width: 768px) {
  .values {
    background: #0a1040;
  }

  /* Feixes de luz ficam mais visíveis no mobile */
  .values::before,
  .values::after {
    display: block;
    width: 4%; /* Mais largos no mobile */
  }

  /* Feixes mais intensos quando em vista no mobile */
  .values.in-view::before {
    opacity: 1;
    width: 4%;
    background: linear-gradient(
      to right,
      #1a2860 0%,
      #253070 30%,
      #303880 60%,
      #4648a0 100%
    );
    filter: blur(6px);
    box-shadow: 
      /* Núcleo mais intenso para mobile */ 0 0 60px
        rgba(74, 112, 208, 0.9),
      0 0 120px rgba(106, 128, 216, 0.7), 0 0 180px rgba(138, 149, 224, 0.6),
      /* Expansão adaptada para mobile */ 0 0 300px rgba(74, 112, 208, 0.5),
      0 0 450px rgba(106, 128, 216, 0.4), 0 0 600px rgba(138, 149, 224, 0.3),
      /* Halo para mobile */ 0 0 800px rgba(42, 80, 176, 0.1),
      0 0 1000px rgba(42, 80, 176, 0.08),
      /* Dispersão lateral */ -80px 0 300px rgba(74, 112, 208, 0.3),
      80px 0 300px rgba(74, 112, 208, 0.3),
      -150px 0 450px rgba(106, 128, 216, 0.25),
      150px 0 450px rgba(106, 128, 216, 0.25);
  }

  .values.in-view::after {
    opacity: 1;
    width: 4%;
    background: linear-gradient(
      to left,
      #1a2860 0%,
      #253070 30%,
      #303880 60%,
      #4648a0 100%
    );
    filter: blur(6px);
    box-shadow: 
      /* Núcleo mais intenso para mobile */ 0 0 60px
        rgba(74, 112, 208, 0.9),
      0 0 120px rgba(106, 128, 216, 0.7), 0 0 180px rgba(138, 149, 224, 0.6),
      /* Expansão adaptada para mobile */ 0 0 300px rgba(74, 112, 208, 0.5),
      0 0 450px rgba(106, 128, 216, 0.4), 0 0 600px rgba(138, 149, 224, 0.3),
      /* Halo para mobile */ 0 0 800px rgba(42, 80, 176, 0.1),
      0 0 1000px rgba(42, 80, 176, 0.08),
      /* Dispersão lateral */ -80px 0 300px rgba(74, 112, 208, 0.3),
      80px 0 300px rgba(74, 112, 208, 0.3),
      -150px 0 450px rgba(106, 128, 216, 0.25),
      150px 0 450px rgba(106, 128, 216, 0.25);
  }

  /* Esconde elementos de vídeo no mobile */
  .values-video-bg,
  .values-overlay {
    display: none;
  }
}