/* Head-peek first, then slow walk-out; detailed cozy pet house */
.arrival-stage{
  background:
    radial-gradient(circle at 74% 20%,rgba(255,248,211,.98) 0 4%,rgba(255,231,179,.45) 5% 17%,transparent 33%),
    repeating-linear-gradient(90deg,rgba(127,89,62,.035) 0 1px,transparent 1px 42px),
    linear-gradient(180deg,#f1e6db 0 53%,#bd815d 53% 54%,#e1bc94 54% 100%);
}
.arrival-house{
  left:3.2%;
  bottom:76px;
  width:204px;
  height:205px;
  border-width:6px;
  border-color:#69483e;
  border-radius:34px 34px 20px 20px;
  background:
    linear-gradient(90deg,rgba(255,255,255,.18),transparent 13% 87%,rgba(73,41,29,.13)),
    repeating-linear-gradient(90deg,rgba(103,61,40,.11) 0 2px,transparent 2px 22px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.055) 0 2px,transparent 2px 26px),
    linear-gradient(150deg,#edcba0,#c89166 68%,#a96e51);
  box-shadow:0 20px 20px rgba(72,39,24,.26),inset 0 0 0 6px rgba(255,248,228,.25),inset 0 -22px 28px rgba(91,53,35,.17);
  transform:perspective(720px) rotateY(-3deg);
}
.arrival-house::before{
  inset:11px;
  border-color:rgba(103,65,47,.35);
  border-radius:24px 24px 13px 13px;
  background:radial-gradient(circle at 18% 18%,rgba(255,255,255,.15) 0 2px,transparent 3px),repeating-linear-gradient(90deg,transparent 0 24px,rgba(112,71,46,.065) 24px 26px);
}
.house-roof{
  top:-56px;height:67px;
  border-color:#69483e;
  border-radius:13px 13px 5px 5px;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 3px,transparent 3px 28px),repeating-linear-gradient(0deg,rgba(83,45,48,.11) 0 2px,transparent 2px 17px),linear-gradient(180deg,#d18a84,#9d6269);
}
.house-window{
  position:absolute;z-index:3;right:18px;top:54px;width:57px;height:53px;
  display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:5px;
  border:4px solid #69483e;border-radius:13px;background:#9b7059;
  box-shadow:0 4px 0 rgba(76,45,34,.15),inset 0 0 0 3px rgba(255,245,218,.22);
}
.house-window i{position:relative;display:block;border-radius:4px;background:linear-gradient(145deg,#caeeff,#8bcbe7);box-shadow:inset 0 0 10px rgba(73,60,88,.16)}
.house-window i::after{content:"";position:absolute;left:2px;right:2px;top:2px;height:10px;border-radius:3px 3px 8px 8px;background:linear-gradient(180deg,#ffd0dc,#ff9fbd);opacity:.8}
.house-door{
  width:106px;height:122px;border-color:#654a43;
  background:radial-gradient(ellipse at 50% 94%,#120b16 0 45%,#211527 46% 73%,#0d0810 79% 100%);
  box-shadow:inset 0 18px 25px rgba(0,0,0,.83),inset 0 -12px 18px rgba(255,205,151,.08),0 0 0 5px rgba(255,239,211,.26);
}
.house-door::after{width:91px;height:20px;opacity:.55}
.house-cushion{
  position:absolute;z-index:5;left:50%;bottom:2px;width:88px;height:28px;transform:translateX(-50%);
  border:3px solid #6b4a45;border-radius:50% 50% 42% 42%;
  background:repeating-linear-gradient(90deg,#ffd3df 0 12px,#f5b8c9 12px 24px);
  box-shadow:0 -4px 0 rgba(255,255,255,.3),0 5px 8px rgba(54,31,26,.24);
}
.house-sign{top:23px;padding:5px 12px;border-color:#69483e;background:#fff8e8;box-shadow:0 4px 0 rgba(81,50,38,.2),inset 0 -3px 0 rgba(255,193,111,.22)}
.house-paw{
  position:absolute;z-index:4;left:15px;top:62px;width:34px;height:34px;display:grid;place-items:center;
  border:3px solid #69483e;border-radius:50%;background:#fff4d8;font-size:17px;
  box-shadow:0 3px 0 rgba(81,50,38,.14);transform:rotate(-9deg);
}
.arrival-peek{
  position:absolute;z-index:11;left:13%;bottom:143px;width:126px;height:112px;
  opacity:0;pointer-events:none;transform-origin:50% 100%;filter:drop-shadow(0 7px 5px rgba(65,37,27,.16));
}
.arrival-peek svg{display:block;width:100%;height:100%;overflow:visible}
.arrival-stage.playing .arrival-peek{animation:peekSequence 1.72s cubic-bezier(.22,.75,.28,1) both}
.arrival-stage.playing .arrival-peek svg{animation:peekLook 1.72s ease-in-out both}
.arrival-stage.playing .arrival-pet-wrap{animation:walkOutCute 2.9s cubic-bezier(.18,.75,.22,1) 1.5s forwards}
.arrival-stage.playing .arrival-pet{animation-delay:.08s}
.arrival-stage.playing .arrival-copy{animation-delay:1.9s}
.arrival-path{
  left:11%;right:1%;bottom:31px;height:104px;
  border:2px dashed rgba(117,75,51,.25);
  background:radial-gradient(ellipse at 52% 52%,rgba(255,248,225,.76),rgba(255,224,180,.31) 48%,transparent 74%),repeating-linear-gradient(90deg,rgba(111,72,48,.09) 0 4px,transparent 4px 31px),repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 2px,transparent 2px 18px);
  box-shadow:inset 0 0 20px rgba(102,57,32,.08),0 5px 8px rgba(102,57,32,.08);
}
.arrival-path::before{content:"🐾  🐾  🐾";position:absolute;left:38%;top:34px;color:rgba(111,72,48,.25);font-size:13px;letter-spacing:14px;transform:rotate(-6deg)}
.arrival-bowl{right:6%;bottom:46px;width:76px;height:28px}
.arrival-bowl::before{content:"";position:absolute;inset:0;border:4px solid #62483f;border-radius:50% 50% 42% 42%;background:linear-gradient(180deg,#ff9fbd,#d96e98);box-shadow:0 6px 0 rgba(76,43,30,.18),inset 0 4px 0 rgba(255,255,255,.3)}
.bowl-water,.bowl-food{position:absolute;top:2px;width:25px;height:13px;border:2px solid rgba(73,60,88,.45);border-radius:50%;background:#bcecff}
.bowl-water{left:10px}.bowl-food{right:10px;background:#f2c879}
.arrival-plant{right:4%;bottom:86px;width:58px;height:88px}
.arrival-plant::before{content:"";position:absolute;left:12px;bottom:0;width:35px;height:37px;border:4px solid #62483f;border-radius:8px 8px 16px 16px;background:linear-gradient(145deg,#efb77d,#c9805e);box-shadow:0 6px 0 rgba(76,43,30,.15)}
.arrival-plant i{position:absolute;left:27px;bottom:29px;width:18px;height:38px;border:3px solid #493c58;border-radius:90% 10% 90% 10%;background:#79cca7;transform-origin:50% 100%}
.arrival-plant i:nth-child(1){transform:rotate(-30deg)}.arrival-plant i:nth-child(2){height:45px;transform:translateX(2px) rotate(4deg)}.arrival-plant i:nth-child(3){transform:translateX(8px) rotate(32deg)}
@keyframes peekSequence{
  0%{opacity:0;transform:translateY(58px) scale(.55)}
  10%{opacity:1}
  24%{opacity:1;transform:translateY(4px) scale(.82) rotate(0)}
  34%{transform:translateY(-15px) scale(.98) rotate(-2deg)}
  46%{transform:translateY(15px) scale(.72) rotate(1deg)}
  59%{opacity:1;transform:translateY(-13px) scale(1) rotate(-2deg)}
  72%{transform:translateY(10px) scale(.8) rotate(1deg)}
  88%{opacity:1;transform:translateY(-8px) scale(.94) rotate(-1deg)}
  100%{opacity:0;transform:translateY(55px) scale(.5) rotate(0)}
}
@keyframes peekLook{0%,18%,48%,100%{transform:rotate(0)}28%{transform:rotate(-6deg)}38%{transform:rotate(5deg)}66%{transform:rotate(-5deg)}76%{transform:rotate(4deg)}}
@media(max-width:720px){
  .arrival-house{left:1.5%;bottom:70px;width:184px;height:192px}
  .house-window{right:14px;top:51px;width:52px;height:49px}
  .house-door{width:96px;height:110px}
  .house-paw{left:12px;top:57px;width:30px;height:30px;font-size:15px}
  .arrival-peek{left:12%;bottom:132px;width:112px;height:100px}
  .arrival-bowl{right:4%;bottom:42px;width:64px;height:25px}
  .arrival-plant{right:3%;bottom:79px;width:50px;height:78px}
}

/* Desktop-first vertical approach animation */
@media (min-width:721px){
  .arrival-stage{
    min-height:max(760px,calc(100vh - 80px));
    background:
      radial-gradient(ellipse at 50% 12%,rgba(255,250,221,.98) 0 8%,rgba(255,232,181,.52) 9% 24%,transparent 49%),
      radial-gradient(ellipse at 50% 66%,rgba(255,231,194,.46),transparent 52%),
      repeating-linear-gradient(90deg,rgba(127,89,62,.035) 0 1px,transparent 1px 42px),
      linear-gradient(180deg,#f3e9df 0 38%,#d8ad87 38% 39%,#e5c8a6 39% 100%);
  }
  .arrival-stage::before{
    left:0;right:0;bottom:0;height:61%;
    border-top:8px solid #9b6749;
    background:
      repeating-linear-gradient(96deg,rgba(83,48,27,.11) 0 2px,transparent 2px 48px),
      repeating-linear-gradient(5deg,rgba(255,255,255,.06) 0 1px,transparent 1px 55px),
      linear-gradient(180deg,#e5c4a1,#c88f67);
    box-shadow:inset 0 30px 45px rgba(86,47,25,.13);
  }
  .arrival-house{
    left:50%;top:22px;bottom:auto;
    width:204px;height:205px;
    margin-left:-102px;
    transform:perspective(720px) rotateX(2deg) rotateY(-2deg);
    transform-origin:center top;
  }
  .arrival-peek{
    left:50%;top:164px;bottom:auto;
    width:126px;height:112px;
    margin-left:-63px;
  }
  .arrival-stage.playing .arrival-peek{
    animation:peekDown 1.75s cubic-bezier(.22,.75,.28,1) both;
  }
  .arrival-stage.playing .arrival-peek svg{
    animation:peekLook 1.75s ease-in-out both;
  }
  .arrival-pet-wrap{
    left:50%;top:112px;bottom:auto;
    width:242px;height:244px;
    margin-left:-121px;
    transform-origin:50% 100%;
  }
  .arrival-stage.playing .arrival-pet-wrap{
    animation:walkDownCute 3.08s cubic-bezier(.18,.72,.22,1) 1.5s forwards;
  }
  .arrival-path{
    left:50%;right:auto;top:225px;bottom:61px;
    width:236px;height:auto;
    margin-left:-118px;
    border:2px dashed rgba(111,70,48,.24);
    border-radius:48% 48% 36% 36%;
    background:
      radial-gradient(ellipse at 50% 40%,rgba(255,249,229,.78),rgba(255,220,176,.33) 51%,transparent 76%),
      repeating-linear-gradient(0deg,rgba(111,72,48,.09) 0 4px,transparent 4px 34px),
      repeating-linear-gradient(90deg,rgba(255,255,255,.075) 0 2px,transparent 2px 28px);
    box-shadow:inset 0 0 28px rgba(102,57,32,.09),0 7px 11px rgba(102,57,32,.09);
  }
  .arrival-path::before{
    content:"🐾\A🐾\A🐾";
    left:50%;top:12%;
    width:auto;
    white-space:pre;
    text-align:center;
    line-height:1.55;
    letter-spacing:0;
    font-size:15px;
    transform:translateX(-50%) rotate(5deg);
  }
  .arrival-path::after{
    left:50%;top:auto;bottom:12%;width:78%;height:24px;
    transform:translateX(-50%);
  }
  .arrival-bowl{right:8%;bottom:47px}
  .arrival-plant{right:7%;bottom:91px}
  .arrival-copy{bottom:22px}
}

@keyframes peekDown{
  0%{opacity:0;transform:translateY(-55px) scale(.54)}
  10%{opacity:1}
  24%{opacity:1;transform:translateY(-8px) scale(.8) rotate(0)}
  34%{transform:translateY(13px) scale(.98) rotate(-2deg)}
  46%{transform:translateY(-22px) scale(.72) rotate(1deg)}
  59%{opacity:1;transform:translateY(10px) scale(1) rotate(-2deg)}
  72%{transform:translateY(-17px) scale(.8) rotate(1deg)}
  88%{opacity:1;transform:translateY(8px) scale(.94) rotate(-1deg)}
  100%{opacity:0;transform:translateY(-52px) scale(.5) rotate(0)}
}

@keyframes walkDownCute{
  0%{top:11%;opacity:0;transform:translateY(-30px) scale(.2) rotate(-1deg)}
  9%{opacity:1}
  27%{top:18%;transform:translateY(-6px) scale(.36) rotate(1deg)}
  48%{top:30%;transform:translateY(0) scale(.58) rotate(-1deg)}
  69%{top:43%;transform:translateY(-5px) scale(.79) rotate(1deg)}
  87%{top:54%;transform:translateY(1px) scale(.97) rotate(-.5deg)}
  100%{top:60%;opacity:1;transform:translateY(-7px) scale(1.08) rotate(0)}
}