/* DESIGN TOKENS */
:root {
  --bg: #09090F;
  --bg-2: #0D0D1A;
  --primary: #6366F1;
  --primary-dim: rgba(99,102,241,.18);
  --accent: #A5B4FC;
  --peak: #E8E3FF;
  --text: #F8F7FF;
  --muted: rgba(248,247,255,.55);
  --dim: rgba(248,247,255,.22);
  --glass-bg: rgba(255,255,255,.04);
  --glass-border: rgba(255,255,255,.08);
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;

  /* Feedback Colors */
  --success-bg: rgba(40,200,100,0.1);
  --success-border: rgba(40,200,100,0.3);
  --success-text: rgba(40,200,100,0.9);
  
  --error-bg: rgba(254,95,87,0.1);
  --error-border: rgba(254,95,87,0.3);
  --error-text: rgba(254,95,87,0.9);
}

/* RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  width: 100vw;
  height: 100vh;
  overflow: hidden; /* Prohibits scroll as requested */
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  user-select: none;
  pointer-events: none; /* Everything operated by keyboard */
}

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

/* GLASSMORPHISM & UTILITIES */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border);
}

.noise-glass { position: relative; }
.noise-glass::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background-image: url('data:image/svg+xml;utf8,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="3" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.4"/%3E%3C/svg%3E');
  background-size: 128px 128px;
  pointer-events: none; z-index: 1; opacity: .2; mix-blend-mode: screen;
}

.text-gradient {
  background: linear-gradient(135deg, var(--peak) 0%, var(--accent) 45%, var(--primary) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.text-gradient-h {
  background: linear-gradient(90deg, var(--peak) 0%, var(--accent) 60%, var(--primary) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}

.g-border { position: relative; isolation: isolate; }
.g-border::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  background: linear-gradient(135deg, rgba(99,102,241,.6) 0%, transparent 40%, rgba(165,180,252,.35) 100%);
  z-index: -1; opacity: 0; transition: opacity .3s;
}
.g-border-always::before { opacity: 1; }

.container { max-width: 1280px; margin: 0 auto; padding: 0 32px; width: 100%; }

/* SCREEN STATES */
.screen {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; z-index: 10;
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.5s;
}
.screen.active { opacity: 1; visibility: visible; z-index: 20; }

/* TELA DE INICIO */
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero__overlay {
  position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(ellipse 80% 50% at 30% 40%, rgba(99,102,241,.12) 0%, transparent 60%),
              radial-gradient(ellipse 60% 40% at 70% 60%, rgba(139,92,246,.10) 0%, transparent 50%),
              linear-gradient(to bottom, rgba(9,9,15,.32) 0%, rgba(9,9,15,.88) 100%);
}
.hero__content { position: relative; z-index: 2; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 40px; }
.hero__logo { max-width: 720px; width: 80vw; display: block; margin: 0 auto; animation: float-logo 6s ease-in-out infinite; filter: drop-shadow(0 0 40px rgba(255,255,255,0.7)); }
@keyframes float-logo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 12px;
  border-radius: 100px; background: var(--primary-dim); border: 1px solid rgba(99,102,241,.3);
  font-size: 14px; font-weight: 500; color: var(--text); font-family: 'Space Mono', monospace;
  animation: badge-glow 3s ease-in-out infinite; margin: 0 auto;
}
.hero__badge-new {
  background: linear-gradient(90deg, var(--primary), var(--accent));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
}
.glow-dot {
  width: 8px; height: 8px; background: var(--primary); border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(99,102,241,.2), 0 0 12px rgba(99,102,241,.6);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes badge-glow { 0%, 100% { box-shadow: 0 0 16px rgba(99,102,241,.15); } 50% { box-shadow: 0 0 28px rgba(99,102,241,.35); } }
@keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 3px rgba(99,102,241,.2), 0 0 12px rgba(99,102,241,.6); } 50% { box-shadow: 0 0 0 6px rgba(99,102,241,.1), 0 0 24px rgba(99,102,241,.8); } }

