/* ==========================================================================
   Trellus — Tailwind conversion companion stylesheet
   Only contains what Tailwind utility classes cannot express:
   - state-dependent combinators driven by script.js (.is-scrolled, .is-open)
   - keyframe animations & nth-child transition delays
   - background-image textures (hatch/gradient) reused across pages
   - CSS counters
   Everything else lives as Tailwind utility classes directly in the HTML.
   ========================================================================== */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

/* ---- Nav: scroll state (toggled by script.js on window scroll) ---- */
.nav {
  transition: padding-top 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}
.nav.is-scrolled { background: transparent; border-bottom-color: transparent; padding-top: 12px; }
.nav__inner { transition: border-radius 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease; }
.nav.is-scrolled .nav__inner {
  background: #FBF8F2;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(44, 44, 39, 0.05), 0 14px 30px rgba(44, 44, 39, 0.10);
}

/* ---- Nav: services dropdown (hover + .is-open toggled by script.js) ---- */
.nav__item--dropdown { padding-bottom: 34px; margin-bottom: -34px; }
.nav__dropdown-panel {
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translate(-50%, 4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
}
.nav__item--dropdown:hover .nav__dropdown-panel,
.nav__item--dropdown.is-open .nav__dropdown-panel {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0);
}
.nav__item--dropdown:hover .nav__dropdown-toggle,
.nav__dropdown-toggle:focus-visible { color: #2E4A35; }

/* ---- Mobile nav (hamburger controlled by script.js) ---- */
@media (max-width: 860px) {
  /* Nav bar always floats like the desktop "scrolled" state: gap from the
     top of the viewport, gap from the sides, rounded card, no flush border. */
  .nav { padding-top: 12px; border-bottom-color: transparent; }
  .nav__inner {
    margin-left: 10px; margin-right: 10px; padding-left: 10px; padding-right: 10px;
    background: #FBF8F2; border-radius: 8px;
    box-shadow: 0 1px 2px rgba(44, 44, 39, 0.05), 0 14px 30px rgba(44, 44, 39, 0.10);
  }
  .nav__hamburger { display: block; }
  .nav__btn--mobile-hide { display: none; }
  .nav__links {
    display: none; position: absolute; top: 76px; left: 10px; right: 10px;
    transform: none; background: #2C2C27; flex-direction: column; gap: 0; padding: 8px 0;
    z-index: 200; transition: top 0.3s ease;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(44, 44, 39, 0.05), 0 14px 30px rgba(44, 44, 39, 0.10);
  }
  .nav__links.is-open { display: flex; }
  .nav__links a { color: #F5F0E8; padding: 14px 24px; border-bottom: 1px solid rgba(245, 240, 232, 0.07); font-size: 16px; }
  .nav__links a:hover { color: #D4A843; }
  .nav__links .nav__links-cta {
    display: flex; justify-content: center; margin: 12px 24px 8px; border-bottom: none; color: #2C2C27;
  }
  .nav__links .nav__links-cta:hover { color: #2C2C27; opacity: 0.85; }
  .nav__item--dropdown { width: 100%; flex-direction: column; align-items: stretch; padding-bottom: 0; margin-bottom: 0; }
  .nav__dropdown-toggle {
    width: 100%; justify-content: space-between; color: #F5F0E8;
    padding: 14px 24px; border-bottom: 1px solid rgba(245, 240, 232, 0.07); font-size: 16px;
  }
  .nav__item--dropdown:hover .nav__dropdown-toggle { color: #F5F0E8; }
  .nav__dropdown-panel {
    position: static; transform: none; background: rgba(245, 240, 232, 0.03);
    border: none; box-shadow: none; padding: 0; max-height: 0; overflow: hidden;
    visibility: visible; opacity: 1; pointer-events: auto;
    transition: max-height 0.3s ease;
  }
  .nav__item--dropdown:hover .nav__dropdown-panel { max-height: 0; }
  .nav__item--dropdown.is-open .nav__dropdown-panel { max-height: 600px; padding: 6px 0 10px; transform: none; }
  .nav__dropdown-link { padding: 10px 24px 10px 48px; border-radius: 0; }
  .nav__dropdown-link:hover { background: rgba(245, 240, 232, 0.05); }
  .nav__dropdown-link-icon { background: #F5F0E8; color: #2C2C27; }
  .nav__dropdown-link-title { color: #F5F0E8; font-weight: 500; }
}

/* ---- Accordion (max-height animated via inline style in script.js) ---- */
.accordion-item__panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.accordion-item__icon { transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease; }
.accordion-item.is-open .accordion-item__icon { background: #979086; color: #F5F0E8; transform: rotate(180deg); }

/* ---- Scroll-reveal cards (IntersectionObserver adds .is-visible) ---- */
.time-audit-card.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.time-audit-card.reveal.is-visible { opacity: 1; transform: translateY(0); }
.time-audit__grid .time-audit-card:nth-child(1) { transition-delay: 0s; }
.time-audit__grid .time-audit-card:nth-child(2) { transition-delay: 0.08s; }
.time-audit__grid .time-audit-card:nth-child(3) { transition-delay: 0.16s; }
.time-audit__grid .time-audit-card:nth-child(4) { transition-delay: 0.24s; }
.time-audit__grid .time-audit-card:nth-child(5) { transition-delay: 0.32s; }
.time-audit__grid .time-audit-card:nth-child(6) { transition-delay: 0.4s; }
@media (prefers-reduced-motion: reduce) {
  .time-audit-card.reveal { opacity: 1; transform: none; transition: none; }
}

/* ---- "How We Help" cards: fade in left to right ---- */
.card--fade-left.reveal { transform: translateX(-24px); }
.card--fade-left.reveal.is-visible { transform: translateX(0); }
.how-we-help .card--fade-left:nth-child(1) { transition-delay: 0s; }
.how-we-help .card--fade-left:nth-child(2) { transition-delay: 0.15s; }
.how-we-help .card--fade-left:nth-child(3) { transition-delay: 0.3s; }
@media (prefers-reduced-motion: reduce) {
  .card--fade-left.reveal { transform: none; }
}

/* ---- Hero background layers ---- */
.hero__hatch {
  background-image: url('../img/hatch.png');
  background-repeat: repeat;
  background-size: 400px 400px;
}
.page-hero, .get-started-hero {
  background-image: url('../img/hatch-light.png');
  background-repeat: repeat;
  background-size: 400px 400px;
}

/* ---- Prose bullet marker (custom dot, not a native list-style) ---- */
.prose ul li { position: relative; }
.prose ul li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 4px; height: 4px; background: #D4A843; border-radius: 50%;
}
body.page-ai-disclosure .prose ul { list-style: none; padding: 0; margin: 0 0 16px 0; }
body.page-privacy .prose ul { margin: 0 0 16px 20px; list-style: none; padding: 0; }

/* ---- Session steps counter (get-started drawer) ---- */
.session-steps { list-style: none; counter-reset: session-step; }
.session-steps li { counter-increment: session-step; }
.session-steps li::before {
  content: counter(session-step);
  flex-shrink: 0; width: 28px; height: 28px; display: inline-flex;
  align-items: center; justify-content: center;
  background: #2C2C27; color: #F5F0E8; border-radius: 50%;
  font-size: 12px; font-weight: 500;
}

/* ---- Drawer panel slide (get-started) ---- */
.drawer { pointer-events: none; visibility: hidden; }
.drawer.is-open { visibility: visible; pointer-events: auto; }
.drawer__overlay { opacity: 0; transition: opacity 0.3s ease; }
.drawer.is-open .drawer__overlay { opacity: 1; }
.drawer__panel { transform: translateX(100%); transition: transform 0.35s ease; }
.drawer.is-open .drawer__panel { transform: translateX(0); }

/* ---- AI Architecture: agent demo animation ---- */
@keyframes aw-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@keyframes aw-dots { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.agent-window__status-dot { animation: aw-pulse 2s ease-in-out infinite; }
.agent-dots { animation: aw-dots 1.1s ease-in-out infinite; }
.agent-window.is-paused .agent-window__status-dot,
.agent-window.is-paused .agent-dots { animation-play-state: paused; }
.agent-panel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; transition: opacity 0.3s ease; }
.agent-panel.is-active { opacity: 1; visibility: visible; }
.agent-doc__lines span { opacity: 0; transform: translateX(-6px); transition: opacity 0.35s ease, transform 0.35s ease; }
.agent-panel[data-panel="reading"].is-run .agent-doc__lines span { opacity: 1; transform: translateX(0); }
.agent-doc__lines span:nth-child(1) { transition-delay: 0.1s; }
.agent-doc__lines span:nth-child(2) { transition-delay: 0.2s; }
.agent-doc__lines span:nth-child(3) { transition-delay: 0.35s; }
.agent-doc__lines span:nth-child(4) { transition-delay: 0.5s; }
.agent-doc__lines span:nth-child(5) { transition-delay: 0.65s; }
.agent-doc__lines span:nth-child(6) { transition-delay: 0.8s; }
.agent-log p { opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; }
.agent-panel[data-panel="running"].is-run .agent-log p { opacity: 1; transform: translateY(0); }
.agent-log p:nth-child(1) { transition-delay: 0.15s; }
.agent-log p:nth-child(2) { transition-delay: 0.75s; }
.agent-log p:nth-child(3) { transition-delay: 1.35s; }
.agent-log p:nth-child(4) { transition-delay: 1.95s; }
.agent-checklist__box { transition: background 0.2s ease, border-color 0.2s ease; }
.agent-checklist__box.is-checked { background: #D4A843; border-color: #D4A843; }
.agent-deliver { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; }
.agent-panel[data-panel="delivering"].is-run .agent-deliver { opacity: 1; transform: translateY(0); }
.agent-window__steps span { transition: background 0.3s ease; }
.agent-window__steps span.is-active { background: #D4A843; }
@media (prefers-reduced-motion: reduce) {
  .agent-window__status-dot, .agent-dots { animation: none; }
  .agent-doc__lines span, .agent-log p, .agent-deliver { transition: none; }
}

/* ---- AI Architecture: fixed-width demo lines (content-driven, not spacing) ---- */
.agent-doc__lines span:nth-child(1) { width: 92%; }
.agent-doc__lines span:nth-child(2) { width: 78%; }
.agent-doc__lines span:nth-child(3) { width: 85%; }
.agent-doc__lines span:nth-child(4) { width: 60%; }
.agent-doc__lines span:nth-child(5) { width: 88%; }
.agent-doc__lines span:nth-child(6) { width: 70%; }