/* ── 07 · PF — FEATURE STACK (horizontal coverflow) ──────────────
   Paste as a new numbered section in css/style.css (renumber the
   sections below it), or keep as its own file and link it after
   style.css. Cards follow the iOS home-stack recipe: #1A1A1A,
   radius 40, 3px black stroke, 24px padding.
   ─────────────────────────────────────────────────────────────── */

#pf .fhead { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.fhead-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; color: var(--text-25); padding-bottom: 12px; }

/* stack ------------------------------------------------------- */
/* user-select/user-drag off: this is a drag surface, so the browser's native
   mousedown+move behaviours (highlighting the card copy, and ghost-dragging a
   screenshot) both fire on top of our swipe. touch-action already handles the
   touch equivalent. */
.fstack { position: relative; height: 620px; margin-top: 22px; perspective: 1700px; touch-action: pan-y; cursor: grab;
  user-select: none; -webkit-user-select: none; }
.fstack img { -webkit-user-drag: none; }
.fstack.dragging { cursor: grabbing; }
.fcard {
  position: absolute; left: 50%; top: 10px; width: 460px; height: 600px; margin-left: -230px;
  background: #1A1A1A; border: 3px solid #000; border-radius: 40px;
  box-shadow: 0 30px 80px -20px #000; padding: 24px;
  display: flex; flex-direction: column; will-change: transform, opacity;
}
.fcard-stage { position: relative; flex: 1; }
.fcard-copy h3 { font-size: 25px; font-weight: 700; letter-spacing: -0.02em; margin: 12px 0 8px; }
.fcard-copy p { font-size: 14.5px; line-height: 1.55; color: var(--text-60); text-wrap: pretty; }
.fcard-tags { display: flex; align-items: center; gap: 8px; }
.fidx { font-family: var(--mono); font-size: 11px; color: var(--text-25); margin-right: 4px; }
.wod-tag.t-blue { color: var(--blue); }

/* ghost frames — the "more coming" slots beyond each end of the deck.
   Dashed like the site's IN DEVELOPMENT chips; no shadow, no fill weight,
   so they read as reserved space rather than a seventh feature. */
.fcard-ghost {
  background: rgba(19, 19, 19, 0.8);
  border: 2px dashed rgba(242, 240, 235, 0.35);
  box-shadow: none;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.fghost-plus { font-family: var(--mono); font-size: 44px; font-weight: 400; line-height: 1; color: var(--text-40); }
.fghost-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; color: var(--text-40); }

