/* old.css — "the old order" (#old): a pinned scroll scene on a dark plum stage. A tired owner at a desk full of tools; twelve app fragments
   (plum clay-glass cards) float, then stream into the dusty lamp; its light opens the calm "after"; the pile becomes one sentence, the badge
   appears and three stars fly out of the lamp to it. Prefix od- (scene), oc- (app cards). Kit tokens only; the bubbles live in bubbles.css. */
/* the scene is laid as a sheet over the one before it (.k-lap: it laps like a .k-sheet, but keeps its own padding) */
.k-lap{position:relative;isolation:isolate;overflow:clip;margin-top:calc(var(--k-lap)*-1);border-radius:var(--k-r-sheet) var(--k-r-sheet) 0 0;box-shadow:0 -22px 40px -26px rgba(42,5,24,.5)}
.k-lap.od{padding-bottom:var(--k-lap)}
.od{--od-night:#1f0412;position:relative;background:var(--od-night);color:var(--cream-100)}
.od-stage{position:relative;overflow:clip;isolation:isolate;background:var(--od-night)}
.od-frame{position:relative;height:100%;max-width:calc(100svh * 1.8);margin-inline:auto}
.od-art{position:relative;aspect-ratio:3/2;max-height:92svh;width:100%;overflow:hidden}
.od-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 70%;max-width:none}
.od-b{display:none}
.od-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen}
.od-glow{position:absolute;inset-inline-start:var(--lx,88%);top:var(--ly,72%);width:var(--gs,0px);height:var(--gs,0px);margin-block:calc(var(--gs,0px) / -2) 0; margin-inline:calc(var(--gs,0px) / -2) 0;border-radius:50%;background:radial-gradient(circle,rgba(255,232,160,.95) 0,rgba(252,208,90,.55) 22%,rgba(242,182,41,.22) 48%,transparent 70%);opacity:var(--go,0);pointer-events:none;mix-blend-mode:screen}
.od-cards{position:absolute;inset:0;pointer-events:none}
/* the shade that keeps the words readable: plum-black, never a cold black */
.od-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(31,4,18,calc(.96 * var(--sh,1))) 0,rgba(31,4,18,calc(.88 * var(--sh,1))) 22%,rgba(31,4,18,calc(.46 * var(--sh,1))) 42%,transparent 64%),linear-gradient(180deg,rgba(31,4,18,.55) 0,transparent 16%,transparent 82%,rgba(31,4,18,.75) 100%)}
.od-grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:screen;background-image:var(--k-grain-light)}

