/* ============================================================
   SiloV · FAQ Monochrome port for the #faq section
   Ported from "FAQ Monochrome" (21st.dev, larsen66), see assets/FAQ-MONO-SOURCE.md.
   Loaded after site.css, theme-light.css and hero-layers.css, before a11y.css.
   Scoped under #faq.fm-sec, prefix fm. Nothing outside the section is touched.

   Atmosphere follows the hero: a far halo plane in the bottom corner on the
   end side (rate 1.2 backwards), one masked neurons plane (rate 0.6 backwards),
   a floor fade, then the content plane. The planes are moved by hero-layers.js
   (the section carries layer-act, the planes carry data-parallax).

   Two columns from 1024px: the start column (right side in RTL) is sticky and
   holds the intro pill, the heading, the lede and a framed photo; the end column
   holds the ten cards. Below 1024px everything stacks in one column.

   Without JS the html element never carries fm-js: the cards show their final
   state, the native details/summary toggle works, name="silov-faq" keeps one
   item open, and the open state is read from the open attribute.
   ============================================================ */

/* ==== ground and stacking ==== */
#faq.fm-sec{ background:#fff; isolation:isolate }
html:not(.fm-js) #faq .reveal{ opacity:1; --rv:0px; transform:none }

/* ==== atmosphere: spans the full section width, clipped by .sec overflow:clip ==== */
#faq .fm-atmo{
  position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden;
  background:#fff;
}
#faq .fm-plane{ position:absolute; pointer-events:none; will-change:transform }
/* far plane: a soft lavender halo in the bottom corner on the end side, under the
   lower cards, never behind the heading column. Peak alpha .22, blur 44px */
#faq .fm-plane-far{
  inset:-20% -10%;
  background:radial-gradient(34% 38% at 12% 88%, rgba(167,139,250,.22), rgba(167,139,250,.10) 38%, rgba(167,139,250,.03) 62%, transparent 76%);
  filter:blur(44px);
}
/* mid plane: the neurons frame as a luminance mask over a lavender tint, low in the
   end corner, fading out toward the centre so it never reaches the text column */
#faq .fm-plane-mid{
  left:-4%; bottom:-6%; width:56%; height:74%;
  background:linear-gradient(160deg, #D9CCFB 0%, #B79BF5 55%, #CDB9FB 100%);
  -webkit-mask-image:url("neurons/f_001.webp"), radial-gradient(62% 60% at 38% 62%, #000 18%, rgba(0,0,0,.45) 48%, transparent 76%);
  mask-image:url("neurons/f_001.webp"), radial-gradient(62% 60% at 38% 62%, #000 18%, rgba(0,0,0,.45) 48%, transparent 76%);
  -webkit-mask-size:cover, 100% 100%; mask-size:cover, 100% 100%;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-composite:source-in; mask-composite:intersect;
  -webkit-mask-source-type:luminance; mask-mode:luminance, alpha;
  opacity:.55; filter:blur(1px);
}
/* floor: the planes settle into the white ground over the last 220px */
#faq .fm-floor{
  position:absolute; inset-inline:0; bottom:0; height:220px;
  background:linear-gradient(to bottom, rgba(255,255,255,0), #fff);
  pointer-events:none;
}

/* ==== layout ==== */
#faq .container{ max-width:1240px }
#faq .fm-grid{ display:grid; grid-template-columns:minmax(0,1fr); gap:36px; align-items:start }
#faq .fm-side{ display:flex; flex-direction:column; align-items:flex-start; gap:0 }
#faq .fm-side .sec-head{ margin-bottom:30px; max-width:none }

@media (min-width:1024px){
  #faq .fm-grid{ grid-template-columns:minmax(300px,5fr) minmax(0,8fr); gap:clamp(40px,5vw,72px) }
  #faq .fm-side{ position:sticky; top:clamp(80px,10vh,120px); align-self:start }
}

/* ==== intro pill: the component's signature, carrying the existing label text ==== */
#faq .fm-pill{
  position:relative; display:flex; align-items:center; gap:.85rem;
  padding:.85rem 1.4rem; border-radius:9999px; overflow:hidden; isolation:isolate;
  border:1px solid rgba(124,77,238,.16); background:rgba(255,255,255,.88); color:#6D3FE0;
  width:100%; max-width:24rem; mix-blend-mode:multiply;
}
#faq .fm-pill-beam, #faq .fm-pill-pulse{
  position:absolute; inset:-110%; border-radius:50%; pointer-events:none;
}
#faq .fm-pill-beam{
  background:conic-gradient(from 180deg, rgba(124,77,238,.20), transparent 30%, rgba(167,139,250,.22) 58%, transparent 80%, rgba(124,77,238,.16));
  opacity:.55; animation:fm-beam-spin 18s linear infinite;
}
#faq .fm-pill-pulse{ border:1px solid currentColor; opacity:.25; animation:fm-pulse 3.4s ease-out infinite }
#faq .fm-pill-label{ position:relative; z-index:1; white-space:nowrap; line-height:1.2 }
/* meter: grows from the start edge (right in RTL), collapses toward the end edge */
#faq .fm-pill-meter{
  position:relative; z-index:1; flex:1 1 auto; height:1px; opacity:.7;
  background:linear-gradient(270deg, transparent, currentColor 35%, transparent 85%);
  transform:scaleX(0); transform-origin:100% 50%;
  animation:fm-meter 5.8s ease-in-out infinite;
}
/* tick: a dot travelling toward the end edge (left in RTL) */
#faq .fm-pill-tick{
  position:relative; z-index:1; flex:0 0 auto; width:.55rem; height:.55rem; border-radius:50%;
  background:currentColor; box-shadow:0 0 0 4px rgba(124,77,238,.10);
  animation:fm-tick 3.2s ease-in-out infinite;
}
html.fm-js #faq .fm-pill{ opacity:0; transform:translate3d(0,12px,0); transition:opacity 720ms ease, transform 720ms ease }
html.fm-js #faq.fm-in .fm-pill{ opacity:1; transform:none }

