/* ============================================================
   visual-system.css — shared bg + glass-pill + beam-card system
   Loaded by flagon-landing/index.html and templates/interior.html
   Palette: only the 5 flagon.ai colors.
   ============================================================ */

:root {
  --fp-olive:  #413620;
  --fp-cream:  #F8EFD3;
  --fp-orange: #FF5B1F;
  --fp-yellow: #FFEB9A;
  --fp-maroon: #6B1F2A;
}

@property --fp-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ── BG STACK ──────────────────────────────────────────────
   .fp-bg-stack is a fixed full-viewport layer at z-index 0.
   Site sections (z-index 1+) sit on top. Each child layer
   is pointer-events:none and decorative only. */
.fp-bg-stack {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.fp-bg-base {
  position: absolute;
  inset: 0;
  background: var(--fp-cream);
}

/* ── CORNER GRID — fades from top-left and bottom-right toward center ── */
.fp-bg-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(65,54,32,0.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65,54,32,0.10) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image:
    radial-gradient(ellipse 78% 62% at 0% 0%, black 0%, transparent 68%),
    radial-gradient(ellipse 78% 62% at 100% 100%, black 0%, transparent 68%);
  -webkit-mask-image:
    radial-gradient(ellipse 78% 62% at 0% 0%, black 0%, transparent 68%),
    radial-gradient(ellipse 78% 62% at 100% 100%, black 0%, transparent 68%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
}

/* ── CORNER DOTS — polka dots concentrated at the same corners ── */
.fp-corner-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 50% 50%, rgba(65,54,32,0.52) 0.8px, transparent 1.3px);
  background-size: 28px 28px;
  mask-image:
    radial-gradient(ellipse 44% 36% at 0% 0%, black 0%, transparent 56%),
    radial-gradient(ellipse 44% 36% at 100% 100%, black 0%, transparent 56%);
  -webkit-mask-image:
    radial-gradient(ellipse 44% 36% at 0% 0%, black 0%, transparent 56%),
    radial-gradient(ellipse 44% 36% at 100% 100%, black 0%, transparent 56%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
}

/* ── CORNER GRAIN — film texture at the same corners ── */
.fp-corner-grain {
  position: absolute; inset: 0;
  opacity: 0.20;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.25  0 0 0 0 0.21  0 0 0 0 0.12  0 0 0 0.65 0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
  background-size: 180px 180px;
  mask-image:
    radial-gradient(ellipse 52% 42% at 0% 0%, black 0%, transparent 58%),
    radial-gradient(ellipse 52% 42% at 100% 100%, black 0%, transparent 58%);
  -webkit-mask-image:
    radial-gradient(ellipse 52% 42% at 0% 0%, black 0%, transparent 58%),
    radial-gradient(ellipse 52% 42% at 100% 100%, black 0%, transparent 58%);
  mask-composite: add;
  -webkit-mask-composite: source-over;
}

/* ── PAGE GRID — fixed full-page grid, z:3 so it sits above section backgrounds ── */
.fp-page-grid {
  position: fixed; inset: 0;
  z-index: 3;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(65,54,32,0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(65,54,32,0.028) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 30%, black 82%);
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 50%, transparent 30%, black 82%);
}

/* ── SOLID PILL ─────────────────────────────────────────────
   Solid cream fill, olive outline — no glass, no blur. */
