/* =========================================================
   OPIX MOTION V1
   Movimento discreto e tecnológico.
   Escopo: páginas que carregam motion.js
   ========================================================= */


/* ---------------------------------------------------------
   Reveal no scroll
   --------------------------------------------------------- */

.motion-opix .motion-reveal {
  opacity: 0;

  transform:
    translate3d(0, 24px, 0)
    scale(.99);

  transition:
    opacity .62s ease,
    transform .62s cubic-bezier(.2,.75,.25,1);

  transition-delay:
    var(--motion-delay, 0ms);

  will-change:
    opacity,
    transform;
}


.motion-opix .motion-reveal.is-visible {
  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    scale(1);
}


/* ---------------------------------------------------------
   Cards
   --------------------------------------------------------- */

.motion-opix .card,
.motion-opix .plan-card {
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}


@media (hover:hover) {

  .motion-opix .card:hover,
  .motion-opix .plan-card:hover {
    transform:
      translateY(-5px);

    box-shadow:
      0 18px 42px
      rgba(64, 10, 86, .11);
  }

}


/* ---------------------------------------------------------
   Botões
   --------------------------------------------------------- */

.motion-opix .btn {
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    filter .2s ease,
    background-color .2s ease,
    border-color .2s ease;
}


@media (hover:hover) {

  .motion-opix .btn:hover {
    transform:
      translateY(-2px);
  }


  .motion-opix .btn-primary:hover {
    box-shadow:
      0 12px 28px
      rgba(157, 0, 198, .24);

    filter:
      brightness(1.035);
  }

}


.motion-opix .btn:active {
  transform:
    translateY(0)
    scale(.985);
}


/* ---------------------------------------------------------
   Plano em destaque
   Não pisca.
   Apenas respiração/glow discreto.
   --------------------------------------------------------- */

.motion-opix .plan-card.featured {
  position: relative;

  animation:
    opixFeaturedGlow
    4.8s
    ease-in-out
    infinite;
}


@keyframes opixFeaturedGlow {

  0%,
  100% {
    box-shadow:
      0 12px 34px
      rgba(98, 17, 128, .10);
  }

  50% {
    box-shadow:
      0 16px 44px
      rgba(168, 0, 215, .22);
  }

}


/* ---------------------------------------------------------
   Brilho passando suavemente pelo plano destacado
   --------------------------------------------------------- */

.motion-opix .plan-card.featured {
  overflow: hidden;
}


.motion-opix .plan-card.featured::after {
  content: "";

  position: absolute;

  top: -80%;
  left: -65%;

  width: 32%;
  height: 260%;

  pointer-events: none;

  opacity: 0;

  transform:
    rotate(18deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.24),
      transparent
    );

  animation:
    opixPlanShine
    6.5s
    ease-in-out
    infinite;
}


@keyframes opixPlanShine {

  0%,
  62% {
    left: -65%;
    opacity: 0;
  }

  68% {
    opacity: .65;
  }

  82% {
    left: 130%;
    opacity: 0;
  }

  100% {
    left: 130%;
    opacity: 0;
  }

}


/* ---------------------------------------------------------
   Hero com movimento ambiental discreto
   --------------------------------------------------------- */

.motion-opix .page-hero,
.motion-opix .hero {
  position: relative;
  overflow: hidden;
}


.motion-opix .page-hero::after,
.motion-opix .hero::after {
  content: "";

  position: absolute;

  width: 360px;
  height: 360px;

  right: -130px;
  top: -150px;

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(185, 0, 225, .12) 0%,
      rgba(185, 0, 225, .04) 42%,
      transparent 70%
    );

  animation:
    opixAmbientFloat
    11s
    ease-in-out
    infinite alternate;
}


.motion-opix .page-hero > *,
.motion-opix .hero > * {
  position: relative;
  z-index: 1;
}


@keyframes opixAmbientFloat {

  from {
    transform:
      translate3d(0, 0, 0)
      scale(1);
  }

  to {
    transform:
      translate3d(-45px, 35px, 0)
      scale(1.12);
  }

}


/* ---------------------------------------------------------
   Imagens
   --------------------------------------------------------- */

.motion-opix img {
  transition:
    transform .45s ease;
}


@media (hover:hover) {

  .motion-opix .visual-panel:hover img,
  .motion-opix .card:hover img {
    transform:
      scale(1.018);
  }

}


