/* hero film: the booking app plays a real 01:20 booking, back office reacts. Driven by film.js (data-scene 0-5). */
.film{--pw:272px;--gold:#E8D6B4;position:relative;width:100%;max-width:560px;margin:0 auto;padding:44px 0 8px;display:grid;justify-items:center}
.film-clock{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;padding:7px 14px 7px 10px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);font-size:13.5px;color:#DCECF2;line-height:1}
.film-clock i{width:8px;height:8px;border-radius:50%;background:#7BE0A6;box-shadow:0 0 0 4px rgba(123,224,166,.18);animation:fc-blink 2s ease-in-out infinite}
.film-clock time{font:600 15px/1 var(--sans);color:#fff;font-variant-numeric:tabular-nums;letter-spacing:.02em}
@keyframes fc-blink{50%{opacity:.35}}

/* phone */
.film-phone{position:relative;width:var(--pw);aspect-ratio:9/18.6;padding:9px;border-radius:44px;background:linear-gradient(145deg,#4a5d78,#1b2638 60%,#33445e);box-shadow:0 0 0 1px rgba(255,255,255,.12) inset,0 50px 90px -30px rgba(0,0,0,.7),0 0 120px -10px rgba(159,199,216,.35)}
.film-phone:before{content:"";position:absolute;top:16px;left:50%;width:74px;height:20px;margin-left:-37px;border-radius:12px;background:#0d131d;z-index:5}
.fp{position:relative;height:100%;overflow:hidden;border-radius:36px;background:#fff;color:#141414;font-size:calc(var(--pw)/25);line-height:1.35;padding:3.4em .95em 0}
.fp-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.8em}
.fp-top b{font-size:1.25em;letter-spacing:.02em}
.fp-top span{padding:.45em .9em;border-radius:999px;background:#141414;color:#fff;font-size:.82em;font-weight:600}
.fp-date{display:flex;align-items:center;gap:.6em;padding:.75em .8em;border-radius:1em;background:#F4F4F2;transition:box-shadow .3s}
.fp-date>span{font-size:.82em;color:#777}
.fp-date b{flex:1;position:relative;height:1.35em;overflow:hidden;font-size:.98em}
.fp-date b span{position:absolute;left:0;top:0;transition:transform .45s var(--ease),opacity .45s}
.fp-d1{transform:translateY(110%);opacity:0;color:#B4233F}
.fp-date em{font-style:normal;padding:.42em .85em;border-radius:999px;background:#B4233F;color:#fff;font-size:.8em;font-weight:600}
.fp-chips{display:flex;gap:.4em;margin:.8em 0;white-space:nowrap;overflow:hidden}
.fp-chips i{font-style:normal;font-size:.8em;padding:.4em .85em;border-radius:999px;background:#F4F4F2}
.fp-chips i.on{background:#141414;color:#fff}
.fp-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75em .6em}
.fp-it{position:relative;margin:0;transition:opacity .5s,filter .5s,transform .5s var(--ease)}
.fp-it img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:.8em;display:block}
.fp-it figcaption{margin-top:.35em}
.fp-it b{display:block;font-size:.84em;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fp-it span{display:block;font-size:.76em;color:#B4233F;font-weight:600}
.fp-it>i{position:absolute;top:.5em;left:.5em;font-style:normal;font-size:.72em;font-weight:700;padding:.3em .7em;border-radius:999px;opacity:0;transform:translateY(-4px);transition:opacity .35s,transform .35s}
.fp-ok{background:#E3F4EA;color:#1E6B42}
.fp-no{background:rgba(20,20,20,.78);color:#fff}

/* sheets */
.fp-sheet{position:absolute;left:0;right:0;bottom:0;padding:1.2em 1.1em 1.6em;border-radius:1.6em 1.6em 0 0;background:#fff;box-shadow:0 -20px 40px -10px rgba(0,0,0,.25);transform:translateY(105%);transition:transform .55s var(--ease)}
.fp-sheet:before{content:"";display:block;width:3em;height:.3em;margin:-.4em auto .9em;border-radius:9px;background:#ddd}
.fp-h{display:block;font-size:.95em;margin-bottom:.8em}
.fp-days{display:grid;grid-template-columns:repeat(7,1fr);gap:.25em;text-align:center}
.fp-days i{font-style:normal;font-size:.7em;color:#999}
.fp-days u{text-decoration:none;font-size:.82em;line-height:2.1em;border-radius:50%;transition:background .25s,color .25s}
.fp-pay-row{display:flex;gap:.8em;align-items:center}
.fp-pay-row img{width:3.6em;aspect-ratio:3/4;object-fit:cover;border-radius:.6em}
.fp-pay-row b,.fp-pay-row span,.fp-pay-row strong{display:block}
.fp-pay-row b{font-size:.9em}.fp-pay-row span{font-size:.76em;color:#777}
.fp-pay-row strong{font-size:1.05em;color:#1F2D42;margin-top:.15em}
.fp-qr{position:relative;width:8.5em;margin:1em auto .5em;padding:.6em;border-radius:.8em;background:#fff;box-shadow:0 0 0 1px #e5e5e5;color:#1F2D42;overflow:hidden}
.fp-qr svg{display:block;width:100%;height:auto}
.fp-qr i{position:absolute;left:0;right:0;top:0;height:2px;background:#2F7A4E;box-shadow:0 0 12px 3px rgba(47,122,78,.55);opacity:0}
.fp-pp{display:block;text-align:center;font-size:.76em;color:#555}
.fp-done{text-align:center;padding-top:1.6em}
.fp-done svg{width:4.4em;height:4.4em;margin:0 auto .6em;display:block;fill:none;stroke:#2F7A4E;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fp-done circle{fill:#E3F4EA;stroke:none}
.fp-done path{stroke-dasharray:40;stroke-dashoffset:40}
.fp-done b{display:block;font-size:1.2em;color:#1E6B42}
.fp-done span{display:block;font-size:.8em;color:#555;margin-top:.25em}

/* finger tap */
.fp-tap{position:absolute;z-index:9;width:2.6em;height:2.6em;margin:-1.3em 0 0 -1.3em;border-radius:50%;background:rgba(82,107,145,.28);box-shadow:0 0 0 2px rgba(82,107,145,.55);opacity:0;left:var(--tx,80%);top:var(--ty,20%);transition:left .6s var(--ease),top .6s var(--ease),opacity .3s}
.fp-tap.go{animation:fp-press .5s ease-out}
@keyframes fp-press{0%{transform:scale(1)}40%{transform:scale(.7)}100%{transform:scale(1.5);opacity:0}}

/* scene states */
.film[data-scene="1"] .fp-tap,.film[data-scene="2"] .fp-tap,.film[data-scene="3"] .fp-tap{opacity:1}
.film[data-scene="1"] .fp-date{box-shadow:0 0 0 2px #B4233F}
.film[data-scene="2"] .fp-cal{transform:none}
.film[data-scene="2"] .d28{background:#B4233F;color:#fff;transition-delay:.9s}
.film:is([data-scene="3"],[data-scene="4"],[data-scene="5"]) .fp-d0{transform:translateY(-110%);opacity:0}
.film:is([data-scene="3"],[data-scene="4"],[data-scene="5"]) .fp-d1{transform:none;opacity:1}
.film:is([data-scene="3"],[data-scene="4"],[data-scene="5"]) .fp-busy{opacity:.32;filter:grayscale(1)}
.film:is([data-scene="3"],[data-scene="4"],[data-scene="5"]) .fp-it>i{opacity:1;transform:none}
.film[data-scene="3"] .fp-pick{transform:scale(1.04)}
.film[data-scene="4"] .fp-pay{transform:none}
.film[data-scene="4"] .fp-qr i{animation:fp-scan 1.4s ease-in-out .3s 2;opacity:1}
@keyframes fp-scan{0%{top:0}50%{top:calc(100% - 2px)}100%{top:0}}
.film[data-scene="5"] .fp-done{transform:none}
.film[data-scene="5"] .fp-done path{transition:stroke-dashoffset .6s ease-out .35s;stroke-dashoffset:0}

/* back office + LINE ping */
.film-ping,.film-bo{position:absolute;z-index:6;color:var(--ink);background:#fff;border-radius:18px;box-shadow:0 24px 50px -20px rgba(0,0,0,.6)}
.film-ping{display:flex;gap:10px;align-items:center;left:-6px;top:120px;max-width:236px;padding:10px 12px 10px 10px;opacity:0;transform:translate(60px,30px) scale(.85);transition:opacity .45s,transform .7s var(--ease)}
.film-ping .lg{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#06C755;color:#fff;font:700 9.5px/1 var(--sans);letter-spacing:.02em}
.film-ping b{display:block;font-size:13px;line-height:1.35}.film-ping span{display:block;font-size:12px;color:var(--mute);line-height:1.4}
.film[data-scene="5"] .film-ping{opacity:1;transform:none;transition-delay:.5s}
.film-bo{right:-6px;bottom:96px;width:226px;padding:12px}
.film-bo-h{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px}
.film-bo-h b{font-size:14px}.film-bo-h span{font-size:11.5px;color:var(--mute)}
.film-bo-k{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.film-bo-k div{padding:8px 4px;border-radius:12px;background:var(--pearl);text-align:center;transition:background .4s}
.film-bo-k strong{display:block;font:700 17px/1.1 var(--sans);color:var(--brand-d);font-variant-numeric:tabular-nums}
.film-bo-k small{display:block;margin-top:3px;font-size:10.5px;line-height:1.3;color:var(--mute)}
.film[data-scene="5"] .film-bo-k div:not(:last-child){background:#E3F4EA}

/* steps */
.film-steps{list-style:none;counter-reset:fs;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;margin:22px 0 0;padding:0}
.film-steps li{counter-increment:fs;position:relative;padding-top:12px;font-size:12.5px;line-height:1.35;color:#9FB3C9;transition:color .3s}
.film-steps li:before{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px;background:rgba(255,255,255,.14)}
.film-steps li:after{content:"";position:absolute;left:0;top:0;height:3px;width:0;border-radius:3px;background:var(--gold)}
.film-steps li.on{color:#fff}.film-steps li.on:after{width:100%;transition:width var(--sd,1.6s) linear}
.film-steps li.done{color:#DCECF2}.film-steps li.done:after{width:100%}

@media(max-width:859px){
  .film{order:3;--pw:min(64vw,258px);padding-top:18px}
  .film-clock{font-size:12.5px;margin-bottom:14px}
  .film-ping{top:98px;max-width:205px;left:0}
  .film-ping b{font-size:12px}.film-ping span{font-size:11px}
  .film-bo{position:relative;order:5;right:auto;bottom:auto;width:100%;margin-top:14px;padding:10px 12px;display:flex;align-items:center;gap:12px}
  .film-bo-h{flex-direction:column;margin:0;gap:2px}
  .film-bo-k{flex:1}
  .film-bo-k small{font-size:10px}.film-bo-k strong{font-size:15px}
  .film-steps{order:4}
  .film-steps li{font-size:11.5px}
}
@media(min-width:860px){.film{--pw:290px;margin:0 0 0 auto;padding-bottom:40px}.film-ping{left:-110px;top:230px}.film-bo{right:-96px;bottom:210px}}
@media(prefers-reduced-motion:reduce){.film *{transition:none!important;animation:none!important}}