/* Shared frame for every sample webfolio under /examples: the "this is a sample" ribbon, the voice note,
   the pretend booking dialog, the scroll reveals and the photo credits. Each sample brings its own look. */
:root{--hand:"Caveat",cursive}
[hidden]{display:none!important}
.sx-ribbon{position:relative;z-index:60;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 14px;
  padding:8px 16px;background:#161616;color:#FBFBF8;font:500 13px/1.4 "Schibsted Grotesk",system-ui,sans-serif;text-align:center}
.sx-ribbon b{font-weight:700}
.sx-ribbon .sx-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#FF6B35;margin-right:6px;vertical-align:1px}
.sx-ribbon a{color:#D9F66B;text-decoration:underline;text-underline-offset:3px}
.sx-ribbon a:hover{color:#fff}

/* voice note: a play button, a waveform that moves while it plays, and the words underneath */
.sx-voice{display:grid;grid-template-columns:auto 1fr;gap:14px 18px;align-items:center}
.sx-play{width:58px;height:58px;border-radius:50%;border:0;color:inherit;display:grid;place-items:center;cursor:pointer;background:currentColor;transition:transform .2s}
.sx-play:hover{transform:scale(1.06)}
.sx-play svg{width:22px;height:22px}
.sx-play .ic-pause{display:none}
.sx-voice.on .sx-play .ic-play{display:none}
.sx-voice.on .sx-play .ic-pause{display:block}
.sx-wave{display:flex;align-items:center;gap:3px;height:44px}
.sx-wave i{flex:1;max-width:5px;border-radius:3px;background:currentColor;opacity:.55;height:calc(var(--h) * 1%);transform-origin:center;transition:opacity .3s}
.sx-voice.on .sx-wave i{opacity:1;animation:sx-wave .9s ease-in-out infinite alternate;animation-delay:calc(var(--d) * -1s)}
@keyframes sx-wave{to{transform:scaleY(.35)}}
/* a real recording: the bars are its own waveform and fill in as it plays */
.sx-voice.rec.on .sx-wave i{animation:none}
.sx-voice.rec .sx-wave i.p{opacity:1}
.sx-said{grid-column:1/-1;font-size:.95em;opacity:.85}
.sx-said small{display:block;margin-top:8px;font-size:12px;opacity:.75}

/* the pretend booking dialog */
.sx-dlg{border:2px solid #161616;border-radius:14px;padding:28px 26px 24px;max-width:min(420px,calc(100vw - 32px));background:#FBFBF8;color:#161616;
  font:400 17px/1.5 "Schibsted Grotesk",system-ui,sans-serif;box-shadow:8px 8px 0 #161616}
.sx-dlg::backdrop{background:rgba(22,22,22,.55)}
.sx-dlg h2{font:400 30px/1.1 "Gloock",Georgia,serif;margin:0 0 10px}
.sx-dlg p{margin:0 0 18px}
.sx-dlg .sx-acts{display:flex;gap:12px;flex-wrap:wrap}
.sx-dlg a,.sx-dlg button{font:700 15px/1 "Schibsted Grotesk",system-ui,sans-serif;padding:12px 16px;border-radius:999px;border:2px solid #161616;cursor:pointer;text-decoration:none}
.sx-dlg a{background:#D9F66B;color:#161616}
.sx-dlg button{background:#fff;color:#161616}

/* things ease in as they scroll into view (only when motion is welcome) */
.sx-js [data-rv]{opacity:0;translate:0 28px;transition:opacity .9s cubic-bezier(.2,.7,.2,1),translate .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i,0) * 90ms)}
.sx-js [data-rv].in{opacity:1;translate:0 0}

.sx-credits{font:400 12px/1.6 "Schibsted Grotesk",system-ui,sans-serif;opacity:.7;max-width:60em}
.sx-credits a{color:inherit}
@media (prefers-reduced-motion:reduce){.sx-js [data-rv]{opacity:1;translate:none;transition:none}.sx-voice.on .sx-wave i{animation:none}}

/* touch screens: a sample's cursor only shows for a moment after a tap (sample.js) */
html.touch-cur:not(.tc-live) :is(.comet,#car,#bub,.cl,.nib,.dropc,.grab,.bc,.pc,#cam,#af,#coords,#kit,#spoon,#pen,#stamp,.cmp,.tw,.mari,.hk,.lens,.lensdot,.fob,.snip,.tmc,.whisk,.pcl,.dyedrop,.clap,.wand,.bone,.spray,.chili,.can,.stone,.buff,.vinyl,.mower,.blk,.salt,.polish,.gcap,.ivb,.bcaret,.mnote,.mic,.balloon,.lotus,.cndl,.qleaf,.wrench){opacity:0!important}