*{box-sizing:border-box}body{margin:0;background:#211b18;color:#f6edda;font-family:'Noto Sans SC',sans-serif;overflow-x:clip}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid #f8b139;outline-offset:5px}header{position:fixed;top:0;left:0;width:100%;height:76px;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:0 4%;color:#f6edda;mix-blend-mode:difference;border-bottom:1px solid #f6edda33}.brand{font:900 36px 'Barlow Condensed',Impact,sans-serif;color:inherit;text-decoration:none;letter-spacing:-1px}.brand sup{font:10px sans-serif;vertical-align:top;position:relative;top:7px}header>span{font:10px sans-serif;letter-spacing:2px}header button{color:inherit;border:1px solid #f6edda77;border-radius:30px;background:none;padding:10px 18px;font-size:11px}#film{height:650svh;position:relative}#stage{position:sticky;top:0;height:100svh;min-height:560px;overflow:hidden;background:#211b18;color:#f6edda;isolation:isolate}.backword{position:absolute;left:38%;top:10%;font:900 25vw/.9 'Barlow Condensed',Impact,sans-serif;letter-spacing:-.04em;opacity:.045}.counter{position:absolute;left:4%;top:110px;font:11px sans-serif;letter-spacing:2px;opacity:.6}.copy{position:absolute;left:7%;top:32%;width:37%;z-index:15;will-change:transform,opacity;pointer-events:none}.copy small{font:10px sans-serif;letter-spacing:2px}.copy h1,.copy h2{font-size:clamp(35px,4.7vw,74px);line-height:1.22;letter-spacing:-.055em;margin:25px 0;font-weight:900}.copy p{font-size:12px;line-height:2;opacity:.65}.copy:not(:first-of-type){opacity:0}#scene{position:absolute;inset:0;perspective:1100px}#burger{position:absolute;left:65%;top:51%;width:440px;height:440px;z-index:8;will-change:transform}#whole{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 25px 20px #0005)}#ingredients{position:absolute;inset:0;opacity:0}.ingredient{position:absolute;left:50%;top:50%;width:440px;height:440px;background-image:url('assets/ingredients.png');background-size:400% 200%;background-repeat:no-repeat;will-change:transform;filter:drop-shadow(0 12px 9px #170f0a20)}.ingredient[data-i="0"]{background-position:0% 0%;z-index:18}.ingredient[data-i="1"]{background-position:33.33333% 0%;z-index:17}.ingredient[data-i="2"]{background-position:66.66667% 0%;z-index:16}.ingredient[data-i="3"]{background-position:100% 0%;z-index:15}.ingredient[data-i="4"]{background-position:0% 100%;z-index:14}.ingredient[data-i="5"]{background-position:33.33333% 100%;z-index:13}.ingredient[data-i="6"]{background-position:66.66667% 100%;z-index:12}.ingredient[data-i="7"]{background-position:100% 100%;z-index:11}.tray{position:absolute;left:65%;top:78%;width:660px;height:210px;background:linear-gradient(140deg,#ede2ce,#d2c3a8);transform:translate(-50%,-50%) rotateX(65deg) rotateZ(-8deg);border:12px solid #e7ddca;box-shadow:0 35px 45px #0006;z-index:1;border-radius:12px}.tray span{position:absolute;bottom:8px;width:100%;text-align:center;color:#9a8f7e;font-size:9px;letter-spacing:2px}.shadow{position:absolute;left:65%;top:79%;width:370px;height:50px;transform:translate(-50%,-50%);background:#06020070;filter:blur(20px);border-radius:50%;z-index:2}.label{position:absolute;z-index:20;font-size:11px;opacity:0;pointer-events:none;white-space:nowrap}.a{left:43%;top:20%}.b{left:81%;top:37%}.c{left:37%;top:60%}.box{position:absolute;left:65%;top:66%;width:520px;height:250px;transform:translate(-50%,-50%);opacity:0;z-index:5;transform-style:preserve-3d;will-change:transform,opacity}.inside{position:absolute;inset:0;background:repeating-linear-gradient(45deg,#e8dbc0 0px,#e8dbc0 20px,#dfceb0 21px,#dfceb0 22px);border:18px solid #13100f;transform:rotateX(55deg);box-shadow:0 30px 45px #0007}.lid{position:absolute;left:0;right:0;height:240px;bottom:190px;background:#1c1714;border:8px solid #332720;transform-origin:bottom;transform:rotateX(-14deg);display:flex;flex-direction:column;justify-content:center;align-items:center;color:#f2e6ce;box-shadow:inset 0 0 0 2px #ad3828}.lid b{font:900 80px 'Barlow Condensed',Impact,sans-serif}.lid small{font:9px sans-serif;letter-spacing:2px;color:#d69b50}.front{position:absolute;left:0;right:0;bottom:-13px;height:105px;background:#201a16;border-top:3px solid #a63a27;box-shadow:0 15px 25px #0006;display:flex;align-items:center;justify-content:space-around;z-index:20;color:#f1e7d0}.front b{font:900 47px 'Barlow Condensed',Impact,sans-serif}.front small{font:8px sans-serif;letter-spacing:1.5px}.bottom{position:absolute;left:4%;right:4%;bottom:38px;display:flex;justify-content:space-between;align-items:center;z-index:20;font:9px sans-serif;letter-spacing:2px}.bottom small{display:block;font:10px 'Noto Sans SC',sans-serif;letter-spacing:0;margin-top:10px;opacity:.5}.timeline{position:absolute;bottom:0;left:0;right:0;height:3px;background:#88745a30;z-index:30}.timeline i{height:100%;width:100%;display:block;transform:scaleX(0);transform-origin:left;background:#c63a24}.finish{background:#f3ead7;color:#29201a;min-height:65svh;padding:100px 8%;text-align:center;display:flex;flex-direction:column;justify-content:center;align-items:center}.finish small{font:9px sans-serif;letter-spacing:2px;opacity:.6}.finish h2{font-size:clamp(35px,6vw,85px);letter-spacing:-.05em;margin:35px 0 15px}.finish p{font-size:13px;color:#766550}.finish button{margin:25px 0 45px;background:#ad3220;color:#fff0dc;border:0;border-radius:40px;padding:17px 35px;font-size:12px}
@media(max-width:700px){header{height:64px;padding:0 5%}.brand{font-size:30px}header>span{font-size:7px;letter-spacing:1px}header button{font-size:9px;padding:8px 12px}#film{height:600svh}#stage{min-height:630px}.counter{top:90px;left:5%;font-size:9px}.copy{left:7%;top:17%;width:88%}.copy small{font-size:8px;letter-spacing:1px}.copy h1,.copy h2{font-size:37px;margin:13px 0}.copy p{font-size:10px;line-height:1.8}.backword{left:0;top:44%;font-size:42vw}#burger{left:53%;top:62%;width:320px;height:320px}.ingredient{width:320px;height:320px}.tray{left:53%;top:84%;width:430px;height:160px}.shadow{left:53%;top:84%;width:240px}.a{left:7%;top:38%;font-size:9px}.b{left:71%;top:52%;font-size:9px}.c{left:5%;top:71%;font-size:9px}.box{left:53%;top:73%;width:350px;height:180px}.lid{height:180px;bottom:135px}.lid b{font-size:65px}.front{height:80px;bottom:-8px}.front b{font-size:38px}.front small{font-size:6px}.bottom{left:5%;right:5%;bottom:25px;font-size:8px}.bottom small{font-size:9px}.finish{padding:70px 6%}}
.ingredient{width:300px;height:300px}@media(max-width:700px){.ingredient{width:210px;height:210px}}
@media(max-width:700px){.copy p{max-width:180px}.label.a{left:77%;top:22%}.label.b{left:77%}}