/* =========================================================
   DUDUQ CORE — COMPLETION
   Tela final premium DuduQ
   Compatível com duduq-completion.js 1.0.0
   Versão 1.2.7
   ========================================================= */


/* =========================================================
   TOKENS
   ========================================================= */

:root {
  --duduq-completion-blue: #0868c9;
  --duduq-completion-blue-dark: #004b98;
  --duduq-completion-blue-deep: #083f79;

  --duduq-completion-ink: #183b63;
  --duduq-completion-text: #526980;

  --duduq-completion-green: #58cc02;
  --duduq-completion-green-dark: #389800;

  --duduq-completion-border: #bfd2e4;
  --duduq-completion-border-soft: rgba(207, 222, 236, .92);

  --duduq-completion-surface: rgba(255, 255, 255, .975);

  --duduq-completion-font:
    Nunito,
    ui-rounded,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* =========================================================
   RESET LOCAL
   ========================================================= */

.duduq-completion,
.duduq-completion *,
.duduq-completion *::before,
.duduq-completion *::after {
  box-sizing: border-box;
}


/* =========================================================
   TELA
   ========================================================= */

.duduq-completion {
  position: relative;
  isolation: isolate;

  width: 100%;

  min-height: 100vh;
  min-height: 100dvh;

  display: grid;
  place-items: center;

  overflow: hidden;

  padding:
    clamp(18px, 3vh, 34px)
    clamp(14px, 3vw, 36px);

  color: var(--duduq-completion-ink);

  font-family: var(--duduq-completion-font);

  background:
    linear-gradient(
      180deg,
      rgba(246, 252, 255, .10),
      rgba(231, 245, 255, .16)
    );

  backdrop-filter:
    blur(2.5px)
    saturate(1.02);

  -webkit-backdrop-filter:
    blur(2.5px)
    saturate(1.02);

  animation:
    duduqCompletionScreenIn
    280ms
    ease-out
    both;
}


/* Iluminação discreta, sem halo neon. */

.duduq-completion::before {
  content: "";

  position: absolute;
  z-index: -2;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at 50% 35%,
      rgba(255, 255, 255, .30) 0%,
      rgba(255, 255, 255, .11) 36%,
      transparent 67%
    );
}


/* Vinheta quase imperceptível. */

.duduq-completion::after {
  content: "";

  position: absolute;
  z-index: -1;
  inset: 0;

  pointer-events: none;

  background:
    radial-gradient(
      ellipse at center,
      transparent 42%,
      rgba(16, 61, 101, .025) 100%
    );
}


/* =========================================================
   CARD PRINCIPAL
   ========================================================= */

.duduq-completion-card {
  position: relative;
  z-index: 4;

  width: min(740px, 94vw);
  min-height: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  gap: 0;

  margin-top: 62px;

  padding:
    68px
    clamp(30px, 5vw, 58px)
    34px;

  overflow: visible;

  text-align: center;

  border:
    2px solid
    var(--duduq-completion-border);

  border-radius: 32px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, .995) 0%,
      rgba(255, 255, 255, .98) 54%,
      rgba(248, 252, 255, .97) 100%
    );

  box-shadow:
    0 6px 0 rgba(137, 162, 188, .54),
    0 22px 52px rgba(27, 65, 105, .17),
    0 8px 18px rgba(27, 65, 105, .08),
    inset 0 1px 0 rgba(255, 255, 255, 1);

  animation:
    duduqCompletionCardIn
    500ms
    cubic-bezier(.18, .82, .26, 1.05)
    both;
}


/* Linha interna premium. */

.duduq-completion-card::before {
  content: "";

  position: absolute;
  inset: 4px;

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

  border-radius: 27px;

  pointer-events: none;
}


/* Reflexo sutil. */

.duduq-completion-card::after {
  content: "";

  position: absolute;

  top: 0;
  left: 18%;

  width: 64%;
  height: 2px;

  border-radius: 999px;

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

  pointer-events: none;
}


/* =========================================================
   HERO / MASCOTE
   ========================================================= */

.duduq-completion-hero {
  position: absolute;
  z-index: 9;

  top: -120px;
  left: 50%;

  width: 320px;
  height: 278px;

  display: grid;
  place-items: center;

  overflow: visible;

  transform: translateX(-50%);

  pointer-events: none;
}


/* Sombra atmosférica do mascote. */

.duduq-completion-hero::before {
  content: "";

  position: absolute;
  z-index: 0;

  left: 50%;
  bottom: 22px;

  width: 132px;
  height: 25px;

  border-radius: 50%;

  background:
    radial-gradient(
      ellipse,
      rgba(27, 68, 108, .18) 0%,
      rgba(27, 68, 108, .08) 45%,
      transparent 75%
    );

  filter: blur(9px);

  transform:
    translateX(-50%)
    scaleX(1);

  animation:
    duduqCompletionMascotShadow
    3.4s
    ease-in-out
    infinite;
}


