/* ==========================================================================
   NAPCAT — Mascot layer
   Decorative brand-mascot accents placed over the existing design.
   Nothing here changes the core layout: every mascot is an absolutely
   positioned overlay inside a container that is already (or is made)
   position:relative. Remove this file + mascot.js to revert completely.
   ========================================================================== */

/* --- positioning contexts (safe: these are plain block containers) -------- */
.price-box,
.footer,
.stat-band,
.soon-panel,
.contact-card,
.m-anchor { position: relative; }

/* --- base ---------------------------------------------------------------- */
.mascot {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  line-height: 0;
  will-change: transform;
  /* reset — the tappable variants are <button> elements */
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-align: inherit;
  box-shadow: none;
}
.mascot img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-user-drag: none;
  user-drag: none;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .22));
  transition: transform .45s var(--ease, cubic-bezier(.22, 1, .36, 1));
}
.mascot.on-dark img { filter: drop-shadow(0 16px 26px rgba(0, 0, 0, .5)); }

/* entrance */
.mascot { opacity: 0; transform: translateY(14px) scale(.94); transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1); }
.mascot.in { opacity: 1; transform: none; }

/* --- idle motion --------------------------------------------------------- */
.mascot .m-bob { display: block; animation: m-bob 5.2s ease-in-out infinite; }
.mascot.m-slow .m-bob { animation-duration: 7s; }
.mascot.m-tilt .m-bob { animation: m-tilt 6.4s ease-in-out infinite; }

@keyframes m-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-1.1deg); }
}
@keyframes m-tilt {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-6px) rotate(2deg); }
}

