/* Blixtflow – bransch: skönhetskliniker och hudvård (prefix bty-). Spa-känsla: mjukt rosaviolett ljus,
   svävande glasdroppar och lugna, mjuka rörelser. ind-beauty.js styr dagens klocka (--t), kalkylatorn
   och frågorna. Bygger på ai.css. */
.page-beauty { --blush: #F7E6EF; --nude: #F3E3D8; --rose: #E9B9CF; --pearl: #FBF7FC; }

/* ==========================================================================
   1. Hjälten
   ========================================================================== */
.bty-hero { background: radial-gradient(90% 70% at 85% 10%, rgba(233, 185, 207, .22), transparent 60%), var(--natt); }
.bty-hero__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.bty-hero__bg i { position: absolute; border-radius: 50%; filter: blur(60px); }
.bty-hero__bg i:nth-child(1) { right: -10%; top: -20%; width: 52vw; height: 52vw; background: radial-gradient(circle, rgba(233, 185, 207, .35), transparent 65%); }
.bty-hero__bg i:nth-child(2) { left: -15%; bottom: -30%; width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(155, 93, 229, .35), transparent 65%); }
.bty-hero__bg i:nth-child(3) { left: 40%; top: 30%; width: 22vw; height: 22vw; background: radial-gradient(circle, rgba(242, 250, 163, .08), transparent 65%); }
.motion .bty-hero__bg i:nth-child(1) { animation: drift-a 16s ease-in-out infinite alternate; }
.motion .bty-hero__bg i:nth-child(2) { animation: drift-b 20s ease-in-out infinite alternate; }
.bty-drops { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.bty-drops i { position: absolute; left: calc(6% + var(--i) * 10.5%); bottom: -60px; width: calc(10px + (var(--i) * 7 % 5) * 6px); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, .9), rgba(255, 255, 255, .15) 22%, rgba(233, 185, 207, .18) 60%, rgba(233, 185, 207, .05)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); opacity: .7; }
.motion .bty-drops i { animation: bty-rise calc(14s + var(--i) * 1.7s) linear infinite; animation-delay: calc(var(--i) * -2.3s); }
@media (prefers-reduced-motion: reduce) { .bty-drops i { bottom: calc(10% + var(--i) * 9%); } }

