/**
 * Walonium Hook & Loop Requirement Calculator
 * Phase 2A — Animation foundation (classes only; no component animation yet)
 */

/* ==========================================================================
   1. Motion tokens
   ========================================================================== */

#main-content {
  --calc-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --calc-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --calc-duration-fast: 180ms;
  --calc-duration-base: 280ms;
  --calc-duration-slow: 420ms;
}

/* ==========================================================================
   2. Reusable animation classes
   ========================================================================== */

.calc-animate-fade {
  opacity: 0;
  animation: calc-fade-in var(--calc-duration-base) var(--calc-ease-out) forwards;
}

.calc-animate-slide-up {
  opacity: 0;
  transform: translateY(1rem);
  animation: calc-slide-up var(--calc-duration-base) var(--calc-ease-out) forwards;
}

.calc-animate-slide-down {
  opacity: 0;
  transform: translateY(-0.75rem);
  animation: calc-slide-down var(--calc-duration-base) var(--calc-ease-out) forwards;
}

.calc-animate-scale-in {
  opacity: 0;
  transform: scale(0.96);
  animation: calc-scale-in var(--calc-duration-base) var(--calc-ease-out) forwards;
}

.calc-animate-reveal {
  clip-path: inset(0 0 100% 0);
  animation: calc-reveal var(--calc-duration-slow) var(--calc-ease-out) forwards;
}

.calc-animate-counter {
  font-variant-numeric: tabular-nums;
}

.calc-animate-counter.is-counting {
  animation: calc-counter-pulse var(--calc-duration-fast) var(--calc-ease-in-out);
}

.calc-animate-hover-lift {
  transition:
    transform var(--calc-duration-fast) var(--calc-ease-out),
    box-shadow var(--calc-duration-fast) var(--calc-ease-out);
}

.calc-animate-hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: var(--calc-shadow-md);
}

.calc-animate-soft-glow {
  transition: box-shadow var(--calc-duration-base) var(--calc-ease-out);
}

.calc-animate-soft-glow:hover,
.calc-animate-soft-glow:focus-within {
  box-shadow: var(--calc-shadow-glow);
}

.calc-input-card.calc-animate-hover-lift:hover {
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  #main-content .calc-input-card.calc-animate-hover-lift:hover {
    transform: none;
  }
}

/* ==========================================================================
   2b. Phase 2B — Hero & Benefits motion
   ========================================================================== */

.calc-animate-float {
  animation: calc-float 6s var(--calc-ease-in-out) infinite alternate;
}

.calc-animate-float--delayed {
  animation-delay: 1.5s;
}

.calc-animate-scroll .calc-hero__scroll-line::after {
  animation: calc-scroll-pulse 2s var(--calc-ease-in-out) infinite;
}

.calc-hero__backdrop-orb--primary,
.calc-hero__backdrop-orb--accent {
  will-change: transform;
}

/* ==========================================================================
   3. Accordion transition preparation
   ========================================================================== */

.calc-accordion-ready .calc-breakdown__panel,
.calc-accordion-ready .calc-faq__answer {
  overflow: hidden;
  transition:
    opacity var(--calc-duration-base) var(--calc-ease-out),
    transform var(--calc-duration-base) var(--calc-ease-out);
}

.calc-accordion-ready .calc-breakdown__details:not([open]) .calc-breakdown__panel,
.calc-accordion-ready .calc-faq__item:not([open]) .calc-faq__answer {
  opacity: 0;
  transform: translateY(-0.25rem);
}