/* ==== framed photo under the head: cropped to 4:3, lit edge, floor fade into the ground ==== */
#faq .fm-photo{
  position:relative; margin:0; width:100%; max-width:420px; aspect-ratio:4 / 3; overflow:hidden;
  border-radius:22px; border:1px solid #E8E1FA; background:#F7F4FF;
  box-shadow:0 8px 18px -4px rgba(60,30,120,.18), 0 36px 120px -70px rgba(60,30,120,.18);
}
#faq .fm-photo img{ width:100%; height:100%; object-fit:cover; object-position:50% 45% }
#faq .fm-photo::before{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(255,255,255,.35);
}
#faq .fm-photo::after{
  content:""; position:absolute; inset-inline:0; bottom:0; z-index:1; height:56%; pointer-events:none;
  background:linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.55) 55%, #fff 100%);
}

/* ==== the list of cards ==== */
#faq .fm-list{ display:flex; flex-direction:column; gap:16px; margin:0; padding:0; min-width:0 }
#faq .fm-item{
  position:relative; isolation:isolate; overflow:hidden; margin:0;
  border-radius:24px; border:1px solid #E8E1FA;
  background:rgba(255,255,255,.7);
  -webkit-backdrop-filter:blur(24px); backdrop-filter:blur(24px);
  box-shadow:0 36px 120px -70px rgba(60,30,120,.18), inset 0 1px 0 rgba(255,255,255,.8);
  transition:transform .5s ease, border-color .5s ease;
}
#faq .fm-item:hover, #faq .fm-item:focus-within{ transform:translateY(-2px); border-color:#DDD2FB }
/* pointer following glow, painted between the card ground and its content */
#faq .fm-item::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:0;
  background:radial-gradient(240px circle at var(--fm-x,50%) var(--fm-y,50%), rgba(124,77,238,.10), transparent 70%);
  transition:opacity .5s ease;
}
#faq .fm-item:hover::before, #faq .fm-item[open]::before{ opacity:1 }
html.fm-js #faq .fm-item[open]:not(.fm-open):not(:hover)::before{ opacity:0 }

