/* The sky: the honey light behind the home, pricing and FAQ pages, and the
 * glass buttons that sit on it (owner, 2026-09-26, after Craft's site).
 *
 * The brand book's "honey light": a soft warm glow built from light honey at
 * low opacity, never a hard gradient. Three large, simple shapes in the
 * logo's honey colours only, overlapping with long, soft edges. Each page
 * arranges them differently. When you change page, sky.js starts them where
 * the last page left them and they drift into place over a couple of
 * seconds, behind everything. Otherwise they drift gently on their own.
 *
 * Panels stay solid, as on Craft: the glass is for buttons, which float on
 * the light with a soft shadow.
 *
 * Cost: each shape is a gradient on its own layer and only its transform
 * changes, so the browser moves pictures rather than repainting. Reduced
 * motion turns all of it off.
 *
 * Load after the page's own stylesheet and chrome.css. */

:root, [data-theme="light"] {
  --sky-1: rgba(251, 200, 106, .42);   /* light honey #FBC86A */
  --sky-2: rgba(247, 165, 56, .20);    /* honey #F7A538 */
  --sky-3: rgba(243, 138, 38, .10);    /* amber #F38A26 */
  --glass-btn: color-mix(in srgb, var(--panel) 58%, transparent);
  --glass-line: color-mix(in srgb, var(--hair) 50%, #fff);
  --glass-hi: rgba(255, 255, 255, .85);
  --glass-drop: 0 1px 2px rgba(26, 28, 32, .06), 0 6px 16px rgba(26, 28, 32, .09);
  --glass-drop-up: 0 2px 4px rgba(26, 28, 32, .07), 0 12px 28px rgba(26, 28, 32, .13);
  --card-up: 0 2px 6px rgba(26, 28, 32, .06), 0 20px 44px rgba(26, 28, 32, .12);
  /* A faint wash that does not move, under the moving shapes: when they
     wander off together the page went grey and flat (owner, 2026-09-29). */
  --sky-base:
    radial-gradient(110vmax 70vmax at 50% 35%, rgba(251, 200, 106, .16), transparent 70%),
    linear-gradient(rgba(251, 200, 106, .05), rgba(251, 200, 106, .05));
}
/* Dark honey at night (owner, 2026-09-30): the deep end of the brand book's
   comb, amber and the deepest cell, a little stronger. Light honey at 5 to
   10% over warm charcoal read as a muddy brown, since a pale orange that faint
   on brown just is brown; the deep, saturated cells read as lamplight. Warm,
   never blue: a blue glow over warm charcoal tints the page purple. */
[data-theme="dark"] {
  /* Stronger again (owner, 2026-09-30: "a more vibrant orange"): the deepest
     cell leads, since it is the most saturated colour the comb has. */
  --sky-1: rgba(239, 110, 23, .26);    /* deepest honey #EF6E17 */
  --sky-2: rgba(243, 138, 38, .20);    /* amber #F38A26 */
  --sky-3: rgba(247, 165, 56, .10);    /* honey #F7A538 */
  --glass-btn: color-mix(in srgb, var(--panel) 55%, transparent);
  --glass-line: rgba(255, 255, 255, .09);
  --glass-hi: rgba(255, 255, 255, .07);
  --glass-drop: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 16px rgba(0, 0, 0, .35);
  --glass-drop-up: 0 2px 4px rgba(0, 0, 0, .45), 0 12px 28px rgba(0, 0, 0, .45);
  --card-up: 0 2px 6px rgba(0, 0, 0, .45), 0 20px 44px rgba(0, 0, 0, .45);
  --sky-base:
    radial-gradient(110vmax 70vmax at 50% 35%, rgba(239, 110, 23, .11), transparent 70%),
    linear-gradient(rgba(239, 110, 23, .04), rgba(239, 110, 23, .04));
}

/* ── the sky ───────────────────────────────────────────── */

/* A window-sized frame around the shapes' layer. sky.js moves the shapes like
   a lava lamp, and can let the layer drift up as the page scrolls (?sky=). */
.sky { position: fixed; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; background: var(--sky-base); }
.sky .sky-layer { position: absolute; inset: 0; }
/* A faint grain over the light. A soft, faint gradient across a whole window
   has few colour steps to spend, and an 8-bit screen (more so a laptop panel
   showing fewer) draws each step as a visible band. Grain breaks the band edges
   up so the eye cannot find them, the same fix the intro uses. Drawn once and
   left still; panels sit above the sky, so only the background carries it. */
.sky::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .07; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .sky::after { opacity: .1; }
/* With sky.js running the lamp, it moves the shapes itself: the CSS drift
   below is the fallback for a page where the script does not run. */
.sky.lava i { animation: none; will-change: translate, scale, rotate; }
.sky i {
  position: absolute; left: 50%; top: 50%;
  width: var(--w); height: var(--h); margin: calc(var(--h) / -2) 0 0 calc(var(--w) / -2);
  border-radius: 50%;
  /* One long fade from the colour to nothing: the edges are the whole shape. */
  background: radial-gradient(closest-side, var(--c), transparent);
  /* Between a cut and a crawl: 7s felt stuck, under a second felt like a jolt. */
  transition: transform 2.4s cubic-bezier(.4, 0, .2, 1);
  animation: sky-drift var(--t) ease-in-out infinite alternate;
}
.sky .b1 { --w: 118vmax; --h: 84vmax; --c: var(--sky-1); --t: 48s; }
.sky .b2 { --w: 96vmax; --h: 70vmax; --c: var(--sky-2); --t: 60s; animation-delay: -20s; }
.sky .b3 { --w: 80vmax; --h: 60vmax; --c: var(--sky-3); --t: 54s; animation-delay: -35s; }

/* The drift is gentle, and adds to each page's arrangement:
   `translate` is separate from `transform`, so neither overwrites the other. */
@keyframes sky-drift {
  from { translate: -3vmax 2vmax; }
  to   { translate: 3vmax -2vmax; }
}

/* Home: the light gathered above the hero. */
.sky[data-page="home"] .b1 { transform: translate(-4vw, -46vh); }
.sky[data-page="home"] .b2 { transform: translate(30vw, -24vh) rotate(18deg); }
.sky[data-page="home"] .b3 { transform: translate(-34vw, 22vh) rotate(-12deg); }

/* Pricing: behind the cards, a little to the left. */
.sky[data-page="pricing"] .b1 { transform: translate(-18vw, -6vh) rotate(8deg); }
.sky[data-page="pricing"] .b2 { transform: translate(26vw, 18vh) rotate(-16deg); }
.sky[data-page="pricing"] .b3 { transform: translate(34vw, -34vh) rotate(20deg); }

/* FAQ: at the sides, so the reading column stays clear. */
.sky[data-page="faq"] .b1 { transform: translate(38vw, -26vh) rotate(-14deg); }
.sky[data-page="faq"] .b2 { transform: translate(-40vw, 14vh) rotate(12deg); }
.sky[data-page="faq"] .b3 { transform: translate(-10vw, 44vh); }

/* The landing pages, the blog and the legal pages: at the sides, like the
   FAQ, so the reading column stays clear. */
.sky[data-page="page"] .b1 { transform: translate(-38vw, -24vh) rotate(14deg); }
.sky[data-page="page"] .b2 { transform: translate(40vw, 10vh) rotate(-12deg); }
.sky[data-page="page"] .b3 { transform: translate(8vw, 46vh); }

@media (prefers-reduced-motion: reduce) {
  .sky i { animation: none; transition: none; }
}

/* ── the pricing cards ─────────────────────────────────── */

/* Solid, and they come forward under the pointer. Only where the pointer can
   hover, so a tap on a phone does not leave a card stuck in the air. */
.tier, .oneoff { transition: transform .28s cubic-bezier(.2, .8, .2, 1), box-shadow .28s ease; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .tier:hover, .oneoff:hover { transform: translateY(-5px); box-shadow: var(--card-up); }
}

/* ── glass buttons ─────────────────────────────────────── */

/* Log in in the header: the header is glass itself, over the page, so the
   light already shows through. A highlight on the top edge and a soft drop
   shadow lift it off the bar, and it rises a little under the pointer. */
.topbar .btn.ghost {
  background: var(--glass-btn);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop);
  color: var(--ink);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, background .18s ease;
}
.topbar .btn.ghost:hover {
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop-up);
  transform: translateY(-1px);
}
.topbar .btn.ghost:active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(26, 28, 32, .08);
}
@media (prefers-reduced-motion: reduce) {
  .topbar .btn.ghost { transition: none; }
  .topbar .btn.ghost:hover, .topbar .btn.ghost:active { transform: none; }
}