/* devices ----------------------------------------------------- */
.fdev { position: absolute; }
.phone {
  width: 168px; height: 364px; background: #000; border-radius: 26px; padding: 6px;
  box-shadow: 0 0 0 1px var(--line-strong), 0 24px 50px -18px #000; position: relative;
}
.phone-screen { position: relative; width: 100%; height: 100%; border-radius: 21px; overflow: hidden; background: #0a0a0a; }
.phone-island { position: absolute; top: 13px; left: 50%; transform: translateX(-50%); width: 46px; height: 13px; border-radius: 8px; background: #000; pointer-events: none; }
.watch {
  position: relative; width: 96px; height: 117px; background: #000; border-radius: 27px; padding: 5px;
  box-shadow: 0 0 0 1px var(--line-strong), 0 20px 44px -14px #000;
}
.watch-crown { position: absolute; right: -3px; top: 34px; width: 3px; height: 22px; border-radius: 2px; background: #2a2a2a; }
.watch-screen { width: 100%; height: 100%; border-radius: 22px; overflow: hidden; background: #0a0a0a; }
.phone-screen img, .watch-screen img, .fpanel img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* cut-line frame — the dashed "drop the screenshot here" rule stays visible
   whether or not an image is loaded; it is part of the look, not a placeholder */
.phone-screen, .watch-screen, .fpanel { position: relative; }
.phone-screen::after, .watch-screen::after, .fpanel::after {
  content: ''; position: absolute; inset: 0; border: 1px dashed rgba(242,240,235,0.28);
  border-radius: inherit; pointer-events: none;
}
/* empty slot names itself, in the site's mono HUD voice */
.phone-screen:empty::before, .watch-screen:empty::before, .fpanel:empty::before {
  content: attr(data-slot); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--text-25); text-align: center; padding: 8px;
}

/* per-card device placement — deliberately not one template */
.fcard[data-i="0"] .fdev-phone { left: 52px;  top: 6px;   transform: rotate(-3.5deg); }
.fcard[data-i="0"] .fdev-watch { left: 228px; top: 214px; transform: rotate(8deg); z-index: 2; }
.fcard[data-i="1"] .fdev-phone { left: 138px; top: 0;     transform: rotate(3.5deg); }
.fcard[data-i="1"] .fdev-watch { left: 20px;  top: 190px; transform: rotate(-9deg) scale(1.18); z-index: 2; }
/* card 3 carries TWO phones — final view + PR list — overlapping like the
   phone/watch pair on card 1. The trend chip floats over them (z-index 3), the
   way card 2's HR pill does, since two frames fill the stage. */
.fcard[data-i="3"] .fdev-phone   { left: 14px;  top: 10px; transform: rotate(-4deg); }
.fcard[data-i="3"] .fdev-phone-2 { left: 168px; top: 28px; transform: rotate(5deg); z-index: 2; }
.fcard[data-i="3"] .fchip-spark  { left: 6px; right: auto; top: auto; bottom: 14px; z-index: 3; transform: rotate(-5deg); }
/* card 3 = the long view: Data tab in front on the left, PR board behind on the
   right — deliberately mirrored against card 4's back-left/front-right pair. */
.fcard[data-i="2"] .fdev-phone   { left: 18px;  top: 26px; transform: rotate(3.5deg); z-index: 2; }
.fcard[data-i="2"] .fdev-phone-2 { left: 176px; top: 0;    transform: rotate(-6deg); }
.fnote-board { right: 8px; bottom: 16px; z-index: 3; background: rgba(0,0,0,0.7); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; }

/* card 4 = gate sheet + watch queue. Watch sits high-right over the phone's
   shoulder — deliberately not card 1's low-right or card 2's low-left. */
.fcard[data-i="4"] .fdev-phone { left: 66px;  top: 2px;  transform: rotate(-3deg); }
.fcard[data-i="4"] .fdev-watch { left: 206px; top: 0;    transform: rotate(9deg) scale(1.12); z-index: 2; }
/* card 5 = whiteboard → editor → finished WOD, read left to right. The two
   phones overlap heavily on purpose (the source panel needs the left third). */
.fcard[data-i="5"] .fdev-phone   { left: 92px;  top: 8px; transform: rotate(-2.5deg); }
.fcard[data-i="5"] .fdev-phone-2 { left: 212px; top: 0;   transform: rotate(6deg); z-index: 2; }

/* loose panels + HUD chips inside the cards */
.fpanel { position: absolute; overflow: hidden; background: #0a0a0a; border: 1px solid var(--line-strong); box-shadow: 0 18px 40px -16px #000; }
.fpanel-source { left: 0;    top: 6px;   width: 104px; height: 139px; border-radius: 12px; transform: rotate(-8deg); }
.fhr {
  position: absolute; left: 16px; top: 152px; z-index: 3; display: flex; align-items: center; gap: 6px;
  background: rgba(0,0,0,0.72); border: 1px solid var(--line-strong); border-radius: 100px; padding: 5px 11px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--text);
}
/* iOS system-red on purpose: the HR pill mirrors the watch UI it floats over
   (part of the #pf iOS-parity surface sanctioned in STYLE_GUIDE §8) */
.fhr-heart { color: #FF383C; }
.fchip { position: absolute; border: 1px solid var(--line); border-radius: 10px; background: rgba(19,19,19,0.9); padding: 9px; }
.fchip-pr { left: 18px; top: 250px; width: 104px; height: 70px; transform: rotate(-7deg); }
.fchip-pr .k { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.14em; color: var(--text-40); }
.fchip-pr .v { font-family: var(--mono); font-size: 20px; font-weight: 700; letter-spacing: -0.03em; margin-top: 5px; }
.fchip-pr .v span { font-size: 10px; color: var(--text-40); margin-left: 3px; }
.fchip-pr .d { font-family: var(--mono); font-size: 9px; color: var(--green); margin-top: 2px; }
.fchip-spark { right: 14px; top: 60px; width: 96px; height: 56px; transform: rotate(6deg); display: flex; align-items: flex-end; gap: 4px; }
.fchip-spark i { flex: 1; border-radius: 2px; background: rgba(0,177,252,0.35); }
.fchip-spark i:last-child { background: var(--blue); }
.fnote { position: absolute; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; color: var(--text-40); }
.fnote-edit { right: 10px; top: 138px; z-index: 3; background: rgba(0,0,0,0.7); border: 1px solid var(--line); border-radius: 5px; padding: 3px 7px; }
.fnote-parse { left: 0; top: 168px; max-width: 122px; z-index: 3; line-height: 1.7; color: var(--text-25);
  background: rgba(0,0,0,0.72); border: 1px solid var(--line); border-radius: 6px; padding: 5px 7px; }
.fnote-parse em { color: var(--blue); font-style: normal; }

/* progress line — app TimerProgressBar vocabulary --------------- */
.fprog { margin-top: 44px; display: flex; justify-content: center; }
/* Reserve a lane for the count on the right so it can never run off-screen
   between 980px (where it drops back into flow) and full width. */
.fbar-wrap { position: relative; width: 100%; max-width: min(920px, calc(100% - 200px)); }
.fbar { position: relative; height: 16px; border-radius: 2px; background: #1A1A1A; overflow: hidden; }
.fbar-stripes {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,74,9,0.42) 0 3px, #1A1A1A 3px 7px);
}
/* keyframe cut lines — the bar reads as 5 clickable steps */
.fbar-cut { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--bg); }
.fbar-fill {
  position: absolute; top: 0; left: 0; bottom: 0; width: 20%; background: var(--orange);
  box-shadow: 0 0 20px rgba(255,74,9,0.45);
  transition: width .55s cubic-bezier(.2,.8,.2,1);
}
.fbar-hits { position: absolute; left: 0; right: 0; top: -6px; height: 28px; display: grid; }
.fbar-hit { background: transparent; border: none; padding: 0; cursor: pointer; transition: background .15s; }
.fbar-hit:hover { background: rgba(242,240,235,0.10); }
.fbar-labels { display: grid; margin-top: 11px; }
.fbar-labels span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; color: var(--text-25); }
.fbar-labels span.past { color: var(--text-40); }
.fbar-labels span.on { color: var(--orange); font-weight: 700; }
/* Absolute, so the bar stays centred in the panel and the count rides beside
   it rather than pushing it off-centre or taking a row of its own. */
.fmeta { position: absolute; left: 100%; bottom: 18px; margin-left: 22px; white-space: nowrap;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; }
.fmeta-count { color: var(--text); font-weight: 700; font-size: 15px; letter-spacing: 0.06em; }

/* responsive --------------------------------------------------- */
@media (max-width: 980px) {
  #pf .fhead-meta { display: none; }
  .fstack { height: 560px; }
  .fcard { width: 320px; height: 540px; margin-left: -160px; border-radius: 32px; padding: 18px; }
  .fcard-copy h3 { font-size: 20px; }
  .fcard-copy p { font-size: 13px; }
  .fcard[data-i="0"] .fdev-phone { left: 10px; }
  .fcard[data-i="0"] .fdev-watch { left: 186px; top: 200px; }
  .fcard[data-i="1"] .fdev-phone { left: 96px; }
  .fcard[data-i="1"] .fdev-watch { left: 0; top: 180px; }
  .fcard[data-i="5"] .fdev-phone   { left: 58px; }
  .fcard[data-i="5"] .fdev-phone-2 { left: 150px; }
  .fcard[data-i="4"] .fdev-phone { left: 30px; }
  .fcard[data-i="4"] .fdev-watch { left: 172px; }
  .fcard[data-i="2"] .fdev-phone   { left: 4px; }
  .fcard[data-i="2"] .fdev-phone-2 { left: 116px; }
  .fcard[data-i="3"] .fdev-phone   { left: 2px; top: 16px; }
  .fcard[data-i="3"] .fdev-phone-2 { left: 114px; top: 48px; }
  .fbar-labels span { font-size: 8.5px; letter-spacing: 0.08em; }
  .fprog { flex-direction: column; align-items: center; gap: 10px; }
  .fmeta { position: static; margin-left: 0; }
}

/* short viewports ---------------------------------------------
   .panel is pinned with overflow:hidden, so nothing below the fold can be
   scrolled to — on anything under ~1040px tall the 620px stack pushed .fprog
   off-screen. Scale the whole stack instead of re-tuning every device offset;
   GSAP's per-card transforms ride along fine inside a scaled parent. */
@media (max-height: 1040px) {
  .fstack { height: 560px; transform: scale(0.9); transform-origin: top center; }
}
/* A laptop screen minus browser chrome lands around 780–850, where a 500px
   stack still pushed .fprog past the fold (it ends 366px below the stack top).
   Second step keeps the whole panel — bar, keyframes and labels — on screen. */
@media (max-height: 880px) {
  .fstack { height: 470px; transform: scale(0.77); }  /* card is 462 tall at .77 */
}

/* reduced motion ---------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .fbar-fill { transition: none; }
}