.orb { position: absolute; border-radius: 50%; filter: blur(80px); animation: orb-float 8s ease-in-out infinite; }
.orb--1 { width: 600px; height: 400px; background: rgba(99,102,241,.06); top: -200px; right: -200px; }
.orb--2 { width: 400px; height: 600px; background: rgba(165,180,252,.04); bottom: -200px; left: -100px; animation-delay: -4s; }
@keyframes orb-float { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(30px,-30px); } }

/* TELA DE PERGUNTA */
.layout-container { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 40px 0; }
.video-container {
  width: 100%; max-width: 800px; height: 45vh; min-height: 300px; margin-bottom: 32px;
  border-radius: var(--r-xl); background: rgba(0,0,0,0.6); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.video-container video { width: 100%; height: 100%; object-fit: contain; }

.question-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: clamp(24px, 3vw, 36px); font-weight: 300;
  letter-spacing: -.03em; margin-bottom: 40px; text-align: center; color: var(--text);
}

.options-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; max-width: 900px;
}
.option-card {
  padding: 24px; border-radius: var(--r-lg); display: flex; align-items: center; gap: 20px;
  background: linear-gradient(145deg, rgba(99,102,241,.06) 0%, rgba(15,15,30,.6) 40%, rgba(165,180,252,.04) 100%);
  border: 1px solid var(--glass-border); position: relative; overflow: hidden;
  transition: transform 0.2s, border-color 0.2s;
}
/* Selected state visual feedback */
.option-card.selected {
  border-color: rgba(99,102,241,.6); transform: scale(0.98); background: rgba(99,102,241,.15);
}

.option-key {
  width: 48px; height: 48px; border-radius: 12px; background: var(--primary-dim); border: 1px solid rgba(99,102,241,.2);
  display: grid; place-items: center; font-family: 'Space Mono', monospace; font-size: 18px; font-weight: 700; color: var(--accent); flex-shrink: 0;
}
.option-text {
  font-family: 'Inter', sans-serif; font-size: 18px; color: var(--text); line-height: 1.5; font-weight: 400;
}

/* TELA DE FEEDBACK */
.feedback-panel {
  border-radius: var(--r-xl); padding: 80px 100px; text-align: center; width: 100%; max-width: 700px;
  background: linear-gradient(145deg, rgba(99,102,241,.08) 0%, rgba(15,15,30,.6) 40%, rgba(165,180,252,.06) 100%);
  transition: all 0.5s ease-in-out;
}
.feedback-title {
  font-family: 'Bricolage Grotesque', sans-serif; font-size: 64px; font-weight: 800; letter-spacing: -.03em;
  margin-bottom: 16px; position: relative; z-index: 2;
}
.feedback-sub {
  font-size: 18px; color: var(--muted); font-family: 'Space Mono', monospace; position: relative; z-index: 2;
}

/* Feedback states classes (applied dynamically) */
.state-success {
  background: linear-gradient(145deg, var(--success-bg) 0%, rgba(15,30,15,.7) 100%);
  border-color: var(--success-border); box-shadow: 0 0 100px rgba(40,200,100,0.15);
}
.state-success .feedback-title { color: var(--success-text); text-shadow: 0 2px 24px rgba(40,200,100,0.4); }

.state-error {
  background: linear-gradient(145deg, var(--error-bg) 0%, rgba(30,15,15,.7) 100%);
  border-color: var(--error-border); box-shadow: 0 0 100px rgba(254,95,87,0.15);
}
.state-error .feedback-title { color: var(--error-text); text-shadow: 0 2px 24px rgba(254,95,87,0.4); }

.cta-ring { position: absolute; border-radius: 50%; pointer-events: none; animation: ring-pulse-center 4s infinite; border: 1px solid rgba(255,255,255,0.1); }
.cta-ring--1 { width: 300px; height: 300px; top: 50%; left: 50%; animation-delay: 0s; }
.cta-ring--2 { width: 200px; height: 200px; top: 50%; left: 50%; animation-delay: -1.5s; }
.cta-ring--3 { width: 400px; height: 400px; top: 50%; left: 50%; animation-delay: -3s; }
@keyframes ring-pulse-center { 0%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(0.8); } 50% { opacity: 0.3; transform: translate(-50%,-50%) scale(1.1); } }