/* --- sleepy Z's ---------------------------------------------------------- */
.m-zzz { position: absolute; top: -14%; right: 0; width: 3em; height: 3em; pointer-events: none; }
.m-zzz i {
  position: absolute; left: 0; bottom: 0;
  font-family: var(--font, Inter), system-ui, sans-serif;
  font-style: normal; font-weight: 800; color: var(--yellow, #F5C518);
  font-size: 1.15rem; opacity: 0;
  text-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  animation: m-z 4.2s ease-in-out infinite;
}
.m-zzz i:nth-child(2) { animation-delay: 1.4s; font-size: .95rem; }
.m-zzz i:nth-child(3) { animation-delay: 2.8s; font-size: .78rem; }
.mascot.on-light .m-zzz i { color: var(--yellow-deep, #E3B000); text-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

@keyframes m-z {
  0%   { opacity: 0; transform: translate(0, 6px) scale(.7) rotate(-8deg); }
  22%  { opacity: .95; }
  70%  { opacity: .6; }
  100% { opacity: 0; transform: translate(20px, -34px) scale(1.15) rotate(12deg); }
}

/* --- speech bubble ------------------------------------------------------- */
/* display:none while idle keeps the (nowrap) bubble out of layout entirely —
   otherwise a mascot near the right edge pushes the page's scrollWidth out and
   creates a horizontal scrollbar on phones. */
.m-say {
  display: none;
  position: absolute; left: 50%; bottom: 100%;
  margin-bottom: 12px;
  background: #fff; color: var(--ink, #0E0E10);
  border: 1.5px solid rgba(0, 0, 0, .07);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .16);
  border-radius: 14px; padding: 7px 13px;
  font-size: .8rem; font-weight: 700; letter-spacing: -.01em;
  white-space: nowrap;
  pointer-events: none; z-index: 3;
}
.m-say::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  transform: translateX(-50%);
  border: 7px solid transparent; border-top-color: #fff;
}
.mascot.say .m-say,
.m-peeker.say .m-say { display: block; animation: m-pop .4s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes m-pop {
  from { opacity: 0; transform: translate(-50%, 8px) scale(.84); }
  to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* --- interactive ---------------------------------------------------------- */
.mascot.tappable { pointer-events: auto; cursor: pointer; }
.mascot.tappable:hover img,
.mascot.tappable:focus-visible img { transform: translateY(-6px) scale(1.06); }
.mascot.tappable:focus-visible { outline: 3px solid var(--yellow, #F5C518); outline-offset: 6px; border-radius: 12px; }
.mascot.pounce .m-bob { animation: m-pounce .72s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes m-pounce {
  0%   { transform: translateY(0) rotate(0); }
  28%  { transform: translateY(-20px) rotate(-7deg) scale(1.07); }
  55%  { transform: translateY(2px) rotate(4deg) scale(.98); }
  78%  { transform: translateY(-6px) rotate(-2deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* ==========================================================================
   Placements
   ========================================================================== */

/* Hero — welcome slide, sleeping in the bottom-right corner */
.m-hero {
  right: clamp(12px, 5vw, 84px);
  bottom: clamp(56px, 8vh, 96px);
  width: clamp(120px, 15vw, 210px);
  z-index: 2;                     /* stays under .hslide-inner text (z-index 3) */
}

/* Hero — botanical slides: fills the empty .slide-visual box */
.m-slidevisual { position: relative; width: clamp(200px, 26vw, 330px); }

/* Product / pillow render panel — napping on top of the mattress */
.m-prodtop {
  right: clamp(16px, 9%, 78px);
  top: clamp(10px, 4%, 30px);
  width: clamp(104px, 17%, 168px);
}

/* Price box — perched on the corner, "hanging around the price" */
.m-price {
  right: -30px; top: -52px;
  width: clamp(76px, 9vw, 116px);
  z-index: 5;
}

/* Collection dark hero */
.m-collhero { right: clamp(10px, 3vw, 46px); bottom: -14px; width: clamp(110px, 13vw, 180px); }

/* Coming-soon panels (bedsheets / comforters) — blanket burrito */
.m-soon { right: clamp(12px, 5%, 54px); bottom: -10px; width: clamp(104px, 15%, 168px); }

/* Hotels dark hero + yellow stat band */
.m-hotelhero { right: clamp(12px, 5vw, 80px); bottom: clamp(24px, 6vh, 76px); width: clamp(120px, 15vw, 208px); z-index: 2; }
.m-statband  { right: clamp(10px, 3%, 40px); bottom: -8px; width: clamp(92px, 12%, 150px); }

/* Sitewide CTA band (yellow) */
.m-cta { right: clamp(10px, 4%, 56px); bottom: -12px; width: clamp(96px, 12%, 152px); }

/* Footer — moon cat, straddling the top edge above the "Visit us" column */
.m-footer { right: clamp(12px, 5vw, 72px); top: -92px; width: clamp(94px, 11vw, 144px); }

/* Generic page-intro accent (innovations / story / warranty / contact).
   Anchored to .eyebrow-row (max-width 760px) and parked in the empty space to
   its right, so it can never collide with the heading or copy. */
.m-accent { left: calc(100% + 26px); bottom: -16px; width: clamp(120px, 12vw, 164px); }
@media (max-width: 1150px) { .m-accent { display: none; } }

/* 404 */
.m-404 { position: relative; width: clamp(180px, 34vw, 300px); margin: 6px auto 0; }

/* --- scroll-to-top peeker (bottom-right, appears deep in the page) -------- */
.m-peeker {
  position: fixed; right: clamp(14px, 3vw, 30px); bottom: 0;
  width: clamp(74px, 9vw, 104px);
  z-index: 90;                    /* under .nav (100) */
  pointer-events: auto; cursor: pointer;
  background: none; border: 0; padding: 0;
  transform: translateY(115%);
  transition: transform .55s cubic-bezier(.22, 1, .36, 1);
  opacity: 1; visibility: visible;
}
.m-peeker img { display: block; width: 100%; height: auto; filter: drop-shadow(0 -6px 18px rgba(0, 0, 0, .18)); }
.m-peeker.up { transform: translateY(14%); }
.m-peeker:hover.up, .m-peeker:focus-visible.up { transform: translateY(-2%); }
.m-peeker:focus-visible { outline: 3px solid var(--yellow, #F5C518); outline-offset: 4px; border-radius: 12px; }
.m-peeker .m-say { bottom: 100%; margin-bottom: 4px; }
body.menu-open .m-peeker { transform: translateY(115%); }

/* ==========================================================================
   Responsive — keep the story, drop the clutter on small screens
   ========================================================================== */
@media (max-width: 900px) {
  .m-price { top: -40px; right: -6px; width: 84px; }
  .m-footer { top: -76px; }
}

@media (max-width: 700px) {
  /* .slide-visual is already hidden on mobile by the core stylesheet */
  .m-collhero, .m-statband, .m-accent { display: none; }
  .m-hero, .m-hotelhero { width: 104px; right: 10px; bottom: 40px; opacity: .92; }
  .m-cta { width: 92px; right: 4px; bottom: -8px; }
  .m-soon { width: 96px; right: 6px; }
  .m-prodtop { width: 76px; right: 6px; top: 6px; }
  .m-footer { width: 84px; top: -62px; right: 14px; }
  .m-say { font-size: .72rem; padding: 6px 10px; }
}

@media (max-width: 420px) {
  .m-cta, .m-soon { display: none; }
  .m-hero, .m-hotelhero { width: 88px; bottom: 30px; }
}

/* --- accessibility -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mascot, .mascot img, .mascot .m-bob, .m-zzz i, .m-say, .m-peeker {
    animation: none !important;
    transition: none !important;
  }
  .mascot { opacity: 1; transform: none; }
  .m-zzz { display: none; }
  .m-peeker { transform: translateY(14%); }
}

@media print { .mascot, .m-peeker { display: none !important; } }

/* ==========================================================================
   BONUS — pre-existing mobile bug fix (nothing to do with the mascots)
   --------------------------------------------------------------------------
   .reveal-l / .reveal-r start life at translateX(∓46px) and only settle once
   they scroll into view. On a phone that parked 46px pushes the page wider
   than the screen, so every page could be dragged ~27px sideways.
   Below 900px we slide those elements up instead of across: same fade-in
   feel, no sideways overflow. Desktop behaviour is untouched.
   Safe to delete this block on its own if you ever want the old behaviour.
   ========================================================================== */
@media (max-width: 900px) {
  .reveal-l, .reveal-r { transform: translateY(30px); }
  .reveal-l.in, .reveal-r.in { transform: none; }
}