/* Milestone 5: lead capture step layered onto the approved quiz composition. */
.quiz-lead{
  display:none;
  position:relative;
  z-index:3;
  width:min(1120px,calc(100% - 10vw));
  min-height:calc(100dvh - 180px);
  margin:0 auto;
  padding:clamp(34px,6vh,72px) 0;
  grid-template-columns:minmax(0,1fr) minmax(320px,.78fr);
  align-items:center;
  gap:clamp(48px,8vw,120px);
}

.quiz-lead.is-active{display:grid}

.quiz-lead-copy{max-width:620px}

.quiz-lead-copy h2{
  margin:.35em 0 .35em;
  max-width:620px;
  color:#f1e9dd;
  font-family:Baskerville,"Iowan Old Style",Georgia,serif;
  font-size:clamp(3rem,4.45vw,4.8rem);
  font-weight:400;
  line-height:1.02;
  letter-spacing:-.045em;
}

.quiz-lead-copy>p:not(.quiz-category){
  max-width:500px;
  margin:0;
  color:rgba(238,229,216,.58);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(.85rem,1vw,1rem);
  line-height:1.75;
}

.quiz-lead-back{
  margin-top:34px;
  padding:0;
  border:0;
  background:none;
  color:rgba(238,229,216,.52);
  cursor:pointer;
  font:inherit;
  font-size:.64rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  transition:color .2s ease;
}

.quiz-lead-back:hover,.quiz-lead-back:focus-visible{color:#f1e9dd;outline:none}

.quiz-lead-form{
  display:grid;
  gap:18px;
  width:100%;
  padding:clamp(26px,3.4vw,42px);
  border:1px solid rgba(238,229,216,.11);
  background:rgba(12,12,11,.36);
  box-shadow:0 24px 80px rgba(0,0,0,.18);
  backdrop-filter:blur(10px);
}

.quiz-lead-form label{display:grid;gap:8px}

.quiz-lead-form label>span{
  color:rgba(238,229,216,.62);
  font-size:.58rem;
  font-weight:700;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.quiz-lead-form label>span em{
  color:rgba(238,229,216,.34);
  font-style:normal;
  font-weight:500;
  letter-spacing:.12em;
}

.quiz-lead-form input{
  width:100%;
  min-height:50px;
  padding:13px 0 11px;
  border:0;
  border-bottom:1px solid rgba(238,229,216,.22);
  border-radius:0;
  outline:none;
  background:transparent;
  color:#f1e9dd;
  font:inherit;
  font-size:1rem;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.quiz-lead-form input:focus{
  border-color:rgba(238,229,216,.72);
  box-shadow:0 1px 0 rgba(238,229,216,.22);
}

.quiz-lead-note{
  margin:4px 0 0;
  color:rgba(238,229,216,.36);
  font-size:.68rem;
  line-height:1.55;
}

.quiz-lead-error{
  min-height:1.25em;
  margin:0;
  color:#d99a7d;
  font-size:.72rem;
  line-height:1.5;
}

.quiz-lead-submit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:54px;
  margin-top:2px;
  padding:0 20px;
  border:1px solid rgba(238,229,216,.58);
  background:#eee5d8;
  color:#10100f;
  cursor:pointer;
  font:inherit;
  font-size:.66rem;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  transition:transform .22s ease,opacity .22s ease,background .22s ease;
}

.quiz-lead-submit:hover,.quiz-lead-submit:focus-visible{transform:translateY(-1px);background:#fff9ef;outline:none}
.quiz-lead-submit:disabled{cursor:wait;opacity:.58;transform:none}
.quiz-lead-submit span{font-size:1rem;letter-spacing:0}

@media(max-width:900px){
  .quiz-lead{
    width:min(720px,calc(100% - 44px));
    min-height:calc(100dvh - 100px);
    padding:42px 0 52px;
    grid-template-columns:1fr;
    align-content:center;
    gap:30px;
  }
  .quiz-lead-copy h2{font-size:clamp(2.35rem,8vw,3.4rem)}
  .quiz-lead-copy>p:not(.quiz-category){max-width:560px}
  .quiz-lead-back{margin-top:24px}
  .quiz-lead-form{padding:26px}
}

@media(max-width:520px){
  .quiz-lead{width:calc(100% - 30px);padding:28px 0 36px;gap:24px}
  .quiz-lead-copy h2{font-size:clamp(2.05rem,10vw,2.8rem)}
  .quiz-lead-form{gap:15px;padding:20px}
  .quiz-lead-form input{min-height:46px}
  .quiz-lead-submit{min-height:50px}
}

/* ================================================================
   PERSONALIZED RESULT FINALE
   Reuses Elemental Awakening as the campaign payoff after Django scoring.
   ================================================================ */
.ea-result-finale,
.ea-result-atmosphere{display:none}

#elemental-awakening.quiz-result-mode .ea-result-badge{display:none!important}

#elemental-awakening.quiz-result-mode .ea-copy{
  opacity:0!important;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(18px)!important;
}

#elemental-awakening.quiz-result-mode .ea-result-atmosphere{
  display:block;
  position:absolute;
  inset:0;
  z-index:2;
  overflow:hidden;
  pointer-events:none;
}

#elemental-awakening.quiz-result-mode .ea-result-atmosphere::before,
#elemental-awakening.quiz-result-mode .ea-result-atmosphere::after{
  content:"";
  position:absolute;
  pointer-events:none;
}