/* ---------------------------------------------------------
   Acessibilidade
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

  .motion-opix *,
  .motion-opix *::before,
  .motion-opix *::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    scroll-behavior:
      auto !important;

    transition-duration:
      .01ms !important;
  }


  .motion-opix .motion-reveal {
    opacity: 1 !important;

    transform:
      none !important;
  }

}

/* OPIX MOTION V2 */

/* =========================================================
   REVEAL MAIS PERCEPTÍVEL
   ========================================================= */

.motion-opix .motion-reveal {
  opacity: 0;

  transform:
    translate3d(0, 38px, 0)
    scale(.985);

  transition:
    opacity 1.05s ease,
    transform 1.12s cubic-bezier(.16, 1, .3, 1);

  transition-delay:
    var(--motion-delay, 0ms);

  will-change:
    opacity,
    transform;
}


.motion-opix .motion-reveal.is-visible {
  opacity: 1;

  transform:
    translate3d(0, 0, 0)
    scale(1);
}


/*
 * Hero entra um pouco mais devagar.
 */

.motion-opix .hero .motion-reveal {
  transition-duration:
    1.20s;
}


/* =========================================================
   GRID DOS PLANOS
   Desktop 4 colunas
   Tablet 2 colunas
   Mobile 1 coluna
   ========================================================= */

.opix-plan-grid-v2 {
  width: 100% !important;
  align-items: stretch !important;
}


@media (min-width: 1100px) {

  .opix-plan-grid-v2 {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap: 20px !important;
  }


  .opix-plan-grid-v2 > .plan-card {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    margin:
      0 !important;
  }

}


@media
  (min-width: 700px)
  and
  (max-width: 1099px) {

  .opix-plan-grid-v2 {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 20px !important;
  }


  .opix-plan-grid-v2 > .plan-card {
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;

    margin:
      0 !important;
  }

}


@media (max-width: 699px) {

  .opix-plan-grid-v2 {
    display: grid !important;

    grid-template-columns:
      1fr !important;

    gap: 18px !important;
  }

}


/* =========================================================
   PLANO EM DESTAQUE V2
   Sem cortar selo.
   Sem brilho atravessando conteúdo.
   ========================================================= */

.motion-opix .plan-card.featured {
  position: relative;

  z-index: 3;

  overflow:
    visible !important;

  border:
    2px solid
    rgba(173, 26, 235, .88) !important;

  animation:
    opixFeaturedGlowV2
    4.6s
    ease-in-out
    infinite !important;
}


/*
 * Remove o shine antigo que poderia passar
 * sobre o selo/conteúdo.
 */

.motion-opix .plan-card.featured::after {
  display:
    none !important;
}


@keyframes opixFeaturedGlowV2 {

  0%,
  100% {
    box-shadow:
      0 14px 36px
      rgba(113, 22, 148, .13),
      0 0 0 0
      rgba(188, 35, 239, 0);
  }

  50% {
    box-shadow:
      0 20px 46px
      rgba(122, 22, 165, .22),
      0 0 0 4px
      rgba(188, 35, 239, .075);
  }

}


/*
 * Hover do plano destaque.
 */

@media (hover:hover) {

  .motion-opix
  .plan-card.featured:hover {
    box-shadow:
      0 24px 52px
      rgba(116, 16, 159, .27),
      0 0 0 4px
      rgba(188, 35, 239, .09);
  }

}


/* =========================================================
   FIBRA / ÓRBITA DA HOME
   Anima elementos decorativos existentes.
   ========================================================= */

.motion-opix
.hero.opix-hero-motion-v2::before,

.motion-opix
.hero.opix-hero-motion-v2
.hero-orbit,

.motion-opix
.hero.opix-hero-motion-v2
.hero-ring,

.motion-opix
.hero.opix-hero-motion-v2
.hero-rings,

.motion-opix
.hero.opix-hero-motion-v2
.hero-lines,

.motion-opix
.hero.opix-hero-motion-v2
[class*="orbit"],

.motion-opix
.hero.opix-hero-motion-v2
[class*="fiber"] {
  animation:
    opixFiberOrbitV2
    9s
    ease-in-out
    infinite
    alternate;

  transform-origin:
    70% 50%;

  will-change:
    transform,
    opacity;
}


@keyframes opixFiberOrbitV2 {

  0% {
    transform:
      translate3d(0, 0, 0)
      rotate(0deg)
      scale(1);

    opacity:
      .76;
  }

  50% {
    transform:
      translate3d(-16px, 9px, 0)
      rotate(.7deg)
      scale(1.015);

    opacity:
      1;
  }

  100% {
    transform:
      translate3d(12px, -6px, 0)
      rotate(-.5deg)
      scale(1.008);

    opacity:
      .84;
  }

}


