/* ==========================================================
   SESI SENAI EXECUTIVE FRAMEWORK
   Framework Mestre
   ----------------------------------------------------------
   Este arquivo apenas organiza e importa todos os módulos.
   Não escreva estilos aqui.
========================================================== */

/* ==========================================================
   BASE
========================================================== */

@import url("base.css");

/* ==========================================================
   COMPONENTES GLOBAIS
========================================================== */

@import url("components.css");
@import url("effects.css");
@import url("animations.css");
@import url("navigation.css");

/* ==========================================================
   SLIDES
========================================================== */

@import url("slide-01.css");
@import url("slide-02.css");
@import url("slide-03.css");
@import url("slide-04.css");
@import url("slide-05.css");
@import url("slide-06.css");
@import url("slide-07.css");
@import url("slide-08.css");
@import url("slide-09.css");
@import url("slide-10.css");
@import url("slide-11.css");
@import url("slide-12.css");
@import url("slide-13.css");
@import url("slide-14.css");
@import url("slide-15.css");
@import url("slide-16.css");
@import url("slide-17.css");
@import url("slide-18.css");
@import url("slide-19.css");
@import url("slide-20.css");    
@import url("slide-21.css");
@import url("slide-22.css");
@import url("slide-23.css");
@import url("slide-24.css");
@import url("slide-25.css");
@import url("slide-26.css");


/* ==========================================================
   AUTOESCALA GLOBAL DA APRESENTAÇÃO
========================================================== */

:root {
  --presentation-base-width: 1920px;
  --presentation-base-height: 1080px;
}

html,
body {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  background: #000;
}

body {
  position: relative;
}

#presentation-stage {
  position: absolute;
  top: 50%;
  left: 50%;

  width: var(--presentation-base-width);
  height: var(--presentation-base-height);

  overflow: hidden;

  transform:
    translate(-50%, -50%)
    scale(var(--presentation-scale, 1));

  transform-origin: center center;

  background: #000;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  contain: layout paint;

  user-select: none;
}

#presentation-stage .presentation {
  position: relative;

  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;

  overflow: hidden;
}

#presentation-stage .slide {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

#presentation-stage .progress-track {
  position: absolute;
  z-index: 1000;
}

#presentation-stage .navigation {
  z-index: 1000;
}

#presentation-stage button,
#presentation-stage a,
#presentation-stage input,
#presentation-stage textarea,
#presentation-stage select {
  user-select: auto;
}

@media (orientation: portrait) {
  body {
    background: #000;
  }
}

/* ==========================================================
   TRANSPARÊNCIA GLOBAL DOS CONTROLES DE NAVEGAÇÃO

   Objetivo:
   - os botões ficam discretos por padrão;
   - aparecem ao passar o cursor;
   - ao clicar/tocar, aparecem rapidamente e voltam a ficar discretos;
   - não ficam marcando o último botão acionado.
========================================================== */

#presentation-stage .navigation {
  opacity: 0.18;

  filter:
    saturate(0.72)
    brightness(0.86);

  transition:
    opacity 0.35s ease,
    filter 0.35s ease;
}

#presentation-stage .navigation:hover {
  opacity: 1;

  filter:
    saturate(1)
    brightness(1);
}

#presentation-stage .navigation:focus-within {
  animation:
    navigationTemporaryReveal 3.2s ease forwards;
}

#presentation-stage .navigation button {
  opacity: 0.72;

  border-color:
    rgba(255, 255, 255, 0.10) !important;

  background:
    rgba(255, 255, 255, 0.025) !important;

  color:
    rgba(255, 255, 255, 0.72) !important;

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.14) !important;

  outline: none !important;

  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);

  transition:
    opacity 0.28s ease,
    transform 0.22s ease,
    color 0.22s ease,
    background 0.22s ease,
    border-color 0.22s ease,
    box-shadow 0.22s ease;
}

#presentation-stage .navigation:hover button {
  opacity: 1;

  border-color:
    rgba(255, 255, 255, 0.20) !important;

  background:
    rgba(255, 255, 255, 0.065) !important;

  color: #ffffff !important;

  box-shadow:
    0 12px 34px
    rgba(0, 0, 0, 0.26) !important;
}

#presentation-stage .navigation button:hover {
  opacity: 1;

  transform:
    scale(1.08);

  border-color:
    rgba(126, 226, 255, 0.48) !important;

  background:
    rgba(0, 174, 239, 0.20) !important;

  color: #ffffff !important;

  box-shadow:
    0 12px 34px
    rgba(0, 0, 0, 0.28),
    0 0 18px
    rgba(0, 174, 239, 0.16) !important;
}

#presentation-stage .navigation button:focus,
#presentation-stage .navigation button:focus-visible,
#presentation-stage .navigation button[aria-pressed="true"],
#presentation-stage .navigation button.active,
#presentation-stage .navigation button.is-active {
  outline: none !important;

  border-color:
    rgba(255, 255, 255, 0.14) !important;

  background:
    rgba(255, 255, 255, 0.04) !important;

  box-shadow:
    0 8px 24px
    rgba(0, 0, 0, 0.16) !important;

  color:
    rgba(255, 255, 255, 0.82) !important;
}

#presentation-stage .navigation button:active {
  transform:
    scale(0.96);

  opacity: 1;

  border-color:
    rgba(126, 226, 255, 0.55) !important;

  background:
    rgba(0, 174, 239, 0.24) !important;
}

@keyframes navigationTemporaryReveal {
  0% {
    opacity: 1;
    filter:
      saturate(1)
      brightness(1);
  }

  65% {
    opacity: 1;
    filter:
      saturate(1)
      brightness(1);
  }

  100% {
    opacity: 0.18;
    filter:
      saturate(0.72)
      brightness(0.86);
  }
}

@media (hover: none), (pointer: coarse) {
  #presentation-stage .navigation {
    opacity: 0.28;

    filter:
      saturate(0.85)
      brightness(0.92);
  }

  #presentation-stage .navigation:focus-within {
    animation:
      navigationTemporaryRevealTouch 3.2s ease forwards;
  }

  #presentation-stage .navigation button {
    opacity: 0.82;

    border-color:
      rgba(255, 255, 255, 0.13) !important;

    background:
      rgba(255, 255, 255, 0.04) !important;

    color:
      rgba(255, 255, 255, 0.86) !important;
  }
}

@keyframes navigationTemporaryRevealTouch {
  0% {
    opacity: 0.86;
    filter:
      saturate(1)
      brightness(1);
  }

  65% {
    opacity: 0.86;
    filter:
      saturate(1)
      brightness(1);
  }

  100% {
    opacity: 0.28;
    filter:
      saturate(0.85)
      brightness(0.92);
  }
}

@media (prefers-reduced-motion: reduce) {
  #presentation-stage .navigation,
  #presentation-stage .navigation button {
    transition: none;
    animation: none;
  }
}

/* ==========================================================
   FIM — TRANSPARÊNCIA GLOBAL DOS CONTROLES
========================================================== */