/* Character-directed sequences. These purposefully replace the old single motion preset. */
.elevenads-scene.elevenads-play{animation:elevenads-cast-materialize 7s ease-out both}
.elevenads-scene.elevenads-play .elevenads-scene-image{animation:elevenads-cast-breathe 6s ease-in-out both}

.elevenads-scene.elevenads-character-eleven.elevenads-play .elevenads-scene-image{animation:elevenads-cast-eleven 7s cubic-bezier(.13,.7,.18,1) both}
.elevenads-scene.elevenads-character-dustin.elevenads-play .elevenads-scene-image{animation:elevenads-cast-dustin 7s steps(10,end) both}
.elevenads-scene.elevenads-character-will.elevenads-play .elevenads-scene-image{animation:elevenads-cast-will 7s ease-in-out both}
.elevenads-scene.elevenads-character-mike.elevenads-play .elevenads-scene-image{animation:elevenads-cast-mike 7s ease-out both}
.elevenads-scene.elevenads-character-max.elevenads-play .elevenads-scene-image{animation:elevenads-cast-max 7s ease-in-out both}
.elevenads-scene.elevenads-character-vecna.elevenads-play .elevenads-scene-image{animation:elevenads-cast-vecna 7s ease-in-out both}
.elevenads-scene.elevenads-character-lucas.elevenads-play .elevenads-scene-image{animation:elevenads-cast-lucas 7s ease-out both}
.elevenads-scene.elevenads-character-hopper.elevenads-play .elevenads-scene-image{animation:elevenads-cast-hopper 7s ease-in-out both}
.elevenads-scene.elevenads-character-nancy.elevenads-play .elevenads-scene-image{animation:elevenads-cast-nancy 7s ease-in-out both}
.elevenads-scene.elevenads-character-steve.elevenads-play .elevenads-scene-image{animation:elevenads-cast-steve 7s ease-out both}
.elevenads-scene.elevenads-character-whatsit.elevenads-play .elevenads-scene-image{animation:elevenads-cast-whatsit 7s steps(8,end) both}
.elevenads-scene.elevenads-character-joyce.elevenads-play .elevenads-scene-image{animation:elevenads-cast-joyce 7s ease-out both}
.elevenads-scene.elevenads-character-robin.elevenads-play .elevenads-scene-image{animation:elevenads-cast-robin 7s steps(6,end) both}
.elevenads-scene.elevenads-character-eddie.elevenads-play .elevenads-scene-image{animation:elevenads-cast-eddie 7s ease-in-out both}
.elevenads-ensemble{display:flex;align-items:flex-end;justify-content:center;width:100%;min-height:180px;overflow:hidden;isolation:isolate}
.elevenads-ensemble img{width:48%;max-height:260px;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 0 8px #a11);margin-left:-15%;mask-image:linear-gradient(black 0 72%,transparent 100%);animation:elevenads-ensemble-reveal 7s ease-in-out both;animation-delay:calc(var(--portrait-index) * .35s)}
.elevenads-ensemble img:first-child{margin-left:0}
.elevenads-character-hawkins .elevenads-ensemble img{width:35%;margin-left:-11%;max-height:225px}
@keyframes elevenads-ensemble-reveal{0%{opacity:0;transform:translateY(110px) rotate(-7deg)}25%{opacity:1;transform:translateY(0) rotate(0)}60%{transform:translateY(-12px)}100%{opacity:1;transform:none}}

@keyframes elevenads-cast-materialize{0%{opacity:0;filter:blur(25px)}15%{opacity:1;filter:blur(0)}92%{opacity:.92}100%{opacity:.87}}
@keyframes elevenads-cast-breathe{0%{transform:scale(.9);opacity:0}20%{transform:scale(1);opacity:1}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes elevenads-cast-eleven{0%{opacity:0;transform:translateY(68px) scale(.8);filter:blur(22px) drop-shadow(0 0 2px #f11)}24%{opacity:1;transform:translateY(-22px) scale(1.13);filter:blur(0) drop-shadow(0 0 40px #f32)}49%{transform:translateY(-38px) rotate(-2deg) scale(1.1)}75%{transform:translateY(-14px) rotate(1deg)}100%{transform:translateY(0) scale(1)}}
@keyframes elevenads-cast-dustin{0%,7%,14%{opacity:0;transform:translateX(-55px);filter:contrast(4) hue-rotate(70deg)}8%,15%{opacity:1;transform:translateX(28px)}22%{opacity:1;transform:translateX(0);filter:contrast(1)}65%{transform:translateY(-3px)}100%{transform:none}}
@keyframes elevenads-cast-will{0%,11%,16%,22%{opacity:0;filter:brightness(.1)}12%,17%,25%{opacity:1;filter:brightness(1.8)}35%{filter:brightness(.65)}55%{filter:brightness(1.5)}100%{opacity:1;filter:brightness(1)}}
@keyframes elevenads-cast-mike{0%{opacity:0;transform:translate(-55px,35px) rotate(-8deg)}22%{opacity:1;transform:translate(0,0) rotate(1deg)}58%{transform:translate(7px,-8px) rotate(-2deg)}100%{transform:none}}
@keyframes elevenads-cast-max{0%{opacity:0;transform:translateY(75px);filter:blur(6px)}20%{opacity:1}40%,70%{transform:translateY(-24px);filter:drop-shadow(0 0 32px crimson)}100%{transform:none;filter:none}}
@keyframes elevenads-cast-vecna{0%{opacity:0;transform:scale(.5);filter:brightness(.1) blur(19px)}30%{opacity:.6;transform:scale(.78);filter:brightness(.3) blur(2px)}60%{opacity:1;transform:scale(1.09);filter:brightness(1) drop-shadow(0 0 24px #f11)}100%{transform:scale(1);filter:none}}
@keyframes elevenads-cast-lucas{0%{opacity:0;transform:translateX(95px) scale(.74)}25%{opacity:1;transform:translateX(-12px) scale(1.02)}53%{transform:translateY(-14px)}100%{transform:none}}
@keyframes elevenads-cast-hopper{0%{opacity:0;filter:blur(36px) grayscale(1);transform:translateY(40px)}35%{opacity:.78;filter:blur(8px) grayscale(.65)}65%{opacity:1;filter:blur(0) grayscale(0);transform:none}100%{transform:none}}
@keyframes elevenads-cast-nancy{0%{opacity:0;filter:brightness(0);transform:scale(1.2)}18%{opacity:1;filter:brightness(2)}22%{filter:brightness(.4)}32%{filter:brightness(1)}100%{transform:scale(1)}}
@keyframes elevenads-cast-steve{0%{opacity:0;transform:translateX(95px) rotate(8deg)}20%{opacity:1;transform:translateX(-12px) rotate(-3deg)}50%{transform:translateX(9px)}100%{transform:none}}
@keyframes elevenads-cast-whatsit{0%,5%,11%,17%{opacity:0;transform:translateX(-10px);filter:contrast(5)}6%,12%,18%{opacity:1;transform:translateX(11px)}28%{filter:grayscale(1)}50%{filter:grayscale(0)}100%{transform:none}}
@keyframes elevenads-cast-joyce{0%{opacity:0;transform:translateY(75px);filter:brightness(.1)}18%{opacity:.6}24%,36%,42%{opacity:1;filter:brightness(1.8)}29%,39%{filter:brightness(.5)}100%{transform:none;filter:brightness(1)}}
@keyframes elevenads-cast-robin{0%,7%,13%{opacity:0;transform:translateX(40px);filter:hue-rotate(130deg)}8%,14%{opacity:1;transform:translateX(-12px)}30%{transform:none;filter:hue-rotate(0)}100%{transform:none}}
@keyframes elevenads-cast-eddie{0%{opacity:0;transform:translate(-50px,80px) rotate(-15deg)}23%{opacity:1;transform:translate(0,0) rotate(6deg)}35%,56%,74%{transform:translateY(-7px) rotate(-4deg)}45%,65%,84%{transform:translateY(2px) rotate(5deg)}100%{transform:none}}

/* DEMOGORGON: abrupt sideways breach, violent portal split, rapidly advancing claws. */
#elevenads-scare.elevenads-scare-demogorgon.elevenads-attack{animation:elevenads-demo-screen 2.4s linear both}
#elevenads-scare.elevenads-scare-demogorgon.elevenads-attack .elevenads-scare-portal{left:63%;top:14%;width:33vw;height:73vh;border-radius:35% 65% 50% 50%;animation:elevenads-demo-rip 2.3s cubic-bezier(.1,.7,.3,1) both}
#elevenads-scare.elevenads-scare-demogorgon.elevenads-attack img,#elevenads-scare.elevenads-scare-demogorgon.elevenads-attack video{animation:elevenads-demo-lunge 2.3s cubic-bezier(.16,1,.22,1) both;transform-origin:53% 45%;filter:drop-shadow(0 0 25px #f20) contrast(1.15)}
#elevenads-scare.elevenads-scare-demogorgon.elevenads-attack:before{animation:elevenads-demo-lightning 2.4s steps(4,end) both}
#elevenads-scare.elevenads-scare-demogorgon.elevenads-attack:after{animation:elevenads-demo-strobe 2.4s steps(1,end) both}
@keyframes elevenads-demo-screen{0%,12%{opacity:0}13%,76%{opacity:1}83%{opacity:.7}100%{opacity:0}}
@keyframes elevenads-demo-rip{0%{transform:scaleX(.03) scaleY(.5) rotate(-35deg);filter:brightness(.1)}18%{transform:scaleX(1) scaleY(1) rotate(8deg);filter:brightness(2)}58%{transform:scale(1.25) rotate(19deg)}100%{transform:scale(1.65) rotate(35deg);opacity:0}}
@keyframes elevenads-demo-lunge{0%,16%{opacity:0;transform:translate(22vw,-32%) scale(.15) rotate(14deg)}22%{opacity:1;transform:translate(10vw,-45%) scale(.42) rotate(7deg)}49%{transform:translate(-33%,-48%) scale(1.15) rotate(-6deg)}65%{transform:translate(-56%,-50%) scale(1.9) rotate(3deg);opacity:1}100%{transform:translate(-67%,-51%) scale(2.5) rotate(-4deg);opacity:0}}
@keyframes elevenads-demo-lightning{0%,14%,24%,39%,61%,100%{opacity:0}15%,25%,40%,62%{opacity:1;transform:rotate(7deg)}}
@keyframes elevenads-demo-strobe{0%,18%,25%,42%,60%,100%{opacity:0}19%,43%,61%{opacity:.95}}

/* VECNA: slow red suffocation, organic vine rise, close-up gaze and final snap. */
#elevenads-scare.elevenads-scare-vecna.elevenads-attack{animation:elevenads-vecna-screen 4.6s ease-in-out both}
#elevenads-scare.elevenads-scare-vecna.elevenads-attack .elevenads-scare-portal{left:24%;top:6%;width:52vw;height:84vh;border-width:20px;border-color:#170409;border-radius:50% 38% 55% 34%;animation:elevenads-vecna-grow 4.5s ease-in-out both}
#elevenads-scare.elevenads-scare-vecna.elevenads-attack img,#elevenads-scare.elevenads-scare-vecna.elevenads-attack video{animation:elevenads-vecna-approach 4.5s cubic-bezier(.2,.64,.28,1) both;transform-origin:50% 35%;filter:drop-shadow(0 0 38px #e20e24)}
#elevenads-scare.elevenads-scare-vecna.elevenads-attack:before{inset:-10%;background:repeating-conic-gradient(from 8deg at 50% 100%,transparent 0 8deg,#080104 9deg 10deg,transparent 11deg 19deg,#350409 20deg 21deg,transparent 22deg 30deg);mix-blend-mode:normal;transform-origin:center bottom;animation:elevenads-vecna-vines 4.5s ease-in-out both}
#elevenads-scare.elevenads-scare-vecna.elevenads-attack:after{background:radial-gradient(ellipse,#fb0f2840,transparent 65%);animation:elevenads-vecna-flash 4.5s steps(1,end) both}
@keyframes elevenads-vecna-screen{0%{opacity:0}17%{opacity:.48}38%,84%{opacity:1}100%{opacity:0}}
@keyframes elevenads-vecna-grow{0%{opacity:0;transform:scale(.2) rotate(-5deg)}25%{opacity:.8;transform:scale(.72) rotate(1deg)}65%{opacity:1;transform:scale(1.08) rotate(-3deg)}100%{opacity:0;transform:scale(1.4) rotate(3deg)}}
@keyframes elevenads-vecna-approach{0%,14%{opacity:0;transform:translate(-50%,-40%) scale(.43);filter:brightness(.1) blur(20px)}34%{opacity:.6;transform:translate(-50%,-48%) scale(.66);filter:brightness(.4) blur(6px)}60%{opacity:1;transform:translate(-50%,-48%) scale(.88);filter:brightness(.85)}84%{opacity:1;transform:translate(-50%,-50%) scale(1.05);filter:brightness(1.1)}91%{transform:translate(-50%,-50%) scale(1.28);filter:brightness(2)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.43)}}
@keyframes elevenads-vecna-vines{0%{opacity:0;transform:scaleY(.02)}26%{opacity:.35;transform:scaleY(.48)}66%{opacity:.8;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.2)}}
@keyframes elevenads-vecna-flash{0%,84%,91%,100%{opacity:0}85%,92%{opacity:1}}

/* Different category replays keep each individual object's native animation. */
#elevenads-category-fx.elevenads-fx-replay .elevenads-fx-part{animation-name:unset!important}

@media(max-width:767px){
  #elevenads-scare.elevenads-scare-demogorgon.elevenads-attack .elevenads-scare-portal{left:19%;width:68vw}
  #elevenads-scare.elevenads-scare-vecna.elevenads-attack .elevenads-scare-portal{left:10%;width:80vw}
  #elevenads-scare.elevenads-scare-demogorgon.elevenads-attack img{width:130vw;max-width:none}
  #elevenads-audio-panel{flex-wrap:wrap;justify-content:center;width:max-content;min-width:230px;max-width:calc(100vw - 20px)}
}
@media(prefers-reduced-motion:reduce){#elevenads-scare,#elevenads-scene .elevenads-scene-image{animation:none!important}}
