@layer library, reset, base, demo;
@import 'https://unpkg.com/open-props@2.0.0-beta.5' layer(library);
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300..800&display=swap');
@import 'https://www.unpkg.com/layout-craft@0.1.1/dist/utilities.css' layer(design.utilities);

@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  :where(:not(dialog)) {
    margin: 0;
  }
}

@layer base {
  html {
    overflow-x: visible;
    --nav-block-size: 74px;
    --brand-gradient: linear-gradient(227deg, #8B4513 0%, #D2691E 50%, #CD853F 100%);
    --brand-gradient-2: linear-gradient(227deg, #654321 0%, #8B4513 100%);
    --brand-gradient-3: linear-gradient(227deg, #D2691E 0%, #DAA520 100%);
    --brand-gradient-4: linear-gradient(227deg, #8B0000 0%, #DC143C 100%);
    --dark-bg: #1a1410;
    --dark-bg-2: #2a1f1a;

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  body {
    font-family: 'Inter', sans-serif;
    min-block-size: 100dvb;
    background-color: var(--dark-bg);
    color: #f5f5f5;
    overflow-x: visible;
  }
}

@layer demo {
  .navbar {
    min-block-size: var(--nav-block-size);
    display: grid;
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    background-color: rgba(26, 20, 16, 0.95);
    backdrop-filter: blur(10px);
    z-index: var(--layer-3);
    grid-template-columns: auto 1fr auto; /* Logo à esquerda, espaço no meio, botão à direita */
    align-items: center;
    padding-block: var(--size-3);
    padding-top: calc(var(--size-3) + env(safe-area-inset-top, 0px));
    padding-inline: var(--size-5);
    border-bottom: 1px solid rgba(139, 69, 19, 0.3);

    @media (width >=600px) {
      padding-inline: 6dvi;
    }
  }

  .logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease;

    &:hover {
      transform: scale(1.05);
    }
  }

  .logo-img {
    height: 38px;
    width: auto;
    display: block;
    object-fit: contain;

    @media (width < 768px) {
      height: 32px;
    }
  }

  .nav-cta-btn {
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    inline-size: max-content;
    white-space: nowrap;
    text-decoration: none;
    padding-block: var(--size-2);
    padding-inline: var(--size-5);
    border: var(--border-size-2) solid transparent;
    color: #f5f5f5;
    position: relative;
    isolation: isolate;
    transition: all 0.3s ease;

    background: linear-gradient(rgba(26, 20, 16, 1), rgba(26, 20, 16, 1)) padding-box,
      var(--brand-gradient) border-box;
    border-radius: var(--radius-6);
    overflow: hidden;

    &::before {
      content: '';
      display: block;
      position: absolute;
      inset: 0;
      background: var(--brand-gradient);
      mix-blend-mode: screen;
      opacity: 0;
      transition: opacity 0.3s ease;
    }

    &:hover {
      color: white;
      transform: translateY(-2px);
      box-shadow: 0 10px 30px rgba(139, 69, 19, 0.3);

      &::before {
        opacity: 1;
        background: var(--brand-gradient) padding-box,
          var(--brand-gradient) border-box;
        background-repeat: no-repeat;
        background-size: contain;
        mix-blend-mode: normal;
        z-index: -1;
      }
    }
  }

  /* Hero Section with Scroll-Driven Images */
  .Hero {
    background-color: var(--dark-bg);
    position: relative;
    min-height: 100vh;
    display: grid;
    overflow: visible;
    /* Espaço para a navbar em todos os viewports - evita título cortado no topo */
    padding-top: var(--nav-block-size);
    /* Garante que a paginação fique dentro desta seção */
    padding-bottom: var(--size-10); /* Espaço para a paginação */

    @media (width >= 1024px) {
      grid-template-columns: 1.5fr 1fr;
      gap: var(--size-10);
    }

    @media (width < 1024px) {
      grid-template-columns: minmax(0, 1fr);
      padding-inline: max(var(--size-4), 1rem);
      padding-top: calc(var(--nav-block-size) + 24px + env(safe-area-inset-top, 0px));
    }
  }

  .Wrapper {
    @media (width >= 1024px) {
      position: relative;
    }
  }

  .Visual {
    & picture {
      position: absolute;
      inset: 0;
    }
    
    & img {
      inline-size: 100%;
      block-size: 100%;
      object-fit: contain; /* Mostra a imagem inteira sem cortar */
      object-position: center center;
    }
    
    /* Estado inicial: apenas FirstPic visível */
    .FirstPic {
      opacity: 1;
      z-index: 3;
    }
    
    .SecondPic {
      opacity: 0;
      z-index: 2;
    }
    
    .ThirdPic {
      opacity: 0;
      z-index: 1;
    }

    @media (width >= 1024px) {
      position: sticky; /* Muda de fixed para sticky para acompanhar o scroll */
      top: var(--size-9); /* Fica no topo quando sticky */
      inline-size: 62%;
      block-size: calc(100dvb - var(--size-9));
      display: grid;
      place-items: start end; /* Alinha ao topo e à direita */

      > * {
        grid-area: 1/1;
      }

      & img {
        border-radius: 0; /* Remove border-radius */
        box-shadow: none; /* Remove sombra */
      }

      & picture {
        max-inline-size: 700px; /* Aumentado de 600px para 700px */
        max-block-size: 100%;
        border-radius: 0; /* Remove border-radius */
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin: 0 auto; /* Centraliza horizontalmente */
      }
    }

    @media (1024px < width < 1440px) {
      & img {
        max-inline-size: 500px;
      }
    }

    @media (width < 1024px) {
      position: relative; /* Remove fixed no mobile */
      inline-size: 100%;
      block-size: auto;
      min-block-size: calc(100dvb - var(--size-9));
      display: flex;
      align-items: center;
      justify-content: center;
      
      > * {
        min-block-size: calc(100dvb - var(--size-9));
      }

      picture {
        inline-size: 100%;
        block-size: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative; /* Remove absolute no mobile */
        opacity: 1 !important; /* Força todas visíveis no mobile */
      }
      
      /* No mobile, mostra apenas a primeira imagem */
      .FirstPic {
        opacity: 1 !important;
        z-index: 1;
        position: relative;
      }
      
      .SecondPic,
      .ThirdPic {
        display: none; /* Esconde as outras imagens no mobile */
      }
      
      & img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
        position: relative;
      }
    }
  }

  .Content {
    > * {
      min-block-size: calc(100dvb - var(--size-9));
      overflow: visible;
    }

    & h2.headline {
      max-inline-size: 13ch;
      text-wrap: balance;
      font-size: 3.75rem;
      font-weight: var(--font-weight-7);
      line-height: var(--font-lineheight-0);
      padding-block: var(--size-4);
      padding-inline: var(--size-4);
      color: white;
      overflow: visible;
    }

    & p.desc {
      max-inline-size: var(--size-content-2);
      font-size: var(--font-size-3);
      color: rgba(245, 245, 245, 0.9);
    }

    .subhead {
      color: var(--brand-gradient);
      font-size: var(--font-size-6);
      font-weight: var(--font-weight-6);
      max-inline-size: var(--size-content-1);
      line-height: var(--font-lineheight-1);
      text-wrap: pretty;
    }

    @media (width < 1024px) {
      display: block;
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      padding-inline: max(var(--size-5), 1.25rem);
      > * {
        min-block-size: auto;
      }
      & h2.headline {
        font-size: clamp(1.75rem, 6vw, 2.5rem);
        max-inline-size: none;
        max-width: 100%;
      }
      & .subhead,
      & p.desc {
        max-width: 100%;
        overflow-wrap: break-word;
      }
    }

    @media (width < 1440px) {
      & h2.headline {
        font-size: var(--font-size-7);
      }

      .subhead {
        font-size: var(--font-size-5);
      }
    }

    @media (width >= 1024px) {
      padding-inline: max(var(--size-5), 2rem);
      overflow: visible;
    }
  }

  .FirstLockup,
  .SecondLockup,
  .ThirdLockup {
    padding-inline: max(var(--size-4), 1rem);
    padding-block: var(--size-6);
    overflow: visible;
  }

  @media (width < 1024px) {
    .FirstLockup,
    .SecondLockup,
    .ThirdLockup {
      max-width: 100%;
      min-width: 0;
      box-sizing: border-box;
      padding-inline: max(var(--size-5), 1.25rem);
      text-align: center;
      justify-items: center;
    }
    .FirstLockup {
      padding-top: max(var(--size-6), env(safe-area-inset-top, 0px));
    }
    .FirstLockup .block.gap-3,
    .SecondLockup .block.gap-3,
    .ThirdLockup .block.gap-3 {
      max-width: 100%;
      width: 100%;
      margin-inline: auto;
      text-align: center;
    }
  }

  .Content .block.gap-3 {
    padding-block: var(--size-4);
  }

  /* Barra preta removida: conteúdo do hero no mobile vem do .Content */
  .SmallScreenContent {
    display: none !important;
  }

  .pagination {
    position: absolute; /* Muda de fixed para absolute para ficar dentro da seção Hero */
    inset-block-end: var(--size-8);
    z-index: var(--layer-3);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    /* Garante que fique dentro da seção Hero e não ultrapasse para services-section */

    & > div {
      display: flex;
      gap: var(--size-3);
    }

    & a {
      --size: var(--size-3);
      block-size: var(--size);
      inline-size: var(--size);
      border: var(--border-size-1) solid var(--brand-gradient);
      border-radius: var(--radius-round);
      display: block;
    }

    @media (width < 1024px) {
      display: none;
    }
  }

  /* Scroll-Driven Animations */
  @supports (animation-timeline: scroll()) {
    @media (width >= 1024px) {
      body {
        timeline-scope: --first-lockup, --second-lockup, --third-lockup;
      }

      .Visual picture {
        inline-size: 900px; /* Aumentado para 900px */
        transform-origin: center center; /* Centraliza a origem da transformação */
        position: absolute;
        right: -30%; /* Move mais para a direita, saindo um pouco do container */
        left: auto; /* Remove left */
        top: 0; /* Começa do topo para acompanhar os textos */
        margin-left: 0; /* Remove margin-left */
        margin-right: 0; /* Sem margin à direita */
        margin-top: 0; /* Remove margin-top para acompanhar os textos */
        padding-right: 0; /* Remove padding */
        display: flex;
        align-items: flex-start; /* Alinha ao topo */
        justify-content: flex-end; /* Alinha o conteúdo à direita */

        > img {
          object-fit: contain; /* Mostra a imagem inteira sem cortar */
          max-width: 100%;
          max-height: 100%;
          box-shadow: none; /* Remove a sombra */
        }
      }

      .FirstPic {
        opacity: 0; /* Invisível inicialmente */
        z-index: 3;
        animation: auto slide-out-rotate linear both;
        animation-timeline: --first-lockup;
        animation-range: entry 10% exit 90%; /* Anima quando a seção entra e sai */
        
        > img {
          rotate: 0deg; /* Remove rotação para alinhamento melhor */
        }
      }

      .SecondPic {
        opacity: 0; /* Invisível inicialmente */
        z-index: 2;
        animation: auto slide-out-rotate linear both;
        animation-timeline: --second-lockup;
        animation-range: entry 10% exit 90%; /* Anima quando a seção entra e sai */

        > img {
          rotate: 0deg; /* Remove rotação para alinhamento melhor */
        }
      }

      .ThirdPic {
        opacity: 0; /* Invisível inicialmente */
        z-index: 1;
        animation: auto fade-out-last linear both;
        animation-timeline: --third-lockup;
        animation-range: entry 10% exit 90%; /* Anima quando a seção entra e sai */

        > img {
          rotate: 0deg; /* Remove rotação para alinhamento melhor */
        }
      }

      .FirstLockup {
        view-timeline-name: --first-lockup;
      }

      .SecondLockup {
        view-timeline-name: --second-lockup;
      }

      .ThirdLockup {
        view-timeline-name: --third-lockup;
      }
    }

    @media (width >= 1440px) {
      .Visual picture {
        inline-size: 1000px; /* Aumentado para 1000px */
        margin-right: 0; /* Sem margin à direita */
      }
    }

    @media (width >= 1600px) {
      .Visual picture {
        inline-size: 1100px; /* Aumentado para 1100px */
        margin-right: 0; /* Sem margin à direita */
      }
    }

    @media (width < 1024px) {
      /* Desabilita todas as animações scroll-driven no mobile */
      .Visual picture {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        position: relative !important;
        inline-size: 100% !important;
        transform-origin: center center !important;
      }
      
      .FirstPic {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
        position: relative !important;
        display: block !important;
        z-index: 1 !important;
        
        > img {
          rotate: 0deg !important;
        }
      }
      
      .SecondPic,
      .ThirdPic {
        animation: none !important;
        transform: none !important;
        display: none !important; /* Esconde outras imagens no mobile */
      }
    }

    .pagination {
      & a {
        animation: highlight linear both;
        
        &:nth-child(1) {
          animation-timeline: --first-lockup;
        }
        &:nth-child(2) {
          animation-timeline: --second-lockup;
        }
        &:nth-child(3) {
          animation-timeline: --third-lockup;
        }
      }
    }
  }

  @supports not (animation-timeline: scroll()) {
    .pagination {
      display: none;
    }
  }

  @keyframes slide-out-rotate {
    0% {
      opacity: 0;
      transform: translateX(50px) scale(0.8);
    }
    20% {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
    80% {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateX(-50px) scale(0.8);
    }
  }
  
  @keyframes fade-out-last {
    0% {
      opacity: 0;
      transform: translateX(50px) scale(0.8);
    }
    20% {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
    80% {
      opacity: 1;
      transform: translateX(0) scale(1);
    }
    100% {
      opacity: 0;
      transform: translateX(-50px) scale(0.8);
    }
  }

  @keyframes reveal {
    to {
      visibility: visible;
    }
  }

  @keyframes highlight {
    50% {
      background-color: hsl(32, 13%, 51%);
    }
  }

  .video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    position: relative;
    z-index: -1;
    opacity: 0.4;
  }

  .content-wrapper {
    display: flex;
    flex-direction: column;

    @media (width < 960px) {
      gap: var(--size-7);
    }
  }

  .meta {
    display: grid;
    gap: var(--size-3);
  }

  .content {
    display: flex;
    inline-size: 100%;
    align-items: center;
    padding-block: var(--size-7);
    padding-inline: var(--size-5);
    min-height: 100vh;

    @media (width >=960px) {
      padding: var(--size-10);
      justify-content: flex-end;
    }

    @media (width < 960px) {
      flex-direction: column;
      gap: var(--size-5);
    }
  }

  .mobile-visual {
    inline-size: 100%;
    aspect-ratio: var(--ratio-square);

    @media (width >=960px) {
      display: none;
    }
  }

  .headline {
    font-size: var(--font-size-7);
    font-weight: var(--font-weight-6);
    max-inline-size: var(--size-content-1);
    text-wrap: pretty;
    color: #f5f5f5;
    line-height: 1.2;

    @media (width < 960px) {
      font-size: var(--font-size-6);
    }
  }

  .desc {
    font-size: var(--font-size-4);
    line-height: 1.6;
    max-inline-size: 45ch;
    text-wrap: pretty;
    color: rgba(245, 245, 245, 0.8);

    @media (width < 960px) {
      font-size: var(--font-size-3);
    }
  }

  .visual {
    display: grid;
    position: sticky;
    top: 0;
    height: 100vh;
    container-type: size;

    @media (width < 960px) {
      display: none;
    }
  }

  .video-visual {
    inline-size: 100%;
    block-size: var(--section-block-size);
    display: block;
    position: sticky;
    inset-block-start: 0;
    isolation: isolate;
    filter: hue-rotate(20deg) saturate(1.2);
  }

  .card-wrapper {
    container-type: size;
    display: grid;
    place-items: center;
    overflow: clip;

    > * {
      grid-area: 1 / 1;
    }
  }

  .card {
    aspect-ratio: var(--ratio-square);
    inline-size: 70cqi;
    overflow: hidden;
    /* Sem estados manuais - apenas a animação controla */
  }
  
  /* Fallback para navegadores sem suporte a scroll timeline */
  @supports not (animation-timeline: scroll()) {
    .card-1 {
      transform: scale(1);
      opacity: 1;
    }
    
    .card-2,
    .card-3,
    .card-4 {
      transform: scale(0.4);
      opacity: 0.3;
    }
  }

  .card-img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    border: none;
    padding: 0;
    margin: 0;
  }

  .card-video {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }

  /* Text gradients for steps */
  .step-1 {
    --_text-gradient: linear-gradient(227deg, #8B4513 0%, #D2691E 100%);
  }

  .step-2 {
    --_text-gradient: linear-gradient(227deg, #DAA520 0%, #FFD700 100%);
  }

  .step-3 {
    --_text-gradient: linear-gradient(227deg, #CD853F 0%, #DEB887 100%);
  }

  .step-4 {
    --_text-gradient: linear-gradient(227deg, #8B0000 0%, #DC143C 100%);
  }
  
  /* Legacy support */
  .content-1 {
    --_text-gradient: linear-gradient(227deg, #8B4513 0%, #D2691E 100%);
  }

  .content-2 {
    --_text-gradient: linear-gradient(227deg, #DAA520 0%, #FFD700 100%);
  }

  .content-3 {
    --_text-gradient: linear-gradient(227deg, #CD853F 0%, #DEB887 100%);
  }

  .content-4 {
    --_text-gradient: linear-gradient(227deg, #8B0000 0%, #DC143C 100%);
  }

  .text-highlight {
    background: var(--_text-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  /* Services Section */
  .services-section {
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%);
    padding: var(--size-10) var(--size-5);
    border-top: 1px solid rgba(139, 69, 19, 0.3);
  }

  .services-container {
    max-inline-size: 1400px;
    margin: 0 auto;
  }

  .section-title {
    font-size: var(--font-size-8);
    font-weight: var(--font-weight-7);
    text-align: center;
    margin-block-end: var(--size-8);
    color: #f5f5f5;

    @media (width < 960px) {
      font-size: var(--font-size-6);
    }
  }

  .text-highlight-alt {
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--size-5);
    margin-block-start: var(--size-7);

    @media (width < 600px) {
      grid-template-columns: 1fr;
    }
  }

  .service-card {
    background: rgba(42, 31, 26, 0.5);
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: var(--radius-3);
    padding: var(--size-6);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);

    &:hover {
      transform: translateY(-8px);
      border-color: rgba(139, 69, 19, 0.6);
      box-shadow: 0 15px 40px rgba(139, 69, 19, 0.2);
      background: rgba(42, 31, 26, 0.8);
    }

    .service-icon {
      font-size: 3rem;
      margin-block-end: var(--size-3);
    }

    h3 {
      font-size: var(--font-size-5);
      font-weight: var(--font-weight-6);
      margin-block-end: var(--size-2);
      color: #f5f5f5;
    }

    p {
      color: rgba(245, 245, 245, 0.7);
      line-height: 1.6;
    }
  }

  /* Videos Section */
  .videos-section {
    background: var(--dark-bg);
    padding: var(--size-10) var(--size-5);
    border-top: 1px solid rgba(139, 69, 19, 0.3);
  }

  .videos-container {
    max-inline-size: 1400px;
    margin: 0 auto;
  }

  .videos-desc {
    text-align: center;
    font-size: var(--font-size-3);
    color: rgba(245, 245, 245, 0.7);
    margin-block-start: var(--size-3);
    margin-block-end: var(--size-8);
  }

  .videos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--size-8);
    margin-block-start: var(--size-7);

    @media (width < 768px) {
      grid-template-columns: 1fr;
      gap: var(--size-6);
    }
  }

  .video-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .video-container {
    width: 100%;
    max-width: 1000px;
    border-radius: var(--radius-3);
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.6);
    overflow: visible;
    border: 2px solid rgba(139, 69, 19, 0.3);
    transition: all 0.3s ease;
    background: rgba(42, 31, 26, 0.5);
    backdrop-filter: blur(10px);

    &:hover {
      transform: translateY(-5px);
      box-shadow: 0px 15px 40px rgba(139, 69, 19, 0.4);
      border-color: rgba(139, 69, 19, 0.6);
    }

    video {
      width: 100%;
      height: auto;
      display: block;
      border-radius: var(--radius-3) var(--radius-3) 0 0;
      cursor: pointer;
      background: #000;
      outline: none;
      position: relative;
      z-index: 1;
      pointer-events: auto;
    }
    
    video[data-video-src] {
      /* Remove controls from preview videos */
      pointer-events: auto;
    }

    /* Native controls always visible and clickable */
    video::-webkit-media-controls {
      opacity: 1 !important;
      pointer-events: auto !important;
    }

    video::-webkit-media-controls-panel {
      background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
      pointer-events: auto !important;
    }

    video[controls] {
      cursor: pointer;
      pointer-events: auto !important;
    }
  }

  /* Tebex Store Styles */
  .tebex-store {
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%);
  }

  .tebex-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--size-6);
    margin-block-start: var(--size-7);

    @media (width < 768px) {
      grid-template-columns: 1fr;
      gap: var(--size-5);
    }
  }

  .tebex-card {
    background: rgba(42, 31, 26, 0.5);
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: var(--radius-3);
    overflow: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;

    &:hover {
      transform: translateY(-8px);
      border-color: rgba(139, 69, 19, 0.6);
      box-shadow: 0 15px 40px rgba(139, 69, 19, 0.3);
      background: rgba(42, 31, 26, 0.8);
    }
  }

  .tebex-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #000;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.3s ease;
    }
  }

  .tebex-card:hover .tebex-image img {
    transform: scale(1.05);
  }

  .tebex-badge {
    position: absolute;
    top: var(--size-3);
    right: var(--size-3);
    background: var(--brand-gradient);
    color: #fff;
    padding: var(--size-2) var(--size-4);
    border-radius: var(--radius-2);
    font-size: var(--font-size-0);
    font-weight: var(--font-weight-7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  }

  .tebex-badge-available {
    background: linear-gradient(227deg, #28dc28 0%, #00b894 100%);
  }

  .tebex-badge-new {
    background: linear-gradient(227deg, #FFD700 0%, #FFA500 100%);
  }

  .tebex-badge-popular {
    background: linear-gradient(227deg, #e74c3c 0%, #c0392b 100%);
  }

  .tebex-badge-hot {
    background: linear-gradient(227deg, #e74c3c 0%, #ff6b6b 100%);
    animation: pulse 2s infinite;
  }

  @keyframes pulse {
    0%, 100% {
      transform: scale(1);
      box-shadow: 0 4px 12px rgba(231, 76, 60, 0.4);
    }
    50% {
      transform: scale(1.05);
      box-shadow: 0 6px 20px rgba(231, 76, 60, 0.6);
    }
  }

  /* Loading and Error States */
  .loading-state,
  .error-state {
    animation: fadeIn 0.5s ease-in;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  .loading-state p::after {
    content: '...';
    animation: dots 1.5s infinite;
  }

  @keyframes dots {
    0%, 20% {
      content: '.';
    }
    40% {
      content: '..';
    }
    60%, 100% {
      content: '...';
    }
  }

  .tebex-content {
    padding: var(--size-5);
    display: flex;
    flex-direction: column;
    flex-grow: 1;

    h3 {
      font-size: var(--font-size-4);
      font-weight: var(--font-weight-6);
      margin-block-end: var(--size-3);
      color: #f5f5f5;
    }

    p {
      font-size: var(--font-size-2);
      color: rgba(245, 245, 245, 0.7);
      line-height: 1.6;
      margin-block-end: var(--size-4);
      flex-grow: 1;
    }
  }

  .tebex-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--size-3);
    margin-block-start: auto;
  }

  .tebex-price {
    font-size: var(--font-size-5);
    font-weight: var(--font-weight-7);
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
  }

  .tebex-btn {
    display: inline-block;
    padding: var(--size-2) var(--size-4);
    background: var(--brand-gradient);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-2);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-6);
    transition: all 0.3s ease;
    border: 2px solid transparent;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(139, 69, 19, 0.4);
      border-color: rgba(255, 255, 255, 0.2);
    }
  }

  /* Video wrapper inside container - ensures video is clickable */
  .video-container > video {
    position: relative;
    z-index: 10;
    pointer-events: auto !important;
    cursor: pointer;
  }

  /* Ensure video container doesn't block clicks */
  .video-container {
    pointer-events: auto;
  }

  /* Make sure nothing overlays the video */
  .video-container::before,
  .video-container::after {
    display: none !important;
    pointer-events: none !important;
  }

  .video-info {
    position: relative;
    padding: var(--size-4) var(--size-5);
    background: rgba(42, 31, 26, 0.8);
    color: #f5f5f5;
    text-align: center;
    opacity: 1;
    border-radius: 0 0 var(--radius-3) var(--radius-3);
    border-top: 1px solid rgba(139, 69, 19, 0.3);
    z-index: 1;
    pointer-events: auto;
  }

  .video-title {
    font-size: var(--font-size-4);
    font-weight: var(--font-weight-7);
    margin-block-end: var(--size-2);
    color: #f5f5f5;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
  }

  .video-subtitle {
    font-size: var(--font-size-2);
    color: rgba(245, 245, 245, 0.85);
    margin: var(--size-2) 0 var(--size-3) 0;
    line-height: 1.5;
  }
  
  .private-project-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-2) var(--size-4);
    margin-top: var(--size-3);
    background: var(--brand-gradient);
    color: #fff;
    text-decoration: none;
    border-radius: var(--radius-2);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-6);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    pointer-events: auto;
  }
  
  .private-project-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 69, 19, 0.4);
    border-color: rgba(212, 175, 55, 0.5);
    background: var(--brand-gradient-3);
  }
  
  .private-project-btn i {
    font-size: 0.9em;
  }
  
  /* See More Button */
  .see-more-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-3) var(--size-6);
    background: rgba(139, 69, 19, 0.3);
    border: 2px solid rgba(139, 69, 19, 0.5);
    color: #d4af37;
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-6);
    border-radius: var(--radius-3);
    cursor: pointer;
    transition: all 0.3s ease;
  }
  
  .see-more-btn:hover {
    background: rgba(139, 69, 19, 0.5);
    border-color: rgba(212, 175, 55, 0.7);
    color: #f4cf67;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 69, 19, 0.3);
  }
  
  .see-more-btn.active {
    background: rgba(139, 69, 19, 0.6);
    border-color: #d4af37;
  }
  
  .see-more-btn i {
    transition: transform 0.3s ease;
  }
  
  .see-more-btn.active i {
    transform: rotate(180deg);
  }
  
  /* Additional Projects */
  .additional-projects {
    margin-top: var(--size-8);
    animation: fadeIn 0.5s ease;
  }
  
  .projects-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--size-5);
    margin-top: var(--size-6);
  }
  
  .project-item {
    display: flex;
    gap: var(--size-4);
    padding: var(--size-5);
    background: rgba(42, 31, 26, 0.6);
    border: 2px solid rgba(139, 69, 19, 0.3);
    border-radius: var(--radius-3);
    transition: all 0.3s ease;
  }
  
  .project-item:hover {
    background: rgba(42, 31, 26, 0.8);
    border-color: rgba(139, 69, 19, 0.6);
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  }
  
  .project-icon {
    font-size: 2.5rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: rgba(139, 69, 19, 0.2);
    border-radius: var(--radius-2);
  }
  
  .project-content {
    flex: 1;
  }
  
  .project-content h3 {
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-7);
    color: #d4af37;
    margin-block-end: var(--size-2);
  }
  
  .project-content p {
    font-size: var(--font-size-2);
    color: rgba(245, 245, 245, 0.8);
    margin-block-end: var(--size-3);
    line-height: 1.5;
  }
  
  @media (width < 768px) {
    .projects-list {
      grid-template-columns: 1fr;
    }
    
    .project-item {
      flex-direction: column;
      text-align: center;
    }
    
    .project-icon {
      margin: 0 auto;
    }
  }

  /* Old play button wrapper - disabled, using native HTML5 controls */
  .play-button-wrapper {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  .play-gif {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Keep old SVG styles for reference but hidden */
  .play-gif svg {
    width: 100px;
        height: 100px;
        fill: #fff;
        stroke: #fff;
        cursor: pointer;
        background: var(--brand-gradient);
        border-radius: 50%;
        opacity: 0.95;
        transition: all 0.3s ease;
        filter: drop-shadow(0 4px 12px rgba(139, 69, 19, 0.6));

        &:hover {
          opacity: 1;
          filter: drop-shadow(0 6px 20px rgba(139, 69, 19, 0.8));
        }

        @media (width < 768px) {
          width: 80px;
          height: 80px;
        }
      }
    }
  }

  /* Contact Section */
  .contact-section {
    background: linear-gradient(180deg, var(--dark-bg) 0%, var(--dark-bg-2) 100%);
    padding: var(--size-10) var(--size-5);
    text-align: center;
    border-top: 1px solid rgba(139, 69, 19, 0.3);
  }

  .contact-container {
    max-inline-size: 800px;
    margin: 0 auto;
  }

  .contact-desc {
    font-size: var(--font-size-4);
    color: rgba(245, 245, 245, 0.8);
    margin-block: var(--size-5);
    line-height: 1.6;
  }

  .contact-info {
    margin-block-start: var(--size-7);
    text-align: center;
  }

  .contact-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-7);
    text-decoration: none;
    padding: var(--size-4) var(--size-8);
    border: 3px solid transparent;
    color: #f5f5f5;
    background: var(--brand-gradient);
    border-radius: var(--radius-6);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 15px 40px rgba(139, 69, 19, 0.4);
      background: var(--brand-gradient-3);
    }
    
    i {
      font-size: 1.2em;
    }
  }

  .links-page-btn {
    margin-inline-start: var(--size-3);
    background: transparent;
    border-color: rgba(212, 175, 55, 0.55);
    color: #d4af37;
  }

  .links-page-btn:hover {
    background: rgba(212, 175, 55, 0.15);
    border-color: rgba(212, 175, 55, 0.9);
    color: #f4cf67;
  }
  
  .social-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--size-4);
    margin-block-start: var(--size-7);
  }
  
  .social-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--size-2);
    padding: var(--size-3) var(--size-5);
    font-size: var(--font-size-2);
    font-weight: var(--font-weight-6);
    text-decoration: none;
    border-radius: var(--radius-3);
    transition: all 0.3s ease;
    border: 2px solid transparent;
    color: #f5f5f5;
    
    i {
      font-size: 1.2em;
    }
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    }
  }
  
  .discord-btn {
    background: linear-gradient(135deg, #5865F2 0%, #7289DA 100%);
    
    &:hover {
      background: linear-gradient(135deg, #7289DA 0%, #5865F2 100%);
      border-color: rgba(88, 101, 242, 0.5);
    }
  }
  
  .youtube-btn {
    background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%);
    
    &:hover {
      background: linear-gradient(135deg, #CC0000 0%, #FF0000 100%);
      border-color: rgba(255, 0, 0, 0.5);
    }
  }
  
  .tebex-btn {
    background: linear-gradient(135deg, #00D4AA 0%, #00B894 100%);
    
    &:hover {
      background: linear-gradient(135deg, #00B894 0%, #00D4AA 100%);
      border-color: rgba(0, 212, 170, 0.5);
    }
  }
  
  .github-btn {
    background: linear-gradient(135deg, #24292e 0%, #1a1e22 100%);
    
    &:hover {
      background: linear-gradient(135deg, #1a1e22 0%, #24292e 100%);
      border-color: rgba(36, 41, 46, 0.5);
    }
  }
  
  @media (width < 768px) {
    .contact-info {
      display: flex;
      flex-direction: column;
      gap: var(--size-3);
      align-items: center;
    }

    .links-page-btn {
      margin-inline-start: 0;
    }

    .social-links {
      flex-direction: column;
      align-items: stretch;
    }
    
    .social-btn {
      justify-content: center;
      width: 100%;
      max-width: 300px;
      margin: 0 auto;
    }
  }

  /* Footer */
  .footer {
    background: rgba(26, 20, 16, 0.95);
    padding: var(--size-5);
    border-top: 1px solid rgba(139, 69, 19, 0.3);
  }

  .footer-content {
    max-inline-size: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--size-3);

    @media (width < 600px) {
      flex-direction: column;
      text-align: center;
    }

    p {
      color: rgba(245, 245, 245, 0.6);
      font-size: var(--font-size-0);
    }
  }

  .footer-links {
    display: flex;
    gap: var(--size-5);

    a {
      color: rgba(245, 245, 245, 0.6);
      text-decoration: none;
      font-size: var(--font-size-0);
      transition: color 0.3s ease;

      &:hover {
        color: #D2691E;
      }
    }
  }
}

/* Scroll Timeline Animations */
@supports (animation-timeline: scroll()) {
  body {
    timeline-scope: --content-1, --content-2, --content-3, --content-4;
  }

  .section {
    view-timeline-name: --section;
  }

  .content-1 {
    view-timeline-name: --content-1;
  }

  .content-2 {
    view-timeline-name: --content-2;
  }

  .content-3 {
    view-timeline-name: --content-3;
  }

  .content-4 {
    view-timeline-name: --content-4;
  }

  .card {
    animation-timing-function: linear;
    animation-fill-mode: both;
    /* SEM animation-duration - scroll timeline não usa tempo */
  }

  .card-1 {
    animation-timeline: --content-1;
    animation-name: slide;
    animation-range: entry 0% exit 100%;
  }

  .card-2 {
    animation-timeline: --content-2;
    animation-name: slide;
    animation-range: entry 0% exit 100%;
  }

  .card-3 {
    animation-timeline: --content-3;
    animation-name: slide;
    animation-range: entry 0% exit 100%;
  }

  .card-4 {
    animation-timeline: --content-4;
    animation-name: slide;
    animation-range: entry 0% exit 100%;
  }

  .video-visual {
    animation-timeline: --section;
    animation-range-end: exit 110%;
    animation-name: update-hue;
    animation-timing-function: step-end;
    animation-fill-mode: forwards;
  }

  @keyframes update-hue {
    0% {
      filter: hue-rotate(20deg) saturate(1.2);
    }

    25% {
      filter: hue-rotate(40deg) saturate(1.3);
    }

    50% {
      filter: hue-rotate(10deg) saturate(1.1);
    }

    75% {
      filter: hue-rotate(-10deg) saturate(1.4);
    }
  }

  @keyframes slide {
    0% {
      opacity: 0;
      transform: scale(0.4) translateY(100px);
    }

    50% {
      opacity: 1;
      transform: scale(1) translateY(0);
    }

    100% {
      opacity: 0;
      transform: scale(0.6) translateY(-200px);
    }
  }
  
  
  /* ================================
     Video.js Custom Styles (Wild West Theme)
     ================================ */
  
  /* Override Video.js default colors */
  .video-js {
    font-family: 'Inter', sans-serif;
  }
  
  /* Big play button (center) */
  .video-js .vjs-big-play-button {
    background-color: rgba(212, 175, 55, 0.9) !important;
    border: 3px solid rgba(245, 245, 245, 0.9) !important;
    border-radius: 50% !important;
    width: 2em !important;
    height: 2em !important;
    line-height: 2em !important;
    font-size: 3em !important;
    transition: all 0.3s ease !important;
  }
  
  .video-js:hover .vjs-big-play-button {
    background-color: rgba(244, 207, 103, 1) !important;
    border-color: rgba(255, 255, 255, 1) !important;
    transform: scale(1.1);
  }
  
  /* Control bar background */
  .video-js .vjs-control-bar {
    background: linear-gradient(180deg, transparent 0%, rgba(26, 20, 16, 0.95) 50%) !important;
    backdrop-filter: blur(10px);
  }
  
  /* Progress bar */
  .video-js .vjs-play-progress {
    background-color: #d4af37 !important;
  }
  
  .video-js .vjs-load-progress {
    background: rgba(139, 69, 19, 0.5) !important;
  }
  
  /* Slider background */
  .video-js .vjs-slider {
    background-color: rgba(245, 245, 245, 0.3) !important;
  }
  
  /* Volume slider */
  .video-js .vjs-volume-level {
    background-color: #d4af37 !important;
  }
  
  /* Buttons hover */
  .video-js .vjs-control:hover {
    color: #f4cf67 !important;
  }
  
  /* Loading spinner */
  .video-js .vjs-loading-spinner {
    border-color: rgba(212, 175, 55, 0.8) transparent transparent transparent !important;
  }
  
  /* Custom aspect ratio for videos */
  .video-js.vjs-16-9 {
    padding-top: 56.25% !important;
  }
  
  /* ================================
     HTML5 Native Video Controls Styling
     ================================ */
  
  /* Video container styling */
  .video-container video {
    width: 100%;
    height: auto;
    max-height: 500px;
    border-radius: var(--radius-3);
    background: var(--dark-bg);
  }
  
  /* Customize native video controls */
  .video-container video::-webkit-media-controls-panel {
    background-color: rgba(26, 20, 16, 0.9);
  }
  
  .video-container video::-webkit-media-controls-play-button {
    background-color: rgba(212, 175, 55, 0.9);
    border-radius: 50%;
  }
  
  .video-container video::-webkit-media-controls-play-button:hover {
    background-color: rgba(244, 207, 103, 1);
  }
  
  .video-container video::-webkit-media-controls-current-time-display,
  .video-container video::-webkit-media-controls-time-remaining-display {
    color: #f5f5f5;
  }
  
  .video-container video::-webkit-media-controls-timeline {
    background-color: rgba(139, 69, 19, 0.5);
    border-radius: 2px;
  }
  
  .video-container video::-webkit-media-controls-timeline::-webkit-slider-thumb {
    background-color: #d4af37;
  }
  
  .video-container video::-webkit-media-controls-volume-slider {
    background-color: rgba(139, 69, 19, 0.5);
  }
  
  .video-container video::-webkit-media-controls-volume-slider::-webkit-slider-thumb {
    background-color: #d4af37;
  }
  
  .video-container video::-webkit-media-controls-mute-button {
    color: #f5f5f5;
  }
  
  .video-container video::-webkit-media-controls-fullscreen-button {
    color: #f5f5f5;
  }
  
  /* Firefox video controls */
  .video-container video::-moz-media-controls {
    background-color: rgba(26, 20, 16, 0.9);
  }
  
  /* Responsive adjustments */
  @media (max-width: 768px) {
    .video-container video {
      max-height: 300px;
    }
  }
}

/* ================================
   Video Modal Styles
   ================================ */

.video-modal {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(5px);
  animation: fadeIn 0.3s ease;
}

.video-modal.show {
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-modal-content {
  background: linear-gradient(135deg, 
    rgba(26, 20, 16, 0.95) 0%, 
    rgba(42, 31, 26, 0.95) 50%, 
    rgba(26, 20, 16, 0.95) 100%);
  border: 2px solid rgba(139, 69, 19, 0.5);
  border-radius: 15px;
  padding: 0;
  width: 90%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  animation: slideIn 0.3s ease;
}

.video-modal-header {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.2), rgba(212, 175, 55, 0.2));
  padding: 20px;
  border-bottom: 1px solid rgba(139, 69, 19, 0.3);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.video-modal-header h3 {
  color: #d4af37;
  margin: 0;
  font-size: 1.4rem;
  font-weight: 600;
}

.video-close-btn {
  background: rgba(231, 76, 60, 0.2);
  color: #e74c3c;
  border: 2px solid rgba(231, 76, 60, 0.5);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.video-close-btn:hover {
  background: rgba(231, 76, 60, 0.4);
  border-color: #e74c3c;
  transform: scale(1.1);
}

.video-modal-container {
  padding: 0;
  background: #000;
  position: relative;
}

.video-modal-container {
  padding: 0;
  background: #000;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 315px;
}

.video-modal-container video,
.video-modal-container iframe {
  width: 100%;
  height: 100%;
  display: block;
  outline: none;
  border: none;
}

.video-modal-container iframe {
  min-height: 315px;
}

.video-modal-footer {
  background: linear-gradient(135deg, rgba(139, 69, 19, 0.1), rgba(212, 175, 55, 0.1));
  padding: 15px 20px;
  border-top: 1px solid rgba(139, 69, 19, 0.3);
  text-align: center;
}

.video-modal-footer p {
  color: #FAFAFA;
  margin: 0;
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Play Button Overlay */
.video-container {
  position: relative;
  overflow: hidden;
}

.video-container video[data-video-src] {
  display: block;
  cursor: pointer;
}

.play-button-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.play-button-overlay .play-button {
  pointer-events: auto;
}

.video-container:hover .play-button-overlay {
  opacity: 1;
}

.play-button {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(139, 69, 19, 0.9);
  border: 3px solid #d4af37;
  color: #d4af37;
  font-size: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  pointer-events: auto;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.play-button:hover {
  background: rgba(139, 69, 19, 1);
  border-color: #f4cf67;
  color: #f4cf67;
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
}

/* Make video container clickable */
.video-container video {
  cursor: pointer;
}

/* YouTube video styles */
.youtube-video {
  cursor: pointer;
}

.youtube-thumbnail {
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.youtube-thumbnail:hover {
  opacity: 0.9;
}

.youtube-thumbnail img {
  transition: transform 0.3s ease;
}

.youtube-video:hover .youtube-thumbnail img {
  transform: scale(1.05);
}

/* Animações */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { 
    opacity: 0;
    transform: scale(0.8) translateY(-50px);
  }
  to { 
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Responsividade para Modal de Vídeo */
@media (max-width: 768px) {
  .video-modal-content {
    width: 95%;
    max-height: 85vh;
  }
  
  .video-modal-header {
    padding: 15px;
  }
  
  .video-modal-header h3 {
    font-size: 1.2rem;
  }
  
  .video-close-btn {
    width: 35px;
    height: 35px;
    font-size: 1rem;
  }
  
  .video-modal-container {
    min-height: 250px;
  }
  
  .video-modal-container iframe {
    min-height: 250px;
  }
  
  .video-modal-footer {
    padding: 12px 15px;
  }
  
  .video-modal-footer p {
    font-size: 0.85rem;
  }
  
  .play-button {
    width: 60px;
    height: 60px;
    font-size: 1.5rem;
  }
}

html[data-pending-i18n="1"]:not([data-i18n-ready]) body {
  opacity: 0;
}

.nav-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  justify-self: end;
  justify-content: flex-end;
}

.lang-switch {
  display: inline-flex;
  border: 1px solid rgba(212, 175, 55, 0.45);
  border-radius: 999px;
  overflow: hidden;
}

.lang-switch-btn {
  background: transparent;
  color: rgba(245, 245, 245, 0.8);
  border: 0;
  padding: 0.32rem 0.48rem;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.lang-switch-btn[aria-pressed="true"] {
  background: #d4af37;
  color: #1a1410;
}

.inline-link {
  color: #d4af37;
  font-weight: 700;
}

.nav-text-link {
  color: rgba(245, 245, 245, 0.88);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
}

.nav-text-link:hover,
.nav-text-link[aria-current="page"] {
  color: #d4af37;
}

@media (max-width: 640px) {
  .nav-text-link {
    display: none;
  }
}