/* Circadian Rhythm Studios — Pro Patterns & Widgets
   Designed to complement CRS Style Engine + Twenty Twenty-Five.
*/

/* ------------ Micro aesthetic helpers ------------ */
.crs-pp-muted{opacity:.82}
.crs-pp-lede{opacity:.92}
.crs-pp-display{letter-spacing:-.02em}

/* Accent underline utility */
.crs-underline-accent{
  display:inline-block;
  padding-bottom:.15em;
  background-image: linear-gradient(to right, rgba(198,161,91,.85), rgba(198,161,91,.12));
  background-repeat:no-repeat;
  background-size: 100% 3px;
  background-position: 0 100%;
}

/* Glass utility */
.crs-glass{
  border:1px solid rgba(245,240,230,.14);
  background: rgba(245,240,230,.05);
  backdrop-filter: blur(10px);
  border-radius: var(--crs-radius, 18px);
}

/* Gradient border utility */
.crs-gradient-border{
  position:relative;
  border-radius: var(--crs-radius, 18px);
}
.crs-gradient-border::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: inherit;
  padding:1px;
  background: linear-gradient(135deg, rgba(198,161,91,.65), rgba(245,240,230,.12), rgba(198,161,91,.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.9;
}

/* ------------ Marquee ------------ */
.crs-pp-marquee{
  overflow:hidden;
  border-radius: 999px;
  border: 1px solid rgba(245,240,230,.12);
  background: rgba(245,240,230,.04);
  padding: 8px 0;
  margin: 14px 0 6px;
}
.crs-pp-marquee__track{
  display:flex;
  gap: 32px;
  width: max-content;
  animation: crsMarquee 22s linear infinite;
}
.crs-pp-marquee__track span{
  white-space: nowrap;
  font-size: .92rem;
  opacity:.9;
  padding: 0 18px;
}
@keyframes crsMarquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (prefers-reduced-motion: reduce){
  .crs-pp-marquee__track{animation:none}
}

/* ------------ Stats ------------ */
.crs-pp-stats{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 12px;
  margin-top: 14px;
}
@media (min-width: 900px){
  .crs-pp-stats{grid-template-columns: repeat(4, minmax(0,1fr))}
}
.crs-pp-stat{
  padding: 12px 12px 10px;
  border-radius: var(--crs-radius, 18px);
  border: 1px solid rgba(245,240,230,.12);
  background: rgba(17,17,17,.28);
}
.crs-pp-stat__value{font-weight: 900; font-size: 1.35rem; line-height: 1.15}
.crs-pp-stat__label{opacity:.9; margin-top:4px; font-weight: 700}
.crs-pp-stat__note{opacity:.78; margin-top:2px; font-size:.92rem}

/* ------------ Testimonials ------------ */
.crs-pp-testimonials{position:relative; margin-top: 10px}
.crs-pp-testimonials__rail{
  display:flex;
  gap: 12px;
  overflow:auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
}
.crs-pp-testimonial{
  min-width: 280px;
  max-width: 520px;
  scroll-snap-align: start;
  padding: 14px 14px 12px;
  border-radius: var(--crs-radius, 18px);
  border: 1px solid rgba(245,240,230,.14);
  background: rgba(245,240,230,.05);
}
.crs-pp-testimonial__quote{font-size: 1rem; opacity:.95}
.crs-pp-testimonial__meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; opacity:.88; font-weight: 700}
.crs-pp-testimonial__role{opacity:.78; font-weight:600}
.crs-pp-testimonials__hint{
  position:absolute;
  right: 0;
  top: -4px;
  font-size: .85rem;
  opacity:.65;
}

/* ------------ Logobar ------------ */
.crs-pp-logobar{
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}
.crs-pp-chip{
  border-radius: 999px;
  border: 1px solid rgba(245,240,230,.12);
  background: rgba(245,240,230,.04);
  padding: 8px 10px;
}
.crs-pp-logo__link{color: inherit; text-decoration:none}
.crs-pp-logo__link:hover{filter:brightness(1.05)}

/* ------------ CTA strip ------------ */
.crs-pp-cta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 14px 12px;
  border: 1px solid rgba(245,240,230,.12);
  background: rgba(17,17,17,.26);
  border-radius: var(--crs-radius, 18px);
}
.crs-pp-cta__title{font-weight: 900; font-size: 1.1rem}
.crs-pp-cta__note{opacity:.86; margin-top:4px}
.crs-pp-cta__deposit{opacity:.78; margin-top:6px; font-size:.92rem}
.crs-pp-cta__actions{display:flex; flex-wrap:wrap; gap:10px}

.crs-pp-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 10px 14px;
  border-radius: calc(var(--crs-radius, 18px) - 4px);
  text-decoration:none;
  font-weight: 900;
  border: 1px solid rgba(245,240,230,.16);
  background: rgba(245,240,230,.06);
  color: rgba(245,240,230,.95);
}
.crs-pp-btn--primary{
  background: rgba(198,161,91,.92);
  color: #111;
  border-color: rgba(198,161,91,.55);
}
.crs-pp-btn:hover{filter:brightness(1.05); transform: translateY(-1px)}

/* ------------ Hero media cards ------------ */
.crs-pp-hero__media{
  padding: 16px;
  min-height: 320px;
}
.crs-pp-media__hint{opacity:.78; margin-bottom:12px}
.crs-pp-media__img img{border-radius: calc(var(--crs-radius, 18px) - 4px)}

/* ------------ Motion utilities (works with JS) ------------ */
.crs-reveal-up, .crs-reveal-left{opacity:0; transform: translateY(10px)}
.crs-reveal-left{transform: translateX(-10px)}
.crs-inview{opacity:1; transform: none; transition: opacity .6s ease, transform .6s ease}
.crs-stagger > *{transition-delay: calc(var(--crs-stagger, 0) * 70ms)}
@media (prefers-reduced-motion: reduce){
  .crs-reveal-up, .crs-reveal-left{opacity:1; transform:none}
  .crs-inview{transition:none}
}

/* Tilt micro interaction */
@media (prefers-reduced-motion: no-preference){
  .crs-tilt{transition: transform .25s ease, filter .25s ease}
  .crs-tilt:hover{transform: translateY(-2px)}
}

/* Lightbox overlay */
.crs-pp-lightbox{
  position: fixed; inset: 0;
  display:none;
  align-items:center;
  justify-content:center;
  background: rgba(0,0,0,.78);
  z-index: 99999;
  padding: 18px;
}
.crs-pp-lightbox.is-open{display:flex}
.crs-pp-lightbox__img{
  max-width: min(1100px, 96vw);
  max-height: 86vh;
  border-radius: var(--crs-radius, 18px);
  border: 1px solid rgba(245,240,230,.16);
  box-shadow: 0 10px 60px rgba(0,0,0,.35);
}
.crs-pp-lightbox__close{
  position:absolute;
  top: 16px; right: 16px;
  width: 44px; height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(245,240,230,.18);
  background: rgba(245,240,230,.06);
  color: rgba(245,240,230,.92);
  font-weight: 900;
  cursor:pointer;
}