/*
  FARZI Studio - signed-in home + brand (dark / graphite identity).
  Loaded last so it refines the existing app styles in place; it is not
  a second theme. The purple palette itself was retired in the shared
  tokens (css/variables.css, index.html :root) and the app's own
  colour literals. Nothing here applies to the signed-out public landing
  page (#farziPublicLanding has its own stylesheet).
*/

/* --------------------------------------------------------------- logo */
.farzi-sidebar-brand { gap: 12px; }
.farzi-sidebar-brand .mark,
header.topbar .brand .brand-mark {
  background: linear-gradient(180deg, #f4f2ed 0%, #d6d2ca 100%) !important;
  color: #0b0c0f !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 8px 22px rgba(0, 0, 0, 0.5) !important;
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 700 !important;
  letter-spacing: 0;
}
header.topbar .brand .brand-mark span { color: #0b0c0f !important; font-weight: 700 !important; font-family: 'Outfit', system-ui, sans-serif; }
.farzi-sidebar-brand .name b,
header.topbar .brand .brand-copy b {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.14em !important;
  color: #f4f2ed !important;
}
.farzi-sidebar-brand .name em,
header.topbar .brand .brand-copy em {
  font-family: 'Outfit', system-ui, sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.42em !important;
  color: rgba(236, 231, 223, 0.55) !important;
}

/* Former accent-text uses: readable neutral on the dark chrome. */
.farzi-nav-badge { color: #d6d3cc !important; border-color: rgba(255, 255, 255, 0.22) !important; }
.farzi-refmgr-play { color: #d6d3cc !important; }

/* ------------------------------------------- home hero: cinematic art */
.farzi-home-hero {
  background: #050608 !important;
  border-color: rgba(255, 255, 255, 0.07) !important;
}
.farzi-hero-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #050608;
}
.farzi-hero-art .fha-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.8s ease;
}
.farzi-hero-art .fha-slide.is-active { opacity: 1; }
.farzi-hero-art:not(.is-ready) .fha-slide.is-active { opacity: 0; }
.farzi-hero-art picture,
.farzi-hero-art img { display: block; width: 100%; height: 100%; }
.farzi-hero-art img { object-fit: cover; object-position: var(--fha-pos, 50% 50%); }

/* Neutral black depth: strongest where the copy and controls sit. */
.farzi-home-hero .farzi-hero-video-overlay {
  background:
    linear-gradient(0deg, rgba(5, 6, 8, 0.94) 0%, rgba(5, 6, 8, 0.62) 34%, rgba(5, 6, 8, 0.12) 64%, rgba(5, 6, 8, 0.4) 100%),
    linear-gradient(90deg, rgba(5, 6, 8, 0.82) 0%, rgba(5, 6, 8, 0.4) 34%, rgba(5, 6, 8, 0) 62%) !important;
}

/* The studio collage (slide 4) is busy behind the copy: deeper shading. */
.farzi-hero-art[data-active='3'] + .farzi-hero-video-overlay {
  background:
    linear-gradient(0deg, rgba(5, 6, 8, 0.95) 0%, rgba(5, 6, 8, 0.7) 36%, rgba(5, 6, 8, 0.25) 66%, rgba(5, 6, 8, 0.45) 100%),
    linear-gradient(90deg, rgba(5, 6, 8, 0.92) 0%, rgba(5, 6, 8, 0.62) 40%, rgba(5, 6, 8, 0.1) 70%) !important;
  transition: background 1.8s ease;
}

/* ------------------------------------------------ home hero: foreground */
.farzi-home-hero .farzi-eyebrow {
  color: rgba(236, 231, 223, 0.66);
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: 0.3em;
}
.farzi-home-hero h1 {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #f4f2ed;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}
.farzi-home-hero h1 span {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: currentColor;
  color: #cfcac1 !important;
  font-weight: 300;
}
.farzi-home-hero p { color: rgba(236, 231, 223, 0.8) !important; }

.farzi-home-hero .farzi-hero-actions .gold-btn,
.farzi-home-hero .farzi-hero-actions .violet-btn {
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 0.18s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* New Project - primary */
.farzi-home-hero .farzi-hero-actions .gold-btn {
  color: #111215 !important;
  background: linear-gradient(180deg, #f4f2ed 0%, #cfcac1 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
}
.farzi-home-hero .farzi-hero-actions .gold-btn:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.55) !important; }
/* Generate Now - secondary */
.farzi-home-hero .farzi-hero-actions .violet-btn {
  color: #f4f2ed !important;
  background: rgba(8, 9, 12, 0.55) !important;
  border: 1px solid rgba(236, 231, 223, 0.42) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
}
.farzi-home-hero .farzi-hero-actions .violet-btn:hover { border-color: rgba(236, 231, 223, 0.8) !important; background: rgba(255, 255, 255, 0.06) !important; }
.farzi-home-hero .farzi-hero-actions .gold-btn:focus-visible,
.farzi-home-hero .farzi-hero-actions .violet-btn:focus-visible {
  outline: 2px solid #f4f2ed;
  outline-offset: 3px;
}

/* Room for the headline and both actions on one line. */
.farzi-home-hero .farzi-hero-copy { grid-column: 1 / span 2; }
.farzi-home-hero .farzi-hero-actions .gold-btn,
.farzi-home-hero .farzi-hero-actions .violet-btn { white-space: nowrap; }

/* ------------------------------------------------------- tablet / phone */
@media (max-width: 900px) {
  .farzi-home-hero { align-items: end !important; align-content: end; }
  .farzi-home-hero .farzi-hero-copy { grid-column: 1 / -1; }
  .farzi-hero-art img { object-position: var(--fha-pos-sm, var(--fha-pos, 50% 50%)); }
  .farzi-home-hero .farzi-hero-video-overlay {
    background:
      linear-gradient(0deg, rgba(5, 6, 8, 0.95) 0%, rgba(5, 6, 8, 0.7) 40%, rgba(5, 6, 8, 0.15) 72%, rgba(5, 6, 8, 0.45) 100%) !important;
  }
}
@media (max-width: 560px) {
  .farzi-home-hero { min-height: min(76svh, 640px) !important; }
  .farzi-home-hero h1 { font-size: clamp(36px, 10vw, 46px) !important; }
  .farzi-home-hero .farzi-hero-actions { gap: 10px; }
  .farzi-home-hero .farzi-hero-actions .gold-btn,
  .farzi-home-hero .farzi-hero-actions .violet-btn { flex: 1 1 140px; padding: 0 14px; font-size: 12px; letter-spacing: 0.06em; }
}

@media (prefers-reduced-motion: reduce) {
  .farzi-hero-art .fha-slide { transition: none; }
}

/* Site footer inside the signed-in app views (the public legal pages keep
   their own styling): neutral, no purple. */
#homeView .fz-footer,
#modelsView .fz-footer,
#projectsView .fz-footer,
#comingSoonView .fz-footer { background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(0, 0, 0, 0)); }
#homeView .fz-footer-mail,
#modelsView .fz-footer-mail,
#projectsView .fz-footer-mail,
#comingSoonView .fz-footer-mail { color: #d6d3cc; }
#homeView .fz-footer-mark,
#modelsView .fz-footer-mark,
#projectsView .fz-footer-mark,
#comingSoonView .fz-footer-mark {
  background: linear-gradient(180deg, #f4f2ed 0%, #d6d2ca 100%);
  color: #0b0c0f;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16);
}