/* The public home page (landing.html), design "A · Virmalised": the
   aurora sky, glass cards and the week card that fills itself.

   A page of its own: it does not load app.css (the app's themes are for
   the family, signed in), only the two faces it uses, from this site
   (static/fonts, see SOURCES.md there). No request leaves the site.

   Motion: the aurora drifts, the hero rises in, the week card's events
   drop in and the now-line walks the day, the invitation is scanned and
   becomes an event, the dishes slide, the basket ticks itself, the dish
   row scrolls by. With prefers-reduced-motion everything stands still and
   is all there at once (the last block). */

/* ---------------------------------------------------------------- fonts */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque.woff2") format("woff2");
  font-weight: 400 800; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+2009-2014, U+2018-201E, U+2022, U+2026, U+202F, U+2039-203A, U+20AC, U+2190, U+2192, U+2212;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700; font-stretch: 75% 100%; font-style: normal; font-display: swap;
  unicode-range: U+0020-007E, U+00A0-017F, U+2009-2014, U+2018-201E, U+2022, U+2026, U+202F, U+2039-203A, U+20AC, U+2190, U+2192, U+2212;
}

/* --------------------------------------------------------------- tokens */
:root {
  --sky: #0A0E16;
  --ink: #F6F0E8;
  --ink2: #D6CCC0;
  --ink3: #B0A395;
  --amber: #F4AA4C;
  --amber-hover: #F4B361;
  --on-amber: #16120F;
  --glass: rgba(24, 19, 16, .54);
  --glass-strong: rgba(24, 19, 16, .62);
  --edge: rgba(255, 244, 230, .16);
  --edge-strong: rgba(255, 244, 230, .22);
  --well: rgba(255, 244, 230, .04);
  --well2: rgba(255, 244, 230, .06);
  --green: #2E9E6B;
  --green-soft: #86CF9C;
  --pink: #E2557A;
  --blue: #5B7CFA;
  --display: "Bricolage Grotesque", system-ui, sans-serif;
  --text: "Instrument Sans", system-ui, sans-serif;
  color-scheme: dark;
}

/* ----------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--sky); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  margin: 0; background: var(--sky); color: var(--ink);
  font-family: var(--text); font-size: 16px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--amber); }
a:hover { color: var(--amber-hover); }
img { display: block; max-width: 100%; }
h1, h2, h3, p { overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.lp-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* the whole page: everything, the sky included, clipped at its sides */
.lp-page { position: relative; overflow: hidden; min-height: 100vh; }
section[id], article[id] { scroll-margin-top: 16px; }

/* ----------------------------------------------------------- the aurora */
.lp-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.aur { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.aur1 { animation: drift1 22s ease-in-out infinite alternate; }
.aur2 { animation: drift2 26s ease-in-out infinite alternate; }
.aur3 { animation: drift3 30s ease-in-out infinite alternate; }
.aur-a { width: 62%; height: 900px; left: -12%; top: -260px; background: #1D7A5C; }
.aur-b { width: 55%; height: 820px; right: -14%; top: -180px; background: #5A3D91; }
.aur-c { width: 60%; height: 900px; left: 20%; top: 38%; background: #1F4F86; }
.aur-d { width: 50%; height: 800px; right: -10%; top: 69%; background: #1D7A5C; opacity: .35; }
@keyframes drift1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(12%, 8%) scale(1.25); } }
@keyframes drift2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-10%, 12%) scale(.9); } }
@keyframes drift3 { from { transform: translate(0, 0) scale(.9); } to { transform: translate(8%, -10%) scale(1.2); } }

/* the content's column: 1240px of content inside its 24px gutters */
.lp-wrap { position: relative; max-width: 1288px; margin: 0 auto; padding: 0 24px; }

