/* fx.css: styles for the interactive layer in fx.js. Purely additive on top of styles.css. */

/* ---------- Shared bursts (hearts + lilies) ---------- */
.fx-burst { position: fixed; z-index: 9998; pointer-events: none; user-select: none; }
.fx-burst--heart { color: var(--pink); font-size: 1.2rem; line-height: 1; text-shadow: 0 2px 4px rgba(0,0,0,.25); }
.fx-burst--lily { width: 44px; filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }

/* ---------- 1. Latte cup scroll progress ---------- */
.fx-cup {
  position: fixed; right: 18px; bottom: 18px; z-index: 60;
  width: 60px; height: 60px; padding: 4px; border-radius: 50%;
  border: 2px solid var(--pink); background: rgba(59,42,41,.92); cursor: pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.3);
  opacity: 0; translate: 0 20px; pointer-events: none;
  transition: opacity .3s, translate .3s, transform .2s;
}
.fx-cup.show { opacity: 1; translate: 0 0; pointer-events: auto; }
.fx-cup:hover { transform: scale(1.08) rotate(-6deg); }
.fx-cup:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.fx-cup svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fx-cup__fill { transition: y .25s ease-out; }
.fx-cup__steam path { opacity: 0; }
.fx-cup--full .fx-cup__steam path { animation: fx-steam 2.4s ease-in-out infinite; }
.fx-cup--full .fx-cup__steam path:nth-child(2) { animation-delay: .5s; }
.fx-cup--full .fx-cup__steam path:nth-child(3) { animation-delay: 1s; }
@keyframes fx-steam {
  0%   { opacity: 0; translate: 0 4px; }
  40%  { opacity: .9; }
  100% { opacity: 0; translate: 0 -6px; }
}
.fx-cup__art { opacity: 0; scale: .3; transform-box: fill-box; transform-origin: center; transition: opacity .4s, scale .5s cubic-bezier(.3,1.6,.5,1); }
.fx-cup--full .fx-cup__art { opacity: 1; scale: 1; }
.fx-cup::before {
  content: attr(data-label); position: absolute; right: calc(100% + 10px); top: 50%; translate: 0 -50%;
  white-space: nowrap; background: var(--brown); color: var(--pink); border: 1px solid rgba(242,184,192,.4);
  font: .7rem var(--mono); letter-spacing: .1em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 999px; opacity: 0; pointer-events: none; transition: opacity .2s;
}
.fx-cup:hover::before, .fx-cup:focus-visible::before { opacity: 1; }
@media (max-width: 720px) {
  .fx-cup { width: 50px; height: 50px; right: 12px; bottom: 12px; }
}

/* ---------- 4. Self-writing signature + swash; "Hi, I'm Avni" writes itself too ---------- */
html.fx .hero__name { position: relative; width: fit-content; }
@media (max-width: 720px) { html.fx .hero__name { margin-inline: auto; } }
.fx-swash { position: absolute; left: 2%; bottom: -.12em; width: 100%; height: .32em; overflow: visible; pointer-events: none; }
.fx-swash path { fill: none; stroke: var(--pink); stroke-width: 2.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
@keyframes fx-write {
  from { clip-path: inset(-40% 100% -40% -8%); }
  to   { clip-path: inset(-40% -8% -40% -8%); }
}
@keyframes fx-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: no-preference) {
  html.fx-ready .hero__text.in .hero__name { animation: fx-write 1.5s cubic-bezier(.6,.1,.3,1) .25s backwards; }
  html.fx .fx-swash path { stroke-dasharray: 1; stroke-dashoffset: 1; }
  html.fx-ready .hero__text.in .fx-swash path { animation: fx-draw .8s ease-out 1.6s forwards; }
  /* Every script section heading writes itself (fx-ready waits for the intro) */
  html.fx-ready h2.script.reveal.in, html.fx-ready .reveal.in h2.script { animation: fx-write 1.3s cubic-bezier(.6,.1,.3,1) .3s backwards; }
}

