:root{
    --font-size: clamp(32px, 14vw, 140px);
    --letter-wave-step: 90ms;
    --t-intro: 1000ms;
    --t-wave:  900ms;
    --t-outro: 800ms;

    --timing: cubic-bezier(.2,.8,.2,1);
    --timing-cinematic: cubic-bezier(.16,.84,.44,1);

    --top-gap: 16px;
    --header-clearance: 84px;
  }

  *{ box-sizing: border-box; }
  html,body{
    height:100%;
    margin:0;
    background:#fff;
    color:#000;
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
    overflow:hidden;
  }

  /* ===== 1) TÍTULO (intro) ===== */
  .hero{ min-height:80vh; display:grid; place-items:center; }
  .title{
    display:inline-flex; line-height:1; font-weight:900; letter-spacing:.05em;
    font-size:var(--font-size); transform-origin:50% 50%;
    opacity:0; transform:scale(.7);
    animation:popIn var(--t-intro) cubic-bezier(.2,.85,.2,1) forwards;
    will-change:transform,opacity;
  }
  .char{ display:inline-block; transform-origin:50% 70%; }
  .title.wave-once .char{
    animation:wave var(--t-wave) ease-in-out 1 alternate;
    animation-delay:calc(var(--i) * var(--letter-wave-step));
    animation-fill-mode:forwards;
  }
  .title.outro{ animation:shrinkOut var(--t-outro) cubic-bezier(.65,.05,.36,1) forwards; }

  @keyframes popIn{0%{transform:scale(.7);opacity:0}60%{transform:scale(1.2);opacity:1}100%{transform:scale(1);opacity:1}}
  @keyframes wave{0%{transform:scale(1)}100%{transform:scale(1.18)}}
  @keyframes shrinkOut{0%{transform:scale(1);opacity:1;filter:blur(0)}100%{transform:scale(.02);opacity:0;filter:blur(1px)}}
  @keyframes buttonMorph{
    0%{padding:18px 56px}
    15%{padding:18px 58px}
    30%{padding:18px 62px}
    45%{padding:18px 68px}
    65%{padding:18px 76px}
    80%{padding:18px 84px}
    95%{padding:18px 87px}
    100%{padding:18px 88px}
  }

  /* ===== 2) CTA ===== */
  .cta{
    position:fixed; left:50%;
    top:100%;
    transform:translate(-50%, -40%);
    opacity:0;
    display:flex; flex-direction:column; align-items:center; gap:24px;
    pointer-events:none;
  }
  .cta-in{
    top:50%;
    transform:translate(-50%, -50%);
    opacity:1;
    transition: top .8s var(--timing-cinematic), transform .8s var(--timing-cinematic), opacity .6s var(--timing-cinematic);
    pointer-events:auto;
  }

  /* versão inline (após fixar no topo) */
  .cta-inline{
    position: static !important;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    margin: 0 auto 8px auto;
  }

  .next-text{
    font-size:clamp(18px, 5vw, 28px);
    font-weight:600; text-align:center;
    transition:opacity .45s var(--timing);
  }
  .next-text.fade-out{ opacity:0; }

  .next-button span{ transition: opacity 300ms ease-out; }
  .next-button span.fade-out{ opacity: 0; }
  .next-button{
    display:inline-block; background:#000; color:#fff; border:none; border-radius:999px;
    padding:18px 56px; font-size:clamp(20px, 5vw, 32px); font-weight:800; line-height:1; white-space:nowrap;
    cursor:pointer; box-shadow:0 4px 10px rgba(0,0,0,.15);
    transition: transform .2s ease, box-shadow .2s ease, background-color .25s ease, color .25s ease;
    min-width:auto;
  }
  .next-button.morphing{ animation: buttonMorph 800ms cubic-bezier(.25,.46,.45,.94) forwards; }
  .next-button:active{ transform:translateY(1px); box-shadow:0 3px 8px rgba(0,0,0,.2); }
  .next-button.as-title{ cursor:default; pointer-events:none; box-shadow:0 2px 6px rgba(0,0,0,.12); }

  /* ===== CONTEÚDO ===== */
  main{
    max-width:920px;
    margin:0 auto;
    height:calc(100vh - 60px);
    padding: calc(var(--header-clearance) + var(--top-gap)) 12px 6px;
    opacity:0;
    transform:translateY(8px);
    pointer-events:none;
    overflow-y:auto;
  }
  .content-show main{
    padding-top: var(--top-gap);
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
    transition: opacity .45s var(--timing), transform .45s var(--timing);
  }

  /* Hide main content completely when floating animation starts */
  .floating-active main{
    opacity:0 !important;
    pointer-events:none !important;
    overflow:hidden !important;
  }

  .questionnaire-section{ opacity:1; transform:none; transition:none; }
  .questionnaire-section.hidden{ display:none; }
  .card{ border:1px solid #e5e7eb; border-radius:14px; padding:14px; background:#fff; box-shadow: 0 2px 10px rgba(0,0,0,.04); }

  #questionContainer .card{ min-height:420px; }
  .question-content{ min-height:260px; opacity:1; transition:opacity 220ms var(--timing); }
  .qc-fade-out{ opacity:0; }
  .qc-fade-in { opacity:1; }

  .instructions{ margin: 10px 0; line-height: 1.5; }
  .instructions p{ margin: 6px 0; }

  .start-quiz-btn, .small-btn{
    background:#000; color:#fff; border:none; border-radius:8px;
    padding:12px 28px; font-size:16px; font-weight:600; cursor:pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  .start-quiz-btn:hover, .small-btn:hover{ transform:translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,.15); }
  .result-content{ margin:10px 0 0 0; }

  /* ===== Barra de progresso ZzZZzz ===== */
  .progress-zzz{ position:relative; width:100%; height:56px; background:none; --pct: 0%; margin-top: 24px; }
  .zzz-track{
    position:absolute; left:8px; right:8px; top:50%; transform:translateY(-50%);
    height:56px; border-radius:999px; 
    background: linear-gradient(135deg, rgba(240,248,255,0.4) 0%, rgba(248,250,252,0.6) 50%, rgba(241,245,249,0.4) 100%);
    box-shadow: 
      inset 0 2px 8px rgba(0,0,0,0.03),
      inset 0 -2px 8px rgba(255,255,255,0.4),
      0 1px 3px rgba(0,0,0,0.05);
    backdrop-filter: blur(2px);
    overflow:hidden;
  }
  .zzz-track::before{
    content:""; position:absolute; inset:0; 
    background: radial-gradient(ellipse at 30% 20%, rgba(255,255,255,0.6) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(255,255,255,0.4) 0%, transparent 50%);
    border-radius:999px;
  }
  .zzz-track::after{
    content:""; position:absolute; inset:0; 
    background: linear-gradient(90deg, 
      rgba(16,200,169,0.08) 0%, 
      rgba(16,200,169,0.12) 30%, 
      rgba(16,200,169,0.15) 70%, 
      rgba(16,200,169,0.18) 100%);
    clip-path: inset(0 calc(100% - var(--pct)) 0 0); 
    -webkit-clip-path: inset(0 calc(100% - var(--pct)) 0 0);
    filter: blur(0.5px);
    border-radius:999px;
  }
  .zzz-fill{
    position:absolute; left:8px; right:8px; top:50%; transform:translateY(-50%);
    height:56px; border-radius:999px; overflow:hidden; color:#10c8a9;
    clip-path: inset(0 calc(100% - var(--pct)) 0 0); -webkit-clip-path: inset(0 calc(100% - var(--pct)) 0 0);
  }
  .zz{
    position:absolute; left:0; top:0; transform-origin:50% 50%;
    transform: translate(-50%,-50%) rotate(var(--rot,-4deg)) scale(var(--scale,1));
    line-height:1; font-weight:900; user-select:none; color:currentColor;
    filter: saturate(1.05); text-shadow: 0 0 6px rgba(16,200,169,.18);
    animation: zz-float var(--dur,2.2s) ease-in-out var(--delay,.0s) infinite alternate;
  }
  @keyframes zz-float{
    0%{ transform: translate(-50%,-50%) rotate(var(--rot,-4deg)) scale(var(--scale,1)); }
    100%{ transform: translate(calc(-50% + 0px), calc(-50% + var(--dy,7px))) rotate(calc(var(--rot,-4deg) + 3deg)) scale(var(--scale,1)); }
  }

  /* ===== Opções de pergunta ===== */
  .question-content h3{ margin:0 0 12px 0; font-size:18px; line-height:1.4; }
  .radio-group{ display:flex; flex-direction:column; gap:8px; margin:12px 0 0 0; }
  .radio-option{
    display:flex; align-items:center; gap:10px; padding:10px;
    border:1px solid #ddd; border-radius:8px; cursor:pointer; transition: all 0.2s ease;
  }
  .radio-option:hover{ border-color:#1abc9c; background:#f8f9fa; }
  .radio-option input[type="radio"]{ width:auto; margin:0; }
  .radio-option.selected{ border-color:#1abc9c; background:#f0fbfa; }
  .radio-option label{ margin:0; cursor:pointer; flex:1; }

  /* ===== Pickers unificados ===== */
  .picker{
    width:288px; height:216px; overflow-y:auto; border:2px solid #e3e8ea; border-radius:16px;
    background:linear-gradient(135deg, #fdfdfd 0%, #f8f9fa 100%);
    margin:12px auto; scroll-behavior:auto; scrollbar-width:thin; scrollbar-color:#d1d5db transparent;
    box-shadow:0 4px 16px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.8);
    position:relative; padding:12px 0;
  }
  .picker-option{
    display:flex; align-items:center; justify-content:center;
    padding:8px 20px; cursor:pointer; transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight:500; min-height:36px; position:relative; margin:1px 8px; border-radius:8px;
  }
  .picker-option:hover{
    background:rgba(26,188,156,0.08); transform:scale(1.02); box-shadow:0 2px 8px rgba(26,188,156,0.15);
  }
  .picker-option.selected{
    background:linear-gradient(135deg, #1abc9c 0%, #16a085 100%); color:#fff; font-weight:700; font-size:17px;
    box-shadow:0 6px 20px rgba(26,188,156,0.35), inset 0 1px 0 rgba(255,255,255,0.25), 0 0 0 3px rgba(26,188,156,0.2);
    transform:scale(1.08);
  }
  .center-option{}

  .time-hours{ color:#2c3e50; }
  .time-minutes{ color:#5a6c7d; margin-left:4px; }
  .time-unit{ font-size:0.82em; opacity:0.85; margin-left:1px; }
  .picker-option.selected .time-hours,
  .picker-option.selected .time-minutes,
  .picker-option.selected .time-unit{ color:#fff; opacity:1; }

  /* ===== Componentes do score ===== */
  .components-breakdown {
    margin-top: 10px; /* volta ao normal */
    transition: opacity 1s ease-out, transform 1s ease-out;
  }
  .components-breakdown.fade-away{
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }
  .component-item{
    display:flex; justify-content:space-between; align-items:center;
    padding:6px 0; margin:2px 0; border-bottom:1px solid #eee;
    opacity:0; transform:translateY(20px); animation: slideInFromBottom 0.6s ease-out forwards;
  }
  .component-name{
    flex:1 1 auto; font-weight:500; padding-right:8px; line-height:1.25;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  }
  .component-score-container{ display:flex; align-items:center; gap:10px; min-width:120px; flex:0 0 auto; }
  .component-bar-container{
    width:120px; height:16px; background:#e0e0e0; border-radius:8px; border:1.5px solid #333;
    box-shadow:inset 0 2px 4px rgba(0,0,0,0.2); overflow:hidden; position:relative;
  }
  .component-bar{
    position:absolute; inset:0; background:linear-gradient(90deg, #16a34a 0%, #f59e0b 28.6%, #dc2626 100%);
    --pct: 0%; clip-path: inset(0 calc(100% - var(--pct)) 0 0); -webkit-clip-path: inset(0 calc(100% - var(--pct)) 0 0);
    transition: clip-path 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), -webkit-clip-path 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: clip-path; border-radius:8px; box-shadow:inset 0 2px 4px rgba(255,255,255,0.3);
  }
  .component-bar.invert-gradient{ background:linear-gradient(90deg, #dc2626 0%, #f59e0b 28.6%, #16a34a 100%); }
  @keyframes slideInFromBottom{ 0%{ opacity:0; transform:translateY(20px);} 100%{ opacity:1; transform:translateY(0);} }

  /* ===== Container fixo para animações do medidor ===== */
  .animation-stage {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
    z-index: 1000;
  }

  /* ===== Conta-giros SVG ===== */
  /* ✅ Alternativa: usar div HTML ao invés de texto SVG */
  .final-score-meter {
    position: relative;
    width: 240px;
    height: auto;
    margin: 6px auto 10px auto; /* volta ao normal */
    transform-origin: center center;
    transition: transform 1200ms var(--timing-cinematic);
    will-change: transform;
    contain: layout style paint;
  }

  .gauge{ display:block; width:100%; height:auto; }
  .gauge .track{ fill:none; stroke:#e5e7eb; stroke-width:22; stroke-linecap:round; }
  .gauge .progress{ fill:none; stroke-width:22; stroke-linecap:round; stroke:url(#gaugeArcGradient); stroke-dasharray:100 100; stroke-dashoffset:100; }
  .gauge .value{ font: 900 48px/1 'Courier New', monospace; fill:#111827; text-anchor:middle; }
  .gauge .label {
    display: none;
  }

  
  #bibliographyBtn{
    transition: opacity 1s ease-out, transform 1s ease-out;
  }
  #bibliographyBtn.fade-away{
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
  }

  /* Estado inicial quando o clone entra no palco de animação */
  .final-score-meter.floating-seed{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
    z-index: 1001;
  }

  /* Estado final (animado) */
  .final-score-meter.floating-stage-1{
    transform: translate(-50%, -50%) translateY(80px) scale(1.2);
  }
  /* Acessibilidade */
  @media (prefers-reduced-motion: reduce){
    .title,.char,.cta,main{ animation:none !important; transition:none !important; }
    .cta{ top:50% !important; transform:translate(-50%, -50%) !important; opacity:1 !important; pointer-events:auto !important; }
    .content-show main{ opacity:1 !important; transform:none !important; }
    .final-score-meter{ animation:none !important; transition:none !important; }
  }

  /* Fade-out genérico e removível */
  .fade-out{
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .8s ease-out, transform .8s ease-out;
    pointer-events: none;
  }

  /* ===== BOTÕES FINAIS FLUTUANTES ===== */
  .final-buttons {
    position: fixed;
    top: calc(var(--header-clearance) + 48px); /* abaixo do título fixo */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    display: flex;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    pointer-events: none;
    margin: 0;
    transition: opacity 0.5s ease-out;
  }


  .final-buttons.show {
    opacity: 1;
    pointer-events: auto;
  }

  .final-button {
    background: #000;
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 16px 32px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,.2);
    white-space: nowrap;
  }

  .final-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,.3);
  }

  .final-button.restart {
    background: #dc2626;
  }

  .final-button.continue {
    background: #16a34a;
  }

  /* Fade para resultados */
  .result-fade {
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.5s ease-out;
  }

  .final-button.hidden {
    display: none !important;
  }