/* --------------------------------------------------------------- header */
.lp-top {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px; padding: 28px 0;
}
.lp-brand { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.lp-brand:hover { color: var(--ink); }
.lp-brand svg { flex: none; }
.lp-brand span { font-family: var(--display); font-weight: 700; font-size: 21px; white-space: nowrap; }
.lp-nav {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 6px; border-radius: 999px;
  background: var(--glass); border: 1px solid var(--edge);
}
.lp-nav a {
  padding: 10px 16px; border-radius: 999px; color: var(--ink2);
  text-decoration: none; font-weight: 500; text-align: center;
}
.lp-nav a:hover { color: var(--ink); background: var(--well2); }
.lp-acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* the two kinds of button: amber and an outline */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 20px; border-radius: 999px; font-weight: 600;
  text-decoration: none; text-align: center; line-height: 1.25;
}
.lp-btn.amber { background: var(--amber); color: var(--on-amber); }
.lp-btn.amber:hover { background: var(--amber-hover); color: var(--on-amber); }
.lp-btn.ghost { border: 1px solid var(--edge-strong); color: var(--ink); }
.lp-btn.ghost:hover { background: var(--well2); color: var(--ink); }
.lp-btn.big { padding: 16px 26px; font-size: 17px; }

/* ----------------------------------------------------------------- hero */
.lp-hero { display: flex; flex-wrap: wrap; align-items: center; gap: 56px; padding: 72px 0 96px; }
.lp-hero-text { flex: 1 1 440px; min-width: 0; }
.lp-kicker {
  margin: 0 0 18px; display: inline-flex; gap: 8px; align-items: center;
  padding: 8px 14px; border-radius: 999px; background: var(--glass);
  border: 1px solid var(--edge); color: var(--ink2); font-size: 14px;
}
.dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--amber); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(244, 170, 76, .55); } 50% { box-shadow: 0 0 0 7px rgba(244, 170, 76, 0); } }
.lp-hero h1 {
  margin: 0; font-family: var(--display); font-weight: 800;
  font-size: clamp(44px, 6vw, 84px); line-height: .98; letter-spacing: -.02em;
}
.lp-lead { margin: 26px 0 0; max-width: 520px; font-size: 20px; line-height: 1.5; color: var(--ink2); }
.lp-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* the hero rising in, one line after the other */
.up { opacity: 0; animation: up .9s cubic-bezier(.2, .7, .2, 1) forwards; }
.u1 { animation-delay: .1s; } .u2 { animation-delay: .25s; } .u3 { animation-delay: .4s; } .u4 { animation-delay: .55s; }
@keyframes up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------- the week card */
.wk {
  flex: 1 1 520px; min-width: 0; position: relative; padding: 22px;
  border-radius: 28px; background: var(--glass); border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 40px 120px rgba(0, 0, 0, .45);
}
.wk-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.wk-title { font-family: var(--display); font-weight: 700; font-size: 20px; }
.wk-people { display: flex; gap: 6px; }
.wk-av {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 12px; font-weight: 700; color: var(--ink);
}
.wk-av.j { background: var(--blue); }
.wk-av.m { background: var(--pink); }
.wk-av.o { background: var(--green); }
.wk-av.l { background: var(--amber); color: var(--on-amber); }
.wk-days { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; height: 330px; }
.wk-day { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 8px; border-radius: 16px; background: var(--well); min-width: 0; }
.wk-day.today { background: rgba(244, 170, 76, .10); border: 1px solid rgba(244, 170, 76, .35); }
.wk-date { font-size: 12px; color: var(--ink3); }
.wk-day.today .wk-date { color: var(--amber); font-weight: 600; }
.wk-ev { padding: 8px; border-radius: 10px; font-size: 12px; line-height: 1.3; border-left: 3px solid; overflow-wrap: anywhere; }
.wk-ev.o { background: rgba(46, 158, 107, .28); border-color: var(--green); }
.wk-ev.m { background: rgba(226, 85, 122, .26); border-color: var(--pink); }
.wk-ev.j { background: rgba(91, 124, 250, .28); border-color: var(--blue); }
.wk-ev.l { background: rgba(244, 170, 76, .25); border-color: var(--amber); }
/* the events dropping in, one after the other, every nine seconds */
.chip { opacity: 0; animation: drop 9s cubic-bezier(.2, .8, .2, 1) infinite; }
.c1 { animation-delay: .6s; } .c2 { animation-delay: 1s; } .c3 { animation-delay: 1.4s; } .c4 { animation-delay: 1.8s; }
.c5 { animation-delay: 2.2s; } .c6 { animation-delay: 2.6s; } .c7 { animation-delay: 3s; } .c8 { animation-delay: 3.4s; }
@keyframes drop { 0% { opacity: 0; transform: translateY(-18px) scale(.96); } 8% { opacity: 1; transform: none; } 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(6px); } }
/* the line that walks through today */
.now { position: absolute; left: 4px; right: 4px; top: 50%; height: 2px; background: var(--amber); border-radius: 2px; animation: now 9s linear infinite; }
@keyframes now { from { top: 22%; } to { top: 78%; } }
.wk-meal { display: flex; gap: 12px; align-items: center; margin-top: 16px; padding: 12px 14px; border-radius: 16px; background: var(--well2); }
.wk-meal img { flex: none; width: 44px; height: 44px; border-radius: 12px; object-fit: cover; }
.wk-meal-text { flex: 1; min-width: 0; }
.wk-meal-when { font-size: 12px; color: var(--ink3); }
.wk-meal-what { font-weight: 600; }
.wk-meal-what .nb { white-space: nowrap; }
.wk-pill { flex: none; padding: 6px 10px; border-radius: 999px; background: #1F3024; color: var(--green-soft); font-size: 12px; font-weight: 600; }

/* ------------------------------------------------------------- sections */
.lp-sec { padding: 40px 0 80px; }
.lp-h2 {
  margin: 0 0 12px; font-family: var(--display); font-weight: 700;
  font-size: clamp(32px, 4vw, 52px); letter-spacing: -.01em; line-height: 1.08;
}
.lp-h2-solo { margin-bottom: 40px; }
.lp-sub { margin: 0 0 40px; color: var(--ink2); font-size: 18px; max-width: 640px; line-height: 1.5; }

/* the three things, each a glass card with its moving picture */
.lp-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.lp-card {
  padding: 26px; border-radius: 26px; background: var(--glass); border: 1px solid var(--edge);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); min-width: 0;
}
.lp-card h3 { margin: 20px 0 8px; font-family: var(--display); font-size: 24px; line-height: 1.15; }
.lp-card p { margin: 0; color: var(--ink2); line-height: 1.5; }
.lp-shot { position: relative; height: 210px; border-radius: 18px; overflow: hidden; }

