:root {
  --bg-1: #fff9fd;
  --bg-2: #fbf7ff;
  --card: rgba(255, 255, 255, 0.76);
  --text: #5d2a50;
  --muted: #895a79;
  --accent: #d94f8f;
  --accent-2: #ff8ac2;
  --stroke: rgba(214, 112, 177, 0.24);
  --shadow: 0 22px 64px rgba(176, 91, 145, 0.12), 0 8px 28px rgba(255, 182, 193, 0.1);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: "Manrope", sans-serif;
  color: var(--text);
  background:
    radial-gradient(circle at 50% 24%, rgba(255, 192, 220, 0.22) 0%, rgba(255, 255, 255, 0) 46%),
    radial-gradient(780px 420px at -4% 30%, rgba(255, 191, 220, 0.26), transparent 68%),
    radial-gradient(760px 420px at 104% 68%, rgba(223, 205, 252, 0.2), transparent 70%),
    linear-gradient(155deg, var(--bg-1), #fffdfd 46%, var(--bg-2));
  display: grid;
  place-items: center;
  overflow-x: hidden;
  padding: 0;
  -webkit-touch-callout: none;
  user-select: none;
}

img,
a,
button {
  -webkit-user-drag: none;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(110deg, transparent 0 26%, rgba(255, 255, 255, 0.34) 42%, transparent 58%),
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0 1px, transparent 1px 8px);
  opacity: 0.32;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(145, 79, 123, 0.07) 0 0.5px, transparent 0.8px),
    radial-gradient(circle at 70% 65%, rgba(145, 79, 123, 0.05) 0 0.45px, transparent 0.75px);
  background-size: 18px 18px, 22px 22px;
  opacity: 0.16;
}

.bg-shape {
  position: fixed;
  width: 46vmax;
  height: 46vmax;
  border-radius: 50%;
  filter: blur(54px);
  opacity: 0.24;
  pointer-events: none;
  z-index: -1;
}

.bg-shape-top {
  top: -15vmax;
  left: -10vmax;
  background: linear-gradient(135deg, #f7c7dd, #d8c9f8);
}

.bg-shape-bottom {
  right: -12vmax;
  bottom: -18vmax;
  background: linear-gradient(135deg, #f4d6bc, #cce0ff);
}

.butterfly-field {
  position: fixed;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.touch-butterfly-field {
  position: fixed;
  inset: 0;
  z-index: 7;
  overflow: hidden;
  pointer-events: none;
}

.butterfly {
  --size: 22px;
  --opacity: 0.2;
  --duration: 34s;
  --delay: 0s;
  --start-x: -10vw;
  --start-y: 20vh;
  --float-x-1: 22vw;
  --float-y-1: 14vh;
  --mid-x: 48vw;
  --mid-y: 12vh;
  --float-x-2: 78vw;
  --float-y-2: 32vh;
  --end-x: 110vw;
  --end-y: 28vh;
  --rotate: 0deg;
  --mid-rotate: 5deg;
  --end-rotate: -4deg;
  --blur: 0px;
  --glow: 0 0 12px rgba(255, 105, 180, 0.24);
  --depth-scale: 1;
  --scale-soft: 0.96;
  --scale-bright: 1.04;
  --flap-duration: 1.36s;
  --flap-delay: -0.1s;
  --body-drift: 5.8s;
  --body-delay: -0.4s;
  --face-start: 1;
  --face-1: 1;
  --face-mid: 1;
  --face-2: 1;
  --face-end: 1;
  --turn-1: 1;
  --turn-2: 1;
  --turn-3: 1;
  --heading-start: 90deg;
  --heading-1: 90deg;
  --heading-mid: 90deg;
  --heading-2: -90deg;
  --heading-end: -90deg;
  --heading-turn-1: 90deg;
  --heading-turn-2: 0deg;
  --heading-turn-3: -90deg;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size);
  height: calc(var(--size) * 0.84);
  opacity: var(--opacity);
  perspective: 180px;
  transform-style: preserve-3d;
  filter: blur(var(--blur)) drop-shadow(var(--glow));
  transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--rotate)) scale(var(--depth-scale));
  animation: flyButterfly var(--duration) ease-in-out var(--delay) infinite;
}

