/* ==========================================================================
   Meet Aira — onboarding tutorial styles
   Namespaced under .aira-onb to avoid collisions with the existing theme.

   Layout: the cat "stage" and the speech-card are both horizontally
   centered on the viewport and anchored to the bottom, so the mascot
   reads as the focal point of the tutorial instead of a corner
   decoration. The speech bubble is drawn as a hand-drawn-style cloud
   shape using CSS only (asymmetric border-radius + small pseudo-element
   "lobes" + two trailing thought-bubbles) rather than an external SVG
   mask asset, so there's no risk of the bubble disappearing if an image
   fails to load.
   ========================================================================== */

:root{
  --aira-onb-purple: var(--p, #9349dc);
  --aira-onb-purple-2: var(--s, #6738c7);
  --aira-onb-cream: #fffdfb;
}

.aira-onb-overlay{
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 30, 0.38);
  opacity: 0;
  z-index: 99990;
  pointer-events: none;
  transition: opacity .45s ease;
}
.aira-onb-overlay.is-visible{ opacity: 1; pointer-events: auto; }
.aira-onb-overlay.is-focused{ background: rgba(15, 8, 24, 0.55); }

/* ---------------------------------------------------------------------
   Stage — the cat + environmental decorations. Centered horizontally in
   the viewport at every breakpoint (mobile included), anchored to the
   bottom so the cat reads as "standing on the ground" in the middle of
   the screen.
   --------------------------------------------------------------------- */
.aira-onb-stage{
  position: fixed;
  left: 17%;
  bottom: 0;
  width: min(560px, 92vw);
  height: min(420px, 58vh);
  z-index: 99991;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-50%) translateY(24px);
  transition: opacity .5s ease, transform .5s ease;
}
.aira-onb-stage.is-visible{ opacity: 1; transform: translateX(-50%) translateY(0); }

.aira-onb-spotlight{
  position: absolute;
  left: 50%;
  bottom: 4%;
  width: 280px;
  height: 280px;
  transform: translateX(-50%);
  background: radial-gradient(circle, rgba(147,73,220,.28) 0%, rgba(147,73,220,0) 70%);
  border-radius: 50%;
  filter: blur(2px);
  will-change: transform;
  display:none;
}

.aira-onb-grass{
  position: absolute;
  left: 50%;
  bottom: -2%;
  width: 66%;
  max-width: 340px;
  transform: translateX(-84%);
  opacity: .9;
  filter: blur(0.5px);
  will-change: transform;
  pointer-events: none;
}
.aira-onb-grass img{ width: 100%; height: auto; display: block; }

.aira-onb-flowers{
  position: absolute;
  left: 50%;
  bottom: 6%;
  width: 90px;
  transform: translateX(-260%);
  opacity: .95;
  will-change: transform;
  pointer-events: none;
}
.aira-onb-flowers img{ width: 100%; height: auto; display: block; }

.aira-onb-leaves{
  position: absolute;
  left: 50%;
  top: -6%;
  width: 140px;
  transform: translateX(140%);
  opacity: .8;
  filter: blur(1.5px);
  will-change: transform;
  pointer-events: none;
}
.aira-onb-leaves img{ width: 100%; height: auto; display: block; }

.aira-onb-shadow{
  position: absolute;
  left: 50%;
  bottom: 7%;
  width: 160px;
  transform: translateX(-50%);
  opacity: .55;
  pointer-events: none;
}
.aira-onb-shadow img{ width: 100%; height: auto; display: block; }

.aira-onb-cat{
  position: absolute;
  left: 50%;
  bottom: 8%;
  width: 530px;
  transform: translateX(-50%);
  pointer-events: none;
}
.aira-onb-cat video,
.aira-onb-cat canvas,
.aira-onb-cat img{
  width: 100%;
  height: auto;
  display: block;
  filter: drop-shadow(0 18px 22px rgba(30, 10, 45, .28));
}
/* The <video> is only ever an offscreen decode source now — its frames
   are drawn onto the <canvas> below with the green-screen background
   keyed out, which is what actually renders on screen. This keeps
   transparency working identically in every browser, including Safari
   on iPhone/iPad/Mac, which has no native alpha-video support. */
.aira-onb-cat video{ display: none; }
.aira-onb-cat canvas{ display: none; }
.aira-onb-cat.video-ready canvas{ display: block; }
.aira-onb-cat.video-ready img{ display: none; }

/* Purple pawprint trail (the short CTA-pointing trail used on the
   highlight step, not the site-wide scroll trail). */