#elemental-awakening.quiz-result-mode .ea-result-atmosphere::before{
  width:min(76vw,980px);
  aspect-ratio:1;
  right:-8vw;
  top:50%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(var(--ea-rgb),.2) 0,rgba(var(--ea-rgb),.075) 34%,transparent 70%);
  filter:blur(22px);
  transform:translateY(-50%) scale(.8);
  opacity:0;
  animation:godaiResultAuraIn 1.6s cubic-bezier(.16,1,.3,1) .12s forwards;
}

#elemental-awakening.quiz-result-mode .ea-result-atmosphere::after{
  inset:0;
  background:
    linear-gradient(90deg,rgba(4,4,4,.86) 0%,rgba(4,4,4,.52) 37%,rgba(4,4,4,.08) 68%,rgba(4,4,4,.16) 100%),
    radial-gradient(circle at 72% 48%,rgba(var(--ea-rgb),.08),transparent 42%);
  opacity:0;
  animation:godaiResultVeilIn .8s ease .05s forwards;
}

#elemental-awakening.quiz-result-mode .ea-result-finale{
  display:grid;
  position:absolute;
  inset:0;
  z-index:34;
  grid-template-columns:minmax(330px,.74fr) minmax(640px,1.26fr);
  align-items:center;
  gap:clamp(20px,3vw,60px);
  width:min(1540px,94vw);
  height:100%;
  margin:auto;
  padding:6.2vh 0 7vh;
  pointer-events:none;
}

.ea-result-story{
  position:relative;
  z-index:3;
  max-width:540px;
  padding-left:2vw;
}

.ea-result-overline{
  margin:0 0 clamp(14px,2vh,22px);
  color:var(--ea-accent);
  font-size:.56rem;
  font-weight:800;
  letter-spacing:.36em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(8px);
}

.ea-result-mark{
  margin:0 0 clamp(4px,.7vh,8px);
  color:var(--ea-accent);
  font-family:"Yu Mincho","Hiragino Mincho ProN",Georgia,serif;
  font-size:clamp(3.8rem,6vw,6.8rem);
  font-weight:400;
  line-height:.9;
  text-shadow:0 0 42px rgba(var(--ea-rgb),.2);
  opacity:0;
  transform:translateY(14px) scale(.92);
}

.ea-result-roman{
  margin:0;
  color:#f2eadf;
  font-family:Baskerville,"Iowan Old Style",Georgia,serif;
  font-size:clamp(5.4rem,8.7vw,9.2rem);
  font-weight:400;
  letter-spacing:-.055em;
  line-height:.78;
  opacity:0;
  transform:translateY(18px);
}

.ea-result-element-line{
  display:flex;
  align-items:center;
  gap:14px;
  width:min(390px,100%);
  margin:clamp(17px,2.2vh,25px) 0 0;
  opacity:0;
  transform:translateY(10px);
}

.ea-result-element-line::before{
  content:"";
  width:56px;
  height:1px;
  flex:none;
  background:var(--ea-accent);
  box-shadow:0 0 14px rgba(var(--ea-rgb),.3);
}

.ea-result-element{
  margin:0;
  color:var(--ea-accent);
  font-size:.67rem;
  font-weight:800;
  letter-spacing:.43em;
  text-transform:uppercase;
}

.ea-result-personality{
  max-width:500px;
  margin:clamp(25px,3.5vh,38px) 0 0;
  color:#ddd5ca;
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(.98rem,1.18vw,1.16rem);
  line-height:1.66;
  opacity:0;
  transform:translateY(10px);
}