/* ── liquid glass: the buttons on the light ────────────── */

/* Every button that sits on the honey light is the same liquid glass (owner,
   2026-09-29): Start free, the plans and Buy 300 pages; the lit one of the
   upload box's three; the forwarded-mail Review; Try it free; Sign up in the
   header. Then every orange button went too (owner, 2026-09-29): each
   .btn.primary in the app, and on the landing pages, the blog and the legal
   pages, which got the sky for it (.sky-page), every button that is not a
   ghost, since page.css and legal.css draw a plain .btn orange.

   The light behind the page shows through, as if the card had a lens there.
   The cards are solid, so the glass alone would only show the card: sky.js
   puts a copy of the sky inside each button, lined up with the real one and
   moving with it. Like a lens it gathers the light a little, magnified and
   richer in colour, with a bright rim along the top, light pooled along the
   bottom edge and a soft sheen. Under the pointer the glass darkens slightly
   and the light inside is shaken up (sky.js). Rounded rectangles, not pills:
   the owner preferred them (2026-09-27). */
:root, [data-theme="light"] {
  --lens-tint: color-mix(in srgb, var(--panel) 16%, transparent);
  --lens-rim: rgba(255, 255, 255, .95);
  --lens-edge: rgba(255, 255, 255, .6);
  --lens-pool: rgba(255, 255, 255, .5);
  --lens-sheen: rgba(255, 255, 255, .55);
  --lens-floor: rgba(251, 200, 106, .16);
}
[data-theme="dark"] {
  --lens-tint: color-mix(in srgb, var(--panel) 20%, transparent);
  --lens-rim: rgba(255, 255, 255, .22);
  --lens-edge: rgba(255, 255, 255, .1);
  --lens-pool: rgba(255, 255, 255, .08);
  --lens-sheen: rgba(255, 255, 255, .1);
  --lens-floor: rgba(239, 110, 23, .16);
}
.freeline .btn, .tier .btn, .oneoff .btn, #drop .actions .btn.lit, .btn.primary, .sky-page ~ main .btn:not(.ghost), .fwdbanner .btn, .faq-cta, .topbar .authbtns .btn:not(.ghost) {
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: 9px;
  background: var(--lens-tint);
  border: 1px solid var(--lens-edge);
  color: var(--ink);
  box-shadow:
    inset 0 1px 0 var(--lens-rim),
    inset 0 -10px 14px -10px var(--lens-pool),
    inset 0 0 0 1px color-mix(in srgb, var(--lens-edge) 40%, transparent),
    var(--glass-drop);
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, background .18s ease;
}
.freeline .btn:hover, .tier .btn:hover, .oneoff .btn:hover, #drop .actions .btn.lit:hover, .btn.primary:hover, .sky-page ~ main .btn:not(.ghost):hover, .fwdbanner .btn:hover, .faq-cta:hover, .topbar .authbtns .btn:not(.ghost):hover {
  background: rgba(26, 28, 32, .06);
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 var(--lens-rim),
    inset 0 -10px 14px -10px var(--lens-pool),
    inset 0 0 0 1px color-mix(in srgb, var(--lens-edge) 40%, transparent),
    var(--glass-drop-up);
}
.freeline .btn:active, .tier .btn:active, .oneoff .btn:active, #drop .actions .btn.lit:active, .btn.primary:active, .sky-page ~ main .btn:not(.ghost):active, .fwdbanner .btn:active, .faq-cta:active, .topbar .authbtns .btn:not(.ghost):active {
  transform: translateY(1px);
  box-shadow: inset 0 1px 0 var(--lens-rim), inset 0 -10px 14px -10px var(--lens-pool), 0 1px 2px rgba(26, 28, 32, .08);
}
.freeline .btn { padding-inline: 18px; }
/* The sheen: a soft light across the top, never a hard stripe. Painted after
   the copy of the sky, so it sits on top of the light. */
