.iphone{--w:240px;--u:calc(var(--w) / 100);--titanium:#a9a6a0;--titanium-dark:#5e5c58;--status-bg:#fff;--status-ink:#000;width:var(--w);padding:calc(var(--u) * 3);border-radius:calc(var(--u) * 16.5);box-shadow:inset 0 0 0 calc(var(--u) * .5) #2a2a2c, 0 0 0 calc(var(--u) * .55) var(--titanium), 0 0 0 calc(var(--u) * .9) var(--titanium-dark), calc(var(--u) * var(--side,0)) 0 0 calc(var(--u) * .9) var(--titanium-dark), 0 calc(var(--u) * 1) calc(var(--u) * 2) #0003, 0 calc(var(--u) * 6) calc(var(--u) * 12) #00000029, 0 calc(var(--u) * 20) calc(var(--u) * 34) calc(var(--u) * -6) #00000052, 0 0 calc(var(--u) * 10) #0000001f;background:#0b0b0c;flex:none;position:relative}.iphone:before,.iphone:after{content:"";width:calc(var(--u) * 1.1);border-radius:calc(var(--u) * .6);position:absolute}.iphone:before{left:calc(var(--u) * -1.8);top:calc(var(--u) * 24);height:calc(var(--u) * 37);background:linear-gradient(180deg, var(--titanium) 0 calc(var(--u) * 7), transparent 0 calc(var(--u) * 12), var(--titanium) 0 calc(var(--u) * 23), transparent 0 calc(var(--u) * 26), var(--titanium) 0)}.iphone:after{right:calc(var(--u) * -1.8);top:calc(var(--u) * 38);height:calc(var(--u) * 22);background:var(--titanium)}.iphone-screen{border-radius:calc(var(--u) * 13.5);background:var(--status-bg);position:relative;overflow:hidden}.iphone-screen img{aspect-ratio:390/844;width:100%;height:auto;display:block}.iphone-screen:before{content:"";z-index:1;left:50%;top:calc(var(--u) * 2.6);width:calc(var(--u) * 31);height:calc(var(--u) * 9);border-radius:calc(var(--u) * 5);background:#000;position:absolute;transform:translate(-50%)}.iphone-status{aspect-ratio:390/54;padding:calc(var(--u) * 1.2) calc(var(--u) * 7) 0 calc(var(--u) * 9.5);color:var(--status-ink);font:600 calc(var(--u) * 4.3) / 1 -apple-system, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;letter-spacing:-.01em;justify-content:space-between;align-items:center;display:flex}.iphone-status .icons{align-items:center;gap:calc(var(--u) * 1.4);display:flex}.iphone-status svg{height:calc(var(--u) * 3.3);fill:currentColor;width:auto;display:block}.iphone-turn-left{--side:-1.8;transform:perspective(calc(var(--w) * 6)) rotateY(16deg)}.iphone-turn-right{--side:1.8;transform:perspective(calc(var(--w) * 6)) rotateY(-16deg)}:root{--motion:1;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-pop:cubic-bezier(.34, 1.5, .64, 1)}@media (prefers-reduced-motion:no-preference){.intro .nav{animation:fade-in calc(.6s * var(--motion)) var(--ease-out) backwards}.intro .hero h1{animation:rise calc(1.3s * var(--motion)) var(--ease-out) calc(.12s * var(--motion)) backwards}.intro .hero .sub{animation:rise calc(.9s * var(--motion)) var(--ease-out) calc(.38s * var(--motion)) backwards}.intro .hero .form{animation:rise calc(.9s * var(--motion)) var(--ease-out) calc(.48s * var(--motion)) backwards}.intro .hero .how-link,.intro .hero .note{animation:rise calc(.9s * var(--motion)) var(--ease-out) calc(.56s * var(--motion)) backwards}.intro .dish img{animation:photo-in calc(1.7s * var(--motion)) cubic-bezier(.22, 1, .36, 1) calc(.55s * var(--motion)) backwards}.intro .dish .label{animation:tag-in calc(.7s * var(--motion)) var(--ease-pop) var(--tag-delay) backwards}.intro .dish .label.you{--tag-delay:calc(1.55s * var(--motion))}.intro .dish .label.alex{--tag-delay:calc(1.8s * var(--motion))}.intro .dish .label path{stroke-dasharray:1;animation:draw calc(.65s * var(--motion)) var(--ease-out) calc(var(--tag-delay) + .25s * var(--motion)) backwards}.intro .dish .label path+path{animation-duration:calc(.3s * var(--motion));animation-delay:calc(var(--tag-delay) + .8s * var(--motion))}.reveal-ready [data-reveal]{opacity:0;transition:opacity calc(.9s * var(--motion)) var(--ease-out) calc(var(--i,0) * 90ms * var(--motion)), translate calc(1.1s * var(--motion)) var(--ease-out) calc(var(--i,0) * 90ms * var(--motion));translate:0 36px}.reveal-ready [data-reveal].is-in{opacity:1;translate:0}}@keyframes fade-in{0%{opacity:0}}@keyframes rise{0%{opacity:0;translate:0 28px}}@keyframes photo-in{0%{opacity:0;clip-path:inset(14% 10% round 12px);scale:1.06}to{opacity:1;clip-path:inset(0 round 12px);scale:1}}@keyframes tag-in{0%{opacity:0;translate:0 12px;scale:.6}}@keyframes draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}