.duduq-completion-hero::after {
  content: none;
  display: none;
}


/* O PNG possui área transparente; a escala visual preserva
   o protagonismo sem ampliar o container do modal. */

.duduq-completion-mascot {
  position: relative;
  z-index: 3;

  width: 100%;
  height: 100%;

  display: block;

  object-fit: contain;

  transform-origin: 50% 70%;

  filter:
    drop-shadow(
      0 14px 14px rgba(20, 56, 94, .18)
    )
    drop-shadow(
      0 5px 7px rgba(20, 56, 94, .09)
    );

  animation:
    duduqCompletionMascotEnter
      700ms
      cubic-bezier(.16, .84, .24, 1.16)
      both,

    duduqCompletionMascotFloat
      3.4s
      ease-in-out
      760ms
      infinite;
}


/* =========================================================
   ACHIEVEMENT
   ========================================================= */

.duduq-completion-achievement,
.duduq-completion-achievement-star {
  display: none !important;
}


/* =========================================================
   TÍTULO
   ========================================================= */

.duduq-completion-title {
  position: relative;
  z-index: 5;

  width: 100%;
  max-width: 620px;

  margin:
    0 0 16px;

  color:
    var(--duduq-completion-blue);

  font-family:
    var(--duduq-completion-font);

  font-size:
    clamp(36px, 4.3vw, 50px);

  font-weight: 900;

  line-height: 1.02;

  letter-spacing: -.025em;

  text-wrap: balance;

  text-shadow:
    0 2px 0 rgba(255, 255, 255, .94);

  animation:
    duduqCompletionContentIn
    430ms
    110ms
    ease-out
    both;
}


/* =========================================================
   MENSAGEM
   ========================================================= */

.duduq-completion-message {
  position: relative;
  z-index: 5;

  width: min(560px, 100%);

  margin:
    0 0 10px;

  color:
    var(--duduq-completion-text);

  font-family:
    var(--duduq-completion-font);

  font-size:
    clamp(16px, 1.5vw, 18px);

  font-weight: 800;

  line-height: 1.38;

  letter-spacing: 0;

  text-wrap: balance;

  animation:
    duduqCompletionContentIn
    430ms
    170ms
    ease-out
    both;
}


/* =========================================================
   BADGE DE PROGRESSO
   ========================================================= */

.duduq-completion-progress {
  position: relative;
  z-index: 5;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 10px;

  max-width: 100%;

  min-height: 48px;

  margin:
    0 0
    20px;

  padding:
    7px
    18px
    7px
    8px;

  color:
    #0757a5;

  border:
    2px solid
    rgba(134, 187, 235, .66);

  border-radius: 999px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #edf7ff 100%
    );

  box-shadow:
    0 4px 0 rgba(159, 192, 221, .43),
    0 8px 17px rgba(34, 96, 154, .07),
    inset 0 1px 0 #ffffff;

  animation:
    duduqCompletionContentIn
    430ms
    230ms
    ease-out
    both;
}


.duduq-completion-progress-icon {
  width: 32px;
  height: 32px;

  flex: 0 0 32px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #ffffff;

  background:
    linear-gradient(
      180deg,
      #71df24 0%,
      var(--duduq-completion-green) 62%,
      #45b300 100%
    );

  box-shadow:
    0 4px 0
    var(--duduq-completion-green-dark),

    inset 0 2px 0
    rgba(255, 255, 255, .36);

  font-family:
    var(--duduq-completion-font);

  font-size: 18px;

  font-weight: 900;

  line-height: 1;
}


.duduq-completion-progress-text {
  font-family:
    var(--duduq-completion-font);

  font-size:
    clamp(15px, 1.45vw, 17px);

  font-weight: 900;

  line-height: 1.15;

  text-align: left;
}


/* =========================================================
   AÇÕES
   ========================================================= */

.duduq-completion-actions {
  position: relative;
  z-index: 5;

  width: min(410px, 100%);

  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;

  gap: 10px;

  margin-top: 0;

  animation:
    duduqCompletionContentIn
    430ms
    290ms
    ease-out
    both;
}


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

.duduq-completion-button {
  position: relative;

  appearance: none;
  -webkit-appearance: none;

  width: 100%;
  min-height: 58px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding:
    12px
    26px;

  cursor: pointer;

  border-radius: 18px;

  font-family:
    var(--duduq-completion-font);

  font-size:
    clamp(17px, 1.6vw, 19px);

  font-weight: 900;

  line-height: 1;

  letter-spacing: .005em;

  text-transform: uppercase;

  transition:
    transform 150ms ease,
    filter 150ms ease,
    box-shadow 150ms ease;
}


