/* ==========================================================================
   FAIRYSET · fairyset.css
   SCOPO  Solo ciò che Scrollweaver non ha: schermata di accesso a tutto
          schermo, cuore, filtro, griglia delle gallerie, pannello admin.
          Colori e font arrivano dai token del kit (cambia data-sw-palette).
   ========================================================================== */
body { margin: 0; background: var(--sw-bg); color: var(--sw-ink); font-family: var(--sw-sans); }
code { font-size: .88em; background: var(--sw-tint); padding: .1em .4em; border-radius: var(--sw-r-xs); }

/* ---------- intestazione ---------- */
.fs-top { position: absolute; z-index: 5; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1rem, 4vw, 2.5rem); }
.fs-gal .fs-top { position: static; }
.fs-brand { font: 600 1.15rem/1 var(--sw-serif); letter-spacing: .02em; color: inherit; text-decoration: none; }
.fs-home .fs-brand { color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.35); }
.fs-top nav { display: flex; align-items: center; gap: 1rem; }
.fs-top form { margin: 0; }
.fs-link { background: none; border: 0; padding: .3rem 0; font: 500 .9rem/1 var(--sw-sans); color: var(--sw-link); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.fs-home .fs-link { color: #fff; }

/* ---------- schermata di accesso ---------- */
.fs-gate { position: relative; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 5rem 1.2rem 3rem; overflow: hidden;
  background: radial-gradient(120% 90% at 20% 10%, var(--sw-brand-700), var(--sw-brand-900) 70%); isolation: isolate; }
.fs-gate::before { content: ""; position: absolute; inset: -6%; z-index: -2; background: var(--fs-cover, none) center / cover; filter: blur(34px) saturate(1.25); transform: scale(1.15); opacity: .95; }
.fs-gate::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,.5)); }
.fs-card { width: min(100%, 26rem); padding: clamp(1.6rem, 5vw, 2.4rem); border-radius: var(--sw-r-xl); background: color-mix(in srgb, var(--sw-surface) 90%, transparent);
  color: var(--sw-ink); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 30px 80px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.12) inset; animation: fs-in .7s var(--sw-ease, ease) both; }
