/**
 * Jarayan 8.9 — configurable animated homepage boxes.
 */

body.home .v6-section-heading h2,
body.home .premium-section-heading h2,
body.home .jarayan-section-heading h2 {
  color: var(--jarayan-home-title, var(--ink));
}
body.home .v6-section-heading p,
body.home .premium-section-heading p,
body.home .jarayan-section-heading p {
  color: var(--jarayan-home-text, var(--v6-muted));
}
body.home .v6-section-heading .eyebrow,
body.home .premium-section-heading .eyebrow,
body.home .jarayan-section-heading .eyebrow {
  color: var(--jarayan-home-kicker, var(--accent));
}
body.home .v6-section-heading a,
body.home .premium-section-heading a,
body.home .jarayan-section-heading a {
  color: var(--jarayan-home-link, var(--accent));
}

.jarayan-motion-box {
  --jbox-title: var(--ink);
  --jbox-text: var(--v6-muted);
  --jbox-kicker: var(--accent);
  --jbox-accent: var(--accent);
  --jbox-bg: #fff;
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  color: var(--jbox-text) !important;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
}
.jarayan-motion-box:hover {
  transform: translateY(-3px);
}
.jarayan-motion-box > *:not(.jarayan-box-fx) {
  position: relative;
  z-index: 2;
}
.jarayan-motion-box h1,
.jarayan-motion-box h2,
.jarayan-motion-box h3,
.jarayan-motion-box h4,
.jarayan-motion-box h5,
.jarayan-motion-box .v6-access__intro h2,
.jarayan-motion-box .v6-access__choices strong,
.jarayan-motion-box .v6-pathfinder__panel-content h3,
.jarayan-motion-box .jarayan-home-duo__head strong,
.jarayan-motion-box .jarayan-home-panel__head strong,
.jarayan-motion-box .jarayan-process-mini-step strong,
.jarayan-motion-box .jarayan-media-compact-item__body strong,
.jarayan-motion-box .faq-item button span,
.jarayan-motion-box .jarayan-pause-zone h3,
.jarayan-motion-box .jarayan-pause-tool strong,
.jarayan-motion-box .jarayan-pause-stage h3,
.jarayan-motion-box .breathing-card h3,
.jarayan-motion-box .breathing-card strong {
  color: var(--jbox-title) !important;
}
.jarayan-motion-box p,
.jarayan-motion-box .v6-access__intro p,
.jarayan-motion-box .v6-access__choices small,
.jarayan-motion-box .v6-pathfinder__panel-content p,
.jarayan-motion-box .jarayan-home-panel__lead,
.jarayan-motion-box .jarayan-process-mini-step p,
.jarayan-motion-box .jarayan-media-compact-item__body small,
.jarayan-motion-box .faq-answer p,
.jarayan-motion-box .jarayan-pause-tool small,
.jarayan-motion-box .jarayan-pause-stage p,
.jarayan-motion-box .breathing-card p,
.jarayan-motion-box .jarayan-home-duo__chips span,
.jarayan-motion-box .jarayan-faq-summary,
.jarayan-motion-box .jarayan-home-duo__privacy,
.jarayan-motion-box .jarayan-pause-toolkit__notice {
  color: var(--jbox-text) !important;
}
.jarayan-motion-box .v6-access__intro small,
.jarayan-motion-box .v6-pathfinder__panel-content > small,
.jarayan-motion-box .jarayan-home-duo__head small,
.jarayan-motion-box .jarayan-home-panel__head small,
.jarayan-motion-box .jarayan-pause-toolkit__compact-head small,
.jarayan-motion-box .jarayan-pause-zone header small,
.jarayan-motion-box .jarayan-pause-stage__content > small,
.jarayan-motion-box .breathing-card__content > small {
  color: var(--jbox-kicker) !important;
}
.jarayan-motion-box .jarayan-home-duo__icon,
.jarayan-motion-box .jarayan-home-panel__icon,
.jarayan-motion-box .v6-access__icon,
.jarayan-motion-box .v6-access__choices > a > span,
.jarayan-motion-box .v6-pathfinder__panel-visual > span,
.jarayan-motion-box .jarayan-process-mini-step > span,
.jarayan-motion-box .jarayan-pause-zone header > span {
  color: var(--jbox-accent) !important;
}
.jarayan-motion-box .jarayan-icon {
  color: currentColor;
}
.jarayan-motion-box .button--primary,
.jarayan-motion-box .v6-access__primary,
.jarayan-motion-box .breathing-card__toggle,
.jarayan-motion-box .jarayan-pause-stage__actions button:first-child {
  background: var(--jbox-accent) !important;
  border-color: var(--jbox-accent) !important;
}
.jarayan-motion-box .text-link,
.jarayan-motion-box .jarayan-home-panel__actions .button--outline {
  color: var(--jbox-accent) !important;
}