.butterfly svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-box: fill-box;
  transform-origin: center;
  transform-style: preserve-3d;
  animation: butterflyBodyDrift var(--body-drift) ease-in-out var(--body-delay) infinite;
}

.butterfly .left-wing,
.butterfly .right-wing,
.butterfly .body {
  transform-box: view-box;
}

.butterfly .left-wing {
  transform-origin: 60px 52px;
  animation: flapLeft var(--flap-duration) ease-in-out infinite;
}

.butterfly .right-wing {
  transform-origin: 60px 52px;
  animation: flapRight var(--flap-duration) ease-in-out var(--flap-delay) infinite;
}

.butterfly .left-wing path,
.butterfly .right-wing path {
  fill: rgba(255, 233, 244, 0.08);
  stroke: #ee6fa9;
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.butterfly .body path {
  fill: none;
  stroke: #c93f82;
  stroke-width: 3.7;
  stroke-linecap: round;
}

.butterfly .body circle {
  fill: #ee6fa9;
}

.touch-butterfly {
  --x: 50vw;
  --y: 50vh;
  --tx: 40px;
  --ty: -90px;
  --r: 18deg;
  --s: 1;
  position: absolute;
  left: 0;
  top: 0;
  width: calc(18px * var(--s));
  height: calc(15px * var(--s));
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 10px rgba(255, 105, 180, 0.24));
  transform: translate3d(var(--x), var(--y), 0) rotate(0deg) scale(0.72);
  animation: touchButterflyFly 1.9s ease-out forwards;
}

.touch-butterfly svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  animation: touchButterflyTilt 680ms ease-in-out infinite;
}

.touch-butterfly .left-wing,
.touch-butterfly .right-wing,
.touch-butterfly .body {
  transform-box: view-box;
}

.touch-butterfly .left-wing {
  transform-origin: 60px 52px;
  animation: flapLeft 520ms ease-in-out infinite;
}

.touch-butterfly .right-wing {
  transform-origin: 60px 52px;
  animation: flapRight 520ms ease-in-out -60ms infinite;
}

