/* MY LEXIE — the website: only Lexie, centred on her tile (the same tile as mylexie.eu today).
   A click on her brings her icons out in an arc over her head, exactly as in the app. */
@font-face{font-family:'Lexie AGK';src:url(fonts/AGKRounded-Regular.otf) format('opentype');font-display:swap}
/* Lexie's width, and her outline (12 of her 225 units, her black): every outline on the site uses it */
:root{--w:min(200px,29vw,22svh);--line:calc(var(--w) * 12 / 225);--agk:'Lexie AGK',ui-rounded,system-ui,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow-x:clip}
/* the front page is one screen: it never scrolls (the pages behind the menu do) */
body:not(.subpage){overflow:hidden;overscroll-behavior:none}
body{background:#fff}
img{display:block;max-width:100%}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.stage-hero{height:100svh;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:#fff url(assets/tile.png) center/cover no-repeat;overflow:hidden}

/* Lexie and her icons. Everything is measured in the app's own units: there her drawing is 162 wide, so one unit
   is --w / 162 (her width here). Arc centre 84.5 below the top of her hood, radius 145, icons 52. */
.pet{position:relative;width:var(--w)}
.hero-lexie{appearance:none;display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hero-lexie .lexie-art{display:block;width:100%;height:auto;overflow:visible;animation:breathe 4.5s ease-in-out infinite;transform-origin:50% 100%;pointer-events:none}
.hero-lexie:active .lexie-art{transform:scale(.97);animation:none}
.hero-lexie.playing>.lexie-art{display:none}
/* her head tilt, as in the app (9°, turning on the bottom of her head, 380 ms): every time the pointer comes onto her,
   the other way (left, then right, then left …) */
.lexie-art .look-head{transform-box:fill-box;transform-origin:50% 88%;transition:transform 380ms cubic-bezier(.2,.8,.3,1)}
.pet.tilt-left .look-head{transform:rotate(-9deg)}
.pet.tilt-right .look-head{transform:rotate(9deg)}
.hero-lexie:focus-visible{outline:3px solid #f27721;outline-offset:6px;border-radius:24px}
@keyframes breathe{50%{transform:scale(1.025,.985)}}

/* the arc, as the app draws it: every icon waits at the first place (up-left), then turns out along the arc to its
   own angle one after another, fading in; closing, they turn back and fade */
#radial{position:absolute;left:50%;top:calc(var(--w) * 84.5 / 162);width:0;height:0;z-index:2;pointer-events:none}
.orbit{position:absolute;left:0;top:0;width:0;height:0;transform:rotate(-145deg);opacity:0;visibility:hidden;
 transition:transform 480ms cubic-bezier(.22,.8,.25,1),opacity 480ms ease,visibility 0s 480ms;transition-delay:var(--delay),0ms,480ms}
.round{position:absolute;left:calc(var(--w) * 145 / 162);top:0;width:calc(var(--w) * 52 / 162);height:calc(var(--w) * 52 / 162);padding:0;border:0;border-radius:50%;background:transparent;
 display:grid;place-items:center;cursor:pointer;pointer-events:none;
 transform:translate(-50%,-50%) rotate(145deg);transition:transform 480ms cubic-bezier(.22,.8,.25,1);transition-delay:var(--delay)}
.round img{width:100%;height:100%;pointer-events:none}
.round.plain{background:#fff;border:calc(var(--w) * 5 / 162) solid #e7e8ea;padding:calc(var(--w) * 8 / 162)}
.round::after{content:'';position:absolute;inset:0;border:calc(var(--w) * 5 / 162) solid transparent;border-radius:50%;pointer-events:none;transition:border-color 150ms}
.round.plain::after{inset:calc(var(--w) * -5 / 162)}
.round:hover::after{border-color:#f4b57d}
.round:active{background:#fff4e8}

#radial.expanded .orbit{transform:rotate(var(--angle));opacity:1;visibility:visible;transition-delay:var(--delay),var(--delay),0ms}
#radial.expanded .round{transform:translate(-50%,-50%) rotate(var(--counter));pointer-events:auto}

/* The box under Lexie, exactly as Sondre drew it (assets/size.svg, assets/boks.svg): his own path, scaled evenly, never
   stretched. In that drawing Lexie (152.35 wide) and the box (292.45 × 86.79 with its line) share one scale; here she is
   --w wide in a drawing whose art is 207.64 of 225, so one unit of his drawing is --w / 165.1. The box sits 11.11 units
   under her (her art ends 0.0373 × --w above the bottom of her picture). With the tail it is Lexie talking (the button and
   the thank-you); the email field is you talking, so it is the same box without the tail. */
/* the intro: Sondre's animation (the bone, Lexie popping up behind it) in the middle of the tile, about her size;
   meanwhile Lexie, her box and the menu wait hidden, and come in softly when it is done. A tap skips it. */
.intro{position:fixed;inset:0;z-index:30;display:none;place-items:center;cursor:pointer;transition:opacity 260ms ease}
body.intro-on .intro{display:grid}
.intro.leaving{opacity:0}
/* his composition is 1200 × 1920 with the logo (about 38% of its width) a little above the middle: sized so the logo is
   about Lexie's size, centred on the screen (the rest of the frame is see-through) */
.intro-anim{position:absolute;left:50%;top:50%;width:calc(var(--w) * 3.2);aspect-ratio:1200/1920;transform:translate(-50%,-53.8%)}
/* (absolutely centred, because on a phone the frame is wider than the screen; the whole logo (words to bone) sits about 73 of 1920 below the
   middle of his frame, so the frame goes up by that much and the logo is in the very middle of the screen) */
.intro{overflow:hidden}
body.intro-on .lift,body.intro-on .menu{opacity:0;transform:translateY(10px) scale(.96);pointer-events:none}
.lift,.menu{transition:opacity 420ms ease,transform 520ms cubic-bezier(.2,.9,.25,1)}

/* Lexie and her box move together: when the phone keyboard comes up they slide up so the field stays above it */
.lift{display:flex;flex-direction:column;align-items:center;will-change:transform}
.cta{--u:calc(var(--w) / 165.1);display:grid;justify-items:center;width:calc(var(--u) * 292.45);margin-top:calc(var(--w) * .030)}
.big,.field,.done{width:100%;aspect-ratio:292.45/86.79;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20224.97%20292.45%2086.79%27%3E%3Cpath%20d%3D%27M253.26%2C237.85h-100.82s-4.16-7.2-4.16-7.2c-.91-1.58-3.2-1.58-4.12%2C0l-4.16%2C7.2H39.19c-19.16%2C0-34.7%2C15.53-34.7%2C34.7h0c0%2C19.16%2C15.53%2C34.7%2C34.7%2C34.7h214.07c19.16%2C0%2C34.7-15.53%2C34.7-34.7h0c0-19.16-15.53-34.7-34.7-34.7Z%27%20fill%3D%27%23fff%27%20stroke%3D%27%23010101%27%20stroke-width%3D%278.99%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E") center/100% 100% no-repeat;border:0;
 padding:calc(var(--u) * 8.41) calc(var(--u) * 14) 0;display:flex;align-items:center;justify-content:center}
.field{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%20224.97%20292.45%2086.79%27%3E%3Cpath%20d%3D%27M253.26%2C237.85H39.19c-19.16%2C0-34.7%2C15.53-34.7%2C34.7h0c0%2C19.16%2C15.53%2C34.7%2C34.7%2C34.7h214.07c19.16%2C0%2C34.7-15.53%2C34.7-34.7h0c0-19.16-15.53-34.7-34.7-34.7Z%27%20fill%3D%27%23fff%27%20stroke%3D%27%23010101%27%20stroke-width%3D%278.99%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%2F%3E%3C%2Fsvg%3E")}
.big,.done{font:400 calc(var(--u) * 19)/1 var(--agk);text-transform:uppercase;letter-spacing:.02em;color:#000;white-space:nowrap;margin:0}
.big{appearance:none;cursor:pointer;transition:transform 140ms cubic-bezier(.2,.9,.25,1)}
.big:focus-visible{outline:none}
.big:active{transform:scale(.96)}
.field{gap:8px;padding-left:calc(var(--u) * 26);padding-right:calc(var(--u) * 14);animation:open 260ms cubic-bezier(.2,.9,.25,1)}
.field[hidden],.done[hidden],.big[hidden]{display:none}
/* what you type: in Lexie's font, every letter the next colour of the row (and round again). The field itself draws
   its letters see-through (the caret stays); the colourful copy lies on top of it (Safari paints over anything behind a field). */
.type{position:relative;flex:1;min-width:0;display:block}
.field input,.letters{font:400 max(16px,calc(var(--u) * 15))/1.2 var(--agk);letter-spacing:.02em;padding:0;margin:0}
.field input{position:relative;z-index:1;display:block;width:100%;border:0;outline:0;background:transparent;-webkit-appearance:none;appearance:none;border-radius:0;color:#000;caret-color:#000}
/* only once the coloured copy is drawn does the field hide its own letters (if anything fails you still see black text) */
.type.colourful input{color:transparent;-webkit-text-fill-color:transparent}
.field input::placeholder{color:#a39ca0;-webkit-text-fill-color:#a39ca0;opacity:1}
.letters{position:absolute;inset:0;z-index:2;white-space:pre;overflow:hidden;pointer-events:none;display:flex;align-items:center}
.type:not(.colourful) .letters{display:none}
.letters span:nth-child(6n+1){color:#e55c29}.letters span:nth-child(6n+2){color:#e6bf45}.letters span:nth-child(6n+3){color:#77a2c2}
.letters span:nth-child(6n+4){color:#2d5f4b}.letters span:nth-child(6n+5){color:#d4e2e4}.letters span:nth-child(6n){color:#285ca9}
.go{appearance:none;flex:none;width:calc(var(--u) * 42);height:calc(var(--u) * 42);border-radius:50%;border:0;background:#f27721;color:#fff;font:600 calc(var(--u) * 20)/1 system-ui,sans-serif;cursor:pointer;transition:transform 120ms}
.go:active{transform:scale(.92)}
.field.bad{animation:shake 320ms}
@keyframes open{from{transform:scale(.94);opacity:0}}
@keyframes shake{25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}

/* the menu in the top-right corner: only three dark-grey bars. The list grows out of the bars themselves
   (from their corner), white with a grey outline and grey words that turn black under the pointer. */
.menu{position:fixed;top:clamp(16px,2.6vw,30px);right:clamp(16px,2.6vw,30px);z-index:20}
.burger{appearance:none;position:relative;z-index:2;width:44px;height:44px;padding:0;border:0;background:none;display:grid;place-content:center;gap:6px;cursor:pointer}
.burger i{display:block;width:28px;height:4px;border-radius:2px;background:#9a9397}
.burger:focus-visible{outline:none}
.burger:hover i,.burger:focus-visible i{background:#6f686c}
.menu-list{position:absolute;right:-14px;top:-14px;margin:0;padding:50px 6px 8px;list-style:none;width:max-content;background:#fff;border:var(--line) solid #c9c3c7;border-radius:26px;
 transform-origin:calc(100% - 36px) 36px;transform:scale(.18);opacity:0;visibility:hidden;
 transition:transform 300ms cubic-bezier(.2,.9,.25,1),opacity 180ms ease,visibility 0s 300ms}
.menu.open .menu-list{transform:none;opacity:1;visibility:visible;transition:transform 300ms cubic-bezier(.2,.9,.25,1),opacity 140ms ease,visibility 0s}
.menu-list a{display:block;padding:8px 16px 9px;font:400 19px/1 var(--agk);text-transform:uppercase;color:#9a9397;text-decoration:none;transition:color 140ms}
.menu-list a:hover,.menu-list a:focus-visible{color:#000;outline:none}

/* The Hetta look (Plugins → Hetta): Lexie in the middle is Sondre's animation lottie/hetta.json, the hood closing as you
   scroll. Everything else stays. His frame is 960 × 1080 with Lexie inside (181,84)–(778,1012); it is scaled so she is as
   tall as Lexie in the hoodie and stands on the same spot (same bottom, same middle), so the box under her does not move. */
.hetta-anim{display:none;position:absolute;left:calc(50% - var(--w) * .65524);top:calc(var(--w) * -.078075);width:calc(var(--w) * 1.31186);height:calc(var(--w) * 1.47584);pointer-events:none}
body.look-hetta .hero-lexie{position:relative}
body.look-hetta .hetta-anim{display:block}
body.look-hetta .hero-lexie .lexie-art{visibility:hidden;animation:none}

/* the thought over her head (Hetta): Sondre's drawing, 138.63 × 164.13, at the scale where his stroke is Lexie's line
   (one unit = --w × .006864); its bottom bubble ends a little above her hood, centred on her */
.thought{position:absolute;left:50%;top:calc(var(--w) * -1.171);width:calc(var(--w) * .9516);height:calc(var(--w) * 1.1266);transform:translateX(-50%);overflow:visible;pointer-events:none;display:none}
body.look-hetta .thought{display:block}
.thought .t-small,.thought .t-big,.thought .t-cloud{transform-box:fill-box;transform-origin:50% 50%;opacity:0}
.thought .t-cloud{transform-origin:50% 50%}
/* the thought lies under Lexie, so it comes out from behind her head */
body.look-hetta .thought{z-index:0}
body.look-hetta .hero-lexie{z-index:1}
body.look-hetta .lift{transition:none}
/* the name in the box changes with a quick fade */
/* The module box (Hetta): it starts exactly on top of the bubble (Sondre's pill: 78.4 tall from 8.4 down, corners
   39.2, his 8.99 line) and grows down to 230 tall with softer corners; the tail is his own path. Units are his (--u). */
.cta{position:relative}
.info{position:absolute;z-index:3;left:0;top:calc(var(--u) * 8.4);width:100%;height:calc(var(--u) * 78.4);background:#fff;border:calc(var(--u) * 8.99) solid #010101;border-radius:calc(var(--u) * 39.2);
 padding:calc(var(--u) * 18) calc(var(--u) * 22);overflow:hidden;cursor:pointer;
 transition:height 420ms cubic-bezier(.2,.9,.25,1.05),border-radius 420ms cubic-bezier(.2,.9,.25,1)}
.info.scrubbed,.info.scrubbed .info-body{transition:none}
.info.scrubbed{cursor:default}
.info.open{height:calc(var(--u) * 230);border-radius:calc(var(--u) * 30)}
.info[hidden]{display:none}
.info-tail{position:absolute;left:calc(50% - var(--u) * 15.2 + var(--u) * 0.6);top:calc(var(--u) * -16.4);width:calc(var(--u) * 30.4);height:calc(var(--u) * 18);overflow:visible}
.info-name{margin:calc(var(--u) * 4) 0 0;text-align:center;font:400 calc(var(--u) * 19)/1 var(--agk);text-transform:uppercase;letter-spacing:.02em;color:#000}
.info-body{margin-top:calc(var(--u) * 16);opacity:0;transform:translateY(calc(var(--u) * 6));transition:opacity 160ms ease,transform 260ms ease;font:400 max(14px,calc(var(--u) * 12))/1.45 ui-rounded,system-ui,sans-serif;color:#3a3437}
.info.open .info-body{opacity:1;transform:none;transition-delay:180ms}
.info-body p{margin:0 0 .5em}
.info-body ul{margin:0;padding-left:1.2em}

.big-words{display:inline-block;transition:opacity 90ms ease}
.big-words.swap{opacity:0}

.plugins{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.plugin{display:inline-block;font:400 20px/1 var(--agk);text-transform:uppercase;color:#000;text-decoration:none;background:#fff;border:var(--line) solid #000;border-radius:999px;padding:14px 26px 15px;transition:transform 140ms cubic-bezier(.2,.9,.25,1),background 150ms}
.plugin:hover{background:#fff4e8}
.plugin:active{transform:scale(.96)}

/* the pages behind the menu: the same tile, a small Lexie (back home) and one white card */
body.subpage{min-height:100svh;background:#fff url(assets/tile.png) center/cover fixed no-repeat}
.page{min-height:100svh;display:flex;flex-direction:column;align-items:center;padding:clamp(28px,6vw,64px) 16px 64px;gap:28px}
.home{display:block;width:calc(var(--w) * .5)}
.home img{width:100%}
.card{width:min(680px,100%);background:#fff;border:var(--line) solid #000;border-radius:32px;padding:clamp(26px,5vw,48px)}
.card h1{margin:0 0 .5em;font:400 clamp(30px,4vw,44px)/1 var(--agk);text-transform:uppercase}
.card h2{margin:1.4em 0 .3em;font:400 20px/1.1 var(--agk);text-transform:uppercase}
.card p{margin:0 0 .8em;font:400 18px/1.55 ui-rounded,system-ui,sans-serif;color:#2b2427}
.card a{color:#000}
.card .draft{display:inline-block;font-size:14px;background:#fff4e8;border-radius:999px;padding:4px 12px}

/* phones: Lexie bigger (the box follows her), and the tile shown whole (never repeated: it would show seams). (16px in the email field keeps iPhone from zooming in when you tap it.) */
@media (max-width:600px){
 :root{--w:min(200px,46vw,24svh)}
 /* the menu: the white box grows out of the bars until it fills the whole screen */
 .menu-list{position:fixed;top:0;right:0;width:100vw;height:100dvh;border:0;border-radius:0;padding:96px 28px 28px;display:flex;flex-direction:column;gap:6px;
  transform-origin:calc(100% - 38px) 38px;transform:scale(.06);border-radius:40px}
 .menu.open .menu-list{border-radius:0}
 .menu-list a{font-size:34px;padding:14px 4px}
}

/* Prototype: the icon strip (prototype-ikonstrom.html). The arc shows four icons at a time; swiping sideways with two
   fingers runs the whole row along the arc and it snaps to four whole icons. site.js sets each icon's angle (--angle,
   --counter) and how visible it is (--fade: icons leaving at the ends fade out). While it moves, nothing eases. */
body.proto-strip #radial.expanded .orbit{opacity:var(--fade,1)}
body.proto-strip #radial.expanded .orbit[data-out]{visibility:hidden}
#radial.strip-moving .orbit,#radial.strip-moving .round{transition:none!important}

@media (prefers-reduced-motion:reduce){.hero-lexie .lexie-art{animation:none}.lexie-art .look-head{transition:none}.orbit,.round{transition-duration:1ms!important;transition-delay:0ms!important}.field,.field.bad{animation:none}.menu-list,.menu.open .menu-list{transition:none}}