/* ==========================================================================
   Magic Narwhal — the mascot
   Flat fills, one ink outline weight, no gradients. Colour is assigned by
   role: cyan is the animal, blue is depth, cream + coral is the belly,
   acid yellow only ever appears as the glint travelling up the tusk.
   ========================================================================== */

.narwhal {
  width: min(100%, 44rem);
  height: auto;
  overflow: visible;
  transform: rotate(-2deg);
}

.narwhal * { vector-effect: non-scaling-stroke; }

/* --- fills (inside the silhouette, unstroked) ----------------------------- */

.nw-cyan       { fill: var(--cyan); }
.nw-blue-flat  { fill: var(--blue); }
.nw-cream      { fill: var(--cream); }
.nw-coral-flat { fill: var(--coral); }
.nw-cyan-soft  { fill: var(--cyan); opacity: .8; }
.nw-dots circle { fill: var(--blue); opacity: .55; }
.nw-ink        { fill: var(--ink); }
.nw-spark      { fill: var(--paper); }

/* --- stroked shapes ------------------------------------------------------- */

.nw-outline,
.nw-blue,
.nw-tusk {
  stroke: var(--ink);
  stroke-width: 9;
  stroke-linejoin: round;
}
.nw-outline { fill: none; }
.nw-blue    { fill: var(--blue); }
.nw-tusk    { fill: var(--cream); }

.nw-line {
  fill: none;
  stroke: var(--ink);
  stroke-width: 9;
  stroke-linecap: round;
}

.nw-stripes path {
  fill: none;
  stroke: var(--coral);
  stroke-width: 16;
}

/* --- the glint ------------------------------------------------------------ */
/* A bright band clipped to the tusk, running base → tip every few seconds.
   This is the one place acid yellow is allowed. */

.nw-glint rect { fill: var(--acid); }
.nw-glint {
  opacity: 0;
  animation: glint 7s var(--ease-out) infinite;
}
@keyframes glint {
  0%, 56%   { transform: translate(258px, 258px); opacity: 0; }
  62%       { opacity: 1; }
  84%, 100% { transform: translate(44px, 32px);   opacity: 0; }
}

/* --- sparkles ------------------------------------------------------------- */

.nw-star { fill: var(--coral); }
.nw-sparkles > g:nth-child(2) .nw-star { fill: var(--acid); }
.nw-pip  { fill: var(--cyan); stroke: var(--ink); stroke-width: 5; }

.nw-sparkles > g > * {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: twinkle 3.4s ease-in-out var(--d, 0s) infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .4; transform: scale(.85); }
  50%      { opacity: 1; transform: scale(1); }
}

/* --- hover ---------------------------------------------------------------- */
/* Holding station in open water, not swimming laps. */

.narwhal__body {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: hover 8s ease-in-out infinite;
}
@keyframes hover {
  0%, 100% { transform: translateY(0)     rotate(0deg); }
  50%      { transform: translateY(-2.4%) rotate(1.2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .nw-glint { opacity: .9; transform: translate(150px, 140px); }
  .nw-sparkles > g > * { opacity: .9; }
}