/* (c) 2026 Jennifer K. Mellen - GenM Software. LightningWX feature gallery: reveal + slideshow.
   Design system: storm-night navy, bolt blue, radar cyan, one strike-yellow accent. */
.fg{--fg-night:#050B1E;--fg-panel:#0F1B3D;--fg-bolt:#3D8BFF;--fg-cyan:#47E7F9;--fg-strike:#F7F160;--fg-ink:#EAF1FF;--fg-muted:#9AA8C7;
  margin:0;position:relative}
.fg-frame{position:relative;overflow:hidden;border-radius:20px;background:var(--fg-panel);
  border:1px solid rgba(71,231,249,.18);box-shadow:0 30px 70px -25px rgba(0,0,0,.7)}
.fg-media,.fg-media img,.fg-video{display:block;width:100%;height:100%;object-fit:cover;margin:0;border-radius:0;max-width:none}
.page-shell .fg img,.page-shell .fg video{max-width:none;margin:0;border-radius:0;width:100%;height:100%}
/* The strike-yellow accent: one thin bolt line along the top edge, drawn as the picture reveals. */
.fg-frame::after{content:"";position:absolute;left:0;top:0;height:2px;width:100%;
  background:linear-gradient(90deg,var(--fg-strike),rgba(247,241,96,0) 70%);transform-origin:left;z-index:3;pointer-events:none}

/* Slideshow: a scroll-snap strip. Works with no script at all (swipe or scroll). */
.fg-track{list-style:none;margin:0;padding:0;display:flex;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
.fg-track::-webkit-scrollbar{display:none}
.fg-track:focus-visible{outline:2px solid var(--fg-cyan);outline-offset:-4px}
.fg-slide{flex:0 0 100%;height:100%;scroll-snap-align:start;margin:0;padding:0}
.fg-slide::marker{content:none}
.fg-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:44px;height:44px;border-radius:999px;
  border:1px solid rgba(71,231,249,.35);background:rgba(5,11,30,.72);color:var(--fg-ink);font:600 26px/1 "Sora",system-ui,sans-serif;
  cursor:pointer;display:grid;place-items:center;backdrop-filter:blur(6px);transition:background .2s,border-color .2s}
.fg-arrow:hover{background:rgba(61,139,255,.85);border-color:var(--fg-cyan)}
.fg-arrow:focus-visible,.fg-dot:focus-visible{outline:2px solid var(--fg-cyan);outline-offset:2px}
.fg-arrow[hidden],.fg-dots[hidden]{display:none}
.fg-prev{left:12px}.fg-next{right:12px}
.fg-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:12px}
.fg-cap{margin:0;color:var(--fg-muted);font-size:13.5px;line-height:1.45;flex:1;min-width:0}
.fg-single .fg-cap{margin-top:12px}
.fg-dots{display:flex;gap:4px;flex:none}
.fg-dot{width:28px;height:28px;padding:0;border:0;background:none;cursor:pointer;display:grid;place-items:center}
.fg-dot::before{content:"";width:9px;height:9px;border-radius:999px;background:rgba(154,168,199,.45);transition:background .2s,transform .2s}
.fg-dot[aria-current="true"]::before{background:var(--fg-cyan);transform:scale(1.25);box-shadow:0 0 10px rgba(71,231,249,.6)}
.fg-dot:hover::before{background:var(--fg-bolt)}

/* Reveal: only hidden when the script is present (html.fg-js), so nothing hides without JS. */
.fg-js .fg:not(.fg-in) .fg-frame{opacity:0}
.fg-js .fg.fg-fx-fade:not(.fg-in) .fg-frame{transform:scale(.97)}
.fg-js .fg.fg-fx-slide:not(.fg-in) .fg-frame{transform:translateY(28px)}
.fg-js .fg.fg-fx-wipe:not(.fg-in) .fg-frame{opacity:1;clip-path:inset(0 100% 0 0 round 20px)}
.fg-js .fg:not(.fg-in) .fg-frame::after{transform:scaleX(0)}
.fg-js .fg .fg-frame{transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),clip-path 1s cubic-bezier(.7,0,.2,1)}
.fg-js .fg .fg-frame::after{transition:transform 1.1s cubic-bezier(.7,0,.2,1) .25s}
.fg.fg-in .fg-frame{opacity:1;transform:none;clip-path:inset(0 0 0 0 round 20px)}
.fg.fg-in .fg-frame::after{transform:scaleX(1)}

/* Feature rows on /features/: text beside the gallery, alternating sides. */
.fg-rows{display:flex;flex-direction:column;gap:56px;margin-top:22px}
.fg-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px;align-items:center}
.fg-row:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.fg-row:nth-child(even) .fg-text{order:2}
.fg-row h3{margin:0 0 10px}
.fg-row p{margin:0;color:var(--muted,#9AA8C7)}
.fg-row .fg-tag{display:inline-block;margin-bottom:10px;font:600 11.5px/1 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#47E7F9}
.fg-row.fg-nomedia{grid-template-columns:1fr}
/* Home grid: a picture on top of each card. */
.card .fg-compact{margin:-6px -6px 16px}
.card .fg-compact .fg-frame{border-radius:14px}
.fg-js .card .fg-compact.fg-fx-wipe:not(.fg-in) .fg-frame{clip-path:inset(0 100% 0 0 round 14px)}
.card .fg-compact.fg-in .fg-frame{clip-path:inset(0 0 0 0 round 14px)}

@media (max-width:860px){
  .fg-row,.fg-row:nth-child(even){grid-template-columns:1fr;gap:18px}
  .fg-row:nth-child(even) .fg-text{order:0}
  .fg-rows{gap:44px}
  .fg-arrow{width:38px;height:38px;font-size:22px}
  .fg-bar{flex-direction:column;align-items:flex-start;gap:6px}
}
@media (prefers-reduced-motion:reduce){
  .fg-js .fg .fg-frame,.fg-js .fg .fg-frame::after{transition:none}
  .fg-js .fg:not(.fg-in) .fg-frame{opacity:1;transform:none;clip-path:none}
  .fg-js .fg:not(.fg-in) .fg-frame::after{transform:scaleX(1)}
  .fg-track{scroll-behavior:auto}
}