.character-stage{position:relative;min-height:540px;isolation:isolate;overflow:hidden;border-radius:15px;background:#26341f;border:1px solid #3b4d2d;color:#f1f3dc;--character-x:0px;--character-y:0px;--business-accent:#c8ef3c;--business-ink:#172210;background-image:radial-gradient(ellipse at 60% 70%,#91ae4322,transparent 65%)}
.character-topline{position:relative;z-index:6;display:flex;justify-content:space-between;gap:20px;padding:23px 25px;font-size:7px;letter-spacing:.12em;color:#bdd4a0}.character-topline>span:last-child{max-width:190px;text-align:right;line-height:1.6}
.character-display{position:absolute;z-index:0;left:24px;right:0;top:68px;font:400 clamp(85px,11vw,174px)/.95 Anton,Impact,sans-serif;letter-spacing:-.04em;color:#d0ec42;white-space:nowrap;transform:translate(calc(var(--character-x) * -.5),calc(var(--character-y) * -.5));transition:transform .16s ease-out}
.character-halo{position:absolute;width:360px;height:360px;border:1px solid #b2ce6838;border-radius:50%;bottom:25px;left:0;rotate:-18deg;transform:translate(var(--character-x),var(--character-y)) scaleY(.82);box-shadow:0 0 0 22px #b1ce6108,0 0 0 60px #b1ce6105}
.character-portrait{position:absolute;z-index:2;left:-12px;bottom:-22px;width:66%;max-height:88%;height:auto;object-fit:contain;object-position:bottom;filter:drop-shadow(10px 15px 22px #14200c66);transform-origin:45% 90%;transform:translate(var(--character-x),var(--character-y)) rotate(-3deg);transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.character-business-slip{position:absolute;z-index:4;right:27px;top:205px;width:min(51%,300px);background:var(--business-accent);color:var(--business-ink);padding:25px 21px 23px;border-radius:3px;border:1px solid #ffffff42;box-shadow:0 16px 40px #10210d38;rotate:6deg;transform:translate(calc(var(--character-x) * -.65),calc(var(--character-y) * -.65));transition:transform .3s ease-out,rotate .5s ease;animation:character-slip-in .38s cubic-bezier(.2,.8,.2,1)}
.character-business-slip>span{display:block;font-size:6px;letter-spacing:.13em;margin-bottom:19px;opacity:.85}.character-business-slip .business-brand{display:flex;align-items:center;gap:10px;font-family:Inter,Arial,sans-serif}.character-business-slip .business-brand strong{font-size:23px!important;font-weight:550;letter-spacing:-.6px;color:inherit!important;line-height:1.15;overflow-wrap:anywhere}.character-business-slip .business-brand>img{max-width:78px;max-height:55px;object-fit:contain}.character-business-slip .business-monogram{display:none}.character-business-slip>small{display:block;font-size:9px;line-height:1.7;margin-top:20px;opacity:.85}
.character-aside{position:absolute;right:22px;bottom:105px;z-index:1;padding:20px 22px;background:#ecebd7;color:#3c4a2d;rotate:-5deg;box-shadow:0 10px 30px #0c180d25;width:40%;transform:translate(calc(var(--character-x) * .4),calc(var(--character-y) * .4));transition:transform .3s ease-out,rotate .5s ease}.character-aside>span{display:block;font-size:7px;letter-spacing:.14em;margin-bottom:9px}.character-aside>strong{display:block;font:400 clamp(26px,3.4vw,45px)/1.05 Anton,Impact,sans-serif;white-space:pre-line;letter-spacing:-.4px}
.character-hands{position:absolute;z-index:5;right:-35px;bottom:-24px;width:67%;height:44%;object-fit:contain;pointer-events:none;transform:translate(calc(var(--character-x) * -.5),calc(var(--character-y) * -.5));transition:transform .4s ease-out;filter:drop-shadow(0 8px 15px #10210c55)}
.character-spark{position:absolute;right:30px;top:117px;font-size:66px;font-weight:300;color:#d0ec42;z-index:3;rotate:10deg;transition:rotate .7s cubic-bezier(.2,.8,.2,1)}
.character-play{position:absolute;left:22px;bottom:29px;z-index:7;display:flex;align-items:center;gap:10px;border:1px solid #d3e7ac80;background:#26371fe8;backdrop-filter:blur(8px);color:#e5efcf;padding:12px 14px;border-radius:24px;font:inherit;font-size:10px;cursor:pointer;min-height:44px}.character-play>span{max-width:115px}.character-play:hover{background:#d0ec42;color:#27341c;border-color:#d0ec42}.character-play:focus-visible{outline:3px solid #d0ec42;outline-offset:4px}.character-art-note{position:absolute;z-index:7;left:25px;bottom:12px;font-size:5px;letter-spacing:.1em;color:#b7c99d}
.character-stage[data-reaction="1"] .character-portrait{transform:translate(calc(var(--character-x) + 13px),calc(var(--character-y) - 6px)) rotate(4deg)}.character-stage[data-reaction="1"] .character-business-slip{rotate:-7deg}.character-stage[data-reaction="1"] .character-aside{rotate:5deg}.character-stage[data-reaction="1"] .character-spark{rotate:130deg}
.character-stage[data-reaction="2"] .character-portrait{transform:translate(calc(var(--character-x) - 9px),calc(var(--character-y) + 3px)) rotate(-7deg)}.character-stage[data-reaction="2"] .character-business-slip{rotate:0deg}.character-stage[data-reaction="2"] .character-aside{rotate:-9deg}.character-stage[data-reaction="2"] .character-spark{rotate:250deg}
@keyframes character-slip-in{from{transform:translate(25px,10px) rotate(5deg)}to{transform:translate(0,0) rotate(0)}}
.character-stage[data-motion=off] *, .character-stage[data-motion=off] *:before,.character-stage[data-motion=off] *:after{animation:none!important;transition:none!important}
@media(max-width:1100px) and (min-width:801px){.character-stage{min-height:510px}.character-display{font-size:105px;top:90px}.character-business-slip{top:218px;right:20px;padding:20px 16px;width:53%}.character-business-slip .business-brand strong{font-size:20px!important}.character-aside{bottom:90px;width:43%;padding:17px}.character-aside>strong{font-size:31px}.character-spark{font-size:48px;top:150px}.character-topline>span:last-child{max-width:140px;font-size:6px}.character-play{max-width:185px;font-size:9px;left:16px}}
@media(max-width:800px){.character-stage{min-height:505px}.character-display{font-size:109px;top:89px}.character-topline{padding:20px;font-size:7px}.character-topline>span:last-child{font-size:6px;max-width:140px}.character-portrait{width:74%;left:-19px;max-height:83%}.character-business-slip{top:225px;right:20px;width:54%;padding:20px 15px}.character-business-slip .business-brand strong{font-size:20px!important}.character-business-slip>span{font-size:5px}.character-aside{width:44%;bottom:86px;padding:17px}.character-aside>strong{font-size:29px}.character-spark{top:155px;font-size:45px;right:18px}.character-hands{width:75%;right:-38px;bottom:-21px}.character-play{left:16px;bottom:27px;padding:11px 12px;font-size:9px;max-width:175px}.character-art-note{left:19px;font-size:4px}}
@media(max-width:430px){.character-display{font-size:91px;left:18px;top:104px}.character-stage{min-height:485px}.character-business-slip{top:212px}.character-topline{padding:18px}.character-business-slip .business-brand strong{font-size:18px!important}.character-aside>strong{font-size:26px}.character-play>span{max-width:95px}.character-spark{font-size:39px;top:165px}}
@media(prefers-reduced-motion:reduce){.character-stage *,.character-stage *:before,.character-stage *:after{animation:none!important;transition:none!important}.character-portrait,.character-business-slip,.character-hands,.character-halo,.character-display,.character-aside{transform:none!important}}

/* Keep the portrait's face clear while the business card is handed into view. */
.character-business-slip{top:auto;bottom:100px;width:min(50%,300px)}.character-aside{top:175px;bottom:auto;width:39%}.character-stage:not([data-reaction="0"]) .character-display{font-size:clamp(68px,8vw,128px);top:82px}
@media(max-width:1100px) and (min-width:801px){.character-business-slip{top:auto;bottom:80px;width:53%}.character-aside{top:175px;bottom:auto}.character-stage:not([data-reaction="0"]) .character-display{top:100px}}
@media(max-width:800px){.character-business-slip{top:auto;bottom:65px;width:54%}.character-aside{top:175px;bottom:auto}.character-portrait{left:-48px;width:88%;max-height:88%}.character-stage:not([data-reaction="0"]) .character-display{top:99px;font-size:70px}}
@media(max-width:430px){.character-business-slip{top:auto;bottom:60px}.character-aside{top:178px}.character-portrait{left:-53px;width:91%}.character-stage:not([data-reaction="0"]) .character-display{top:112px;font-size:66px}}

[data-motion=off] .character-stage,.character-stage[data-motion=off]{--character-x:0px!important;--character-y:0px!important}

/* One current VORL character, reused from the existing films. */
.character-portrait{left:5%;bottom:5%;width:54%;height:78%;max-height:none;object-fit:cover;object-position:center 30%;border:6px solid #f2efdf;border-bottom-width:24px;border-radius:2px;transform:translate(var(--character-x),var(--character-y)) rotate(-5deg);box-shadow:0 14px 35px #10180866;filter:none}.character-business-slip{bottom:65px;right:24px;width:48%}.character-aside{top:190px;right:20px;width:35%}.character-art-note{bottom:12px}.character-display{top:70px}.character-play{bottom:26px}.character-stage[data-reaction="1"] .character-portrait{transform:translate(var(--character-x),var(--character-y)) rotate(-1deg)}.character-stage[data-reaction="2"] .character-portrait{transform:translate(var(--character-x),var(--character-y)) rotate(-8deg)}
@media(max-width:800px){.character-portrait{left:4%;bottom:5%;width:57%;height:76%}.character-business-slip{right:17px;bottom:69px;width:49%}.character-aside{top:179px;width:34%;right:14px}.character-display{top:75px;font-size:94px}.character-topline>span:last-child{max-width:120px}.character-aside>strong{font-size:27px}}

@media(max-width:800px){.character-aside{width:40%;padding:15px 12px}.character-aside>strong{font-size:22px}}