.calc-accordion-ready .calc-breakdown__details[open] .calc-breakdown__panel,
.calc-accordion-ready .calc-faq__item[open] .calc-faq__answer {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   4. Stagger delays (utility)
   ========================================================================== */

.calc-delay-1 { animation-delay: 60ms; }
.calc-delay-2 { animation-delay: 120ms; }
.calc-delay-3 { animation-delay: 180ms; }
.calc-delay-4 { animation-delay: 240ms; }

/* ==========================================================================
   5. Keyframes
   ========================================================================== */

@keyframes calc-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes calc-slide-up {
  from {
    opacity: 0;
    transform: translateY(1rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes calc-slide-down {
  from {
    opacity: 0;
    transform: translateY(-0.75rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes calc-scale-in {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes calc-reveal {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0 0 0 0); }
}

@keyframes calc-counter-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.72; }
}

@keyframes calc-spin {
  to { transform: rotate(360deg); }
}

@keyframes calc-float {
  from { transform: translateY(0); }
  to { transform: translateY(-6px); }
}

@keyframes calc-scroll-pulse {
  0%, 100% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.55;
    transform: translateY(0.5rem);
  }
}

@keyframes calc-backdrop-drift {
  from { transform: translate(0, 0) scale(1); }
  to { transform: translate(2%, -3%) scale(1.04); }
}

/* ==========================================================================
   6. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  #main-content *,
  #main-content *::before,
  #main-content *::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }

  #main-content .calc-animate-fade,
  #main-content .calc-animate-slide-up,
  #main-content .calc-animate-slide-down,
  #main-content .calc-animate-scale-in,
  #main-content .calc-animate-reveal {
    opacity: 1;
    transform: none;
    clip-path: none;
    animation: none;
  }

  #main-content .calc-animate-hover-lift:hover {
    transform: none;
  }

  #main-content .calc-animate-float,
  #main-content .calc-hero__backdrop-orb--primary,
  #main-content .calc-hero__backdrop-orb--accent {
    animation: none;
    transform: none;
  }

  #main-content .calc-animate-scroll .calc-hero__scroll-line::after {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ==========================================================================
   7. Phase 6A — Premium results experience
   ========================================================================== */

.calc-results:not(.calc-section--revealed) .calc-kpi.calc-animate-slide-up {
  opacity: 1;
  transform: none;
  animation: none;
}

.calc-is-loading .calc-summary__value--estimate,
.calc-is-loading .calc-kpi__value {
  position: relative;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.calc-is-loading .calc-summary__value--estimate::after,
.calc-is-loading .calc-kpi__value::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 0;
  inline-size: min(100%, 7rem);
  block-size: 0.875rem;
  border-radius: var(--calc-radius-sm);
  background: linear-gradient(
    90deg,
    var(--calc-color-surface-muted) 0%,
    color-mix(in srgb, var(--calc-color-surface-elevated) 88%, white) 50%,
    var(--calc-color-surface-muted) 100%
  );
  background-size: 200% 100%;
  transform: translateY(-50%);
  animation: calc-skeleton-shimmer 1.15s ease-in-out infinite;
}

.calc-is-loading.calc-summary__container .calc-summary__section--estimates,
.calc-is-loading.calc-results .calc-results__grid,
#calc-breakdown.calc-is-loading .calc-breakdown__details,
#calc-rfq.calc-is-loading .calc-rfq__card {
  opacity: 0.72;
}

.calc-is-exiting {
  opacity: 0;
  transform: translateY(0.5rem);
  transition:
    opacity var(--calc-duration-fast) var(--calc-ease-out),
    transform var(--calc-duration-fast) var(--calc-ease-out);
}

.calc-summary__value--flash {
  border-radius: var(--calc-radius-sm);
  animation: calc-summary-highlight 1.1s var(--calc-ease-out) forwards;
}

.calc-success-banner {
  display: flex;
  align-items: flex-start;
  gap: var(--calc-space-4);
  margin-block: 0 var(--calc-space-6);
  padding: var(--calc-space-5) var(--calc-space-6);
  border: 1px solid color-mix(in srgb, var(--calc-color-success) 24%, transparent);
  border-radius: var(--calc-radius-lg);
  background: var(--calc-color-success-soft);
  box-shadow: var(--calc-shadow-sm);
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity 280ms var(--calc-ease-out),
    transform 280ms var(--calc-ease-out);
}

.calc-success-banner[hidden] {
  display: none !important;
  opacity: 0;
  transform: translateY(-0.5rem);
  pointer-events: none;
}

.calc-success-banner--exiting {
  opacity: 0;
  transform: translateY(-0.5rem);
}

.calc-success-banner__icon {
  display: inline-flex;
  flex-shrink: 0;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  color: var(--calc-color-success);
}

.calc-success-banner__icon-svg {
  inline-size: 100%;
  block-size: 100%;
}

.calc-success-banner__copy {
  flex: 1;
  min-inline-size: 0;
}

.calc-success-banner__title {
  margin: 0;
  font-size: var(--calc-text-body);
  font-weight: var(--calc-weight-semibold);
  color: var(--calc-color-text);
}

.calc-success-banner__message {
  margin: var(--calc-space-1) 0 0;
  font-size: var(--calc-text-small);
  color: var(--calc-color-text-secondary);
}

.calc-success-banner__close {
  flex-shrink: 0;
  inline-size: 2rem;
  block-size: 2rem;
  border: 0;
  border-radius: var(--calc-radius-sm);
  background: transparent;
  color: var(--calc-color-text-secondary);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  transition:
    background-color var(--calc-duration-fast) var(--calc-ease-out),
    color var(--calc-duration-fast) var(--calc-ease-out);
}

.calc-success-banner__close:hover {
  background: color-mix(in srgb, var(--calc-color-success) 12%, transparent);
  color: var(--calc-color-text);
}

.calc-success-banner__close:focus-visible {
  outline: 2px solid var(--calc-color-success);
  outline-offset: 2px;
}

@keyframes calc-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

@keyframes calc-summary-highlight {
  0%,
  100% {
    background-color: transparent;
  }

  22% {
    background-color: var(--calc-color-success-soft);
  }
}

@media (max-width: 47.99rem) {
  #main-content {
    --calc-duration-fast: 140ms;
    --calc-duration-base: 220ms;
    --calc-duration-slow: 320ms;
  }

  .calc-success-banner {
    margin-block-end: var(--calc-space-5);
    padding: var(--calc-space-4) var(--calc-space-5);
  }

  .calc-is-exiting {
    transform: translateY(0.25rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .calc-is-loading .calc-summary__value--estimate::after,
  .calc-is-loading .calc-kpi__value::after {
    animation: none;
    background: var(--calc-color-surface-muted);
  }

  .calc-is-exiting {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .calc-success-banner--exiting {
    opacity: 0;
    transform: none;
    transition: none;
  }

  .calc-summary__value--flash {
    animation: none;
    background-color: var(--calc-color-success-soft);
  }
}