.touch-butterfly .left-wing path,
.touch-butterfly .right-wing path {
  fill: rgba(255, 233, 244, 0.1);
  stroke: #ee6fa9;
  stroke-width: 4.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.touch-butterfly .body path {
  fill: none;
  stroke: #c93f82;
  stroke-width: 3.7;
  stroke-linecap: round;
}

.touch-butterfly .body circle {
  fill: #ee6fa9;
}

.butterfly-1 {
  --size: 26px;
  --opacity: 0.24;
  --duration: 58s;
  --delay: -8s;
  --blur: 0px;
  --glow: 0 0 12px rgba(255, 182, 213, 0.24);
  --depth-scale: 1.06;
  --scale-soft: 1.02;
  --scale-bright: 1.1;
  --flap-duration: 1.05s;
  --flap-delay: -0.08s;
  --body-drift: 5.2s;
  --body-delay: -1.2s;
  --rotate: -14deg;
  --mid-rotate: -7deg;
  --end-rotate: 8deg;
  --face-start: 1;
  --face-1: 1;
  --face-mid: 1;
  --face-2: 1;
  --face-end: 1;
  --turn-1: 1;
  --turn-2: 1;
  --turn-3: 1;
  --heading-start: 86deg;
  --heading-1: 78deg;
  --heading-mid: 94deg;
  --heading-2: 82deg;
  --heading-end: 96deg;
  --heading-turn-1: 88deg;
  --heading-turn-2: 90deg;
  --heading-turn-3: 92deg;
  --start-x: -12vw;
  --start-y: 9vh;
  --float-x-1: 18vw;
  --float-y-1: 12vh;
  --mid-x: 42vw;
  --mid-y: 8vh;
  --float-x-2: 72vw;
  --float-y-2: 16vh;
  --end-x: 112vw;
  --end-y: 11vh;
}

.butterfly-2 {
  --size: 18px;
  --opacity: 0.18;
  --duration: 72s;
  --delay: -18s;
  --blur: 0.6px;
  --glow: 0 0 9px rgba(255, 182, 213, 0.16);
  --depth-scale: 0.92;
  --scale-soft: 0.88;
  --scale-bright: 0.96;
  --flap-duration: 1.22s;
  --flap-delay: -0.1s;
  --body-drift: 6.4s;
  --body-delay: -2.4s;
  --rotate: 12deg;
  --mid-rotate: 4deg;
  --end-rotate: -8deg;
  --face-start: 1;
  --face-1: 1;
  --face-mid: 1;
  --face-2: 1;
  --face-end: 1;
  --turn-1: 1;
  --turn-2: 1;
  --turn-3: 1;
  --heading-start: -96deg;
  --heading-1: -88deg;
  --heading-mid: -104deg;
  --heading-2: -92deg;
  --heading-end: -86deg;
  --heading-turn-1: -92deg;
  --heading-turn-2: -96deg;
  --heading-turn-3: -90deg;
  --start-x: 108vw;
  --start-y: 12vh;
  --float-x-1: 82vw;
  --float-y-1: 25vh;
  --mid-x: 58vw;
  --mid-y: 36vh;
  --float-x-2: 32vw;
  --float-y-2: 49vh;
  --end-x: -12vw;
  --end-y: 60vh;
}

.butterfly-3 {
  --size: 18px;
  --opacity: 0.13;
  --duration: 84s;
  --delay: -29s;
  --blur: 1.1px;
  --glow: 0 0 8px rgba(255, 182, 213, 0.12);
  --depth-scale: 0.78;
  --scale-soft: 0.74;
  --scale-bright: 0.82;
  --flap-duration: 1.38s;
  --flap-delay: -0.12s;
  --body-drift: 7.2s;
  --body-delay: -3.1s;
  --rotate: -8deg;
  --mid-rotate: 6deg;
  --end-rotate: -5deg;
  --face-start: 1;
  --face-1: 1;
  --face-mid: 1;
  --face-2: 1;
  --face-end: 1;
  --turn-1: 1;
  --turn-2: 1;
  --turn-3: 1;
  --heading-start: 140deg;
  --heading-1: 5deg;
  --heading-mid: 350deg;
  --heading-2: 10deg;
  --heading-end: 210deg;
  --heading-turn-1: 2deg;
  --heading-turn-2: 0deg;
  --heading-turn-3: 110deg;
  --start-x: -10vw;
  --start-y: 72vh;
  --float-x-1: 10vw;
  --float-y-1: 64vh;
  --mid-x: 7vw;
  --mid-y: 48vh;
  --float-x-2: 14vw;
  --float-y-2: 34vh;
  --end-x: -12vw;
  --end-y: 22vh;
}

.butterfly-4 {
  --size: 21px;
  --opacity: 0.2;
  --duration: 66s;
  --delay: -4s;
  --blur: 0.2px;
  --glow: 0 0 11px rgba(255, 182, 213, 0.2);
  --depth-scale: 1;
  --scale-soft: 0.96;
  --scale-bright: 1.04;
  --flap-duration: 1.14s;
  --flap-delay: -0.09s;
  --body-drift: 6s;
  --body-delay: -1.8s;
  --rotate: 18deg;
  --mid-rotate: 9deg;
  --end-rotate: -6deg;
  --face-start: 1;
  --face-1: 1;
  --face-mid: 1;
  --face-2: 1;
  --face-end: 1;
  --turn-1: 1;
  --turn-2: 1;
  --turn-3: 1;
  --heading-start: -90deg;
  --heading-1: -94deg;
  --heading-mid: -88deg;
  --heading-2: -92deg;
  --heading-end: -90deg;
  --heading-turn-1: -90deg;
  --heading-turn-2: -90deg;
  --heading-turn-3: -90deg;
  --start-x: 106vw;
  --start-y: 94vh;
  --float-x-1: 84vw;
  --float-y-1: 96vh;
  --mid-x: 78vw;
  --mid-y: 94vh;
  --float-x-2: 58vw;
  --float-y-2: 98vh;
  --end-x: -12vw;
  --end-y: 96vh;
}

.butterfly-5 {
  --size: 18px;
  --opacity: 0.14;
  --duration: 92s;
  --delay: -38s;
  --blur: 1.4px;
  --glow: 0 0 7px rgba(255, 182, 213, 0.1);
  --depth-scale: 0.7;
  --scale-soft: 0.66;
  --scale-bright: 0.73;
  --flap-duration: 1.52s;
  --flap-delay: -0.13s;
  --body-drift: 7.8s;
  --body-delay: -4.4s;
  --rotate: 7deg;
  --mid-rotate: -4deg;
  --end-rotate: 6deg;
  --face-start: 1;
  --face-1: 1;
  --face-mid: 1;
  --face-2: 1;
  --face-end: 1;
  --turn-1: 1;
  --turn-2: 1;
  --turn-3: 1;
  --heading-start: 174deg;
  --heading-1: 182deg;
  --heading-mid: 170deg;
  --heading-2: 184deg;
  --heading-end: 176deg;
  --heading-turn-1: 178deg;
  --heading-turn-2: 176deg;
  --heading-turn-3: 180deg;
  --start-x: 74vw;
  --start-y: -8vh;
  --float-x-1: 88vw;
  --float-y-1: 14vh;
  --mid-x: 90vw;
  --mid-y: 27vh;
  --float-x-2: 92vw;
  --float-y-2: 42vh;
  --end-x: 86vw;
  --end-y: 108vh;
}

.butterfly-6 {
  --size: 18px;
  --opacity: 0.14;
  --duration: 86s;
  --delay: -22s;
  --blur: 0.9px;
  --glow: 0 0 8px rgba(255, 182, 213, 0.12);
  --depth-scale: 0.82;
  --scale-soft: 0.78;
  --scale-bright: 0.86;
  --flap-duration: 1.35s;
  --flap-delay: -0.11s;
  --body-drift: 6.8s;
  --body-delay: -2.9s;
  --rotate: -10deg;
  --mid-rotate: 5deg;
  --end-rotate: -6deg;
  --face-start: 1;
  --face-1: 1;
  --face-mid: 1;
  --face-2: 1;
  --face-end: 1;
  --turn-1: 1;
  --turn-2: 1;
  --turn-3: 1;
  --heading-start: 180deg;
  --heading-1: 175deg;
  --heading-mid: 182deg;
  --heading-2: 178deg;
  --heading-end: 205deg;
  --heading-turn-1: 178deg;
  --heading-turn-2: 180deg;
  --heading-turn-3: 192deg;
  --start-x: -9vw;
  --start-y: 36vh;
  --float-x-1: 8vw;
  --float-y-1: 44vh;
  --mid-x: 4vw;
  --mid-y: 58vh;
  --float-x-2: 12vw;
  --float-y-2: 74vh;
  --end-x: -11vw;
  --end-y: 88vh;
}

.butterfly-7 {
  --size: 19px;
  --opacity: 0.19;
  --duration: 76s;
  --delay: -31s;
  --blur: 0.3px;
  --glow: 0 0 10px rgba(255, 182, 213, 0.17);
  --depth-scale: 0.96;
  --scale-soft: 0.92;
  --scale-bright: 1;
  --flap-duration: 1.18s;
  --flap-delay: -0.1s;
  --body-drift: 5.8s;
  --body-delay: -3.6s;
  --rotate: 9deg;
  --mid-rotate: -5deg;
  --end-rotate: 7deg;
  --face-start: 1;
  --face-1: 1;
  --face-mid: 1;
  --face-2: 1;
  --face-end: 1;
  --turn-1: 1;
  --turn-2: 1;
  --turn-3: 1;
  --heading-start: -94deg;
  --heading-1: -88deg;
  --heading-mid: -98deg;
  --heading-2: -86deg;
  --heading-end: -92deg;
  --heading-turn-1: -90deg;
  --heading-turn-2: -94deg;
  --heading-turn-3: -88deg;
  --start-x: 108vw;
  --start-y: 8vh;
  --float-x-1: 88vw;
  --float-y-1: 10vh;
  --mid-x: 76vw;
  --mid-y: 18vh;
  --float-x-2: 84vw;
  --float-y-2: 27vh;
  --end-x: 70vw;
  --end-y: 36vh;
}

.butterfly-3,
.butterfly-6 {
  display: none;
}

.page {
  width: 100%;
  max-width: 460px;
  padding: 12px 22px;
}

.card {
  position: relative;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--stroke);
  border-radius: 26px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(12px);
  padding: 18px 22px 17px;
  animation: card-reveal 820ms ease both;
}