/* the words: the kit's type, aligned with the page's column */
.od-copy{position:absolute;inset-inline-start:max(var(--gutter),calc((100% - var(--max)) / 2));top:50%;transform:translateY(-50%);width:min(46%,620px);z-index:3}
.od-ey{color:var(--gold-300);text-shadow:0 2px 14px rgba(31,4,18,.9)}
.od-sw{display:grid}
.od-h{display:grid;margin-top:18px;font-size:clamp(2.45rem,4.6vw,4.6rem);font-weight:800;font-stretch:92%;letter-spacing:-.035em;line-height:.98;color:var(--cream-100);text-shadow:0 4px 30px rgba(31,4,18,.7)}
.od-lead{display:grid;margin-top:22px;max-width:30em;font-size:clamp(1.06rem,1.35vw,1.26rem);line-height:1.55;color:#f6e3d3;text-shadow:0 2px 20px rgba(31,4,18,.95)}
.od-sw>span,.od-h>span,.od-lead>span{grid-area:1/1}
.od-o2{display:none}
/* "One number.": the hero's highlight, in gold clay — the pile became one chat bubble */
.od-h .od-o2{position:relative;justify-self:start;margin:.06em 0 .14em;padding:.04em .3em .1em;border-radius:.42em;color:var(--plum-700);background:var(--k-grain),var(--k-gold-clay);box-shadow:var(--k-gold-shadow),0 30px 60px -24px rgba(250,201,63,.5);text-shadow:0 2px 0 rgba(255,255,255,.4);white-space:nowrap;transform-origin:20% 90%}
.od-h .od-o2::after{content:"";position:absolute;inset-inline-end:.2em;bottom:-.27em;width:.46em;height:.4em;background:#efae1e;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M0 0H72C74 34 84 62 100 90C52 82 14 52 0 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 90'%3E%3Cpath d='M0 0H72C74 34 84 62 100 90C52 82 14 52 0 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}

/* the badge, and the three stars that land around it */
.od-mark{position:absolute;inset-inline-start:0;bottom:calc(100% + 26px);width:clamp(78px,7.6vw,116px);aspect-ratio:516/512}
.od-badge{width:100%;height:auto;filter:drop-shadow(0 22px 22px rgba(10,0,6,.55)) drop-shadow(0 0 30px rgba(250,201,63,.22));transform:rotate(-8deg)}
.od-st{position:absolute;display:block;transform:translate(-50%,-50%);pointer-events:none}
.od-st i{display:block;will-change:transform}
.od-st img{display:block;width:100%;height:auto;filter:drop-shadow(0 6px 8px rgba(10,0,6,.45)) drop-shadow(0 0 12px rgba(255,226,140,.65))}
.od-st--a{inset-inline-start:112%;top:4%;width:42%}
.od-st--b{inset-inline-start:-20%;top:62%;width:26%}
.od-st--c{inset-inline-start:118%;top:78%;width:21%}
.od-stage[data-phase="1"] .od-badge{opacity:0;transform:scale(.5) rotate(-24deg)}
.od-stage[data-phase="1"] .od-st,.od-st[data-f="out"] i{opacity:0}
.od-st[data-f="home"] img{animation:k-twinkle 3.6s ease-in-out infinite}
.od-st--b[data-f="home"] img{animation-delay:-1.2s}.od-st--c[data-f="home"] img{animation-delay:-2.3s}
.od-chat{display:none}

/* in motion: pinned */
html.anim .od{height:310svh}
html.anim .od-pin{position:sticky;top:0;height:100svh}
html.anim .od-stage{height:100%}
html.anim .od-art{position:absolute;inset:0;aspect-ratio:auto;max-height:none;height:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
html.anim .od-b{display:block;-webkit-mask-image:radial-gradient(circle at var(--lx,88%) var(--ly,72%),#000 calc(var(--r,0px) - var(--f,160px)),transparent var(--r,0px));mask-image:radial-gradient(circle at var(--lx,88%) var(--ly,72%),#000 calc(var(--r,0px) - var(--f,160px)),transparent var(--r,0px))}
html.anim .od-o2{display:block}
html.anim .od-badge{transition:opacity .5s var(--ease),transform .7s var(--spring)}
html.anim .od-sw>span,html.anim .od-h>span,html.anim .od-lead>span{transition:opacity .6s ease,transform .7s var(--spring),filter .6s ease}
html.anim .od-o2{opacity:0;transform:translateY(18px);filter:blur(10px)}
html.anim .od-o1{max-height:14em;overflow:hidden;transition:opacity .6s ease,transform .6s ease,filter .6s ease,max-height .7s ease .35s}
html.anim .od-stage[data-phase="2"] .od-o1{max-height:0;opacity:0;transform:translateY(-18px);filter:blur(10px)}
html.anim .od-stage[data-phase="2"] .od-o2{opacity:1;transform:none;filter:none}
html.anim .od-stage[data-phase="2"] .od-h .od-o2{transform:rotate(-1.8deg)}
html.anim .od-chat{display:grid;position:absolute;inset-inline-start:max(var(--gutter),calc((100% - var(--max)) / 2));bottom:clamp(28px,7svh,84px);width:min(440px,42%);gap:12px;z-index:3;pointer-events:none}
html.anim .od-chat>*{opacity:0;transform:translateY(16px) scale(.96);transition:opacity .5s ease,transform .6s var(--spring)}
html.anim .od-stage[data-chat="1"] .od-chat>*{opacity:1;transform:none}
html.anim .od-stage[data-chat="1"] .od-chat>:nth-child(2){transition-delay:.6s}

/* without motion: a calm still — the tired frame with its cards, then the rested frame with the badge */
html:not(.anim) .od-after{position:relative;overflow:hidden;isolation:isolate}
html:not(.anim) .od-after .od-art{aspect-ratio:3/2}
html:not(.anim) .od-after .od-art::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(31,4,18,.9) 0,rgba(31,4,18,.66) 30%,rgba(31,4,18,0) 58%),linear-gradient(0deg,rgba(31,4,18,.8) 0,rgba(31,4,18,0) 45%)}
html:not(.anim) .od-after .od-b{display:block}
html:not(.anim) .od-after .od-o2{display:block}
html:not(.anim) .od-after .od-h .od-o2{transform:rotate(-1.8deg)}
html:not(.anim) .od-after .od-copy{top:auto;bottom:8%;transform:none}

/* the app fragments: plum clay-glass, cream words, a gold clay icon, the pain at the foot with a gold dot */
.oc{position:absolute;inset-inline-start:0;top:0;width:var(--cw,210px);font-size:calc(var(--cw,210px) * .056);line-height:1.28;color:#ecd2c4;will-change:transform,opacity}
.oc-in{position:relative;padding:.95em 1.05em 1em;border-radius:1.45em;opacity:0;animation:oc-float 7s ease-in-out infinite;animation-delay:var(--oc-dl,0s);
  background:var(--k-grain-light),radial-gradient(130% 110% at 22% -10%,rgba(150,28,86,.9) 0%,rgba(112,13,60,.92) 36%,rgba(74,8,40,.94) 72%,rgba(52,5,29,.96) 100%);
  box-shadow:inset 0 .14em .08em rgba(255,255,255,.24),inset 0 -.9em 1.5em rgba(25,0,12,.42),inset 0 0 0 .07em rgba(255,236,214,.09),0 2.2em 3.4em -1.5em rgba(14,0,8,.9),0 .3em 0 -.08em rgba(40,2,18,.55)}
.od--in .oc-in{opacity:1;transition:opacity .9s ease var(--oc-td,0s)}
@keyframes oc-float{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-.7em) rotate(.5deg)}}
@keyframes oc-pulse{50%{box-shadow:inset 0 .08em 0 rgba(255,255,255,.6),0 0 0 .4em rgba(250,201,63,.16),0 0 1.4em rgba(250,201,63,.75)}}
.oc-h{display:flex;align-items:center;gap:.6em;margin-bottom:.7em}
.oc-ico{display:grid;place-items:center;width:2em;height:2em;flex:none;border-radius:50%;color:var(--plum-700);background:var(--k-gold-clay);box-shadow:inset 0 .08em .04em rgba(255,255,255,.7),inset 0 -.25em .4em rgba(170,100,0,.3),0 .35em .7em -.25em rgba(10,0,5,.6)}
.oc-ico svg{width:1.1em;height:1.1em;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.oc-h b{flex:1;min-width:0;font:700 1.06em/1.1 var(--display);letter-spacing:-.005em;color:var(--cream-100);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oc-badge{font:800 .95em/1 var(--display);font-style:normal;padding:.24em .62em .22em;border-radius:999px;color:var(--plum-700);background:var(--k-gold-clay);box-shadow:inset 0 .08em 0 rgba(255,255,255,.6),0 0 0 .3em rgba(250,201,63,.12),0 0 1em rgba(250,201,63,.45);animation:oc-pulse 1.9s ease-in-out infinite}
/* the pain: the line the eye should land on */
.oc-p{display:flex;align-items:center;gap:.55em;margin-top:.8em;padding-top:.7em;box-shadow:inset 0 .07em 0 rgba(255,236,214,.1);font:600 .98em/1.25 var(--text);color:var(--cream-100)}
.oc-p::before{content:"";width:.6em;height:.6em;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff3c4,var(--gold-400) 55%,var(--gold-600));box-shadow:0 0 .7em rgba(250,201,63,.75)}
.oc-p--hot::before{animation:oc-dot 1.6s ease-in-out infinite}
@keyframes oc-dot{50%{box-shadow:0 0 0 .32em rgba(250,201,63,.2),0 0 1.1em rgba(250,201,63,.95)}}
.oc-p--mono{font:500 .86em/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;color:#ecd2c4}
/* the little app insides, in the brand's tones */
.oc-rows{display:grid;gap:.55em}
.oc-row{display:flex;align-items:center;gap:.6em}
.oc-row i{width:1.55em;height:1.55em;border-radius:50%;flex:none;background:linear-gradient(160deg,rgba(255,236,214,.34),rgba(255,236,214,.12))}
.oc-row b{display:block;height:.58em;border-radius:.3em;background:rgba(255,236,214,.16)}
.oc-row--on b{background:rgba(255,236,214,.42)}
.oc-row u{margin-inline-start:auto;width:.9em;height:.9em;border-radius:50%;background:var(--gold-400);box-shadow:0 0 .7em var(--gold-400)}
.oc-row s{margin-inline-start:auto;text-decoration:none;font:700 .92em/1 var(--display);color:var(--gold-200)}
.oc-w2{width:18%}.oc-w3{width:30%}.oc-w4{width:42%}.oc-w5{width:54%}
.oc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.3em}
.oc-grid span{padding:.3em .32em;border-radius:.35em;background:rgba(255,236,214,.07);box-shadow:inset 0 .06em 0 rgba(255,255,255,.06);font-size:.82em;text-align:end;color:#ecd2c4;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.oc-grid .oc-err{background:rgba(196,80,47,.42);color:#ffd9c6;font-weight:700}
.oc-bub{width:max-content;max-width:84%;margin-bottom:.4em;padding:.4em .7em;border-radius:1em;font-size:.97em}
.oc-bub--l{background:rgba(255,236,214,.12);border-end-start-radius:.28em}
.oc-bub--r{margin-inline-start:auto;background:rgba(250,201,63,.24);color:#fff1c8;border-end-end-radius:.28em}
.oc-bars{display:flex;align-items:flex-end;gap:.45em;height:3.6em}
.oc-bars i{flex:1;border-radius:.32em .32em .1em .1em;background:linear-gradient(180deg,var(--gold-300),rgba(242,182,41,.35))}
.oc-v2{height:40%}.oc-v3{height:60%}.oc-v4{height:78%}.oc-v5{height:96%}
.oc-lockbox{display:flex;align-items:center;gap:.65em;margin-bottom:.6em}
.oc-lockbox b{font-weight:600;color:var(--cream-100)}
.oc-lockico{display:grid;place-items:center;width:2.2em;height:2.2em;flex:none;border-radius:50%;color:var(--cream-100);background:rgba(255,236,214,.12)}
.oc-lockico svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.oc-btn{padding:.5em;border-radius:999px;text-align:center;font:700 .97em/1 var(--display);color:var(--plum-700);background:var(--k-paper);box-shadow:inset 0 .07em 0 #fff,0 .4em .8em -.4em rgba(10,0,5,.7)}
.oc-ask{margin-bottom:.6em;font-size:.97em;color:var(--cream-100)}
.oc-code{display:flex;gap:.38em}
.oc-code i{flex:1;height:2.1em;border-radius:.5em;background:rgba(255,236,214,.06);box-shadow:inset 0 0 0 .08em rgba(255,236,214,.22)}
.oc-code .oc-on{box-shadow:inset 0 0 0 .1em var(--gold-400),0 0 .9em rgba(250,201,63,.45)}
.oc-page{display:grid;gap:.42em;padding:.75em .85em;border-radius:.5em;background:var(--k-paper);box-shadow:0 .45em 1em rgba(10,0,5,.5)}
.oc-page b{display:block;height:.46em;border-radius:.2em;background:var(--plum-100)}
.oc-page b:first-child{height:.62em;background:var(--plum-400)}
.oc-week{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:.28em;height:4.8em}
.oc-week span{border-radius:.3em;background:rgba(255,236,214,.06)}
.oc-week em{position:absolute;border-radius:.42em;box-shadow:inset 0 .08em 0 rgba(255,255,255,.35),0 .3em .8em rgba(10,0,5,.45)}
.oc-e1{inset-inline-start:3%;top:10%;width:38%;height:44%;background:var(--gold-300)}
.oc-e2{inset-inline-start:24%;top:30%;width:38%;height:46%;background:var(--plum-300)}
.oc-e3{inset-inline-start:58%;top:6%;width:36%;height:52%;background:var(--cream-200)}
.oc-e4{inset-inline-start:46%;top:46%;width:36%;height:44%;background:var(--gold-600)}
.oc-files p{display:flex;align-items:center;gap:.55em;margin:0 0 .4em;font-size:.97em}
.oc-files svg{width:1.15em;height:1.15em;flex:none;fill:none;stroke:var(--gold-300);stroke-width:1.7;stroke-linejoin:round}
.oc--sticky .oc-in,.oc--manila .oc-in{padding:0;background:none;box-shadow:none}
.oc--sticky .oc-h,.oc--manila .oc-h,.oc--sticky .oc-p,.oc--manila .oc-p{display:none}
.oc-sticky{padding:.9em 1em;border-radius:.4em;background:linear-gradient(170deg,#fff0b0,var(--gold-200) 60%,#f7d45e);color:var(--plum-700);font:italic 600 1.04em/1.3 var(--text);box-shadow:0 .7em 1.5em rgba(10,0,5,.5),inset 0 -.3em .6em rgba(160,110,0,.18)}
.oc-sticky p{margin:0 0 .3em}
.oc-manila{position:relative;height:5.4em;border-radius:.45em .45em .55em .55em;background:linear-gradient(180deg,#ecd08e,#cfa660);box-shadow:0 .7em 1.4em rgba(10,0,5,.5),inset 0 .08em 0 rgba(255,255,255,.4)}
.oc-manila::before{content:"";position:absolute;inset-inline-start:7%;top:-.85em;width:34%;height:1.1em;border-radius:.45em .45em 0 0;background:#ecd08e}
.oc-stamp{position:absolute;inset-inline-end:7%;bottom:16%;padding:.12em .5em;border:.2em solid var(--club-terracotta);border-radius:.3em;font:800 1.05em/1.2 var(--display);letter-spacing:.14em;color:var(--club-terracotta);transform:rotate(-8deg);opacity:.92}

/* a phone: the picture on top, the words under it */
@media (max-width:760px){
  .od-copy{position:relative;inset-inline-start:auto;top:auto;transform:none;width:auto;padding:24px var(--gutter) 0;z-index:3}
  .od-mark{inset-inline-start:auto;inset-inline-end:calc(var(--gutter) + 18px);bottom:auto;top:18px;width:66px}
  html.anim .od-frame{display:flex;flex-direction:column;max-width:none}
  html.anim .od-art{position:relative;inset:auto;flex:none;height:48svh;margin-top:clamp(8px,2svh,24px);-webkit-mask-image:none;mask-image:none}
  .od-img{object-position:85% 70%}
  html.anim .od-copy{flex:none}
  .od-h{margin-top:12px;font-size:clamp(2.15rem,10.4vw,3.1rem)}
  .od-lead{margin-top:14px;font-size:1.02rem}
  html.anim .od-chat{position:relative;inset-inline-start:auto;bottom:auto;width:auto;margin:18px var(--gutter) 0}
  .od-shade{background:linear-gradient(180deg,rgba(31,4,18,.5) 0,transparent 18%,transparent 76%,rgba(31,4,18,.92) 100%)}
  html:not(.anim) .od-copy{position:relative;width:auto}
  html:not(.anim) .od-after .od-copy{position:relative;bottom:auto}
  html:not(.anim) .od-after .od-art::after{content:none}
}
@media (prefers-reduced-motion:reduce){.oc-in{animation:none;opacity:1}.oc-badge,.oc-p--hot::before,.od-st img{animation:none!important}}