/*
 * PetRest Core — Homepage Premium Intro v1
 * Integrated from the approved standalone animation.
 * Homepage only; no Elementor wrapper manipulation.
 */
html.petrest-intro-skip #petrest-intro {
  display:none!important;
}

/* =========================================================
   FULLSCREEN OVERLAY
========================================================= */

#petrest-intro {
  position:fixed!important;
  inset:0!important;
  z-index:2147483647!important;

  width:100vw!important;
  height:100vh!important;
  height:100dvh!important;

  margin:0!important;
  padding:0!important;

  display:flex!important;
  align-items:center!important;
  justify-content:center!important;

  overflow:hidden!important;
  pointer-events:none!important;

  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,1) 0%, rgba(251,248,241,.99) 42%, rgba(242,236,224,.99) 100%)!important;

  opacity:1!important;
  visibility:visible!important;

  transition:
    opacity .42s ease,
    visibility .42s ease!important;
}

#petrest-intro.petrest-intro-out {
  opacity:0!important;
  visibility:hidden!important;
}

/* soft glow */
#petrest-intro::before {
  content:"";
  position:absolute;
  left:50%;
  top:45%;

  width:min(78vw,660px);
  aspect-ratio:1;

  border-radius:50%;

  background:
    radial-gradient(
      circle,
      rgba(62,139,122,.15) 0%,
      rgba(62,139,122,.075) 32%,
      rgba(231,148,112,.045) 53%,
      transparent 73%
    );

  filter:blur(12px);

  opacity:0;
  transform:translate(-50%,-50%) scale(.72);

  animation:
    petrestGlow
    2.35s
    cubic-bezier(.16,.84,.27,1)
    .05s
    forwards;
}

#petrest-intro::after {
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at center,
      transparent 45%,
      rgba(54,45,35,.035) 72%,
      rgba(54,45,35,.085) 100%
    );

  pointer-events:none;
}

/* =========================================================
   STAGE
========================================================= */

.petrest-stage {
  position:relative;
  z-index:2;

  width:min(92vw,760px);

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  padding:20px;
  text-align:center;
}

/* =========================================================
   PAW / HEART
========================================================= */

.petrest-mark {
  position:relative;

  width:142px;
  height:142px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin:0 auto 5px;

  opacity:0;
  transform:translateY(12px) scale(.82) rotate(-4deg);

  animation:
    petrestMarkIn
    .80s
    cubic-bezier(.16,.90,.28,1.15)
    .08s
    forwards;
}

.petrest-mark::before {
  content:"";
  position:absolute;
  inset:8px;

  border:1px solid rgba(62,139,122,.18);
  border-radius:50%;

  box-shadow:
    0 0 0 10px rgba(62,139,122,.025),
    0 15px 44px rgba(49,105,93,.11);

  opacity:0;
  transform:scale(.70);

  animation:
    petrestRing
    1.75s
    ease-out
    .18s
    forwards;
}

.petrest-paw {
  position:relative;
  z-index:2;

  width:112px;
  height:112px;

  filter:
    drop-shadow(0 10px 18px rgba(43,103,90,.14));
}

.petrest-heart {
  transform-origin:60px 76px;

  animation:
    petrestHeartBeat
    .62s
    ease-in-out
    .72s
    3;
}

/* =========================================================
   FLOATING PAWS
========================================================= */

.petrest-float {
  position:absolute;
  z-index:1;

  width:24px;
  height:24px;

  opacity:0;

  animation:
    petrestFloat
    2.25s
    ease-out
    forwards;
}

.petrest-float svg {
  width:100%;
  height:100%;
  fill:rgba(62,139,122,.20);
}

.petrest-float.f1 {
  left:11%;
  top:22%;
  transform:rotate(-24deg);
  animation-delay:.20s;
}

.petrest-float.f2 {
  right:12%;
  top:27%;
  transform:rotate(22deg);
  animation-delay:.34s;
}

.petrest-float.f3 {
  left:17%;
  bottom:21%;
  transform:rotate(14deg);
  animation-delay:.47s;
}

.petrest-float.f4 {
  right:18%;
  bottom:19%;
  transform:rotate(-18deg);
  animation-delay:.58s;
}

/* =========================================================
   BRAND
========================================================= */

.petrest-brand {
  margin:0;

  color:#23443c;

  font:
    1000
    clamp(40px,7.4vw,66px)/.94
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing:-.055em;

  opacity:0;
  transform:translateY(9px);

  text-shadow:
    0 9px 28px rgba(42,89,79,.075);

  animation:
    petrestTextIn
    .42s
    ease
    .60s
    forwards;
}

