/* Scenes: shared base for the drawn designs (inc/scene_layer.php, assets/scenes/scenes.js). Authoring rule: an element's PLAIN rule is its FINAL state (what reduced motion, the editor and the still render show). `.sc-js .sc-piece:not(.sc-in) …` is the start state; `.sc-js .sc-piece.sc-in …` runs the entrance. Timing comes from inline custom properties on the element: --t (delay), --d (duration), --p (loop period), --amp (loop amplitude), --sx (sway sideways px), --o (actor transform-origin). An element carries data-m OR data-a, never both (one animation list per element): wrap it in a second actor instead. Transforms animate on .sc-actor wrappers ONLY (WebKit); inside an SVG only stroke-dashoffset and opacity animate. ⚠️ The BODY also carries .sc-: scope piece rules as .sc-piece.sc- (a bare .sc-:not(.sc-run) matches the body and pauses everything). ⚠️ The page has *,::before,::after{max-width:100%}: actors are exempt above. ⚠️ [dir] and .sc-js are BOTH on : write .sc-js[dir=rtl] …, never [dir=rtl] .sc-js … (it never matches). The hero exposes its stage size as --sc-stage-w / --sc-stage-h (px) for text that must fit the art. */ .sc-piece{position:relative;display:block;pointer-events:none;-webkit-user-select:none;user-select:none; --ease:cubic-bezier(.23,1,.32,1);--ease-io:cubic-bezier(.65,0,.35,1)} .sc-stage{position:relative;width:100%;container-type:size;max-width:none} .sc-stage>.sc-base{position:absolute;inset:0;width:100%;height:100%;display:block} .sc-actor{position:absolute;transform-origin:var(--o,50% 50%);max-width:none} /* an actor nested in an actor (entrance on the outer, loop on the inner) sits in the flow of its parent */ .sc-actor.sc-inner{position:relative;left:auto;top:auto;width:100%} .sc-actor>svg,.sc-actor>img{display:block;width:100%;height:auto;overflow:visible} .sc-piece svg{overflow:visible} [dir=rtl] .sc-piece[data-sc-mirror] .sc-stage{transform:scaleX(-1)} /* Hero: a cover box over the design still (object-position 50% 50%), shown once the intro is gone. */ .sc-hero{position:absolute;inset:0;overflow:hidden;visibility:hidden;container-type:size;z-index:0} .sc-hero.sc-live,.sc-still .sc-hero{visibility:visible} /* scenes.js sizes the stage like object-fit:cover (px, on load and resize): container units resolved wrongly in Chromium 124 here. Before the script runs the hero stage is hidden anyway; the still render is a 9:16 box. */ .sc-hero>.sc-stage{position:absolute;left:0;top:0;width:100%;aspect-ratio:9/16;max-width:none;max-height:none} /* ---- entrance marks (data-m) ---- */ .sc-js .sc-piece:not(.sc-in) [data-m=draw]{stroke-dasharray:1 1;stroke-dashoffset:1;visibility:hidden} .sc-js .sc-piece.sc-in [data-m=draw]{stroke-dasharray:1 1;animation:sc-draw var(--d,800ms) var(--ease-io) var(--t,0ms) both} .sc-js .sc-piece:not(.sc-in) [data-m=fade]{opacity:0} .sc-js .sc-piece.sc-in [data-m=fade]{animation:sc-fade var(--d,600ms) var(--ease) var(--t,0ms) both} .sc-js .sc-piece:not(.sc-in) [data-m=rise]{opacity:0;transform:translateY(14px)} .sc-js .sc-piece.sc-in [data-m=rise]{animation:sc-rise var(--d,700ms) var(--ease) var(--t,0ms) both} .sc-js .sc-piece:not(.sc-in) [data-m=pop]{opacity:0;transform:scale(.6)} .sc-js .sc-piece.sc-in [data-m=pop]{animation:sc-pop var(--d,520ms) var(--ease) var(--t,0ms) both} .sc-js .sc-piece:not(.sc-in) [data-m=grow]{transform:scale(0)} .sc-js .sc-piece.sc-in [data-m=grow]{animation:sc-grow var(--d,700ms) var(--ease) var(--t,0ms) both} .sc-js .sc-piece:not(.sc-in) [data-m=unroll]{clip-path:inset(0 0 100% 0)} .sc-js .sc-piece.sc-in [data-m=unroll]{animation:sc-unroll var(--d,900ms) var(--ease-io) var(--t,0ms) both} /* hidden until the pen touches down: a round cap otherwise shows a dot at the start while it waits */ @keyframes sc-draw{0%{stroke-dashoffset:1;visibility:hidden}1%{visibility:visible}100%{stroke-dashoffset:0;visibility:visible}} @keyframes sc-fade{from{opacity:0}to{opacity:1}} @keyframes sc-rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} @keyframes sc-pop{0%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}} @keyframes sc-grow{from{transform:scale(0)}to{transform:none}} @keyframes sc-unroll{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}} /* ---- ambient loops (data-a), on .sc-actor only; they start from rest ---- */ .sc-js .sc-piece.sc-in [data-a=swing]{animation:sc-swing var(--p,7s) linear calc(var(--t,0ms) + var(--d,0ms)) infinite} .sc-js .sc-piece.sc-in [data-a=bob]{animation:sc-bob var(--p,6s) linear calc(var(--t,0ms) + var(--d,0ms)) infinite} .sc-js .sc-piece.sc-in [data-a=sway]{animation:sc-sway var(--p,8s) linear calc(var(--t,0ms) + var(--d,0ms)) infinite} .sc-js .sc-piece.sc-in [data-a=drift]{animation:sc-drift var(--p,14s) var(--ease-io) calc(var(--t,0ms) + var(--d,0ms)) infinite alternate} .sc-js .sc-piece.sc-in [data-a=twinkle]{animation:sc-twinkle var(--p,5s) ease-in-out calc(var(--t,0ms) + var(--d,0ms)) infinite} .sc-js .sc-piece.sc-in [data-a=glow]{animation:sc-glow var(--p,6s) ease-in-out calc(var(--t,0ms) + var(--d,0ms)) infinite} .sc-js .sc-piece.sc-in [data-a=flicker]{animation:sc-flicker var(--p,2.3s) linear calc(var(--t,0ms) + var(--d,0ms)) infinite} .sc-js .sc-piece.sc-in [data-a=spin]{animation:sc-spin var(--p,40s) linear calc(var(--t,0ms) + var(--d,0ms)) infinite} .sc-js .sc-piece.sc-in [data-a=fall]{animation:sc-fall var(--p,11s) linear calc(var(--t,0ms) + var(--r2,0) * var(--p,11s)) infinite both} /* pendulum-like: fastest through rest, still at the ends (ease-out into an end, ease-in out of it) */ @keyframes sc-swing{ 0%{transform:rotate(0);animation-timing-function:cubic-bezier(.33,.66,.66,1)} 25%{transform:rotate(var(--amp,2deg));animation-timing-function:cubic-bezier(.33,0,.66,.33)} 50%{transform:rotate(0);animation-timing-function:cubic-bezier(.33,.66,.66,1)} 75%{transform:rotate(calc(var(--amp,2deg) * -1));animation-timing-function:cubic-bezier(.33,0,.66,.33)} 100%{transform:rotate(0)}} @keyframes sc-bob{ 0%{transform:translateY(0);animation-timing-function:cubic-bezier(.33,.66,.66,1)} 25%{transform:translateY(calc(var(--amp,5px) * -1));animation-timing-function:cubic-bezier(.33,0,.66,.33)} 50%{transform:translateY(0);animation-timing-function:cubic-bezier(.33,.66,.66,1)} 75%{transform:translateY(var(--amp,5px));animation-timing-function:cubic-bezier(.33,0,.66,.33)} 100%{transform:translateY(0)}} @keyframes sc-sway{ 0%{transform:none;animation-timing-function:cubic-bezier(.33,.66,.66,1)} 25%{transform:translateX(var(--sx,1.5px)) rotate(var(--amp,2deg));animation-timing-function:cubic-bezier(.33,0,.66,.33)} 50%{transform:none;animation-timing-function:cubic-bezier(.33,.66,.66,1)} 75%{transform:translateX(calc(var(--sx,1.5px) * -1)) rotate(calc(var(--amp,2deg) * -1));animation-timing-function:cubic-bezier(.33,0,.66,.33)} 100%{transform:none}} @keyframes sc-drift{from{transform:none}to{transform:translateX(var(--span,12px))}} @keyframes sc-twinkle{0%,100%{opacity:1}50%{opacity:var(--lo,.35)}} @keyframes sc-glow{0%,100%{opacity:1}50%{opacity:var(--lo,.6)}} @keyframes sc-flicker{0%,100%{transform:none;opacity:1}17%{transform:scale(.97,1.04);opacity:.94}33%{transform:scale(1.02,.97) rotate(1deg)}52%{transform:scale(.98,1.06) rotate(-1deg);opacity:.9}71%{transform:scale(1.01,.98)}86%{transform:scale(.99,1.03) rotate(.6deg);opacity:.96}} @keyframes sc-spin{to{transform:rotate(360deg)}} /* a particle starts ABOVE its stage (its plain top is negative) and falls through it with a small sway and turn */ @keyframes sc-fall{ from{transform:translate3d(0,0,0) rotate(0)} 25%{transform:translate3d(calc(var(--sw,10px) * 1),30cqh,0) rotate(calc(var(--turn,120deg) * .25))} 50%{transform:translate3d(0,60cqh,0) rotate(calc(var(--turn,120deg) * .5))} 75%{transform:translate3d(calc(var(--sw,10px) * -1),90cqh,0) rotate(calc(var(--turn,120deg) * .75))} to{transform:translate3d(0,120cqh,0) rotate(var(--turn,120deg))}} /* loops pause off screen */ .sc-js .sc-piece:not(.sc-run) [data-a]{animation-play-state:paused!important} /* static: nothing moves, everything in its final (plain) state; particles are not shown */ .sc-static .sc-piece,.sc-static .sc-piece *{animation:none!important;transition:none!important} .sc-static .sc-piece [data-a=fall]{visibility:hidden} /* Classic designs with drawn pieces (the eleven existing designs, sc-kit-classic + sc-design): the piece is the section's one ornament, so the design's stock hairline and heading sprig step aside wherever a piece sits. */ body.sc-design.sc-kit-classic #sa-sections section:has(>.sc-piece)::before{display:none} body.sc-design.sc-kit-classic #sa-sections section:has(>.sc-piece)>.wd-heading-art{display:none}