/*
  Treasured Pets: the opening panel and the scroll reveals.
  Website developed by pressific.com Emily Park, Dileep C. Kaluaratchie and Tech Generation Ltd.

  This file adds motion. It does not restyle anything: the design is the
  client's and the conversion reproduced it, so nothing here changes a colour,
  a size or a position at rest. Every rule either belongs to the opening panel,
  which removes itself, or moves an element from a displaced starting point to
  exactly where the page already put it.

  All of it is scoped under .tp-motion, a class added by JavaScript. If the
  script never runs, nothing is ever hidden, so the page cannot end up with
  content stuck invisible.
*/

/* ---- the opening ---------------------------------------------------------- */
.tp-intro {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  background: #0c2e1c;
  opacity: 1;
  transition: opacity 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.tp-intro.is-done { opacity: 0; pointer-events: none; }
.tp-intro__canvas { position: absolute; inset: 0; display: block; }

.tp-intro__word {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, calc(-50% + 12px));
  opacity: 0;
  text-align: center;
  color: #f4f0e6;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.6rem, 4.6vw, 2.9rem);
  letter-spacing: 0.02em;
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.tp-intro__word span {
  display: block;
  margin-top: 0.5rem;
  color: rgba(244, 240, 230, 0.72);
  font-family: inherit;
  font-size: clamp(0.78rem, 1.7vw, 1rem);
  letter-spacing: 0.08em;
}

.tp-intro.is-named .tp-intro__word { opacity: 1; transform: translate(-50%, -50%); }
/* The panel fades for three quarters of a second; the name must not sit over
   the live page while it does. */
.tp-intro.is-done .tp-intro__word { opacity: 0; transition: opacity 0.3s ease; }

.tp-intro__skip {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid rgba(244, 240, 230, 0.4);
  border-radius: 999px;
  background: transparent;
  color: rgba(244, 240, 230, 0.75);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.tp-intro__skip:hover, .tp-intro__skip:focus-visible { border-color: rgba(244, 240, 230, 0.85); color: #fff; }
.tp-intro.is-done .tp-intro__skip { opacity: 0; transition: opacity 0.2s ease; }

.tp-intro-open, .tp-intro-open body { overflow: hidden; }

/* ---- scroll reveals ------------------------------------------------------- */
/*
  Displaced, then put back. The end state is `none`, which is wherever the
  converted layout already placed the element, so a reveal can never leave the
  page looking different from how it was designed.
*/
.tp-motion [data-tp="up"] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.tp-motion [data-tp="in"] {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.8s ease, transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.tp-motion [data-tp].is-in { opacity: 1; transform: none; }

/* A stagger, so a row of cards arrives as a row rather than all at once. */
.tp-motion [data-tp][data-tp-i="1"] { transition-delay: 0.08s; }
.tp-motion [data-tp][data-tp-i="2"] { transition-delay: 0.16s; }
.tp-motion [data-tp][data-tp-i="3"] { transition-delay: 0.24s; }
.tp-motion [data-tp][data-tp-i="4"] { transition-delay: 0.32s; }

/*
  Images lift very slightly as they arrive. Photographs of somebody's animals
  are the reason people are on this page, so they get the one flourish.
*/
.tp-motion [data-tp="photo"] {
  opacity: 0;
  transform: translateY(26px) scale(0.985);
  transition: opacity 0.8s ease, transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
.tp-motion [data-tp="photo"].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .tp-intro { display: none !important; }
  .tp-motion [data-tp] { opacity: 1 !important; transform: none !important; transition: none !important; }
}