/* Primary. */

.duduq-completion-button--primary {
  border:
    2px solid
    var(--duduq-completion-blue-dark);

  color: #ffffff;

  background:
    linear-gradient(
      180deg,
      #238fe9 0%,
      #0871d5 58%,
      #005bb8 100%
    );

  box-shadow:
    0 6px 0
    var(--duduq-completion-blue-dark),

    0 12px 22px
    rgba(0, 82, 165, .18),

    inset 0 2px 0
    rgba(255, 255, 255, .28);
}


.duduq-completion-button--primary::before {
  content: "";

  position: absolute;

  top: 5px;
  left: 14%;

  width: 72%;
  height: 2px;

  border-radius: 999px;

  background:
    rgba(255, 255, 255, .40);

  pointer-events: none;
}


.duduq-completion-button--primary:hover:not(:disabled) {
  transform:
    translateY(-2px);

  filter:
    brightness(1.035)
    saturate(1.02);

  box-shadow:
    0 8px 0
    var(--duduq-completion-blue-dark),

    0 16px 26px
    rgba(0, 82, 165, .20),

    inset 0 2px 0
    rgba(255, 255, 255, .30);
}


.duduq-completion-button--primary:active:not(:disabled) {
  transform:
    translateY(4px);

  box-shadow:
    0 2px 0
    var(--duduq-completion-blue-dark),

    0 6px 11px
    rgba(0, 82, 165, .15),

    inset 0 2px 0
    rgba(255, 255, 255, .22);
}


/* Secondary. */

.duduq-completion-button--secondary {
  border:
    2px solid
    #b4c9dd;

  color:
    var(--duduq-completion-blue-deep);

  background:
    #ffffff;

  box-shadow:
    0 4px 0
    #aabdd0,

    inset 0 1px 0
    #ffffff;
}


.duduq-completion-button--secondary:hover:not(:disabled) {
  transform:
    translateY(-1px);

  background:
    #f7fbff;
}


/* Foco acessível sem anel visual permanente. */

.duduq-completion-button:focus {
  outline: none;
}

.duduq-completion-button:focus-visible {
  outline:
    3px solid
    rgba(0, 101, 202, .20);

  outline-offset: 4px;
}


/* =========================================================
   FOOTER OPCIONAL
   ========================================================= */

.duduq-completion-footer {
  position: relative;
  z-index: 5;

  max-width: 520px;

  margin:
    4px 0
    0;

  color: #8293a4;

  font-family:
    var(--duduq-completion-font);

  font-size: 13px;

  font-weight: 700;

  line-height: 1.35;
}


/* =========================================================
   CONFETE DE ESTRELAS
   ========================================================= */

