/* wg:design-vars:start */
:root{--wg-surface:#ffffff;--wg-surface-alt:#f2f2f2;--wg-surface-inverse:#1b1b1b;--wg-ink:#1b1b1b;--wg-ink-muted:#585858;--wg-ink-inverse:#f8f8f8;--wg-primary:#a30049;--wg-primary-hover:#7e0036;--wg-primary-soft:#fff6f7;--wg-accent:#58b4a6;--wg-accent-soft:#e4f7f3;--wg-link:#7e0036;--wg-link-inverse:#ffc1cd;--wg-line:#e4e4e4;--wg-line-inverse:#424242;--wg-primary-on:#ffffff;--wg-accent-on:#090909;--wg-font-display:'Yeseva One', Georgia, 'Times New Roman', serif;--wg-font-body:'Mulish', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;--wg-radius-ui:0px;--wg-radius-card:0px;--wg-shadow-card:none;--wg-section:8rem}
/* wg:design-vars:end */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes gentlePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

@keyframes lineExpand {
  from { width: 0; }
  to { width: 100%; }
}

body {
  animation: fadeIn 0.4s ease-out;
}

.section {
  animation: fadeInUp 0.6s ease-out both;
}

/* Header sticky + scrolled state */
#site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.35s ease, border-color 0.35s ease, background-color 0.35s ease;
}

#site-header.is-scrolled {
  box-shadow: 0 1px 0 0 var(--wg-line);
  border-bottom-color: var(--wg-line);
}

/* Cookie banner — opacity + visibility transition only */
#cookie-banner {
  transition: opacity 0.5s ease, visibility 0.5s ease;
  opacity: 0;
  visibility: hidden;
}

#cookie-banner:not(.hidden) {
  opacity: 1;
  visibility: visible;
}

/* Decorative small-caps labels */
.small-caps-label {
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Thin accent-coloured decorative lines */
.accent-line {
  display: block;
  width: 48px;
  height: 2px;
  background-color: var(--wg-accent);
  border: none;
  margin: 0.75rem 0;
}

.accent-line-animated {
  position: relative;
  overflow: hidden;
}

.accent-line-animated::after {
  content: "";
  display: block;
  height: 2px;
  background-color: var(--wg-accent);
  animation: lineExpand 0.8s ease-out forwards;
}

/* Form focus states */
input,
textarea,
select {
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--wg-primary);
  box-shadow: 0 0 0 3px var(--wg-primary-soft);
}

/* Form error states */
input.error,
textarea.error,
select.error {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

.error-message {
  display: block;
  margin-top: 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.3;
}

.form-success-message {
  animation: fadeInUp 0.5s ease-out both;
}

/* Back to top button transition */
#back-to-top {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#back-to-top:hover {
  transform: translateY(-3px);
}

/* Accordion smooth reveal */
.accordion-content {
  animation: fadeIn 0.3s ease-out;
}

.accordion-header i {
  transition: transform 0.3s ease;
}

.accordion-header[aria-expanded="true"] i {
  transform: rotate(180deg);
}

/* Mobile menu reveal animation (visibility handled by Tailwind 'hidden') */
#mobile-menu:not(.hidden) {
  animation: fadeIn 0.3s ease-out;
}

/* Link underline accent for storytelling voice */
.link-inline {
  text-underline-offset: 3px;
}

/* Subtle fade for images without using opacity-0 pattern conflicts */
img {
  transition: opacity 0.5s ease;
}

/* Print rules */
@media print {
  #site-header,
  #mobile-menu-toggle,
  #mobile-menu,
  #cookie-banner,
  #back-to-top,
  footer .social-links {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    animation: none;
  }

  a {
    text-decoration: underline;
  }

  .section {
    animation: none;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}