/* ============================================================================
   /brain landing page, self-contained styles
   Faithful reproduction of the BrightBean "Organizational Brain" design.
   Everything is scoped under .brain so it never leaks into the rest of the site.
   The page markup keeps the design's original inline styles; this file adds the
   pieces inline styles can't express: web fonts, keyframes referenced inline,
   hover states, and responsive breakpoints.
   ============================================================================ */

/* ---- Fonts ---------------------------------------------------------------
   Declared globally in tailwind.css -> assets/css/site.css, which every page
   loads before this file. Nothing to repeat here.
   -------------------------------------------------------------------------- */

/* ---- Base ---------------------------------------------------------------- */
.brain {
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, sans-serif;
  color: #1A1A1A;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip; /* belt-and-suspenders against fixed-width mockups on small screens */
}
.brain img { display: block; }

/* ---- Interactive lift (the export encoded hover as non-standard attrs) ---- */
.brain [style*="cursor:pointer"] {
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.brain [style*="cursor:pointer"]:hover {
  transform: translateY(-1px);
}

/* ---- Keyframes (referenced by inline `animation:` in the markup) --------- */
@keyframes dl_rise   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dl_pop    { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
@keyframes dl_pulse  { 0%,100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.12); opacity: .9; } }
@keyframes dl_vscroll{ from { transform: translateY(0); } to { transform: translateY(-50%); } }
@keyframes dl_bar    { from { height: 8%; } }
@keyframes dl_float  { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes dl_flow   { to { stroke-dashoffset: -160; } }
@keyframes dl_marqR  { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes bb_syn    { 0%,100% { opacity: .12; } 45% { opacity: .85; } }
@keyframes bb_dash   { to { stroke-dashoffset: -300; } }
@keyframes bb_halo   { 0%,100% { opacity: .4; transform: scale(1); } 50% { opacity: .85; transform: scale(1.14); } }
@keyframes bb_core   { 0%,100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes bb_node   { 0%,100% { transform: scale(.82); opacity: .7; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes bb_insight{ 0% { opacity: 0; transform: translate(-50%,12px) scale(.95); } 4% { opacity: 1; transform: translate(-50%,0) scale(1); } 21% { opacity: 1; transform: translate(-50%,0) scale(1); } 26% { opacity: 0; transform: translate(-50%,-12px) scale(.95); } 100% { opacity: 0; transform: translate(-50%,-12px) scale(.95); } }
@keyframes vs_caret  { 0%,100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes vs_eq     { 0%,100% { transform: scaleY(.72); } 50% { transform: scaleY(1); } }
@keyframes vs_play   { 0%,100% { left: 38%; } 50% { left: 58%; } }

@media (prefers-reduced-motion: reduce) {
  .brain *.brain *::before.brain *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ---- Responsive ---------------------------------------------------------- */
/* Tablet & below: collapse the two-column hero + product rows to a single column.
   Overrides inline `grid-template-columns`, so !important is required. */
@media (max-width: 1024px) {
  .brain [style*="grid-template-columns:1.05fr"],
  .brain [style*="grid-template-columns:1.08fr 1fr"],
  .brain [style*="grid-template-columns:1fr 1.08fr"] {
    grid-template-columns: 1fr !important;
  }
  .brain [style*="font-size:64px"] { font-size: 44px !important; }
  .brain [style*="font-size:48px"] { font-size: 36px !important; }
  .brain [style*="font-size:46px"] { font-size: 34px !important; }
  .brain [style*="font-size:42px"] { font-size: 32px !important; }
}

/* Phone: stack remaining grids, tighten section padding, shrink display type. */
@media (max-width: 640px) {
  .brain [style*="grid-template-columns:1fr 1fr"].brain [style*="grid-template-columns:repeat(2,1fr)"].brain [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* horizontal section padding 40px -> 18px (keeps each rule's vertical values) */
  .brain [style*="padding:0 40px"],
  .brain [style*="padding:100px 40px 0"],
  .brain [style*="padding:120px 40px 10px"],
  .brain [style*="padding:42px 40px 36px"],
  .brain [style*="padding:54px 40px 40px"],
  .brain [style*="padding:96px 40px 20px"] {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .brain [style*="font-size:64px"] { font-size: 34px !important; }
  .brain [style*="font-size:48px"] { font-size: 30px !important; }
  .brain [style*="font-size:46px"] { font-size: 28px !important; }
  .brain [style*="font-size:42px"] { font-size: 28px !important; }
  .brain [style*="font-size:34px"] { font-size: 25px !important; }

  /* "The system" flow card: the 4 nodes are a no-wrap horizontal row with fixed
     64px arrows + a horizontal return-loop SVG, all of which break at phone width.
     Stack the nodes vertically, drop the inline arrows, and turn the loop area into
     a normal centered (wrapping) label. */
  .brain [style*="align-items:stretch;justify-content:center;gap:0;flex-wrap:nowrap"] {
    flex-direction: column !important;
    gap: 14px !important;
  }
  /* horizontal flow arrows -> rotate to point downward between the stacked nodes,
     keeping the animated dashes (dl_flow) running */
  .brain [style*="flex:0 0 64px"] {
    flex: 0 0 40px !important;
    width: 100% !important;
  }
  .brain [style*="flex:0 0 64px"] svg { transform: rotate(90deg) scale(0.62); }
  .brain [style*="height:118px;margin-top:8px"] {                    /* return-loop wrapper */
    height: auto !important;
    margin-top: 14px !important;
  }
  .brain [style*="height:118px;margin-top:8px"] > svg { display: none !important; } /* loop path */
  .brain [style*="border-bottom:11px solid #2EAE6E"] { display: none !important; }  /* arrowhead */
  .brain [style*="bottom:6px"][style*="white-space:nowrap"] {        /* "...sharper for the next round" label */
    position: static !important;
    transform: none !important;
    white-space: normal !important;
    width: fit-content !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }
}