/* ══════════════════════════════════════════════════════════════════
   Targo AI — the mascot.
   Homepage only. Built as layered SVG rather than WebGL: the reference
   look is soft gradients and rounded volumes, which vector reproduces
   exactly at a few KB, stays razor sharp at any size, and costs no GPU
   on a phone. Every moving part is its own layer so the head, the orb,
   the arm and the body each animate independently.
   ══════════════════════════════════════════════════════════════════ */

.tgr-stage{
  position: fixed;
  /* Anchored to the bottom in pixels rather than a percentage of the
     viewport. A percentage is measured against the visual viewport, which
     on mobile grows and shrinks as the address bar hides and reappears —
     so the mascot slid around during any scroll. A fixed offset from the
     bottom edge keeps it still. */
  bottom: max(170px, 26vh);
  top: auto;
  /* vh is measured against the large viewport and does not move when the
     mobile address bar hides; a percentage would, which is what used to
     make it drift on scroll. */
  z-index: 1040;
  width: 86px;
  height: 140px;
  cursor: grab;
  touch-action: none;   /* a finger on the mascot drags it, not the page */
  -webkit-tap-highlight-color: transparent;
  /* Side is driven by these two, swapped by the warp cycle. */
  right: 22px;
  left: auto;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,.55));
}
.tgr-stage.tgr-side-left{ right: auto; left: 22px; }
/* On the left the character mirrors, so the waving arm always reads as
   facing into the page rather than off the edge of it. */
.tgr-stage.tgr-side-left .tgr-svg{ transform: scaleX(-1); }

.tgr-svg{ width: 100%; height: 100%; overflow: visible; display: block; }

/* ── Idle life ─────────────────────────────────────────────────────
   Three loops at deliberately unequal periods (3.4s / 2.6s / 5s) so
   they drift out of phase and never resolve into one mechanical beat. */
#tgrFloat{ animation: tgrFloat 3.4s ease-in-out infinite; }
@keyframes tgrFloat{
  0%,100%{ transform: translateY(0); }
  50%{ transform: translateY(-7px); }
}

#tgrOrb{ animation: tgrOrbFloat 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tgrOrbFloat{
  0%,100%{ transform: translateY(0) scale(1); }
  50%{ transform: translateY(-9px) scale(1.05); }
}

/* A full revolution roughly every five seconds: about a second of spin,
   then it rests. A head that turned continuously would read as a loading
   spinner, not a character. */
#tgrHead{ animation: tgrHeadSpin 5s cubic-bezier(.7,0,.3,1) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tgrHeadSpin{
  0%{ transform: rotate(0deg); }
  22%{ transform: rotate(360deg); }
  100%{ transform: rotate(360deg); }
}

#tgrShadow{ animation: tgrShadowPulse 3.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes tgrShadowPulse{
  0%,100%{ transform: scale(1); opacity: .5; }
  50%{ transform: scale(.86); opacity: .3; }
}

/* ── The wave ──────────────────────────────────────────────────────
   At rest the arm simply hangs. A wave is a full gesture: a small dip
   back for anticipation, a swing up past the target and a settle, the
   hand rocking, then a swing down that overshoots slightly before it
   comes to rest — the arm never snaps to a pose.

   Both pivots are given in viewBox units rather than percentages of a
   bounding box, so they stay nailed to the shoulder and the wrist no
   matter how the artwork is edited. The hand sits inside the arm, so
   its angles add: arm 145deg + hand 35deg puts it a half-turn from
   rest, which is why one drawing reads correctly hanging and waving. */
#tgrArmWave{ transform-box: view-box; transform-origin: 65px 107px; }
#tgrHand{ transform-box: view-box; transform-origin: 53.5px 168px; }

.tgr-stage.tgr-wave #tgrArmWave{ animation: tgrArmRaise 2.3s cubic-bezier(.33,0,.2,1) both; }
@keyframes tgrArmRaise{
  0%{ transform: rotate(0deg); }
  7%{ transform: rotate(-10deg); }
  21%{ transform: rotate(153deg); }
  27%{ transform: rotate(142deg); }
  33%{ transform: rotate(146deg); }
  72%{ transform: rotate(145deg); }
  86%{ transform: rotate(-8deg); }
  93%{ transform: rotate(4deg); }
  100%{ transform: rotate(0deg); }
}
/* The hand lags the arm a beat, then does the actual waving. */
.tgr-stage.tgr-wave #tgrHand{ animation: tgrHandWave 2.3s cubic-bezier(.33,0,.2,1) both; }
@keyframes tgrHandWave{
  0%{ transform: rotate(0deg); }
  10%{ transform: rotate(-6deg); }
  26%{ transform: rotate(40deg); }
  34%{ transform: rotate(60deg); }
  43%{ transform: rotate(12deg); }
  52%{ transform: rotate(57deg); }
  61%{ transform: rotate(15deg); }
  70%{ transform: rotate(38deg); }
  88%{ transform: rotate(6deg); }
  100%{ transform: rotate(0deg); }
}