/* =========================================================
   GLOW AMBIENTAL DA HOME MAIS VIVO
   ========================================================= */

.motion-opix
.hero.opix-hero-motion-v2::after {
  animation:
    opixAmbientFloatV2
    9s
    ease-in-out
    infinite
    alternate !important;
}


@keyframes opixAmbientFloatV2 {

  0% {
    transform:
      translate3d(0, 0, 0)
      scale(1);

    opacity:
      .65;
  }

  50% {
    transform:
      translate3d(-34px, 24px, 0)
      scale(1.12);

    opacity:
      .95;
  }

  100% {
    transform:
      translate3d(-58px, 38px, 0)
      scale(1.18);

    opacity:
      .72;
  }

}


/* =========================================================
   BOTÕES V2
   ========================================================= */

@media (hover:hover) {

  .motion-opix .btn:hover {
    transform:
      translateY(-3px);
  }


  .motion-opix .btn-primary:hover {
    box-shadow:
      0 14px 30px
      rgba(151, 0, 201, .26);
  }

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .motion-opix
  .plan-card.featured,

  .motion-opix
  .hero.opix-hero-motion-v2::before,

  .motion-opix
  .hero.opix-hero-motion-v2::after,

  .motion-opix
  .hero.opix-hero-motion-v2
  [class*="orbit"],

  .motion-opix
  .hero.opix-hero-motion-v2
  [class*="fiber"] {
    animation:
      none !important;
  }

}


/* =========================================================
   OPIX MOTION V3
   Correção das abas + destaque + órbita real da Home
   ========================================================= */


/* =========================================================
   PLANOS — CORREÇÃO PRINCIPAL

   O CSS original controla as abas por:
   .tab-panel        = display:none
   .tab-panel.active = display:grid

   A V2 não pode sobrescrever painéis inativos.
   ========================================================= */

.motion-opix .tab-panel:not(.active) {
  display: none !important;
}


.motion-opix .tab-panel.active {
  display: grid !important;
}


/*
 * Impede qualquer regra antiga da V2
 * de manter painel inativo visível.
 */

.motion-opix
.tab-panel.opix-plan-grid-v2:not(.active) {
  display: none !important;
}


/* =========================================================
   GRID V3
   ========================================================= */

.motion-opix
.tab-panel.active.opix-plan-grid-v3 {
  width: 100%;

  align-items: stretch;

  gap: 20px;
}


/*
 * Desktop:
 * painéis com 4 planos ficam 4 em uma única linha.
 */

@media (min-width: 1100px) {

  .motion-opix
  .tab-panel.active.opix-plan-grid-v3 {
    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }


  /*
   * Caso uma categoria tenha somente 3 planos.
   */

  .motion-opix
  .tab-panel.active.opix-plan-grid-v3
  [data-unused] {
    display: initial;
  }


  .motion-opix
  .tab-panel.active.opix-plan-grid-v3[data-opix-plan-count="3"] {
    grid-template-columns:
      repeat(3, minmax(0, 1fr)) !important;

    max-width: 900px;

    margin-left: auto;
    margin-right: auto;
  }


  /*
   * Globoplay, por exemplo, pode possuir apenas 2 cards.
   * Centralizamos em vez de deixar dois cards pequenos
   * ocupando metade de um grid de quatro.
   */

  .motion-opix
  .tab-panel.active.opix-plan-grid-v3[data-opix-plan-count="2"] {
    grid-template-columns:
      repeat(2, minmax(0, 330px)) !important;

    justify-content: center;

    max-width: 720px;

    margin-left: auto;
    margin-right: auto;
  }

}


/*
 * Tablet: 2 x 2.
 */