.card::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.72), transparent 38%),
    radial-gradient(circle at 50% 6%, rgba(255, 214, 236, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 245, 250, 0.08));
  opacity: 0.76;
}

.card > * {
  position: relative;
  z-index: 1;
}

.ornament {
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(214, 112, 177, 0.42), transparent);
}

.ornament-top {
  margin-bottom: 7px;
}

.ornament-bottom {
  margin-top: 16px;
}

.brand-block {
  position: relative;
  text-align: center;
}

.brand-block::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  width: min(232px, 67%);
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255, 221, 239, 0.38), transparent 69%);
  box-shadow: 0 0 80px rgba(255, 182, 193, 0.18);
  filter: blur(10px);
  transform: translateX(-50%);
  pointer-events: none;
}

.logo-shell {
  position: relative;
  display: block;
  width: min(268px, 72%);
  max-width: 100%;
  margin: -8px auto -16px;
  opacity: 0;
  animation: fade-up 560ms ease 80ms forwards;
}

.logo-shell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 33%, rgba(255, 255, 255, 0.56) 45%, rgba(255, 144, 198, 0.26) 50%, transparent 63%);
  -webkit-mask-image: url("Design sem nome (2).png");
  mask-image: url("Design sem nome (2).png");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  mix-blend-mode: screen;
  opacity: 0;
  transform: translateX(-42%);
  animation: logo-reflection 7.5s ease-in-out 1.4s infinite;
}

