/* The way in (welcome.js): the logo's colours as slow light behind the sign-in screen, a few loose cards beside it,
   and the three scenes a new person sees before their first folio. The cards are view.css's own (.card, .note, .todo). */

/* ── the light ── */
.aura{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
.aura.on{opacity:1}
.aura .sky{position:absolute;inset:0;transform:translateY(var(--rise,0vh)) scale(var(--grow,1));transform-origin:50% 100%;
  transition:transform 1.8s cubic-bezier(.16,1,.3,1),opacity 1.2s ease;opacity:var(--strength,.62)}
.aura i{position:absolute;width:var(--w);aspect-ratio:1;left:var(--x);top:var(--y);margin:calc(var(--w) / -2) 0 0 calc(var(--w) / -2);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 88%,transparent) 0%,color-mix(in srgb,var(--c) 52%,transparent) 34%,color-mix(in srgb,var(--c) 16%,transparent) 68%,transparent 100%);
  transform-origin:var(--o,40% 60%);will-change:transform;
  animation:aura-go var(--t1) ease-in-out infinite alternate,aura-turn var(--t2) linear infinite,aura-breathe var(--t3) ease-in-out infinite alternate}
@keyframes aura-go{to{translate:var(--dx) var(--dy)}}
@keyframes aura-turn{to{rotate:360deg}}
@keyframes aura-breathe{from{scale:.86}to{scale:1.14}}
.aura i:nth-child(1){--c:#FFD76A;--w:74vmax;--x:14%;--y:96%;--dx:13vw;--dy:-9vh;--t1:19s;--t2:67s;--t3:13s;--o:62% 38%}
.aura i:nth-child(2){--c:#FF7A4D;--w:66vmax;--x:42%;--y:108%;--dx:-11vw;--dy:-12vh;--t1:23s;--t2:83s;--t3:17s;--o:35% 60%}
.aura i:nth-child(3){--c:#F7A8C8;--w:72vmax;--x:72%;--y:98%;--dx:9vw;--dy:-14vh;--t1:29s;--t2:59s;--t3:11s;--o:58% 64%}
.aura i:nth-child(4){--c:#FF5C5C;--w:48vmax;--x:97%;--y:104%;--dx:-15vw;--dy:-7vh;--t1:17s;--t2:71s;--t3:19s;--o:30% 40%}
.aura i:nth-child(5){--c:#FFE9A8;--w:56vmax;--x:50%;--y:74%;--dx:6vw;--dy:8vh;--t1:31s;--t2:97s;--t3:23s;--o:50% 30%}
/* a soft light that follows the pointer */
.aura b{position:absolute;left:0;top:0;width:44vmax;aspect-ratio:1;margin:-22vmax 0 0 -22vmax;border-radius:50%;opacity:0;transition:opacity 1s;
  background:radial-gradient(closest-side,color-mix(in srgb,#FFC56B 38%,transparent),transparent);will-change:transform}
.aura.lit b{opacity:1}
/* each step lifts the light a little; the right code lets it fill the window */
.aura[data-step=code]{--rise:-9vh;--strength:.72}
.aura[data-step=name]{--rise:-16vh;--strength:.78}
.aura[data-step=tour]{--rise:-4vh;--strength:.5}
.aura.burst{--rise:-42vh;--grow:1.5;--strength:1}
.aura.burst .sky{transition:transform .9s cubic-bezier(.3,0,.2,1),opacity .5s ease}
@media (prefers-color-scheme:dark){.aura .sky{filter:saturate(1.1) brightness(.62)}.aura b{mix-blend-mode:screen;filter:brightness(.5)}}

/* ── the sign-in screen ── */
body.entering .bar{display:none}
body.entering .home{max-width:none;min-width:0;min-height:100svh;padding:0 16px 40px;display:grid;grid-template-columns:minmax(0,1fr);align-content:center;justify-items:center}
body.entering .home>.emark{position:relative;z-index:2}
.start.magic{position:relative;z-index:2;width:100%;max-width:33em;margin:0;padding:0 0 11vh;text-align:center}
.emark{display:inline-block;margin-bottom:30px;border-radius:22%;animation:emark-in 1s cubic-bezier(.16,1,.3,1) backwards}
.emark img{display:block;width:64px;height:64px;border-radius:22%;animation:emark-float 6s ease-in-out infinite;
  box-shadow:0 10px 30px -6px rgba(255,122,77,.55),0 2px 6px rgba(255,92,92,.25)}
@keyframes emark-in{from{opacity:0;transform:scale(.6) rotate(-14deg);filter:blur(8px)}}
@keyframes emark-float{50%{transform:translateY(-5px) rotate(2deg)}}
.start.magic h1{font-size:clamp(34px,5.2vw,52px);line-height:1.04;letter-spacing:-.035em;font-weight:520;text-wrap:balance}
.start.magic h1 .w{display:inline-block;animation:word-rise .9s cubic-bezier(.2,.9,.3,1) backwards}
@keyframes word-rise{from{opacity:0;transform:translateY(.35em);filter:blur(10px)}}
.start.magic p{font-size:19px;line-height:1.45;max-width:25em;margin:16px auto 0;text-wrap:balance}
.start.magic p b{overflow-wrap:anywhere}
.start.magic .for{font-size:19px;margin-top:14px}
.start.magic.in>*{animation:magic-step .7s cubic-bezier(.16,1,.3,1) both}
.start.magic.in>p{animation-delay:.12s}.start.magic.in>form{animation-delay:.2s}.start.magic.in>form~*{animation-delay:.28s}
@keyframes magic-step{from{opacity:0;transform:translateY(14px);filter:blur(6px)}}
.start.magic.in>h1{animation:none}
/* the email (or the code, or the name) and its button share one sheet of paper */
.start.magic form{position:relative;flex-wrap:nowrap;gap:6px;margin:34px auto 0;max-width:27em;padding:7px;border-radius:22px;background:var(--paper);
  box-shadow:0 0 0 1px var(--chrome-edge),0 2px 4px var(--shadow-a),0 24px 60px -18px rgba(255,122,77,.5);transition:box-shadow .3s}
.start.magic form:focus-within{box-shadow:0 0 0 1px color-mix(in srgb,#FF7A4D 45%,transparent),0 0 0 5px rgba(255,122,77,.14),0 2px 4px var(--shadow-a),0 28px 70px -16px rgba(255,122,77,.7)}
.start.magic input{min-width:0;font-size:18px;padding:13px 14px;background:none;box-shadow:none;border-radius:16px;text-align:left}
.start.magic input:focus{outline:0}
.start.magic form .pill{flex:none;padding:13px 24px;font-size:17px;border-radius:16px;transition:transform .2s cubic-bezier(.3,1.4,.4,1),opacity .2s}
.start.magic form .pill:hover:not(:disabled){transform:scale(1.03)}
.start.magic form .pill:active:not(:disabled){transform:scale(.97)}
.start.magic input.code{font-size:28px;letter-spacing:.2em;padding:8px 14px;text-align:center}
.start.magic .hint{margin-top:26px;font-size:16px}
.start.magic .hint .textb{font-size:16px}
.start.magic .backb{position:absolute;left:0;top:8px;margin:0}
.start.magic .more{text-align:left;max-width:27em;margin-left:auto;margin-right:auto}
.start input.nope{animation:nope .4s}
@keyframes nope{20%{transform:translateX(-7px)}45%{transform:translateX(6px)}70%{transform:translateX(-3px)}}

/* ── the loose cards beside it (wide screens) ── */
.loose{position:fixed;inset:0;z-index:1;pointer-events:none;display:none}
@media (min-width:1180px) and (min-height:640px){.loose{display:block}}
.loose .lc{position:absolute;left:var(--x);top:var(--y);translate:calc(var(--mx,0) * var(--d) * 1px) calc(var(--my,0) * var(--d) * 1px);
  transition:translate 1.2s cubic-bezier(.16,1,.3,1),opacity .6s,scale .9s cubic-bezier(.3,0,.2,1)}
.loose .lc>div{animation:loose-in 1.1s cubic-bezier(.16,1,.3,1) backwards var(--at,.2s)}
.loose .lc .card{position:relative;rotate:var(--r);animation:loose-bob var(--bob,8s) ease-in-out infinite alternate;
  box-shadow:0 0 0 .5px var(--crease),0 2px 4px var(--shadow-a),0 22px 50px -14px rgba(120,70,40,.34)}
@keyframes loose-in{from{opacity:0;transform:translateY(40px) scale(.9);filter:blur(8px)}}
@keyframes loose-bob{to{transform:translateY(-12px) rotate(1.2deg)}}
.loose.away .lc{opacity:0;scale:1.25;translate:calc(var(--out) * 1px) -40px}
.loose .photo{width:var(--pw);aspect-ratio:var(--ar);background:center/cover no-repeat}
.loose .photo.in,.tour .photo{border-radius:12px}
.loose .note,.tour .note{font-size:14px;color:var(--ink)}
.loose .note b,.tour .note b{display:block;font-size:15px;font-weight:600;margin-bottom:5px}
.loose .todo,.tour .todo{padding:16px 18px}

/* ── the welcome: three scenes ── */
.tour{position:relative;z-index:2;width:100%;min-width:0;max-width:680px;text-align:center;padding:24px 0 4vh}
.tour .hello{font-size:clamp(38px,6vw,64px);line-height:1.04;letter-spacing:-.035em;font-weight:520;margin:0;text-wrap:balance}
.tour .hello .w,.tour h2 .w{display:inline-block;animation:word-rise .9s cubic-bezier(.2,.9,.3,1) backwards}
.tour .sub{font-size:20px;color:var(--pencil);margin:18px 0 0;animation:magic-step .8s .5s cubic-bezier(.16,1,.3,1) backwards}
.tour .frame{width:calc(680px * var(--k,1));height:calc(420px * var(--k,1));margin:0 auto}
.tour .board{position:relative;width:680px;height:420px;transform:scale(var(--k,1));transform-origin:0 0;border-radius:22px;overflow:hidden;text-align:left;
  background:var(--desk) radial-gradient(circle,var(--dot) 1.1px,transparent 1.4px) 0 0/24px 24px;
  box-shadow:0 0 0 1px var(--chrome-edge),0 2px 6px var(--shadow-a),0 40px 90px -30px rgba(160,80,40,.45);
  animation:board-in .9s cubic-bezier(.16,1,.3,1) backwards}
@keyframes board-in{from{opacity:0;transform:scale(calc(var(--k,1) * .94)) translateY(20px);filter:blur(8px)}}
.tour .scene{position:absolute;inset:0}
.tour h2{font-size:clamp(28px,4vw,38px);line-height:1.08;letter-spacing:-.03em;font-weight:540;margin:30px 0 0;text-wrap:balance}
.tour .say{font-size:19px;line-height:1.45;color:var(--pencil);max-width:27em;margin:12px auto 0;min-height:2.9em;text-wrap:balance;
  animation:magic-step .7s .25s cubic-bezier(.16,1,.3,1) backwards}
.tour .say kbd{font:600 15px var(--sans);color:var(--ink);background:var(--paper);padding:2px 7px;border-radius:7px;box-shadow:0 0 0 1px var(--chrome-edge)}
.tour .ctl{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:22px}
.tour .ctl .pill{font-size:17px;padding:13px 24px;transition:transform .2s cubic-bezier(.3,1.4,.4,1)}
.tour .ctl .pill:hover{transform:scale(1.03)}
.tour .ctl .pill:active{transform:scale(.97)}
.tour .ctl .pill.quiet{background:none;box-shadow:none;color:var(--pencil)}
.tour .ctl .pill.quiet:hover{color:var(--ink)}
.tour .dots{display:flex;justify-content:center;gap:8px;margin-top:22px}
.tour .dots button{width:26px;height:26px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.tour .dots i{display:block;width:8px;height:8px;border-radius:99px;background:var(--ink);opacity:.2;transition:width .4s cubic-bezier(.16,1,.3,1),opacity .3s}
.tour .dots [aria-current] i{width:24px;opacity:.85}

/* what the scenes are made of */
.tour .card{animation:t-arrive .7s cubic-bezier(.2,1.2,.3,1) backwards var(--at,0s)}
@keyframes t-arrive{from{opacity:0;transform:translateY(22px) scale(.9)}}
.tour .photo{background:center/cover no-repeat}
.tour .todo .it.tick .bx{animation:t-tick .01s forwards var(--tick,2s)}
.tour .todo .it.tick .bx::after{content:"";width:8px;height:4.5px;margin-top:-2px;border:solid #fff;border-width:0 0 1.8px 1.8px;rotate:-45deg;scale:0;animation:t-pop .3s cubic-bezier(.3,1.6,.4,1) forwards var(--tick,2s)}
.tour .todo .it.tick .tx{animation:t-struck .01s forwards var(--tick,2s)}
@keyframes t-tick{to{background:var(--cobalt);border-color:var(--cobalt)}}
@keyframes t-pop{to{scale:1}}
@keyframes t-struck{to{color:var(--pencil);text-decoration:line-through}}
.tour .swatch{padding:6px 6px 9px;width:74px}
.tour .swatch .chip{height:56px}
.tour .swatch .nm{font-size:11px;margin:6px 3px 0}
.tour .linkc{display:flex;align-items:center;gap:11px;padding:12px 14px;font-size:13px;font-weight:500}
.tour .linkc i{flex:none;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#FFD76A,#FF7A4D 55%,#F7A8C8)}
.tour .linkc span{display:block;font-size:11px;font-weight:400;color:var(--pencil);margin-top:2px}
/* scene 2: the dock, a file that falls in, a note that is written */
.tour .board .dock{position:absolute;z-index:3;left:50%;transform:translateX(-50%);bottom:16px;max-width:none;overflow:visible;animation:t-arrive .7s cubic-bezier(.2,1.2,.3,1) backwards .1s}
.tour .dock button{pointer-events:none}
.tour .dock button.press{animation:t-press .5s 1.7s}
@keyframes t-press{40%{transform:scale(.82);background:var(--hover)}}
.tour .hand{position:absolute;z-index:6;left:0;top:0}
.tour .hand svg{display:block;width:18px;height:20px;overflow:visible;filter:drop-shadow(0 1px 2px var(--shadow-b))}
.tour .hand path{fill:var(--ink);stroke:var(--paper);stroke-width:1.4;stroke-linejoin:round}
.tour .hand b{position:absolute;left:13px;top:17px;white-space:nowrap;font:550 12.5px/1 var(--sans);padding:5px 9px;border-radius:99px;color:#fff;background:var(--who)}
.tour .hand.who path{fill:var(--who)}
.tour .hand.me{animation:t-hand-dock 5.5s cubic-bezier(.4,0,.2,1) both}
@keyframes t-hand-dock{0%{transform:translate(430px,150px);opacity:0}8%{opacity:1}28%,36%{transform:translate(var(--bx),372px)}55%,100%{transform:translate(360px,236px)}90%{opacity:1}100%{opacity:0}}
.tour .typed{display:inline-block;overflow:hidden;white-space:nowrap;vertical-align:bottom;width:0;animation:t-type 1.3s steps(18) forwards 3s}
@keyframes t-type{to{width:var(--tw)}}
.tour .caret{display:inline-block;width:1.5px;height:1.05em;background:var(--cobalt);vertical-align:-2px;margin-left:1px;animation:t-blink 1s steps(1) infinite 2.4s backwards}
@keyframes t-blink{50%{opacity:0}}
.tour .dropring{position:absolute;inset:14px;z-index:2;border-radius:16px;border:2px dashed var(--cobalt);background:var(--cobalt-soft);opacity:0;animation:t-ring 1.6s ease both .5s}
@keyframes t-ring{25%,60%{opacity:1}}
.tour .card.fall{animation:t-fall .9s cubic-bezier(.2,1.1,.3,1) backwards var(--at)}
@keyframes t-fall{from{opacity:0;transform:translate(60px,-150px) rotate(9deg) scale(1.08)}}
/* scene 3: two people on the same sheet */
.tour .tbar{position:absolute;z-index:4;top:12px;left:12px;right:12px;height:44px;display:flex;align-items:center;gap:10px;padding:0 8px 0 12px;border-radius:13px;
  background:var(--chrome);border:1px solid var(--chrome-edge);box-shadow:0 1px 2px var(--shadow-a),0 10px 30px var(--shadow-b);font-size:15px;font-weight:550;
  animation:t-arrive .7s cubic-bezier(.2,1.2,.3,1) backwards}
.tour .tbar img{width:24px;height:24px}
.tour .tbar .people{margin-left:auto}
.tour .tbar .people span{animation:t-face .5s cubic-bezier(.3,1.5,.4,1) backwards var(--at)}
@keyframes t-face{from{opacity:0;transform:scale(.3)}}
.tour .tbar .share{pointer-events:none;animation:t-share 2.4s ease-in-out .6s 2}
@keyframes t-share{50%{box-shadow:0 0 0 7px var(--cobalt-soft)}}
.tour .hand.julia{--who:#E5484D;animation:t-julia 6s cubic-bezier(.45,0,.2,1) infinite alternate 1.2s backwards}
.tour .card.held{animation:t-arrive .7s cubic-bezier(.2,1.2,.3,1) backwards .3s,t-held 6s cubic-bezier(.45,0,.2,1) infinite alternate 1.2s backwards;outline:2px solid transparent}
@keyframes t-julia{0%{transform:translate(560px,330px);opacity:0}10%{opacity:1}30%{transform:translate(150px,170px)}80%,100%{transform:translate(250px,230px);opacity:1}}
@keyframes t-held{0%,30%{translate:0 0;outline-color:transparent}36%{outline-color:#E5484D}80%{translate:100px 60px;outline-color:#E5484D}100%{translate:100px 60px;outline-color:transparent}}
.tour .hand.marc{--who:#2EB15B;animation:t-marc 5s cubic-bezier(.45,0,.2,1) both 1.6s}
@keyframes t-marc{0%{transform:translate(690px,150px);opacity:0}12%{opacity:1}55%,70%{transform:translate(458px,160px)}100%{transform:translate(590px,214px);opacity:1}}

@media (max-width:600px){
  .start.magic{padding-bottom:6vh}
  .emark img{width:54px;height:54px}
  .start.magic p,.start.magic .for{font-size:17px}
  .start.magic form{flex-wrap:wrap}
  .start.magic form input{flex:1 1 100%;text-align:center}
  .start.magic form .pill{flex:1 1 100%}
  .tour h2{margin-top:22px}.tour .say{font-size:17px}
}
@media (prefers-reduced-motion:reduce){
  .aura i,.emark img,.loose .lc .card,.tour .hand.julia,.tour .card.held{animation:none}
  .start.magic h1 .w,.tour .hello .w,.tour h2 .w,.start.magic.in>*,.loose .lc>div,.tour .board{animation-duration:.01s;animation-delay:0s}
}