.aira-onb-pawtrail{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 99992;
}
.aira-onb-paw{
  position: fixed;
  width: 20px;
  height: 20px;
  background: var(--aira-onb-purple);
  -webkit-mask: radial-gradient(circle at 50% 35%, #000 40%, transparent 41%),
                 radial-gradient(circle at 30% 15%, #000 18%, transparent 19%),
                 radial-gradient(circle at 70% 15%, #000 18%, transparent 19%);
  mask: radial-gradient(circle at 50% 35%, #000 40%, transparent 41%),
        radial-gradient(circle at 30% 15%, #000 18%, transparent 19%),
        radial-gradient(circle at 70% 15%, #000 18%, transparent 19%);
  border-radius: 50%;
  opacity: 0;
  z-index: 99992;
  transform: scale(.6);
  transition: opacity .4s ease, transform .4s ease;
}
.aira-onb-paw.is-visible{ opacity: .55; transform: scale(1); }

/* ---------------------------------------------------------------------
   Speech bubble — cloud-shaped card drawn from images/ui/cloud-card.svg
   (matches the supplied reference art) rather than a CSS rounded
   rectangle. The SVG (fill, purple stroke and drop-shadow all baked
   in) is used as a stretched background — background-size: 100% 100%
   — so it always fills the shape's box.

   Structure: .aira-onb-card is an always-visible (opacity:1) outer
   positioning box with a *fixed* width/height (big enough for the
   longest script step, including the two-button final step) — every
   step renders inside the same box, so the cloud's proportions/safe
   zone stay predictable regardless of message length. Its two direct
   children are:
     - .aira-onb-card-shape — an absolutely-positioned (inset:0) inner
       box that actually carries the cloud background, padding and all
       header/message/action content.
     - .aira-onb-bubble-1 / -2 — the two small "thought" circles
       trailing toward the cat below.
   These are siblings, not parent/child, specifically so each can fade
   in on its own opacity/transform timeline (opacity compounds through
   an ancestor chain, so nesting them under the shape would have tied
   their visibility to it). The result is a staggered "thinking" build
   -up — driven entirely by transition-delay off the same
   .aira-onb-card.is-visible toggle already used elsewhere: the
   smaller/farther bubble-2 appears first, bubble-1 second, and the
   cloud itself fades/scales in last. Because showMessage() re-triggers
   is-visible on every step (not just the first), this replay happens
   before every new message, not only the initial reveal.

   Top padding on the shape is much larger than the sides/bottom on
   purpose: the source SVG's top edge is two uneven humps with a
   shallow dip between them, right where the header sits — this clears
   it. overflow:hidden on the shape (not the outer box) is a safety
   net that only clips runaway text, so it doesn't cut off the bubbles,
   which intentionally sit outside the shape's own box.
   --------------------------------------------------------------------- */
.aira-onb-card{
  position: fixed;
  left: 40%;
  bottom: clamp(150px, 26vh, 250px);
  z-index: 99993;
  width: 500px;
  height: 490px;
  opacity: 1;
  transform: translateX(-50%) translateY(14px);
  transform-origin: 50% 100%;
  transition: transform .35s ease;
  pointer-events: none; /* re-enabled on children individually once visible */
}
.aira-onb-card.is-visible{ transform: translateX(-50%) translateY(0); }
.aira-onb-card.is-visible .aira-onb-card-shape{ pointer-events: auto; }

.aira-onb-card-shape{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: url('../images/ui/cloud-card.svg') no-repeat center / 100% 100%;
  padding: 155px 120px 155px;
  overflow: hidden;
  opacity: 0;
  transform: scale(.88);
  transform-origin: 50% 100%;
  transition: opacity .3s ease, transform .3s ease;
  transition-delay: .3s;
  font-family: inherit;
}
.aira-onb-card.is-visible .aira-onb-card-shape{ opacity: 1; transform: scale(1); }

/* Entrance: on the very first reveal (after Aira walks in and settles)
   the cloud pops in with extra flourish instead of the plain fade
   above — CSS animations override a running transition on the same
   property, so this plays immediately regardless of the shape's
   .3s transition-delay. See AiraOnboarding.prototype.playCardEntrance
   in js/aira-onboarding.js. */
@keyframes aira-onb-pop-in{
  0%   { opacity: 0; transform: scale(.32) translateY(30px); }
  55%  { opacity: 1; transform: scale(1.05) translateY(-6px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.aira-onb-card-shape.aira-onb-card-pop{
  animation: aira-onb-pop-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}

/* Two small "thought" bubbles trailing from the main cloud toward the
   cat below it — see the structure note above for why these are
   siblings of .aira-onb-card-shape rather than nested inside it, and
   why each has its own transition-delay. Because the stage and card
   are both horizontally centered on the viewport at every breakpoint,
   a static pair (no per-frame JS angle math) lines up correctly
   without needing to track the cat's position live. */
.aira-onb-bubble{
  position: absolute;
  left: 25%;
  border-radius: 50%;
  background: var(--aira-onb-cream);
  border: 3px solid var(--aira-onb-purple);
  pointer-events: none;
  opacity: 0;
  transition: opacity .22s ease, transform .22s ease;
}
.aira-onb-card.is-visible .aira-onb-bubble{ opacity: 1; }
.aira-onb-bubble-1{
  width: 40px;
  height: 40px;
  bottom: 35px;
  transform: translateX(-135%) scale(.35);
  transition-delay: .14s; /* second: closer/bigger bubble */
  left: 30%;
}
.aira-onb-card.is-visible .aira-onb-bubble-1{ transform: translateX(-135%) scale(1); }
.aira-onb-bubble-2{
  width: 18px;
  height: 18px;
  bottom: 15px;
  transform: translateX(-260%) scale(.35);
  transition-delay: 0s; /* first: smallest/farthest bubble */
}
.aira-onb-card.is-visible .aira-onb-bubble-2{ transform: translateX(-260%) scale(1); }

.aira-onb-card-header{
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex: 0 0 auto;
  display:none;
}
.aira-onb-paw-badge{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--aira-onb-purple), var(--aira-onb-purple-2));
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px; flex: none;
}
.aira-onb-card-title{
  font-weight: 700;
  font-size: 18px;
  color: var(--aira-onb-purple-2);
  letter-spacing: .02em;
}

.aira-onb-message{
  font-size: 21px;
  line-height: 1.55;
  color: #241a30;
  cursor: pointer;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-height: 0;
  overflow: hidden;
}
.aira-onb-message .aira-onb-cursor{
  display: inline-block;
  width: 2px;
  margin-left: 1px;
  background: var(--aira-onb-purple);
  animation: aira-onb-blink 1s steps(1) infinite;
}
@keyframes aira-onb-blink{ 50% { opacity: 0; } }

.aira-onb-actions{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
}
.aira-onb-actions-primary{ display: flex; gap: 10px; flex-wrap: wrap; }

.aira-onb-btn{
  min-height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
  font-family: inherit;
}
.aira-onb-btn:focus-visible{
  outline: 3px solid rgba(147, 73, 220, .55);
  outline-offset: 2px;
}
.aira-onb-btn-primary{
  background: linear-gradient(135deg, var(--aira-onb-purple), var(--aira-onb-purple-2));
  color: #fff;
  box-shadow: 0 14px 30px rgba(112,56,202,.28);
}
.aira-onb-btn-primary:hover{ transform: translateY(-2px); }
.aira-onb-btn-secondary{
  background: rgba(147, 73, 220, .08);
  color: var(--aira-onb-purple-2);
}
.aira-onb-btn-secondary:hover{ background: rgba(147, 73, 220, .14); }

.aira-onb-skip{
  background: none;
  border: none;
  color: #8b7f97;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-family: inherit;
  min-height: 44px;
}
.aira-onb-skip:focus-visible{
  outline: 2px solid rgba(147, 73, 220, .5);
  outline-offset: 2px;
}

.aira-onb-final-actions{ display: flex; flex-direction: column; gap: 8px; margin-bottom: -40px; flex: 0 0 auto; }
.aira-onb-final-actions .aira-onb-btn{ width: 100%; }

/* .aira-onb-actions / .aira-onb-final-actions both set display:flex
   above unconditionally, which (per the CSS cascade) overrides the
   browser's built-in `[hidden]{ display:none }` rule — author styles
   always win over user-agent styles regardless of specificity. That
   meant the JS toggling `els.actions.hidden` / `els.finalActions.hidden`
   between steps had no visual effect: both panels rendered at once,
   which is why extra buttons/links showed up outside the cloud. These
   two rules use the [hidden] attribute for higher specificity so the
   toggle actually works. */
.aira-onb-actions[hidden],
.aira-onb-final-actions[hidden]{ display: none; }
.aira-onb-final-footer{
  display: flex; justify-content: center; margin-top: 10px;
}

/* Target highlight (points at the real "Create Pet Profile" button on
   the page — unrelated to the cloud bubble above). */
.aira-onb-target-highlight{
  position: fixed;
  z-index: 99989;
  border-radius: 14px;
  pointer-events: none;
  box-shadow: 0 0 0 4px rgba(147, 73, 220, .55), 0 0 40px 10px rgba(147, 73, 220, .35);
  opacity: 0;
  transition: opacity .3s ease, top .15s ease, left .15s ease, width .15s ease, height .15s ease;
}
.aira-onb-target-highlight.is-visible{ opacity: 1; }
.aira-onb-target-highlight.is-pulsing{ animation: aira-onb-pulse 1.6s ease-in-out infinite; }
@keyframes aira-onb-pulse{
  0%, 100% { box-shadow: 0 0 0 4px rgba(147, 73, 220, .55), 0 0 40px 10px rgba(147, 73, 220, .35); }
  50% { box-shadow: 0 0 0 7px rgba(147, 73, 220, .35), 0 0 55px 18px rgba(147, 73, 220, .5); }
}

.aira-onb-target-arrow{
  position: fixed;
  z-index: 99989;
  width: 26px;
  height: 26px;
  opacity: 0;
  transition: opacity .3s ease, top .15s ease, left .15s ease;
  color: var(--aira-onb-purple);
  pointer-events: none;
}
.aira-onb-target-arrow.is-visible{ opacity: 1; animation: aira-onb-bob 1.2s ease-in-out infinite; }
@keyframes aira-onb-bob{ 0%,100%{ transform: translateY(0); } 50%{ transform: translateY(6px); } }

/* Elevate the highlighted button above the overlay so it stays bright/readable */
.aira-onb-elevated{ position: relative; z-index: 99994; }

/* Live region kept visually hidden */
.aira-onb-sr-only{
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Debug helper (only used when config.debug === true) */
.aira-onb-debug .aira-onb-card,
.aira-onb-debug .aira-onb-stage{ outline: 2px dashed magenta; }

/* Responsive — cat + bubble stay centered at every size; only the scale
   and bubble padding shrink. */
@media (max-width: 991px){
  .aira-onb-stage{ width: min(440px, 90vw); height: 340px; }
  .aira-onb-cat{ width: 550px;!important }
  .aira-onb-card{
    bottom: clamp(140px, 24vh, 230px);
    width: 460px;
    height: 460px;
    padding: 90px 54px 34px;
  }
}

@media (max-width: 575px){
  .aira-onb-card-shape{
    padding: 145px 75px 145px 90px;
  }
  .aira-onb-message{
    font-size: 18px;
    
  }
  .aira-onb-skip{
    margin-top: -12px;
    margin-bottom: 17px;
  }
  .aira-onb-stage{
    height: 34dvh;
    width: 78vw;
    left: 40%;
  }
  .aira-onb-cat{ width: 550px; }
  .aira-onb-leaves,
  .aira-onb-flowers{ display: none; } /* reduce decoration density on mobile */
  .aira-onb-card{
    width: calc(100vw - 40px);
    height: 460px;
    bottom: clamp(100px, 30dvh, 240px);
    padding: 88px 28px 26px;
    left: 50%;
  }
  .aira-onb-bubble{
      left:77%;
  }
  .aira-onb-bubble-1{ width: 30px; height: 30px; bottom: 35px; }
  .aira-onb-bubble-2{ width: 14px; height: 14px; bottom: 5px; left:73%;}
  .aira-onb-actions{ flex-direction: row; align-items: center; }
  .aira-onb-actions .aira-onb-btn{
    min-height: 20px;
    padding: 0px 16px;
    font-size: 12px;
  }
}

/* Reduced motion: strip animation, keep the experience functional. The
   card still needs to reach is-visible's end state without the pop-in
   keyframe running, so playCardEntrance() in JS skips adding
   .aira-onb-card-pop entirely when this is on (see js file). */
@media (prefers-reduced-motion: reduce){
  .aira-onb-overlay,
  .aira-onb-stage,
  .aira-onb-card,
  .aira-onb-paw,
  .aira-onb-target-highlight,
  .aira-onb-target-arrow,
  .aira-onb-btn{
    transition: opacity .2s linear !important;
    animation: none !important;
    transform: none !important;
  }
  .aira-onb-stage{ transform: translateX(-50%) !important; }
  .aira-onb-card{ transform: translateX(-50%) !important; }
  .aira-onb-spotlight,
  .aira-onb-grass,
  .aira-onb-flowers,
  .aira-onb-leaves{ transition: none !important; }
}