.brand-mark {
  display: block;
  width: 100%;
  border-radius: 0;
  object-fit: contain;
  filter:
    drop-shadow(0 9px 16px rgba(190, 86, 154, 0.13))
    drop-shadow(0 0 15px rgba(255, 221, 239, 0.45))
    saturate(1.08)
    contrast(1.05);
}

h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.68rem, 7.5vw, 3.54rem);
  line-height: 0.96;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: 0.015em;
  color: #d94f8f;
  background: linear-gradient(
    180deg,
    #ff66a7 0%,
    #ffc1dc 18%,
    #ff7fba 40%,
    #cf4987 72%,
    #ff72ad 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 12px rgba(255, 105, 180, 0.16);
}

.subtitle {
  margin: 0 0 17px;
  color: rgba(137, 90, 121, 0.88);
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.004em;
}

.links {
  display: grid;
  gap: 10px;
}

.link-btn {
  position: relative;
  overflow: hidden;
  text-decoration: none;
  color: var(--text);
  border: 1px solid rgba(214, 112, 177, 0.24);
  border-radius: 15px;
  padding: 14px 17px;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.72), transparent 38%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.66), rgba(255, 246, 251, 0.5));
  box-shadow: 0 10px 24px rgba(190, 100, 160, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.74);
  backdrop-filter: blur(8px);
  display: grid;
  gap: 3px;
  transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease, background 240ms ease;
  transform-origin: center;
  opacity: 0;
  animation: fade-up 550ms ease forwards;
}

.link-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 0 18%, rgba(255, 255, 255, 0.54) 42%, transparent 66%);
  opacity: 0;
  transform: translateX(-38%);
  transition: opacity 260ms ease, transform 420ms ease;
}

