/* The app showreel. Everything sits on the second screen; sizes come from showreel.js. */
.demo-row{--swap:cubic-bezier(.76,0,.24,1);--spectrum:conic-gradient(from 210deg,#ff5ea8,#ffb35e,#f7ff72,#6ef0c2,#6ea8ff,#c59af4,#ff5ea8)}

.reel-fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
[data-reel=ready] .reel-fallback{display:none}
.reel-screen,.reel-mini{position:absolute;inset:0;overflow:hidden;background:#fcfcfc}
.reel-plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 40%;will-change:transform}
.reel-screen .reel-plate{visibility:hidden}
.reel-status{position:absolute;inset:0 0 auto;z-index:12;display:flex;align-items:center;justify-content:space-between;height:6.4%;padding:1.5% 9% 0 10%;color:#141414;font:600 4cqw/1 -apple-system,'SF Pro Text',Persona,PersonaFigures,sans-serif;pointer-events:none}
.reel-status svg{width:21cqw;height:auto}
.reel-touch{position:absolute;width:13.5%;aspect-ratio:1;margin:-6.75% 0 0 -6.75%;border-radius:50%;background:#ffffff8c;border:1.5px solid #1717176e;box-shadow:0 2px 12px #1717172e;visibility:hidden;pointer-events:none}
.reel-ring{position:absolute;border-radius:50%;background:var(--spectrum);-webkit-mask:radial-gradient(closest-side,transparent calc(100% - 26px),#000 calc(100% - 25px));mask:radial-gradient(closest-side,transparent calc(100% - 26px),#000 calc(100% - 25px));pointer-events:none;visibility:hidden}
.reel-carousel{position:absolute;left:0;right:0;top:19.8%;height:35.7%;visibility:hidden}
.reel-card{position:absolute;top:0;bottom:0;width:77.9%;border-radius:6.4cqw;background:linear-gradient(#fff 45%,#d4d4d6);box-shadow:inset 0 0 0 1px #17171712;overflow:hidden}
.reel-card img{position:absolute;inset:7% 8%;width:84%;height:86%;object-fit:contain}
.reel-card span{position:absolute;left:4%;bottom:4.5%;padding:1.5% 4%;border-radius:99px;background:#ffffffd9;font:600 3cqw/1 Persona,sans-serif}

.reel-floor{position:absolute;left:var(--zx);top:var(--zy);width:var(--zw);height:var(--zh);z-index:6;pointer-events:none}
.pop{position:absolute;margin:0;will-change:transform}
.pop-in{visibility:hidden;will-change:transform,clip-path;transform-origin:50% 55%}
.pop img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.pop-cut img{filter:drop-shadow(0 12px 14px #1717172e)}
.pop-card .pop-in{background:#fff;border-radius:16px;box-shadow:0 18px 40px -16px #1717174d;overflow:hidden}
.pop-look img{filter:drop-shadow(0 10px 16px #17171722)}
.pop-art{visibility:hidden}
.pop-art img{filter:drop-shadow(0 14px 18px #17171747)}
.pop figcaption,.cell figcaption{font:400 9.5px/18px 'Geist Mono',ui-monospace,monospace;letter-spacing:.01em;color:#6a655f;text-align:center;white-space:nowrap}
.pop figcaption{height:18px}
.cell{position:absolute;display:flex;flex-direction:column;align-items:center;box-sizing:border-box;margin:0;padding:2px 5px 0}
.cell-art{position:relative;flex:1 1 0;min-height:0;width:100%;will-change:transform,clip-path}
.cell-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 100%;user-select:none;-webkit-user-drag:none;filter:drop-shadow(0 6px 8px #17171726)}
.cell figcaption{flex:none;height:18px;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.cell-art .cell-dye{-webkit-mask-image:linear-gradient(to top,#000 calc(var(--dye,0)*125% - 25%),transparent calc(var(--dye,0)*125%));mask-image:linear-gradient(to top,#000 calc(var(--dye,0)*125% - 25%),transparent calc(var(--dye,0)*125%))}
.cell-swatches{display:inline-flex;gap:6px;margin-left:9px;vertical-align:1px}
.cell-swatches i{display:block;width:7px;height:7px;border-radius:50%;box-shadow:inset 0 0 0 .5px #17171733}
.cell figcaption:has(.cell-swatches){overflow:visible}
.cell-quote{justify-content:center;padding-inline:3%}
.cell-quote .cell-art{flex:none;aspect-ratio:1;max-height:calc(100% - 38px)}
.cell-quote .cell-art img{object-position:50% 50%}
.cell-quote figcaption{height:auto;min-height:30px;padding-top:4px;white-space:normal;line-height:14px;text-wrap:balance}
.cell-card .cell-art{display:flex;justify-content:center;align-items:flex-end}
.cell-card .cell-art img{position:static;width:auto;height:auto;max-width:100%;max-height:100%;border-radius:9px}
.reel-badge{position:absolute;display:grid;place-items:center;width:calc(var(--phone-w)*.052);height:calc(var(--phone-w)*.052);border-radius:50%;background:#171717;color:#fff;font:600 calc(var(--phone-w)*.03)/1 PersonaFigures,sans-serif;font-style:normal;visibility:hidden;pointer-events:none}
.reel-type{position:absolute;color:#171717;font:400 3.65cqw/1.3 Persona,PersonaFigures,sans-serif;letter-spacing:-.01em;visibility:hidden}
.reel-type i{display:inline-block;width:.09em;height:1.05em;margin-left:.06em;vertical-align:-.16em;background:#171717;animation:reel-caret 1s steps(2) infinite}
.reel-ref{position:absolute;object-fit:cover;border-radius:2.4cqw;box-shadow:0 1px 5px #1717172e;visibility:hidden}
@keyframes reel-caret{from{opacity:1}to{opacity:0}}
/* The story's thread, in the free band under the shelf. reel-thread.js draws it and sets its opacity. */
.reel-thread{position:absolute;left:var(--zx);top:calc(var(--zy) + var(--zh));z-index:8;width:var(--zw);height:var(--line-h);opacity:0;cursor:grab;touch-action:pan-y;-webkit-user-select:none;user-select:none;outline:0}
.reel-thread:before{content:'';position:absolute;inset:-10px -6px 0;background:linear-gradient(to top,#fff 62%,#fff0);pointer-events:none}
.reel-thread canvas{position:relative;display:block;width:100%;height:100%}
.reel-thread.is-held{cursor:grabbing}
.reel-thread:focus-visible canvas{border-radius:12px;box-shadow:inset 0 0 0 1.5px #171717}
.demo-card[data-state=mini] .reel-thread{visibility:hidden}

.card-open{display:none}

/* Desktop: one story open, the others wait as still phones. */
@media(min-width:901px) and (min-height:541px){
  .experience{display:flex;flex-direction:column;padding-bottom:50px}
  .experience-heading{flex:none;padding-right:0}
  .experience-bottom{display:none}
  .demo-row{flex:1 1 0;min-height:0;display:flex;gap:10px;margin-top:14px;padding:0;perspective:none}
  .demo-card{flex:1 1 0;min-width:0;height:100%;overflow:hidden;border-radius:22px;background:#fbfaf6;box-shadow:inset 0 0 0 1px #1717170f;container-type:size;cursor:pointer;transition:flex-grow var(--reel-swap,.85s) var(--swap),background-color .5s}
  .demo-card:before{display:none}
  .demo-card:not([data-reel=ready]){cursor:default}
  .demo-card[data-state=open]{flex-grow:6;cursor:auto;background:#fff}
  .demo-card .card-heading{position:absolute;left:18px;right:18px;top:13px;z-index:9;display:flex;align-items:baseline;gap:9px;min-height:0;padding:0;text-align:left;animation:reel-heading .5s .25s both}
  .demo-card .card-number{margin:0;font-size:9px;color:#6a655f;white-space:nowrap}
  .demo-card .card-heading h3{font-size:27px;line-height:1;white-space:nowrap}
  .demo-card .card-heading p{margin:0 0 0 auto;font-size:12px;line-height:1.3;word-spacing:.14em;text-align:right;white-space:nowrap;color:#56524e;animation:reel-heading .4s .62s both}
  .demo-card .card-heading p br{display:none}
  .demo-card:not([data-state=open]) .card-heading{left:8px;right:8px;flex-direction:column;align-items:center;gap:3px;text-align:center}
  .demo-card:not([data-state=open]) .card-heading h3{font-size:clamp(14px,min(1.45cqh + 8px,13.5cqw),20px);line-height:1.02;white-space:normal}
  .demo-card:not([data-state=open]) .card-heading p{display:none}
  .demo-card .phone-anchor{position:absolute;left:0;top:0;z-index:4;display:block;width:var(--phone-w);height:var(--phone-h);padding:0;perspective:none;transform-origin:0 0;transform:translate(var(--mx),var(--my)) scale(var(--ms));transition:transform var(--reel-swap,.85s) var(--swap)}
  .demo-card[data-state=open] .phone-anchor{transform:translate(var(--ox),var(--oy)) scale(1)}
  .demo-card:not([data-state=open]) .reel-floor{opacity:0;visibility:hidden}
  .demo-card[data-state=mini] .reel-screen{visibility:hidden}
  .demo-card .reel-mini{z-index:2}
  .demo-card:last-of-type .reel-thread{width:calc(var(--zw) - var(--qr-inset,0px))}
  .card-open{display:block;position:absolute;inset:0;z-index:12;width:100%;background:transparent;opacity:0}
  .demo-card[data-state=open] .card-open{display:none}
  .card-open:focus-visible{opacity:1;outline-offset:-4px;border-radius:22px}
}
.demo-row .phone-device{width:var(--phone-w,100%);height:var(--phone-h,auto)}
.demo-row .phone-display{inset:calc(var(--phone-w)*.026)}
@keyframes reel-heading{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Phones and tablets: one full card at a time, swiped sideways. */
@media(max-width:900px) and (min-height:541px),(max-width:900px) and (orientation:portrait){
  .experience{display:flex;flex-direction:column;padding-bottom:62px}
  .experience-heading{flex:none}
  .demo-row{flex:1 1 0;min-height:0;grid-auto-columns:calc(100vw - 46px);gap:12px;margin-top:18px;padding:0 24px 0 0;margin-right:-21px}
  .demo-card{height:100%;overflow:hidden;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px #1717170f;container-type:size}
  .demo-card:before{display:none}
  .demo-card .card-heading{position:absolute;left:14px;right:14px;top:12px;z-index:9;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;min-height:0;padding:0;text-align:left}
  .demo-card .card-number{margin:0;font-size:8px}
  .demo-card .card-heading h3{font-size:25px;line-height:1}
  .demo-card .card-heading p{flex-basis:100%;margin:2px 0 0;font-size:11px;line-height:1.3}
  .demo-card .card-heading p br{display:none}
  .demo-card .phone-anchor{position:absolute;left:0;top:0;z-index:4;display:block;width:var(--phone-w);height:var(--phone-h);padding:0;transform-origin:0 100%;transform:translate(var(--ox),var(--oy))}
  .demo-card:not([data-reel=ready]) .phone-anchor{left:50%;margin-left:calc(var(--phone-w)/-2 - var(--ox))}
  .reel-mini{display:none}
  .compact-footer{right:auto}
  .experience-bottom{left:auto;right:21px;bottom:18px;flex-direction:row;gap:14px;font-size:6px}
}
/* Colour dots share a caption line with the word, so they shrink, then step aside on the narrowest cards. */
@media(max-width:900px){.cell-swatches{gap:4px;margin-left:6px}.cell-swatches i{width:5px;height:5px}}
@container (max-width:340px){.cell-swatches{display:none}}
@media(max-width:340px){.experience-bottom .swipe-hint{display:none}}
/* A QR means nothing on the device in your hand. */
@media(max-width:900px) and (min-height:541px){body[data-reel-open=true] .fixed-download{opacity:0;pointer-events:none;transform:translateY(16px);transition:opacity .3s,transform .3s}}

/* Short landscape screens keep the small still phones only. */
@media(max-height:540px) and (orientation:landscape){
  .demo-card .reel-floor,.reel-thread{display:none}
  .demo-row .phone-device{width:min(100%,calc(48svh * .47514),150px);height:auto;aspect-ratio:411/865}
  .demo-row .phone-display{inset:4px}
  .reel-screen{visibility:hidden}
}
@media(prefers-reduced-motion:reduce){.demo-card,.demo-card .phone-anchor,.demo-card .card-heading{transition:none;animation:none}}