/* 1. the invitation, scanned, and the event it becomes */
.invite {
  background: #F3ECE2; color: #1E1813; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 6px; text-align: center; padding: 0 12px;
}
.invite span { font-size: 15px; }
.invite .invite-title { font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.1; }
.scan { position: absolute; left: 0; right: 0; top: 6%; height: 3px; background: var(--amber); box-shadow: 0 0 18px var(--amber); animation: scan 3.2s ease-in-out infinite; }
@keyframes scan { 0% { top: 6%; opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { top: 88%; opacity: 0; } }
.made {
  margin: -22px 18px 0; position: relative; padding: 10px 14px; border-radius: 14px;
  background: #201A16; border-left: 3px solid var(--green); font-size: 14px;
}
.pop { opacity: 0; animation: pop 3.2s ease-out infinite; }
@keyframes pop { 0%, 62% { opacity: 0; transform: translateY(8px); } 72%, 100% { opacity: 1; transform: none; } }

/* 2. the week's dishes sliding by */
.dishes { background: var(--well); }
.slide { display: flex; width: 300%; height: 100%; animation: slide 7s ease-in-out infinite; }
.slide img { width: 33.333%; height: 100%; object-fit: cover; }
@keyframes slide { 0%, 10% { transform: translateX(0); } 30%, 45% { transform: translateX(-33.333%); } 65%, 80% { transform: translateX(-66.666%); } 100% { transform: translateX(0); } }

/* 3. the basket ticking itself */
.basket {
  background: var(--well); padding: 16px 18px; display: flex; flex-direction: column;
  gap: 12px; justify-content: center; list-style: none; margin: 0;
}
.basket li { display: flex; gap: 12px; align-items: center; }
.basket .what { flex: 1; min-width: 0; }
.basket .much { color: var(--ink3); }
.tick { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 2px solid rgba(255, 244, 230, .4); animation: tick 6s ease-in-out infinite; }
.t1 { animation-delay: .4s; } .t2 { animation-delay: 1.2s; } .t3 { animation-delay: 2s; } .t4 { animation-delay: 2.8s; }
@keyframes tick { 0%, 8% { background: transparent; border-color: rgba(255, 244, 230, .4); } 14%, 92% { background: var(--green-soft); border-color: var(--green-soft); } 100% { background: transparent; border-color: rgba(255, 244, 230, .4); } }

/* the six small things */
.lp-six { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 16px; }
.lp-small { padding: 24px; border-radius: 22px; background: var(--glass); border: 1px solid var(--edge); min-width: 0; }
.lp-small svg { display: block; }
.lp-small h3 { margin: 14px 0 6px; font-size: 19px; }
.lp-small p { margin: 0; color: var(--ink2); line-height: 1.5; }

/* ------------------------------------------------------- the dish row */
.lp-dishes { position: relative; padding: 40px 0 90px; overflow: hidden; }
.lp-dishes-head { max-width: 1288px; margin: 0 auto 28px; padding: 0 24px; }
.lp-dishes-head .lp-h2 { margin: 0; font-size: clamp(30px, 3.6vw, 46px); }
.lp-dishes-head p { margin: 10px 0 0; color: var(--ink2); font-size: 18px; line-height: 1.5; }
/* two copies of the six, each with its gap after it, so moving by half
   the row lands exactly on the start again */
.marq { display: flex; width: max-content; animation: marq 40s linear infinite; }
.marq img { flex: none; width: 280px; height: 280px; margin-right: 20px; border-radius: 24px; object-fit: cover; background: var(--well2); }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ------------------------------------------------------ the waitlist */
.lp-join {
  margin: 20px 0 80px; padding: clamp(32px, 5vw, 64px); border-radius: 34px;
  background: var(--glass-strong); border: 1px solid rgba(255, 244, 230, .18);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between;
}
.lp-join-text { flex: 1 1 420px; min-width: 0; }
.lp-join h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(34px, 4.4vw, 60px); line-height: 1; }
.lp-join-text p { margin: 16px 0 0; color: var(--ink2); font-size: 18px; line-height: 1.5; }
.lp-join-side { flex: 1 1 380px; min-width: 0; }
.lp-form { position: relative; display: flex; flex-wrap: wrap; gap: 10px; }
.lp-form input[type="email"] {
  flex: 1 1 220px; min-width: 0; padding: 16px 20px; border-radius: 999px;
  border: 1px solid rgba(255, 244, 230, .25); background: rgba(10, 14, 22, .6);
  color: var(--ink); font: inherit; font-size: 17px;
}
.lp-form input[type="email"]::placeholder { color: var(--ink3); opacity: 1; }
.lp-form input[type="email"][aria-invalid="true"] { border-color: #F08A7E; }
.lp-form button {
  flex: 1 0 auto; padding: 16px 26px; border-radius: 999px; border: 0; background: var(--amber);
  color: var(--on-amber); font: inherit; font-weight: 600; font-size: 17px; cursor: pointer;
}
.lp-form button:hover { background: var(--amber-hover); }
.lp-form button[disabled] { opacity: .7; cursor: progress; }
/* the field a person never sees: a script that fills it is thanked and
   forgotten (landing_views.join) */
.lp-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.lp-error { flex: 1 1 100%; margin: 0; color: #F6B3A9; font-weight: 600; }
.lp-error:empty { display: none; }
.lp-thanks {
  margin: 0; padding: 18px 22px; border-radius: 22px; background: #1F3024;
  color: #CFEFD8; font-size: 18px; line-height: 1.45; font-weight: 600;
}
.lp-thanks:focus { outline: none; }
.lp-privacy { margin: 14px 0 0; color: var(--ink3); font-size: 14px; line-height: 1.5; }
.lp-foot a { color: var(--ink2); }
.lp-foot a:hover { color: var(--ink); }

/* --------------------------------------------------------------- footer */
.lp-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px;
  padding: 28px 0 48px; border-top: 1px solid rgba(255, 244, 230, .12);
  color: var(--ink3); font-size: 14px;
}

/* ------------------------------------------------- narrower screens */
/* a tablet: the brand and the two buttons on one line, the page's three
   parts under them across the whole width */
@media (max-width: 900px) {
  .lp-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px 12px; }
  .lp-brand { grid-column: 1; grid-row: 1; }
  .lp-acts { grid-column: 2; grid-row: 1; justify-content: flex-end; }
  .lp-nav { grid-column: 1 / -1; grid-row: 2; flex-wrap: nowrap; }
  .lp-nav a { flex: 1 1 0; }
  .lp-hero { padding: 40px 0 72px; gap: 40px; }
}
/* a phone: the brand and "Logi sisse" on the first line, the three parts
   on the second, and the waitlist's button across the third */