.ea-result-caption{
  max-width:440px;
  margin:14px 0 0;
  color:rgba(222,213,201,.46);
  font-size:.61rem;
  font-weight:700;
  letter-spacing:.11em;
  line-height:1.65;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(8px);
}

.ea-result-actions{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:clamp(25px,3.4vh,36px);
  pointer-events:auto;
  opacity:0;
  transform:translateY(10px);
}

.ea-result-primary,
.ea-result-secondary{
  min-height:48px;
  padding:0 18px;
  cursor:pointer;
  font:inherit;
  font-size:.54rem;
  font-weight:800;
  letter-spacing:.17em;
  text-transform:uppercase;
  transition:transform .25s cubic-bezier(.16,1,.3,1),border-color .25s ease,background .25s ease,color .25s ease;
}

.ea-result-primary{
  border:1px solid var(--ea-accent);
  background:var(--ea-accent);
  color:#0a0a09;
}

.ea-result-secondary{
  border:1px solid rgba(238,229,216,.22);
  background:rgba(8,8,7,.18);
  color:#d7cec1;
  backdrop-filter:blur(8px);
}

.ea-result-primary:hover,.ea-result-primary:focus-visible,
.ea-result-secondary:hover,.ea-result-secondary:focus-visible{
  transform:translateY(-2px);
  outline:none;
}

.ea-result-secondary:hover,.ea-result-secondary:focus-visible{
  border-color:rgba(var(--ea-rgb),.55);
  color:#fff;
}

.ea-result-product-label{
  position:absolute;
  z-index:5;
  right:2.3vw;
  bottom:5.5vh;
  display:grid;
  gap:7px;
  justify-items:end;
  text-align:right;
  pointer-events:none;
  opacity:0;
  transform:translateY(10px);
}

.ea-result-product-label span{
  color:rgba(238,229,216,.42);
  font-size:.47rem;
  font-weight:800;
  letter-spacing:.27em;
  text-transform:uppercase;
}

.ea-result-product-label strong{
  color:var(--ea-accent);
  font-size:.61rem;
  font-weight:800;
  letter-spacing:.22em;
  text-transform:uppercase;
}

#elemental-awakening.quiz-result-mode .ea-journal{
  animation:godaiResultProductIn 1.05s cubic-bezier(.16,1,.3,1) .34s both;
}

#elemental-awakening.quiz-result-mode .ea-spirit-shell{
  animation:godaiResultSpiritIn 1.2s ease .18s both;
}

#elemental-awakening.quiz-result-mode .ea-giant-kanji{
  animation:godaiResultGiantKanji 1.4s cubic-bezier(.16,1,.3,1) .1s both;
}

#elemental-awakening.quiz-result-mode .ea-result-overline{animation:godaiResultCopyIn .5s ease .2s forwards}
#elemental-awakening.quiz-result-mode .ea-result-mark{animation:godaiResultMarkIn .72s cubic-bezier(.16,1,.3,1) .28s forwards}
#elemental-awakening.quiz-result-mode .ea-result-roman{animation:godaiResultCopyIn .72s cubic-bezier(.16,1,.3,1) .58s forwards}
#elemental-awakening.quiz-result-mode .ea-result-element-line{animation:godaiResultCopyIn .58s ease .78s forwards}
#elemental-awakening.quiz-result-mode .ea-result-personality{animation:godaiResultCopyIn .62s ease .96s forwards}
#elemental-awakening.quiz-result-mode .ea-result-caption{animation:godaiResultCopyIn .58s ease 1.08s forwards}
#elemental-awakening.quiz-result-mode .ea-result-actions{animation:godaiResultCopyIn .58s ease 1.18s forwards}
#elemental-awakening.quiz-result-mode .ea-result-product-label{animation:godaiResultCopyIn .58s ease 1.05s forwards}

#elemental-awakening.quiz-result-mode[data-result-element="earth"] .ea-result-atmosphere::before{
  right:-4vw;
  top:59%;
  transform-origin:center bottom;
  animation-name:godaiResultEarthAura;
}

#elemental-awakening.quiz-result-mode[data-result-element="water"] .ea-result-atmosphere::before{
  width:min(88vw,1100px);
  right:-12vw;
  top:46%;
  border-radius:44% 56% 58% 42%;
  animation-name:godaiResultWaterAura;
}

#elemental-awakening.quiz-result-mode[data-result-element="fire"] .ea-result-atmosphere::before{
  width:min(70vw,900px);
  right:-2vw;
  top:51%;
  filter:blur(18px);
  animation-name:godaiResultFireAura;
}

