/* Flick section: the 3D phone with the live app (see flick-stage.js). Self-contained: uses the homepage tokens when
   they exist (--bg, --ink, --mute, --acc, --head, --f, --gut) and falls back to the same values. */
.fk{--fk-bg:var(--bg,#17191b);--fk-ink:var(--ink,#f0f3f1);--fk-mute:var(--mute,#b0b9b4);--fk-acc:var(--acc,#43c25b);
  --fk-head:var(--head,"Bricolage Grotesque","Onest",system-ui,sans-serif);--fk-f:var(--f,"Onest",system-ui,-apple-system,"Segoe UI",sans-serif);
  position:relative;padding:clamp(64px,10vh,128px) var(--gut,clamp(16px,3vw,44px));background:var(--fk-bg);color:var(--fk-ink);font-family:var(--fk-f);overflow:hidden}
.fk-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(240px,380px) minmax(0,600px);justify-content:space-between;align-items:center;gap:clamp(32px,6vw,96px)}

/* the copy: the homepage's own block (logo, name, one line, Google Play, more) */
.fk-copy{max-width:380px}
.fk-logo-img{display:block;width:64px;height:auto;margin-bottom:22px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.5))}
.fk-copy h2{margin:0;font-family:var(--fk-head);font-size:clamp(28px,3vw,44px);font-weight:700;letter-spacing:-.022em;line-height:1.05;text-wrap:balance}
.fk-copy p{max-width:34ch;margin:14px 0 0;color:var(--fk-mute);font-size:clamp(16px,1.25vw,19px);line-height:1.45;text-wrap:pretty}
.fk-acts{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.fk-acts .gp{display:block;width:150px;border-radius:10px;transition:transform 226ms cubic-bezier(.16,1,.3,1)}
.fk-acts .gp img{display:block;width:100%;height:auto}
.fk-acts .gp:hover{transform:translateY(-2px)}
.fk-acts .tlink{display:inline-block;color:var(--fk-mute);font-size:15px;text-decoration:underline;text-decoration-color:rgba(232,237,233,.25);text-underline-offset:4px;transition:color 212ms,text-decoration-color 212ms}
.fk-acts .tlink:hover{color:var(--fk-ink);text-decoration-color:var(--fk-acc)}

/* copy entrance when the section first comes into view: overlapping, sprung, never a plain fade */
.fk-copy>*{opacity:0}
.fk.is-in .fk-logo-img{animation:fk-pop 900ms linear both}
.fk.is-in .fk-copy h2{animation:fk-rise 720ms var(--fk-sp) 90ms both}
.fk.is-in .fk-copy p{animation:fk-rise 720ms var(--fk-sp) 170ms both}
.fk.is-in .fk-acts{animation:fk-rise 720ms var(--fk-sp) 250ms both}
.fk{--fk-sp:linear(0,.0241,.0848,.1681,.2631,.3619,.4587,.5499,.6331,.7069,.771,.8255,.8709,.908,.9377,.961,.9787,.9919,1.0014,1.0078,1.0119,1.0142,1.0151,1.015,1.0143,1.0132,1.0118,1.0103,1.0088,1.0074,1.0061,1.0049,1.0039,1.003,1.0022,1.0016,1)}
@keyframes fk-rise{from{opacity:0;transform:translateY(26px)}35%{opacity:1}to{opacity:1;transform:none}}
/* the logo: anticipation squash, stretch on the way up, overshoot, settle */
@keyframes fk-pop{0%{opacity:0;transform:translateY(18px) scale(.4,.4)}18%{opacity:1;transform:translateY(4px) scale(1.12,.84)}38%{transform:translateY(-10px) scale(.92,1.12)}58%{transform:translateY(2px) scale(1.05,.96)}76%{transform:translateY(-1px) scale(.99,1.02)}100%{opacity:1;transform:none}}

/* the stage: a 1080-wide canvas (the film's own coordinates), scaled to the column; everything stays inside it */
.fk-stage{position:relative;width:100%;aspect-ratio:1080/1350;overflow:hidden;contain:layout paint;user-select:none;-webkit-user-select:none;justify-self:center}
.fk-cv{position:absolute;left:0;top:0;width:1080px;height:1350px;transform-origin:0 0}
.fk-fill{position:absolute;inset:0;pointer-events:none}
/* the burst: his photos, out of the meteor's impact and into the screen */
.fk-card{position:absolute;left:0;top:0;width:250px;height:335px;border-radius:26px;overflow:hidden;background:#24272a;box-shadow:0 30px 60px rgba(0,0,0,.42);will-change:transform,opacity}
.fk-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* device.tsx Phone3D: a stack of rim layers behind the glass, so the phone has a real metal side when it turns */
.fk-pw{perspective:2600px}
.fk-phone{position:absolute;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform}
.fk-body{position:absolute;left:0;top:0;width:1124px;height:2534px;transform-origin:0 0;transform-style:preserve-3d}
.fk-cshadow{position:absolute;inset:40px;border-radius:150px;box-shadow:0 120px 180px -30px rgba(0,0,0,.6),0 40px 80px rgba(0,0,0,.35)}
.fk-layer{position:absolute;inset:0;border-radius:150px;background:#646468;will-change:filter}
.fk-key{position:absolute;right:-9px;width:12px;border-radius:6px;background:#4A4A50}
.fk-glass{position:absolute;inset:0;border-radius:150px;background:#060607;box-shadow:inset 0 0 0 2px #8D8D93,inset 0 0 0 5px #1A1A1D}
.fk-screen{position:absolute;left:22px;top:22px;width:1080px;height:2490px;border-radius:130px;overflow:hidden;background:#000;transform:translateZ(.1px)}
.fk-punch{position:absolute;left:522px;top:27px;width:36px;height:36px;border-radius:18px;background:#050506;box-shadow:inset 0 0 0 4px #17171B}
.fk-glare{position:absolute;inset:0;will-change:transform;background:linear-gradient(115deg,rgba(255,255,255,0) 35%,rgba(255,255,255,.07) 45%,rgba(255,255,255,0) 56%)}
/* the screen while it is off (before the meteor): dark glass with a faint cool sheen at the top and a soft reflection band,
   so it reads as a phone that is off, not as a black hole */
.fk-screen{background:radial-gradient(95% 55% at 26% 14%,rgba(150,178,170,.10),rgba(150,178,170,0) 70%),linear-gradient(162deg,#101315 0%,#07090a 50%,#030404 100%)}
.fk-stage.is-dark .fk-glare{background:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.085) 41%,rgba(255,255,255,.02) 50%,rgba(255,255,255,0) 60%)}
/* the live app inside the phone (flick-app.js): his status bar strip, then the app's 400 x 888.9 px scaled x2.7 */
.fk-status{position:absolute;left:0;top:0;width:1080px;height:90px;display:block;opacity:0}
.fk-appbox{position:absolute;left:0;top:90px;width:1080px;height:2400px;overflow:hidden;opacity:0;background:#FAFAF8}
.fk-appbox>.fa{transform:scale(2.7)}

/* the photo wall the screen spreads into, in the screen's plane: only the cats light up */
.fk-wall{position:absolute;width:1890px;height:3240px;transform:translateZ(1px);transform-style:preserve-3d;visibility:hidden;pointer-events:none}
.fk-tile{position:absolute;width:246px;height:246px;border-radius:22px;overflow:hidden;background:#24272a;opacity:0}
.fk-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.fk-ok{position:absolute;right:14px;top:14px;width:56px;height:56px;border-radius:28px;background:#2E9E52;display:flex;align-items:center;justify-content:center;transform:scale(0);box-shadow:0 6px 16px rgba(0,0,0,.25)}
.fk-ok svg{width:36px;height:36px}

@media (max-width:899px){
  .fk-in{grid-template-columns:1fr;gap:40px}
  .fk-copy{max-width:none}
  .fk-stage{max-width:520px;justify-self:center}
}
@media (prefers-reduced-motion:reduce){
  .fk-copy>*{opacity:1}
  .fk.is-in .fk-copy>*{animation:none}
}