.bty-show { position: relative; display: grid; justify-items: end; padding: 12px 0 70px; }
.bty-call { position: relative; z-index: 2; width: min(400px, 100%); padding: 18px; border-radius: 28px; color: var(--ink); background: linear-gradient(160deg, #fff, var(--pearl)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .5), 0 60px 110px -40px rgba(0, 0, 0, .95), 0 30px 90px -30px rgba(233, 185, 207, .6); }
.motion .bty-call { animation: chp-rise 1.2s .2s var(--ease-out) backwards; }
.bty-call__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-2); }
.bty-call__top span:nth-child(2) { display: grid; }
.bty-call__top small { font-size: .74rem; color: var(--muted); }
.bty-call__top b { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.bty-call__pulse { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: var(--ok); }
.bty-call__pulse .ic { width: 19px; height: 19px; }
.motion .bty-call__pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(22, 163, 74, .5); animation: bty-ring 1.8s ease-out infinite; }
.bty-call__top em { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-size: .74rem; font-style: normal; font-weight: 800; color: var(--natt); background: var(--gnista); }
.bty-call__top em .ic { width: 13px; height: 13px; }
.bty-call__lines { display: grid; gap: 8px; padding: 14px 0; }
.bty-line { max-width: 86%; padding: 9px 13px; border-radius: 16px; font-size: .86rem; line-height: 1.4; }
.bty-line--k { justify-self: start; border-bottom-left-radius: 5px; background: var(--blush); }
.bty-line--ai { justify-self: end; border-bottom-right-radius: 5px; color: #fff; background: linear-gradient(135deg, var(--primar-ink), #6a33b0); }
.motion .bty-line { animation: fade-up .55s var(--ease-out) backwards; animation-delay: calc(1.1s + var(--i) * .9s); }
.bty-booked { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 18px; background: #FBFDE3; box-shadow: inset 0 0 0 1px #E9EFA9; }
.bty-booked > span:first-child { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; color: var(--natt); background: var(--gnista); }
.bty-booked .ic { width: 18px; height: 18px; }
.bty-booked span:last-child { display: grid; }
.bty-booked small { font-size: .72rem; color: var(--muted); }
.motion .bty-booked { animation: chp-pop .7s 4.8s var(--spring) backwards; }
.bty-dm { position: absolute; left: 0; top: 40px; z-index: 1; width: min(250px, 60%); padding: 14px; border-radius: 22px; color: var(--ink); background: rgba(255, 255, 255, .94); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .9); transform: rotate(-4deg); }
.motion .bty-dm { animation: bty-float-in 1.2s .7s var(--ease-out) backwards, bty-sway 7s 2s ease-in-out infinite; }
.bty-dm__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .8rem; }
.bty-dm__head i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; color: #fff; background: linear-gradient(45deg, #f9a03f, #e1306c 50%, #833ab4); }
.bty-dm__head .ic { width: 15px; height: 15px; }
.bty-dm__in, .bty-dm__out { padding: 8px 11px; border-radius: 14px; font-size: .78rem; line-height: 1.4; }
.bty-dm__in { background: var(--line-2); }
.bty-dm__out { margin-top: 6px; color: #fff; background: var(--primar-ink); }
.bty-sms { position: absolute; right: 8%; bottom: 26px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: .82rem; font-weight: 700; color: var(--natt); background: #fff; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .7); }
.bty-sms .ic { width: 22px; height: 22px; padding: 4px; border-radius: 50%; color: #fff; background: var(--ok); stroke-width: 3; }
.motion .bty-sms { animation: chp-pop .7s 5.4s var(--spring) backwards; }
.bty-bx { position: absolute; left: 4%; bottom: -10px; z-index: 3; width: 150px; }
@media (max-width: 999px) { .bty-show { justify-items: center; } .bty-dm { left: -4px; top: auto; bottom: 90px; } }
@media (max-width: 599px) {
  .bty-show { padding-bottom: 150px; }
  .bty-dm { width: 64%; bottom: 40px; }
  .bty-bx { left: auto; right: -6px; bottom: -6px; width: 100px; }
  .bty-sms { right: auto; left: 0; bottom: 0; }
}

/* ==========================================================================
   2. En dag på kliniken (--t: 0 morgon → 1 kväll)
   ========================================================================== */
.bty-day { --t: 1; overflow: clip; color: var(--ink); background: var(--pearl); }
.bty-day .lp-pin__sticky { position: relative; isolation: isolate; }
.bty-day__sky { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, #FFF4E8 calc((1 - var(--t)) * 100%), #E8DDF7), var(--pearl) 70%); }
.bty-day__sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #3a1656, rgba(107, 58, 143, .55) 22%, transparent 48%); opacity: calc(max(0, var(--t) - .72) * 3.4); }
.bty-day__sun, .bty-day__moon { position: absolute; top: 12%; width: 90px; height: 90px; border-radius: 50%; }
.bty-day__sun { left: calc(8% + var(--t) * 80%); top: calc(20% - sin(var(--t) * 3.14rad) * 12%); background: radial-gradient(circle, #FFE8A8, #F9C784 60%, transparent 70%); filter: blur(1px); opacity: calc(1 - max(0, var(--t) - .7) * 3.3); }
.bty-day__moon { right: 10%; background: radial-gradient(circle at 35% 35%, #fff, #E4D9F7 60%, transparent 70%); opacity: calc(max(0, var(--t) - .78) * 4.5); }
.bty-day__grid { display: grid; gap: 30px; align-items: center; }
@media (min-width: 1000px) { .bty-day__grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 60px; } }
.bty-clock { margin-top: 20px; font-size: clamp(3.4rem, 9vw, 6.4rem); font-weight: 800; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.bty-clock b { background: linear-gradient(120deg, var(--natt), var(--primar-ink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.bty-arc { position: relative; height: 8px; margin-top: 14px; border-radius: 99px; background: rgba(44, 14, 61, .08); }
.bty-arc i { position: absolute; inset: 0 auto 0 0; width: calc(var(--t) * 100%); border-radius: inherit; background: linear-gradient(90deg, #F9C784, var(--rose), var(--primar)); }
.bty-saved { display: flex; align-items: center; gap: 14px; margin-top: 22px; }
.bty-saved b { display: grid; place-items: center; min-width: 58px; height: 58px; padding: 0 10px; border-radius: 18px; font-size: 1.8rem; color: var(--natt); background: var(--gnista); box-shadow: 0 16px 30px -14px rgba(44, 14, 61, .5); }
.bty-saved b.is-bump { animation: bump .5s var(--spring); }
.bty-saved span { max-width: 200px; font-size: .92rem; font-weight: 700; color: var(--ink-2); }
.bty-feed { display: grid; gap: 10px; }
.bty-ev { display: grid; grid-template-columns: 52px auto 1fr auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: rgba(255, 255, 255, .55); box-shadow: 0 0 0 1px rgba(44, 14, 61, .06); opacity: .35; transform: translateX(20px) scale(.98); filter: saturate(.4); transition: opacity .5s, transform .6s var(--spring), filter .5s, background-color .4s, box-shadow .4s; }
.bty-ev.is-on { opacity: 1; transform: none; filter: none; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 36px -24px rgba(44, 14, 61, .45); }
.bty-ev.is-now { box-shadow: 0 0 0 2px var(--primar), 0 22px 40px -22px rgba(126, 69, 201, .6); }
.bty-ev time { font-size: .9rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primar-ink); }
.bty-ev__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 11px; color: var(--primar-ink); background: var(--blush); }
.bty-ev__ic .ic { width: 17px; height: 17px; }
.bty-ev h3 { font-size: .95rem; font-weight: 800; }
.bty-ev p { font-size: .84rem; line-height: 1.4; color: var(--muted); }
.bty-ev__tag { padding: 4px 9px; border-radius: 999px; font-size: .78rem; font-weight: 800; color: var(--natt); background: var(--gnista); }
@media (max-width: 999px) {
  .bty-day.is-pinned .bty-day__grid { gap: 14px; }
  .bty-day.is-pinned .bty-day__clockcol .h2 { font-size: 1.4rem; }
  .bty-day.is-pinned .bty-clock { margin-top: 8px; font-size: 3rem; }
  .bty-day.is-pinned .bty-saved { margin-top: 12px; }
  .bty-day.is-pinned .bty-saved b { min-width: 44px; height: 44px; font-size: 1.3rem; }
  .bty-day.is-pinned .bty-ev:not(.is-near) { display: none; }
  .bty-ev { grid-template-columns: 46px 1fr auto; }
  .bty-ev__ic { display: none; }
}

/* ==========================================================================
   3. Kalkylatorn
   ========================================================================== */
.bty-calc { background: radial-gradient(80% 60% at 0% 0%, rgba(233, 185, 207, .16), transparent 60%), linear-gradient(180deg, var(--natt), #321147); }
.bty-calc__card { padding: clamp(20px, 3vw, 30px); border-radius: 28px; color: var(--ink); background: #fff; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); }
.bty-range + .bty-range { margin-top: 18px; }
.bty-range__top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.bty-range label { font-weight: 700; }
.bty-range output { font-size: 1.1rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--primar-ink); }
.bty-range input { --fill: 50%; width: 100%; height: 28px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.bty-range input::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--rose), var(--primar) var(--fill), var(--line-2) var(--fill)); }
.bty-range input::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--rose), var(--primar) var(--fill), var(--line-2) var(--fill)); }
.bty-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px var(--primar), 0 6px 14px -4px rgba(44, 14, 61, .5); transition: transform .2s; }
.bty-range input::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid var(--primar); border-radius: 50%; background: #fff; }
.bty-range input:active::-webkit-slider-thumb { transform: scale(1.15); }
.bty-range input:focus-visible { outline: 3px solid var(--primar); outline-offset: 4px; border-radius: 8px; }
.bty-result { margin-top: 24px; padding: 20px; border-radius: 22px; text-align: center; background: linear-gradient(160deg, var(--blush), #EFE3FA); }
.bty-result__label { font-size: .86rem; font-weight: 700; color: var(--ink-2); }
.bty-result__sum { margin-top: 4px; font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 800; line-height: 1.05; letter-spacing: -.03em; color: var(--natt); }
.bty-result__sum b { font-variant-numeric: tabular-nums; }
.bty-result__sub { margin-top: 4px; font-size: .9rem; color: var(--muted); }
.bty-vs { display: grid; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed rgba(44, 14, 61, .15); }
.bty-vs p { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 6px; font-size: .9rem; }
.bty-vs__ratio b { padding: 3px 12px; border-radius: 999px; font-size: 1.1rem; color: var(--natt); background: var(--gnista); }
.bty-calc__note { margin-top: 14px; font-size: .78rem; line-height: 1.5; color: var(--muted); }

/* ==========================================================================
   4. Receptionisten kan menyn
   ========================================================================== */
.bty-ask { background: linear-gradient(180deg, var(--pearl), #fff); }
.bty-menu { padding: clamp(20px, 3vw, 28px); border-radius: 30px; background: linear-gradient(160deg, #fff, var(--blush)); box-shadow: 0 0 0 1px rgba(233, 185, 207, .5), var(--shadow-2); }
.bty-menu__chat { display: grid; gap: 10px; min-height: 170px; align-content: start; }
.bty-menu__q { justify-self: end; max-width: 80%; padding: 10px 14px; border-radius: 18px 18px 6px 18px; font-weight: 600; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--line); }
.bty-menu__a { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: end; max-width: 92%; }
.bty-menu__a > span:last-child { padding: 11px 15px; border-radius: 18px 18px 18px 6px; line-height: 1.5; color: #fff; background: linear-gradient(135deg, var(--primar-ink), #6a33b0); }
.bty-menu__av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--natt); background: var(--gnista); }
.bty-menu__av .ic { width: 17px; height: 17px; }
.bty-menu.is-swap .bty-menu__q, .bty-menu.is-swap .bty-menu__a { animation: fade-up .5s var(--ease-out) backwards; }
.bty-menu.is-swap .bty-menu__a { animation-delay: .35s; }
.bty-menu.is-typing [data-bty-atext]::after { content: "▍"; margin-left: 2px; animation: caret 1s steps(1) infinite; }
.bty-menu__pick { margin-top: 18px; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.bty-menu__qs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.bty-menu__qs button { padding: 9px 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-size: .88rem; font-weight: 650; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px var(--line); transition: background-color .25s, color .25s, transform .3s var(--spring); }
.bty-menu__qs button:hover { transform: translateY(-2px); }
.bty-menu__qs button[aria-pressed="true"] { color: #fff; background: var(--natt); box-shadow: none; }
.bty-menu__note { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: .82rem; color: var(--muted); }
.bty-menu__note .ic { width: 15px; height: 15px; color: var(--primar-ink); }

/* ==========================================================================
   5. Kanalerna som kretsar kring inkorgen
   ========================================================================== */
.bty-ch { padding-top: clamp(40px, 6vw, 80px); }
.bty-orbit { position: relative; display: grid; place-items: center; max-width: 760px; min-height: 520px; margin-inline: auto; }
.bty-orbit__ring { position: absolute; inset: 0; }
.bty-orbit__ring li { --a: calc(360deg / var(--n) * var(--i) - 90deg); position: absolute; left: 50%; top: 50%; display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px 9px 9px; border-radius: 999px; font-size: .88rem; font-weight: 700; white-space: nowrap; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 14px 30px -18px rgba(44, 14, 61, .5); transform: translate(-50%, -50%) translate(calc(cos(var(--a)) * 330px), calc(sin(var(--a)) * 230px)); }
.bty-orbit__ring span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--primar-ink); background: var(--blush); }
.bty-orbit__ring .ic { width: 15px; height: 15px; }
.reveal-on .bty-orbit:not(.is-in) .bty-orbit__ring li { opacity: 0; transform: translate(-50%, -50%) scale(.6); }
.reveal-on .bty-orbit.is-in .bty-orbit__ring li { transition: opacity .6s, transform 1s var(--spring); transition-delay: calc(var(--i) * .08s); }
.motion .bty-orbit.is-in .bty-orbit__ring li span { animation: bob 5s ease-in-out infinite; animation-delay: calc(var(--i) * -.7s); }
.bty-inbox { position: relative; z-index: 1; width: min(340px, 100%); padding: 16px; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 40px 80px -30px rgba(44, 14, 61, .45); }
.bty-inbox__h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.bty-inbox__h img { padding: 3px; border-radius: 7px; background: var(--ljus); }
.bty-inbox__h span { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: var(--natt); background: var(--gnista); }
.bty-inbox__row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 6px; border-top: 1px solid var(--line-2); }
.bty-inbox__row i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; color: var(--primar-ink); background: var(--blush); }
.bty-inbox__row .ic { width: 15px; height: 15px; }
.bty-inbox__row span { display: grid; min-width: 0; }
.bty-inbox__row b { font-size: .86rem; }
.bty-inbox__row small { overflow: hidden; font-size: .78rem; white-space: nowrap; text-overflow: ellipsis; color: var(--muted); }
.reveal-on .bty-orbit.is-in .bty-inbox__row { animation: fade-up .5s var(--ease-out) backwards; animation-delay: calc(.7s + var(--i) * .15s); }
@media (max-width: 760px) {
  .bty-orbit { min-height: 0; gap: 22px; }
  .bty-orbit__ring { position: static; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
  .bty-orbit__ring li, .reveal-on .bty-orbit:not(.is-in) .bty-orbit__ring li { position: static; transform: none; }
}

/* ==========================================================================
   6. Bekräftelser
   ========================================================================== */
.bty-conf { background: radial-gradient(70% 60% at 100% 0%, rgba(233, 185, 207, .14), transparent 60%), linear-gradient(180deg, var(--natt), #321147); }
.bty-steps { position: relative; display: grid; gap: 16px; max-width: 1000px; margin-inline: auto; }
@media (min-width: 860px) { .bty-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bty-steps::before { content: ""; position: absolute; left: 12%; right: 12%; top: 22px; height: 2px; background: linear-gradient(90deg, transparent, rgba(233, 185, 207, .5), transparent); } }
.bty-steps li { position: relative; padding: 20px; border-radius: 24px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.bty-steps small { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 800; color: var(--natt); background: var(--rose); }
.bty-steps h3 { margin-top: 12px; font-size: 1.1rem; font-weight: 800; }
.bty-bubble { margin-top: 12px; padding: 12px 14px; border-radius: 18px 18px 18px 6px; font-size: .9rem; line-height: 1.45; color: var(--ink); background: #fff; }
.bty-bubble--in { border-radius: 18px 18px 6px 18px; color: #fff; background: var(--primar-ink); }

/* ==========================================================================
   7. Tryggt
   ========================================================================== */
.bty-trust__grid { display: grid; gap: 14px; max-width: 1100px; margin-inline: auto; }
@media (min-width: 640px) { .bty-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .bty-trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bty-trust__grid li { padding: 24px; border-radius: 26px; background: linear-gradient(170deg, #fff, var(--pearl)); box-shadow: 0 0 0 1px var(--line), var(--shadow-1); transition: transform .4s var(--spring); }
.bty-trust__grid li:hover { transform: translateY(-4px); }
.bty-trust__grid span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 14px; border-radius: 16px; color: var(--natt); background: linear-gradient(135deg, var(--blush), var(--rose)); }
.bty-trust__grid .ic { width: 22px; height: 22px; }
.bty-trust__grid h3 { font-size: 1.05rem; font-weight: 800; }
.bty-trust__grid p { margin-top: 4px; font-size: .92rem; color: var(--muted); }
.bty-def { padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); }

@keyframes bty-rise { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .7; } 50% { transform: translateY(-55vh) translateX(18px); } 90% { opacity: .5; } 100% { transform: translateY(-110vh) translateX(-10px); opacity: 0; } }
@keyframes bty-ring { to { box-shadow: 0 0 0 16px rgba(22, 163, 74, 0); } }
@keyframes bty-float-in { from { opacity: 0; transform: translate(-30px, 30px) rotate(-10deg); } }
@keyframes bty-sway { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }