/* =========================================================
   ForGrowth Academy — tools.css
   ISOLATED COMPONENT STYLES. Loaded after styles.css.

   Scope is limited to two roots and nothing else:
     .floating-tools-transition   the band between the hero and the sections below
     .module-tool                 the tool badges inside the 8 modules

   No existing selector is redefined. No global element, typography or colour
   rule is declared here. Design tokens are read from the variables already
   defined in styles.css so this stays on-brand without changing anything.
   ========================================================= */


/* =========================================================
   AREA 1 — .floating-tools-transition
   Gentle float, staggered per card via the --i custom property.
   ========================================================= */

.floating-tools-transition {
  position: relative;
  padding: 78px 0 86px;
  overflow: hidden;                 /* guarantees no horizontal overflow */
  background: var(--off-white, #F8F6F1);
}

.floating-tools-transition .ft-inner {
  max-width: var(--container, 1280px);
  margin: 0 auto;
  padding: 0 40px;
}

/* Hairline rules top and bottom, so the band reads as a deliberate transition
   rather than a gap that happens to have content in it. */
.floating-tools-transition::before,
.floating-tools-transition::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(217, 64, 11, 0.22) 20%,
    rgba(217, 64, 11, 0.22) 80%,
    transparent
  );
}
.floating-tools-transition::before { top: 0; }
.floating-tools-transition::after  { bottom: 0; }

.floating-tools-transition .ft-kicker {
  margin: 0 0 30px;
  text-align: center;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey, #6B6B6E);
}

.floating-tools-transition .ft-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* --- the premium card --- */
.floating-tools-transition .ft-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px 10px 11px;
  background: #fff;
  border: 1px solid var(--line, #E2DED3);
  border-radius: 999px;
  box-shadow: 0 1px 2px rgba(28, 28, 30, 0.04),
              0 10px 24px -16px rgba(28, 28, 30, 0.30);

  /* entrance */
  opacity: 0;
  transform: translateY(16px);
  animation: ftEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  animation-delay: calc(var(--i, 0) * 90ms);

  transition: border-color 0.35s ease,
              box-shadow 0.35s ease,
              transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

@keyframes ftEnter {
  to { opacity: 1; transform: translateY(0); }
}

.floating-tools-transition .ft-mark {
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 6px;
  display: block;
}

.floating-tools-transition .ft-name {
  font-family: var(--font-body, sans-serif);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink, #1C1C1E);
  white-space: nowrap;
}

/* --- gentle continuous float, staggered ---
   Applied only once the entrance animation has had time to finish, and only
   when the visitor has not asked for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .floating-tools-transition .ft-card {
    animation: ftEnter 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards,
               ftFloat 6s ease-in-out infinite;
    animation-delay: calc(var(--i, 0) * 90ms),
                     calc(900ms + var(--i, 0) * 220ms);
  }
  /* Varied periods stop the row moving as one block. */
  .floating-tools-transition .ft-card:nth-child(3n)   { animation-duration: 0.7s, 7.4s; }
  .floating-tools-transition .ft-card:nth-child(4n+1) { animation-duration: 0.7s, 5.2s; }

  .floating-tools-transition .ft-card:hover { animation-play-state: running, paused; }
}

@keyframes ftFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

