/* ============================================================
   FOSSENSIS — page styles for the placeholder landing page.
   Depends on the design tokens loaded via ../styles.css.
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #17120C; }
a { color: var(--bronze-300); text-decoration: none; }
a:hover { color: var(--bronze-200); }

/* Graded background image */
.fx-img { position: relative; overflow: hidden; display: block; margin: 0; background: var(--basalt-900); }
.fx-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fx-img--graded > img { filter: saturate(0.74) contrast(1.06) brightness(1.02); }
.fx-img--graded::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(175deg, rgba(192,145,63,0.20) 0%, rgba(122,74,34,0.10) 45%, rgba(32,26,19,0.34) 100%);
  mix-blend-mode: soft-light; pointer-events: none;
}

/* Primary CTA hover */
.fos-cta { transition: background var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.fos-cta:hover { background: var(--bronze-400) !important; transform: translateY(-3px); box-shadow: var(--glow-bronze-md); }

/* Entrance + ambient animation */
@keyframes fos-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fos-mark-in { from { opacity: 0; transform: translateY(14px) scale(0.92); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes fos-breathe { 0%, 100% { opacity: 0.5; transform: scale(1); } 50% { opacity: 0.9; transform: scale(1.1); } }
@keyframes fos-kenburns { 0% { transform: scale(1.02) translate(0, 0); } 100% { transform: scale(1.14) translate(-2%, -2%); } }
@keyframes fos-line { from { width: 0; } to { width: 72px; } }
@keyframes fos-ping { 0% { transform: scale(1); opacity: 0.7; } 70%, 100% { transform: scale(2.6); opacity: 0; } }

.fos-reveal { opacity: 0; animation: fos-rise 0.95s var(--ease-out) forwards; }
.fos-kb { animation: fos-kenburns 28s var(--ease-in-out) infinite alternate; }

@media (max-width: 720px) {
  .fos-partners { flex-direction: column; gap: 28px !important; }
  .fos-partners .fos-divider { width: 64px !important; height: 1px !important; min-height: 0 !important; }
  .fos-status { white-space: normal !important; text-align: center; letter-spacing: 0.18em !important; }
  .fos-status-chip { max-width: 100%; align-items: flex-start !important; }
  .fos-eyebrow { line-height: 1.7 !important; }
}

@media (prefers-reduced-motion: reduce) {
  .fos-reveal { opacity: 1; animation: none; }
  .fos-glow, .fos-kb, .fos-rule { animation: none !important; }
  .fos-rule { width: 72px !important; }
}