.freeline .btn::after, .tier .btn::after, .oneoff .btn::after, #drop .actions .btn.lit::after, .btn.primary::after, .sky-page ~ main .btn:not(.ghost)::after, .fwdbanner .btn::after, .faq-cta::after, .topbar .authbtns .btn:not(.ghost)::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 90% at 50% -25%, var(--lens-sheen), transparent 62%);
}
/* Under the copy of the sky: the page's paper, the still wash, and a little
   honey of the button's own, so a button where the shapes have drifted away
   stays warm instead of going grey. */
.sky.pass {
  position: absolute; inset: auto; z-index: -1;
  background: linear-gradient(var(--lens-floor), var(--lens-floor)), var(--sky-base), var(--paper);
  filter: saturate(1.5);
  transition: filter .3s ease;
}
.sky.pass::after { display: none; }
.btn:hover > .sky.pass { filter: saturate(1.6) brightness(.93); }
[data-theme="dark"] .btn:hover > .sky.pass { filter: saturate(1.6) brightness(.85); }
@media (prefers-reduced-motion: reduce) {
  .freeline .btn, .tier .btn, .oneoff .btn, #drop .actions .btn.lit, .btn.primary, .sky-page ~ main .btn:not(.ghost), .fwdbanner .btn, .faq-cta, .topbar .authbtns .btn:not(.ghost) { transition: none; }
  .freeline .btn:hover,
  .freeline .btn:active,
  .tier .btn:hover,
  .tier .btn:active,
  .oneoff .btn:hover,
  .oneoff .btn:active,
  #drop .actions .btn.lit:hover, .btn.primary:hover, .sky-page ~ main .btn:not(.ghost):hover,
  #drop .actions .btn.lit:active, .btn.primary:active, .sky-page ~ main .btn:not(.ghost):active,
  .fwdbanner .btn:hover,
  .fwdbanner .btn:active,
  .faq-cta:hover, .topbar .authbtns .btn:not(.ghost):hover,
  .faq-cta:active, .topbar .authbtns .btn:not(.ghost):active { transform: none; }
}

