/* Paperota website, "how the scanner works" only. Tokens and shared parts are in p3.css. The page's one moving idea: one light sample paper
   going through the scanner's steps. Only transform and opacity animate, so it stays smooth on an older iPhone. Old Safari safe. */

/* the intro keeps its room while the Arabic font arrives, so the story under it does not jump */
@media (max-width:479px){.tc>.p3-intro .p3-intro__h{min-height:2.5em}.tc>.p3-intro .p3-lead{min-height:calc(3*1.8em)}html[lang=en] .tc>.p3-intro .p3-lead{min-height:calc(3*1.65em)}}
/* ---------- the stage ---------- */
.tc-story{padding-block-end:clamp(48px,6vw,96px)}
.tc-story__in{display:grid;gap:var(--s5)}
.tc-side{min-width:0;background:var(--white)}
.tc-stage{position:relative;display:block;height:clamp(236px,62vw,420px);overflow:hidden;background:var(--pale-2);border-radius:var(--r-l);font-size:clamp(13px,1.9vw,17px);color:var(--ink);font-variant-numeric:tabular-nums}
.tc-paper{position:absolute;top:50%;left:50%;width:min(72%,23em);transform:translate(-50%,-50%) perspective(46em) rotateX(20deg) rotateZ(-8deg) scale(.86);transition:transform .7s var(--ease)}
.tc-sheet{position:relative;display:block;padding:1em 1.1em 1.2em;overflow:hidden;background:var(--white);border-radius:.8em;box-shadow:0 2px 4px rgba(15,45,82,.12),0 18px 34px rgba(15,45,82,.18);line-height:1.4}
html[lang=ar] .tc-sheet{line-height:1.55}
.tc-top{display:flex;align-items:center;justify-content:space-between;gap:.6em;padding-block-end:.5em;border-bottom:1px solid var(--line);font-weight:700}
.tc-top small,.tc-tx small{display:block;font-size:max(12px,.8em);font-weight:400;color:var(--muted)}
.tc-row{display:flex;gap:1em;padding-block-start:.8em}
.tc-pic{display:flex;align-items:center;justify-content:center;flex:none;width:4em;height:5.2em;border-radius:.5em;background:var(--pale-2);color:var(--muted)}
.tc-pic .i{width:2em;height:2em}
.tc-tx{display:grid;gap:.45em;min-width:0;flex:1}
.tc-tx b{display:block;font-weight:700}
.tc-box{position:relative;display:block}
.tc-box::after{content:"";position:absolute;top:-.2em;bottom:-.2em;left:-.35em;right:-.35em;border:1.5px solid var(--navy);border-radius:.4em;background:rgba(15,45,82,.05);opacity:0;transition:opacity .35s}
/* a photo's uneven light, cleaned away in step 3 */
.tc-shade{position:absolute;top:0;bottom:0;left:0;right:0;background:linear-gradient(115deg,rgba(116,84,36,.08),rgba(62,46,24,.34));opacity:1;transition:opacity .6s;pointer-events:none}
.tc-line{position:absolute;top:-.45em;bottom:-.45em;left:-.45em;right:-.45em;border:3px solid var(--accent);border-radius:1.05em;opacity:0;transition:opacity .35s;pointer-events:none}
.tc-line i{position:absolute;width:.8em;height:.8em;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px var(--white)}
.tc-line i:nth-child(1){top:-.5em;left:-.5em}.tc-line i:nth-child(2){top:-.5em;right:-.5em}.tc-line i:nth-child(3){bottom:-.5em;left:-.5em}.tc-line i:nth-child(4){bottom:-.5em;right:-.5em}
.tc-flash{position:absolute;top:0;bottom:0;left:0;right:0;background:var(--white);opacity:0;pointer-events:none}
.tc-found{position:absolute;bottom:4%;left:0;right:0;display:flex;justify-content:center;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .5s var(--ease);pointer-events:none}
.tc-found .p3-field{width:min(84%,19em);padding:.6em .8em;font-size:var(--t-cap)}
.tc-found .p3-field b{padding:.25em .6em;font-size:var(--t-s)}
.tc-found .p3-field .ok{margin-block-start:.4em;padding:.25em;font-size:var(--t-cap)}

