/* Shadow Girl — flat Figma translation.
   Artboard: 1440 × 10808. Video positions pulled from Figma metadata:
     - video-scrollytelling  (frame 105:2431): x=0,   y=2055, w=1443, h=1049
     - video-tutorial        (frame 94:593 ): x=224, y=3263, w=992,  h=622
     - video-encoding        (frame 94:606 ): x=226, y=4279, w=992,  h=622
     - video-walkstreak      (frame 94:768 ): x=226, y=8288, w=992,  h=622
   If Grace's exported JPG has different proportions, tune --sg-art-w/h below. */

.flat--shadow-girl {
  --sg-art-w: 1440;
  --sg-art-h: 10808;
  background: var(--surface);
}

/* ----------------- Video overlays ----------------- */

.sg-video {
  /* All share the same % basis */
  width: calc(var(--sg-w, 992) / var(--sg-art-w) * 100%);
  height: calc(var(--sg-h, 622) / var(--sg-art-h) * 100%);
  left:   calc(var(--sg-x, 226) / var(--sg-art-w) * 100%);
  top:    calc(var(--sg-y, 0)   / var(--sg-art-h) * 100%);
}

.sg-video--scrollytelling {
  --sg-x: 0;
  --sg-y: 2055;
  --sg-w: 1443;
  --sg-h: 1049;
}

.sg-video--tutorial {
  --sg-x: 224;
  --sg-y: 3263;
  --sg-w: 992;
  --sg-h: 622;
}

.sg-video--encoding {
  --sg-x: 226;
  --sg-y: 4279;
  --sg-w: 992;
  --sg-h: 622;
}

.sg-video--walkstreak {
  --sg-x: 226;
  --sg-y: 8288;
  --sg-w: 992;
  --sg-h: 622;
}

/* ----------------- Back / next hotspots -----------------
   "back and next" Figma instance on Shadow Girl sits at y=10251, h=649.
   Split horizontally: left half = back, right half = next. */
.flat__hotspot--back,
.flat__hotspot--next {
  top:    calc(10251 / var(--sg-art-h) * 100%);
  height: calc(649   / var(--sg-art-h) * 100%);
}

.flat__hotspot--back {
  left:  0;
  width: 50%;
}

.flat__hotspot--next {
  left:  50%;
  width: 50%;
}

/* "Link to Project" pill — positioned under the SHADOWGIRL title.
   Figma node 107:287 at x=114, y=1279 (abs), w=239, h=60 on a 1440 × 10808 artboard. */
.sg-link-to-project {
  left:   calc(114  / var(--sg-art-w, 1440) * 100%);
  top:    calc(1279 / var(--sg-art-h) * 100%);
  width:  calc(239  / var(--sg-art-w, 1440) * 100%);
  height: calc(60   / var(--sg-art-h) * 100%);
}