/* Lullogram polish overlay. Injected by tools/overlay.mjs; never edit the minified Framer modules.
   One motion family: ease-out for anything the user triggers, short durations, transform/scale/opacity only. */
:root {
  --lg-ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* entering / pressing / hover in */
  --lg-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* on-screen changes */
  --lg-t-press: 110ms;   /* :active feedback */
  --lg-t-hover: 160ms;   /* hover feedback (<=150-160ms) */
  --lg-t-state: 240ms;   /* colour / underline / bg state changes */
  --lg-t-surface: 420ms; /* large surfaces (card image zoom) */
  --lg-accent: #e97101;  /* site orange (matches --token-12814eb8) */
  --lg-ring: 2px;
}

/* ---- Base rendering ---------------------------------------------------------------- */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: var(--lg-accent); color: #000; }
a[href], [data-highlight] { touch-action: manipulation; }  /* no 300ms tap delay / double-tap zoom on controls */
time { font-variant-numeric: tabular-nums; }
p { text-wrap: pretty; }                                    /* no single-word last lines in body copy */

/* ---- Focus: visible, branded, keyboard-only ---------------------------------------- */
:focus { outline: none; }
:focus-visible {
  outline: var(--lg-ring) solid var(--lg-accent);
  outline-offset: 4px;
  border-radius: 8px;
}
[data-highlight]:focus-visible { outline-offset: 3px; border-radius: 16px; }   /* FAQ rows */
a.framer-text:focus-visible { border-radius: 6px; }   /* Framer's rich-text rule (a.framer-text) resets radius to 0 and out-ranks the base rule */
a[href*="apps.apple.com"]:focus-visible,
a[href*="play.google.com"]:focus-visible { outline-color: #fff; outline-offset: 3px; border-radius: 9px; } /* sit on an orange pill */

/* ---- Press feedback (scale, not transform: independent of Framer's inline transform) -- */
a[href], [data-highlight] {
  transition: scale var(--lg-t-hover) var(--lg-ease-out), translate var(--lg-t-hover) var(--lg-ease-out), opacity var(--lg-t-hover) var(--lg-ease-out);
}
a[href]:active { scale: 0.97; transition-duration: var(--lg-t-press); }
a[href*="articles/"]:active { scale: 0.99; }                  /* big surface: subtler */
[data-highlight]:not(a):active { scale: 0.99; transition-duration: var(--lg-t-press); }
a[href*="instagram.com"]:active, a[href*="x.com"]:active { scale: 0.9; }

/* ---- Hover (only where hover exists, so touch never sticks) -------------------------- */
@media (hover: hover) and (pointer: fine) {
  a[href*="apps.apple.com"]:hover, a[href*="play.google.com"]:hover { scale: 1.03; }
  a[href*="apps.apple.com"]:active, a[href*="play.google.com"]:active { scale: 0.97; }
  a[href*="instagram.com"]:hover, a[href*="x.com"]:hover { scale: 1.12; }
  a[href*="instagram.com"]:active, a[href*="x.com"]:active { scale: 0.92; }

  /* FAQ rows had no hover affordance. Overlay fades in via opacity only (pseudo-element, no bg repaint). */
  [data-highlight]:not(a)::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1; /* above the row bg, below its text (row is its own stacking context) */
    background: rgba(255, 255, 255, 0.045); opacity: 0;
    transition: opacity var(--lg-t-state) var(--lg-ease-out);
  }
  [data-highlight]:not(a):hover::after { opacity: 1; }

  /* Article cards had no hover at all: image eases in, title underline fades in. */
  a[href*="articles/"] [data-framer-background-image-wrapper] { overflow: hidden; }
  a[href*="articles/"] [data-framer-background-image-wrapper] img {
    transition: transform var(--lg-t-surface) var(--lg-ease-out); will-change: transform;
  }
  a[href*="articles/"]:hover [data-framer-background-image-wrapper] img { transform: scale(1.045); }
  a[href*="articles/"] h3 {
    text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px;
    text-underline-offset: 0.18em; transition: text-decoration-color var(--lg-t-state) var(--lg-ease-out);
  }
  a[href*="articles/"]:hover h3 { text-decoration-color: currentColor; }
}

/* ---- Tap targets: grow the hit area, never the layout (offsets set per-link by polish.js) -- */
a[data-lg-tt] { position: relative; } /* inline text links are static; relative on an inline box does not move layout */
a[data-lg-tt]::before {
  content: ""; position: absolute; pointer-events: auto;
  top: calc(var(--lg-ty, 0px) * -1); bottom: calc(var(--lg-ty, 0px) * -1);
  left: calc(var(--lg-tx, 0px) * -1); right: calc(var(--lg-tx, 0px) * -1);
}

/* ---- Legibility: measured fixes (computed contrast, not guesses) ------------------------ */
/* Framer sets text colour through an inline custom property, so a stylesheet !important wins without touching markup. */
h4.framer-styles-preset-1jfyso[style*="233, 113, 1, 0.6"] { --framer-text-color: rgba(233, 113, 1, 0.8) !important; } /* footer tagline: 2.9:1 -> 4.5:1 */
p.framer-styles-preset-saf75d[style*="255, 255, 255, 0.4"] { --framer-text-color: rgba(255, 255, 255, 0.64) !important; } /* author note: 3.7:1 -> ~7:1 */

/* Body measure: article and About copy ran 130-150 characters wide. Lexend averages ~0.73ch per glyph, so 52ch is about 70 characters. */
p.framer-styles-preset-saf75d, p.framer-styles-preset-1pycixi, li.framer-text > p { max-width: 52ch; }

/* Headings sat 20px from the paragraph above and 20px below; give each section room to start. */
h2.framer-styles-preset-x47qo:not(:first-child) { margin-top: 24px; }

[data-lg-empty] { display: none; } /* stray empty bullet left by the CMS rich text */

/* ---- Reduced motion: no movement; feedback becomes opacity ---------------------------- */
@media (prefers-reduced-motion: reduce) {
  a[href], [data-highlight] { transition: opacity 80ms linear; }
  a[href]:active, [data-highlight]:not(a):active { scale: 1 !important; opacity: 0.7; }
  a[href]:hover { scale: 1 !important; }
  [data-highlight]:not(a)::after { transition: none; }
  a[href*="articles/"] [data-framer-background-image-wrapper] img { transition: none; }
  a[href*="articles/"]:hover [data-framer-background-image-wrapper] img { transform: none; }
}