/* the row: toggle at the inline start, then the question */
#faq .fm-summary{
  list-style:none; cursor:pointer; display:flex; align-items:flex-start; gap:24px;
  padding:26px 28px; margin:0; color:#1E1A33; -webkit-tap-highlight-color:transparent;
}
#faq .fm-summary::-webkit-details-marker{ display:none }
#faq .fm-summary::marker{ content:"" }
#faq .fm-summary:focus-visible{ outline:2px solid rgba(124,77,238,.6); outline-offset:-8px; border-radius:24px }
#faq .fm-toggle{
  position:relative; flex:0 0 auto; width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid #DDD2FB; background:rgba(124,77,238,.06);
  transition:transform .5s ease;
}
#faq .fm-item:hover .fm-toggle{ transform:scale(1.05) }
#faq .fm-ping{ position:absolute; inset:0; border-radius:50%; border:1px solid #DDD2FB; opacity:.3; pointer-events:none }
#faq .fm-icon{ position:relative; display:block; width:20px; height:20px; color:#6D3FE0; transition:transform .5s ease }
#faq .fm-icon path{ stroke:currentColor; stroke-width:1.5; stroke-linecap:round; fill:none }
#faq .fm-q{
  flex:1 1 auto; min-width:0; min-height:48px; display:flex; align-items:center;
  font-size:clamp(1.125rem,1.4vw,1.25rem); font-weight:500; line-height:1.3; letter-spacing:-.01em; color:#1E1A33;
}
/* open state: the open attribute without JS, the fm-open class with JS (the attribute
   has to stay on during the closing animation) */
html:not(.fm-js) #faq .fm-item[open] .fm-icon,
html.fm-js #faq .fm-item.fm-open .fm-icon{ transform:rotate(45deg) }
html:not(.fm-js) #faq .fm-item[open] .fm-ping,
html.fm-js #faq .fm-item.fm-open .fm-ping{ animation:fm-ping 1.6s cubic-bezier(0,0,.2,1) infinite }

/* the answer region */
#faq .fm-panel{ overflow:hidden }
#faq .fm-panel > p{
  margin:-8px 0 0; padding:0 28px 28px;
  padding-inline-start:calc(28px + 48px + 24px);
  color:#4A4566; font-size:1rem; line-height:1.65;
}
#faq .fm-panel b{ color:#1E1A33; font-weight:600 }

/* ==== entry: the source's faq1-fade-up, transform and opacity only, 60ms stagger ==== */
html.fm-js #faq .fm-list:not(.fm-in) .fm-item{ opacity:0; transform:translate3d(0,24px,0) }
html.fm-js #faq .fm-list.fm-in .fm-item{ animation:fm-fade-up 860ms cubic-bezier(.22,.68,0,1) backwards }
#faq .fm-item:nth-child(2){ animation-delay:60ms }
#faq .fm-item:nth-child(3){ animation-delay:120ms }
#faq .fm-item:nth-child(4){ animation-delay:180ms }
#faq .fm-item:nth-child(5){ animation-delay:240ms }
#faq .fm-item:nth-child(6){ animation-delay:300ms }
#faq .fm-item:nth-child(7){ animation-delay:360ms }
#faq .fm-item:nth-child(8){ animation-delay:420ms }
#faq .fm-item:nth-child(9){ animation-delay:480ms }
#faq .fm-item:nth-child(10){ animation-delay:540ms }

@keyframes fm-fade-up{
  0%{ transform:translate3d(0,24px,0); opacity:0 }
  100%{ transform:translate3d(0,0,0); opacity:1 }
}
@keyframes fm-beam-spin{
  0%{ transform:rotate(0deg) scale(1) }
  100%{ transform:rotate(360deg) scale(1) }
}
@keyframes fm-pulse{
  0%{ transform:scale(.7); opacity:.55 }
  60%{ opacity:.1 }
  100%{ transform:scale(1.25); opacity:0 }
}
@keyframes fm-meter{
  0%, 20%{ transform:scaleX(0); transform-origin:100% 50% }
  45%, 60%{ transform:scaleX(1); transform-origin:100% 50% }
  80%, 100%{ transform:scaleX(0); transform-origin:0% 50% }
}
@keyframes fm-tick{
  0%, 30%{ transform:translateX(6px); opacity:.4 }
  50%{ transform:translateX(-2px); opacity:1 }
  100%{ transform:translateX(-20px); opacity:0 }
}
@keyframes fm-ping{
  0%{ transform:scale(1); opacity:.5 }
  75%, 100%{ transform:scale(1.6); opacity:0 }
}

