/* ============================================================
   EVERY SHAPE — shared motion styles (cursor, magnetic, reveal)
   ============================================================ */

/* custom cursor: a small orange dot plus a soft ring that trails it */
.has-es-cursor, .has-es-cursor a, .has-es-cursor button, .has-es-cursor summary,
.has-es-cursor label, .has-es-cursor select, .has-es-cursor [data-cursor] { cursor: none; }
.has-es-cursor input, .has-es-cursor textarea { cursor: text; }

.es-cursor { position: fixed; inset: 0 auto auto 0; z-index: 9999; pointer-events: none; }
.es-cursor__dot, .es-cursor__ring {
  position: fixed; left: 0; top: 0; pointer-events: none; will-change: transform;
}
.es-cursor__dot {
  width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: #E96E35;
  transition: opacity .2s, width .2s, height .2s, margin .2s;
}
.es-cursor__ring {
  width: 36px; height: 36px; margin: -18px 0 0 -18px;
  display: grid; place-items: center;
}
.es-cursor__ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1.5px solid rgba(42, 37, 35, .45);
  transition: transform .3s cubic-bezier(.2,.8,.2,1), background-color .3s, border-color .3s;
}
.es-cursor__label {
  position: relative; font: 700 11px/1 "Nunito Sans", system-ui, sans-serif;
  letter-spacing: .08em; text-transform: uppercase; color: #2A2523;
  opacity: 0; transition: opacity .2s;
}
.es-cursor.is-hover .es-cursor__ring::before { transform: scale(1.6); background: rgba(233, 110, 53, .14); border-color: rgba(233, 110, 53, .6); }
.es-cursor.is-hover .es-cursor__dot { opacity: 0; }
.es-cursor.has-label .es-cursor__ring::before {
  transform: scale(2.3);
  background: rgba(255, 255, 255, .55); border-color: rgba(255, 255, 255, .7);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.es-cursor.has-label .es-cursor__label { opacity: 1; }
.es-cursor.is-down .es-cursor__ring::before { transform: scale(.8); }
.es-cursor.is-text { opacity: 0; }
.es-cursor.is-hidden { opacity: 0; }

/* magnetic elements glide back smoothly */
[data-magnetic] { transition: translate .45s cubic-bezier(.2,.8,.2,1); }
[data-magnetic].is-magnetic { transition: translate .12s linear; }

/* reveal on scroll */
.es-reveal-ready [data-reveal] {
  opacity: 0; translate: 0 28px;
  transition: opacity .8s cubic-bezier(.2,.8,.2,1), translate .8s cubic-bezier(.2,.8,.2,1);
}
.es-reveal-ready [data-reveal].is-in { opacity: 1; translate: 0 0; }
.es-reveal-ready [data-reveal="2"] { transition-delay: .08s; }
.es-reveal-ready [data-reveal="3"] { transition-delay: .16s; }
.es-reveal-ready [data-reveal="4"] { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  [data-magnetic] { transition: none; }
}

/* ---------- LANGUAGE SWITCHER ---------- */
.lang { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid rgba(42, 37, 35, .14); background: rgba(255, 255, 255, .6); }
.lang button {
  border: 0; background: none; cursor: pointer; padding: 6px 10px; border-radius: 999px;
  font: 800 .78rem/1 "Nunito Sans", system-ui, sans-serif; letter-spacing: .04em; color: inherit; opacity: .6;
  transition: background-color .25s, color .25s, opacity .25s;
}
.lang button:hover { opacity: 1; }
.lang button[aria-pressed="true"] { background: #2A2523; color: #fff; opacity: 1; }
.lang--dark { border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .06); }
.lang--dark button[aria-pressed="true"] { background: #F4ECE4; color: #2A2523; }

/* Chinese: fall back to good system fonts for characters */
:lang(zh-Hans) body, :lang(zh-Hans) h1, :lang(zh-Hans) h2, :lang(zh-Hans) h3, :lang(zh-Hans) button {
  font-family: "Nunito Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
  letter-spacing: 0;
}

/* ---------- PLAYFUL CTA BUTTONS ---------- */
.cta { overflow: visible; }
/* leave room above buttons whose doodle buddy pops up */
.btn-row:has(.cta-buddy), .btns:has(.cta-buddy) { margin-top: 58px; }
.paper-form .cta:has(.cta-buddy), .form .cta:has(.cta-buddy) { margin-top: 46px; }
.cta-eyes { position: relative; display: inline-flex; gap: 2px; margin-left: 8px; vertical-align: middle; }
.cta-eye {
  width: 17px; height: 17px; border-radius: 50%; background: #fff;
  box-shadow: inset 0 0 0 1.5px #2A2523;
  display: grid; place-items: center; transition: transform .12s;
}
.cta-eye i { width: 8px; height: 8px; border-radius: 50%; background: #2A2523; transition: transform .08s linear; }
.cta-eyes.is-blink .cta-eye { transform: scaleY(.1); }
.cta:hover .cta-eye { transform: scale(1.12); }

.cta-buddy {
  position: absolute; left: 50%; bottom: 62%; width: 96px; height: auto; z-index: -3;
  fill: none; stroke: #2A2523; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round;
  transform: translate(-50%, 55%) scale(.7); opacity: 0;
  transition: transform .5s cubic-bezier(.3, 1.5, .5, 1), opacity .25s;
  pointer-events: none;
}
.cta-buddy .f { fill: #fff; }
.cta-buddy .d { fill: #2A2523; stroke: none; }
.cta:hover .cta-buddy, .cta:focus-visible .cta-buddy { transform: translate(-50%, 0) scale(1); opacity: 1; }
.cta-buddy__arm { transform-origin: 84px 64px; transform-box: view-box; }
.cta:hover .cta-buddy__arm { animation: buddyWave .6s ease-in-out .35s infinite alternate; }
@keyframes buddyWave { from { transform: rotate(-10deg); } to { transform: rotate(14deg); } }
.cta-buddy__x { stroke-dasharray: 40; stroke-dashoffset: 40; transition: stroke-dashoffset .5s .35s; }
.cta:hover .cta-buddy__x { stroke-dashoffset: 0; }

.cta-sparks {
  position: absolute; inset: -18px -26px; width: calc(100% + 52px); height: calc(100% + 36px);
  fill: none; stroke: #2A2523; stroke-width: 1.6; stroke-linejoin: round; pointer-events: none; z-index: -3;
}
.cta-sparks > * { stroke-dasharray: 60; stroke-dashoffset: 60; transition: stroke-dashoffset .6s cubic-bezier(.2,.8,.2,1); }
.cta-sparks > *:nth-child(2) { transition-delay: .06s; }
.cta-sparks > *:nth-child(3) { transition-delay: .12s; }
.cta-sparks > *:nth-child(4), .cta-sparks > *:nth-child(5) { transition-delay: .18s; }
.cta:hover .cta-sparks > * { stroke-dashoffset: 0; }

.cta-bit { position: fixed; z-index: 9998; width: 12px; height: 12px; pointer-events: none; }
.cta-bit--0 { border-radius: 50%; }
.cta-bit--1 { border-radius: 999px 999px 2px 2px; }
.cta-bit--2 { border-radius: 58% 42% 55% 45% / 48% 60% 40% 52%; width: 14px; }

@media (prefers-reduced-motion: reduce) {
  .cta-buddy, .cta-sparks > * { transition: none; }
}

/* ---------- white line doodles drawn over photos ---------- */
.doodle { position: absolute; pointer-events: none; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible;
  filter: drop-shadow(0 1px 1px rgba(42, 37, 35, .25)); }
.doodle > * { stroke-dasharray: 220; stroke-dashoffset: 220; animation: doodleDraw 1.4s cubic-bezier(.2,.8,.2,1) forwards; }
.doodle > *:nth-child(2) { animation-delay: .15s; }
.doodle > *:nth-child(3), .doodle > *:nth-child(4), .doodle > *:nth-child(5) { animation-delay: .35s; }
.doodle > *:nth-child(6), .doodle > *:nth-child(7) { animation-delay: .5s; }
.doodle > *:nth-child(8), .doodle > *:nth-child(9) { animation-delay: .65s; }
@keyframes doodleDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .doodle > * { animation: none; stroke-dashoffset: 0; } }

/* fruit on buttons: tilts and hops on hover */
.cta-fruit { width: 36px; height: 36px; object-fit: contain; margin: -10px -6px -10px 8px; vertical-align: middle; position: relative; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.cta:hover .cta-fruit { transform: rotate(-16deg) translateY(-3px) scale(1.18); }
.cta:active .cta-fruit { transform: rotate(10deg) scale(.95); }
.paper-btn > span, .pill-btn > span { display: inline-flex; align-items: center; }
.lang button { white-space: nowrap; }

/* language toggle: outlined pills, same language as the buttons */
.lang { gap: 4px; padding: 0; border: 0; background: none; }
.lang button { border: 1.5px solid currentColor; opacity: .55; padding: 5px 10px; }
.lang button:hover { opacity: .9; }
.lang button[aria-pressed="true"] { opacity: 1; background: #2A2523; border-color: #2A2523; color: #fff; }
.lang--dark { background: none; }
.lang--dark button[aria-pressed="true"] { background: #F4ECE4; border-color: #F4ECE4; color: #2A2523; }