*{box-sizing:border-box}html,body{margin:0;background:#111713;color:#fff;font-family:Arial,sans-serif}body{overflow:hidden}.experience{height:100svh;min-height:420px;position:relative;isolation:isolate;overflow:hidden}.scenes,.scene,.shade{position:absolute;inset:0}.scene{background-image:var(--photo);background-size:cover;background-position:center;opacity:0;transform:scale(1.035);transition:opacity 1.8s ease,transform 9s linear;will-change:opacity,transform}.scene.active{opacity:1;transform:scale(1.1)}.shade{background:linear-gradient(180deg,rgba(5,10,7,.1),rgba(5,10,7,.23) 45%,rgba(5,10,7,.74));pointer-events:none}.brand{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);width:clamp(200px,24vw,330px);filter:drop-shadow(0 2px 20px #0003);animation:arrive 1.7s ease both}.brand img{display:block;width:100%;height:auto;object-fit:contain}.registered{position:absolute;right:-9px;bottom:11%;font-size:11px;font-weight:400}.filmstrip{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:9px}.frame{width:76px;height:49px;padding:0;border:1px solid #ffffff35;background:#16211b;cursor:pointer;position:relative;overflow:hidden;opacity:.48;transition:opacity .3s,border-color .3s,transform .3s}.frame img{width:100%;height:100%;object-fit:cover;display:block}.frame:hover{opacity:1;transform:translateY(-3px)}.frame.selected{opacity:1;border-color:#fff9}.progress{position:absolute;bottom:0;left:0;width:0;height:2px;background:#fff}.selected .progress{animation:progress 8s linear forwards}.paused .progress{animation-play-state:paused}.playback{position:absolute;bottom:47px;right:42px;width:36px;height:36px;border:1px solid #ffffff40;border-radius:50%;background:#0001;color:white;display:grid;place-items:center;cursor:pointer;transition:background .2s}.playback:hover{background:#fff2}.playback svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3}.playback .play-icon{display:none;fill:currentColor;stroke:none}.paused .play-icon{display:block}.paused .pause-icon{display:none}.counter{position:absolute;left:42px;bottom:60px;font-size:10px;letter-spacing:2px;display:flex;gap:14px;align-items:center;color:#fffa}.counter i{display:block;width:34px;height:1px;background:#ffffff50}button:focus-visible{outline:2px solid white;outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes progress{to{width:100%}}@keyframes arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}@media(max-width:600px){.brand{width:62vw;max-width:280px;top:43%}.filmstrip{bottom:34px;gap:7px}.frame{width:58px;height:40px}.counter{left:20px;bottom:101px;font-size:9px}.playback{right:20px;bottom:88px}.scene{background-position:58% center}.registered{right:-7px;font-size:9px}}@media(prefers-reduced-motion:reduce){.scene{transform:none!important;transition:opacity .3s}.brand{animation:none}.selected .progress{animation:none}*{scroll-behavior:auto}}
/* The supplied master is kept intact: crop the descriptor in layout and invert for white ink. */
.brand{aspect-ratio:1.45;overflow:hidden;filter:none;mix-blend-mode:screen}
.brand img{position:absolute;top:-18.5%;left:0;width:100%;height:auto;filter:invert(1) grayscale(1)}
.registered{right:0;bottom:1%;z-index:1}