#elemental-awakening.quiz-result-mode[data-result-element="wind"] .ea-result-atmosphere::before{
  width:min(90vw,1160px);
  right:-19vw;
  top:43%;
  border-radius:50% 34% 54% 42%;
  animation-name:godaiResultWindAura;
}

#elemental-awakening.quiz-result-mode[data-result-element="void"] .ea-result-atmosphere::before{
  width:min(82vw,1050px);
  right:-9vw;
  top:48%;
  background:radial-gradient(circle,rgba(var(--ea-rgb),.18),rgba(var(--ea-rgb),.055) 36%,transparent 68%);
  animation-name:godaiResultVoidAura;
}

@keyframes godaiResultVeilIn{to{opacity:1}}
@keyframes godaiResultAuraIn{to{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes godaiResultCopyIn{to{opacity:1;transform:none}}
@keyframes godaiResultMarkIn{to{opacity:1;transform:none}}
@keyframes godaiResultProductIn{
  from{opacity:0;transform:translateY(34px) scale(.94);filter:blur(7px) drop-shadow(0 36px 32px rgba(0,0,0,.55))}
  to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 36px 32px rgba(0,0,0,.55))}
}
@keyframes godaiResultSpiritIn{from{opacity:0;filter:saturate(.7) blur(8px)}to{opacity:1;filter:saturate(1.08) blur(0)}}
@keyframes godaiResultGiantKanji{from{opacity:0;transform:translateY(4vh)}to{opacity:1;transform:none}}
@keyframes godaiResultEarthAura{0%{opacity:0;transform:translateY(-44%) scale(.72)}100%{opacity:1;transform:translateY(-50%) scale(1)}}
@keyframes godaiResultWaterAura{0%{opacity:0;transform:translate(5%,-46%) rotate(-5deg) scale(.78)}100%{opacity:1;transform:translate(0,-50%) rotate(3deg) scale(1)}}
@keyframes godaiResultFireAura{0%{opacity:0;transform:translateY(-42%) scale(.66)}55%{opacity:1;transform:translateY(-50%) scale(1.06)}100%{opacity:.9;transform:translateY(-50%) scale(1)}}
@keyframes godaiResultWindAura{0%{opacity:0;transform:translate(10%,-48%) rotate(-9deg) scale(.8)}100%{opacity:1;transform:translate(0,-50%) rotate(4deg) scale(1)}}
@keyframes godaiResultVoidAura{0%{opacity:0;transform:translateY(-50%) scale(.56);filter:blur(40px)}100%{opacity:1;transform:translateY(-50%) scale(1);filter:blur(18px)}}

@media(max-width:1050px){
  #elemental-awakening.quiz-result-mode .ea-result-finale{
    grid-template-columns:minmax(300px,.82fr) minmax(480px,1.18fr);
  }
  .ea-result-story{padding-left:4vw}
  .ea-result-personality{max-width:450px;font-size:.95rem}
}