/* step 0 = the slanted photo; the attribute comes from technology.js; without script the finished state shows */
.tc-stage[data-step="1"] .tc-line{opacity:1}
.tc-stage[data-step="2"] .tc-line{opacity:1}
.tc-stage[data-step="2"] .tc-paper,.tc-stage[data-step="3"] .tc-paper,.tc-stage[data-step="4"] .tc-paper{transform:translate(-50%,-50%)}
.tc-stage[data-step="5"] .tc-paper{transform:translate(-50%,-92%) scale(.72)}
.tc-stage[data-step="3"] .tc-shade,.tc-stage[data-step="4"] .tc-shade,.tc-stage[data-step="5"] .tc-shade{opacity:0}
.tc-stage[data-step="4"] .tc-box::after{opacity:1}
.tc-stage[data-step="5"] .tc-date::after{opacity:1}
.tc-stage[data-step="5"] .tc-found{opacity:1;transform:none}
.tc-stage.is-shot .tc-flash{animation:tcflash .5s ease-out both}
@keyframes tcflash{0%{opacity:.85}100%{opacity:0}}

.tc-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s2) var(--s4);padding-block:var(--s3) var(--s1)}
.tc-st{min-height:1.5em;color:var(--ink);font-weight:700;font-size:var(--t-15)}
.tc-acts{display:flex;gap:var(--s2)}
.tc-acts .i{width:18px;height:18px}
html[dir=rtl] #dauto .i{transform:scaleX(-1)}
.tc-res{display:none;align-items:center;gap:var(--s2);font-size:var(--t-s);color:var(--text);line-height:1.5}
.tc-res .i{width:18px;height:18px;color:var(--ok);stroke-width:2.2}
.tc-res.v-on{display:flex}

/* ---------- the words ---------- */
.tc-step{padding-block:var(--s6);border-top:1px solid var(--line)}
.tc-step:first-child{border-top:0}
.tc-step h3{display:flex;gap:var(--s3);align-items:baseline}
.tc-step p{margin-block-start:var(--s2);padding-inline-start:calc(1.4em + var(--s3));max-width:34em}
.tc-n{flex:none;width:1.4em;font-family:"Sora",var(--sans);font-weight:700;color:var(--muted)}
.tc-step .tc-n{transition:color .2s}
.tc-step.is-on .tc-n{color:var(--soon)}
.tc-step.is-on h3{color:var(--ink)}
/* phones and tablets: the stage stays on top while the words scroll under it */
@media (max-width:959px) and (min-height:561px){
  .js .tc-side{position:sticky;top:var(--hdr);z-index:2;padding-block-end:var(--s2);box-shadow:0 10px 12px -10px rgba(15,45,82,.14)}
  .js .tc-step{min-height:52vh;padding-block:var(--s5) var(--s6)}
  .js .tc-steps{padding-block-end:18vh}
  .tc-stage{height:clamp(190px,34vh,380px)}
}
@media (min-width:960px){
  .tc-story__in{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,6vw,96px);align-items:start}
  .tc-side{position:sticky;top:calc(var(--hdr) + var(--s4))}
  .tc-stage{height:min(58vh,520px)}
  .js .tc-step{min-height:min(44vh,420px);padding-block-start:var(--s6)}
  .js .tc-steps{padding-block-end:12vh}
  .js .tc-step:last-child{min-height:min(34vh,320px)}
}
@media (prefers-reduced-motion:reduce){
  .tc-paper,.tc-box::after,.tc-shade,.tc-line,.tc-found,.tc-n{transition:none}
  .tc-stage.is-shot .tc-flash{animation:none}
}
@media (forced-colors:active){.tc-line{border-color:Highlight}.tc-box::after{border-color:Highlight}}

/* ---------- which papers: words on hairlines, not cards ---------- */
.tc-papers{align-items:start}
.tc-kinds{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--s5)}
.tc-kinds li{padding-block:var(--s3);border-top:1px solid var(--line-2);color:var(--ink);font-weight:500;line-height:1.4}
.tc-tips{display:grid;gap:var(--s5)}
.tc-honest{max-width:44rem}
.sc-link{margin-block-start:var(--s3)}