.petrest-brand .gr {
  color:#3e8b7a;
}

.petrest-pill {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  margin-top:12px;

  padding:7px 12px;

  border:
    1px solid
    rgba(62,139,122,.18);

  border-radius:999px;

  background:
    rgba(255,255,255,.62);

  color:#5c766f;

  font:
    900
    10px/1
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing:.14em;

  opacity:0;
  transform:translateY(6px);

  animation:
    petrestTextIn
    .30s
    ease
    .88s
    forwards;
}

.petrest-pill-heart {
  color:#e58f72;
  font-size:12px;

  animation:
    petrestMiniHeart
    .68s
    ease-in-out
    1.18s
    2;
}

.petrest-title {
  margin:14px 0 0;

  color:#314d46;

  font:
    900
    clamp(17px,3.4vw,24px)/1.16
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing:-.02em;

  opacity:0;
  transform:translateY(7px);

  animation:
    petrestTextIn
    .34s
    ease
    1.06s
    forwards;
}

.petrest-title strong {
  color:#3e8b7a;
}

.petrest-sub {
  margin-top:8px;

  color:#8a7569;

  font:
    800
    10px/1.25
    Arial,
    Helvetica,
    sans-serif;

  letter-spacing:.15em;

  opacity:0;

  animation:
    petrestFade
    .28s
    ease
    1.25s
    forwards;
}

.petrest-line {
  position:relative;

  width:min(72vw,340px);
  height:2px;

  margin-top:18px;

  overflow:hidden;
  border-radius:999px;

  background:rgba(62,139,122,.09);

  opacity:0;

  animation:
    petrestFade
    .22s
    ease
    1.30s
    forwards;
}

.petrest-line::after {
  content:"";
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      transparent 0%,
      #3e8b7a 34%,
      #e59a7a 68%,
      transparent 100%
    );

  transform:translateX(-100%);

  animation:
    petrestLine
    1.18s
    cubic-bezier(.22,.75,.25,1)
    1.34s
    forwards;
}

/* =========================================================
   KEYFRAMES
========================================================= */

@keyframes petrestGlow {
  0% {
    opacity:0;
    transform:translate(-50%,-50%) scale(.72);
  }

  45% {
    opacity:1;
  }

  100% {
    opacity:.56;
    transform:translate(-50%,-50%) scale(1);
  }
}

@keyframes petrestMarkIn {
  0% {
    opacity:0;
    transform:translateY(12px) scale(.82) rotate(-4deg);
  }

  70% {
    opacity:1;
    transform:translateY(-2px) scale(1.035) rotate(1deg);
  }

  100% {
    opacity:1;
    transform:translateY(0) scale(1) rotate(0);
  }
}

@keyframes petrestRing {
  0% {
    opacity:0;
    transform:scale(.70);
  }

  42% {
    opacity:.9;
  }

  100% {
    opacity:.16;
    transform:scale(1.15);
  }
}

@keyframes petrestHeartBeat {
  0%,100% {
    transform:scale(1);
  }

  34% {
    transform:scale(1.13);
  }

  52% {
    transform:scale(.98);
  }

  72% {
    transform:scale(1.07);
  }
}

@keyframes petrestMiniHeart {
  0%,100% {
    transform:scale(1);
  }

  45% {
    transform:scale(1.25);
  }
}

@keyframes petrestTextIn {
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes petrestFade {
  to {
    opacity:1;
  }
}

@keyframes petrestLine {
  to {
    transform:translateX(100%);
  }
}

@keyframes petrestFloat {
  0% {
    opacity:0;
    translate:0 12px;
  }

  35% {
    opacity:.52;
  }

  100% {
    opacity:0;
    translate:0 -16px;
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:520px) {

  .petrest-stage {
    width:100%;
    padding:
      max(14px,env(safe-area-inset-top))
      12px
      max(14px,env(safe-area-inset-bottom));
  }

  .petrest-mark {
    width:128px;
    height:128px;
  }

  .petrest-paw {
    width:100px;
    height:100px;
  }

  .petrest-brand {
    font-size:44px;
  }

  .petrest-title {
    font-size:18px;
  }

  .petrest-sub {
    max-width:88vw;
    font-size:9px;
    letter-spacing:.12em;
  }

}

@media (max-height:620px) {

  .petrest-mark {
    width:104px;
    height:104px;
  }

  .petrest-paw {
    width:84px;
    height:84px;
  }

  .petrest-brand {
    font-size:38px;
  }

  .petrest-title {
    margin-top:8px;
    font-size:16px;
  }

  .petrest-line {
    margin-top:10px;
  }

}