@media(max-width:820px){
  #elemental-awakening.quiz-result-mode .ea-shell{
    display:block!important;
    padding:0!important;
  }

  #elemental-awakening.quiz-result-mode .ea-visual{
    position:absolute;
    inset:34vh 0 13vh;
    width:100%;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
  }

  #elemental-awakening.quiz-result-mode .ea-product-wrap{
    left:50%!important;
    top:50%!important;
    width:min(74vw,470px)!important;
    height:100%!important;
    transform:translate(-50%,-50%) rotate(1deg)!important;
  }

  #elemental-awakening.quiz-result-mode .ea-sprite{
    width:min(96vw,570px)!important;
    left:50%!important;
    top:50%!important;
    transform:translate(-50%,-50%) scale(1.18)!important;
  }

  #elemental-awakening.quiz-result-mode .ea-spirit-shell{inset:-6% -4%}

  #elemental-awakening.quiz-result-mode .ea-result-atmosphere::after{
    background:
      linear-gradient(180deg,rgba(4,4,4,.82) 0%,rgba(4,4,4,.48) 28%,rgba(4,4,4,.04) 55%,rgba(4,4,4,.38) 82%,rgba(4,4,4,.78) 100%),
      radial-gradient(circle at 50% 52%,rgba(var(--ea-rgb),.08),transparent 44%);
  }

  #elemental-awakening.quiz-result-mode .ea-result-atmosphere::before{
    width:130vw!important;
    right:auto!important;
    left:50%!important;
    top:53%!important;
    transform:translate(-50%,-50%) scale(.8);
  }

  #elemental-awakening.quiz-result-mode .ea-result-finale{
    display:block;
    width:100%;
    padding:6.8vh 5.5vw 3vh;
    text-align:center;
  }

  .ea-result-story{
    max-width:560px;
    margin:0 auto;
    padding:0;
  }

  .ea-result-overline{margin-bottom:10px;font-size:.43rem;letter-spacing:.3em}
  .ea-result-mark{margin-bottom:1px;font-size:clamp(2.75rem,10vw,4rem)}
  .ea-result-roman{font-size:clamp(3.8rem,15vw,5.8rem);line-height:.76}
  .ea-result-element-line{justify-content:center;width:100%;margin-top:12px}
  .ea-result-element-line::before{width:34px}
  .ea-result-element{font-size:.52rem;letter-spacing:.36em}
  .ea-result-personality{max-width:520px;margin:14px auto 0;font-size:.82rem;line-height:1.48}
  .ea-result-caption{display:none}

  .ea-result-actions{
    position:absolute;
    left:5.5vw;
    right:5.5vw;
    bottom:max(22px,3vh);
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin:0;
  }

  .ea-result-primary,.ea-result-secondary{min-height:46px;padding:0 12px;font-size:.47rem;letter-spacing:.13em}

  .ea-result-product-label{
    right:50%;
    bottom:calc(max(22px,3vh) + 58px);
    transform:translate(50%,10px);
    justify-items:center;
    text-align:center;
  }

  #elemental-awakening.quiz-result-mode .ea-result-product-label{animation-name:godaiResultProductLabelMobile}
  .ea-result-product-label span{font-size:.4rem}
  .ea-result-product-label strong{font-size:.49rem;letter-spacing:.18em}

  @keyframes godaiResultProductLabelMobile{to{opacity:1;transform:translate(50%,0)}}
}

@media(max-width:430px){
  #elemental-awakening.quiz-result-mode .ea-result-finale{padding-top:6vh}
  #elemental-awakening.quiz-result-mode .ea-visual{inset:35vh 0 14vh}
  #elemental-awakening.quiz-result-mode .ea-product-wrap{width:82vw!important}
  .ea-result-mark{font-size:2.65rem}
  .ea-result-roman{font-size:clamp(3.6rem,17vw,4.8rem)}
  .ea-result-personality{max-width:92%;font-size:.76rem;line-height:1.42}
  .ea-result-actions{left:4vw;right:4vw;bottom:18px}
  .ea-result-primary,.ea-result-secondary{min-height:44px;font-size:.43rem;letter-spacing:.1em}
  .ea-result-product-label{bottom:70px}
}

@media(max-height:720px) and (min-width:821px){
  #elemental-awakening.quiz-result-mode .ea-result-finale{padding-top:4vh;padding-bottom:4vh}
  .ea-result-mark{font-size:3.4rem}
  .ea-result-roman{font-size:clamp(4.6rem,7.4vw,7.2rem)}
  .ea-result-personality{margin-top:20px;font-size:.9rem;line-height:1.5}
  .ea-result-caption{margin-top:9px}
  .ea-result-actions{margin-top:20px}
  .ea-result-product-label{bottom:3vh}
}

@media(prefers-reduced-motion:reduce){
  #elemental-awakening.quiz-result-mode .ea-result-atmosphere::before,
  #elemental-awakening.quiz-result-mode .ea-result-atmosphere::after,
  #elemental-awakening.quiz-result-mode .ea-journal,
  #elemental-awakening.quiz-result-mode .ea-spirit-shell,
  #elemental-awakening.quiz-result-mode .ea-giant-kanji,
  #elemental-awakening.quiz-result-mode .ea-result-overline,
  #elemental-awakening.quiz-result-mode .ea-result-mark,
  #elemental-awakening.quiz-result-mode .ea-result-roman,
  #elemental-awakening.quiz-result-mode .ea-result-element-line,
  #elemental-awakening.quiz-result-mode .ea-result-personality,
  #elemental-awakening.quiz-result-mode .ea-result-caption,
  #elemental-awakening.quiz-result-mode .ea-result-actions,
  #elemental-awakening.quiz-result-mode .ea-result-product-label{
    animation:none!important;
    opacity:1!important;
    transform:none!important;
    filter:none!important;
  }

  @media(max-width:820px){
    #elemental-awakening.quiz-result-mode .ea-result-product-label{transform:translateX(50%)!important}
  }
}