@media
  (min-width: 700px)
  and
  (max-width: 1099px) {

  .motion-opix
  .tab-panel.active.opix-plan-grid-v3 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


/*
 * Celular: 1 por linha.
 */

@media (max-width: 699px) {

  .motion-opix
  .tab-panel.active.opix-plan-grid-v3 {
    grid-template-columns:
      1fr !important;
  }

}


/* =========================================================
   DESTAQUE DO PLANO
   ========================================================= */

.motion-opix
.tab-panel.active
.plan-card.featured {

  position: relative;

  z-index: 10;

  overflow: visible !important;

  border:
    2px solid
    #b51bea !important;

  animation:
    opixFeaturedPulseV3
    3.8s
    ease-in-out
    infinite !important;
}


/*
 * O reveal anterior sobrescrevia o translateY
 * original do card featured.
 */

.motion-opix
.tab-panel.active
.plan-card.featured.motion-reveal.is-visible {

  transform:
    translateY(-10px) !important;
}


/*
 * Tag "Mais escolhido" agora fica realmente
 * visível acima do card.
 */

.motion-opix
.tab-panel.active
.plan-card.featured
.plan-tag {

  position: absolute !important;

  top: -16px !important;
  right: 18px !important;

  z-index: 30;

  padding:
    8px 14px !important;

  border-radius:
    999px !important;

  color:
    #ffffff !important;

  background:
    linear-gradient(
      135deg,
      #c026f2,
      #7d0db3
    ) !important;

  border:
    1px solid
    rgba(255,255,255,.55);

  box-shadow:
    0 8px 24px
    rgba(151, 18, 204, .32);

  font-size:
    .72rem !important;

  font-weight:
    900 !important;

  letter-spacing:
    .02em;

  white-space:
    nowrap;
}


/*
 * Pequena linha de luz superior.
 */

.motion-opix
.tab-panel.active
.plan-card.featured::before {

  content: "";

  position: absolute;

  left: 22px;
  right: 22px;
  top: -2px;

  height: 3px;

  border-radius:
    999px;

  pointer-events:
    none;

  background:
    linear-gradient(
      90deg,
      transparent,
      #dd5cff,
      #a721e0,
      #dd5cff,
      transparent
    );

  box-shadow:
    0 0 14px
    rgba(202, 48, 245, .6);
}


@keyframes opixFeaturedPulseV3 {

  0%,
  100% {

    box-shadow:
      0 16px 38px
      rgba(98, 20, 132, .13),
      0 0 0 0
      rgba(185, 27, 234, 0);

  }


  50% {

    box-shadow:
      0 24px 54px
      rgba(114, 20, 158, .25),
      0 0 0 5px
      rgba(185, 27, 234, .08);

  }

}


@media (hover:hover) {

  .motion-opix
  .tab-panel.active
  .plan-card.featured.motion-reveal.is-visible:hover {

    transform:
      translateY(-14px)
      scale(1.01) !important;

  }

}


/* =========================================================
   HOME — ÓRBITA/FIBRA REAL

   O elemento original é .hero::before.
   Agora animamos exatamente ele.
   ========================================================= */

.motion-opix
.hero.opix-hero-orbit-v3::before {

  animation:
    opixHeroOrbitV3
    6.5s
    ease-in-out
    infinite !important;

  transform-origin:
    center center;

  will-change:
    transform,
    opacity,
    filter,
    border-color;

}


@keyframes opixHeroOrbitV3 {

  0% {

    transform:
      translate3d(-32px, 9px, 0)
      rotate(-15deg)
      scale(.97);

    opacity:
      .55;

    border-color:
      rgba(225,100,255,.35);

    filter:
      drop-shadow(
        0 0 10px
        rgba(221,65,255,.40)
      );

  }


  45% {

    transform:
      translate3d(26px, -13px, 0)
      rotate(-9deg)
      scale(1.035);

    opacity:
      1;

    border-color:
      rgba(240,120,255,.72);

    filter:
      drop-shadow(
        0 0 28px
        rgba(221,65,255,.88)
      );

  }


  72% {

    transform:
      translate3d(42px, 6px, 0)
      rotate(-11deg)
      scale(1.015);

    opacity:
      .82;

    border-color:
      rgba(226,95,255,.56);

    filter:
      drop-shadow(
        0 0 20px
        rgba(221,65,255,.68)
      );

  }


  100% {

    transform:
      translate3d(-12px, 15px, 0)
      rotate(-14deg)
      scale(.99);

    opacity:
      .62;

    border-color:
      rgba(225,100,255,.42);

    filter:
      drop-shadow(
        0 0 13px
        rgba(221,65,255,.52)
      );

  }

}


/* =========================================================
   ACESSIBILIDADE
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .motion-opix
  .hero.opix-hero-orbit-v3::before,

  .motion-opix
  .tab-panel.active
  .plan-card.featured {

    animation:
      none !important;

  }


  .motion-opix
  .tab-panel.active
  .plan-card.featured.motion-reveal.is-visible {

    transform:
      none !important;

  }

}