.duduq-completion-confetti {
  position: absolute;
  z-index: 7;
  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.duduq-completion-star {
  position: absolute;

  top: -46px;
  left:
    var(--duduq-star-x, 50%);

  display: block;

  font-size:
    clamp(
      24px,
      calc(
        var(--duduq-star-size, 18px)
        * 1.42
      ),
      40px
    );

  line-height: 1;

  color:
    #ffc928;

  opacity: 0;

  text-shadow:
    0 2px 0
    rgba(150, 101, 0, .08);

  filter:
    drop-shadow(
      0 5px 5px
      rgba(29, 69, 107, .12)
    );

  transform-origin: center;

  animation:
    duduqCompletionStarFall
    2900ms
    cubic-bezier(.15, .70, .25, 1)
    var(--duduq-star-delay, 0ms)
    both;
}


.duduq-completion-star[data-variant="1"] {
  color: #ffca32;
}


.duduq-completion-star[data-variant="2"] {
  color: #42a7f5;
}


.duduq-completion-star[data-variant="3"] {
  color: #ffe67a;
}


/* =========================================================
   ANIMAÇÕES — TELA
   ========================================================= */

@keyframes duduqCompletionScreenIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


@keyframes duduqCompletionCardIn {
  from {
    opacity: 0;

    transform:
      translateY(14px)
      scale(.978);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* =========================================================
   ANIMAÇÕES — MASCOTE
   ========================================================= */

@keyframes duduqCompletionMascotEnter {
  0% {
    opacity: 0;

    transform:
      translateY(22px)
      scale(1.86);
  }

  70% {
    opacity: 1;

    transform:
      translateY(-4px)
      scale(2.12);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(2.12);
  }
}


/* Levitação pura: a escala permanece constante.
   Não há mais efeito de respiração nem rotação contínua. */
@keyframes duduqCompletionMascotFloat {
  0%,
  100% {
    transform:
      translateY(0)
      scale(2.12);
  }

  50% {
    transform:
      translateY(-9px)
      scale(2.12);
  }
}


@keyframes duduqCompletionMascotShadow {
  0%,
  100% {
    opacity: .20;

    transform:
      translateX(-50%)
      scaleX(1);
  }

  50% {
    opacity: .09;

    transform:
      translateX(-50%)
      scaleX(.76);
  }
}


/* =========================================================
   ANIMAÇÕES — CONTEÚDO
   ========================================================= */

@keyframes duduqCompletionContentIn {
  from {
    opacity: 0;

    transform:
      translateY(7px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}


/* =========================================================
   ANIMAÇÃO — CONFETE
   ========================================================= */

@keyframes duduqCompletionStarFall {
  0% {
    opacity: 0;

    transform:
      translate3d(
        0,
        -26px,
        0
      )
      scale(.52)
      rotate(0deg);
  }

  12% {
    opacity: .98;
  }

  45% {
    opacity: 1;
  }

  78% {
    opacity: .88;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        var(--duduq-star-drift, 0px),
        76vh,
        0
      )
      scale(1.04)
      rotate(
        var(--duduq-star-rotation, 180deg)
      );
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 820px) {
  .duduq-completion {
    padding:
      22px
      16px;
  }

  .duduq-completion-card {
    width:
      min(690px, 95vw);

    margin-top:
      58px;

    padding:
      64px
      30px
      30px;

    border-radius:
      30px;
  }

  .duduq-completion-card::before {
    border-radius:
      25px;
  }

  .duduq-completion-hero {
    top:
      -113px;

    width:
      302px;

    height:
      260px;
  }

  .duduq-completion-title {
    font-size:
      clamp(
        35px,
        7vw,
        47px
      );
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 560px) {
  .duduq-completion {
    padding:
      18px
      10px
      22px;
  }

  .duduq-completion-card {
    width: 100%;

    min-height: 0;

    margin-top:
      54px;

    gap:
      0;

    padding:
      62px
      18px
      26px;

    border-radius:
      28px;

    box-shadow:
      0 6px 0
      rgba(137, 162, 188, .52),

      0 20px 42px
      rgba(27, 65, 105, .17);
  }

  .duduq-completion-card::before {
    border-radius: 23px;
  }

  .duduq-completion-hero {
    top:
      -96px;

    width:
      264px;

    height:
      228px;
  }

  .duduq-completion-title {
    font-size:
      clamp(
        32px,
        9vw,
        41px
      );
  }

  .duduq-completion-message {
    font-size: 15px;

    line-height: 1.38;
  }

  .duduq-completion-progress {
    min-height: 46px;

    gap: 9px;

    padding:
      7px
      15px
      7px
      8px;
  }

  .duduq-completion-progress-icon {
    width: 31px;

    height: 31px;

    flex-basis: 31px;

    font-size: 17px;
  }

  .duduq-completion-progress-text {
    font-size: 14px;
  }

  .duduq-completion-actions {
    margin-top: 0;
  }

  .duduq-completion-button {
    min-height: 53px;

    font-size: 17px;
  }

  .duduq-completion-star {
    font-size:
      clamp(
        20px,
        calc(
          var(--duduq-star-size, 18px)
          * 1.28
        ),
        34px
      );

    animation-duration: 2700ms;
  }
}


/* =========================================================
   TELAS DE BAIXA ALTURA
   ========================================================= */

@media (max-height: 720px) and (min-width: 700px) {
  .duduq-completion {
    padding-block:
      12px;
  }

  .duduq-completion-card {
    margin-top: 58px;

    gap: 0;

    padding:
      58px
      44px
      28px;
  }

  .duduq-completion-hero {
    top: -103px;

    width: 276px;

    height: 232px;
  }

  .duduq-completion-title {
    font-size:
      clamp(
        33px,
        4.2vw,
        43px
      );
  }

  .duduq-completion-message {
    font-size: 15px;
  }

  .duduq-completion-progress {
    min-height: 44px;
  }

  .duduq-completion-progress-icon {
    width: 30px;

    height: 30px;

    flex-basis: 30px;
  }

  .duduq-completion-actions {
    margin-top: 0;
  }

  .duduq-completion-button {
    min-height: 54px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .duduq-completion,
  .duduq-completion-card,
  .duduq-completion-mascot,
  .duduq-completion-hero::before,
  .duduq-completion-title,
  .duduq-completion-message,
  .duduq-completion-progress,
  .duduq-completion-actions,
  .duduq-completion-star {
    animation: none !important;

    transition: none !important;
  }

  .duduq-completion-mascot {
    transform:
      scale(2.12)
      !important;
  }

  .duduq-completion-confetti {
    display: none !important;
  }
}