/* ───────────────────────── Flowify · shared base ─────────────────────────
   tokens · pencil strokes · grain · logo · bendy buttons · sound corner ·
   cross-document view transitions                                          */

/* self-hosted faces — single-weight files served for the whole weight range
   so the browser never synthesizes faux bold on them */
@font-face {
  font-family: "Marous";
  src: url("../assets/fonts/marous.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #FAF6EF;
  --ink: #3A3A3A;
  --ink-soft: #6B6560;

  /* brand red→orange, sampled from Logo/original.png */
  --flow-red: #FB3928;
  --flow-orange: #FC5E27;
  --flow-ink: #C9290F;   /* text-safe flow red · 5.1:1 on paper */

  /* cream sheets + bold say-hi-style accents; -ink shades are the only
     ones allowed as small text on cream (all ≥4.5:1 on #FAF6EF) */
  --pink: #F9EAE1;       --pink-deep: #F2DCCC;     --pink-accent: #E8431F;   --pink-ink: #C9290F;
  --mint: #F9EDDA;       --mint-deep: #F2DFC4;     --mint-accent: #E8761E;   --mint-ink: #A85109;
  --lilac: #F9F0D9;      --lilac-deep: #F2E4C0;    --lilac-accent: #EE9D1D;  --lilac-ink: #91600A;
  --butter: #FAEBE8;     --butter-deep: #F3DBD7;   --butter-accent: #D63A5E; --butter-ink: #B82A4F;

  --frame: 12px;
  --radius-wonky: 22px 30px 24px 32px / 30px 22px 32px 24px;
  --radius-bendy: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  /* missing glyphs (× © · —) fall through to the old faces */
  --font-head: "Marous", "Shantell Sans", cursive;
  --font-body: "Manrope", system-ui, sans-serif;
  --font-hand: "Caveat", cursive;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* custom press feedback everywhere — the default blue flash fights it */
a, button { -webkit-tap-highlight-color: transparent; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* paper grain over everything */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: .55;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.23 0 0 0 0 0.22 0 0 0 0 0.21 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── pencil strokes ── */
.stroke {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.stroke.accent        { stroke: var(--accent, var(--flow-orange)); }
.stroke.accent-butter { stroke: var(--butter-accent); }
.stroke.accent-pink   { stroke: var(--pink-accent); }
.stroke.accent-lilac  { stroke: var(--lilac-accent); }
.stroke.accent-flow   { stroke: url(#flow-grad); }

/* draw-in animation (pathLength=1 is set by JS) */
html:not(.no-js) .doodle .stroke {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
html:not(.no-js) .doodle.drawn .stroke {
  animation: draw .55s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms));
}
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ── scribbled logo ── */
.brand {
  position: fixed;
  top: 18px;
  left: 22px;
  z-index: 30;
  display: flex;
  align-items: center;
  padding: 8px 14px 6px;
  text-decoration: none;
  color: var(--ink);
  background: rgba(250, 246, 239, .8);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 2px solid var(--ink);
  border-radius: 14px 20px 12px 22px / 20px 12px 22px 14px;
  transition: transform .35s var(--spring);
  view-transition-name: brand;
}
.logo-flowify { width: 118px; height: auto; display: block; overflow: visible; }
.logo-flowify .stroke { stroke-width: 7; }
.logo-flowify .logo-studio {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 26px;
  fill: var(--ink-soft);
  stroke: none;
}

/* ── bendy button · Malewicz-style asymmetric radius, 3D press, scribble hover ── */
.btn-bendy {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  background:
    linear-gradient(178deg, #FFF8DE 0%, #F8EBC0 52%, #F3DFA0 100%);
  border: 2.5px solid var(--ink);
  border-radius: var(--radius-bendy);
  padding: 14px 34px 15px;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .65),
    inset 0 -3px 0 rgba(58, 58, 58, .10),
    0 5px 0 -1px var(--ink);
  transition: transform .25s var(--spring), box-shadow .2s ease;
}
.btn-bendy:focus-visible {
  transform: translateY(-2px) rotate(-.6deg);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .65),
    inset 0 -3px 0 rgba(58, 58, 58, .10),
    0 7px 0 -1px var(--ink);
}
.btn-bendy:active {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(58, 58, 58, .12),
    0 1px 0 -1px var(--ink);
}
.btn-bendy:focus-visible { outline: none; }
.btn-bendy--flow {
  background: linear-gradient(178deg, #FF7A4D 0%, var(--flow-red) 60%, #D92E18 100%);
  color: #FFF7F0;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .18);
}

/* the pencil outline that scribbles itself around the button on hover */
.btn-scribble {
  position: absolute;
  inset: -8px;
  width: calc(100% + 16px);
  height: calc(100% + 16px);
  pointer-events: none;
  overflow: visible;
}
.btn-scribble path {
  fill: none;
  stroke: var(--scribble, var(--flow-red));
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.btn-bendy--flow .btn-scribble path { stroke: var(--ink); }
.btn-bendy:focus-visible .btn-scribble path {
  animation: scribble-in .5s ease-out forwards;
}
@keyframes scribble-in { to { stroke-dashoffset: 0; } }

/* ── hand-written underline helper ── */
.u-wrap { position: relative; white-space: nowrap; }
.u-line {
  position: absolute;
  left: -4%;
  bottom: -.28em;
  width: 108%;
  height: .42em;
  overflow: visible;
}
.u-line .stroke { stroke-width: 4.5; }

/* ── kicker + section heads (paper pages) ── */
.kicker {
  display: inline-block;
  font-family: var(--font-hand);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--flow-ink);
  transform: rotate(-2deg);
  margin-bottom: 8px;
}

/* card cream helpers */
.card-pink   { --bg: var(--pink);   --bg-deep: var(--pink-deep);   --accent: var(--pink-accent);   --accent-ink: var(--pink-ink); }
.card-mint   { --bg: var(--mint);   --bg-deep: var(--mint-deep);   --accent: var(--mint-accent);   --accent-ink: var(--mint-ink); }
.card-lilac  { --bg: var(--lilac);  --bg-deep: var(--lilac-deep);  --accent: var(--lilac-accent);  --accent-ink: var(--lilac-ink); }
.card-butter { --bg: var(--butter); --bg-deep: var(--butter-deep); --accent: var(--butter-accent); --accent-ink: var(--butter-ink); }

/* ── hint pill (scroll hint / pick hint) ── */
.hint-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .02em;
  color: var(--ink);
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 14px 18px 12px 20px / 18px 12px 20px 14px;
  padding: 7px 18px;
  box-shadow: 2px 3px 0 rgba(58, 58, 58, .12);
}

/* ── reveal on scroll (paper pages) ── */
html:not(.no-js) .reveal {
  opacity: 0;
  transform: translateY(26px) rotate(.2deg);
  transition: opacity .6s ease, transform .6s var(--spring);
}
html:not(.no-js) .reveal.in {
  opacity: 1;
  transform: none;
}

/* ── sound corner ── */
.sound-corner {
  position: fixed;
  right: 22px;
  bottom: 20px;
  z-index: 35;
  display: flex;
  align-items: center;
  gap: 12px;
  view-transition-name: sound-corner;
}
.sound-hint {
  font-family: var(--font-hand);
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink-soft);
  background: rgba(250, 246, 239, .85);
  padding: 4px 14px;
  border-radius: 12px 16px 10px 18px / 16px 10px 18px 12px;
  border: 1.5px dashed var(--ink-soft);
}
.sound-toggle {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 16px 20px 14px 22px / 20px 14px 22px 16px;
  cursor: pointer;
  transition: transform .3s var(--spring);
}
.sound-toggle svg { width: 26px; height: 26px; }
.sound-toggle path {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.sound-toggle .mute-line { display: none; stroke: var(--flow-red); stroke-width: 2.6; }
.sound-toggle.muted .mute-line { display: block; }
.sound-toggle.muted .wave { display: none; }

/* ── chat corner · instant message + socials, bottom-left ── */
.chat-corner {
  position: fixed;
  left: 22px;
  bottom: 20px;
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 10px;
  view-transition-name: chat-corner;
}
.chat-bubble {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  background: var(--paper);
  border: 2px solid var(--ink);
  border-radius: 18px 14px 20px 16px / 14px 20px 16px 18px;
  transition: transform .3s var(--spring);
}
.chat-corner > :nth-child(odd)  { rotate: -2deg; }
.chat-corner > :nth-child(even) { rotate: 1.5deg; }
.chat-bubble svg { width: 28px; height: 28px; }
.chat-bubble .stroke { stroke-width: 2; }
.chat-bubble--wa .bub    { stroke: #2F9367; }
.chat-bubble--viber .bub { stroke: #7360F2; }
.chat-bubble--fb .bub    { stroke: #3D6AD6; }
.chat-bubble--ig .bub    { stroke: #D94A7E; }
.chat-bubble--soc svg { width: 26px; height: 26px; }

@media (max-width: 768px) {
  .sound-corner { right: 12px; bottom: 20px; }
  .sound-hint { display: none; }
  .chat-corner { left: 12px; bottom: 20px; gap: 8px; flex-direction: row; }
  .chat-bubble { width: 46px; height: 46px; }
  /* home hides .brand on mobile, so the pill has no counterpart to morph
     into — without this its frosted snapshot floats free during the close.
     The backdrop blur is also a continuous raster cost on iOS Safari and
     sits over flat paper anyway — a solid tint reads the same. */
  .brand {
    view-transition-name: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(250, 246, 239, .94);
  }
}

/* ═══ cross-document view transitions · paper unfolds between pages ═══ */
@view-transition { navigation: auto; }
/* On phones the full-page snapshot morph stutters in mobile WebKit and you
   can't tell a tap registered — swap pages instantly instead (the press
   feedback below is what tells you it worked). Desktop keeps the paper-unfold.
   Same mechanism as the reduced-motion block at the bottom of this file. */
@media (max-width: 768px) { @view-transition { navigation: none; } }

/* the matched panel→sheet morph: springy, with a tiny paper settle */
::view-transition-group(sheet-web),
::view-transition-group(sheet-app),
::view-transition-group(sheet-mkt),
::view-transition-group(sheet-studio),
::view-transition-group(sheet-faq),
::view-transition-group(sheet-hi) {
  animation-duration: .6s;
  animation-timing-function: cubic-bezier(.3, 1.18, .35, 1);
  z-index: 5;
}
::view-transition-old(sheet-web), ::view-transition-new(sheet-web),
::view-transition-old(sheet-app), ::view-transition-new(sheet-app),
::view-transition-old(sheet-mkt), ::view-transition-new(sheet-mkt),
::view-transition-old(sheet-studio), ::view-transition-new(sheet-studio),
::view-transition-old(sheet-faq), ::view-transition-new(sheet-faq),
::view-transition-old(sheet-hi), ::view-transition-new(sheet-hi) {
  animation-duration: .6s;
  height: 100%;
  overflow: clip;
}

/* logo + corners ride along, no flicker */
::view-transition-group(brand),
::view-transition-group(sound-corner),
::view-transition-group(chat-corner) {
  animation-duration: .45s;
  z-index: 10;
}

/* everything unmatched does a quick soft fade */
::view-transition-old(root) { animation: paper-out .4s ease-in both; }
::view-transition-new(root) { animation: paper-in .45s ease-out both; }
@keyframes paper-out { to { opacity: 0; transform: scale(.985); } }
@keyframes paper-in  { from { opacity: 0; transform: scale(1.012); } }

/* ── instant press feedback ───────────────────────────────────────────────
   `.pressing` is added on pointerdown (sound.js) so a control reacts the
   instant a finger lands — independent of sound / navigation / view-transition
   timing. `:active` covers mouse + keyboard. Transform/opacity only + ~80ms,
   so it costs nothing. This is the cue that replaces the removed tap highlight. */
.brand:active, .brand.pressing,
.sound-toggle:active, .sound-toggle.pressing,
.chat-bubble:active, .chat-bubble.pressing { transform: scale(.88); transition: transform .08s ease; }
.btn-bendy.pressing {
  transform: translateY(3px);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, .45),
    inset 0 -2px 0 rgba(58, 58, 58, .12),
    0 1px 0 -1px var(--ink);
}

/* ── reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  html:not(.no-js) .doodle .stroke {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }
  html:not(.no-js) .reveal { opacity: 1; transform: none; }
  .btn-scribble path { stroke-dasharray: none; stroke-dashoffset: 0; opacity: 0; }
  .btn-bendy:hover .btn-scribble path { opacity: 1; }
}

/* ── pointer-only interactions (no sticky hover on touch) ── */
@media (hover: hover) and (pointer: fine) {
  .brand:hover { transform: rotate(-2deg) scale(1.04); }
  .btn-bendy:hover {
    transform: translateY(-2px) rotate(-.6deg);
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, .65),
      inset 0 -3px 0 rgba(58, 58, 58, .10),
      0 7px 0 -1px var(--ink);
  }
  .btn-bendy:hover .btn-scribble path { animation: scribble-in .5s ease-out forwards; }
  .sound-toggle:hover { transform: rotate(-4deg) scale(1.08); }
  .chat-bubble:hover { transform: rotate(4deg) scale(1.08); }
}