/* eklair.ro, before the public launch. One photograph (Licu lighting a path of answer tiles on blue paper), type set on the paper
   like the brand's posters, three atlas labels, a plain form. Nothing else: no cards, no glass panels, no badges.
   The photograph's paper turns into the page's flat blue at its edges (landing_pack.py does that), so main.js can set it anywhere,
   at any size, without a seam. Yellow is the light: the tiles Licu has lit, his lantern, the button.
   Phones first (most people arrive from a link in an app), larger type from 600 px, two columns from 1000 px. */
@font-face{font-family:Gabarito;src:url(fonts/gabarito-latin-wght-normal.woff2) format('woff2-variations');font-weight:400 900;font-display:swap}
@font-face{font-family:Gabarito;src:url(fonts/gabarito-latin-ext-wght-normal.woff2) format('woff2-variations');font-weight:400 900;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{--yellow:#ffe14a;--blue:#2f5bea;--coral:#ff7659;--ink:#191b26}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--blue)}
body{font-family:Gabarito,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:450;background:var(--blue);color:#fff;-webkit-font-smoothing:antialiased;font-feature-settings:'kern','tnum';overflow-x:hidden}
button,input{font:inherit;color:inherit;border:0;background:none}
a{color:inherit}
.lit{color:var(--yellow)}                              /* on blue, the words Licu lights up */

.page{position:relative;overflow:hidden;padding:0 20px calc(22px + env(safe-area-inset-bottom))}
.first{display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding-bottom:18px}
.bar,h1,.notify,.about,footer{position:relative;z-index:1}

/* ---- the photograph. main.js sizes .photo and moves it; everything inside is placed in fractions of it */
.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.photo{position:absolute;left:0;top:0;opacity:0;transition:opacity .5s ease}
.photo.ready{opacity:1}
.photo>img{position:absolute;left:0;top:0;width:100%;height:100%;display:block;-webkit-user-select:none;user-select:none}
.photo .on{opacity:0;transition:opacity .8s ease}      /* the lit path: comes in whole once he has lit the last tile */
.photo.lit .on{opacity:1}
.patch{position:absolute;background-repeat:no-repeat;opacity:0;transition:opacity .6s ease;                                  /* one tile of the lit photograph, soft at the edges */
  -webkit-mask-image:radial-gradient(closest-side,#000 56%,transparent 100%);mask-image:radial-gradient(closest-side,#000 56%,transparent 100%)}
.patch.on{opacity:1}
.patch.you{background-size:100% 100%;transition-duration:.9s}
.photo.settled .patch:not(.you){display:none}
.trail,.sky{position:absolute;left:0;top:0;width:100%;height:100%}      /* the light he leaves behind as he flies; and a hundred small lights around: the hundred already in */
.licu-spot{position:absolute;left:0;top:0}
.licu-fly{position:absolute;inset:0;will-change:transform}
.licu-back{position:absolute;inset:0}
.licu-hit{position:absolute;pointer-events:auto;cursor:pointer;-webkit-tap-highlight-color:transparent}
.stage{flex:1;min-height:220px;margin-top:4px;position:relative;pointer-events:none}      /* only holds the room for the still life; taps go through to Licu */
.still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}     /* the photograph with Licu in it, for when the live one cannot load */
.js .still{display:none}
html:not(.js) .scene,html:not(.js) .clock{display:none}

/* atlas labels: a dot on the thing, a line, its name. The way an anatomy atlas labels parts */
.atlas{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.atlas path{fill:none;stroke:#fff;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);transition:stroke-dashoffset .6s cubic-bezier(.4,0,.2,1) .1s}
.atlas circle{fill:#fff;opacity:0;transition:opacity .25s}
.atlas g.show path{stroke-dashoffset:0}
.atlas g.show circle{opacity:1}
.tag{position:absolute;left:0;top:0;font-size:12.5px;line-height:1.24;font-weight:500;text-align:right;white-space:nowrap;opacity:0;transition:opacity .45s ease .4s}
.tag b{display:block;font-weight:800;font-size:14.5px;letter-spacing:-.005em;margin-bottom:1px;max-width:128px;margin-left:auto;overflow:hidden;text-overflow:ellipsis}     /* a long nickname is cut, not spilled */
.tag.show{opacity:1}

/* ---- the words */
.bar{display:flex;align-items:center;justify-content:space-between;height:56px;flex:none}
.wm{height:27px;width:auto;display:block}
.tagline{font-size:13px;line-height:1.25;font-weight:600;text-align:right}
.tagline span{display:block}

/* the countdown is the headline: the number as big as it gets, the rest of the clock beside it */
h1{font-weight:800;letter-spacing:-.022em;line-height:1;margin-top:8px;flex:none}
.top{display:flex;align-items:flex-end;gap:13px}
.num{font-size:clamp(88px,27vw,120px);line-height:.76;letter-spacing:-.05em;margin-left:-.045em}
.clock{display:flex;flex-direction:column;font-size:14.5px;line-height:1.24;font-weight:500;letter-spacing:0;padding-bottom:.22em}
.clock b{display:inline-block;min-width:1.32em;margin-right:.28em;text-align:right;font-weight:750}
.line{display:block;margin-top:11px;font-size:clamp(25px,7.5vw,32px);line-height:1.05;max-width:9.4em}

.notify{flex:none}
.notify label{display:block;font-size:15.5px;line-height:1.3;font-weight:600;text-wrap:balance}
.row{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.row #nick{flex:1 1 100%}                             /* on a phone the nickname has its own line, the number and the button share the next */
.row input:not(.hp){flex:1;min-width:0;height:56px;border-radius:18px;padding:0 16px;background:#fff;color:var(--ink);font-weight:650;font-size:19px;outline:0;transition:box-shadow .15s}
.row input::placeholder{color:#7a7f90;font-weight:550}
.row input:not(.hp):focus-visible{box-shadow:0 0 0 3px var(--yellow)}
.row input[aria-invalid=true]{box-shadow:0 0 0 3px var(--coral)}
.row button{flex:none;height:56px;padding:0 20px;border-radius:18px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:18px;cursor:pointer;transition:transform .12s}
.row button:active{transform:scale(.97)}
.row button:focus-visible,.again:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:6px}
.row button:focus-visible{border-radius:18px}
.notify.busy button{opacity:.6;pointer-events:none}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.msg{font-size:14px;font-weight:650}
.msg:not(:empty){margin-top:8px}
.fine{margin-top:9px;font-size:13px;font-weight:500;opacity:.85}
.yes b{display:block;font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.yes p{margin-top:6px;font-size:15.5px;line-height:1.38;font-weight:500;max-width:30em}
.again{margin-top:10px;font-size:13.5px;font-weight:650;text-decoration:underline;text-underline-offset:3px;opacity:.85;cursor:pointer}

/* the beta's hundred seats, drawn like the answer sheet, all taken. On a phone it sits under the headline, small, with only its figure;
   what it means in full is the note under the form */
.about{padding-top:12px}
.fig{display:flex;align-items:center;gap:12px}
.fig figcaption{font-size:12px;line-height:1.4;white-space:nowrap}
.fig figcaption b{font-weight:750}
.more,.lg{display:none}
.seats{display:grid;grid-template-columns:repeat(20,4.5px);gap:1.5px;width:max-content;flex:none}
.seats i{width:4.5px;height:4.5px;border-radius:1.5px;background:var(--yellow)}
.note{position:relative;z-index:1;padding-top:6px;font-size:13.5px;line-height:1.42;opacity:.92;max-width:33rem}
footer{margin-top:26px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:12.5px;font-weight:550}
footer span{opacity:.85}
.social{display:flex;gap:16px;align-items:center;width:100%;margin-bottom:4px}
.social a{display:block;width:22px;height:22px;color:#fff;opacity:.92;transition:opacity .15s,transform .15s}
.social a:hover{opacity:1;transform:translateY(-1px)}
.social svg{width:100%;height:100%;fill:currentColor;display:block}
.follow{margin-top:8px}
.follow a{font-weight:650;text-underline-offset:3px}

@media (max-width:359px){.row input:not(.hp){padding:0 12px;font-size:17.5px} .row button{padding:0 13px;font-size:16.5px}
  .seats{grid-template-columns:repeat(20,4px)} .seats i{width:4px;height:4px} .fig figcaption{font-size:11px}}
@media (max-width:599px) and (max-height:700px){.stage{min-height:196px}}     /* a short phone: the still life gives up a little so the whole form stays on the first screen */
/* from 600 px there is room: bigger boxes, the full caption beside them, and no separate note */
@media (min-width:600px){
  .row{flex-wrap:nowrap} .row #nick{flex:1 1 8.5em} .row #tel{flex:1.25 1 10em}                 /* one line: nickname, number, button */
  .tag b{max-width:230px}
  .about{padding-top:18px;max-width:35rem}
  .fig{align-items:flex-start;gap:18px}
  .fig figcaption{margin-top:-3px;font-size:13.5px;white-space:normal} .more,.lg{display:inline} .ph{display:none}
  .seats{grid-template-columns:repeat(20,6.5px);gap:2.5px} .seats i{width:6.5px;height:6.5px;border-radius:2px}
  .note{display:none}
}
@media (min-width:600px) and (max-width:999px){
  .page{padding-left:36px;padding-right:36px}
  .num{font-size:168px} .clock{font-size:17px} .line{font-size:40px;margin-top:16px}
  .notify,.about{max-width:33rem}
  .tag{font-size:13.5px} .tag b{font-size:16px}
}

/* ---- two columns: the words on the left, the photograph on the right */
@media (min-width:1000px){
  .page{display:grid;grid-template-columns:minmax(0,clamp(26rem,41vw,35rem)) minmax(0,1fr);grid-template-rows:auto minmax(8px,1fr) auto auto auto minmax(8px,1fr) auto;column-gap:24px;
    min-height:100vh;min-height:100svh;padding:0 max(clamp(40px,5.6vw,104px),calc(50vw - 780px)) 22px}       /* on very wide screens the two columns stay together in the middle */
  .first{display:contents}
  .bar{grid-column:1 / -1;grid-row:1;height:clamp(70px,10vh,96px)} .wm{height:34px}
  .tagline{font-size:15.5px} .tagline span{display:inline}
  h1{grid-column:1;grid-row:3;margin:0}
  .notify{grid-column:1;grid-row:4;margin-top:clamp(24px,4.4vh,44px);max-width:31rem}
  .about{grid-column:1;grid-row:5;padding-top:clamp(14px,2.4vh,22px)}
  .stage{grid-column:2;grid-row:1 / 8;min-height:0}
  footer{grid-column:1 / -1;grid-row:7;margin:0}
  .top{gap:clamp(16px,1.6vw,24px)}
  .num{font-size:clamp(150px,min(16.5vw,28vh),248px)}
  .clock{font-size:clamp(17px,1.45vw,21px);padding-bottom:.3em}
  .line{font-size:clamp(38px,min(4.1vw,6.4vh),62px);margin-top:clamp(14px,2.2vh,22px);max-width:10.6em}
  .fig figcaption{font-size:14px}
  .notify label{font-size:17px}
  .row input:not(.hp),.row button{height:58px;border-radius:19px} .row button{padding:0 26px;font-size:18.5px}
  .tag{font-size:13.5px} .tag b{font-size:16px}
  .atlas path{stroke-width:1.75}
}
@media (min-width:1280px){.tag{font-size:14.5px} .tag b{font-size:18px} .sm{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---- join in two steps (a big button, then the form), the "full" news after, confetti */
.join{display:block;width:100%;max-width:22rem;height:68px;border-radius:22px;background:var(--yellow);color:var(--ink);font-weight:800;font-size:23px;letter-spacing:-.01em;cursor:pointer;
  box-shadow:0 10px 0 -2px rgba(15,30,110,.28),0 18px 40px -10px rgba(255,225,74,.55);transition:transform .12s,box-shadow .12s}
.join:hover{transform:translateY(-2px)}
.join:active{transform:translateY(3px);box-shadow:0 5px 0 -2px rgba(15,30,110,.28),0 10px 26px -10px rgba(255,225,74,.5)}
.join:focus-visible{outline:3px solid #fff;outline-offset:3px}
.start .fine{margin-top:12px}
.ask:not([hidden]){animation:rise .35s cubic-bezier(.2,.8,.2,1)}
.yes:not([hidden]){animation:rise .45s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.full{display:flex;gap:14px;align-items:flex-start;margin-top:12px}
.full p{margin-top:-2px!important}
.full .small{display:inline;font-size:inherit;letter-spacing:0;font-weight:750}
.seats.big{grid-template-columns:repeat(17,5px);gap:2px;margin-top:4px}
.seats.big i{width:5px;height:5px}
.seats.big i.you{background:none;box-shadow:inset 0 0 0 1.4px #fff;animation:you 1.4s ease-in-out infinite}
@keyframes you{50%{box-shadow:inset 0 0 0 1.4px #fff,0 0 0 2px rgba(255,255,255,.35)}}
#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}
@media (min-width:600px){.join{height:72px;font-size:25px} .seats.big{grid-template-columns:repeat(17,6px)} .seats.big i{width:6px;height:6px}}
@media (max-width:599px){.joined .stage{min-height:340px}}