:root{--ink:#1f2d20;--red:#d52d2f;--cream:#f6f5ed}
*{box-sizing:border-box}
body{margin:0;background:#d8d9d2;color:var(--ink);font-family:'Work Sans',Arial,sans-serif}
#stage{position:relative;margin:20px auto 0}
#frame{width:1080px;height:1920px;position:absolute;inset:0;overflow:hidden;background:#fff;transform-origin:top left}
.photoScene,#mechanism{position:absolute;inset:0;overflow:hidden}
#ingredients{z-index:1;background:#fff}#prep{z-index:2;background:#fff}#mechanism{z-index:3;background:#fff}#outcome{z-index:4;background:#fff}
.ingredientsPhoto{position:absolute;left:0;top:0;width:1080px;height:850px;overflow:hidden;background:#eee}.ingredientsPhoto img{width:100%;height:100%;object-fit:cover;object-position:center center}
.ingredientsGround{position:absolute;inset:850px 0 0;background:#fff}
#hook{position:absolute;left:74px;top:926px;width:900px;font-size:101px;font-weight:700;line-height:1.02;letter-spacing:-.035em}
#hook span,.mechanismCopy span,#prepCopy span,#outcomeCopy span{color:var(--red)}
.prepPhoto{position:absolute;left:0;top:0;width:1080px;height:1390px;overflow:hidden;background:#f2f0e6}.prepPhoto img{width:100%;height:100%;object-fit:cover;object-position:center center}
.prepGround{position:absolute;inset:1390px 0 0;background:#fff}
#prepCopy{position:absolute;left:73px;top:1512px;font-size:91px;font-weight:700;line-height:1.01;letter-spacing:-.035em}
.mechanismCream{position:absolute;left:0;top:0;width:1080px;height:500px;background:var(--cream)}
.mechanismCopy{position:absolute;left:75px;top:126px;font-size:135px;font-weight:700;line-height:1;letter-spacing:-.035em;opacity:0}
.outcomePhoto{position:absolute;left:0;top:0;width:1080px;height:1120px;overflow:hidden;background:#e8e8e0}.outcomePhoto img{width:100%;height:100%;object-fit:cover;object-position:center 57%}.outcomePhoto:after{content:"";position:absolute;left:0;right:0;top:0;height:455px;background:linear-gradient(#ffffffeb,#ffffff00)}
.outcomeGround{position:absolute;inset:1120px 0 0;background:#fff}
#outcomeCopy{position:absolute;left:73px;top:129px;font-size:99px;font-weight:700;line-height:1.01;letter-spacing:-.035em;opacity:0;text-shadow:0 2px 16px #ffffffab}
#endBrand{position:absolute;left:75px;top:1270px;color:var(--red);font-size:40px;font-weight:700;letter-spacing:-.02em;opacity:0}
#endTitle{position:absolute;left:72px;top:1345px;max-width:470px;font-size:72px;font-weight:700;line-height:1.02;letter-spacing:-.035em;opacity:0}
#endCTA{position:absolute;z-index:8;left:75px;right:75px;bottom:112px;height:132px;border-radius:72px;background:var(--red);color:#fff;display:flex;align-items:center;justify-content:space-between;padding:0 52px;font-size:39px;font-weight:600;letter-spacing:-.025em;opacity:0}
#endCTA span{font-size:66px;font-weight:300;line-height:1}
#productAnchor{position:absolute;z-index:6;left:550px;top:1180px;width:700px;height:700px;background:#fff;overflow:hidden}
#productAnchor img{width:100%;height:100%;object-fit:contain;display:block}
#motionOverlay{position:absolute;z-index:7;inset:0;width:1080px;height:1920px;pointer-events:none}
#controls{max-width:620px;margin:16px auto 28px;background:#fff;border-radius:10px;padding:14px 18px;display:flex;align-items:center;gap:16px;box-shadow:0 5px 18px #0002;font:14px Arial,sans-serif}
#controls button{border:0;border-radius:22px;background:#202820;color:#fff;padding:9px 20px;cursor:pointer}
#controls input{flex:1}#clock{min-width:72px;text-align:right}
body.render{background:transparent}body.render #stage{margin:0}body.render #controls{display:none}