/* ── Skrytmätaren — resultatmätare ────────────────────────────────────────────
   Halvcirkel-mätare med gradient, fem textzoner och en roterande pil.
   Käll-geometri hämtad från Figma (node 2001:120, "Skrytmätare 2").
   Skalar responsivt via container query units (cqw) — inga JS-mätningar krävs.
*/

.sm-gauge {
  --sm-gauge-max-width: 820px;
  --sm-gauge-shadow: 0 18px 40px -12px rgba(20, 40, 40, .35);
  width: 100%;
  max-width: var(--sm-gauge-max-width);
  margin: 0 auto;
}

.sm-gauge-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1745 / 884;
  container-type: inline-size;
  container-name: sm-gauge-stage;
}

.sm-gauge-art {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(var(--sm-gauge-shadow));
}

/* Reveal: whole graphic settles in on first paint */
.sm-gauge-art {
  opacity: 0;
  transform: scale(.92) translateY(10px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .9, .25, 1.1);
}
.sm-gauge.is-ready .sm-gauge-art {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* Needle overlay: separate SVG stacked after the zone labels in the DOM, so
   the needle is always on top — of the fill art, the zone text, and MEGA's
   wordmark alike — instead of depending on which layer happens to paint last.
   Mirrors .sm-gauge-art's reveal timing, minus its big silhouette drop-shadow
   (the needle already has its own tighter per-path shadow).
   z-index must beat .sm-gauge-zone.is-active's z-index:1 below — .sm-gauge-zones
   never becomes its own stacking context, so that z-index otherwise escapes
   straight up to this level and floats the active zone's text above the needle
   once a real score lands, regardless of DOM order. */
.sm-gauge-needle-art {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transform: scale(.92) translateY(10px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.2, .9, .25, 1.1);
}
.sm-gauge.is-ready .sm-gauge-needle-art {
  opacity: 1;
  transform: scale(1) translateY(0);
}

/* ── Gradient fill ─────────────────────────────────────────────────────── */

.sm-gauge-fill {
  transition: opacity .5s ease;
}

.sm-gauge-shine {
  fill: #fff;
  mix-blend-mode: overlay;
  opacity: 0;
  transform: translateX(-420px);
}
.sm-gauge.is-ready .sm-gauge-shine {
  opacity: .55;
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .35s, opacity .3s ease .35s, opacity 1s ease 1.1s;
  transform: translateX(1200px);
}

/* ── Needle ────────────────────────────────────────────────────────────── */

/* Rotation is set via the SVG transform ATTRIBUTE from JS —
   rotate(deg cx cy) in the element's own local coordinate space — not CSS
   transform, and eased by hand in gauge.js (see NEEDLE_EASING) rather than a
   CSS transition. This sidesteps a long-standing WebKit bug where
   `transform-box: view-box` — needed to make a CSS transform-origin resolve
   against the SVG viewBox instead of the element's own fill-box — is
   miscalculated in some Safari versions, making the needle visibly drift
   sideways as it rotates instead of pivoting on a fixed point. The native
   SVG attribute form has no such ambiguity: it has always rotated around an
   explicit point in local user space, in every browser, since SVG 1.1. */
.sm-gauge:not(.is-ready) .sm-gauge-needle {
  opacity: 0;
}
.sm-gauge.is-ready .sm-gauge-needle {
  opacity: 1;
  transition: opacity .3s ease;
}

/* ── MEGA-zonen (bygger på vektoriserad logotyp, animeras som grupp) ─────── */

.sm-gauge-mega-art {
  /* Same transform-box fix as .sm-gauge-needle above — pins the origin to
     the viewBox coordinate system instead of the browser-dependent default. */
  transform-box: view-box;
  transform-origin: 1400px 675px;
  transition: opacity .4s ease, transform .4s cubic-bezier(.3, 1.4, .4, 1);
  filter: drop-shadow(0 3px 8px rgba(20, 20, 20, .28));
}

/* ── Text zones (HTML overlay, redigerbar text) ───────────────────────── */

.sm-gauge-zones {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sm-gauge-zone {
  position: absolute;
  color: #fff;
  opacity: 0;
  transform: translateY(6px) scale(.94);
  transition: opacity .5s ease, transform .5s cubic-bezier(.3, 1.3, .4, 1);
}
.sm-gauge-zone[data-align="center"] {
  transform: translate(-50%, 6px) scale(.94);
}
.sm-gauge.is-ready .sm-gauge-zone {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.sm-gauge.is-ready .sm-gauge-zone[data-align="center"] {
  transform: translate(-50%, 0) scale(1);
}

/* FÖRSÖK IGEN's left-aligned text anchors right at the zone's Figma
   coordinate, which leaves it almost touching the dome's curved edge above
   it — nudge right for breathing room. It also sits close enough to the
   bottom rim that "IGEN" nearly touches it — nudge up too. SNYGGT SKRYT's
   right edge runs into the curve on its side too, though less severely —
   a much smaller nudge left. */
.sm-gauge-zone[data-key="forsok"] {
  margin-left: 1.6cqw;
  margin-top: -1.4cqw;
}
.sm-gauge-zone[data-key="snyggt"] {
  margin-left: -0.6cqw;
}

.sm-gauge-zone-eyebrow {
  margin: 0;
  font-size: clamp(14px, 2.2cqw, 16px);
  font-weight: 700;
  white-space: nowrap;
  opacity: .92;
}

/* OKEJ SKRYT's eyebrow ("Vi börjar närma oss") and SNYGGT SKRYT's
   ("Okej, imponerande") are long enough, centered this close to the dome's
   outer curve, that their near edge crosses into the white rim — nudge each
   inward, away from the curve on its own side. em-based so it scales with
   the eyebrow's own clamp()'d font-size instead of the container width. */
.sm-gauge-zone[data-key="okej"] .sm-gauge-zone-eyebrow {
  transform: translateX(.6em);
}
.sm-gauge-zone[data-key="snyggt"] .sm-gauge-zone-eyebrow {
  transform: translateX(-.6em);
}

.sm-gauge-zone-title {
  margin: .1em 0 0;
  font-size: clamp(16px, 4.6cqw, 32px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -.01em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* Below this rendered gauge width the eyebrow + multi-word title no longer
   have room between zone anchors and start overlapping (this is the gauge's
   own width, via container queries — not the viewport — so it degrades
   correctly regardless of how narrow the page around it is). Mobile keeps
   just the big title ("OKEJ SKRYT"); the smaller eyebrow line ("Vi börjar
   närma oss") only comes back once there's room, i.e. desktop breakpoints. */
@container sm-gauge-stage (max-width: 400px) {
  .sm-gauge-zone-eyebrow {
    display: none;
  }
}

/* Active zone gets emphasised once the final score lands */
.sm-gauge-zone.is-active .sm-gauge-zone-title,
.sm-gauge.is-ready .sm-gauge-mega-art.is-active {
  transform: scale(1.08);
}
.sm-gauge-zone.is-active {
  z-index: 1;
}
.sm-gauge-zone:not(.is-active).has-active,
.sm-gauge-mega-art:not(.is-active).has-active {
  opacity: .58;
}
.sm-gauge-zone.is-active .sm-gauge-zone-title {
  filter: drop-shadow(0 0 14px rgba(255, 255, 255, .55));
}
.sm-gauge-mega-art.is-active {
  filter: drop-shadow(0 3px 8px rgba(20, 20, 20, .28)) drop-shadow(0 0 16px rgba(255, 255, 255, .5));
}

/* Once a real result has landed, pulse the winning zone's title so it reads
   as "this is your result" rather than just another static label. is-active
   only gets set from setScore() (a real score), never by the idle demo. */
@keyframes sm-gauge-result-pulse {
  0%, 100% { transform: scale(1.08); }
  50%      { transform: scale(1.16); }
}
@media (prefers-reduced-motion: no-preference) {
  .sm-gauge-zone.is-active .sm-gauge-zone-title,
  .sm-gauge.is-ready .sm-gauge-mega-art.is-active {
    animation: sm-gauge-result-pulse 1.6s ease-in-out infinite;
  }
}

/* ── Numeric readout below the graphic ───────────────────────────────── */

.sm-gauge-score {
  margin-top: .85rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.sm-gauge-score-value {
  font-size: 2.75rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.03em;
}

.sm-gauge-score-suffix {
  font-size: .9rem;
  font-weight: 700;
  opacity: .55;
  margin-left: .35em;
}

@media (prefers-reduced-motion: reduce) {
  .sm-gauge-art,
  .sm-gauge-needle-art,
  .sm-gauge-needle,
  .sm-gauge-zone,
  .sm-gauge-shine,
  .sm-gauge-mega-art {
    transition-duration: .01ms !important;
  }
}