.link-btn:first-child {
  border-color: rgba(202, 79, 148, 0.48);
  background:
    linear-gradient(115deg, rgba(255, 255, 255, 0.78), transparent 38%),
    linear-gradient(180deg, rgba(255, 192, 220, 0.2), rgba(255, 255, 255, 0.58));
  box-shadow: 0 14px 34px rgba(199, 101, 169, 0.14), 0 0 26px rgba(255, 205, 231, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

.link-btn:nth-child(2) {
  border-color: rgba(214, 112, 177, 0.31);
  box-shadow: 0 11px 26px rgba(190, 100, 160, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.link-btn:nth-child(1) { animation-delay: 160ms; }
.link-btn:nth-child(2) { animation-delay: 240ms; }
.link-btn:nth-child(3) { animation-delay: 320ms; }
.link-btn:nth-child(4) { animation-delay: 400ms; }

.link-btn span {
  font-weight: 700;
  font-size: 0.99rem;
  letter-spacing: 0.002em;
  position: relative;
  z-index: 1;
}

.link-btn small {
  color: rgba(132, 82, 115, 0.82);
  font-size: 0.81rem;
  position: relative;
  z-index: 1;
}

.link-btn:hover,
.link-btn:focus-visible {
  transform: translateY(-4px) scale(1.008);
  border-color: rgba(202, 79, 148, 0.46);
  box-shadow: 0 16px 32px rgba(190, 100, 160, 0.13), 0 0 24px rgba(255, 214, 236, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.82);
  outline: none;
}

.link-btn:hover::before,
.link-btn:focus-visible::before {
  opacity: 1;
  transform: translateX(34%);
}

.signature {
  text-align: center;
  margin: 14px 0 3px;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.04rem;
  color: rgba(154, 100, 139, 0.78);
  letter-spacing: 0.01em;
}

@keyframes card-reveal {
  from {
    transform: translateY(22px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fade-up {
  from {
    transform: translateY(14px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes logo-reflection {
  0%,
  44% {
    opacity: 0;
    transform: translateX(-42%);
  }
  54% {
    opacity: 0.42;
  }
  68% {
    opacity: 0;
    transform: translateX(42%);
  }
  100% {
    opacity: 0;
    transform: translateX(42%);
  }
}

@keyframes flyButterfly {
  0% {
    transform: translate3d(var(--start-x), var(--start-y), 0) rotate(var(--heading-start)) scale(var(--scale-soft)) scaleX(var(--face-start));
  }
  8% {
    transform: translate3d(calc(var(--float-x-1) - 5vw), calc(var(--float-y-1) + 2vh), 0) rotate(calc(var(--heading-1) + 8deg)) scale(var(--depth-scale)) scaleX(var(--face-1));
  }
  12% {
    transform: translate3d(var(--float-x-1), calc(var(--float-y-1) - 3vh), 0) rotate(calc(var(--heading-1) - 6deg)) scale(var(--depth-scale)) scaleX(var(--face-1));
  }
  18% {
    transform: translate3d(calc(var(--float-x-1) + 3vw), calc(var(--float-y-1) - 1vh), 0) rotate(calc(var(--heading-1) + 4deg)) scale(var(--depth-scale)) scaleX(var(--face-1));
  }
  24% {
    transform: translate3d(var(--float-x-1), var(--float-y-1), 0) rotate(calc(var(--heading-1) - 5deg)) scale(var(--depth-scale)) scaleX(var(--face-1));
  }
  27% {
    transform: translate3d(calc(var(--float-x-1) + 1vw), calc(var(--float-y-1) + 1vh), 0) rotate(var(--heading-turn-1)) scale(var(--depth-scale)) scaleX(var(--turn-1));
  }
  31% {
    transform: translate3d(calc(var(--mid-x) - 3vw), calc(var(--mid-y) + 2vh), 0) rotate(calc(var(--heading-mid) + 6deg)) scale(var(--scale-bright)) scaleX(var(--face-mid));
  }
  38% {
    transform: translate3d(var(--mid-x), calc(var(--mid-y) + 4vh), 0) rotate(calc(var(--heading-mid) - 8deg)) scale(var(--scale-bright)) scaleX(var(--face-mid));
  }
  50% {
    transform: translate3d(var(--mid-x), var(--mid-y), 0) rotate(var(--heading-mid)) scale(var(--scale-bright)) scaleX(var(--face-mid));
  }
  53% {
    transform: translate3d(calc(var(--mid-x) + 1vw), calc(var(--mid-y) - 1vh), 0) rotate(var(--heading-turn-2)) scale(var(--scale-bright)) scaleX(var(--turn-2));
  }
  56% {
    transform: translate3d(calc(var(--float-x-2) + 4vw), calc(var(--float-y-2) - 7vh), 0) rotate(calc(var(--heading-2) - 7deg)) scale(var(--depth-scale)) scaleX(var(--face-2));
  }
  62% {
    transform: translate3d(var(--float-x-2), calc(var(--float-y-2) - 4vh), 0) rotate(calc(var(--heading-2) + 5deg)) scale(var(--depth-scale)) scaleX(var(--face-2));
  }
  68% {
    transform: translate3d(calc(var(--float-x-2) - 2vw), calc(var(--float-y-2) + 2vh), 0) rotate(calc(var(--heading-2) - 6deg)) scale(var(--depth-scale)) scaleX(var(--face-2));
  }
  74% {
    transform: translate3d(var(--float-x-2), var(--float-y-2), 0) rotate(calc(var(--heading-2) + 7deg)) scale(var(--depth-scale)) scaleX(var(--face-2));
  }
  78% {
    transform: translate3d(calc(var(--float-x-2) + 1vw), calc(var(--float-y-2) - 1vh), 0) rotate(var(--heading-turn-3)) scale(var(--depth-scale)) scaleX(var(--turn-3));
  }
  82% {
    transform: translate3d(calc(var(--end-x) + 4vw), calc(var(--end-y) - 4vh), 0) rotate(calc(var(--heading-end) - 6deg)) scale(var(--scale-soft)) scaleX(var(--face-end));
  }
  88% {
    transform: translate3d(var(--end-x), calc(var(--end-y) + 3vh), 0) rotate(calc(var(--heading-end) + 6deg)) scale(var(--scale-soft)) scaleX(var(--face-end));
  }
  100% {
    transform: translate3d(var(--end-x), var(--end-y), 0) rotate(var(--heading-end)) scale(var(--scale-soft)) scaleX(var(--face-end));
  }
}

@keyframes touchButterflyFly {
  0% {
    opacity: 0;
    transform: translate3d(var(--x), var(--y), 0) rotate(0deg) scale(0.62);
  }
  12% {
    opacity: 0.36;
  }
  54% {
    opacity: 0.3;
    transform: translate3d(calc(var(--x) + var(--tx) * 0.58), calc(var(--y) + var(--ty) * 0.62), 0) rotate(calc(var(--r) * 0.65)) scale(var(--s));
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(var(--x) + var(--tx)), calc(var(--y) + var(--ty)), 0) rotate(var(--r)) scale(calc(var(--s) * 0.9));
  }
}

@keyframes touchButterflyTilt {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotateZ(-2deg);
  }
  50% {
    transform: translate3d(1px, -2px, 0) rotateZ(4deg);
  }
}

@keyframes butterflyBodyDrift {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotateZ(0deg) rotateX(0deg);
  }
  22% {
    transform: translate3d(1.5px, -2px, 0) rotateZ(4deg) rotateX(8deg);
  }
  47% {
    transform: translate3d(-1px, 1px, 0) rotateZ(-3deg) rotateX(-5deg);
  }
  73% {
    transform: translate3d(1px, -1.5px, 0) rotateZ(2deg) rotateX(6deg);
  }
}

@keyframes flapLeft {
  0%,
  100% {
    transform: perspective(120px) rotateY(0deg) rotateZ(-3deg) scaleX(1);
  }
  18% {
    transform: perspective(120px) rotateY(24deg) rotateZ(2deg) scaleX(0.96);
  }
  45% {
    transform: perspective(120px) rotateY(44deg) rotateZ(6deg) scaleX(0.88);
  }
  68% {
    transform: perspective(120px) rotateY(16deg) rotateZ(-5deg) scaleX(0.98);
  }
}

@keyframes flapRight {
  0%,
  100% {
    transform: perspective(120px) rotateY(0deg) rotateZ(3deg) scaleX(1);
  }
  18% {
    transform: perspective(120px) rotateY(-24deg) rotateZ(-2deg) scaleX(0.96);
  }
  45% {
    transform: perspective(120px) rotateY(-44deg) rotateZ(-6deg) scaleX(0.88);
  }
  68% {
    transform: perspective(120px) rotateY(-16deg) rotateZ(5deg) scaleX(0.98);
  }
}

@media (max-width: 420px) {
  .page {
    padding: 5px 13px;
  }

  .card {
    border-radius: 24px;
    padding: 15px 20px 15px;
  }

  .ornament-top {
    margin-bottom: 6px;
  }

  .brand-block::before {
    top: 3px;
    width: min(218px, 74%);
  }

  .link-btn {
    border-radius: 14px;
    padding: 12px 15px;
  }

  .logo-shell {
    width: min(236px, 78%);
    margin: -8px auto -15px;
  }

  h1 {
    font-size: clamp(2.48rem, 11.4vw, 3.04rem);
    margin-bottom: 6px;
  }

  .subtitle {
    margin-bottom: 18px;
    font-size: 0.9rem;
  }

  .links {
    gap: 10px;
  }

  .signature {
    margin-top: 14px;
  }

  .butterfly {
    --opacity: 0.2;
  }

  .butterfly-3,
  .butterfly-5,
  .butterfly-6 {
    display: none;
  }

  .butterfly-1 {
    --size: 24px;
    --opacity: 0.24;
    --duration: 62s;
    --delay: -16s;
    --heading-start: 88deg;
    --heading-1: 82deg;
    --heading-mid: 96deg;
    --heading-2: 84deg;
    --heading-end: 92deg;
    --heading-turn-1: 90deg;
    --heading-turn-2: 88deg;
    --heading-turn-3: 90deg;
    --start-x: -16vw;
    --start-y: 24vh;
    --float-x-1: 18vw;
    --float-y-1: 20vh;
    --mid-x: 54vw;
    --mid-y: 31vh;
    --float-x-2: 82vw;
    --float-y-2: 43vh;
    --end-x: 116vw;
    --end-y: 36vh;
  }

  .butterfly-2 {
    --size: 18px;
    --opacity: 0.2;
    --duration: 76s;
    --delay: -38s;
    --heading-start: -92deg;
    --heading-1: -98deg;
    --heading-mid: -84deg;
    --heading-2: -96deg;
    --heading-end: -88deg;
    --heading-turn-1: -92deg;
    --heading-turn-2: -90deg;
    --heading-turn-3: -94deg;
    --start-x: 116vw;
    --start-y: 52vh;
    --float-x-1: 84vw;
    --float-y-1: 46vh;
    --mid-x: 48vw;
    --mid-y: 58vh;
    --float-x-2: 18vw;
    --float-y-2: 70vh;
    --end-x: -16vw;
    --end-y: 64vh;
  }

  .butterfly-4 {
    --size: 22px;
    --opacity: 0.2;
    --duration: 68s;
    --delay: -24s;
    --heading-start: -92deg;
    --heading-1: -88deg;
    --heading-mid: -96deg;
    --heading-2: -90deg;
    --heading-end: -94deg;
    --heading-turn-1: -90deg;
    --heading-turn-2: -92deg;
    --heading-turn-3: -90deg;
    --start-x: 104vw;
    --start-y: 88vh;
    --float-x-1: 82vw;
    --float-y-1: 92vh;
    --mid-x: 52vw;
    --mid-y: 96vh;
    --float-x-2: 18vw;
    --float-y-2: 90vh;
    --end-x: -12vw;
    --end-y: 94vh;
  }

  .butterfly-7 {
    --size: 18px;
    --opacity: 0.18;
    --duration: 82s;
    --delay: -46s;
    --heading-start: 178deg;
    --heading-1: 184deg;
    --heading-mid: 172deg;
    --heading-2: 186deg;
    --heading-end: 180deg;
    --heading-turn-1: 180deg;
    --heading-turn-2: 178deg;
    --heading-turn-3: 182deg;
    --start-x: 62vw;
    --start-y: -10vh;
    --float-x-1: 48vw;
    --float-y-1: 18vh;
    --mid-x: 60vw;
    --mid-y: 44vh;
    --float-x-2: 42vw;
    --float-y-2: 72vh;
    --end-x: 54vw;
    --end-y: 112vh;
  }
}