@media (max-width: 640px) {
  .lp-wrap { padding: 0 16px; }
  .lp-top { padding: 18px 0 8px; gap: 12px 10px; }
  .lp-acts { display: contents; }
  .lp-acts .ghost { grid-column: 2; grid-row: 1; }
  .lp-acts .amber { grid-column: 1 / -1; grid-row: 3; }
  .lp-btn { padding: 11px 16px; font-size: 15px; }
  .lp-brand { gap: 10px; }
  .lp-brand span { font-size: 19px; }
  .lp-nav a { padding: 9px 8px; }
  .lp-hero { padding: 28px 0 64px; gap: 36px; }
  .lp-lead { font-size: 18px; margin-top: 20px; }
  .lp-ctas { margin-top: 26px; }
  .lp-ctas .lp-btn { flex: 1 1 100%; }
  .lp-btn.big { padding: 15px 22px; font-size: 16px; }
  .wk { padding: 16px; border-radius: 24px; }
  .wk-title { font-size: 18px; }
  .wk-av { width: 26px; height: 26px; font-size: 11px; }
  .lp-sec { padding: 24px 0 64px; }
  .lp-sub, .lp-h2-solo { margin-bottom: 28px; }
  .lp-sub { font-size: 17px; }
  .lp-card { padding: 20px; border-radius: 22px; }
  .lp-dishes { padding: 24px 0 64px; }
  .lp-dishes-head { padding: 0 16px; }
  .marq img { width: 200px; height: 200px; margin-right: 14px; border-radius: 20px; }
  .lp-join { padding: 28px 20px; border-radius: 26px; margin-bottom: 56px; gap: 24px; }
  .lp-form button { flex: 1 1 100%; }
  .lp-foot { flex-direction: column; gap: 8px; }
}
/* a phone held upright: the week card shows three days, as the app does
   on a phone, so every event stays readable */