.floating-tools-transition .ft-card:hover {
  border-color: var(--accent, #D9400B);
  box-shadow: 0 1px 2px rgba(28, 28, 30, 0.04),
              0 16px 30px -16px rgba(217, 64, 11, 0.45);
}

@media (max-width: 900px) {
  .floating-tools-transition { padding: 58px 0 62px; }
  .floating-tools-transition .ft-inner { padding: 0 24px; }
  .floating-tools-transition .ft-grid { gap: 10px; }
  .floating-tools-transition .ft-card { padding: 8px 13px 8px 9px; gap: 8px; }
  .floating-tools-transition .ft-name { font-size: 12.5px; }
  .floating-tools-transition .ft-mark { width: 19px; height: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .floating-tools-transition .ft-card {
    opacity: 1;
    transform: none;
    animation: none;
  }
}


/* =========================================================
   AREA 2 — .module-tool
   Static badges inside the 8 modules. Explicitly NO float animation:
   a moving list inside an expanded module fights the text next to it.
   ========================================================= */

.tl-tools .module-tool {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 7px;
  border-radius: 8px;

  /* Sits on a dark section, so the badge surface is a light-on-dark plate. */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.13);

  transition: background-color 0.3s ease,
              border-color 0.3s ease,
              transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tl-tools .module-tool .module-tool-mark {
  width: 19px;
  height: 19px;
  flex: none;
  border-radius: 5px;
  display: block;
}

.tl-tools .module-tool .module-tool-name {
  font-family: var(--font-body, sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  line-height: 1;
  color: rgba(248, 246, 241, 0.88);
  white-space: nowrap;
}

/* Very subtle hover — a lift of 1px and a slightly brighter plate. Nothing
   continuous, nothing that moves on its own. */
.tl-tools .module-tool:hover {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(217, 64, 11, 0.55);
  transform: translateY(-1px);
}

.tl-tools .module-tool:hover .module-tool-name {
  color: #fff;
}

@media (max-width: 640px) {
  .tl-tools .module-tool { padding: 5px 10px 5px 6px; gap: 7px; }
  .tl-tools .module-tool .module-tool-mark { width: 17px; height: 17px; }
  .tl-tools .module-tool .module-tool-name { font-size: 11.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .tl-tools .module-tool { transition: none; }
  .tl-tools .module-tool:hover { transform: none; }
}

/* =========================================================
   LOGO ASSET SLOT
   Each slot holds the official logo file if it exists in assets/logos/,
   with the placeholder mark underneath. The <img> carries onerror="this.remove()",
   so a missing file simply reveals the placeholder — nothing breaks.
   Drop the official SVG in and it appears here automatically.
   ========================================================= */
.tool-logo {
  position: relative;
  display: inline-block;
  flex: none;
  line-height: 0;
}

/* The official file sits on top of the placeholder and covers it. */
.tool-logo .tool-logo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  background: transparent;
}

/* Slot sizing follows whichever context it is in. */
.floating-tools-transition .tool-logo { width: 22px; height: 22px; }

/* Module badges sit on a dark section, where dark marks (ChatGPT, Notion,
   CapCut) would vanish. A small light plate keeps every logo legible without
   altering the artwork itself. */
.tl-tools .tool-logo {
  width: 22px;
  height: 22px;
  background: #fff;
  border-radius: 5px;
  padding: 3px;
  box-sizing: border-box;
}
.tl-tools .tool-logo .tool-logo-img { inset: 0; width: 100%; height: 100%; }

@media (max-width: 900px) {
  .floating-tools-transition .tool-logo { width: 19px; height: 19px; }
}
@media (max-width: 640px) {
  .tl-tools .tool-logo { width: 20px; height: 20px; padding: 2.5px; }
  .tl-tools .tool-logo .tool-logo-img { inset: 0; }
}

/* =========================================================
   PRIYA — assistant avatar and greeting nudge
   ========================================================= */
.bot-avatar {
  width: 34px; height: 34px; flex: none; display: block; line-height: 0;
}
.bot-avatar svg, .bot-avatar img { width: 100%; height: 100%; border-radius: 50%; display: block; object-fit: cover; }


/* =========================================================
   FLOATING BAND — full 34-tool set
   The band originally carried 12 cards. With the complete module toolset the
   stagger and sizing need tightening, or the last card would not appear for
   three seconds and the band would dominate the page.
   ========================================================= */

.floating-tools-transition .ft-grid { gap: 10px; max-width: 1080px; margin-inline: auto; }

.floating-tools-transition .ft-card {
  padding: 8px 14px 8px 9px;
  gap: 8px;
  /* Cap the entrance stagger so the whole set is in within ~1.2s. */
  animation-delay: calc(min(var(--i, 0), 14) * 60ms);
}
.floating-tools-transition .ft-name { font-size: 12.5px; }

@media (prefers-reduced-motion: no-preference) {
  .floating-tools-transition .ft-card {
    animation-delay: calc(min(var(--i, 0), 14) * 60ms),
                     calc(900ms + min(var(--i, 0), 12) * 180ms);
  }
}

@media (max-width: 900px) {
  .floating-tools-transition .ft-grid { gap: 8px; }
  .floating-tools-transition .ft-card { padding: 7px 11px 7px 8px; gap: 7px; }
  .floating-tools-transition .ft-name { font-size: 11.5px; }
}

@media (max-width: 560px) {
  /* On a phone 34 pills stack very tall. Keep the full set but make it a
     single horizontal strip the visitor can swipe, matching the blog's
     category bar behaviour. */
  .floating-tools-transition .ft-grid {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .floating-tools-transition .ft-grid::-webkit-scrollbar { display: none; }
  .floating-tools-transition .ft-card { flex: none; scroll-snap-align: start; }
  /* Drifting cards inside a scroll strip fight the swipe. */
  .floating-tools-transition .ft-card { animation-name: ftEnter; }
}

/* =========================================================
   PRIYA LAUNCHER
   Sits at the very bottom right, beneath the Enquire Now button.
   Bubble on the left, avatar on the right — the pattern from the reference.
   Replaces the old dark circular chat button entirely.
   ========================================================= */

.bot-launcher {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 82;

  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 9px 9px 9px 18px;
  border: 1px solid var(--line, #E2DED3);
  border-radius: 999px;
  background: #fff;
  cursor: pointer;
  text-align: right;

  box-shadow: 0 2px 4px rgba(28,28,30,.05), 0 18px 38px -18px rgba(28,28,30,.55);
  opacity: 0;
  transform: translateY(14px) scale(.94);
  transform-origin: bottom right;
  transition:
    opacity .5s cubic-bezier(.16,1,.3,1),
    transform .5s cubic-bezier(.16,1,.3,1),
    box-shadow .35s ease,
    border-color .35s ease;
  pointer-events: none;
}

/* Appears with the rest of the floating actions. */
.bot-launcher.show { opacity: 1; transform: none; pointer-events: auto; }

.bot-launcher:hover {
  border-color: rgba(217,64,11,.5);
  box-shadow: 0 2px 4px rgba(28,28,30,.05), 0 22px 44px -18px rgba(217,64,11,.5);
}
.bot-launcher:focus-visible {
  outline: 2px solid var(--accent, #D9400B);
  outline-offset: 3px;
}

.bot-launcher-text { display: flex; flex-direction: column; line-height: 1.25; }
.bot-launcher-name {
  font-family: var(--font-body, sans-serif);
  font-size: 13.5px; font-weight: 700; color: var(--ink, #1C1C1E);
}
.bot-launcher-line {
  font-size: 12.5px; color: var(--grey, #6B6B6E);
}

.bot-launcher-avatar { position: relative; width: 42px; height: 42px; flex: none; line-height: 0; }
.bot-launcher-avatar svg, .bot-launcher-avatar img { width: 100%; height: 100%; display: block; border-radius: 50%; object-fit: cover; }
.bot-launcher-dot {
  position: absolute; right: 1px; bottom: 1px;
  width: 11px; height: 11px; border-radius: 50%;
  background: #2BD46A; border: 2px solid #fff;
}

/* Lift the action stack so it clears the launcher. */
.fab-stack { bottom: 86px; }

@media (max-width: 640px) {
  .bot-launcher { right: 14px; bottom: 14px; padding: 7px 7px 7px 14px; gap: 10px; }
  .bot-launcher-avatar { width: 36px; height: 36px; }
  .bot-launcher-name { font-size: 12.5px; }
  .bot-launcher-line { font-size: 11.5px; }
  .fab-stack { bottom: 72px; }
}

/* Very small screens: the bubble text would crowd the page, so show the
   avatar alone — still clearly a chat launcher. */
@media (max-width: 400px) {
  .bot-launcher { padding: 6px; gap: 0; }
  .bot-launcher-text { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .bot-launcher { transition: none; }
}

/* Contact heading uses the logo instead of set text. The h2 is kept so the
   document outline and screen readers are unaffected — the alt carries the name. */
.contact-logo-h2 { margin: 0; line-height: 0; }
.contact-logo-h2 img {
  height: clamp(42px, 5.4vw, 68px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Section kicker in bold, as requested. */
.floating-tools-transition .ft-kicker {
  font-weight: 700;
  color: var(--ink, #1C1C1E);
}

/* The drift was disabled on phones because the band was a scroll strip there.
   It wraps now, so the float can run on every screen. */
@media (max-width: 560px) {
  .floating-tools-transition .ft-card {
    animation-name: ftEnter, ftFloat;
  }
}