/* TELA FINAL */
.end-panel {
  border-radius: var(--r-xl); padding: 80px 100px; text-align: center; width: 100%; max-width: 800px;
  background: linear-gradient(145deg, rgba(99,102,241,.1) 0%, rgba(15,15,30,.8) 50%, rgba(165,180,252,.05) 100%);
}
.end-title { font-family: 'Bricolage Grotesque', sans-serif; font-size: 48px; font-weight: 300; margin: 24px 0 48px; }
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--glass-border); border: 1px solid var(--glass-border); border-radius: var(--r-lg); overflow: hidden; margin-bottom: 40px; }
.metric-box { padding: 40px; background: rgba(0,0,0,0.4); }
.metric__value { font-family: 'Bricolage Grotesque', sans-serif; font-size: 64px; font-weight: 300; line-height: 1; margin-bottom: 8px; }
.metric__label { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; font-family: 'Space Mono', monospace; }
.end-action { font-size: 18px; color: var(--dim); display: flex; align-items: center; justify-content: center; gap: 16px; font-family: 'Inter', sans-serif; }

/* OPTION COLORS */
.opt-red {
  background: linear-gradient(145deg, rgba(255,51,102,.15) 0%, rgba(40,15,20,.6) 40%, rgba(255,51,102,.05) 100%);
  border-color: rgba(255,51,102,.4);
  box-shadow: 0 4px 24px rgba(255,51,102,.12);
}
.opt-red .option-key {
  background: rgba(255,51,102,.25);
  border-color: rgba(255,51,102,.5);
  color: #FF3366;
  text-shadow: 0 0 12px rgba(255,51,102,.6);
  box-shadow: 0 0 16px rgba(255,51,102,.2);
}

.opt-green {
  background: linear-gradient(145deg, rgba(0,230,118,.15) 0%, rgba(15,40,20,.6) 40%, rgba(0,230,118,.05) 100%);
  border-color: rgba(0,230,118,.4);
  box-shadow: 0 4px 24px rgba(0,230,118,.12);
}
.opt-green .option-key {
  background: rgba(0,230,118,.25);
  border-color: rgba(0,230,118,.5);
  color: #00E676;
  text-shadow: 0 0 12px rgba(0,230,118,.6);
  box-shadow: 0 0 16px rgba(0,230,118,.2);
}

.opt-yellow {
  background: linear-gradient(145deg, rgba(255,234,0,.15) 0%, rgba(40,35,15,.6) 40%, rgba(255,234,0,.05) 100%);
  border-color: rgba(255,234,0,.4);
  box-shadow: 0 4px 24px rgba(255,234,0,.12);
}
.opt-yellow .option-key {
  background: rgba(255,234,0,.25);
  border-color: rgba(255,234,0,.5);
  color: #FFEA00;
  text-shadow: 0 0 12px rgba(255,234,0,.6);
  box-shadow: 0 0 16px rgba(255,234,0,.2);
}

.opt-blue {
  background: linear-gradient(145deg, rgba(51,153,255,.15) 0%, rgba(15,25,40,.6) 40%, rgba(51,153,255,.05) 100%);
  border-color: rgba(51,153,255,.4);
  box-shadow: 0 4px 24px rgba(51,153,255,.12);
}
.opt-blue .option-key {
  background: rgba(51,153,255,.25);
  border-color: rgba(51,153,255,.5);
  color: #3399FF;
  text-shadow: 0 0 12px rgba(51,153,255,.6);
  box-shadow: 0 0 16px rgba(51,153,255,.2);
}

/* Esconder Watermark do Unicorn Studio */
a[href*="unicorn.studio"],
div[class*="unicorn"] a {
  display: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}