.jarayan-box-style--soft {
  background: linear-gradient(145deg, color-mix(in srgb, var(--jbox-bg) 96%, #fff), color-mix(in srgb, var(--jbox-bg) 84%, var(--jbox-accent))) !important;
  border-color: color-mix(in srgb, var(--jbox-accent) 14%, transparent) !important;
  box-shadow: 0 28px 70px color-mix(in srgb, var(--jbox-title) 10%, transparent) !important;
}
.jarayan-box-style--gradient {
  background: linear-gradient(135deg, color-mix(in srgb, var(--jbox-bg) 92%, #fff) 0%, color-mix(in srgb, var(--jbox-bg) 72%, var(--jbox-accent)) 100%) !important;
  border-color: color-mix(in srgb, var(--jbox-accent) 22%, transparent) !important;
  box-shadow: 0 32px 78px color-mix(in srgb, var(--jbox-accent) 18%, transparent) !important;
}
.jarayan-box-style--glass {
  background: linear-gradient(135deg, color-mix(in srgb, var(--jbox-bg) 78%, transparent), color-mix(in srgb, #fff 62%, transparent)) !important;
  border-color: color-mix(in srgb, var(--jbox-accent) 20%, #fff) !important;
  box-shadow: 0 28px 76px color-mix(in srgb, var(--jbox-title) 11%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
}
.jarayan-box-style--outline {
  background: var(--jbox-bg) !important;
  border: 2px solid color-mix(in srgb, var(--jbox-accent) 35%, transparent) !important;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--jbox-title) 7%, transparent) !important;
}
.jarayan-box-style--dark {
  background: linear-gradient(145deg, color-mix(in srgb, var(--jbox-bg) 94%, #000), color-mix(in srgb, var(--jbox-bg) 70%, var(--jbox-accent))) !important;
  border-color: color-mix(in srgb, var(--jbox-accent) 28%, transparent) !important;
  box-shadow: 0 34px 88px color-mix(in srgb, #07141c 35%, transparent) !important;
}
.jarayan-box-style--aurora {
  background:
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--jbox-accent) 27%, transparent), transparent 32%),
    radial-gradient(circle at 90% 86%, color-mix(in srgb, var(--jbox-title) 12%, transparent), transparent 35%),
    linear-gradient(145deg, color-mix(in srgb, var(--jbox-bg) 94%, #fff), color-mix(in srgb, var(--jbox-bg) 76%, var(--jbox-accent))) !important;
  border-color: color-mix(in srgb, var(--jbox-accent) 18%, transparent) !important;
  box-shadow: 0 34px 86px color-mix(in srgb, var(--jbox-accent) 16%, transparent) !important;
}

.jarayan-box-fx {
  position: absolute !important;
  inset: 0;
  z-index: 0 !important;
  overflow: hidden;
  pointer-events: none;
  opacity: .68;
}
.jarayan-box-fx i,
.jarayan-box-fx b,
.jarayan-box-fx em {
  position: absolute;
  display: block;
  pointer-events: none;
  background: color-mix(in srgb, var(--jbox-accent) 24%, transparent);
  will-change: transform, opacity;
}
.jarayan-box-intensity--calm .jarayan-box-fx { --jbox-speed: 18s; opacity: .42; }
.jarayan-box-intensity--balanced .jarayan-box-fx { --jbox-speed: 12s; opacity: .62; }
.jarayan-box-intensity--lively .jarayan-box-fx { --jbox-speed: 7s; opacity: .82; }
.jarayan-box-motion--none .jarayan-box-fx { display: none; }

.jarayan-box-motion--float .jarayan-box-fx i {
  width: 150px; height: 150px; border-radius: 50%; filter: blur(2px);
  animation: jarayanBoxFloat var(--jbox-speed, 12s) ease-in-out infinite alternate;
}
.jarayan-box-motion--float .jarayan-box-fx i:nth-child(1) { inset: -52px auto auto 8%; }
.jarayan-box-motion--float .jarayan-box-fx i:nth-child(2) { width: 90px; height: 90px; inset: 28% 7% auto auto; animation-delay: -3s; }
.jarayan-box-motion--float .jarayan-box-fx i:nth-child(3) { width: 118px; height: 118px; inset: auto auto -44px 38%; animation-delay: -6s; }

.jarayan-box-motion--pulse .jarayan-box-fx b,
.jarayan-box-motion--pulse .jarayan-box-fx em {
  width: 250px; height: 250px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--jbox-accent) 34%, transparent); background: transparent;
  inset: 50% auto auto 50%; transform: translate(-50%,-50%);
  animation: jarayanBoxPulse var(--jbox-speed, 12s) ease-out infinite;
}
.jarayan-box-motion--pulse .jarayan-box-fx em { animation-delay: calc(var(--jbox-speed, 12s) / -2); }

.jarayan-box-motion--orbit .jarayan-box-fx b {
  width: 310px; height: 310px; border: 1px dashed color-mix(in srgb, var(--jbox-accent) 38%, transparent); border-radius: 50%;
  inset: -105px -80px auto auto; background: transparent;
  animation: jarayanBoxOrbit var(--jbox-speed, 12s) linear infinite;
}
.jarayan-box-motion--orbit .jarayan-box-fx i {
  width: 13px; height: 13px; border-radius: 50%; box-shadow: 0 0 24px color-mix(in srgb, var(--jbox-accent) 70%, transparent);
  animation: jarayanBoxOrbitDot var(--jbox-speed, 12s) ease-in-out infinite alternate;
}
.jarayan-box-motion--orbit .jarayan-box-fx i:nth-child(1) { top: 12%; right: 24%; }
.jarayan-box-motion--orbit .jarayan-box-fx i:nth-child(2) { top: 28%; right: 5%; animation-delay: -3s; }
.jarayan-box-motion--orbit .jarayan-box-fx i:nth-child(3) { top: 4%; right: 7%; animation-delay: -6s; }

.jarayan-box-motion--shimmer .jarayan-box-fx em {
  width: 34%; height: 160%; top: -30%; right: -50%; transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #fff 72%, transparent), transparent);
  filter: blur(2px);
  animation: jarayanBoxShimmer var(--jbox-speed, 12s) ease-in-out infinite;
}

.jarayan-box-motion--particles .jarayan-box-fx i,
.jarayan-box-motion--particles .jarayan-box-fx b,
.jarayan-box-motion--particles .jarayan-box-fx em {
  width: 8px; height: 8px; border-radius: 50%;
  box-shadow: 0 0 22px color-mix(in srgb, var(--jbox-accent) 55%, transparent);
  animation: jarayanBoxParticles var(--jbox-speed, 12s) ease-in-out infinite alternate;
}
.jarayan-box-motion--particles .jarayan-box-fx i:nth-child(1) { top: 15%; right: 10%; }
.jarayan-box-motion--particles .jarayan-box-fx i:nth-child(2) { top: 65%; right: 18%; width: 13px; height: 13px; animation-delay: -2s; }
.jarayan-box-motion--particles .jarayan-box-fx i:nth-child(3) { top: 36%; left: 9%; width: 6px; height: 6px; animation-delay: -5s; }
.jarayan-box-motion--particles .jarayan-box-fx b { bottom: 9%; left: 30%; width: 10px; height: 10px; animation-delay: -7s; }
.jarayan-box-motion--particles .jarayan-box-fx em { top: 8%; left: 44%; width: 5px; height: 5px; animation-delay: -4s; }

.jarayan-box-motion--wave .jarayan-box-fx b,
.jarayan-box-motion--wave .jarayan-box-fx em {
  width: 520px; height: 220px; border-radius: 50%; background: transparent;
  border: 2px solid color-mix(in srgb, var(--jbox-accent) 24%, transparent);
  inset: auto -130px -145px auto;
  animation: jarayanBoxWave var(--jbox-speed, 12s) ease-in-out infinite alternate;
}
.jarayan-box-motion--wave .jarayan-box-fx em { width: 430px; height: 190px; inset: auto -55px -132px auto; animation-delay: -4s; }

@keyframes jarayanBoxFloat {
  from { transform: translate3d(0,0,0) scale(.94); }
  to { transform: translate3d(24px,-18px,0) scale(1.08); }
}
@keyframes jarayanBoxPulse {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.45); }
  24% { opacity: .7; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(1.45); }
}
@keyframes jarayanBoxOrbit { to { transform: rotate(360deg); } }
@keyframes jarayanBoxOrbitDot {
  from { transform: translate3d(0,0,0) scale(.8); opacity: .45; }
  to { transform: translate3d(-18px,22px,0) scale(1.35); opacity: 1; }
}
@keyframes jarayanBoxShimmer {
  0%,18% { right: -50%; opacity: 0; }
  42%,62% { opacity: .85; }
  82%,100% { right: 120%; opacity: 0; }
}
@keyframes jarayanBoxParticles {
  from { transform: translate3d(0,18px,0) scale(.75); opacity: .35; }
  to { transform: translate3d(16px,-22px,0) scale(1.3); opacity: 1; }
}
@keyframes jarayanBoxWave {
  from { transform: translate3d(0,0,0) rotate(-3deg); }
  to { transform: translate3d(-28px,-12px,0) rotate(4deg); }
}

/* Preserve usable contrast for nested cards while inheriting the chosen palette. */
.jarayan-motion-box .v6-access__choices > a,
.jarayan-motion-box .jarayan-process-mini-step,
.jarayan-motion-box .jarayan-media-compact-item,
.jarayan-motion-box .faq-item,
.jarayan-motion-box .jarayan-pause-zone,
.jarayan-motion-box .jarayan-pause-stage,
.jarayan-motion-box .breathing-card {
  border-color: color-mix(in srgb, var(--jbox-accent) 18%, transparent) !important;
}
.jarayan-motion-box .v6-access__choices > a:hover,
.jarayan-motion-box .jarayan-media-compact-item:hover,
.jarayan-motion-box .faq-item:hover {
  border-color: color-mix(in srgb, var(--jbox-accent) 44%, transparent) !important;
}

@media (max-width: 760px) {
  .jarayan-motion-box:hover { transform: none; }
  .jarayan-box-fx { opacity: .34; }
  .jarayan-box-motion--orbit .jarayan-box-fx b { width: 230px; height: 230px; }
  .jarayan-box-motion--wave .jarayan-box-fx b,
  .jarayan-box-motion--wave .jarayan-box-fx em { width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .jarayan-motion-box,
  .jarayan-box-fx *,
  .jarayan-motion-box:hover {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  .jarayan-box-fx { opacity: .2; }
}