/* ============================================================
   SEMI mascot (the fox) — decorative accent. Desktop by default; a host
   that passes 'touch' => true to the layout (the login card) shows it on
   every device — static pose, blinks, boops on tap.
   Markup: html/layouts/semi/mascot.php · behaviour: js/semi-mascot.js
   Sheets: images/mascot/fox-{directions,reactions}.webp (3×3 cells).

   The fox sits absolutely in the TOP-RIGHT corner of its host (an element
   with .semi-mascot-host); per-host size/offsets are the three custom
   properties below — tune those, not the rules. A negative top lets the
   head peek over the host's edge while the body (which fades out in the
   artwork) stays inside.
   ============================================================ */

/* Deploy marker: 2026-09-17 — login host shown on touch/mobile too (.semi-mascot--touch). */
.semi-mascot {
  --semi-mascot-size: 128px;
  --semi-mascot-top: -30px;
  --semi-mascot-right: 18px;
  display: none; /* default: phones, tablets, coarse pointers, print */
  position: absolute;
  top: var(--semi-mascot-top);
  right: var(--semi-mascot-right);
  width: var(--semi-mascot-size);
  height: var(--semi-mascot-size);
  z-index: 3;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; /* tap = boop, without the double-tap-zoom delay */
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s var(--semi-ease, ease);
}
.semi-mascot.is-ready {
  opacity: 1;
  pointer-events: auto;
}

.semi-mascot-host { position: relative; }

/* Default gate: a real cursor to follow and room for the 128 px pose. */
@media (hover: hover) and (pointer: fine) and (min-width: 992px) {
  .semi-mascot { display: block; }
}

/* Touch-friendly hosts (the login card passes 'touch' => true to the layout):
   shown on every device and width. Without a fine pointer the JS mounts a
   static centre pose that still blinks and boops on tap. */
.semi-mascot--touch { display: block; }

.semi-mascot__squash {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 78%;
}

.semi-mascot__layer {
  position: absolute;
  inset: 0;
  background-size: 300% 300%;
  background-repeat: no-repeat;
  background-position: 50% 50%; /* centre cell until JS aims */
}

/* Directions sheet shows by default; the reactions sheet is swapped in
   instantly (no crossfade — that is the blink). */
.semi-mascot__rx { opacity: 0; }
.semi-mascot.is-reacting .semi-mascot__dir { opacity: 0; }
.semi-mascot.is-reacting .semi-mascot__rx { opacity: 1; }

/* ---- Hosts ---- */

/* Calendar card (view=calendar): the view switcher and month browser are
   centred, so the card's top-right corner is free. Hidden while the
   calendar is locked behind the profile gate (it would only get blurred). */
#eb-calendarwrap .semi-mascot {
  --semi-mascot-size: 128px;
  --semi-mascot-top: -30px;
  --semi-mascot-right: 18px;
}
.semi-cal-shell.is-locked .semi-mascot { display: none; }

/* Login card (home page for guests): perched on the card's top-right edge,
   level with the "Prisijungimas" title, which is left-aligned. Shown on
   phones/tablets too (touch host): smaller there and peeking less over the
   edge, so the head stays inside the gap below the stacked hero text. */
.custom-login-box .semi-mascot {
  --semi-mascot-size: 116px;
  --semi-mascot-top: -32px;
  --semi-mascot-right: 22px;
}
@media (max-width: 900px) { /* .login-split stacks: hero above the card */
  .custom-login-box .semi-mascot {
    --semi-mascot-size: 96px;
    --semi-mascot-top: -22px;
    --semi-mascot-right: 16px;
  }
}
@media (max-width: 640px) {
  .custom-login-box .semi-mascot {
    --semi-mascot-size: 84px;
    --semi-mascot-top: -18px;
    --semi-mascot-right: 12px;
  }
}

@media print {
  .semi-mascot { display: none !important; }
}