/* ---------------------------------------------------------------------------
   inox-brzet.com — the small amount of CSS that the original site got from
   JavaScript libraries (framer-motion, radix-ui, sonner) rather than from its
   Tailwind stylesheet. Everything else lives in style.css, which is the
   original compiled stylesheet, shipped unmodified.

   Design rule throughout: nothing is hidden unless JavaScript has actually
   taken responsibility for showing it again. Entrance animations are plain CSS
   keyframes that always finish at their visible state, and the scroll reveals
   only arm themselves once app.js has confirmed it is running.
   --------------------------------------------------------------------------- */

/* --- hero card: framer-motion initial {opacity:0,y:30}, duration .6s ------- */
.reveal-now {
  animation: reveal-up 0.6s ease-out both;
}

/* --- scroll reveals (replaces framer-motion whileInView) -------------------
   .reveals-armed is set by app.js, so if the script fails to load or the
   browser lacks IntersectionObserver the content simply renders visible
   instead of being stranded at opacity 0. */
.reveals-armed .reveal {
  opacity: 0;
  transform: translateY(20px);
}
.reveals-armed .reveal.is-visible {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s ease-out var(--reveal-delay, 0s),
    transform 0.5s ease-out var(--reveal-delay, 0s);
}

@keyframes reveal-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- photo pile (replaces framer-motion spring variants) -------------------
   The original fades the container in after animationDelay (0.2s) and springs
   each card outwards at animationDelay + 0.4s with a 0.15s stagger. Those
   delays are baked into the markup as --pile-delay. */
[data-pile-fade] {
  animation: pile-fade 0.4s ease-out 0.2s both;
}
[data-pile-card] {
  animation: pile-spread 0.9s cubic-bezier(0.34, 1.32, 0.64, 1) var(--pile-delay, 0.6s) both;
}
[data-pile-photo] {
  animation: pile-rotate 0.9s cubic-bezier(0.34, 1.32, 0.64, 1) var(--pile-delay, 0.6s) both;
}
[data-pile-inner] {
  transition: transform 0.2s ease-out;
}
[data-pile-photo]:hover,
[data-pile-photo]:focus-visible {
  z-index: 9999 !important;
}
[data-pile-photo]:hover [data-pile-inner],
[data-pile-photo]:focus-visible [data-pile-inner] {
  transform: scale(1.1) rotate(var(--pile-hover-rot, 2deg));
}
/* while dragging, the inline transform set by app.js must win */
[data-pile-photo].is-dragging {
  animation: none !important;
  transition: none;
  cursor: grabbing;
  z-index: 9999 !important;
}

@keyframes pile-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes pile-spread {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--pile-x), var(--pile-y)); }
}
@keyframes pile-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(var(--pile-rot, 0deg)); }
}

/* --- checkbox indicator (radix renders it only while checked) ------------- */
[data-slot='checkbox'][data-state='unchecked'] [data-slot='checkbox-indicator'] {
  opacity: 0;
}
[data-slot='checkbox'] [data-slot='checkbox-indicator'] {
  pointer-events: none;
}

/* --- toast (replaces sonner) ---------------------------------------------- */
.toaster {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 356px;
  max-width: calc(100vw - 32px);
  pointer-events: none;
}
.toaster [data-toast] {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--popover);
  color: var(--popover-foreground);
  box-shadow:
    0 4px 12px rgb(0 0 0 / 10%),
    0 0 0 1px rgb(0 0 0 / 4%);
  font-size: 13px;
  line-height: 1.4;
  font-weight: 500;
  pointer-events: auto;
  animation: toast-in 0.35s ease both;
}
.toaster [data-toast].is-leaving {
  animation: toast-out 0.35s ease both;
}
.toaster [data-toast][data-type='error'] {
  color: var(--destructive);
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(16px); }
}

@media (prefers-reduced-motion: reduce) {
  .reveal-now,
  [data-pile-fade],
  [data-pile-card],
  [data-pile-photo],
  .toaster [data-toast] {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
  .reveals-armed .reveal {
    opacity: 1;
    transform: none;
  }
  [data-pile-inner] {
    transition: none;
  }
}