/* Small pink flourish drawn under each script heading */
html.fx h2.script { position: relative; }
html.fx h2.script::after {
  content: ""; position: absolute; left: 50%; bottom: -8px; width: 110px; height: 14px; margin-left: -55px; pointer-events: none;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'><g fill='none' stroke='%23e7a1ad' stroke-width='1.6' stroke-linecap='round'><path d='M4 9C22 2 34 15 50 8'/><path d='M70 8c16 7 28-6 46 1'/></g><path d='M60 12c-3-2-7-5-5-8 1-2 4-2 5 0 1-2 4-2 5 0 2 3-2 6-5 8z' fill='%23e7a1ad'/></svg>") center / contain no-repeat;
}
html.fx .about__body h2.script::after { left: 0; margin-left: 0; }
html.fx .audience h2.script::after {
  left: 0; margin-left: 0; bottom: -14px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'><g fill='none' stroke='%233b2a29' stroke-width='1.6' stroke-linecap='round'><path d='M4 9C22 2 34 15 50 8'/><path d='M70 8c16 7 28-6 46 1'/></g><path d='M60 12c-3-2-7-5-5-8 1-2 4-2 5 0 1-2 4-2 5 0 2 3-2 6-5 8z' fill='%233b2a29'/></svg>");
}
@keyframes fx-flourish { from { clip-path: inset(0 50% 0 50%); opacity: 0; } to { clip-path: inset(0 0 0 0); opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  html.fx h2.script::after { clip-path: inset(0 50% 0 50%); opacity: 0; }
  html.fx-ready h2.script.reveal.in::after, html.fx-ready .reveal.in h2.script::after { animation: fx-flourish .7s ease-out 1.6s forwards; }
}

/* ---------- Hero: polaroid tilt, charms, petals ---------- */
html.fx .hero .polaroid.fx-tilt {
  position: relative;
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) rotate(-4deg);
  transition: transform .25s ease-out;
}
html.fx .hero .polaroid.fx-tilt:hover {
  transform: perspective(900px) rotateX(var(--fx-rx, 0deg)) rotateY(var(--fx-ry, 0deg)) rotate(0) scale(1.02);
}
html.fx .hero .charm { cursor: pointer; }
html.fx .charm--key { transform-origin: 30% 30%; }
html.fx .charm--heart { transform-origin: 50% 10%; }
.fx-petal {
  position: absolute; top: 0; z-index: 0; pointer-events: none;
  border-radius: 80% 0 80% 0;
  background: linear-gradient(135deg, #fbd3d9, #e7a1ad 70%);
  box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

/* ---------- About polaroids: draggable ---------- */
@media (hover: hover) and (pointer: fine) {
  html.fx .about__strip .fx-drag { cursor: grab; touch-action: none; }
}
html.fx .about__strip .fx-dragging { cursor: grabbing; position: relative; z-index: 5; box-shadow: 0 22px 40px rgba(0,0,0,.35); }

/* ---------- Niche chips pop in ---------- */
@keyframes fx-pop { from { opacity: 0; scale: .4; translate: 0 18px; } }
html.fx .chips.in li { animation: fx-pop .55s cubic-bezier(.3,1.5,.5,1) backwards; animation-delay: calc(var(--i, 0) * 90ms + .2s); }

/* ---------- Services: hearts fill one by one ---------- */
html.fx .services__list li::after {
  content: "\2665"; position: absolute; left: 0; top: .75rem;
  color: var(--pink-2); font-size: 1.1rem; scale: 0; pointer-events: none;
}
@keyframes fx-heart { 60% { scale: 1.35; } to { scale: 1; } }
html.fx .services__list.in li::after { animation: fx-heart .5s ease-out forwards; animation-delay: calc(var(--i, 0) * 140ms + .4s); }
html.fx .services__list li:hover::after { scale: 1.25; transition: scale .2s; }

/* ---------- Reels: fan out + stat badges ---------- */
@keyframes fx-fan {
  from { translate: var(--fx-dx, 0) var(--fx-dy, 0); rotate: var(--fx-rot, 0deg); opacity: 0; }
  25%  { opacity: 1; }
  to   { translate: 0 0; rotate: 0deg; }
}
.phones.fx-fan .phone { animation: fx-fan 1s cubic-bezier(.2,.8,.2,1) backwards; animation-delay: calc(var(--fx-delay, 0ms) + .2s); }
.fx-badge {
  position: absolute; top: 14px; left: 50%; z-index: 2; translate: -50% -6px;
  max-width: calc(100% - 20px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(59,42,41,.88); color: var(--pink); border: 1px solid var(--pink);
  font-size: .66rem; letter-spacing: .06em; padding: .25rem .65rem; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s;
}
.phone:hover .fx-badge, .phone:focus-visible .fx-badge { opacity: 1; translate: -50% 0; }
@media (hover: none) { .fx-badge { opacity: 1; translate: -50% 0; } }

/* ---------- Donut: hover slices ---------- */
html.fx .donut { position: relative; }
html.fx .donut__seg {
  cursor: pointer;
  transition: stroke-dasharray 1.1s cubic-bezier(.2,.7,.2,1), transform .25s ease, stroke-width .25s, opacity .25s;
}
html.fx .donut.fx-has-on .donut__seg:not(.fx-on) { opacity: .4; }
html.fx .donut__seg.fx-on { stroke-width: 10.2; }
html.fx .donut figcaption span { cursor: default; transition: opacity .2s; }
html.fx .donut.fx-has-on figcaption span:not(.fx-on) { opacity: .45; }
html.fx .donut figcaption span.fx-on { font-weight: 700; }
.fx-tip {
  position: absolute; translate: -50% -50%; display: grid; justify-items: center; text-align: center;
  max-width: calc(var(--fx-hole, 140px) * .82); line-height: 1.1; pointer-events: none;
  opacity: 0; scale: .8; transition: opacity .2s, scale .2s;
}
.fx-tip.show { opacity: 1; scale: 1; }
.fx-tip b { font-family: var(--serif); font-size: min(1.9rem, calc(var(--fx-hole, 140px) * .24)); color: var(--brown-2); }
.fx-tip span { font-size: min(.62rem, calc(var(--fx-hole, 140px) * .075)); text-transform: uppercase; letter-spacing: .1em; }
/* Let pulled-out slices extend past the SVG box instead of being cut off (the card's padding has room) */
html.fx .donut__svg { overflow: visible; }

/* ---------- Brand tiles: shine sweep ---------- */
html.fx .brands li { position: relative; overflow: hidden; }
html.fx .brands li::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-18deg); opacity: 0; pointer-events: none;
}
@keyframes fx-shine { from { left: -60%; opacity: 1; } to { left: 130%; opacity: 1; } }
html.fx .brands li:hover::after { animation: fx-shine .8s ease-out; }

/* ---------- Testimonials: taped sticky notes ---------- */
html.fx .quotes blockquote { rotate: var(--fx-r, 0deg); transition: rotate .3s, translate .3s, box-shadow .3s; }
html.fx .quotes blockquote:nth-child(1) { --fx-r: -1.6deg; }
html.fx .quotes blockquote:nth-child(2) { --fx-r: 1.2deg; }
html.fx .quotes blockquote:nth-child(3) { --fx-r: -.8deg; }
html.fx .quotes blockquote::after {
  content: ""; position: absolute; top: -12px; left: 50%; width: 86px; height: 24px; margin-left: -43px;
  background: rgba(255,255,255,.55); rotate: -3deg; box-shadow: 0 1px 3px rgba(0,0,0,.08);
}
html.fx .quotes blockquote:hover { rotate: 0deg; translate: 0 -6px; box-shadow: 0 16px 30px rgba(0,0,0,.18); }
@keyframes fx-note { from { opacity: 0; translate: 0 60px; rotate: calc(var(--fx-r, 0deg) * 6); } }
html.fx .quotes.in blockquote { animation: fx-note .8s cubic-bezier(.2,.8,.3,1.1) backwards; animation-delay: calc(var(--i, 0) * 160ms + .15s); }

/* ---------- Lace trim stitches in ---------- */
.fx-lace-sentinel { position: absolute; left: 0; bottom: 0; width: 1px; height: 44px; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html.fx .lace-edge::after { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s cubic-bezier(.6,0,.3,1); }
  html.fx .lace-edge.fx-stitched::after { clip-path: inset(0 0 0 0); }
}

/* ---------- Receipts (performance + Brew your brief) ---------- */
.fx-print { max-width: 340px; margin: 3rem auto 0; }
.fx-slot {
  position: relative; z-index: 1; height: 14px; border-radius: 999px; background: #1e1413;
  box-shadow: inset 0 3px 4px rgba(0,0,0,.6), 0 1px 0 rgba(242,184,192,.3);
}
.fx-paper { overflow: hidden; margin: -6px 12px 0; padding-bottom: 12px; }
.fx-receipt {
  position: relative; background: #fffdf8; color: #2a1c1b; text-align: left;
  font-family: var(--mono); font-size: .78rem; line-height: 1.5; text-transform: uppercase; letter-spacing: .05em;
  padding: 1.4rem 1.1rem 1rem; box-shadow: 0 4px 10px rgba(0,0,0,.15);
}
.fx-receipt::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 8px;
  background: conic-gradient(from -45deg at 50% 100%, #fffdf8 90deg, #0000 0) 0 0 / 16px 8px repeat-x;
}
.fx-receipt p { margin: 0; }
.fx-receipt__head { text-align: center; font-weight: 700; font-size: .95rem; letter-spacing: .14em; }
.fx-receipt__meta { text-align: center; font-size: .66rem; opacity: .7; padding-bottom: .6rem; margin-bottom: .4rem !important; border-bottom: 1px dashed rgba(42,28,27,.45); }
.fx-receipt ul { list-style: none; margin: 0; padding: .3rem 0; }
.fx-receipt li { display: flex; align-items: baseline; padding: .1rem 0; }
.fx-receipt li span { flex: 1 1 auto; overflow: hidden; white-space: nowrap; }
.fx-receipt li span::after { content: " ................................................................"; opacity: .5; }
.fx-receipt li b { flex: none; padding-left: .35rem; }
.fx-receipt li.fx-sub { padding-left: .9rem; font-size: .72rem; opacity: .8; }
.fx-receipt li.fx-sub span::after { content: ""; }
.fx-receipt__total { display: flex; justify-content: space-between; font-weight: 700; border-top: 1px dashed rgba(42,28,27,.45); margin-top: .4rem !important; padding-top: .5rem; }
.fx-receipt__thanks { text-align: center; margin: .9rem 0 .6rem !important; }
.fx-receipt__barcode {
  height: 34px; margin: 0 auto; width: 80%;
  background: repeating-linear-gradient(90deg, #2a1c1b 0 2px, transparent 2px 4px, #2a1c1b 4px 5px, transparent 5px 8px, #2a1c1b 8px 11px, transparent 11px 13px);
}
@keyframes fx-print-out { from { translate: 0 -101%; } to { translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  .fx-print:not(.fx-printing) .fx-receipt { translate: 0 -101%; }
  .fx-print.fx-printing .fx-receipt { animation: fx-print-out 1.12s steps(18) both; }
  .fx-order.fx-printing .fx-receipt { animation: fx-print-out .72s steps(10) both; }
}

/* ---------- 2. Brew your brief ---------- */
.fx-brew { max-width: 560px; margin: 0 auto 2.2rem; }
.fx-brew__open {
  font: inherit; font-size: .85rem; letter-spacing: .06em; color: var(--pink); cursor: pointer;
  background: rgba(242,184,192,.08); border: 1px dashed var(--pink); border-radius: 999px; padding: .7rem 1.3rem;
  transition: background .2s, translate .2s;
}
.fx-brew__open:hover { background: rgba(242,184,192,.18); translate: 0 -2px; }
.fx-brew__open[aria-expanded="true"] { border-style: solid; }
.fx-brew__open u { text-underline-offset: 3px; }
@keyframes fx-unfold { from { opacity: 0; translate: 0 -12px; } }
.fx-brew__panel:not([hidden]) { animation: fx-unfold .45s ease-out; }
.fx-menu {
  position: relative; margin-top: 1.4rem; padding: 1.8rem 1.5rem 1.5rem; text-align: left;
  background: #fdf6e8; color: #2a1c1b; border-radius: 6px; box-shadow: 8px 8px 0 var(--pink);
}
.fx-menu::before { content: ""; position: absolute; inset: 8px; border: 1px dashed rgba(59,42,41,.35); border-radius: 3px; pointer-events: none; }
.fx-menu > * { position: relative; }
.fx-menu__title { font-family: var(--script); font-size: clamp(2.2rem, 6vw, 2.8rem); line-height: 1.1; text-align: center; color: #4a2f2c; margin: 0; }
.fx-menu__sub { text-align: center; font-size: .72rem; text-transform: uppercase; letter-spacing: .14em; opacity: .7; margin: .2rem 0 .4rem; }
.fx-menu__group { border: 0; margin: 1.1rem 0 0; padding: 0; min-width: 0; }
.fx-menu__group legend { padding: 0; font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .16em; }
.fx-menu__opts { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.fx-opt {
  display: grid; text-align: left; line-height: 1.25; cursor: pointer;
  font: inherit; color: #2a1c1b; background: transparent;
  border: 1px solid rgba(59,42,41,.4); border-radius: 12px; padding: .45rem .8rem;
  transition: background .2s, color .2s, border-color .2s, translate .2s;
}
.fx-opt b { font-size: .8rem; }
.fx-opt i { font-family: var(--serif); font-size: .9rem; opacity: .7; }
.fx-opt:hover { border-color: #4a2f2c; translate: 0 -2px; }
.fx-opt:focus-visible { outline: 2px solid var(--pink-2); outline-offset: 2px; }
@keyframes fx-pick { 50% { scale: 1.08; } }
.fx-opt[aria-pressed="true"] { background: #3b2a29; color: #f2b8c0; border-color: #3b2a29; animation: fx-pick .3s ease-out; }
.fx-menu__hint { min-height: 1.3rem; margin: .9rem 0 0; font-size: .8rem; text-align: center; color: #a3394e; }
.fx-menu__print, .fx-order__use, .fx-order__reset {
  font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: .78rem;
  border-radius: 999px; padding: .8rem 1.4rem; cursor: pointer; transition: translate .2s, background .2s;
}
.fx-menu__print { display: block; margin: .4rem auto 0; background: #3b2a29; color: #f2b8c0; border: 0; }
.fx-menu__print:hover, .fx-order__use:hover { translate: 0 -2px; }
.fx-order { max-width: 340px; margin: 1.8rem auto 0; }
.fx-order__actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; margin-top: 1rem; }
.fx-order__use { background: var(--pink); color: var(--brown); border: 0; }
.fx-order__reset { background: transparent; color: var(--pink); border: 1px solid rgba(242,184,192,.5); }
.fx-order__reset:hover { background: rgba(242,184,192,.12); }

/* ---------- Contact form: envelope + wax seal ---------- */
.fx-sending > :not(.fx-env) { opacity: .1; pointer-events: none; transition: opacity .3s; }
.fx-env {
  position: absolute; left: 50%; top: 50%; width: 240px; height: 150px; margin: -75px 0 0 -120px; z-index: 5;
  perspective: 800px; opacity: 0; transform: scale(.8); transition: opacity .3s, transform .3s;
}
.fx-env.s1 { opacity: 1; transform: none; }
.fx-env.s4 { opacity: 0; transform: translate(160px, -300px) rotate(-14deg) scale(.5); transition: transform .9s cubic-bezier(.5,0,.7,.4), opacity .9s ease-in; }
.fx-env > div { position: absolute; }
.fx-env__back { inset: 0; z-index: 0; background: #d98a98; border-radius: 6px; }
.fx-env__flap {
  left: 0; right: 0; top: 0; height: 62%; z-index: 0;
  background: #e7a1ad; clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: top; transform: rotateX(180deg); transition: transform .45s ease-in;
}
.fx-env.s2 .fx-env__flap { z-index: 4; transform: rotateX(0deg); }
.fx-env__letter {
  left: 16px; right: 16px; top: -125px; height: 130px; z-index: 1; padding: 14px 16px;
  background: #fdf6e8; border-radius: 4px; box-shadow: 0 2px 6px rgba(0,0,0,.15);
  transition: top .6s cubic-bezier(.5,0,.3,1) .1s;
}
.fx-env.s1 .fx-env__letter { top: 12px; }
.fx-env__letter span { display: block; font-family: var(--script); font-size: 1.6rem; color: #4a2f2c; line-height: 1.2; }
.fx-env__letter i { display: block; height: 3px; margin: 9px 0; background: rgba(59,42,41,.2); border-radius: 2px; }
.fx-env__front {
  inset: 0; z-index: 3; background: #f2b8c0; border-radius: 6px;
  clip-path: polygon(0 0, 50% 55%, 100% 0, 100% 100%, 0 100%);
}
.fx-env__seal {
  left: 50%; top: 62%; width: 44px; height: 44px; margin: -22px; z-index: 5;
  display: grid; place-items: center; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c25a6c, #8e2f42); color: #fdf6e8; font-size: 1.1rem;
  box-shadow: 0 3px 6px rgba(0,0,0,.3), inset 0 0 0 3px rgba(255,255,255,.12);
  opacity: 0; transform: scale(2.4); transition: transform .3s cubic-bezier(.3,1.6,.5,1), opacity .2s;
}
.fx-env.s3 .fx-env__seal { opacity: 1; transform: scale(1); }

/* ---------- Espresso mode toggle + dark theme ---------- */
.fx-theme {
  display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer;
  font: inherit; font-size: 1rem; line-height: 1; color: var(--pink);
  background: transparent; border: 1px solid rgba(242,184,192,.6); border-radius: 50%;
  transition: background .2s, color .2s, rotate .4s;
}
.fx-theme:hover { background: var(--pink); color: var(--brown); rotate: -20deg; }
.fx-theme:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
.fx-theme__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 720px) {
  .fx-theme { display: flex; gap: .6rem; width: auto; height: auto; margin: .6rem 1.5rem 0; padding: .55rem 1rem; border-radius: 999px; font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; }
  .fx-theme:hover { rotate: 0deg; }
  .fx-theme__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}

html.fx-theme-anim body, html.fx-theme-anim body * {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, box-shadow .6s ease !important;
}
html.fx-espresso { --cream: #2b1d1c; --paper: #33231f; --ink: #f3e6d6; --brown-2: #f2b8c0; color-scheme: dark; }
html.fx-espresso .dark, html.fx-espresso .nav, html.fx-espresso .hero, html.fx-espresso .footer { color: #fdf6e8; }
html.fx-espresso .form input, html.fx-espresso .form textarea, html.fx-espresso .phone .cover__title { color: #fdf6e8; }
html.fx-espresso .form button:hover { background: #fdf6e8; }
html.fx-espresso .card, html.fx-espresso .facts { border-color: rgba(242,184,192,.3); }
html.fx-espresso .facts li, html.fx-espresso .services__list li, html.fx-espresso .case dt,
html.fx-espresso .case__result, html.fx-espresso .stats { border-color: rgba(242,184,192,.25); }
html.fx-espresso .facts, html.fx-espresso .donut { box-shadow: 6px 6px 0 #1e1413; }
html.fx-espresso .donut__ring { stroke: rgba(242,184,192,.12); }
html.fx-espresso .donut__seg:nth-of-type(2) { stroke: #b07a68; }
html.fx-espresso .donut figcaption span:first-child i { background: #b07a68 !important; }
html.fx-espresso .quotes blockquote::after { background: rgba(242,184,192,.35); }

/* ---------- Custom cursor + milk-foam trail ---------- */
.fx-cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity .2s; }
.fx-cursor.on { opacity: 1; }
.fx-cursor::before {
  content: ""; position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
  border: 1.5px solid var(--pink); box-shadow: 0 0 0 1px rgba(59,42,41,.2);
  transition: scale .25s ease, background .25s ease;
}
.fx-cursor::after {
  content: ""; position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -7px; opacity: 0; scale: .5;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 4v16l14-8z' fill='%23f2b8c0'/></svg>") center / contain no-repeat;
  transition: opacity .2s, scale .25s;
}
.fx-cursor--hover::before { scale: 1.6; background: rgba(242,184,192,.15); }
.fx-cursor--play::before { scale: 2.3; background: rgba(59,42,41,.75); }
.fx-cursor--play::after { opacity: 1; scale: 1; }
.fx-foam {
  position: fixed; z-index: 9997; width: 8px; height: 8px; border-radius: 50%; pointer-events: none;
  background: rgba(253,246,232,.9); box-shadow: 0 0 0 1px rgba(217,138,152,.5);
}

/* ---------- Reduced motion: show final states ---------- */
@media (prefers-reduced-motion: reduce) {
  html.fx .services__list li::after { scale: 1; }
}

/* =====================================================================
   Intro: latte pours, laptop opens, dive into the screen
   ===================================================================== */
html.fx-intro-lock, html.fx-intro-lock body { overflow: hidden; }
.fx-intro {
  position: fixed; inset: 0; z-index: 9990; display: grid; place-items: center; overflow: hidden; cursor: pointer;
  background: var(--brown) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><rect width='6' height='6' fill='%233b2a29'/><path d='M0 0h1v1H0z' fill='%23473332'/></svg>");
  transition: opacity .4s ease;
}
.fx-intro--out { opacity: 0; pointer-events: none; }
.fx-intro--fast { transition-duration: .25s; }
.fx-intro__fit { position: absolute; left: 50%; top: 50%; width: 460px; height: 260px; margin: -130px 0 0 -230px; }
.fx-intro__scene { position: relative; width: 100%; height: 100%; }
@keyframes fx-intro-in { from { opacity: 0; translate: 0 12px; } }
.fx-intro--play .fx-intro__scene { animation: fx-intro-in .32s ease-out backwards; }
.fx-intro__desk {
  position: absolute; left: -30px; right: -30px; bottom: 18px; height: 2px;
  background: linear-gradient(90deg, transparent, rgba(242,184,192,.5), transparent);
}
.fx-intro__shadow { position: absolute; bottom: 12px; height: 14px; border-radius: 50%; background: radial-gradient(rgba(0,0,0,.45), transparent 70%); }
.fx-intro__shadow--laptop { left: 10px; width: 320px; }
.fx-intro__shadow--cup { right: 14px; width: 110px; }

.fx-intro__laptop { position: absolute; left: 20px; bottom: 20px; width: 300px; perspective: 700px; }
.fx-intro__lid {
  width: 270px; height: 172px; margin: 0 auto; padding: 9px;
  background: #2a1c1b; border-radius: 12px 12px 3px 3px; box-shadow: inset 0 0 0 2px #4a2f2c;
  transform-origin: 50% 100%; transform: rotateX(6deg);
}
@keyframes fx-lid { from { transform: rotateX(-88deg); } }
.fx-intro--play .fx-intro__lid { animation: fx-lid .52s cubic-bezier(.3,1.3,.5,1) .44s backwards; }
.fx-intro__screen {
  height: 100%; border-radius: 5px; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 15px; letter-spacing: .06em; color: var(--pink);
  background-color: #3b2a29;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><path d='M0 0h1v1H0z' fill='%23473332'/></svg>");
  box-shadow: inset 0 0 30px rgba(242,184,192,.22);
}
@keyframes fx-screen { from { background-color: #120b0a; box-shadow: none; } }
.fx-intro--play .fx-intro__screen { animation: fx-screen .32s ease-out .88s backwards; }
@keyframes fx-blink { 50% { opacity: 0; } }
.fx-intro__caret { display: inline-block; width: 8px; height: 16px; margin-left: 2px; background: var(--pink); animation: fx-blink .8s steps(1) infinite; }
.fx-intro__base {
  position: relative; height: 12px; margin-top: -1px;
  background: linear-gradient(#efdccd, #c9a98a); clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%); border-radius: 0 0 10px 10px;
}
.fx-intro__base::after { content: ""; position: absolute; left: 50%; top: 0; width: 50px; margin-left: -25px; height: 4px; background: rgba(59,42,41,.25); border-radius: 0 0 6px 6px; }

.fx-intro__cup { position: absolute; right: 22px; bottom: 12px; width: 96px; height: 96px; }
.fx-intro__cup svg { position: relative; width: 100%; height: 100%; display: block; overflow: visible; }
.fx-intro__stream {
  position: absolute; left: 46%; bottom: 34px; width: 7px; height: 200px; margin-left: -3px; border-radius: 4px;
  background: linear-gradient(#a36f4f, #d2a47b); clip-path: inset(0 0 100% 0);
}
@keyframes fx-pour {
  0%       { clip-path: inset(0 0 100% 0); }
  35%, 70% { clip-path: inset(0 0 0 0); }
  100%     { clip-path: inset(100% 0 0 0); }
}
.fx-intro--play .fx-intro__stream { animation: fx-pour .72s linear .12s forwards; }
.fx-intro__fill { transform: translateY(48px); }
@keyframes fx-fill { to { transform: translateY(0); } }
.fx-intro--play .fx-intro__fill { animation: fx-fill .56s ease-out .28s forwards; }
.fx-intro__art { opacity: 0; scale: 0; transform-box: fill-box; transform-origin: center; }
@keyframes fx-art { to { opacity: 1; scale: 1; } }
.fx-intro--play .fx-intro__art { animation: fx-art .32s cubic-bezier(.3,1.6,.5,1) .84s forwards; }
.fx-intro__steam path { opacity: 0; }
.fx-intro--play .fx-intro__steam path { animation: fx-steam 1.4s ease-in-out .88s infinite; }
.fx-intro--play .fx-intro__steam path:nth-child(2) { animation-delay: 1.04s; }
.fx-intro--play .fx-intro__steam path:nth-child(3) { animation-delay: 1.2s; }
.fx-intro__skip {
  position: absolute; right: 20px; bottom: 20px; cursor: pointer;
  font: .72rem var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pink);
  background: rgba(59,42,41,.6); border: 1px solid rgba(242,184,192,.5); border-radius: 999px; padding: .5rem 1rem;
  transition: background .2s, color .2s;
}
.fx-intro__skip:hover, .fx-intro__skip:focus-visible { background: var(--pink); color: var(--brown); }

/* =====================================================================
   Gap fillers
   ===================================================================== */
@keyframes fx-track   { from { letter-spacing: .7em; opacity: 0; } }
@keyframes fx-rise-up { from { opacity: 0; translate: 0 14px; } }
@keyframes fx-rise-x  { from { opacity: 0; translate: -24px 0; } }

/* Hero: "CREATIVE PORTFOLIO" letters stamp in, PORTFOLIO flashes pink; supporting lines follow */
html.fx .hero h1 .fx-l { display: inline-block; }
/* Keep each word whole: letters are separate boxes, so without this a word could break mid-way */
html.fx .hero h1.fx-split > span { display: inline-block; white-space: nowrap; }
html.fx .hero h1 .fx-l:nth-child(even) { --fx-lr: 8deg; }
@keyframes fx-stamp-l {
  0%   { opacity: 0; transform: translateY(-.5em) scale(1.8) rotate(var(--fx-lr, -8deg)); }
  60%  { opacity: 1; transform: translateY(0) scale(.92); }
  100% { transform: none; }
}
@keyframes fx-flash { 40% { text-shadow: 0 0 18px rgba(242,184,192,.95), 0 0 40px rgba(242,184,192,.6); } }
@media (prefers-reduced-motion: no-preference) {
  html.fx-ready .hero__text.in .fx-l { animation: fx-stamp-l .45s cubic-bezier(.3,1.4,.5,1) backwards; animation-delay: calc(var(--i, 0) * 55ms + .05s); }
  html.fx-ready .hero__text.in h1 .pink { animation: fx-flash .9s ease-out 1s; }
  html.fx-ready .hero__text.in .eyebrow { animation: fx-track 1s ease-out backwards; }
  html.fx-ready .hero__text.in .hero__handle { animation: fx-rise-up .6s ease-out 1s backwards; }
  html.fx-ready .hero__text.in .hero__niches { animation: fx-rise-up .6s ease-out 1.3s backwards; }
  html.fx-ready .hero__text.in .hero__social > * { animation: fx-pop .5s cubic-bezier(.3,1.5,.5,1) 1.5s backwards; }
  html.fx-ready .hero__text.in .hero__social > :nth-child(2) { animation-delay: 1.65s; }
  html.fx-ready .nav__logo { animation: fx-write 1.2s cubic-bezier(.6,.1,.3,1) .1s backwards; }
}

html.fx .hero .polaroid { position: relative; }

/* About: paragraphs slide in, About Me card stamps down, its lily floats */
html.fx .about__body.in p { animation: fx-rise-x .7s ease-out .6s backwards; }
html.fx .about__body.in p + p { animation-delay: .8s; }
@keyframes fx-stamp {
  0%   { opacity: 0; scale: 1.3; rotate: -6deg; }
  65%  { opacity: 1; scale: .97; rotate: 1deg; }
  100% { scale: 1; rotate: 0deg; }
}
html.fx .card.reveal.in { animation: fx-stamp .6s cubic-bezier(.3,1.3,.5,1) .25s backwards; }
html.fx .lily--card { --r: 20deg; animation: lily-float 7s ease-in-out infinite; }

/* Audience facts rows slide in (numbers count up from fx.js) */
html.fx .reveal.in .facts li { animation: fx-rise-x .55s ease-out backwards; animation-delay: calc(var(--i, 0) * 110ms + .2s); }

/* Services photos are laid down like polaroids on a table */
@keyframes fx-lay { from { opacity: 0; translate: 70px -50px; rotate: calc(18deg - var(--i, 0) * 10deg); scale: 1.15; } }
html.fx .services__tiles.in img { animation: fx-lay .8s cubic-bezier(.2,.8,.3,1.1) backwards; animation-delay: calc(var(--i, 0) * 140ms + .1s); }

/* Case studies flip down like index cards */
@keyframes fx-flip { from { opacity: 0; transform: perspective(900px) rotateX(-80deg); } }
html.fx .cases.in .case { transform-origin: 50% 0; animation: fx-flip .8s cubic-bezier(.2,.8,.3,1.1) backwards; animation-delay: calc(var(--i, 0) * 150ms + .1s); }

/* Brand tiles flip in; subheading tracks in */
@keyframes fx-flipY { from { opacity: 0; transform: perspective(600px) rotateY(90deg); } }
html.fx .brands.in li { animation: fx-flipY .6s ease-out backwards; animation-delay: calc(var(--i, 0) * 80ms + .1s); }
html.fx .brands__sub.in { animation: fx-track 1s ease-out .2s backwards; }

/* Collaborate lilies float like the hero ones */
html.fx .lily--collab-l { --r: -25deg; animation: lily-float 8s ease-in-out infinite; }
html.fx .lily--collab-r { --r: 35deg; animation: lily-float 6.5s ease-in-out -2s infinite; }

/* Nav: Collaborate pill (and mobile menu button) pulses past halfway */
@keyframes fx-pulse {
  0%       { box-shadow: 0 0 0 0 rgba(242,184,192,.7); }
  70%,100% { box-shadow: 0 0 0 12px rgba(242,184,192,0); }
}
.nav__cta.fx-pulse { animation: fx-pulse 2.2s ease-out infinite; }
.nav__toggle.fx-pulse { border-radius: 50%; animation: fx-pulse 2.2s ease-out infinite; }

/* Form fields: pink underline draws in on focus */
html.fx .form input, html.fx .form textarea {
  background-image: linear-gradient(var(--pink), var(--pink));
  background-size: 0% 2px; background-position: 50% 100%; background-repeat: no-repeat;
  transition: background-size .35s ease;
}
html.fx .form input:focus, html.fx .form textarea:focus { background-size: 100% 2px; }

/* Footer: name writes itself, mini latte steams */
@media (prefers-reduced-motion: no-preference) {
  html.fx .footer .script { clip-path: inset(-40% 100% -40% -8%); }
  html.fx .footer.fx-in .script { clip-path: none; animation: fx-write 1.4s cubic-bezier(.6,.1,.3,1) backwards; }
}
.fx-mini-cup { display: inline-block; width: .8em; height: .8em; margin-left: .3em; vertical-align: -.05em; overflow: visible; }
.fx-mini-cup__steam path { animation: fx-steam 2s ease-in-out infinite; }
.fx-mini-cup__steam path + path { animation-delay: .7s; }

/* =====================================================================
   Scrollbar: lace-stitch track + latte "stirrer" thumb with a foam heart
   (Chrome/Edge/Safari get the full design; Firefox gets pink-on-brown)
   ===================================================================== */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track {
  background-color: #2a1c1b;
  background-image: radial-gradient(circle, rgba(242,184,192,.45) 1.3px, transparent 1.8px);
  background-size: 14px 12px; background-position: center top;
}
::-webkit-scrollbar-thumb {
  border: 3px solid #2a1c1b; border-radius: 999px; min-height: 60px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 16c-4-3-7-5.5-7-8.5a3.5 3.5 0 0 1 7-1 3.5 3.5 0 0 1 7 1c0 3-3 5.5-7 8.5z' fill='%23fdf6e8'/></svg>") center / 8px no-repeat,
    linear-gradient(90deg, #a36f4f, #d2a47b 45%, #f6e2c8 55%, #d2a47b 70%, #a36f4f);
}
::-webkit-scrollbar-thumb:hover {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 16c-4-3-7-5.5-7-8.5a3.5 3.5 0 0 1 7-1 3.5 3.5 0 0 1 7 1c0 3-3 5.5-7 8.5z' fill='%233b2a29'/></svg>") center / 8px no-repeat,
    linear-gradient(90deg, #d98a98, #f2b8c0 50%, #d98a98);
}
::-webkit-scrollbar-corner { background: #2a1c1b; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-color: var(--pink) #2a1c1b; scrollbar-width: thin; }
}

/* =====================================================================
   About: less empty space after the stats row (4 mo / 65+ / 3.8M+)
   ===================================================================== */
html.fx .about { padding-bottom: clamp(2rem, 4vw, 3rem); }

/* =====================================================================
   Navbar: milk-foam blob under the current section's link
   ===================================================================== */
.fx-foam-blob { display: none; }
html.fx .nav__links a.fx-active:not(.nav__cta) { color: var(--pink); }
@media (min-width: 721px) {
  html.fx .nav__links { position: relative; }
  html.fx .nav__links a::after { display: none; } /* the foam replaces the thin hover underline */
  .fx-foam-blob {
    display: block; position: absolute; bottom: -10px; left: var(--l, 0); right: var(--r, 100%); height: 7px;
    border-radius: 999px; pointer-events: none; opacity: 0;
    background:
      radial-gradient(circle at 30% 45%, rgba(255,250,246,.9) 0 1.2px, transparent 1.7px) 0 0 / 9px 7px,
      linear-gradient(#f9d3d9, var(--pink));
    box-shadow: 0 0 10px rgba(242,184,192,.55), inset 0 -1px 0 rgba(217,138,152,.6);
    transition:
      left .5s cubic-bezier(.5,1.5,.45,1) var(--dl, 0s),
      right .5s cubic-bezier(.5,1.5,.45,1) var(--dr, 0s),
      opacity .3s;
  }
  .fx-foam-blob.on { opacity: 1; }
  .fx-foam-blob.fx-snap { transition: opacity .3s; }
  @keyframes fx-squish {
    30% { scale: 1 .5; }
    60% { scale: 1 1.35; }
    100% { scale: 1 1; }
  }
  .fx-foam-blob.fx-squish { animation: fx-squish .6s ease-out; }
  .fx-foam-blob i {
    position: absolute; bottom: 2px; width: 5px; height: 5px; border-radius: 50%;
    background: #fdf6e8; opacity: 0;
  }
  .fx-foam-blob i:nth-child(1) { left: 18%; }
  .fx-foam-blob i:nth-child(2) { left: 50%; }
  .fx-foam-blob i:nth-child(3) { left: 78%; }
  @keyframes fx-bubble {
    from { opacity: .95; translate: 0 0; scale: .5; }
    to   { opacity: 0; translate: 0 -13px; scale: 1.2; }
  }
  .fx-foam-blob.fx-squish i { animation: fx-bubble .7s ease-out .35s; }
  .fx-foam-blob.fx-squish i:nth-child(2) { animation-delay: .45s; }
  .fx-foam-blob.fx-squish i:nth-child(3) { animation-delay: .4s; }
}

/* =====================================================================
   Phones: charm-bracelet scroll indicator
   ===================================================================== */
.fx-rail {
  /* Starts below the navbar (height set from JS) and ends above the latte cup */
  position: fixed; right: 3px; top: calc(var(--fx-nav-h, 60px) + 28px); bottom: 84px; width: 24px; z-index: 45;
  pointer-events: none; opacity: 0; transition: opacity .35s;
}
/* Soft while just scrolling so it doesn't fight the content; full strength while dragging or tapping */
.fx-rail.show { opacity: .7; }
.fx-rail.show.fx-dragging, .fx-rail.show.fx-labeling { opacity: 1; }
.fx-rail.show .fx-rail__charm, .fx-rail.show .fx-rail__bead { pointer-events: auto; }
.fx-rail__thread, .fx-rail__fill {
  position: absolute; left: 50%; top: 0; width: 2px; margin-left: -1px; border-radius: 2px;
  filter: drop-shadow(0 0 1px rgba(42,28,27,.7));
}
.fx-rail__thread { bottom: 0; background: repeating-linear-gradient(to bottom, rgba(242,184,192,.75) 0 3px, transparent 3px 7px); }
.fx-rail__fill { height: var(--p, 0%); background: var(--pink); }
.fx-rail__charm {
  position: absolute; left: 50%; top: var(--t, 0%); translate: -50% -50%;
  width: 20px; height: 20px; padding: 0; display: grid; place-items: center; cursor: pointer; pointer-events: none;
  border-radius: 50%; border: 1.5px solid var(--pink); background: var(--brown); color: var(--pink);
  box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: scale .25s, background .25s, color .25s;
}
.fx-rail__charm::before { content: ""; position: absolute; inset: -9px; } /* bigger tap target */
.fx-rail__charm svg { width: 11px; height: 11px; }
.fx-rail__charm img { width: 16px; height: 16px; object-fit: contain; }
.fx-rail__charm:not(.fx-on) { background: rgba(59,42,41,.75); }
.fx-rail__charm.fx-on { scale: 1.25; background: var(--pink); color: var(--brown); }
.fx-rail__bead {
  position: absolute; left: 50%; top: var(--p, 0%); translate: -50% -50%; z-index: 2;
  width: 24px; height: 24px; display: grid; place-items: center; touch-action: none; pointer-events: none;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.35)); transition: scale .2s;
}
.fx-rail__bead::before { content: ""; position: absolute; inset: -10px; } /* bigger grab target */
.fx-rail__bead svg { width: 100%; height: 100%; }
.fx-rail.fx-dragging .fx-rail__bead { scale: 1.2; }
.fx-rail__label {
  position: absolute; right: 30px; top: var(--p, 0%); translate: 0 -50%; white-space: nowrap;
  background: var(--brown); color: var(--pink); border: 1px solid rgba(242,184,192,.5); border-radius: 999px;
  font: .66rem var(--mono); letter-spacing: .12em; text-transform: uppercase; padding: .3rem .7rem;
  opacity: 0; transition: opacity .2s; pointer-events: none;
}
.fx-rail.fx-labeling .fx-rail__label { opacity: 1; }

/* =====================================================================
   Phones: café menu board (replaces the dropdown menu)
   ===================================================================== */
/* Lock only <html>: overflow on <body> too would make body its own scroll box, and the sticky navbar
   would jump back to the top of the page (off-screen when scrolled), leaving a see-through gap */
html.fx-board-lock { overflow: hidden; overscroll-behavior: none; }
html.fx-board-lock .fx-cup, html.fx-board-lock .fx-rail { visibility: hidden; }

/* Hamburger morphs into a steaming cup while the board is open */
html.fx .nav__toggle span { transition: transform .25s, opacity .2s; }
.nav__toggle.fx-cup-mode span { opacity: 0; }
.fx-toggle-cup {
  position: absolute; left: 5px; top: 5px; width: 30px; height: 30px; color: var(--pink);
  opacity: 0; scale: .4; pointer-events: none; transition: opacity .25s .1s, scale .35s cubic-bezier(.3,1.6,.5,1) .1s;
}
.nav__toggle.fx-cup-mode .fx-toggle-cup { opacity: 1; scale: 1; }
.fx-toggle-cup__steam path { opacity: 0; }
.nav__toggle.fx-cup-mode .fx-toggle-cup__steam path { animation: fx-steam 1.8s ease-in-out .3s infinite; }
.nav__toggle.fx-cup-mode .fx-toggle-cup__steam path + path { animation-delay: .9s; }

.fx-board {
  position: fixed; left: 0; right: 0; top: var(--fx-nav-h, 60px); bottom: 0; z-index: 49;
  overflow-y: auto; overscroll-behavior: contain; transform-origin: 50% 0;
  padding: 2rem 1.6rem 5rem; text-align: center; color: var(--cream);
  background:
    url("img/lace-h.png") repeat-x bottom / auto 40px,
    var(--brown) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='6' height='6'><rect width='6' height='6' fill='%233b2a29'/><path d='M0 0h1v1H0z' fill='%23473332'/></svg>");
  box-shadow: inset 0 10px 18px -10px rgba(0,0,0,.5);
}
html.fx-espresso .fx-board { color: #fdf6e8; }
@keyframes fx-board-in {
  0%   { transform: translateY(-100%); }
  60%  { transform: translateY(0) rotate(-1deg); }
  80%  { transform: rotate(.5deg); }
  100% { transform: none; }
}
@keyframes fx-board-out { to { transform: translateY(-100%); opacity: .6; } }
.fx-board.fx-open { animation: fx-board-in .6s cubic-bezier(.3,1.2,.5,1) both; }
.fx-board.fx-closing { animation: fx-board-out .35s ease-in forwards; }

.fx-board__close {
  position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(242,184,192,.6); background: transparent; color: var(--pink); font-size: 1.05rem; line-height: 1;
}
.fx-board__close:focus-visible, .fx-board a:focus-visible, .fx-board__theme:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
.fx-board__lily { position: absolute; width: 58px; pointer-events: none; filter: drop-shadow(0 4px 6px rgba(0,0,0,.35)); }
.fx-board__lily--l { --r: -20deg; top: 10px; left: 10px; transform: rotate(var(--r)); animation: lily-float 7s ease-in-out infinite; }
.fx-board__lily--r { --r: 30deg; bottom: 52px; right: 12px; transform: rotate(var(--r)); animation: lily-float 8s ease-in-out -2s infinite; }

.fx-board__title { font-family: var(--script); font-size: 3rem; line-height: 1.1; color: var(--pink); margin: .4rem 0 0; }
.fx-board__title::after {
  content: ""; display: block; width: 120px; height: 14px; margin: .3rem auto 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 16'><g fill='none' stroke='%23e7a1ad' stroke-width='1.6' stroke-linecap='round'><path d='M4 9C22 2 34 15 50 8'/><path d='M70 8c16 7 28-6 46 1'/></g><path d='M60 12c-3-2-7-5-5-8 1-2 4-2 5 0 1-2 4-2 5 0 2 3-2 6-5 8z' fill='%23e7a1ad'/></svg>") center / contain no-repeat;
}

.fx-board__list { list-style: none; margin: 1.6rem auto 0; padding: 0; max-width: 420px; text-align: left; }
.fx-board__list a {
  position: relative; display: flex; align-items: baseline; gap: .6rem; padding: .35rem .4rem;
  text-decoration: none; color: inherit; border-radius: 10px;
}
.fx-board__list a::before {
  content: ""; position: absolute; inset: 0; border-radius: 10px; background: rgba(242,184,192,.22);
  transform: scaleX(0); transform-origin: left; transition: transform .25s ease-out;
}
.fx-board__list a.fx-tapped::before { transform: scaleX(1); }
.fx-board__name { position: relative; font-family: var(--script); font-size: 2.2rem; line-height: 1.2; }
.fx-board__list i { flex: 1; border-bottom: 2px dotted rgba(242,184,192,.45); translate: 0 -.35em; }
.fx-board__list b { font-family: var(--mono); font-size: .78rem; color: var(--pink); }
.fx-board__list a.fx-active .fx-board__name { color: var(--pink); }
.fx-board__list a.fx-active .fx-board__name::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .15em; height: 6px; border-radius: 999px; z-index: -1;
  background:
    radial-gradient(circle at 30% 45%, rgba(255,250,246,.9) 0 1.2px, transparent 1.7px) 0 0 / 9px 6px,
    linear-gradient(#f9d3d9, var(--pink));
  opacity: .55;
}

.fx-board__special {
  position: relative; display: block; max-width: 420px; margin: 1.6rem auto 0; padding: 1rem 1.2rem; text-align: left;
  text-decoration: none; color: inherit; border: 2px solid var(--pink); border-radius: 14px; background: rgba(242,184,192,.1);
  box-shadow: 6px 6px 0 rgba(242,184,192,.35);
}
.fx-board__special small { display: block; font: .68rem var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--pink); }
.fx-board__special span { font-family: var(--script); font-size: 2rem; line-height: 1.2; }
.fx-board__special.fx-tapped { background: rgba(242,184,192,.3); }

.fx-board__foot { display: flex; flex-direction: column; align-items: center; gap: .9rem; margin-top: 1.8rem; }
.fx-board__theme {
  font: .78rem var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  color: var(--pink); background: transparent; border: 1px solid rgba(242,184,192,.6); border-radius: 999px; padding: .5rem 1.1rem;
}
.fx-board__insta { font-size: .78rem; letter-spacing: .08em; color: var(--pink); text-decoration: none; opacity: .85; }

@media (prefers-reduced-motion: no-preference) {
  .fx-board.fx-open .fx-board__title { animation: fx-write .9s cubic-bezier(.6,.1,.3,1) .25s backwards; }
  .fx-board.fx-open .fx-board__title::after { animation: fx-flourish .6s ease-out 1s backwards; }
  .fx-board.fx-open .fx-board__list li { animation: fx-write .6s cubic-bezier(.6,.1,.3,1) backwards; animation-delay: calc(.45s + var(--i, 0) * .1s); }
  .fx-board.fx-open .fx-board__special { animation: fx-pop .5s cubic-bezier(.3,1.5,.5,1) .95s backwards; }
  .fx-board.fx-open .fx-board__foot { animation: fx-rise-up .5s ease-out 1.1s backwards; }
}
@media (min-width: 721px) { .fx-board { display: none; } }

/* =====================================================================
   Hero heart charm
   ===================================================================== */
@media (min-width: 721px) {
  /* On desktop the bottom-left lily covered the heart; move it to the free top-left corner of the photo */
  html.fx .charm--heart { top: -14px; bottom: auto; left: -20px; z-index: 3; }
}

/* Clicking the photo shouldn't select (blue-highlight) or drag it */
html.fx .hero__photo, html.fx .hero__photo * {
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
html.fx .hero__photo img { -webkit-user-drag: none; }

/* Donut on touch screens: legend pills */
/* Legend as a tidy row of equal pills that never wrap mid-label */
.fx-donut-touch figcaption {
  display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; width: 100%;
}
.fx-donut-touch figcaption span {
  display: inline-flex; align-items: center; white-space: nowrap; line-height: 1;
  font-size: .72rem; font-weight: 400 !important; padding: .4rem .7rem;
  border: 1px solid rgba(59,42,41,.22); border-radius: 999px;
  transition: background .25s, border-color .25s, opacity .2s;
}
.fx-donut-touch figcaption span i { flex: none; margin-right: .4rem; }
.fx-donut-touch figcaption span.fx-on { background: var(--pink); border-color: var(--pink); color: var(--brown); }
html.fx-espresso .fx-donut-touch figcaption span { border-color: rgba(242,184,192,.3); }