/* ── Held in hand ──────────────────────────────────────────────────
   Picked up, it curls forward: the whole body leans and shrinks a
   little, the legs come up, both arms tuck in, and the shadow falls
   away because it is no longer near the ground. The pose lives on
   #tgrTuck rather than #tgrFloat so it never fights the idle float
   animation — the two target the same property, and sharing a layer
   would make the release snap instead of easing back.

   Every one of these carries its own transition, so letting go is as
   smooth as picking up, with a little overshoot as it unfurls. */
#tgrTuck{
  transform-box: view-box; transform-origin: 100px 205px;
  transition: transform .38s cubic-bezier(.34,1.32,.5,1);
}
#tgrLegs{
  transform-box: view-box; transform-origin: 100px 188px;
  transition: transform .38s cubic-bezier(.34,1.32,.5,1);
}
/* Both arms pivot at their own shoulder, and the orb rides with the arm
   that holds it so the hand never leaves it. The signs matter: the free
   arm hangs down-and-left of its shoulder, so a NEGATIVE rotation swings
   that hand toward the chest, while the orb arm reaches down-and-right
   of its own, so it needs a positive one to come in. Getting these
   backwards splays the arms out instead of tucking them. */
#tgrArmOrb, #tgrOrb{
  transform-box: view-box; transform-origin: 135px 107px;
  transition: transform .38s cubic-bezier(.34,1.32,.5,1);
}
.tgr-stage.tgr-held{ cursor: grabbing; }
.tgr-stage.tgr-held #tgrTuck{ transform: scale(.88) rotate(-6deg); }
.tgr-stage.tgr-held #tgrLegs{ transform: rotate(14deg); }
.tgr-stage.tgr-held #tgrArmOrb,
.tgr-stage.tgr-held #tgrOrb{ transform: rotate(20deg); }
/* The free arm swings slightly OUTWARD, never inward. The arm is rigid
   and 79 units long, so every inward angle puts the hand somewhere on
   the pelvis — measured, not guessed: -16deg already lands in it. The
   curl is carried by the body and the legs instead, and this arm just
   dangles clear. */
.tgr-stage.tgr-held #tgrArmWave{
  transform: rotate(14deg);
  transition: transform .38s cubic-bezier(.34,1.32,.5,1);
}
/* Paused rather than cancelled, so both resume from where they were. */
.tgr-stage.tgr-held #tgrHead,
.tgr-stage.tgr-held #tgrFloat{ animation-play-state: paused; }
.tgr-stage.tgr-held #tgrShadow{
  animation-play-state: paused;
  opacity: .14;
  transition: opacity .3s ease;
}

/* ── Letting go ────────────────────────────────────────────────────
   Dropped anywhere, it drifts back to the nearer side along the exact
   horizon it was left on — a long ease-out, not a snap. */
.tgr-stage.tgr-settling{
  transition: left var(--tgr-settle, 1150ms) cubic-bezier(.19,.72,.28,1),
              top  var(--tgr-settle, 1150ms) cubic-bezier(.19,.72,.28,1);
}
/* It leans into the direction it is travelling and straightens as it
   arrives, so a throw carries weight instead of sliding flat. The lean
   angle and the duration both come from the speed of the throw. */
.tgr-stage.tgr-settling #tgrTuck{
  animation: tgrLean var(--tgr-settle, 1150ms) cubic-bezier(.19,.72,.28,1);
}
@keyframes tgrLean{
  0%   { transform: rotate(var(--tgr-lean, 0deg)) scale(.94); }
  45%  { transform: rotate(calc(var(--tgr-lean, 0deg) * .5)) scale(1.01); }
  100% { transform: rotate(0deg) scale(1); }
}

/* ── The warp ──────────────────────────────────────────────────────
   Out: collapses inward with a spin and a blur, as if pulled through a
   point. In: snaps back with an overshoot so it lands with weight
   instead of simply appearing. */
