/* Hero film "Say it once". Stage is 1280x720, scaled to fit by dayfilm.js. */
.df{position:relative;width:100%;aspect-ratio:16/9;border-radius:28px;background:#F4F6FA;border:1px solid #E6E9F0;overflow:hidden;box-shadow:0 50px 100px -50px rgba(21,26,45,.35)}
.df-stage{position:absolute;left:0;top:0;width:1280px;height:720px;transform-origin:0 0;perspective:1800px;font-family:'Plus Jakarta Sans',sans-serif;color:#151A2D}
.df-cam{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1.8s cubic-bezier(.3,.9,.3,1)}
.df[data-scene="1"] .df-cam{transform:translateZ(40px)}
.df[data-scene="2"] .df-cam{transform:rotateX(7deg) rotateY(-6deg) scale(.97)}
.df[data-scene="2b"] .df-cam{transform:rotateX(5deg) rotateY(6deg) scale(.99)}
.df[data-scene="3"] .df-cam{transform:none}
.df[data-scene="4"] .df-cam{transform:rotateX(9deg) scale(.96)}
.df[data-scene="5"] .df-cam{transform:none}

.dfe{position:absolute;opacity:0;transform:translateY(22px) scale(.96);transition:opacity .45s ease,transform .75s cubic-bezier(.2,1.35,.35,1)}
.dfe.on{opacity:1;transform:none}
.dfe.pop{transform:scale(.4)}.dfe.pop.on{transform:none}
.df-lane .dfe,.df-wall .dfe{position:relative}
.df-reel .df-shot,.df-deck .df-slide{position:absolute}
.df-mut{color:#5B6475;font-size:15px}
.df-av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex:none}
.df-pill{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;font-size:14px;font-weight:700;white-space:nowrap;margin-right:6px}
.df-pill.grey{background:#EEF1F6;color:#3A4257}.df-pill.vio{background:#ECE8FF;color:#4527C7}.df-pill.amb{background:#FEF0C7;color:#8A4B08}.df-pill.grn{background:#D1FADF;color:#05603A}.df-pill.red{background:#FEE4E2;color:#B42318}

/* clock */
.df-clock{position:absolute;right:44px;top:34px;font-size:22px;font-weight:800;letter-spacing:-.4px;background:#fff;border:1px solid #E6E9F0;border-radius:14px;padding:10px 16px;opacity:0;transition:opacity .4s;z-index:5}
.df-clock.on{opacity:1}
.df-clock.tick{animation:dfTick .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes dfTick{0%{transform:translateY(-10px) scale(1.12)}100%{transform:none}}

/* scene 1: spoken lines */
.df-say{position:absolute;left:120px;font-size:58px;font-weight:800;letter-spacing:-1.8px;line-height:1;white-space:nowrap;opacity:0;transition:opacity .4s,transform .7s cubic-bezier(.5,0,.2,1)}
.df-say.on{opacity:1}
.df-say.gone{opacity:0;transform:translateY(-60px) scale(.7);transform-origin:0 50%}
.df-say b{color:#5B34E6}
.df-wave{display:inline-flex;gap:4px;align-items:center;height:36px;margin-left:8px}
.df-wave i{width:5px;border-radius:3px;background:#5B34E6;height:10px;animation:dfWave 1s ease-in-out infinite}
.df-wave i:nth-child(2){animation-delay:.1s}.df-wave i:nth-child(3){animation-delay:.25s}.df-wave i:nth-child(4){animation-delay:.05s}.df-wave i:nth-child(5){animation-delay:.3s}.df-wave i:nth-child(6){animation-delay:.15s}.df-wave i:nth-child(7){animation-delay:.2s}
@keyframes dfWave{0%,100%{height:8px}50%{height:34px}}

/* lanes */
.df-lane{position:absolute!important;top:104px;width:350px;height:540px;background:#fff;border:1px solid #E6E9F0;border-radius:22px;padding:20px;display:flex;flex-direction:column;gap:14px;box-shadow:0 30px 60px -36px rgba(21,26,45,.4);transition:opacity .5s ease,transform .8s cubic-bezier(.2,1.2,.35,1)}
.df-lh{display:flex;align-items:center;gap:12px;font-size:17px}.df-lh .df-pill{margin-left:auto;margin-right:0}
.df-obj{flex:1;position:relative;display:grid;place-items:center}
.df-prog{height:8px;border-radius:99px;background:#EEF1F6;overflow:hidden;position:relative}
.df-prog .wide{position:absolute;inset:0;background:#5B34E6;border-radius:99px;transform:scaleX(0);transform-origin:0 50%;opacity:1;transition:transform 8s linear}
.df-prog .wide.on{transform:scaleX(1)}
.df-foot{height:74px;position:relative}
.df-foot .dfe{position:absolute;left:0;top:0}
.df-foot .dfe:nth-child(2){top:36px}
.df-ck{display:inline-flex;align-items:center;font-size:13px;font-weight:700;color:#05603A;margin-right:12px}
.df-ck:before{content:"";width:14px;height:14px;border-radius:50%;background:#0B7A4B;margin-right:6px}
.df-stamp{right:0;left:auto!important;top:18px!important;border:3px solid;border-radius:10px;padding:5px 10px;font-weight:800;font-size:15px;letter-spacing:1px;background:#fff;transform:scale(2.6) rotate(-20deg)}
.df-stamp.on{transform:rotate(-7deg)}
.df-stamp.ok{color:#0B7A4B;top:-5px!important;margin-top:0}.df-stamp.late{color:#8A4B08;font-size:12px;top:34px!important}
.nudge{top:-44px!important;background:#151A2D;color:#fff;font-weight:700;font-size:14px;padding:9px 14px;border-radius:12px 12px 12px 3px}
.df[data-focus="1"] .df-lane:not(.l1),.df[data-focus="2"] .df-lane:not(.l2),.df[data-focus="3"] .df-lane:not(.l3){opacity:.28}
.df[data-focus="1"] .l1,.df[data-focus="2"] .l2,.df[data-focus="3"] .l3{transform:translateZ(40px) scale(1.02)}

/* reel */
.df-reel{width:158px;height:280px;border:6px solid #151A2D;border-radius:26px;position:relative;overflow:hidden;background:#EEF1F6}
.df-reel .df-shot{inset:0 0 34px 0;display:grid;place-items:center;font-weight:800;font-size:24px;letter-spacing:-.6px;text-align:center;padding:10px;transform:translateY(100%);transition:transform .7s cubic-bezier(.3,1,.3,1),opacity .2s}
.df-reel .df-shot.on{transform:none}
.df-strip{position:absolute;left:0;right:0;bottom:0;height:34px;background:#151A2D;display:flex;gap:3px;padding:7px 6px}
.df-strip i{position:relative!important;flex:1;border-radius:3px}
.df-strip .df-head{position:absolute!important;top:3px;bottom:3px;left:6px;width:3px;background:#fff;border-radius:2px;transform:none;transition:left 5.5s linear,opacity .3s}
.df-strip .df-head.on{left:calc(100% - 9px)}

/* deck */
.df-deck{width:290px;height:240px;position:relative}
.df-slide{left:50%;top:50%;width:210px;height:124px;margin:-62px 0 0 -105px;background:#fff;border:1px solid #D5DAE5;border-radius:10px;padding:14px;box-shadow:0 14px 26px -16px rgba(21,26,45,.5);display:flex;flex-direction:column;gap:8px;font-size:14px}
.df-slide em{position:absolute;right:8px;top:6px;font-style:normal;font-size:11px;font-weight:800;color:#5B6475}
.df-slide u{display:block;height:7px;border-radius:4px;background:#E3E7F0;text-decoration:none}
.df-slide.s1.on{transform:translate(-44px,-56px) rotate(-7deg)}.df-slide.s2.on{transform:translate(-20px,-28px) rotate(-3deg)}.df-slide.s3.on{transform:translate(4px,0) rotate(1deg)}.df-slide.s4.on{transform:translate(26px,28px) rotate(4deg)}.df-slide.s5.on{transform:translate(48px,56px) rotate(7deg)}
.df-slide.s4.fix{outline:3px solid #C97A0A;animation:dfShake .5s 2}
@keyframes dfShake{0%,100%{margin-left:-105px}25%{margin-left:-111px}75%{margin-left:-99px}}
.df-mini{display:flex;gap:6px;align-items:flex-end;height:54px}.df-mini i{flex:1;background:#5B34E6;border-radius:3px}

/* report */
.df-sheet{width:270px;background:#fff;border:1px solid #D5DAE5;border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:9px;font-size:15px;box-shadow:0 14px 26px -16px rgba(21,26,45,.5)}
.df-bars{display:flex;gap:9px;align-items:flex-end;height:110px;border-bottom:2px solid #E3E7F0;padding-bottom:0}
.df-bars .grow{position:relative!important;flex:1;background:#5B34E6;border-radius:5px 5px 0 0;opacity:1;transform:scaleY(0);transform-origin:50% 100%;transition:transform .9s cubic-bezier(.2,1.4,.4,1)}
.df-bars .grow.on{transform:none}
.df-bars .grow:last-child{background:#0B7A4B}
.df-row{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600}.df-row span{width:90px}.df-row u{flex:1;height:7px;border-radius:4px;background:#E3E7F0}
.df-row.tot{border-top:1px solid #E3E7F0;padding-top:8px;font-size:15px;justify-content:space-between}

/* wall */
.df-wall{position:absolute!important;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.df-count{display:flex;align-items:baseline;gap:16px}
.df-num{font-size:150px;font-weight:800;letter-spacing:-7px;line-height:.9;color:#151A2D;font-variant-numeric:tabular-nums}
.df-of{font-size:34px;font-weight:800;letter-spacing:-1px;color:#5B6475}
.df-tiles{display:grid;grid-template-columns:repeat(10,58px);gap:10px}
.df-tiles i{height:44px;border-radius:9px;background:#fff;border:1px solid #E6E9F0;position:relative;transform:rotateX(90deg);transition:transform .6s cubic-bezier(.2,1.4,.4,1),background .3s,border-color .3s}
.df-tiles i:before,.df-tiles i:after{content:"";position:absolute;left:9px;right:16px;height:5px;border-radius:3px;background:#E3E7F0;top:12px}
.df-tiles i:after{top:24px;right:26px}
.df-tiles i.on{transform:none}
.df-tiles i.on.g{background:#D1FADF;border-color:#A6E9C1}.df-tiles i.on.a{background:#FEF0C7;border-color:#F7D98A}.df-tiles i.on.r{background:#FEE4E2;border-color:#F3B7B2}
.df-leg{display:flex;flex-direction:column;align-items:center;gap:12px;height:80px}
.df-leg .df-pill{height:36px;font-size:16px;padding:0 16px}

/* end card */
.df-end{position:absolute!important;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.df-logo{display:flex;gap:10px}.df-logo span{width:74px;height:74px;border-radius:20px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:40px}
.df-tag{font-size:84px;font-weight:800;letter-spacing:-3px;line-height:1;text-align:center;text-shadow:0 0 40px #fff,0 0 80px #fff}
.df-tag .hand{font-family:'Caveat',cursive;color:#5B34E6;font-size:100px;letter-spacing:-1px}

/* progress of the film itself */
.df-bar{position:absolute;left:44px;right:44px;bottom:22px;height:4px;border-radius:4px;background:#E3E7F0;overflow:hidden}
.df-bar i{display:block;height:100%;width:0;background:#5B34E6;border-radius:4px}

/* still frame: no transitions */
.df-still *,.df-still .df-cam{transition:none!important;animation:none!important}