/* chango.fit/3d-figure/ (scripts/build-figure-page.py), on top of home.css (the top bar, the
   wait list section and the footer are the front page's). Figma: Piirtopöytä,
   Chango • Verkkosivu • 3D-hahmo: desktop 5095:1599 (1280), mobile 5114:2101 (402).
   Text styles as on the front page: H2 56/65, Alaotsikko 24/32, Leipäteksti 21/32. */

/* ---- Top: the gym, the three glowing figures in the dark look ---- */
.f-hero{position:relative; z-index:2; height:760px; overflow:hidden; background:var(--blue80); color:#fff}
.f-hero-bg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.f-hero::before{content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(to right, rgba(20,31,51,.55), rgba(20,31,51,.15) 60%, rgba(20,31,51,0))}
.f-hero-in{position:absolute; z-index:3; left:max(16px, calc(50% - 553px)); top:230px; width:560px}
.f-hero h1{margin:0; font-size:72px; line-height:84px; font-weight:400; letter-spacing:-1.44px; color:#fff}
/* the display line on its own line, set on the Figtree baseline grid: as a block its own metrics lifted it (Jenni 25.10.2026: "rivivälit") */
.f-hero h1 em, .f-sec h2 em{line-height:0}
.f-lead{width:520px; max-width:100%; margin:21px 0 0; font-size:23px; line-height:34px; font-weight:300; color:#fff}
.f-more{display:inline-flex; gap:8px; margin-top:62px; padding:12px 22px; border-radius:999px; background:rgba(255,255,255,.14);
  box-shadow:0 8px 24px rgba(31,51,89,.14); color:#fff; font-size:18px; line-height:24.3px; font-weight:600; text-decoration:none}
/* the figures stand from the middle to the right edge (Figma: Chango 617, the woman 778, the man 867 of 1280) */
.f-hero-figs{position:absolute; z-index:2; inset:0}
.f-hero-figs img{position:absolute; height:auto}
/* Figma's Varjo under each figure (two ellipses, Hahmo • kuva), behind the figures */
.f-shadow{position:absolute; pointer-events:none}
.f-hero-figs .f-shadow{z-index:0}
.sh-female{left:calc(50% + 148px); top:652px; width:270px; height:70px}
.sh-male{left:calc(50% + 238px); top:670px; width:299px; height:75px}
.sh-ape{left:calc(50% - 23px); top:654px; width:243px; height:68px}
.f-hero-female{left:calc(50% + 138px); top:147px; width:302px}
.f-hero-male{left:calc(50% + 227px); top:125px; width:327px}
/* Chango fits its box by width (Figma 5089:1957: 237 × 450, the image object-contain), so it is smaller than the people */
.f-hero-ape{left:calc(50% - 31px); top:378px; width:253px}

/* ---- The sections: text and a big picture side by side, the backgrounds taking turns ---- */
.f-sec{display:grid; grid-template-columns:520px 1fr; align-items:center; gap:0 66px; min-height:860px;
  padding:100px max(16px, calc(50% - 553px)); background:#fff; color:var(--blue80); box-sizing:border-box}
.f-blue{background:var(--blue2)}
.f-flip .f-text, .f-why .f-text{order:2}
.f-flip .f-vis, .f-why .f-vis{order:1}
.f-sec h2{margin:0; font-size:56px; line-height:65px; font-weight:400; letter-spacing:-1.12px; color:var(--blue80)}
.f-sub{margin:24px 0 0; font-size:24px; line-height:32px; font-weight:600; color:var(--blue80)}
.f-body{margin-top:16px}
.f-body p{margin:0; font-size:21px; line-height:32px; font-weight:300; color:#000}
.f-body p + p{margin-top:32px}
.f-vis{position:relative; justify-self:center}

/* white notes and cards on the pictures (Figma Lappu, Kortti): not buttons */
.f-note, .f-card{position:absolute; display:inline-flex; align-items:center; gap:10px; background:#fff; box-shadow:0 8px 24px rgba(31,51,89,.14);
  color:var(--blue80); font-size:18px; line-height:24.3px; white-space:nowrap}
.f-note{padding:12px 22px; border-radius:999px; font-weight:400}
.f-card{padding:12px 20px 12px 16px; border-radius:16px; font-weight:600}

/* 1 Chango sits and wonders (Figma 5095:1628) */
.f-thinking{width:540px; height:600px}
.f-thinking img{position:absolute; left:20px; top:100px; width:500px; height:500px}
.f-thinking::before{content:""; position:absolute; left:-83px; top:483px; width:736px; height:124px;
  background:radial-gradient(closest-side, rgba(32,37,70,.18), rgba(32,37,70,0)); pointer-events:none}
.f-thinking .n1{left:0; top:50px}
.f-thinking .n2{left:240px; top:10px}
.f-thinking .n3{left:355px; top:87px}

/* 2 The man after a chest press, the muscle list on his right (Figma 5095:1641, 5107:847) */
.f-press{width:530px; height:680px; justify-self:end}
.f-press .f-fig{position:absolute; left:0; top:0; width:358px; height:auto}
.f-press .f-shadow{left:18px; top:598px; width:328px; height:83px}
.f-list{position:absolute; left:379px; top:66px; width:150px}
.f-list-title{display:block; font-size:18px; line-height:27px; font-weight:800}
.f-list ul{margin:26px 0 0; padding:0; list-style:none}
.f-list li{position:relative; margin-top:16px; font-size:15px; line-height:22px; font-weight:600}
.f-list li b{display:block; font-weight:600}
.f-bar{display:block; height:10px; margin-top:3px; border-radius:5px; background:var(--blue10)}
.f-bar i{display:block; height:100%; border-radius:5px; background:linear-gradient(90deg, var(--yellow), var(--orange))}
/* the line from the muscle to its bar, with a dot on the muscle */
.f-list li::before{content:""; position:absolute; top:30px; right:calc(100% + 14px); height:1.5px; background:var(--yellow)}
.f-list li::after{content:""; position:absolute; top:24px; width:14px; height:14px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 2px #fff}
.f-list .m-delts::before{width:114px}
.f-list .m-delts::after{right:calc(100% + 128px)}
.f-list .m-chest::before{width:165px}
.f-list .m-chest::after{right:calc(100% + 179px)}

/* 3 The glow video (Video's loop from the App Store video, 886 × 1460) */
.f-video video{display:block; width:400px; height:auto; border-radius:16px; background:#141f33 var(--poster, none) center / cover no-repeat;
  box-shadow:3px 12px 28px rgba(32,37,70,.2), 13px 50px 51px rgba(32,37,70,.17), 28px 112px 69px rgba(32,37,70,.1)}
/* iPhone paints the element white until its first frame (fix-web-3d-video, Jenni 25.10.2026):
   the picture under it shows the poster on the dark ground, the video only once it plays */
.f-video video.f-wait{opacity:0}
.f-video{position:relative; width:fit-content; margin-inline:auto}
.f-video::before{content:""; position:absolute; inset:0; border-radius:16px; background:#141f33 var(--poster, none) center / cover no-repeat}
.f-video video{position:relative; transition:opacity .25s}
.f-glow{min-height:1000px}

/* 4, 6, 7 The app in a phone (frame and screen in one picture) */
.f-phone-wrap{width:388px}
.f-phone{display:block; width:388px; height:auto;
  filter:drop-shadow(3px 12px 14px rgba(32,37,70,.2)) drop-shadow(13px 50px 26px rgba(32,37,70,.17)) drop-shadow(28px 112px 35px rgba(32,37,70,.1))}
.f-periods .f-phone-wrap{justify-self:end; margin-right:46px}
/* Video's clip of the screen over the phone's picture (card web-klipit-3d-puhelimet): the screen's place in the
   387.4 × 767 frame, so it scales with the phone */
.f-clip{position:absolute; left:9.06%; top:4.41%; width:83.22%; height:90%; object-fit:cover; border-radius:15.7% / 7.35%; background:transparent; transition:opacity .25s}
/* iPhone paints a video white until its first frame, and Low Power Mode never plays it: the clip stays
   invisible (f-wait, figure.js) until a frame is really drawn, the phone picture's own screen shows under it */
.f-clip.f-wait{opacity:0}
.f-clip-kehitys{left:9.03%; top:5.03%; width:83.12%; height:88.92%}
@media (min-width:1100px){ .f-recovery .f-text{width:420px} }

/* the pickers: the period on the phone and the figure over the turning figure (Figma Jaksovalitsin, Hahmovalitsin) */
.f-picker{display:inline-flex; gap:4px; padding:6px; border-radius:999px; background:var(--blue2); box-shadow:0 12px 32px rgba(31,51,89,.3)}
.f-chip{padding:12px 22px; border:0; border-radius:999px; background:none; color:var(--blue80); font:600 18px/normal var(--font); white-space:nowrap}
.f-chip.on{background:var(--blue80); color:#fff}
button.f-chip{cursor:pointer}

/* 5 Turn the figure (Figma 5095:1728): the text, the picker and the figure in the middle */
.f-turn{grid-template-columns:1fr; justify-items:center; min-height:1409px; padding-top:140px; padding-bottom:120px}
.f-center{width:700px; max-width:100%; text-align:center}
.f-turn .f-picker{margin-top:53px}
.f-rot{position:relative; width:420px; height:640px; margin-top:42px; touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none; outline:none}
.f-rot:active{cursor:grabbing}
.f-rot .f-rot-img{position:absolute; left:50%; top:0; height:100%; width:auto; transform:translateX(-50%); pointer-events:none}
.f-rot .f-shadow{left:50%; top:563px; width:321px; height:78px; transform:translateX(-50%)}
/* Chango's picture is wider (its tail): it fits the people's width, so it stands smaller, feet on the same floor
   (Figma Hahmo • kuva, not the large one; Jenni 25.10.2026) */
.f-rot[data-fig="ape"] .f-rot-img{top:auto; bottom:0; height:auto; width:350px}
.f-rot:focus-visible{outline:2px solid var(--blue80); outline-offset:8px; border-radius:16px}
.f-drag{display:flex; gap:8px; margin:24px 0 0; font-size:18px; line-height:24.3px; font-weight:600; color:var(--blue80)}

/* 7 The other workouts */
.f-cards{position:relative; display:flex; gap:12px; margin-top:32px}
.f-cards .f-card{position:static}
.f-cards img{display:block; width:22px; height:22px}
.f-other .f-phone-wrap{justify-self:end}
.f-run{left:-220px; top:200px}
.f-padel{left:-180px; top:280px}

/* ---- Phones and small tablets: text, then the picture (Figma 5114:2101: H2 30, Alaotsikko 19, Leipäteksti 17) ---- */
@media (max-width:1099px){
  .f-hero{height:auto; display:flow-root}
  .f-hero-bg{object-position:30% top}
  .f-hero-in{position:relative; left:auto; top:auto; width:auto; max-width:var(--u); margin:0 auto; padding:160px 16px 0; box-sizing:border-box}
  .f-hero h1{font-size:32px; line-height:38px; letter-spacing:-.64px}
  .f-lead{margin-top:12px; font-size:17px; line-height:26px}
  .f-more{margin-top:20px}
  .f-hero-figs{position:relative; inset:auto; width:370px; height:414px; max-width:calc(100% - 32px); margin:32px auto 48px}
  /* Figma 5114:2173 (the mirrored figures give their right edge as x) */
  .f-hero-female{left:103px; top:14px; width:194px}
  .f-hero-male{left:160px; top:0; width:210px}
  .f-hero-ape{left:-5px; top:163px; width:162px}
  .sh-female{left:109px; top:339px; width:174px; height:45px}
  .sh-male{left:167px; top:351px; width:192px; height:48px}
  .sh-ape{left:0; top:339px; width:156px; height:43px}

  .f-sec, .f-turn, .f-glow{display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:64px 16px; gap:0}
  .f-flip .f-text, .f-why .f-text, .f-flip .f-vis, .f-why .f-vis{order:0}
  .f-text, .f-center{width:auto; max-width:var(--u); margin:0 auto}
  .f-center{text-align:left}
  .f-sec h2{font-size:30px; line-height:38px; letter-spacing:-.6px}
  .f-sub{margin-top:16px; font-size:19px; line-height:26px}
  .f-body{margin-top:12px}
  .f-body p{font-size:17px; line-height:26px}
  .f-body p + p{margin-top:26px}
  .f-vis{align-self:center; margin-top:32px}
  .f-note, .f-card{font-size:16px; line-height:24px}
  .f-note{padding:9px 16px}

  /* the questions above and beside Chango, never over the eyes (Jenni 1.11.2026: "Ei silmien päälle tekstiä") */
  .f-thinking{width:min(370px, 100%); height:410px}
  .f-thinking img{left:35px; top:106px; width:300px; height:300px}
  .f-thinking::before{left:-36px; top:337px; width:442px; height:74px}
  .f-thinking .n1{left:0; top:56px}
  .f-thinking .n2{left:auto; right:0; top:0}
  .f-thinking .n3{left:auto; right:0; top:250px}
  .f-thinking img{left:50%; margin-left:-150px}
  .f-thinking::before{left:50%; margin-left:-221px}

  .f-press{width:370px; height:400px; justify-self:auto}
  .f-press .f-fig{left:-6px; width:211px}
  .f-press .f-shadow{left:4px; top:352px; width:193px; height:49px}
  .f-list{left:228px; top:5px; width:130px}
  .f-list li::before, .f-list li::after{display:none}
  .f-list ul{margin-top:14px}
  .f-list li{margin-top:12px}
  .f-bar{height:8px}

  .f-video video{width:280px; border-radius:12px}
  .f-video::before{border-radius:12px}
  .f-phone-wrap, .f-periods .f-phone-wrap{width:283px; margin-right:0}
  .f-phone{width:283px}
  
  .f-turn{align-items:center}
  .f-turn .f-picker{margin-top:28px}
  .f-rot{width:300px; height:420px; margin-top:28px}
  .f-rot[data-fig="ape"] .f-rot-img{width:230px}
  .f-rot .f-shadow{top:369px; width:211px; height:51px}
  .f-drag{margin-top:24px}

  .f-cards{flex-direction:column; align-items:flex-start; gap:10px; margin-top:20px}
  .f-other .f-phone-wrap{width:279px; margin:40px 0 0 auto}
  .f-other .f-phone{width:279px}
  .f-run{left:-99px; top:90px}
  .f-padel{left:-79px; top:154px}
}
@media (max-width:420px){
  .f-chip{padding:12px 16px}
}

/* ---- The glow lights up (card web-3d-hahmot-animaatio): the glowing picture fades in over the same figure
   without it, and the muscle bars fill with it; again each time the picture comes into view (figure.js .run).
   Without the script or with reduced motion the figures just glow. ---- */
/* the loop starts and ends lit, as the page loads, so nothing blinks off (Jenni 25.10.2026): fade out, then light up again */
@keyframes f-light{0%, 20%{opacity:1} 45%, 55%{opacity:0} 85%, 100%{opacity:1}}
@keyframes f-fill{0%, 20%{transform:scaleX(1)} 45%, 55%{transform:scaleX(0)} 85%, 100%{transform:scaleX(1)}}
.f-anim.run .f-lit{animation:f-light 6s ease-in-out infinite}
/* each figure at its own pace, so they drift apart and never glow in step (Jenni 25.10.2026) */
.f-anim.run .f-hero-female.f-lit{animation-duration:6.4s}
.f-anim.run .f-hero-male.f-lit{animation-duration:8.2s; animation-delay:1.1s}
.f-anim.run .f-hero-ape.f-lit{animation-duration:5.1s; animation-delay:2.3s}
.f-anim.run .f-bar i{transform-origin:left center; animation:f-fill 6s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){
  .f-anim.run .f-lit, .f-anim.run .f-bar i{animation:none}
}