.fs-card--wide { width: min(100%, 38rem); }
.fs-card h1 { margin: .2rem 0 .6rem; font: 600 clamp(1.7rem, 5vw, 2.2rem)/1.15 var(--sw-serif); color: var(--sw-heading); }
.fs-eyebrow { margin: 0; font: 600 .72rem/1.3 var(--sw-sans); letter-spacing: .16em; text-transform: uppercase; color: var(--sw-eyebrow); }
.fs-lead { margin: .4rem 0 1.2rem; color: var(--sw-soft); line-height: 1.55; }
.fs-form { display: grid; gap: 1rem; margin-top: 1.2rem; }
.fs-form .sw-btn { justify-self: stretch; justify-content: center; }
.fs-note { margin: 1.2rem 0 0; font-size: .82rem; color: var(--sw-soft); text-align: center; }
.fs-pw { position: relative; }
.fs-pw .sw-field__control { width: 100%; padding-right: 5rem; box-sizing: border-box; }
.fs-eye { position: absolute; right: .5rem; top: 50%; translate: 0 -50%; background: none; border: 0; padding: .4rem .6rem; font: 600 .78rem/1 var(--sw-sans); color: var(--sw-link); cursor: pointer; border-radius: var(--sw-r-sm); }
.fs-eye:focus-visible { outline: 2px solid var(--sw-eyebrow); }
.fs-error { margin: .5rem 0 0; padding: .55rem .8rem; border-radius: var(--sw-r-md); background: var(--sw-danger-bg); color: var(--sw-danger-ink); font-size: .88rem; line-height: 1.4; }
.fs-ok { margin: .5rem 0 0; padding: .55rem .8rem; border-radius: var(--sw-r-md); background: var(--sw-tint); font-size: .92rem; }
@keyframes fs-in { from { opacity: 0; transform: translateY(18px) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .fs-card { animation: none; } }

/* ---------- galleria ---------- */
.fs-title { padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 2.5rem) 1rem; max-width: 70rem; margin: 0 auto; }
.fs-title h1 { margin: .3rem 0 .4rem; font: 600 clamp(2rem, 6vw, 3.6rem)/1.08 var(--sw-serif); color: var(--sw-heading); }
.fs-bar { position: sticky; top: 0; z-index: 4; display: flex; gap: .5rem; max-width: 70rem; margin: 0 auto; padding: .7rem clamp(1rem, 4vw, 2.5rem);
  background: color-mix(in srgb, var(--sw-bg) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.fs-bar button { padding: .5rem 1rem; border-radius: var(--sw-r-pill); border: 1px solid var(--sw-line); background: transparent; color: var(--sw-ink); font: 500 .9rem/1 var(--sw-sans); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.fs-bar button span { opacity: .6; margin-left: .25rem; font-variant-numeric: tabular-nums; }
.fs-bar button[aria-pressed="true"] { background: var(--sw-heading); color: var(--sw-bg); border-color: var(--sw-heading); }
.fs-bar button:focus-visible { outline: 2px solid var(--sw-eyebrow); outline-offset: 2px; }
.fs-grid { max-width: 70rem; margin: 0 auto; padding: .6rem clamp(1rem, 4vw, 2.5rem) 2rem; }
.fs-item { position: relative; margin: 0 0 var(--sw-masonry-gap, .8rem); }
.fs-item img { display: block; width: 100%; height: auto; background: var(--sw-tint); }
.fs-vuoto { max-width: 70rem; margin: 2rem auto; padding: 0 clamp(1rem, 4vw, 2.5rem); color: var(--sw-soft); text-align: center; }
.fs-foot { padding: 2rem 1rem 3rem; text-align: center; font-size: .8rem; color: var(--sw-soft); }

/* ---------- il cuore ---------- */
.fs-heart { position: absolute; right: .55rem; bottom: .55rem; z-index: 2; width: 2.6rem; height: 2.6rem; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(20,20,20,.38); color: #fff; cursor: pointer; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s, background .2s, transform .2s; -webkit-tap-highlight-color: transparent; }
.fs-item:hover .fs-heart, .fs-heart:focus-visible, .fs-heart[aria-pressed="true"] { opacity: 1; }
@media (hover: none) { .fs-heart { opacity: 1; } }
.fs-heart svg, .fs-lb-heart svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; transition: fill .2s, color .2s; }
.fs-heart[aria-pressed="true"] svg, .fs-lb-heart[aria-pressed="true"] svg { fill: #ff5a6e; stroke: #ff5a6e; }
.fs-heart:hover { transform: scale(1.08); background: rgba(20,20,20,.55); }
.fs-heart:focus-visible, .fs-lb-heart:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fs-heart.pop svg, .fs-lb-heart.pop svg { animation: fs-pop .38s cubic-bezier(.3,1.6,.5,1); }
@keyframes fs-pop { 40% { transform: scale(1.45); } }
@media (prefers-reduced-motion: reduce) { .fs-heart.pop svg, .fs-lb-heart.pop svg { animation: none; } }
.fs-lb-heart { position: relative; flex: none; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; display: grid; place-items: center; padding: 0; cursor: pointer;
  background: var(--_btn, rgba(255,255,255,.12)); color: inherit; }
.fs-lb-heart:hover { background: var(--_btn-hover, rgba(255,255,255,.24)); }

/* ---------- pannello admin ---------- */
.fs-panel { max-width: 70rem; margin: 0 auto; padding: 1rem clamp(1rem, 4vw, 2.5rem) 2.5rem; }
.fs-panel h2 { font: 600 1.5rem/1.2 var(--sw-serif); color: var(--sw-heading); margin: 1rem 0 .5rem; }
.fs-row { display: grid; grid-template-columns: 1.4fr .7fr 1.6fr; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--sw-line); }
.fs-acts { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; }
.fs-acts .sw-field__control { flex: 1 1 14rem; min-width: 0; font-size: .8rem; }
.fs-row small { color: var(--sw-soft); }
.fs-form--grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: end; }
.fs-code { font-family: var(--sw-mono, monospace); font-size: .8rem; width: 100%; box-sizing: border-box; }
.fs-mini { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.fs-mini figure { margin: 0; font-size: .78rem; color: var(--sw-soft); }
.fs-mini img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--sw-r-md); display: block; margin-bottom: .35rem; }
@media (max-width: 760px) { .fs-row { grid-template-columns: 1fr; gap: .5rem; } }

/* ---------- gallerie protette ---------- */
.fs-protetta img { -webkit-user-drag: none; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.fs-protetta .sw-lightbox img { -webkit-touch-callout: none; user-select: none; }
@media print { .fs-protetta main { display: none !important; } body.fs-protetta::after { content: "Le foto di questa galleria non si stampano."; } }
.fs-lb-dl { text-decoration: none; }
.fs-badges { display: inline-flex; gap: .35rem; flex-wrap: wrap; margin-top: .35rem; }
.fs-badges span { padding: .12rem .55rem; border-radius: var(--sw-r-pill); background: var(--sw-tint); font-size: .72rem; color: var(--sw-ink); }
.fs-check { display: flex; gap: .55rem; align-items: flex-start; font-size: .9rem; line-height: 1.35; }
.fs-check input { margin-top: .2rem; accent-color: var(--sw-brand-700); }
.fs-check small { display: block; color: var(--sw-soft); }

.fs-wide { grid-column: 1 / -1; }

/* ---------- selezione e ZIP ---------- */
.fs-bar { flex-wrap: wrap; align-items: center; }
.fs-bar__spazio { flex: 1; }
.fs-selecting .fs-item { cursor: pointer; }
.fs-selecting .fs-item::before { content: ""; position: absolute; z-index: 2; left: .6rem; top: .6rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; box-sizing: border-box;
  border: 2px solid #fff; background: rgba(20,20,20,.32); box-shadow: 0 1px 6px rgba(0,0,0,.35); transition: background .15s; }
.fs-selecting .fs-item.is-sel::before { background: var(--sw-brand-700) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.5 4.5 8.5-9'/%3E%3C/svg%3E") center / 72% no-repeat; }
.fs-selecting .fs-item.is-sel img { outline: 3px solid var(--sw-brand-700); outline-offset: -3px; filter: brightness(.88); }
.fs-selbar { position: fixed; z-index: 30; left: 50%; bottom: 1rem; translate: -50% 0; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; justify-content: center;
  max-width: calc(100vw - 1.6rem); padding: .6rem .8rem; border-radius: var(--sw-r-xl); background: var(--sw-heading); color: var(--sw-bg); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.fs-selbar[hidden] { display: none; }
.fs-selbar span { font: 600 .9rem/1 var(--sw-sans); margin: 0 .4rem; font-variant-numeric: tabular-nums; }
.fs-selbar button { padding: .5rem .85rem; border: 1px solid color-mix(in srgb, var(--sw-bg) 40%, transparent); border-radius: var(--sw-r-pill); background: transparent; color: inherit; font: 500 .85rem/1 var(--sw-sans); cursor: pointer; }
.fs-selbar button:hover { background: color-mix(in srgb, var(--sw-bg) 16%, transparent); }
.fs-selbar .fs-selgo { background: var(--sw-bg); color: var(--sw-heading); border-color: var(--sw-bg); font-weight: 600; }
.fs-selbar .fs-selgo:disabled { opacity: .45; cursor: not-allowed; }
.fs-selbar button:focus-visible { outline: 2px solid var(--sw-bg); outline-offset: 2px; }

/* ---------- filtri a due gruppi ---------- */
.fs-seg { display: inline-flex; gap: .15rem; padding: .18rem; border-radius: var(--sw-r-pill); background: var(--sw-tint); }
.fs-bar .fs-seg button { border: 0; padding: .45rem .9rem; background: transparent; }
.fs-bar .fs-seg button[aria-pressed="true"] { background: var(--sw-heading); color: var(--sw-bg); }
.fs-bar .fs-solo { border: 1px solid var(--sw-line); }
.fs-bar { gap: .6rem; }

/* ---------- video nella griglia e lettore ---------- */
.fs-vopen { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 0; border: 0; background: transparent; cursor: pointer; border-radius: inherit; -webkit-tap-highlight-color: transparent; }
.fs-vopen svg { width: 3.6rem; height: 3.6rem; padding: .9rem .75rem .9rem 1.05rem; box-sizing: border-box; border-radius: 50%; fill: #fff; background: rgba(15,15,15,.5);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); box-shadow: 0 0 0 2px rgba(255,255,255,.55) inset; transition: transform .2s, background .2s; }
.fs-vopen:hover svg { transform: scale(1.08); background: rgba(15,15,15,.68); }
.fs-vopen:focus-visible { outline: 3px solid var(--sw-eyebrow); outline-offset: -3px; }
.fs-item--video img { aspect-ratio: auto; }
.fs-selecting .fs-vopen svg { opacity: .55; }

.fs-player { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; color: #fff; overflow: hidden; }
.fs-player:not([open]) { display: none; }
.fs-player[open] { display: grid; place-items: center; animation: fs-in .25s ease both; }
.fs-player video { width: 100%; height: 100%; max-height: 100dvh; object-fit: contain; background: #000; outline: none; }
.fs-player__top { position: absolute; z-index: 2; inset: 0 0 auto 0; display: flex; align-items: center; gap: .45rem; padding: .7rem .8rem .7rem 1rem; pointer-events: none;
  background: linear-gradient(rgba(0,0,0,.55), transparent); }
.fs-player__top > * { pointer-events: auto; }
.fs-player__count { margin-right: auto; font: 600 .9rem/1 var(--sw-sans); font-variant-numeric: tabular-nums; opacity: .85; }
.fs-lb-heart svg { stroke-linecap: round; }
.fs-pnav { position: absolute; z-index: 2; top: 50%; translate: 0 -50%; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; display: grid; place-items: center; padding: 0;
  background: rgba(0,0,0,.5); color: #fff; cursor: pointer; box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset; }
.fs-pnav:hover { background: rgba(0,0,0,.7); } .fs-pnav[hidden] { display: none; }
.fs-pnav svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fs-pnav--prev { left: .6rem; } .fs-pnav--next { right: .6rem; }
@media (max-width: 700px) { .fs-pnav { top: auto; bottom: 4.5rem; translate: 0 0; } }
.fs-lb-heart svg path[d^="M6 6"] { fill: none; }

.fs-badges .fs-warn { background: var(--sw-warn-bg); color: var(--sw-warn-ink); }

/* ==========================================================================
   SCHERMATA DI CARICAMENTO · disegno a linea luminosa su fondo nero stellato (solo prima visita della sessione)
   Linea del tempo: 0–0,7 s la scia di luce · 0,4–1,3 s la fotocamera si traccia · 0,8–1,7 s la fatina ·
   1,55 s colpo di bacchetta · 1,8 s scatto: anello e raggi, la linea si accende · 2,1–2,9 s il titolo · 3 s il velo svanisce.
   Le linee si disegnano con stroke-dashoffset (pathLength=1); il bagliore è un drop-shadow sull'<svg> intero.
   ========================================================================== */
.fs-loader { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; cursor: pointer; background: #000; color: #eaf6ff; overflow: hidden;
  animation: fs-out .5s 3s ease forwards; }
html.fs-visto .fs-loader, .fs-loader[hidden] { display: none; }
.fs-loader::before { content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(1.6px 1.6px at 12% 22%, #fff, transparent), radial-gradient(1px 1px at 28% 70%, #fff, transparent), radial-gradient(1.4px 1.4px at 44% 12%, #fff, transparent),
    radial-gradient(1px 1px at 62% 84%, #fff, transparent), radial-gradient(1.6px 1.6px at 78% 30%, #fff, transparent), radial-gradient(1px 1px at 90% 62%, #fff, transparent),
    radial-gradient(1px 1px at 8% 88%, #fff, transparent), radial-gradient(1.2px 1.2px at 36% 38%, #fff, transparent), radial-gradient(1px 1px at 70% 8%, #fff, transparent), radial-gradient(1.2px 1.2px at 94% 90%, #fff, transparent);
  opacity: .75; animation: fs-twinkle 2.6s ease-in-out infinite alternate; }
.fs-disegno { position: relative; width: min(90vw, 600px); height: auto; overflow: visible; stroke: #eaf6ff; stroke-width: 1.7;
  filter: drop-shadow(0 0 2px rgba(190,230,255,.95)) drop-shadow(0 0 9px rgba(120,185,255,.55)); animation: fs-bagliore .7s 1.8s ease-out both; }
.fs-disegno .d { stroke-dasharray: 1 1; animation: fs-draw var(--l) var(--t) cubic-bezier(.4, 0, .2, 1) both; }
.fs-scia { stroke-width: 1.2; stroke: #bfe3ff; }
.fs-testa { fill: #fff; stroke: none; animation: fs-testa .75s 0s ease both; }
.fs-raggio { stroke: #fff2b8; stroke-width: 1.7; stroke-dasharray: 1 1; animation: fs-raggio .7s 1.8s ease-out both; }
.fs-anello { stroke: #fff2b8; stroke-width: 1.2; opacity: 0; }
.fs-fatina polygon { stroke: #ffe58a; }
.fs-corpo { stroke-width: 1.15; }
.fs-scritta { font: 600 25px/1 var(--sw-serif, Georgia, serif); fill: transparent; stroke: #eaf6ff; stroke-width: .9; stroke-dasharray: 340; stroke-dashoffset: 340;
  animation: fs-scrivi 1s 2.1s ease-out forwards, fs-riempi .6s 2.9s ease-out forwards; }
@keyframes fs-out { to { opacity: 0; visibility: hidden; } }
@keyframes fs-twinkle { to { opacity: .35; } }
@keyframes fs-draw { 0% { stroke-dashoffset: 1; opacity: 0; } 1% { stroke-dashoffset: 1; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 1; } }
@keyframes fs-testa { 0% { opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fs-raggio { 0% { stroke-dashoffset: 1; opacity: 0; } 15% { opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes fs-bagliore { 0% { filter: drop-shadow(0 0 2px rgba(190,230,255,.95)) drop-shadow(0 0 9px rgba(120,185,255,.55)); }
  25% { filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 26px rgba(255,255,255,.95)) drop-shadow(0 0 60px rgba(160,210,255,.7)); }
  100% { filter: drop-shadow(0 0 2px rgba(190,230,255,.95)) drop-shadow(0 0 9px rgba(120,185,255,.55)); } }
@keyframes fs-scrivi { to { stroke-dashoffset: 0; } }
@keyframes fs-riempi { to { fill: #eaf6ff; stroke-width: 0; } }
@media (prefers-reduced-motion: reduce) { .fs-loader { display: none; } }

/* ==========================================================================
   SCHERMATA D'ACCESSO · polvere di luce, bordo che gira, segno, campo con lucchetto
   ========================================================================== */
@property --fs-ang { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
.fs-gate { background: radial-gradient(90% 70% at 50% 0%, color-mix(in srgb, var(--sw-brand-500) 55%, var(--sw-brand-900)), var(--sw-brand-900) 60%, #05070b); }
.fs-card { position: relative; z-index: 1; }
.fs-card::before { content: ""; position: absolute; inset: -1.5px; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--fs-ang), transparent 0 62%, rgba(255,255,255,.95) 82%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: fs-giro 7s linear infinite; }
@keyframes fs-giro { to { --fs-ang: 360deg; } }
.fs-mark { display: block; width: 3.1rem; height: auto; margin: 0 0 1rem; color: var(--sw-brand-700); fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.fs-mark__occhio { fill: currentColor; stroke: none; opacity: .8; }
.fs-mark__stella { fill: var(--sw-accent, #e0a040); stroke: none; transform-box: fill-box; transform-origin: center; animation: fs-stellina 2.6s ease-in-out infinite; }
@keyframes fs-stellina { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(1.5) rotate(25deg); opacity: .75; } }
.fs-dust { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.fs-dust span { position: absolute; width: var(--s, 4px); height: var(--s, 4px); border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 8px 2px rgba(255,244,190,.75); animation: fs-vaga 8s ease-in-out infinite; }
@keyframes fs-vaga { 0% { opacity: 0; transform: translateY(14px) scale(.6); } 30% { opacity: .9; } 70% { opacity: .55; } 100% { opacity: 0; transform: translateY(-46px) scale(1.2); } }
.fs-dust span:nth-child(1) { left: 6%; top: 72%; --s: 4px; animation-duration: 7s; animation-delay: -1s; }
.fs-dust span:nth-child(2) { left: 14%; top: 30%; --s: 3px; animation-duration: 9s; animation-delay: -4s; }
.fs-dust span:nth-child(3) { left: 22%; top: 84%; --s: 5px; animation-duration: 8s; animation-delay: -2s; }
.fs-dust span:nth-child(4) { left: 31%; top: 18%; --s: 3px; animation-duration: 10s; animation-delay: -6s; }
.fs-dust span:nth-child(5) { left: 40%; top: 64%; --s: 4px; animation-duration: 7s; animation-delay: -3s; }
.fs-dust span:nth-child(6) { left: 48%; top: 90%; --s: 3px; animation-duration: 9s; animation-delay: -5s; }
.fs-dust span:nth-child(7) { left: 57%; top: 26%; --s: 5px; animation-duration: 8s; animation-delay: -1s; }
.fs-dust span:nth-child(8) { left: 64%; top: 76%; --s: 3px; animation-duration: 10s; animation-delay: -7s; }
.fs-dust span:nth-child(9) { left: 72%; top: 14%; --s: 4px; animation-duration: 7s; animation-delay: -2s; }
.fs-dust span:nth-child(10) { left: 80%; top: 58%; --s: 3px; animation-duration: 9s; animation-delay: -4s; }
.fs-dust span:nth-child(11) { left: 88%; top: 86%; --s: 5px; animation-duration: 8s; animation-delay: -6s; }
.fs-dust span:nth-child(12) { left: 93%; top: 34%; --s: 3px; animation-duration: 10s; animation-delay: -3s; }
.fs-dust span:nth-child(13) { left: 10%; top: 50%; --s: 3px; animation-duration: 8s; animation-delay: -5s; }
.fs-dust span:nth-child(14) { left: 36%; top: 44%; --s: 2px; animation-duration: 9s; animation-delay: -2s; }
.fs-dust span:nth-child(15) { left: 76%; top: 40%; --s: 2px; animation-duration: 7s; animation-delay: -6s; }
.fs-dust span:nth-child(16) { left: 52%; top: 52%; --s: 2px; animation-duration: 10s; animation-delay: -8s; }
@media (prefers-reduced-motion: reduce) { .fs-dust span, .fs-mark__stella, .fs-card::before { animation: none; } .fs-dust span { opacity: .5; } }
.fs-pw .fs-lock { position: absolute; left: .95rem; top: 50%; translate: 0 -50%; width: 1.15rem; height: 1.15rem; fill: none; stroke: var(--sw-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.fs-pw .sw-field__control { padding-left: 2.8rem; }
.fs-gate .sw-field__control { height: 3rem; border-radius: var(--sw-r-lg); }
.fs-form .sw-btn { position: relative; overflow: hidden; height: 3rem; background: linear-gradient(135deg, var(--sw-brand-700), var(--sw-brand-900)); }
.fs-form .sw-btn::after { content: ""; position: absolute; inset: 0; translate: -120% 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%); animation: fs-luccica 4.5s 1.5s ease-in-out infinite; pointer-events: none; }
@keyframes fs-luccica { 0%, 55% { translate: -120% 0; } 100% { translate: 120% 0; } }
.fs-gate .fs-error { animation: fs-scuoti .45s ease both; }
@keyframes fs-scuoti { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) { .fs-form .sw-btn::after, .fs-gate .fs-error { animation: none; } }