.tgr-stage.tgr-warp-out .tgr-svg{ animation: tgrWarpOut .5s cubic-bezier(.6,-0.2,.9,.3) forwards; }
@keyframes tgrWarpOut{
  0%{ transform: scale(1) rotate(0deg); opacity: 1; filter: blur(0); }
  70%{ transform: scale(.28) rotate(150deg); opacity: .85; filter: blur(1px); }
  100%{ transform: scale(0) rotate(260deg); opacity: 0; filter: blur(4px); }
}
.tgr-stage.tgr-side-left.tgr-warp-out .tgr-svg{ animation-name: tgrWarpOutL; }
@keyframes tgrWarpOutL{
  0%{ transform: scaleX(-1) scale(1) rotate(0deg); opacity: 1; filter: blur(0); }
  70%{ transform: scaleX(-1) scale(.28) rotate(150deg); opacity: .85; filter: blur(1px); }
  100%{ transform: scaleX(-1) scale(0) rotate(260deg); opacity: 0; filter: blur(4px); }
}

.tgr-stage.tgr-warp-in .tgr-svg{ animation: tgrWarpIn .62s cubic-bezier(.16,1.5,.4,1) forwards; }
@keyframes tgrWarpIn{
  0%{ transform: scale(0) rotate(-180deg); opacity: 0; filter: blur(4px); }
  60%{ opacity: 1; filter: blur(0); }
  100%{ transform: scale(1) rotate(0deg); opacity: 1; filter: blur(0); }
}
.tgr-stage.tgr-side-left.tgr-warp-in .tgr-svg{ animation-name: tgrWarpInL; }
@keyframes tgrWarpInL{
  0%{ transform: scaleX(-1) scale(0) rotate(-180deg); opacity: 0; filter: blur(4px); }
  60%{ opacity: 1; filter: blur(0); }
  100%{ transform: scaleX(-1) scale(1) rotate(0deg); opacity: 1; filter: blur(0); }
}
.tgr-stage.tgr-hidden .tgr-svg{ opacity: 0; }

/* The portal: a ring that irises shut over the vanishing point and
   bursts back open where the character lands. */
.tgr-portal{
  position: absolute;
  top: 50%; left: 50%;
  width: 74px; height: 74px;
  margin: -37px 0 0 -37px;
  border-radius: 50%;
  border: 2px solid rgba(70,216,255,.9);
  box-shadow: 0 0 24px rgba(70,216,255,.75), inset 0 0 18px rgba(70,216,255,.5);
  opacity: 0;
  pointer-events: none;
}
.tgr-stage.tgr-warp-out .tgr-portal{ animation: tgrPortalClose .5s ease-in forwards; }
@keyframes tgrPortalClose{
  0%{ transform: scale(1.25); opacity: 0; }
  35%{ transform: scale(1); opacity: 1; }
  100%{ transform: scale(.05); opacity: 0; }
}
.tgr-stage.tgr-warp-in .tgr-portal{ animation: tgrPortalOpen .55s ease-out forwards; }
@keyframes tgrPortalOpen{
  0%{ transform: scale(.05); opacity: 0; }
  30%{ transform: scale(1); opacity: 1; }
  100%{ transform: scale(1.5); opacity: 0; }
}

/* ── Speech bubble ─────────────────────────────────────────────────── */
.tgr-bubble{
  position: absolute;
  bottom: 100%;
  right: 46px;
  margin-bottom: 4px;
  width: max-content;
  max-width: 170px;
  padding: 9px 13px;
  border-radius: 13px 13px 3px 13px;
  background: linear-gradient(180deg,#ffffff,#eef3fb);
  color: #0d1e3d;
  font-family:'Tajawal',system-ui,sans-serif;
  font-size: .78rem; font-weight: 700; line-height: 1.5; text-align: center;
  box-shadow: 0 10px 26px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(6px) scale(.9);
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,1.3,.4,1);
  pointer-events: none;
}
.tgr-stage.tgr-side-left .tgr-bubble{
  right: auto; left: 46px;
  border-radius: 13px 13px 13px 3px;
}
.tgr-stage.tgr-say .tgr-bubble{ opacity: 1; transform: translateY(0) scale(1); }

@media (prefers-reduced-motion: reduce){
  #tgrFloat, #tgrOrb, #tgrHead, #tgrShadow{ animation: none; }
  .tgr-stage.tgr-warp-out .tgr-svg,
  .tgr-stage.tgr-warp-in .tgr-svg,
  .tgr-stage.tgr-wave #tgrArmWave,
  .tgr-stage.tgr-wave #tgrHand{ animation: none; }
  #tgrTuck, #tgrLegs, #tgrArmOrb, .tgr-stage.tgr-settling{ transition: none; }
  .tgr-stage.tgr-settling #tgrTuck{ animation: none; }
  .tgr-portal{ display: none; }
}