@media (max-width: 480px) {
  .wk-days { grid-template-columns: repeat(3, minmax(0, 1fr)); height: 250px; }
  .wk-meal { padding: 10px 12px; gap: 10px; }
  .wk-meal-what { font-size: 15px; }
  .wk-day.edge { display: none; }
}
@media (max-width: 360px) {
  .lp-brand span { font-size: 17px; }
  .lp-brand svg { width: 30px; height: 30px; }
}

/* ------------------------------------------------ still, all of it */
/* the films (Codex's clips): the promo whole at 16:9 under the hero (it
   carries its own words), then a family day in four short loops; posters
   until they are on screen */
.lp-film {
  position: relative; margin: 0 0 24px; border-radius: 28px; overflow: hidden;
  border: 1px solid var(--edge); aspect-ratio: 16 / 9; background: #0B0F17;
}
.lp-film-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.lp-day { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.lp-clip { margin: 0; min-width: 0; }
.lp-clip video {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  border-radius: 18px; border: 1px solid var(--edge); background: #0B0F17;
}
.lp-clip figcaption { margin-top: 10px; color: var(--ink2); font-size: 15px; line-height: 1.4; }
@media (max-width: 900px) {
  .lp-day { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .lp-film { border-radius: 18px; }
  .lp-day { gap: 12px; }
  .lp-clip figcaption { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .up, .chip, .pop { opacity: 1 !important; transform: none !important; }
  .scan { display: none; }
  /* the basket as the moving one ends: the first two bought */
  .tick.t1, .tick.t2 { background: var(--green-soft); border-color: var(--green-soft); }
}

/* where glass cannot be had, a solid fill that reads the same */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .wk, .lp-card, .lp-join { background: rgba(24, 19, 16, .9); }
}