/* Serendipity 2.2 — Doctor Bird: a different gentle visit on each page.
   Watercolor-styled Jamaican streamertail, small flutter, then a quiet perch.
   Pure CSS: no navigation delays, no JavaScript triggers, never blocks links. */
.serendipity-bird-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: clip;
  z-index: 1200;
  contain: layout paint;
}
.serendipity-bird-figure {
  position: absolute;
  right: max(14px, env(safe-area-inset-right));
  bottom: calc(max(13px, env(safe-area-inset-bottom)) + 3px);
  width: clamp(116px, 13vw, 169px);
  aspect-ratio: 4 / 3;
  transform-origin: 72% 72%;
  opacity: 0;
  animation: bird-visit-home 4.25s cubic-bezier(.24,.52,.25,1) .45s both;
}
.serendipity-bird-figure > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.serendipity-bird-figure .bird-wing {
  transform-origin: 50.6% 51.7%;
  animation: bird-wing-flutter .23s ease-in-out .65s 13 alternate both;
}
/* Each page has its own flight contour, but every flight ends in stillness.
   The final .55 scale yields a modest corner companion. */
@keyframes bird-visit-home {
  0%   {transform: translate3d(-60vw,-36vh,0) scale(.78) rotate(-12deg);opacity:0}
  12%  {opacity:.95}
  30%  {transform: translate3d(-48vw,-36vh,0) scale(1) rotate(2deg);opacity:.98}
  47%  {transform: translate3d(-46vw,-38vh,0) scale(.98) rotate(-2deg);opacity:.98}
  75%  {transform: translate3d(-12vw,-13vh,0) scale(.78) rotate(8deg);opacity:.93}
  100% {transform: translate3d(0,0,0) scale(.46) rotate(0);opacity:.68}
}
@keyframes bird-visit-experiences {
  0%   {transform: translate3d(-76vw,-56vh,0) scale(.78) rotate(-12deg);opacity:0}
  14%  {opacity:.95}
  33%  {transform: translate3d(-43vw,-46vh,0) scale(.96) rotate(-2deg);opacity:.97}
  53%  {transform: translate3d(-46vw,-31vh,0) scale(.97) rotate(8deg);opacity:.97}
  75%  {transform: translate3d(-14vw,-18vh,0) scale(.78) rotate(4deg);opacity:.91}
  100% {transform:translate3d(0,0,0) scale(.46) rotate(0);opacity:.68}
}
@keyframes bird-visit-connections {
  0%   {transform:translate3d(66vw,-35vh,0) scale(.85) rotate(10deg);opacity:0}
  14%  {opacity:.95}
  35%  {transform:translate3d(44vw,-45vh,0) scale(.98) rotate(-4deg);opacity:.98}
  55%  {transform:translate3d(32vw,-39vh,0) scale(.96) rotate(8deg);opacity:.98}
  77%  {transform:translate3d(10vw,-15vh,0) scale(.76) rotate(-5deg);opacity:.92}
  100% {transform:translate3d(0,0,0) scale(.46) rotate(0);opacity:.68}
}
@keyframes bird-visit-philosophy {
  0%   {transform:translate3d(-45vw,-55vh,0) scale(.76) rotate(-11deg);opacity:0}
  17%  {opacity:.92}
  33%  {transform:translate3d(-34vw,-48vh,0) scale(.98) rotate(4deg);opacity:.98}
  55%  {transform:translate3d(-34vw,-48vh,0) scale(.94) rotate(-3deg);opacity:.98}
  80%  {transform:translate3d(-7vw,-15vh,0) scale(.75) rotate(5deg);opacity:.88}
  100% {transform:translate3d(0,0,0) scale(.46) rotate(0);opacity:.68}
}
@keyframes bird-visit-villa {
  0%   {transform:translate3d(-40vw,-71vh,0) scale(.69) rotate(-18deg);opacity:0}
  13%  {opacity:.93}
  40%  {transform:translate3d(-48vw,-42vh,0) scale(.99) rotate(7deg);opacity:.98}
  54%  {transform:translate3d(-40vw,-40vh,0) scale(.95) rotate(-4deg);opacity:.98}
  77%  {transform:translate3d(-11vw,-11vh,0) scale(.73) rotate(6deg);opacity:.9}
  100% {transform:translate3d(0,0,0) scale(.46) rotate(0);opacity:.68}
}
@keyframes bird-visit-skyview {
  0%   {transform:translate3d(-78vw,-27vh,0) scale(.65) rotate(-12deg);opacity:0}
  16%  {opacity:.96}
  37%  {transform:translate3d(-46vw,-61vh,0) scale(1) rotate(10deg);opacity:.98}
  54%  {transform:translate3d(-30vw,-51vh,0) scale(.98) rotate(0);opacity:.98}
  78%  {transform:translate3d(-8vw,-13vh,0) scale(.75) rotate(8deg);opacity:.9}
  100% {transform:translate3d(0,0,0) scale(.46) rotate(0);opacity:.68}
}
@keyframes bird-visit-river {
  0%   {transform:translate3d(76vw,-13vh,0) scale(.79) rotate(5deg);opacity:0}
  14%  {opacity:.93}
  35%  {transform:translate3d(49vw,-24vh,0) scale(.98) rotate(-9deg);opacity:.98}
  55%  {transform:translate3d(38vw,-22vh,0) scale(.97) rotate(4deg);opacity:.98}
  77%  {transform:translate3d(12vw,-7vh,0) scale(.74) rotate(-5deg);opacity:.91}
  100% {transform:translate3d(0,0,0) scale(.46) rotate(0);opacity:.68}
}
@keyframes bird-visit-about {
  0%   {transform:translate3d(-71vw,-49vh,0) scale(.79) rotate(-10deg);opacity:0}
  16%  {opacity:.96}
  39%  {transform:translate3d(-42vw,-40vh,0) scale(.97) rotate(4deg);opacity:.98}
  57%  {transform:translate3d(-43vw,-40vh,0) scale(.95) rotate(-4deg);opacity:.98}
  79%  {transform:translate3d(-14vw,-12vh,0) scale(.74) rotate(4deg);opacity:.9}
  100% {transform:translate3d(0,0,0) scale(.46) rotate(0);opacity:.68}
}
@keyframes bird-visit-inquire {
  0%   {transform:translate3d(76vw,-51vh,0) scale(.69) rotate(13deg);opacity:0}
  17%  {opacity:.93}
  44%  {transform:translate3d(41vw,-40vh,0) scale(.96) rotate(-5deg);opacity:.98}
  60%  {transform:translate3d(35vw,-36vh,0) scale(.93) rotate(2deg);opacity:.98}
  79%  {transform:translate3d(12vw,-11vh,0) scale(.73) rotate(-5deg);opacity:.91}
  100% {transform:translate3d(0,0,0) scale(.46) rotate(0);opacity:.68}
}
@keyframes bird-visit-booking {
  0%   {transform:translate3d(-73vw,-37vh,0) scale(.76) rotate(-10deg);opacity:0}
  14%  {opacity:.95}
  43%  {transform:translate3d(-42vw,-47vh,0) scale(.96) rotate(6deg);opacity:.98}
  56%  {transform:translate3d(-41vw,-45vh,0) scale(.96) rotate(-3deg);opacity:.98}
  79%  {transform:translate3d(-10vw,-10vh,0) scale(.73) rotate(6deg);opacity:.9}
  100% {transform:translate3d(0,0,0) scale(.46) rotate(0);opacity:.68}
}
@keyframes bird-visit-thanks {
  0%   {transform:translate3d(-40vw,-52vh,0) scale(.70) rotate(-10deg);opacity:0}
  15%  {opacity:.95}
  45%  {transform:translate3d(-30vw,-44vh,0) scale(.96) rotate(7deg);opacity:.98}
  62%  {transform:translate3d(-30vw,-44vh,0) scale(.94) rotate(-5deg);opacity:.98}
  79%  {transform:translate3d(-10vw,-13vh,0) scale(.75) rotate(6deg);opacity:.9}
  100% {transform:translate3d(0,0,0) scale(.46) rotate(0);opacity:.68}
}
@keyframes bird-wing-flutter {
  from {transform:rotate(-10deg) skewY(-1deg)}
  to {transform:rotate(11deg) skewY(1deg)}
}
/* Vary the storytelling across key pages. */
.scene-experiences .serendipity-bird-figure {animation-name:bird-visit-experiences}
.scene-connections .serendipity-bird-figure {left:max(14px,env(safe-area-inset-left));right:auto;animation-name:bird-visit-connections}
.scene-philosophy .serendipity-bird-figure {animation-name:bird-visit-philosophy;animation-duration:4.6s}
.scene-villa .serendipity-bird-figure {animation-name:bird-visit-villa}
.scene-skyview .serendipity-bird-figure {animation-name:bird-visit-skyview}
.scene-river .serendipity-bird-figure {left:max(14px,env(safe-area-inset-left));right:auto;animation-name:bird-visit-river}
.scene-about .serendipity-bird-figure {animation-name:bird-visit-about}
.scene-inquire .serendipity-bird-figure {left:max(14px,env(safe-area-inset-left));right:auto;animation-name:bird-visit-inquire}
.scene-booking .serendipity-bird-figure {animation-name:bird-visit-booking}
.scene-thanks .serendipity-bird-figure {animation-name:bird-visit-thanks}
.scene-policies .serendipity-bird-figure {animation-name:bird-visit-about}
@media (max-width:600px) {
  .serendipity-bird-figure {width:116px;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 4px);right:max(6px,env(safe-area-inset-right))}
  .scene-connections .serendipity-bird-figure,
  .scene-river .serendipity-bird-figure,
  .scene-inquire .serendipity-bird-figure {left:auto;right:max(6px,env(safe-area-inset-right))}
}
@media (prefers-reduced-motion:reduce) {
  .serendipity-bird-figure,
  .serendipity-bird-figure .bird-wing {
    animation: none !important;
  }
  .serendipity-bird-figure {transform:scale(.46);opacity:.68}
}

/* On narrow screens the bird perches in the far right edge; varied flights remain per page.
   This keeps the corner mark away from the first words of left-aligned text. */
@media(max-width:600px){
  .scene-connections .serendipity-bird-figure,
  .scene-river .serendipity-bird-figure,
  .scene-inquire .serendipity-bird-figure {left:auto;right:max(6px,env(safe-area-inset-right));}
}