/* ── Chat panel ────────────────────────────────────────────────────── */
.tgr-panel{
  position: fixed;
  bottom: 0; right: 18px;
  width: min(360px, calc(100vw - 24px));
  height: min(560px, calc(100vh - 90px));
  max-height: 78vh;
  z-index: 1060;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg,#0e1a33,#070d1c);
  border: 1px solid rgba(120,160,220,.22);
  border-bottom: none;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -20px 60px rgba(0,0,0,.55);
  transform: translateY(105%);
  transition: transform .42s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.tgr-panel.tgr-panel-open{ transform: translateY(0); }

.tgr-panel-head{
  display:flex; align-items:center; gap:10px;
  padding: 13px 15px;
  border-bottom: 1px solid rgba(120,160,220,.16);
  background: rgba(255,255,255,.03);
}
.tgr-panel-title{ font-family:'Tajawal',system-ui,sans-serif; font-weight:800; color:#eef4ff; font-size:.95rem; line-height:1.25; }
.tgr-panel-sub{ font-size:.67rem; color:#8aa0c4; font-weight:600; }
.tgr-close{
  margin-inline-start:auto;
  width:30px; height:30px; border-radius:9px; border:1px solid rgba(120,160,220,.2);
  background:rgba(255,255,255,.04); color:#8aa0c4; cursor:pointer; font-size:.9rem; line-height:1;
}
.tgr-close:hover{ background:rgba(255,255,255,.09); color:#eef4ff; }

.tgr-log{
  flex:1; overflow-y:auto; padding:15px; display:flex; flex-direction:column; gap:10px;
  font-family:'Tajawal',system-ui,sans-serif;
}
.tgr-msg{ max-width:85%; padding:10px 13px; border-radius:14px; font-size:.86rem; line-height:1.65; }
.tgr-msg.user{ align-self:flex-end; background:rgba(70,216,255,.16); border:1px solid rgba(70,216,255,.3); color:#eef4ff; }
.tgr-msg.bot{ align-self:flex-start; background:rgba(255,255,255,.05); border:1px solid rgba(120,160,220,.16); color:#eef4ff; }
.tgr-cta-btn{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  padding:9px 16px; border-radius:99px; text-decoration:none;
  background:linear-gradient(135deg,#b07d1c,#f0c84a); color:#3a2600;
  font-weight:800; font-size:.8rem;
}

/* The thinking state is the brand mark itself, spinning — fast out of
   the gate and easing down, the way a wheel loses momentum, so the wait
   reads as the mark turning rather than a generic spinner. */
.tgr-thinking{ align-self:flex-start; display:flex; align-items:center; gap:9px; padding:4px 2px; }
.tgr-thinking-mark{ width:26px; height:26px; animation: tgrThink 1.35s cubic-bezier(.12,.75,.2,1) infinite; }
@keyframes tgrThink{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}
.tgr-thinking-txt{ font-size:.76rem; color:#8aa0c4; font-weight:600; }

.tgr-input-row{
  display:flex; gap:8px; padding:11px 13px;
  border-top:1px solid rgba(120,160,220,.16);
  background: rgba(255,255,255,.02);
}
.tgr-input-row textarea{
  flex:1; resize:none; min-height:40px; max-height:96px;
  background:rgba(255,255,255,.04); border:1px solid rgba(120,160,220,.2); border-radius:11px;
  color:#eef4ff; padding:10px 12px; font-family:'Tajawal',system-ui,sans-serif; font-size:.86rem;
}
.tgr-input-row textarea:focus{ outline:none; border-color:rgba(70,216,255,.45); }
.tgr-input-row button{
  width:42px; height:42px; flex-shrink:0; border-radius:11px; border:none; cursor:pointer;
  background:linear-gradient(135deg,#2b6adf,#46d8ff); color:#04101f;
  display:flex; align-items:center; justify-content:center;
}
.tgr-input-row button:disabled{ opacity:.5; cursor:default; }
.tgr-input-row button svg{ width:18px; height:18px; }

@media (max-width:560px){
  .tgr-stage{ width:66px; height:107px; right:12px; bottom:max(140px, 24vh); }
  .tgr-stage.tgr-side-left{ left:12px; }
  .tgr-portal{ width:56px; height:56px; margin:-28px 0 0 -28px; }
  .tgr-bubble{ right:36px; max-width:140px; font-size:.73rem; }
  .tgr-stage.tgr-side-left .tgr-bubble{ left:36px; }
  .tgr-panel{ right:0; width:100%; border-radius:16px 16px 0 0; }
}