/* ------------------------------------------------------------------------
   site.css — the small layer added on top of the compiled Tailwind bundle
   (css/index.css). Everything visual still comes from index.css; this file
   only covers behaviour the React app used to drive with JavaScript.
   ------------------------------------------------------------------------ */

/* Tailwind's `.flex` etc. would out-specify the [hidden] attribute, so hidden
   state for flex containers is a class. */
.is-hidden { display: none !important; }

/* --- Header entry (framer: y -100 -> 0, .8s, cubic-bezier(.16,1,.3,1)) ---- */
html.js .site-header { animation: site-header-in .8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes site-header-in {
  from { transform: translateY(-100px); }
  to   { transform: none; }
}

/* --- Mobile menu (framer: opacity 0 / height 0 / y -20 -> visible, .4s) --- */
#mobile-menu { animation: mobile-menu-in .4s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes mobile-menu-in {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: none; }
}

/* --- Reveal on scroll (framer whileInView: opacity 0, y 20 -> visible) ----
   Gated on html.js so content is fully visible without JavaScript. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1);
  transition-delay: var(--reveal-delay, 0s);
}
html.js [data-reveal].is-visible { opacity: 1; transform: none; }
html.no-io [data-reveal] { opacity: 1; transform: none; }

/* --- Gold glow on the word LIGHT (framer text-shadow loop) ---------------- */
.light-glow { animation: light-glow 3s ease-in-out infinite; }
@keyframes light-glow {
  0%, 100% { text-shadow: 0 0 20px rgba(200, 169, 110, 0); }
  50%      { text-shadow: 0 0 40px rgba(200, 169, 110, .25); }
}

/* --- Finance calculator sliders -----------------------------------------
   The Radix track / range / thumb spans are kept for pixel parity; a
   transparent native range input on top provides the interaction and the
   accessible name. */
.fin-slider { position: relative; }
.fin-slider input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.fin-slider input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; }
.fin-slider input[type="range"]::-moz-range-thumb { width: 20px; height: 20px; border: 0; }
.fin-slider input[type="range"]:focus-visible ~ .fin-thumb-wrap .fin-thumb {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* --- FAQ accordion: Radix keyframes drive open/close via a CSS var -------- */
[data-faq] [role="region"][data-state="open"]   { animation: accordion-down .2s ease-out; }
[data-faq] [role="region"][data-state="closed"] { animation: accordion-up .2s ease-out; }

/* --- Quiz / chat launcher: keep the launcher row clickable above panels --- */
#fab > .flex { position: relative; z-index: 1; }

/* =========================================================================
   UX pass (3 Sep 2026)
   ========================================================================= */

/* --- Sticky mobile action bar: appears once the hero has scrolled past ------ */
#mobile-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  transform: translateY(100%);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  padding-bottom: max(.75rem, env(safe-area-inset-bottom));
}
#mobile-cta.is-visible { transform: none; }
@media (min-width: 768px) { #mobile-cta { display: none !important; } }
@media (max-width: 767px) {
  body.has-mobile-cta #fab { bottom: 5.5rem; }
  body.has-mobile-cta #fab [data-call] { display: none; } /* the bar already has Call */
}

/* --- Denser long sections on phones (same content, half the scroll) -------- */
@media (max-width: 767px) {
  section[data-dense] { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  section[data-dense] .mb-16 { margin-bottom: 2rem !important; }
  section[data-dense] .mb-24 { margin-bottom: 2.5rem !important; }
  section[data-dense] .gap-16 { gap: 2rem !important; }
  section[data-dense] .gap-y-12 { row-gap: 1.75rem !important; }
  section[data-dense] .p-8 { padding: 1.25rem !important; }
  section[data-dense] .mb-6 { margin-bottom: .75rem !important; }
  section[data-dense] .mb-8 { margin-bottom: 1rem !important; }
  section[data-dense] .mb-12 { margin-bottom: 1.5rem !important; }
  section[data-dense] .mb-4 { margin-bottom: .5rem !important; }
  section[data-dense] .mt-16 { margin-top: 2rem !important; }
  section[data-dense] .pb-6 { padding-bottom: 1rem !important; }
  section[data-dense] .gap-8 { gap: 1rem !important; }
  section[data-dense] .gap-12 { gap: 1.5rem !important; }
  section[data-dense] .gap-x-8 { column-gap: 1rem !important; }
  section[data-dense] .space-y-4 > :not([hidden]) ~ :not([hidden]) { margin-top: .5rem !important; }
  section[data-dense] .leading-relaxed { line-height: 1.5 !important; }
}

/* --- Readability: body weight 400, low-opacity labels lifted --------------- */
p.font-light, li.font-light { font-weight: 400; }
.text-\[\#F5F0E8\]\/60 { color: rgba(245, 240, 232, .78) !important; }
.text-\[\#EDE7DA\]\/60 { color: rgba(237, 231, 218, .78) !important; }
.text-\[\#F5F0E8\]\/70, .text-\[\#EDE7DA\]\/70 { color: rgba(240, 235, 224, .86) !important; }

/* --- Assistant chat ------------------------------------------------------- */
.chat-typing { display: inline-flex; gap: 4px; align-items: center; min-height: 2.5rem; }
.chat-typing span { width: 6px; height: 6px; border-radius: 50%; background: hsl(var(--muted-foreground)); opacity: .5; animation: chat-dot 1.2s infinite ease-in-out; }
.chat-typing span:nth-child(2) { animation-delay: .2s; }
.chat-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes chat-dot { 0%, 80%, 100% { transform: translateY(0); opacity: .4; } 40% { transform: translateY(-4px); opacity: 1; } }
#chat-panel [data-chat-log] a { color: hsl(var(--primary)); word-break: break-all; }
#chat-panel [data-chat-send]:disabled { opacity: .5; }
@media (max-width: 640px) { #chat-panel { height: min(520px, calc(100vh - 9rem)) !important; } }

/* --- Liftable summary under treatment H1s ---------------------------------- */
[data-summary] { border-left: 2px solid hsl(var(--secondary)); padding-left: 1rem; }

@media (prefers-reduced-motion: reduce) {
  #mobile-cta { transition: none; }
  html.js [data-reveal] { opacity: 1; transform: none; transition: none; }
  html.js .site-header, #mobile-menu, .light-glow { animation: none; }
}