.fnav-pill.fp-glass {
  background: var(--fp-cream) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1.5px solid var(--fp-olive) !important;
  box-shadow: 0 2px 12px rgba(65,54,32,0.18), 3px 3px 0 rgba(65,54,32,0.10) !important;
}
.fnav-pill.fp-glass .fnav-brand {
  color: var(--fp-olive);
}
.fnav-pill.fp-glass .fnav-brand::after {
  background: rgba(65,54,32,0.22);
}
.fnav-pill.fp-glass .fnav-brand-dot {
  background: var(--fp-orange);
  box-shadow: 0 0 8px rgba(255,91,31,0.6);
}
.fnav-pill.fp-glass .fnav-link,
.fnav-pill.fp-glass .fnav-plain {
  color: var(--fp-olive);
  font-weight: 600;
  transition: background 0.14s ease, color 0.14s ease, box-shadow 0.14s ease;
}
/* Hover — solid olive pill, cream text (the brand's signature pairing) */
.fnav-pill.fp-glass .fnav-link:hover,
.fnav-pill.fp-glass .fnav-plain:hover {
  color: var(--fp-cream);
  background: var(--fp-olive);
  box-shadow: 0 1px 0 rgba(65,54,32,0.25);
}
/* Selected (mega-menu open) — deeper maroon to read as a different state */
.fnav-pill.fp-glass .fnav-item--open .fnav-link {
  color: var(--fp-cream);
  background: var(--fp-maroon);
  box-shadow: inset 0 0 0 1.5px var(--fp-olive);
}
/* Keyboard focus ring — maroon, brand-consistent, high contrast on cream */
.fnav-pill.fp-glass .fnav-link:focus-visible,
.fnav-pill.fp-glass .fnav-plain:focus-visible,
.fnav-pill.fp-glass .fnav-btn-demo:focus-visible,
.fnav-pill.fp-glass .fnav-btn-login:focus-visible,
.fnav-pill.fp-glass .fnav-btn-start:focus-visible,
.fnav-pill.fp-glass .fnav-hamburger:focus-visible {
  outline: 2.5px solid var(--fp-maroon);
  outline-offset: 2px;
  border-radius: 999px;
}
.fnav-pill.fp-glass .fnav-divider {
  background: rgba(65,54,32,0.30);
}
/* Demo — ghost button with solid olive outline; hover fills olive */
.fnav-pill.fp-glass .fnav-btn-demo {
  color: var(--fp-olive);
  border: 1.5px solid var(--fp-olive) !important;
  background: transparent;
  font-weight: 700;
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease;
}
.fnav-pill.fp-glass .fnav-btn-demo:hover {
  color: var(--fp-cream);
  background: var(--fp-olive);
  transform: translateY(-1px);
}
/* Login — same hover treatment as plain links */
.fnav-pill.fp-glass .fnav-btn-login {
  color: var(--fp-olive);
  font-weight: 600;
  transition: background 0.14s ease, color 0.14s ease;
}
.fnav-pill.fp-glass .fnav-btn-login:hover {
  color: var(--fp-cream);
  background: var(--fp-olive);
}
/* Sign Up — orange fill, olive outline + olive sticker shadow; hover deepens to maroon */
.fnav-pill.fp-glass .fnav-btn-start {
  background: var(--fp-orange);
  color: var(--fp-cream);
  border: 1.5px solid var(--fp-olive);
  font-weight: 700;
  box-shadow: 2px 2px 0 var(--fp-olive);
  transition: background 0.14s ease, color 0.14s ease, transform 0.14s ease, box-shadow 0.14s ease;
}
.fnav-pill.fp-glass .fnav-btn-start:hover {
  background: var(--fp-maroon);
  color: var(--fp-yellow);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0 var(--fp-olive);
}
.fnav-pill.fp-glass .fnav-btn-start:active {
  transform: translate(2px, 2px);
  box-shadow: 0 0 0 var(--fp-olive);
}
.fnav-pill.fp-glass .fnav-hamburger {
  color: var(--fp-olive);
  transition: background 0.14s ease, color 0.14s ease;
}
.fnav-pill.fp-glass .fnav-hamburger:hover {
  background: var(--fp-olive);
  color: var(--fp-cream);
}

/* ── BEAM CARD ─────────────────────────────────────────────
   Apply .fp-beam-card to a card. Ensure the card has
   position: relative, overflow: hidden, border-radius set. */
.fp-beam-card { position: relative; }
.fp-beam-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1.5px;
  background: conic-gradient(
    from var(--fp-angle),
    transparent 0deg,
    transparent 180deg,
    rgba(255,91,31,0.20) 220deg,
    rgba(255,91,31,0.55) 290deg,
    rgba(255,91,31,0.95) 345deg,
    rgba(255,91,31,1) 358deg,
    transparent 360deg
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  filter: drop-shadow(0 0 3px rgba(255,91,31,0.55));
  animation: fp-beam-spin 8s linear infinite;
  z-index: 2;
}
@keyframes fp-beam-spin { to { --fp-angle: 360deg; } }

/* ── REDUCED MOTION ────────────────────────────────────────
   Park all motion. Beam stays at a fixed accent angle so the
   ring is still visible as a static gradient sliver. */
@media (prefers-reduced-motion: reduce) {
  .fp-beam-card::after {
    animation: none !important;
    --fp-angle: 320deg;
  }
}