/* ============================================================
   Grzybosfera — Subtle Animations & Motion
   ============================================================
   - Reveal-on-scroll (IntersectionObserver)
   - Smooth mobile menu (slide + fade)
   - Hover micro-interactions
   - Theme transition smoothness
   - Respects prefers-reduced-motion
   ============================================================ */

/* --- Reveal on scroll (initial state) --- */
.grzybo-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}
.grzybo-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered children */
.grzybo-reveal[data-delay="1"] { transition-delay: 0.08s; }
.grzybo-reveal[data-delay="2"] { transition-delay: 0.16s; }
.grzybo-reveal[data-delay="3"] { transition-delay: 0.24s; }
.grzybo-reveal[data-delay="4"] { transition-delay: 0.32s; }
.grzybo-reveal[data-delay="5"] { transition-delay: 0.40s; }
.grzybo-reveal[data-delay="6"] { transition-delay: 0.48s; }

/* --- Header logo --- */
.grzybo-logo {
  height: 44px;
  width: auto;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              filter 0.4s ease;
}
.grzybo-logo:hover {
  transform: scale(1.04);
  filter: drop-shadow(0 2px 6px rgba(34, 197, 94, 0.25));
}
@media (max-width: 640px) {
  .grzybo-logo { height: 36px; }
}

/* --- Nav link micro-interaction --- */
nav a, .grzybo-nav-link {
  position: relative;
  transition: color 0.2s ease, transform 0.2s ease;
}
nav a::after, .grzybo-nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: -4px;
  height: 2px;
  background: #22c55e;
  border-radius: 2px;
  transition: right 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
nav a:hover::after, .grzybo-nav-link:hover::after,
nav a[aria-current="page"]::after {
  right: 0;
}

/* --- Mobile menu: smooth slide-down + fade --- */
[data-mobile-menu] {
  display: block;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease,
              visibility 0s linear 0.35s;
  position: relative;
  z-index: 50;
  background: #ffffff;            /* solid white so nothing shows through */
  box-shadow: 0 8px 16px -4px rgba(0, 0, 0, 0.08); /* subtle depth */
}
[data-mobile-menu].is-open {
  max-height: 80vh;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: max-height 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.2s ease 0.05s,
              visibility 0s linear 0s;
}
/* Fallback for md+: keep hidden via display, override above */
@media (min-width: 768px) {
  [data-mobile-menu] { display: none !important; }
}

/* --- Mobile menu hamburger icon morph --- */
[data-menu-toggle] {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.2s ease,
              border-color 0.2s ease;
}
[data-menu-toggle].is-open {
  transform: rotate(0deg);  /* button itself doesn't rotate — only the icon does */
  background-color: #f3f4f6; /* gray-100 — distinct from closed state */
  border-color: #22c55e;     /* primary green border when open */
}
[data-menu-toggle] .icon-bars,
[data-menu-toggle] .icon-close {
  transition: opacity 0.2s ease, transform 0.2s ease;
}
[data-menu-toggle] .icon-close {
  position: absolute;
  inset: 0;
  margin: auto;
  opacity: 0;
  transform: rotate(-90deg) scale(0.7);
  width: 24px;
  height: 24px;
}
[data-menu-toggle] .icon-bars {
  display: block;
}
[data-menu-toggle].is-open .icon-bars {
  opacity: 0;
  transform: rotate(90deg) scale(0.7);
}
[data-menu-toggle].is-open .icon-close {
  opacity: 1;
  transform: rotate(0) scale(1);
}

/* --- Cards: subtle lift on hover --- */
.grzybo-card,
article.group,
a.group[class*="hover:shadow"] {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease;
}

/* --- Buttons: tactile press --- */
button, a[class*="bg-primary"], a[class*="hover:bg-primary"] {
  transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
button:active, a[class*="bg-primary"]:active {
  transform: scale(0.97);
}

/* --- Body lock when mobile menu open --- */
body.menu-open {
  overflow: hidden;
}

/* Force the sticky header to be fully opaque white when the mobile menu
   is open. Tailwind Play CDN injects bg-white/95 + backdrop-blur with high
   specificity, so we need !important on both the color and the
   -webkit-backdrop-filter / backdrop-filter declarations. */
body.menu-open header.sticky,
body.menu-open header[class*="sticky"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

/* When mobile menu is open, de-emphasize the brand mark so the X button
   is the obvious action — cleaner header with menu expanded. */
body.menu-open .grzybo-logo {
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

/* --- Theme transition smoothness (color/background fade between light/dark) --- */
html.theme-transition,
html.theme-transition * {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* --- Fade in page on first load --- */
body {
  animation: grzybo-page-fade 0.5s ease-out;
}
@keyframes grzybo-page-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* --- Backdrop removed by user request (2026-06-02) ---
   The dim overlay behind the mobile menu was the source of the
   "greyed-out" look the user disliked. Mobile menu now expands
   in-line, no overlay. We keep the class hidden in case we want
   to bring it back later. */
.grzybo-backdrop { display: none !important; }

/* --- Subtle "breathing" for hero badge / brand mark --- */
@keyframes grzybo-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.05); opacity: 0.85; }
}
.grzybo-pulse {
  animation: grzybo-pulse 3s ease-in-out infinite;
}

/* --- Reduce motion for users who want it --- */
@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;
  }
  .grzybo-reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  [data-mobile-menu] {
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}