/* BQ Time Tools — Chrono Sand clock-only hero v1.17.1 */
.chrono-sand-home {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: center;
  overflow: visible;
}

.chrono-sand-home-main {
  min-width: 0;
  display: grid;
  gap: 1rem;
  align-content: center;
}

.chrono-sand-home-main .home-copy,
.chrono-sand-home-main .clock-card,
.chrono-sand-home-main .hero-actions {
  min-width: 0;
}

.chrono-sand-home-main .clock-card {
  margin: 0;
}

.chrono-sand-scene {
  --chrono-sand-progress: 0;
  --chrono-sand-tilt-x: 0deg;
  --chrono-sand-tilt-y: 0deg;
  position: relative;
  width: min(100%, 620px);
  min-width: 0;
  aspect-ratio: 1.08 / 1;
  justify-self: center;
  isolation: isolate;
  contain: layout paint style;
  perspective: 1100px;
  user-select: none;
  pointer-events: none;
}

.chrono-sand-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--chrono-sand-tilt-x)) rotateY(var(--chrono-sand-tilt-y));
  transition: transform 220ms ease-out;
  animation: chrono-sand-float 7s ease-in-out infinite;
  will-change: transform;
}

.chrono-sand-glow {
  position: absolute;
  inset: 10% 4% 4%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 56% 42%, color-mix(in srgb, var(--gold) 26%, transparent), transparent 42%),
    radial-gradient(circle at 42% 66%, color-mix(in srgb, var(--mint) 15%, transparent), transparent 48%);
  filter: blur(22px);
  opacity: .78;
  transform: translateZ(-20px);
}

.chrono-sand-art,
.chrono-sand-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.chrono-sand-art {
  overflow: visible;
  transform: translateZ(26px);
  filter: saturate(.98) contrast(1.02);
}

.chrono-sand-canvas {
  z-index: 3;
  transform: translateZ(48px);
}

.chrono-sand-clock {
  transform-box: fill-box;
  transform-origin: center;
  translate: -6px 18px;
  opacity: clamp(.08, calc(1.08 - var(--chrono-sand-progress)), 1);
  transform: translate(
      calc(var(--chrono-sand-progress) * 10px),
      calc(var(--chrono-sand-progress) * 8px)
    )
    rotate(calc(var(--chrono-sand-progress) * 2deg))
    scale(calc(1.08 - var(--chrono-sand-progress) * .04));
}

.chrono-sand-mask-bite {
  transform-box: fill-box;
  transform-origin: center right;
  transition: opacity 120ms linear;
}

.chrono-sand-mask-bite-a {
  transform: scale(calc(.08 + var(--chrono-sand-progress) * 1.15));
  opacity: clamp(0, calc((var(--chrono-sand-progress) - .18) * 2.4), 1);
}

.chrono-sand-mask-bite-b {
  transform: scale(calc(.04 + var(--chrono-sand-progress) * 1.25));
  opacity: clamp(0, calc((var(--chrono-sand-progress) - .48) * 2.8), 1);
}

.chrono-sand-static-stream {
  opacity: clamp(.12, calc((var(--chrono-sand-progress) - .18) * 1.55), .9);
  transform: translateY(calc(var(--chrono-sand-progress) * 11px));
}

.chrono-sand-clock-hands path {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.chrono-sand-hour { transform: rotate(var(--chrono-sand-hour-angle, 0deg)); }
.chrono-sand-minute { transform: rotate(var(--chrono-sand-minute-angle, 0deg)); }
.chrono-sand-second { transform: rotate(var(--chrono-sand-second-angle, 0deg)); }

.chrono-sand-scene[data-reforming="true"] .chrono-sand-clock {
  animation: chrono-sand-reform 900ms cubic-bezier(.2,.8,.2,1) both;
}

html[data-theme="dark"] .chrono-sand-glow,
body.dark .chrono-sand-glow {
  opacity: .56;
}

html[data-theme="dark"] .chrono-sand-scene,
body.dark .chrono-sand-scene {
  filter: brightness(.96) saturate(.92);
}

@keyframes chrono-sand-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -8px; }
}

@keyframes chrono-sand-reform {
  0% { opacity: .08; transform: translate(12px, 12px) rotate(2deg) scale(.96); filter: blur(3px); }
  100% { opacity: 1; transform: translate(0, 0) rotate(0) scale(1.08); filter: blur(0); }
}

@media (max-width: 980px) {
  .chrono-sand-home {
    grid-template-columns: 1fr;
  }

  .chrono-sand-home-main {
    display: contents;
  }

  .chrono-sand-home .home-copy { order: 1; }
  .chrono-sand-home .clock-card { order: 2; }
  .chrono-sand-scene { order: 3; }
  .chrono-sand-home .hero-actions { order: 4; }

  .chrono-sand-scene {
    width: min(100%, 520px);
    aspect-ratio: 1.18 / 1;
    margin-block: -.5rem 0;
  }
}

@media (max-width: 620px) {
  .chrono-sand-home {
    gap: .85rem;
    overflow: clip;
  }

  .chrono-sand-scene {
    width: min(100%, 430px);
    min-height: 300px;
    max-height: 390px;
  }

  .chrono-sand-stage {
    animation-duration: 9s;
  }

  .chrono-sand-glow {
    filter: blur(12px);
    opacity: .55;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chrono-sand-stage {
    animation: none !important;
    transform: none !important;
    transition: none !important;
  }

  .chrono-sand-clock,
  .chrono-sand-mask-bite,
  .chrono-sand-static-stream {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }

  .chrono-sand-clock { opacity: 1 !important; }
  .chrono-sand-mask-bite { opacity: .18 !important; }
  .chrono-sand-static-stream { opacity: .42 !important; }
  .chrono-sand-canvas { display: none !important; }
}