/* The upload box lights one way in (owner, 2026-09-29): Try a sample for
   someone signed out, Choose files and Choose a folder once signed in. The
   index page marks it with .lit. The other two are clear, the same as Log in
   in the header, and a copy of the sky left in one from before it went out
   is hidden. */
#drop .actions .btn:not(.lit) {
  background: var(--glass-btn);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border: 1px solid var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop);
  color: var(--ink);
  border-radius: 9px;
  transition: transform .18s cubic-bezier(.2, .8, .2, 1), box-shadow .18s ease, background .18s ease;
}
#drop .actions .btn:not(.lit):hover {
  background: color-mix(in srgb, var(--panel) 80%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-drop-up);
  transform: translateY(-1px);
}
#drop .actions .btn:not(.lit) > .sky.pass { display: none; }
@media (prefers-reduced-motion: reduce) {
  #drop .actions .btn:not(.lit) { transition: none; }
  #drop .actions .btn:not(.lit):hover { transform: none; }
}

/* ── the current section on the Account page ───────────── */

/* Glass rather than a white card with an orange bar: it says where you are
   without shouting over the other sections (owner, 2026-09-26). */
.acctnav a[aria-current="page"] {
  background: var(--glass-btn);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
  backdrop-filter: blur(12px) saturate(1.4);
  border-color: var(--glass-line);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 1px 2px rgba(26, 28, 32, .05), 0 4px 12px rgba(26, 28, 32, .06);
}