/* Phonido explainer film: played in the page. Transform and opacity only for motion. */
.film{padding:clamp(48px,7vw,96px) 0;background:var(--snow)}
.film .wrap{max-width:1100px}
.film-head{margin-bottom:22px}
.film-head h2{font-size:clamp(28px,4vw,44px)}
.film-head .sub{color:var(--ink2);margin:10px 0 0;max-width:46em}
.film-card{background:var(--pine);border-radius:22px;overflow:hidden;box-shadow:var(--shadow);color:#fff}
.film-stage{position:relative;aspect-ratio:16/9;overflow:hidden;background:#dfe8ea;container-type:inline-size;isolation:isolate}
.film-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.fs{position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease;z-index:2;pointer-events:none;overflow:hidden}
.fs.on,.fs.out{opacity:1}
.fs.out{z-index:1}.fs.on{z-index:3}
.fs:not(.on):not(.out){opacity:0}
.fs.out{opacity:0}
@keyframes fkb{from{transform:translate3d(var(--x0,0),var(--y0,0),0) scale(var(--s0,1))}to{transform:translate3d(var(--x1,0),var(--y1,0),0) scale(var(--s1,1.08))}}
/* layers: .fp pans and zooms with the picture (transform only); .fl holds text that stays still */
.fp{position:absolute;inset:0;transform-origin:var(--o,50% 50%);will-change:transform}
.fs.on .fp,.fs.out .fp{animation:fkb var(--d,16s) linear forwards}
.fp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:none!important}
.fl{position:absolute;inset:0;pointer-events:none}
.fpt{position:absolute;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.flamp{width:11cqw;aspect-ratio:1;background:radial-gradient(circle,rgba(255,240,190,.95),rgba(255,214,130,.38) 45%,transparent 70%);opacity:0;animation:flit 2.5s ease forwards,flp 3.4s ease-in-out 2.5s infinite}
.flamp.sm{width:7cqw}
.flamp.on{opacity:1;animation:flp 3.4s ease-in-out infinite}
@keyframes flit{to{opacity:1}}@keyframes flp{50%{opacity:.7}}
.fbeam{position:absolute;left:12.2%;top:31.3%;width:82%;height:0;transform-origin:0 0;transform:rotate(19deg);opacity:0;animation:fsweep 9s ease-in-out infinite alternate,flit 3s ease .4s forwards}
.fbeam::before{content:"";position:absolute;left:0;top:-8cqw;width:100%;height:16cqw;background:linear-gradient(90deg,rgba(255,221,150,.75),rgba(255,226,165,.34) 45%,rgba(255,232,180,0) 96%);clip-path:polygon(0 49%,100% 0,100% 100%,0 51%);filter:blur(4px)}
@keyframes fsweep{from{transform:rotate(9deg)}to{transform:rotate(25deg)}}
.fy{position:absolute;left:var(--x);top:var(--y);font:700 3.8cqw/1 var(--body);color:#c98d3c;text-shadow:0 0 1.2cqw rgba(255,226,150,.95),0 0 .3cqw #fff6d8;opacity:0;animation:ffly var(--t,6s) ease-in-out infinite;animation-delay:var(--w,0s);will-change:transform,opacity}
.fy svg{width:3.2cqw;height:3.2cqw;display:block;overflow:visible;filter:drop-shadow(0 0 .6cqw rgba(255,226,150,.9))}
@keyframes ffly{0%{transform:translate3d(0,0,0) scale(.6);opacity:0}15%{opacity:1}82%{opacity:1}100%{transform:translate3d(var(--dx),var(--dy),0) scale(1);opacity:0}}
.fs:not(.on):not(.out) .fy,.fs:not(.on):not(.out) .flamp,.fs:not(.on):not(.out) .fbeam{animation:none}
.film.paused .fy,.film.paused .fp,.film.paused .flamp,.film.paused .fbeam{animation-play-state:paused}
/* chips lifted from the river */
.chip{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) translate(var(--fx),var(--fy)) scale(.8);padding:.7cqw 2cqw;border-radius:1.2cqw;background:#fffdf8;border:.3cqw solid var(--butter);font:700 max(3.3cqw,14px)/1.15 var(--body);color:var(--pine);box-shadow:0 .8cqw 2cqw rgba(31,59,58,.22);opacity:0;transition:opacity .8s ease,transform 1.6s var(--ease);white-space:nowrap}
.chip.in{opacity:1;transform:translate(-50%,-50%)}
/* still text: labels and paper bubbles */
.flab{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%);padding:.9cqw 2.6cqw;border-radius:99px;background:rgba(255,253,248,.95);color:var(--pine);font:700 max(4cqw,16px)/1.1 var(--body);box-shadow:0 .8cqw 2.4cqw rgba(31,59,58,.2);opacity:0;transition:opacity .9s ease;white-space:nowrap}
.flab.in{opacity:1}
.fbub{position:absolute;left:var(--x);top:var(--y);width:var(--w);padding:1.6cqw 2cqw;border-radius:3cqw;background:#fffdf8;border:.3cqw solid var(--line);box-shadow:0 1cqw 3cqw rgba(31,59,58,.2);opacity:0;transform:translateY(1cqw);transition:opacity .8s ease,transform .8s var(--ease);text-align:center}
.fbub.in{opacity:1;transform:none}
.fbub::after{content:"";position:absolute;left:var(--tail,70%);bottom:-1.3cqw;width:2.6cqw;height:2.6cqw;background:#fffdf8;border-right:.3cqw solid var(--line);border-bottom:.3cqw solid var(--line);transform:rotate(45deg)}
.brow{position:relative;display:flex;justify-content:center;gap:1.6cqw;transition:gap .9s var(--ease),opacity .6s ease;min-height:9.5cqw;align-items:flex-start}
.brow.joined{gap:.2cqw}
.bt{width:max(7cqw,34px);text-align:center;opacity:0;transform:translateY(.8cqw);transition:opacity .6s ease,transform .6s var(--ease)}
.bt.in{opacity:1;transform:none}
.bt b{display:block;font:700 max(6cqw,26px)/1.05 var(--body);color:var(--pine);background:#f1ebdf;border-radius:1.2cqw}
.bt i{display:block;font:700 max(3.4cqw,14px)/1.3 var(--body);font-style:normal;color:#8a9a96;transition:color .5s ease}
.bt i.lit{color:#b07a1c;text-shadow:0 0 1cqw rgba(255,226,150,.9)}
.bword{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:700 max(8cqw,34px)/1 var(--body);color:var(--pine);opacity:0;transition:opacity .7s ease;pointer-events:none}
.bword.in{opacity:1}.brow.hide .bt{opacity:0}
.cape{font:700 max(7cqw,30px)/1.1 var(--body);color:var(--pine);text-align:center}
.cape em{font-style:normal;display:inline-block;opacity:0;transform:translateX(3cqw);color:#b07a1c;transition:opacity .8s ease,transform 1s var(--ease)}
.cape em.in{opacity:1;transform:none}
.fwm{position:absolute;left:0;right:0;top:18%;display:flex;flex-direction:column;align-items:center;gap:1.4cqw;opacity:0;transition:opacity 1.4s ease}
.fwm.in{opacity:1}
.fwm .nm{display:flex;align-items:center;gap:1.2cqw;font:600 max(10cqw,42px)/1 var(--display);color:var(--pine);text-shadow:0 .3cqw 2cqw rgba(255,253,248,.85)}
.fwm svg{width:6cqw;height:6cqw}
.fnames{position:absolute;left:0;right:0;top:46%;display:flex;justify-content:center;flex-wrap:wrap;gap:1.4cqw;padding:0 3cqw;opacity:0;transition:opacity 1s ease}
.fnames.in{opacity:1}
.fnames span{padding:.9cqw 2.4cqw;border-radius:99px;background:rgba(255,253,248,.94);color:var(--pine);font:700 max(3.6cqw,15px)/1.1 var(--body);box-shadow:0 .8cqw 2.4cqw rgba(31,59,58,.18)}
/* play overlay */
.film-over{position:absolute;inset:0;z-index:6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:linear-gradient(180deg,rgba(31,59,58,.05),rgba(31,59,58,.5));transition:opacity .5s ease}
.film-over[hidden]{display:none}
.film-big{display:inline-flex;align-items:center;gap:16px;min-height:72px;padding:0 34px 0 26px;border-radius:999px;border:0;background:var(--snow);color:var(--pine);font:600 clamp(19px,2.6vw,28px)/1.15 var(--display);cursor:pointer;box-shadow:0 14px 40px rgba(31,59,58,.35);transition:transform .25s var(--ease)}
.film-big:hover{transform:scale(1.03)}
.film-big .tri{flex:none;width:46px;height:46px;border-radius:50%;background:var(--clay);display:grid;place-items:center}
.film-big .tri::before{content:"";margin-left:5px;border-left:15px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.film-big small{display:block;font:700 .62em/1.3 var(--body);color:var(--ink2);margin-top:3px}
.film-big:focus-visible,.fbtn:focus-visible,.fdot:focus-visible{outline:3px solid var(--butter);outline-offset:3px}
/* captions */
.film-cap{min-height:5.6em;padding:18px clamp(16px,3vw,32px);display:flex;align-items:center;justify-content:center;text-align:center;background:#12292a;font:700 clamp(19px,2.3vw,27px)/1.4 var(--body);color:#fff;letter-spacing:.005em}
.film-cap p{margin:0;max-width:34em}
.film:not(.cc-on) .film-cap{display:none}
/* controls */
.film-bar{display:flex;align-items:center;gap:12px;padding:12px clamp(12px,2.4vw,24px);background:var(--pine);flex-wrap:wrap}
.fbtn{min-height:44px;min-width:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(255,255,255,.35);background:transparent;color:#fff;font:700 15px/1 var(--body);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.fbtn:hover{background:rgba(255,255,255,.12)}
.fbtn.go{background:var(--snow);color:var(--pine);border-color:var(--snow)}
.fbtn[aria-pressed=true]{background:var(--butter);color:var(--pine);border-color:var(--butter)}
.fprog{flex:1 1 140px;height:10px;border-radius:6px;background:rgba(255,255,255,.22);overflow:hidden;min-width:120px}
.fprog i{display:block;height:100%;width:100%;background:var(--butter);transform:scaleX(0);transform-origin:left}
.ftime{font:700 14px/1 var(--body);color:#d6e2e1;min-width:5.5em;text-align:right;font-variant-numeric:tabular-nums}
.film-dots{display:flex;gap:8px;flex-wrap:wrap;padding:0 clamp(12px,2.4vw,24px) 14px;background:var(--pine)}
.fdot{width:32px;height:32px;border-radius:50%;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff;font:700 13px/1 var(--body);cursor:pointer;padding:0}
.fdot[aria-current=true]{background:var(--butter);color:var(--pine);border-color:var(--butter)}
.film-words{margin-top:18px;border:1.5px solid var(--line);border-radius:16px;background:var(--white)}
.film-words summary{cursor:pointer;padding:16px 20px;font:600 20px/1.2 var(--display);min-height:44px}
.film-words ol{margin:0;padding:0 20px 18px 44px;color:var(--ink2)}
.film-words li{margin:0 0 10px;padding-left:4px}
.film-words li b{display:block;font:700 13px/1.4 var(--body);color:var(--fjord)}
html.calm .fs{transition:none!important}
html.calm .fp{animation:none!important;transform:none!important}html.calm .fy{animation:none!important;opacity:.9;transform:translate3d(calc(var(--dx)*.5),calc(var(--dy)*.5),0)}html.calm .fbeam,html.calm .flamp{animation:none!important;opacity:1}
@media (prefers-reduced-motion:reduce){.fp{animation:none!important;transform:none!important}.fs,.chip,.flab,.fbub,.bt,.brow,.bword,.cape em,.fwm,.fnames{transition:none!important}.fy{animation:none!important;opacity:.9;transform:translate3d(calc(var(--dx)*.5),calc(var(--dy)*.5),0)}.fbeam,.flamp{animation:none!important;opacity:1}}
@media (max-width:700px){.film-big{padding:0 22px 0 16px;min-height:60px;gap:12px}.film-big .tri{width:38px;height:38px}.film-cap{min-height:7.4em}.ftime{display:none}.film-bar{gap:8px}}
.film .sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fbtn[hidden]{display:none}.film.fresh .film-cap{display:none}