/* ============================================================
   zaprośładnie — extra styles (animations + accordion helpers)
   ============================================================ */

/* ---- Entry animations (motion/react initial→animate) ---- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeScale {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* animation-fill-mode: both — keeps the "from" state during the delay,
   and the "to" state after the animation ends. No baseline opacity:0
   on the element itself, so if animations are disabled the content is
   still visible. */
.anim-fade-up      { animation: fadeUp     0.8s ease-out both; }
.anim-fade-scale   { animation: fadeScale  0.8s ease-out both; }
.anim-fade-in-left { animation: fadeInLeft 0.6s ease-out both; }

@media (prefers-reduced-motion: reduce) {
  .anim-fade-up, .anim-fade-scale, .anim-fade-in-left {
    animation: none;
  }
}

/* ---- whileInView (IntersectionObserver triggers .in-view) ---- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Contain the hero's repaint region so its animated decorative
   circles don't invalidate the navbar above. */
section.relative.overflow-hidden {
  contain: paint;
  isolation: isolate;
}

/* ---- Hero decorative circles (motion infinite loops) ---- */
@keyframes heroCircle1 {
  0%   { transform: scale(1)   rotate(0deg); }
  50%  { transform: scale(1.1) rotate(5deg); }
  100% { transform: scale(1)   rotate(0deg); }
}
@keyframes heroCircle2 {
  0%   { transform: scale(1)   rotate(0deg); }
  50%  { transform: scale(1.2) rotate(-5deg); }
  100% { transform: scale(1)   rotate(0deg); }
}
.hero-circle-1 {
  animation: heroCircle1 20s linear infinite;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
}
.hero-circle-2 {
  animation: heroCircle2 15s linear infinite;
  transform-origin: center;
  will-change: transform;
  backface-visibility: hidden;
}

/* Promote the fixed navbar to its own compositor layer so its
   backdrop-blur doesn't get recomputed every frame as the hero
   circles below animate. Without this, Safari/Chrome on macOS
   show a constant flicker at the top of the page. */
nav.fixed {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  will-change: transform;
}

/* ---- Floating "stone" in catalog cards ---- */
@keyframes floatStone {
  0%, 100% { transform: translate(-50%, 0); }
  50%      { transform: translate(-50%, -2px); }
}
.float-stone {
  animation: floatStone 4s ease-in-out infinite;
}
/* When the parent .group is hovered, scale up the stone */
.group:hover .float-stone {
  transform: translate(-50%, 0) scale(1.10);
  transition: transform 0.5s ease;
}

/* ---- Mobile menu collapse ---- */
.mobile-menu-collapsed {
  max-height: 0;
  opacity: 0;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}
.mobile-menu-expanded {
  max-height: 480px;
  opacity: 1;
  transition: max-height 0.4s ease, opacity 0.3s ease;
}

/* ---- Accordion content (FAQ + TierAccordion) ---- */
.accordion-content {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, opacity 0.4s ease;
}
.accordion-content.open {
  max-height: 2000px;
  opacity: 1;
}
.chevron {
  transition: transform 0.3s ease;
}
.chevron.open {
  transform: rotate(180deg);
}

/* ---- Glow effect on catalog card (group-hover) ---- */
.card-glow {
  position: absolute;
  inset: 0;
  background: rgba(176, 141, 87, 0.05);
  filter: blur(24px);
  border-radius: 9999px;
  transform: scale(0);
  transition: transform 1s ease;
  pointer-events: none;
}
.group:hover .card-glow {
  transform: scale(1.5);
}

/* ---- Line clamp helper (Tailwind v3 utility already covers this, fallback) ---- */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- Lang button active states (toggled via JS) ---- */
.lang-btn-desktop {
  color: rgba(26, 26, 26, 0.4);
}
.lang-btn-desktop:hover { color: rgba(26, 26, 26, 0.6); }
.lang-btn-desktop.active {
  color: #8b735b;
  font-weight: 700;
}
.lang-btn-mobile-top {
  color: rgba(26, 26, 26, 0.4);
  font-weight: 400;
}
.lang-btn-mobile-top.active {
  color: #8b735b;
  font-weight: 700;
}
.lang-btn-mobile-menu {
  color: rgba(26, 26, 26, 0.4);
  font-weight: 400;
}
.lang-btn-mobile-menu.active {
  color: #8b735b;
  font-weight: 700;
}

/* Hide [hidden] for safety in case Tailwind preflight is overridden */
[hidden] { display: none !important; }

/* ---- Coming-soon modal ---- */
.coming-soon-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  animation: comingSoonFade 0.2s ease-out;
}
.coming-soon-overlay.hidden { display: none; }

.coming-soon-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(26, 26, 26, 0.55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.coming-soon-card {
  position: relative;
  background: #fdfcf7;
  border-radius: 28px;
  border: 1px solid rgba(176, 141, 87, 0.18);
  box-shadow: 0 25px 60px -15px rgba(26, 26, 26, 0.35);
  padding: 2.5rem 2rem 2rem;
  max-width: 26rem;
  width: 100%;
  text-align: center;
  animation: comingSoonPop 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.coming-soon-close {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(26, 26, 26, 0.45);
  transition: background-color 0.2s, color 0.2s;
}
.coming-soon-close:hover {
  background: rgba(176, 141, 87, 0.12);
  color: #8b735b;
}

.coming-soon-icon {
  width: 4rem;
  height: 4rem;
  margin: 0 auto 1.25rem;
  border-radius: 9999px;
  background: #fdfcf0;
  border: 2px solid rgba(176, 141, 87, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.coming-soon-title {
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 1.75rem;
  line-height: 1.2;
  color: #1a1a1a;
  margin-bottom: 0.75rem;
}

.coming-soon-desc {
  color: rgba(26, 26, 26, 0.6);
  font-style: italic;
  line-height: 1.55;
  margin-bottom: 1.75rem;
  font-family: 'Cormorant Garamond', 'Playfair Display', serif;
  font-size: 1.05rem;
}

.coming-soon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.75rem;
  background: #b08d57;
  color: #fff;
  border-radius: 9999px;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  transition: background-color 0.2s, transform 0.2s;
}
.coming-soon-btn:hover {
  background: #8b735b;
  transform: translateY(-1px);
}

@keyframes comingSoonFade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes comingSoonPop {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}