:root { --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); }

body {
    background: #fcfcfc;
    color: #111;
    overflow-x: hidden;
    width: 100vw;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    transition: background 1s var(--ease-out-expo), color 1s var(--ease-out-expo);
}

body.locked-scroll {
    overflow: hidden;
    height: 100vh;
}
/* Mobile: libera scroll — hero empilhado ultrapassa 100vh */
@media (max-width: 899px) {
    body.locked-scroll {
        overflow-y: auto;
        height: auto;
    }
}

body.dark-theme { background: #1c1917; color: #fdfdfd; }

.noise { position: fixed; inset: 0; pointer-events: none; opacity: 0.35; z-index: 999; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

.glass { background: rgba(255,255,255,0.7); backdrop-filter: blur(24px); border-bottom: 1px solid rgba(28,25,23,0.05); }
.dark-theme .glass { background: rgba(28,25,23,0.85); border-bottom: 1px solid rgba(255,255,255,0.1); }

/* Typography */
.text-transparent-stroke {
    color: transparent; -webkit-text-stroke: 1.5px rgba(0,0,0,0.1);
    background: linear-gradient(0deg, #1c1917, #1c1917); background-size: 100% 0%;
    background-repeat: no-repeat; background-position: bottom;
    -webkit-background-clip: text; transition: all 1s var(--ease-out-expo);
}
.text-transparent-stroke:hover, .hero-ready .text-transparent-stroke { background-size: 100% 100%; -webkit-text-stroke: 1.5px transparent; }

.flashlight-card { position: relative; overflow: hidden; }
.flashlight-card::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(800px circle at var(--x, -999px) var(--y, -999px), rgba(255,255,255,1) 0%, transparent 40%);
    opacity: 0; transition: opacity 0.5s;
}
.flashlight-card:hover::before { opacity: 1; }

/* Buttons */
.btn-icon-slide { overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: all 0.3s ease; cursor: pointer;}
.btn-icon-slide iconify-icon { transition: transform 0.4s var(--ease-bounce), opacity 0.4s ease; transform: translateX(-20px); opacity: 0; width: 0; }
.btn-icon-slide:hover iconify-icon { transform: translateX(0); opacity: 1; width: 16px; }
.btn-icon-slide:hover { padding-left: 1.5rem; }

.btn-glow { position: relative; z-index: 1; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.btn-glow::after {
    content: ''; position: absolute; inset: -3px; z-index: -1; border-radius: inherit;
    background: linear-gradient(45deg, #1c1917, #78716c, #1c1917); background-size: 200% 200%;
    animation: shimmer 3s infinite linear; filter: blur(12px); opacity: 0; transition: opacity 0.5s ease;
}
.btn-glow:hover::after, .btn-glow.pulse-glow::after { opacity: 0.6; }
.btn-glow.pulse-glow::after { background: linear-gradient(45deg, #10b981, #34d399, #10b981); background-size: 200% 200%; }
.btn-glow:hover { transform: scale(1.02); }

@keyframes shimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }

/* Step Panels */
.step-panel { display: none; opacity: 0; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 70vh; padding: 40px 0; }
.step-panel.show { display: flex; }
.step-panel.active { opacity: 1; }

/* ===================== QUIZ OPTIONS ===================== */
.quiz-option {
    position: relative; overflow: hidden;
    transition: all 0.35s var(--ease-out-expo);
    cursor: pointer;
}
.quiz-option::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: radial-gradient(600px circle at var(--x, -999px) var(--y, -999px), rgba(28,25,23,0.06) 0%, transparent 50%);
    opacity: 0; transition: opacity 0.4s;
}
.quiz-option:hover::before { opacity: 1; }
.quiz-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.12);
    border-color: #1c1917;
}
.quiz-option.selected {
    border-color: #1c1917; background: #1c1917; color: white;
    transform: scale(1.01); box-shadow: 0 20px 40px -10px rgba(28,25,23,0.25);
}
.quiz-option.selected .option-letter { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.2); color: white; }
.quiz-option.selected .option-text { color: white; }
.quiz-option.selected .option-check { opacity: 1; transform: scale(1); }
.option-check { opacity: 0; transform: scale(0.5); transition: all 0.3s var(--ease-bounce); }

/* Progress bar */
.quiz-progress-fill { transition: width 0.7s var(--ease-out-expo); }
.quiz-question-wrap { transition: all 0.4s var(--ease-out-expo); }

/* ============ FEEDBACK DE RESPOSTA POR LETRA ============ */
.quiz-option.selected.response-a {
    border-color: #16a34a; background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: #14532d; box-shadow: 0 8px 24px -6px rgba(22,163,74,0.2);
}
.quiz-option.selected.response-a .option-letter { background: #16a34a; border-color: #16a34a; color: white; }
.quiz-option.selected.response-a .option-text { color: #14532d; }
.quiz-option.selected.response-a .option-check { color: #16a34a; opacity: 1; transform: scale(1); }

.quiz-option.selected.response-b {
    border-color: #d97706; background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: #78350f; box-shadow: 0 8px 24px -6px rgba(217,119,6,0.2);
}
.quiz-option.selected.response-b .option-letter { background: #d97706; border-color: #d97706; color: white; }
.quiz-option.selected.response-b .option-text { color: #78350f; }
.quiz-option.selected.response-b .option-check { color: #d97706; opacity: 1; transform: scale(1); }
.response-b-pulse { animation: amber-pulse 0.6s var(--ease-bounce); }
@keyframes amber-pulse {
    0% { box-shadow: 0 0 0 0 rgba(217,119,6,0.4); }
    50% { box-shadow: 0 0 0 12px rgba(217,119,6,0.0); }
    100% { box-shadow: 0 0 0 0 rgba(217,119,6,0); }
}

.quiz-option.selected.response-c {
    border-color: #dc2626; background: linear-gradient(135deg, #fff1f2, #fee2e2);
    color: #7f1d1d; box-shadow: 0 8px 24px -6px rgba(220,38,38,0.2);
}
.quiz-option.selected.response-c .option-letter { background: #dc2626; border-color: #dc2626; color: white; }
.quiz-option.selected.response-c .option-text { color: #7f1d1d; }
.quiz-option.selected.response-c .option-check { color: #dc2626; opacity: 1; transform: scale(1); }
.alert-shake { animation: alert-shake 0.5s var(--ease-bounce); }
@keyframes alert-shake {
    0%, 100% { transform: translateX(0); }
    15% { transform: translateX(-8px); } 30% { transform: translateX(8px); }
    45% { transform: translateX(-5px); } 60% { transform: translateX(5px); }
    75% { transform: translateX(-3px); }
}

/* Flash overlay */
#response-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9998; opacity: 0; transition: opacity 0.15s ease; }
#response-overlay.flash-red   { background: rgba(220,38,38,0.06); }
#response-overlay.flash-amber { background: rgba(217,119,6,0.04); }
#response-overlay.flash-green { background: rgba(22,163,74,0.03); }

/* Alert chip */
#alert-chip {
    position: fixed; top: 80px; left: 50%; transform: translateX(-50%) translateY(-80px);
    background: #1c1917; color: white;
    font-size: 11px; font-family: 'JetBrains Mono', monospace;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
    padding: 8px 20px; border-radius: 999px;
    display: flex; align-items: center; gap: 8px;
    z-index: 9999; pointer-events: none;
    transition: transform 0.4s var(--ease-bounce), opacity 0.3s ease;
    opacity: 0; box-shadow: 0 4px 20px rgba(28,25,23,0.35);
}
#alert-chip.visible { transform: translateX(-50%) translateY(0); opacity: 1; }

.icon-swing:hover iconify-icon { animation: swing 0.8s ease-in-out; }
@keyframes swing { 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }

.progress-bar-inner { transition: width 0.6s var(--ease-out-expo); }

/* ============ RESULTADO ============ */
@keyframes gauge-fill { from { stroke-dashoffset: 251; } to { stroke-dashoffset: var(--target-offset); } }
.gauge-arc { animation: gauge-fill 1.4s var(--ease-out-expo) forwards; stroke-dasharray: 251; stroke-dashoffset: 251; }

.result-item { transition: all 0.3s var(--ease-out-expo); }
.result-item:hover { transform: translateX(6px); }

.result-leve    { --severity-color: #16a34a; --severity-bg: #f0fdf4; --severity-border: #bbf7d0; }
.result-moderado{ --severity-color: #d97706; --severity-bg: #fffbeb; --severity-border: #fde68a; }
.result-travado { --severity-color: #dc2626; --severity-bg: #fff1f2; --severity-border: #fecaca; }

/* Loading */
@keyframes loading-fill { from { width: 0%; } to { width: 100%; } }
.loading-bar-anim { animation: loading-fill 7.2s linear forwards; }

/* GSAP Hero */
.hero-line { transform: translateY(40px); opacity: 0; }

/* Glass Form */
.glass-form { background: rgba(255,255,255,0.4); backdrop-filter: blur(40px); -webkit-backdrop-filter: blur(40px); border: 1px solid rgba(255,255,255,0.6); box-shadow: 0 30px 60px -15px rgba(0,0,0,0.05), inset 0 0 0 1px rgba(255,255,255,0.5); }
.dark-theme .glass-form { background: rgba(28,25,23,0.4); border: 1px solid rgba(255,255,255,0.1); }

.chroma-blur { filter: blur(60px); mix-blend-mode: multiply; will-change: transform; transition: opacity 2s ease; }

/* Float Input */
.float-input { position: relative; margin-bottom: 16px; width: 100%; z-index: 10; }
.float-input input {
    width: 100%; border: 1px solid #d6d3d1; border-radius: 10px; padding: 22px 16px 8px; height: 58px;
    outline: none; transition: all 0.3s ease; background: rgba(255,255,255,0.7); font-size: 14px; font-weight: 500; color: #1c1917;
}
.float-input input:focus { border-color: #1c1917; background: #ffffff; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
.float-input input.error { border-color: #ef4444; background: #fef2f2; }
.float-input label {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    font-size: 14px; color: #a8a29e; transition: all 0.25s ease; pointer-events: none;
}
.float-input input:focus ~ label, .float-input input:not(:placeholder-shown) ~ label {
    top: 10px; transform: none; font-size: 10px; font-weight: 600; color: #78716c; text-transform: uppercase; letter-spacing: 0.06em;
}

/* Buttons */
.btn-sweep { position: relative; overflow: hidden; transition: all 0.4s var(--ease-out-expo); transform: translateZ(0); }
.btn-sweep::after {
    content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
    transform: skewX(-20deg); transition: all 0.7s var(--ease-out-expo);
}
.btn-sweep:hover::after { left: 200%; }
.btn-sweep:hover { box-shadow: 0 20px 40px -10px rgba(28,25,23,0.4); transform: translateY(-2px) translateZ(0); }

.shake { animation: shake 0.4s var(--ease-bounce); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-4px); } }

.icon-bounce:hover iconify-icon, .btn-bounce:hover iconify-icon { animation: icon-pop 0.5s var(--ease-bounce); }
@keyframes icon-pop { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.15); } }

/* Input focus ring */
.float-input-hero { position: relative; z-index: 10; }
.float-input-hero::after {
    content: ''; position: absolute; inset: 0; border-radius: 10px;
    box-shadow: 0 0 0 0px rgba(28,25,23,0); transition: box-shadow 0.4s var(--ease-out-expo); pointer-events: none;
}
.float-input-hero:focus-within::after { box-shadow: 0 0 0 3px rgba(28,25,23,0.08); }

/* Orb animations */
@keyframes drift-1 { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-20px) scale(1.05); } 66% { transform: translate(-20px,15px) scale(0.95); } }
@keyframes drift-2 { 0%, 100% { transform: translate(0,0) scale(1); } 33% { transform: translate(-25px,20px) scale(0.95); } 66% { transform: translate(20px,-15px) scale(1.08); } }
@keyframes drift-3 { 0%, 100% { transform: translate(0,0) scale(1); } 50% { transform: translate(15px,25px) scale(1.03); } }
.orb-drift-1 { animation: drift-1 12s ease-in-out infinite; }
.orb-drift-2 { animation: drift-2 15s ease-in-out infinite; }
.orb-drift-3 { animation: drift-3 18s ease-in-out infinite; }

@keyframes chip-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(28,25,23,0.1); } 50% { box-shadow: 0 0 0 6px rgba(28,25,23,0); } }
.chip-anim { animation: chip-pulse 3s ease-in-out infinite; }

@keyframes arrow-right { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }
.cta-arrow { animation: arrow-right 1.5s ease-in-out infinite; display: inline-flex; }

/* Hero layout grid */
.hero-layout { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: center; gap: 48px; width: 100%; }
@media (max-width: 900px) {
    .hero-layout { grid-template-columns: 1fr; gap: 24px; }
}