/* ============================================================
   LidFlow.ai — WARM REFRESH PASS (v1.1)
   Amber accent + lifestyle photography — additive only
   ============================================================ */

:root {
  --amber: #f59e0b;
  --amber-deep: #d97706;
  --amber-soft: #fef3c7;
  --cream-bg: #f8f4ee;
  --amber-glow: rgba(245, 158, 11, 0.18);
}

/* ----------------------------------------------------------
   Lifestyle photography — shared atmospheric image baseline
   Used in hero (silhouette) + scenarios 01 & 03 (gym context)
   ---------------------------------------------------------- */
.wr-photo {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.wr-photo img,
.wr-photo .wr-photo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wr-photo .wr-photo-svg { display: none; }
.wr-photo .wr-fallback ~ img { display: none; }
.wr-photo.wr-failed img { display: none; }
.wr-photo.wr-failed .wr-photo-svg { display: block; }

/* ----------------------------------------------------------
   TWEAK 1 — Hero athlete silhouette (B&W, multiply blend)
   ---------------------------------------------------------- */
.hero-photo {
  position: absolute;
  top: 50%;
  right: 0;
  width: 50%;
  height: 70%;
  transform: translateY(-50%);
  z-index: 1;                /* above bg-mesh, below 3D scene */
  pointer-events: none;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 22%, rgba(0,0,0,0.95) 50%, rgba(0,0,0,0.4) 100%);
          mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.6) 22%, rgba(0,0,0,0.95) 50%, rgba(0,0,0,0.4) 100%);
}
.hero-photo img,
.hero-photo .wr-photo-svg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.35) saturate(0.85) contrast(1.05) brightness(1.02);
  mix-blend-mode: multiply;
  opacity: 0.18;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.hero-photo .wr-photo-svg { display: none; }
.hero-photo.wr-failed img { display: none; }
.hero-photo.wr-failed .wr-photo-svg { display: block; }

/* ----------------------------------------------------------
   TWEAK 2 — Hero amber "PWR" tile (PR / energy moment)
   ---------------------------------------------------------- */
.mini-tile-pwr {
  background: rgba(254, 243, 199, 0.85) !important;
  backdrop-filter: blur(12px);
  border: 1px solid var(--amber) !important;
  box-shadow:
    0 4px 14px rgba(217, 119, 6, 0.16),
    0 0 0 4px rgba(245, 158, 11, 0.08) !important;
  position: relative;
}
.mini-tile-pwr .mini-tile-label {
  color: var(--amber-deep) !important;
}
.mini-tile-pwr .mini-tile-value {
  color: #4a2e0a;
}
.mini-tile-pwr::after {
  content: '🔥 PR';
  position: absolute;
  top: -8px; right: -8px;
  background: var(--amber);
  color: white;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  padding: 3px 7px;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(217, 119, 6, 0.3);
}

/* ----------------------------------------------------------
   TWEAK 3 — Pillar 02 AI panel: Sophie K. amber lead-bar
   ---------------------------------------------------------- */
.lead-row.hot .nm::before {
  content: '🔥 ';
  margin-right: 2px;
}
.lead-row.hot .bar-fill {
  background: linear-gradient(90deg, var(--amber), var(--amber-deep)) !important;
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.45);
}
.lead-row.hot .scr {
  color: var(--amber-deep);
}

/* ----------------------------------------------------------
   TWEAK 4 — Scenario 02: cream block background (contained)
   ---------------------------------------------------------- */
.lf-scenario.s02 {
  background: var(--cream-bg);
  border-radius: 28px;
  padding: 64px 48px;
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: 80px;
  box-shadow: 0 1px 0 rgba(245, 158, 11, 0.06) inset;
}
.lf-scenario.s02 .lf-radial {
  background: radial-gradient(circle, rgba(254, 243, 199, 0.6) 0%, transparent 60%) !important;
}

/* ----------------------------------------------------------
   TWEAK 5 — Scenario 01: gym-phone bg photo (warm-tone)
   TWEAK 6 — Scenario 03: athlete-shoes bg photo (warm-tone)
   ---------------------------------------------------------- */
.lf-scenario .lf-visual {
  position: relative;
  isolation: isolate;
}
.lf-scene-photo {
  position: absolute;
  inset: -30px -30px -30px -10px;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 24px;
  -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.95) 30%, transparent 75%);
          mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.95) 30%, transparent 75%);
}
.lf-scene-photo img,
.lf-scene-photo .wr-photo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: sepia(0.35) saturate(0.85) contrast(1.05) brightness(1.02);
  mix-blend-mode: multiply;
  opacity: 0.14;
  display: block;
  transition: transform 0.4s cubic-bezier(0.16,1,0.3,1);
  will-change: transform;
}
.lf-scene-photo .wr-photo-svg { display: none; }
.lf-scene-photo.wr-failed img { display: none; }
.lf-scene-photo.wr-failed .wr-photo-svg { display: block; }

/* Make sure the mockup sits above the photo */
.lf-chat-3d, .lf-browser-3d, .lf-reminders-3d,
.lf-scenario .lf-float-tile,
.lf-scenario .lf-funnel { position: relative; z-index: 2; }

/* ----------------------------------------------------------
   TWEAK 7 — Disclaimer strip: amber border-left + amber icon
   ---------------------------------------------------------- */
.lf-disclaimer {
  border-left: 3px solid var(--amber) !important;
  background: linear-gradient(90deg, rgba(254, 243, 199, 0.4), rgba(255,255,255,0.7) 30%) !important;
}
.lf-disclaimer-icon {
  background: var(--amber-soft) !important;
  color: var(--amber-deep);
  filter: drop-shadow(0 1px 2px rgba(217,119,6,0.2));
}
/* Plan demo → link stays brand-green; ensured by existing rule */

/* Reduced motion / mobile */
@media (max-width: 768px) {
  .hero-photo { width: 80%; opacity: 0.85; }
  .lf-scene-photo { inset: -10px; }
  .lf-scenario.s02 { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-photo img, .lf-scene-photo img { transition: none !important; }
}