/* continuous animation rests while the section is offscreen or the tab is hidden */
#faq.fm-paused .fm-pill-beam, #faq.fm-paused .fm-pill-pulse, #faq.fm-paused .fm-pill-meter,
#faq.fm-paused .fm-pill-tick, #faq.fm-paused .fm-ping{ animation-play-state:paused }

/* ==== below 1024px: one column, head, small photo, then the list ==== */
@media (max-width:1023.98px){
  #faq .fm-side{ position:static }
  #faq .fm-side .sec-head{ margin-bottom:26px }
  #faq .fm-photo{ max-width:none; aspect-ratio:auto; height:200px }
  #faq .fm-photo img{ object-position:50% 40% }
  #faq .fm-plane-far{
    inset:-30% -20%;
    background:radial-gradient(60% 30% at 20% 90%, rgba(167,139,250,.20), rgba(167,139,250,.08) 45%, transparent 74%);
  }
  #faq .fm-plane-mid{ left:-10%; width:90%; height:40%; opacity:.45 }
  #faq .fm-floor{ height:160px }
}
@media (max-width:639.98px){
  #faq .fm-summary{ gap:14px; padding:18px 18px }
  #faq .fm-toggle{ width:40px; height:40px }
  #faq .fm-icon{ width:18px; height:18px }
  #faq .fm-q{ min-height:40px; font-size:1.0625rem }
  #faq .fm-panel > p{ padding:0 18px 20px; padding-inline-start:18px; font-size:.9375rem; margin-top:-4px }
  #faq .fm-item{ border-radius:20px }
  #faq .fm-summary:focus-visible{ border-radius:20px; outline-offset:-6px }
  #faq .fm-pill{ padding:.75rem 1.1rem }
}

/* ==== reduced motion and the site's own motion toggle: static final state ==== */
@media (prefers-reduced-motion:reduce){
  #faq .fm-pill-beam, #faq .fm-pill-pulse, #faq .fm-pill-meter, #faq .fm-pill-tick, #faq .fm-ping{ animation:none !important }
  #faq .fm-pill-meter{ transform:scaleX(1) }
  #faq .fm-pill-tick{ opacity:1; transform:none }
  #faq .fm-pill-pulse{ opacity:0 }
  html.fm-js #faq .fm-pill, html.fm-js #faq.fm-in .fm-pill{ opacity:1; transform:none; transition:none }
  html.fm-js #faq .fm-list:not(.fm-in) .fm-item, html.fm-js #faq .fm-list.fm-in .fm-item{ opacity:1; transform:none; animation:none }
  #faq .fm-item, #faq .fm-item::before, #faq .fm-toggle, #faq .fm-icon{ transition:none }
  #faq .fm-item:hover, #faq .fm-item:focus-within{ transform:none }
  #faq .fm-item:hover .fm-toggle{ transform:none }
  #faq .fm-plane{ transform:none !important }
}
html.a11y-nomotion #faq .fm-pill-beam, html.a11y-nomotion #faq .fm-pill-pulse, html.a11y-nomotion #faq .fm-pill-meter,
html.a11y-nomotion #faq .fm-pill-tick, html.a11y-nomotion #faq .fm-ping{ animation:none !important }
html.a11y-nomotion #faq .fm-pill-meter{ transform:scaleX(1) }
html.a11y-nomotion #faq .fm-pill-tick{ opacity:1; transform:none }
html.a11y-nomotion #faq .fm-pill-pulse{ opacity:0 }
html.a11y-nomotion #faq .fm-pill{ opacity:1 !important; transform:none !important; transition:none }
html.a11y-nomotion #faq .fm-list .fm-item{ opacity:1 !important; transform:none !important; animation:none !important }
html.a11y-nomotion #faq .fm-item, html.a11y-nomotion #faq .fm-item::before,
html.a11y-nomotion #faq .fm-toggle, html.a11y-nomotion #faq .fm-icon{ transition:none }
html.a11y-nomotion #faq .fm-item:hover .fm-toggle{ transform:none }
html.a11y-nomotion #faq .fm-plane{ transform:none !important }