/* Keep each theatrical gesture attached to the viewport and to its own section. */
#main{overflow-x:clip}

/* The smoke spans the page, with the sleeve anchored to the right edge. */
.event-options{padding-block:60px 95px}
.booking-approach{background:var(--ink);overflow:hidden}
.smoke-stage{position:relative;width:100%;aspect-ratio:3/1;margin:0}
.smoke-arrival,.smoke-visual,.smoke-direction{position:absolute;inset:0}
.smoke-visual{pointer-events:none}
.smoke-direction picture{display:block;width:100%;height:100%}
.smoke-direction{transform:scaleX(-1)}
.smoke-entry-marker{position:absolute;left:0;top:45%;width:2px;height:2px;opacity:0;pointer-events:none}
.smoke-art{width:100%;height:100%;max-width:none;object-fit:contain}
.smoke-words{list-style:none;margin:0;padding:0}
.smoke-words li{position:absolute;z-index:1;transform:translate(-50%,-50%) rotate(var(--smoke-angle));white-space:nowrap;font-size:clamp(17px,1.8vw,32px);font-style:italic;line-height:1.2;color:#fff0f6;text-shadow:0 2px 6px #080607,0 0 16px #080607,0 0 25px #ff91b466}
.smoke-words li:nth-child(1){left:54%;top:18%;--smoke-angle:7deg}
.smoke-words li:nth-child(2){left:34%;top:18%;--smoke-angle:-5deg}
.smoke-words li:nth-child(3){left:14%;top:18%;--smoke-angle:6deg}
.smoke-words li:nth-child(4){left:14%;top:40%;--smoke-angle:-6deg}

.smoke-words li:nth-child(5){left:34%;top:40%;--smoke-angle:4deg}

.smoke-words li:nth-child(6){left:55%;top:40%;--smoke-angle:-4deg}

/* Entire smoke composition travels together; the arm ends at the screen edge. */
.smoke-stage.entrance-ready:not(.is-entering) .smoke-arrival{opacity:0;transform:translateX(70%)}
.smoke-stage.entrance-ready:not(.is-entering) .smoke-words li{opacity:0}
.smoke-stage.is-entering .smoke-arrival{animation:smoking-hand-arrives 1.4s cubic-bezier(.18,.7,.2,1) both}
.smoke-stage.is-entering .smoke-words li{animation:smoke-lettering-arrives .8s ease both}
.smoke-stage.is-entering .smoke-words li:nth-child(1){animation-delay:.45s}
.smoke-stage.is-entering .smoke-words li:nth-child(2){animation-delay:.6s}
.smoke-stage.is-entering .smoke-words li:nth-child(3){animation-delay:.75s}
.smoke-stage.is-entering .smoke-words li:nth-child(4){animation-delay:.9s}
.smoke-stage.is-entering .smoke-words li:nth-child(5){animation-delay:1.05s}
.smoke-stage.is-entering .smoke-words li:nth-child(6){animation-delay:1.2s}
.dice-catcher.entrance-ready:not(.is-entering) .catcher-visual{opacity:0;transform:translateX(100%)}
.dice-catcher.is-entering .catcher-visual{animation:skeletal-hand-arrives 1.2s cubic-bezier(.18,.7,.2,1) both}
@keyframes smoking-hand-arrives{from{opacity:0;transform:translateX(70%)}to{opacity:1;transform:translateX(0)}}
@keyframes smoke-lettering-arrives{from{opacity:0;filter:blur(4px)}to{opacity:1;filter:blur(0)}}
@keyframes skeletal-hand-arrives{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}

@media(max-width:999px){
 .event-options{padding-block:40px 65px}
}
@media(max-width:780px){
 .smoke-stage{width:100%;aspect-ratio:3/2}
 .smoke-direction{transform:none}
 .smoke-entry-marker{top:50%}
 .smoke-words li{font-size:clamp(16px,3vw,21px)}
 .smoke-words li:nth-child(1){left:25%;top:20%;--smoke-angle:4deg}
 .smoke-words li:nth-child(2){left:72%;top:20%;--smoke-angle:-4deg}
 .smoke-words li:nth-child(3){left:25%;top:39%;--smoke-angle:-5deg}
 .smoke-words li:nth-child(4){left:72%;top:39%;--smoke-angle:5deg}
 .smoke-words li:nth-child(5),.smoke-words li:nth-child(6){width:42%;white-space:normal;text-align:center}
 .smoke-words li:nth-child(5){left:25%;top:58%;--smoke-angle:-3deg}
 .smoke-words li:nth-child(6){left:72%;top:58%;--smoke-angle:3deg}
}
@media(max-width:360px){.smoke-words li{font-size:15px}}
@media(prefers-reduced-motion:reduce){
 .smoke-stage.entrance-ready .smoke-arrival,.smoke-stage.is-entering .smoke-arrival,.dice-catcher.entrance-ready .catcher-visual,.dice-catcher.is-entering .catcher-visual{animation:none!important;opacity:1;transform:none}
 .smoke-stage.entrance-ready .smoke-words li,.smoke-stage.is-entering .smoke-words li{animation:none!important;opacity:1;filter:none}
}