/* section 03-features — Quest "All your operations / fully automated with AI" carousel, rebuilt 1:1.
   Measured on quest-template.framer.ai (Playwright): section 72px/2px padding at desktop (24 / 16 below), title 480 wide,
   carousel 438 tall = 374 slideshow + arrows row (40px buttons, 10px gap, top 398). Cards: rgb(15,21,27), radius 16,
   0.8px rgba(255,255,255,.05) inner border, 270px visual (blurred 0.15 photo + fade) + 300×230 frame + text block.
   Visible cards: 3 (≥ 1200) · 2 (810–1199) · 1 (< 810), gap 16. Motion lives in /js/sections/03-features.js. */

[data-section="03-features"] {
  --fc-gap: 16px;
  --fc-n: 3;
  --fc-grad: linear-gradient(149deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%);
}
@media (min-width: 1200px) { .feat.section { padding-inline: 2px; } }
@media (min-width: 810px) and (max-width: 1199.98px) { [data-section="03-features"] { --fc-n: 2; } }
@media (max-width: 809.98px) { [data-section="03-features"] { --fc-n: 1; } }

.feat__title { width: 100%; max-width: 480px; display: flex; flex-direction: column; justify-content: center; }

/* ------------------------------------------------------------ carousel */
.feat__carousel { position: relative; width: 100%; height: 438px; overflow: hidden; }
.feat__viewport { position: relative; width: 100%; height: 374px; overflow: hidden; }
.feat__track { position: relative; display: flex; gap: var(--fc-gap); width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; user-select: none; -webkit-user-select: none; }
.feat__slide { position: relative; flex: none; width: calc((100% - (var(--fc-n) - 1) * var(--fc-gap)) / var(--fc-n)); height: 100%; }
/* JS: every slide sits at left 0 and is placed on a 5-slot ring with translate3d (seamless infinite loop, no clones) */
.feat.is-live .feat__track { display: block; }
.feat.is-live .feat__slide { position: absolute; top: 0; left: 0; will-change: transform; }

