/* Growmore theme - behaviour styles that replace the original JS animations. */

/* Scroll reveal. Elements stay visible when JavaScript is unavailable. */
.gm-reveal-ready [data-gm-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.gm-reveal-ready [data-gm-reveal="up"]    { transform: translateY(24px); }
.gm-reveal-ready [data-gm-reveal="scale"] { transform: scale(0.9); }
.gm-reveal-ready [data-gm-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .gm-reveal-ready [data-gm-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
}

/* Mobile menu open/close. */
.gm-mobile-menu {
  height: 0;
  opacity: 0;
  transition: height 0.25s ease-in-out, opacity 0.25s ease-in-out;
}
.gm-mobile-menu.is-open { opacity: 1; }
#gm-menu-toggle .gm-icon-close { display: none; }
#gm-menu-toggle.is-open .gm-icon-menu { display: none; }
#gm-menu-toggle.is-open .gm-icon-close { display: block; }

/* Floating WhatsApp button. */
#gm-whatsapp {
  opacity: 0;
  transform: translateY(12px) scale(0.7);
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
}
#gm-whatsapp.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
#gm-whatsapp:hover { transform: scale(1.06); }

/* Contact form honeypot - hidden from people, visible to bots. */
.gm-hp {
  position: absolute !important;
  left: -9999px !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
}

/* WordPress admin bar should not cover the sticky header. */
body.admin-bar #gm-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar #gm-header { top: 46px; }
}

/* Core WordPress alignment classes, for any content added later. */
.alignleft  { float: left; margin-right: 1.5rem; }
.alignright { float: right; margin-left: 1.5rem; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden; clip: rect(1px, 1px, 1px, 1px);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Home hero motion.
   The original React hero used framer-motion loops (pulsing glow, radar rings,
   flowing connector lines, an orbiting node ring and floating chips). Those are
   reproduced here as plain CSS keyframes so the port needs no JS animation
   library. Selectors use attribute-substring matching to avoid escaping the
   Tailwind bracket classes.
   -------------------------------------------------------------------------- */
@keyframes gm-glow-pulse { 0%, 100% { opacity: .5; } 50% { opacity: .8; } }
@keyframes gm-radar      { from { opacity: .6; transform: scale(1); } to { opacity: 0; transform: scale(1.7); } }
@keyframes gm-dash       { to { stroke-dashoffset: -24; } }
@keyframes gm-orbit      { to { transform: rotate(360deg); } }
@keyframes gm-orbit-rev  { to { transform: rotate(-360deg); } }
@keyframes gm-float      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* Soft accent glow behind the hero, breathing slowly. */
[class*="bg-navy-950"] > [class*="-top-32"][class*="blur-[120px]"] {
  animation: gm-glow-pulse 6s ease-in-out infinite;
}

/* Hero diagram. */
[class*="max-w-[420px]"] > :nth-child(4),
[class*="max-w-[420px]"] > :nth-child(5) {
  animation: gm-radar 3s ease-out infinite;
}
[class*="max-w-[420px]"] > :nth-child(5) { animation-delay: 1.5s; }

[class*="max-w-[420px]"] svg path[stroke-dasharray] {
  animation: gm-dash 2.2s linear infinite;
}
[class*="max-w-[420px]"] svg path[stroke-dasharray]:nth-of-type(2) { animation-delay: .2s; }
[class*="max-w-[420px]"] svg path[stroke-dasharray]:nth-of-type(3) { animation-delay: .4s; }
[class*="max-w-[420px]"] svg path[stroke-dasharray]:nth-of-type(4) { animation-delay: .6s; }

/* The node ring turns; each node counter-turns so the icons stay upright. */
[class*="max-w-[420px]"] > :nth-child(7) {
  animation: gm-orbit 26s linear infinite;
}
[class*="max-w-[420px]"] > :nth-child(7) > div > div {
  animation: gm-orbit-rev 26s linear infinite;
}

/* Floating labels around the diagram. */
[class*="max-w-[420px]"] > :nth-child(9)  { animation: gm-float 4s ease-in-out infinite; }
[class*="max-w-[420px]"] > :nth-child(10) { animation: gm-float 5s ease-in-out infinite .4s; }
[class*="max-w-[420px]"] > :nth-child(11) { animation: gm-float 6s ease-in-out infinite .8s; }
[class*="max-w-[420px]"] > :nth-child(12) { animation: gm-float 7s ease-in-out infinite 1.2s; }

@media (prefers-reduced-motion: reduce) {
  [class*="bg-navy-950"] > [class*="-top-32"][class*="blur-[120px]"],
  [class*="max-w-[420px]"] > :nth-child(4),
  [class*="max-w-[420px]"] > :nth-child(5),
  [class*="max-w-[420px]"] svg path[stroke-dasharray],
  [class*="max-w-[420px]"] > :nth-child(7),
  [class*="max-w-[420px]"] > :nth-child(7) > div > div,
  [class*="max-w-[420px]"] > :nth-child(9),
  [class*="max-w-[420px]"] > :nth-child(10),
  [class*="max-w-[420px]"] > :nth-child(11),
  [class*="max-w-[420px]"] > :nth-child(12) {
    animation: none !important;
  }
}