/* stellar-card.css — ported from d:/Fylo/client/src/styles/hub.css
   (Hub.tsx Review Employee card). Selectors stripped of the .hub-root
   ancestor so the card drops into the marketing site without a wrapper.
*/

.stl-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 0.5px solid #ecead3;
  border-color: #ECEAE3;
  border-radius: 28px;
  overflow: hidden;
  cursor: pointer;
  color: #0F1115;
  text-decoration: none;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  transition:
    border-color 350ms cubic-bezier(.2,.7,.2,1),
    transform 350ms cubic-bezier(.2,.7,.2,1),
    box-shadow 350ms cubic-bezier(.2,.7,.2,1);
}
.stl-card:hover {
  border-color: rgba(127, 119, 221, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(38, 33, 92, 0.10);
}
.stl-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #AFA9EC 0%, #7F77DD 50%, #534AB7 100%);
  opacity: 0;
  transition: opacity 400ms ease;
  z-index: 2;
}
.stl-card:hover::before { opacity: 1; }

/* --- star stage --- */
.stl-stage {
  position: relative;
  height: 264px;
  background:
    radial-gradient(80% 100% at 50% 100%, #F1ECFF 0%, transparent 70%),
    #ffffff;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.stl-stars {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stl-star {
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  margin: -22px 0 0 -22px;
  color: #534AB7;
}
.stl-star svg { width: 100%; height: 100%; display: block; }
.stl-star[data-i="2"] { width: 64px; height: 64px; margin: -32px 0 0 -32px; z-index: 3; }

/* Hidden off-canvas until the card scrolls into view */
.stl-star[data-i="0"] { transform: translate(-320px, 0) scale(0.6); opacity: 0; color: #AFA9EC; }
.stl-star[data-i="1"] { transform: translate(-320px, 0) scale(0.75); opacity: 0; color: #7F77DD; }
.stl-star[data-i="2"] { transform: translate(0, 90px) scale(0.6); opacity: 0; color: #534AB7; }
.stl-star[data-i="3"] { transform: translate(320px, 0) scale(0.75); opacity: 0; color: #7F77DD; }
.stl-star[data-i="4"] { transform: translate(320px, 0) scale(0.6); opacity: 0; color: #AFA9EC; }

/* Sequential slide-in: triggered when .reveal.in is added by the page's
   IntersectionObserver — same hook the other cards use. */
.stl-card.reveal.in .stl-star {
  animation-duration: 800ms;
  animation-timing-function: cubic-bezier(.34, 1.56, .64, 1);
  animation-fill-mode: forwards;
}
.stl-card.reveal.in .stl-star[data-i="0"] { animation-name: stlSettle0; animation-delay: 120ms; }
.stl-card.reveal.in .stl-star[data-i="1"] { animation-name: stlSettle1; animation-delay: 380ms; }
.stl-card.reveal.in .stl-star[data-i="2"] { animation-name: stlSettle2; animation-delay: 640ms; }
.stl-card.reveal.in .stl-star[data-i="3"] { animation-name: stlSettle3; animation-delay: 900ms; }
.stl-card.reveal.in .stl-star[data-i="4"] { animation-name: stlSettle4; animation-delay: 1160ms; }

@keyframes stlSettle0 { to { transform: translate(-200px, 0) scale(0.85); opacity: 1; } }
@keyframes stlSettle1 { to { transform: translate(-100px, 0) scale(0.9);  opacity: 1; } }
@keyframes stlSettle2 { to { transform: translate(   0px, 0) scale(1);    opacity: 1; } }
@keyframes stlSettle3 { to { transform: translate( 100px, 0) scale(0.9);  opacity: 1; } }
@keyframes stlSettle4 { to { transform: translate( 200px, 0) scale(0.85); opacity: 1; } }

/* 4-up grid: cards are ~330px wide so the ±200px spread clips. Tighten it. */
@media (min-width: 1201px) {
  .stl-card.reveal.in .stl-star[data-i="0"] { animation-name: stlSettle0Tight; }
  .stl-card.reveal.in .stl-star[data-i="1"] { animation-name: stlSettle1Tight; }
  .stl-card.reveal.in .stl-star[data-i="3"] { animation-name: stlSettle3Tight; }
  .stl-card.reveal.in .stl-star[data-i="4"] { animation-name: stlSettle4Tight; }
  @keyframes stlSettle0Tight { to { transform: translate(-130px, 0) scale(0.85); opacity: 1; } }
  @keyframes stlSettle1Tight { to { transform: translate( -65px, 0) scale(0.9);  opacity: 1; } }
  @keyframes stlSettle3Tight { to { transform: translate(  65px, 0) scale(0.9);  opacity: 1; } }
  @keyframes stlSettle4Tight { to { transform: translate( 130px, 0) scale(0.85); opacity: 1; } }
}

.stl-pulse { display: none; }

.stl-sparkle {
  position: absolute;
  top: 50%; left: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.stl-sparkle:nth-child(6)  { background: #AFA9EC; }
.stl-sparkle:nth-child(7)  { background: #7F77DD; }
.stl-sparkle:nth-child(8)  { background: #534AB7; }
.stl-sparkle:nth-child(9)  { background: #7F77DD; }
.stl-sparkle:nth-child(10) { background: #AFA9EC; }

.stl-card:hover .stl-sparkle:nth-child(6)  { animation: stlSpark1 700ms ease-out 200ms forwards; }
.stl-card:hover .stl-sparkle:nth-child(7)  { animation: stlSpark2 700ms ease-out 260ms forwards; }
.stl-card:hover .stl-sparkle:nth-child(8)  { animation: stlSpark3 700ms ease-out 320ms forwards; }
.stl-card:hover .stl-sparkle:nth-child(9)  { animation: stlSpark4 700ms ease-out 380ms forwards; }
.stl-card:hover .stl-sparkle:nth-child(10) { animation: stlSpark5 700ms ease-out 440ms forwards; }

@keyframes stlSpark1 { 0%{transform:translate(0,0) scale(0);opacity:0} 30%{opacity:1} 100%{transform:translate(-130px,-50px) scale(1.2);opacity:0} }
@keyframes stlSpark2 { 0%{transform:translate(0,0) scale(0);opacity:0} 30%{opacity:1} 100%{transform:translate( -65px,-60px) scale(1.2);opacity:0} }
@keyframes stlSpark3 { 0%{transform:translate(0,0) scale(0);opacity:0} 30%{opacity:1} 100%{transform:translate(   0px,-70px) scale(1.2);opacity:0} }
@keyframes stlSpark4 { 0%{transform:translate(0,0) scale(0);opacity:0} 30%{opacity:1} 100%{transform:translate(  65px,-60px) scale(1.2);opacity:0} }
@keyframes stlSpark5 { 0%{transform:translate(0,0) scale(0);opacity:0} 30%{opacity:1} 100%{transform:translate( 130px,-50px) scale(1.2);opacity:0} }

/* --- body --- */
.stl-body { padding: 24px 24px 22px; flex: 1; display: flex; flex-direction: column; }
.stl-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 16px; gap: 12px;
}
.stl-brand-name {
  font-size: 22px; font-weight: 500; letter-spacing: -0.01em;
  color: #0F1115;
}
.stl-brand-name em {
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-weight: 500;
  color: #534AB7;
  padding: 0 0.04em;
}

.stl-gsubtitle {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: #F5F4EF;
  border: 0.5px solid #ECEAE3;
  font-size: 12px; font-weight: 500;
  color: #4A4F58;
  transition: background 200ms ease, border-color 200ms ease;
}
.stl-card:hover .stl-gsubtitle {
  background: #F1ECFF;
  border-color: rgba(127, 119, 221, 0.35);
}
.stl-glogo { width: 14px; height: 14px; }
.stl-gsubtitle .g-blue   { color: #4285F4; }
.stl-gsubtitle .g-red    { color: #DB4437; }
.stl-gsubtitle .g-yellow { color: #F4B400; }
.stl-gsubtitle .g-green  { color: #0F9D58; }
.stl-gsep {
  display: inline-block;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #D9D6CC;
}
.stl-grole { color: #4A4F58; font-weight: 400; }
.stl-gstars {
  display: inline-flex; align-items: center; gap: 1px;
  color: #F4B400;
  font-size: 10px;
  letter-spacing: -1px;
  margin-left: 2px;
}

.stl-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  background: #E1F5EE; color: #0F6E56;
  flex-shrink: 0;
}
.stl-pill.is-paused { background: #FEF3C7; color: #92400E; }
.stl-pill.is-not-connected { background: rgba(100,116,139,.10); color: #475569; }
.stl-pill-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: stlBlink 1.6s ease-in-out infinite;
}
.stl-pill.is-paused .stl-pill-dot,
.stl-pill.is-not-connected .stl-pill-dot { animation: none; }
@keyframes stlBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

.stl-desc {
  font-size: 14.5px;
  line-height: 1.6;
  color: #4A4F58;
  margin: 0 0 18px;
}

.stl-stats {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
  margin-bottom: 18px;
}
.stl-stat {
  padding: 12px 14px;
  border-radius: 8px;
  background: #F5F2FE;
}
.stl-stat-v {
  font-family: 'Instrument Serif', serif;
  font-style: italic;
  font-size: 24px; font-weight: 500;
  line-height: 1;
  color: #26215C;
}
.stl-stat-mark {
  color: #7F77DD;
  font-style: normal;
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  margin-left: 2px;
}
.stl-stat-k {
  font-size: 10px;
  color: #534AB7;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 6px;
  opacity: 0.75;
}

.stl-powered {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 0 0;
  border-top: 0.5px dashed #ECEAE3;
}
.stl-powered-label {
  font-size: 11px;
  color: #8A8F98;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.stl-powered-logos { display: flex; align-items: center; gap: 14px; }
.stl-powered-logo {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500;
  color: #4A4F58;
  transition: color 200ms ease;
}
.stl-powered-logo:hover { color: #0F1115; }

.stl-cta-row { display: flex; margin-top: auto; padding-top: 18px; }
.stl-btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 48px;
  padding: 0 10px 0 18px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #534AB7, #7F77DD);
  color: #ffffff;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 16px 28px -18px rgba(83, 74, 183, 0.8);
}
.stl-card:hover .stl-btn-dark {
  transform: translateY(-1px);
  box-shadow: 0 20px 34px -18px rgba(83, 74, 183, 0.9);
}
.stl-btn-dark em {
  font-family: 'Instrument Serif', serif;
  font-style: italic; font-weight: 500;
  color: rgba(255, 255, 255, 0.8);
  margin-left: 0;
}
.stl-cta-arrow {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  transition: transform 0.25s cubic-bezier(.2,.7,.2,1);
}
.stl-card:hover .stl-cta-arrow { transform: translateX(2px); }

@media (max-width: 480px) {
  .stl-body { padding: 12px 18px 22px; }
  .stl-stage { height: 170px; }
  .stl-star { width: 32px; height: 32px; margin: -16px 0 0 -16px; }
  .stl-star[data-i="2"] { width: 48px; height: 48px; margin: -24px 0 0 -24px; }
  .stl-card.reveal.in .stl-star[data-i="0"] { animation-name: stlSettle0Mobile; }
  .stl-card.reveal.in .stl-star[data-i="1"] { animation-name: stlSettle1Mobile; }
  .stl-card.reveal.in .stl-star[data-i="3"] { animation-name: stlSettle3Mobile; }
  .stl-card.reveal.in .stl-star[data-i="4"] { animation-name: stlSettle4Mobile; }
  @keyframes stlSettle0Mobile { to { transform: translate(-130px, 0) scale(0.85); opacity: 1; } }
  @keyframes stlSettle1Mobile { to { transform: translate( -65px, 0) scale(0.9);  opacity: 1; } }
  @keyframes stlSettle3Mobile { to { transform: translate(  65px, 0) scale(0.9);  opacity: 1; } }
  @keyframes stlSettle4Mobile { to { transform: translate( 130px, 0) scale(0.85); opacity: 1; } }
  .stl-head { flex-wrap: wrap; gap: 8px; }
  .stl-brand-name { font-size: 18px; }
  .stl-powered { flex-direction: column; align-items: flex-start; gap: 8px; }
  .stl-powered-logos { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
  /* Skip the slide-in. Snap stars to their final settled positions. */
  .stl-star[data-i="0"] { transform: translate(-200px, 0) scale(0.85); opacity: 1; }
  .stl-star[data-i="1"] { transform: translate(-100px, 0) scale(0.9);  opacity: 1; }
  .stl-star[data-i="2"] { transform: translate(   0px, 0) scale(1);    opacity: 1; }
  .stl-star[data-i="3"] { transform: translate( 100px, 0) scale(0.9);  opacity: 1; }
  .stl-star[data-i="4"] { transform: translate( 200px, 0) scale(0.85); opacity: 1; }
  .stl-card.reveal.in .stl-star { animation: none !important; }
  .stl-card,
  .stl-card::before,
  .stl-pill-dot,
  .stl-btn-dark {
    transition-duration: 0.001ms !important;
  }
}