.feat__nav { position: absolute; left: 0; right: 0; top: 398px; display: flex; justify-content: center; align-items: center; gap: 10px; }
.feat__arrow { display: block; width: 40px; height: 40px; border-radius: 40px; overflow: hidden; background-color: var(--surface); cursor: pointer; }
.feat__arrow svg { display: block; width: 40px; height: 40px; }
.feat__arrow path { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------------------------------------------------------------- card */
.fc {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  height: 100%;
  padding-bottom: 10px;
  border-radius: var(--r-16);
  background-color: var(--surface);
  overflow: hidden;
}
.fc[data-border]::after { z-index: 2; }
.fc__visual { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 100%; height: 270px; overflow: hidden; }
.fc__bg { position: absolute; inset: 0; z-index: 0; border-radius: 16px 16px 0 0; opacity: 0.15; filter: blur(6px); overflow: hidden; }
.fc__bg img { display: block; width: 100%; height: 100%; max-width: none; object-fit: fill; border-radius: inherit; }
.fc__overlay { position: absolute; inset: 0; z-index: 0; border-radius: 16px 16px 0 0; background: linear-gradient(rgba(15, 21, 27, 0) 0%, rgb(15, 21, 27) 100%); }
.fc__frame { position: relative; z-index: 1; flex: none; width: 300px; height: 230px; border-radius: 16px; }
.fc__text { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 10px 20px; }
.fc__title { width: 100%; font-family: var(--f-display); font-weight: 500; font-size: 18px; line-height: 1.2; letter-spacing: -0.02em; color: #fff; }
.fc__desc { width: 100%; font-family: var(--f-body); font-weight: 400; font-size: 16px; line-height: 1.4; letter-spacing: -0.02em; color: var(--t-60); }

/* shared mock atoms (Framer "Animated interface" components) */
.fm { position: absolute; }
.fm p { margin: 0; white-space: nowrap; }
.fm-t11 { font-family: var(--f-body); font-weight: 500; font-size: 11px; line-height: 1.4; letter-spacing: -0.02em; color: #fff; }
.fm-t9 { font-family: var(--f-body); font-weight: 500; font-size: 9px; line-height: 1.4; letter-spacing: -0.02em; color: var(--t-60); }
.fm-t8 { font-family: var(--f-body); font-weight: 500; font-size: 8px; line-height: 1.4; letter-spacing: -0.02em; color: var(--t-40); }
.fm-t7 { font-family: var(--f-body); font-weight: 400; font-size: 7px; line-height: 1.4; letter-spacing: -0.02em; color: var(--t-70); }
.fm-ico { flex: none; display: block; width: 12px; height: 12px; overflow: hidden; }
.fm-ico path { fill: none; stroke: #fff; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
/* spinner: 9×9 arc, one turn per second, linear */
.fm-spin { flex: none; position: relative; width: 9px; height: 9px; overflow: hidden; animation: fm-spin 1s linear infinite; }
.fm-spin svg { display: block; width: 100%; height: 100%; }
@keyframes fm-spin { to { transform: rotate(360deg); } }
/* brand glyph drawn as a white mask so any Simple Icons file works as-is */
.lg { display: block; flex: none; background-color: #fff; -webkit-mask: var(--lg) center / contain no-repeat; mask: var(--lg) center / contain no-repeat; }
.lg--txt { display: flex; align-items: center; justify-content: center; background: none; -webkit-mask: none; mask: none; font-family: var(--f-display); font-weight: 500; color: #fff; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }

/* vertical auto-slideshow window (feed + company list): 6px padding, 2.5 % top/bottom fade */
.fm-win { position: relative; overflow: hidden; }
.fm-win__mask { position: absolute; inset: 0; padding: 6px 0; -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 2.5%, #000 97.5%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(rgba(0, 0, 0, 0) 0%, #000 2.5%, #000 97.5%, rgba(0, 0, 0, 0) 100%); }
.fm-win__list { position: relative; display: flex; flex-direction: column; gap: var(--row-gap); width: 100%; height: 100%; margin: 0; padding: 0; list-style: none; }
.fm-win__list > li { flex: none; height: var(--row-h); }
.feat.is-live .fm-win__list { display: block; }
.feat.is-live .fm-win__list > li { position: absolute; top: 0; left: 0; width: 100%; will-change: transform; }

/* --- card 1 · marks feed (Animated interface 1): 250×190 at 25/28, 3 rows of 52.67 + 10 gap */
.fm-feed { left: 25px; top: 28px; width: 250px; height: 190px; --row-h: 52.667px; --row-gap: 10px; }
.fm-feed .fm-win { width: 250px; height: 190px; }
.fm-feed__item { display: flex; align-items: center; gap: 8px; width: 250px; height: 100%; padding: 10px 12px 10px 8px; border-radius: 12px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.05) 100%); }
.fm-feed__icon { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background-color: rgba(15, 21, 27, 0.3); }
.fm-feed__icon .lg { width: 10px; height: 10px; }
.fm-feed__icon .lg--txt { width: 12px; height: 12px; font-size: 6.5px; letter-spacing: 0; }
.fm-feed__text { flex: 1 0 0; width: 1px; display: flex; align-items: flex-end; gap: 4px; }
.fm-feed__main { flex: 1 0 0; width: 1px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.fm-feed__time { flex: none; white-space: pre; }

/* --- card 2 · binary / door canvas in the box of Quest's report + chat mock (270×211 at 15/9, panel skin 149° .1→.05, r12).
   Static fallback = the hero, dimmed, behind the panel skin; it fades out once the fx has painted (JS sets .is-painted). */
.fm-door { left: 15px; top: 9px; width: 270px; height: 211px; border-radius: 12px; overflow: hidden; background: var(--fc-grad); isolation: isolate; }
.fm-door::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url("/img/hero/hero-binary.webp") 62% 20% / cover no-repeat; opacity: 0.18; filter: grayscale(1); transition: opacity 0.4s cubic-bezier(0.12, 0.23, 0.5, 1); }
.fm-door.is-painted::before { opacity: 0; }
.fc__fx { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: inherit; }

/* --- card 3 · icon rows (Animated interface 3): 272×176 at 14/27, three 48px tickers, gap 16, 20 px/s */
.fm-grid { left: 14px; top: 27px; width: 272px; height: 176px; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.fm-row { position: relative; flex: none; width: 272px; height: 48px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 5%, #000 95%, rgba(0, 0, 0, 0) 100%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000 5%, #000 95%, rgba(0, 0, 0, 0) 100%); }
.fm-row__track { display: flex; align-items: center; gap: 8px; width: max-content; height: 48px; margin: 0; padding: 0; list-style: none; will-change: transform; animation: fm-tick-l 14s linear infinite; animation-delay: -0.4s; }
.fm-row--r .fm-row__track { animation-name: fm-tick-r; animation-delay: -0.3s; }
.fm-row--b .fm-row__track { animation-delay: -0.3s; }
@keyframes fm-tick-l { from { transform: translateX(0); } to { transform: translateX(-280px); } }
@keyframes fm-tick-r { from { transform: translateX(-280px); } to { transform: translateX(0); } }
.fm-tile { position: relative; flex: none; display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background-color: rgba(255, 255, 255, 0.05); }
.fm-tile .lg { width: 20px; height: 20px; }
.fm-tile .lg--txt { width: 24px; height: 24px; font-size: 11px; }

/* --- card 4 · tracker list (Animated interface "Create workflow"): 270 wide at 15/13 */
.fm-flow { left: 15px; top: 13px; width: 270px; display: flex; flex-direction: column; gap: 10px; }
.fm-flow__bar { display: flex; align-items: center; gap: 4px; width: 100%; padding: 12px 16px; border-radius: 12px; background: var(--fc-grad); }
.fm-flow__bar > p { flex: 1 0 0; width: 1px; }
.fm-flow__act { flex: none; display: flex; align-items: center; justify-content: center; gap: 8px; height: 12px; }
.fm-flow__panel { display: flex; flex-direction: column; gap: 8px; width: 100%; height: 150px; padding: 16px; border-radius: 12px; background: var(--fc-grad); }
.fm-flow__row { display: flex; align-items: center; gap: 8px; width: 100%; }
.fm-chip { position: relative; flex: 1 0 0; width: 1px; display: flex; align-items: center; justify-content: center; padding: 10px 8px; border-radius: 12px; background-color: rgba(255, 255, 255, 0.1); overflow: hidden; }
/* light streak along the chip's bottom edge: 64px gradient, 2 s ease-in-out sweep, then 1 / 2 / 3 s rest */
.fm-chip__line { position: absolute; left: -64px; bottom: 0; z-index: 1; width: 64px; height: 1px; border-radius: 20px; background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 100%); overflow: hidden; pointer-events: none; will-change: transform, opacity; animation: fm-line-3 3s linear infinite; }
.fm-chip__line--4 { animation-name: fm-line-4; animation-duration: 4s; }
.fm-chip__line--5 { animation-name: fm-line-5; animation-duration: 5s; }
@keyframes fm-line-3 { 0% { transform: translateX(0); opacity: 1; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 66.666% { transform: translateX(180px); opacity: 0; } 66.667%, 100% { transform: translateX(0); opacity: 1; } }
@keyframes fm-line-4 { 0% { transform: translateX(0); opacity: 1; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 50% { transform: translateX(180px); opacity: 0; } 50.001%, 100% { transform: translateX(0); opacity: 1; } }
@keyframes fm-line-5 { 0% { transform: translateX(0); opacity: 1; animation-timing-function: cubic-bezier(0.42, 0, 0.58, 1); } 40% { transform: translateX(180px); opacity: 0; } 40.001%, 100% { transform: translateX(0); opacity: 1; } }

/* --- card 5 · company list (Animated interface "AI Agents"): 250×217.4 at 25/11, 3 rows of 40.67 + 8 gap */
.fm-list { left: 25px; top: 11px; width: 250px; display: flex; flex-direction: column; gap: 16px; padding: 16px; border-radius: 12px; background: var(--fc-grad); --row-h: 40.667px; --row-gap: 8px; }
.fm-list__head { display: flex; align-items: center; gap: 8px; width: 100%; }
.fm-list__head > p { flex: 1 0 0; width: 1px; }
.fm-list__box { display: flex; align-items: center; justify-content: center; width: 100%; height: 154px; overflow: hidden; }
.fm-list .fm-win { width: 100%; height: 150px; flex: none; }
.fm-list__item { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; height: 100%; padding: 8px 12px; border-radius: 8px; background-color: rgba(255, 255, 255, 0.1); }
.fm-list__item .fm-t9 { color: var(--t-90); }

/* loops only run while the section is on screen (core whenVisible toggles .is-off) */
.feat.is-off .fm-spin, .feat.is-off .fm-row__track, .feat.is-off .fm-chip__line { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .fm-spin, .fm-row__track, .fm-chip__line { animation: none; }
  .fm-chip__line { opacity: 0; }
}