/* ==========================================================================
   Growvia — motion & decorative layer
   Adds the reference theme's visual devices (script eyebrows, halftone dots,
   floating blobs, gradient overlays, side dock, wave dividers) and its
   entrance/hover animation language, in Growvia's own palette.
   Loaded after style.css so it can override the base rules.
   ========================================================================== */

/* ---------------------------------------------------------- keyframes --- */
@keyframes gv-float     { 0%,100% { transform: translateY(0); }      50% { transform: translateY(-22px); } }
@keyframes gv-float-sm  { 0%,100% { transform: translateY(0); }      50% { transform: translateY(-11px); } }
@keyframes gv-drift     { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(24px,-18px) scale(1.06); } }
@keyframes gv-spin      { to { transform: rotate(360deg); } }
@keyframes gv-spin-rev  { to { transform: rotate(-360deg); } }
@keyframes gv-pulse     { 0% { transform: scale(1); opacity: .5; } 70% { transform: scale(1.7); opacity: 0; } 100% { opacity: 0; } }
@keyframes gv-grad      { to { background-position: 200% center; } }
@keyframes gv-marquee   { to { transform: translateX(-50%); } }
@keyframes gv-bob-x     { 0%,100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@keyframes gv-fade-in   { from { opacity: 0; } to { opacity: 1; } }

/* ========================================================== preloader === */
/* Never shown unless JS is running — otherwise a script failure would leave
   the curtain covering the site permanently. */
.preloader { display: none; }

.js .preloader {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; gap: 26px;
  align-content: center;
  background: #fff;
  transition: opacity .5s ease, visibility .5s;
}
.preloader.is-done { opacity: 0; visibility: hidden; }

.preloader__mark { position: relative; display: grid; place-items: center; }
.preloader__mark img { height: 42px; width: auto; position: relative; z-index: 1; }
.preloader__mark::before,
.preloader__mark::after {
  content: ''; position: absolute;
  width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid var(--green);
  animation: gv-pulse 2s ease-out infinite;
}
.preloader__mark::after { animation-delay: 1s; }

.preloader__bar {
  width: 190px; height: 3px; border-radius: 3px;
  background: var(--line); overflow: hidden; position: relative;
}
.preloader__bar::after {
  content: ''; position: absolute; inset: 0;
  background: var(--grad);
  transform: translateX(-100%);
  animation: gv-marquee 1.1s ease-in-out infinite alternate;
}

/* ================================================== scroll progress ===== */
.scroll-progress {
  position: fixed; top: 0; left: 0; z-index: 120;
  height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: left;
  background: var(--grad);
  pointer-events: none;
}

/* ========================================================= side dock ==== */
.dock {
  position: fixed; right: 0; top: 50%; z-index: 85;
  transform: translateY(-50%);
  display: flex; flex-direction: column; gap: 1px;
  border-radius: 14px 0 0 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.dock a {
  position: relative;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: #fff; color: var(--navy);
  transition: background .25s ease, color .25s ease;
}
.dock a:hover { background: var(--grad); color: #fff; }
.dock a svg { width: 18px; height: 18px; }
.dock a::after {
  content: attr(data-tip);
  position: absolute; right: 100%; top: 50%;
  transform: translate(8px, -50%);
  margin-right: 10px;
  background: var(--navy-deep); color: #fff;
  font-family: var(--font-head); font-size: .78rem; font-weight: 500;
  padding: 6px 12px; border-radius: 8px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.dock a:hover::after { opacity: 1; transform: translate(0, -50%); }

@media (max-width: 900px) { .dock { display: none; } }

/* ==================================================== script eyebrow ==== */
.script {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Caveat', var(--font-head), cursive;
  font-size: clamp(1.5rem, 2.5vw, 1.95rem);
  font-weight: 700; line-height: 1;
  margin-bottom: 14px;
  background: linear-gradient(135deg, #ff5e00 0%, #e6007e 50%, #8a2be2 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gv-grad 5s linear infinite;
}
.script::before {
  content: ''; width: 20px; height: 20px; flex: none;
  background: linear-gradient(135deg, #ff5e00 0%, #e6007e 100%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  animation: gv-spin 9s linear infinite;
}
.section-head--center .script,
.page-hero .script { justify-content: center; }

/* on dark surfaces light up the script font */
.page-hero .script,
.section--navy .script,
.cta-band .script {
  background-image: linear-gradient(120deg, #ff66c4 0%, #ff5e00 50%, #ffffff 100%);
}
.page-hero .script::before,
.section--navy .script::before,
.cta-band .script::before {
  background: linear-gradient(120deg, #ff66c4, #ff5e00);
}

/* the base .eyebrow rule is still available as the compact, uppercase variant */

/* ==================================================== gradient text ===== */
.grad-text {
  background: linear-gradient(90deg, #ff5e00 0%, #e6007e 50%, #8a2be2 100%);
  background-size: 200% auto;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gv-grad 6s linear infinite;
}
.section--navy .grad-text,
.page-hero .grad-text,
.cta-band .grad-text {
  background-image: linear-gradient(120deg, #ff66c4 0%, #ff8c42 45%, #ffffff 100%);
}

/* ================================================= halftone dot field === */
.dots-field {
  position: absolute; pointer-events: none;
  background-image: radial-gradient(currentColor 1.5px, transparent 1.6px);
  background-size: 16px 16px;
  color: var(--plum);
  opacity: .13;
}
.dots-field--tr { width: 190px; height: 130px; top: 40px; right: 30px; }
.dots-field--bl { width: 160px; height: 110px; bottom: 46px; left: 24px; }
.section--navy .dots-field { color: #fff; opacity: .16; }

/* ==================================================== floating blobs ==== */
.hero__blob--1 { animation: gv-drift 13s ease-in-out infinite; }
.hero__blob--2 { animation: gv-drift 17s ease-in-out infinite reverse; }

.deco-ring {
  position: absolute; pointer-events: none;
  border-radius: 50%;
  border: 1.5px dashed rgba(230, 0, 126, .22);
}
.deco-ring--lg { width: 300px; height: 300px; animation: gv-spin 34s linear infinite; }
.deco-ring--sm { width: 150px; height: 150px; border-style: solid; border-color: rgba(138, 43, 226, .35); animation: gv-spin-rev 22s linear infinite; }

.deco-dot {
  position: absolute; pointer-events: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--grad-primary);
  animation: gv-float-sm 6s ease-in-out infinite;
}

/* ================================================ hero media treatment == */
.hero__media { isolation: isolate; }
.hero__media::before {
  /* rounded gradient plate sitting behind the photo, like the reference */
  content: ''; position: absolute;
  inset: -18px -18px 34px 26px;
  border-radius: 190px 28px 190px 28px;
  background: linear-gradient(135deg, #ff5e00 0%, #e6007e 40%, #8a2be2 80%, #00c9ff 100%);
  opacity: .28;
  z-index: -1;
  animation: gv-float 9s ease-in-out infinite;
}
.hero__media img { position: relative; z-index: 1; }
.hero__media::after {
  /* diagonal colour wash across the photo */
  content: ''; position: absolute; inset: 0;
  border-radius: var(--radius-lg);
  background: linear-gradient(128deg, rgba(230,0,126,.22) 0%, rgba(230,0,126,0) 38%, rgba(27,2,26,0) 62%, rgba(27,2,26,.32) 100%);
  mix-blend-mode: multiply;
  pointer-events: none; z-index: 2;
}
.hero__badge { z-index: 3; animation: gv-float-sm 5.5s ease-in-out infinite; }
.hero__badge-icon svg { animation: gv-float-sm 3.4s ease-in-out infinite; }

/* ==================================================== wave divider ====== */
.wave {
  position: relative; line-height: 0;
  margin-bottom: -1px;
  color: var(--surface-2);
}
/* must match the background of the band it flows into, or the join shows */
.wave--to-navy { color: var(--plum-deep); }
.wave--flip { transform: rotate(180deg); margin: -1px 0 0; }
.wave svg { display: block; width: 100%; height: 78px; fill: currentColor; }

/* ======================================================== marquee ======= */
.marquee { overflow: hidden; }
.marquee .shell { max-width: none; padding-inline: 0; }
.marquee__inner {
  display: flex; flex-wrap: nowrap; justify-content: flex-start;
  width: max-content; gap: 0;
  animation: gv-marquee 34s linear infinite;
}
.marquee:hover .marquee__inner { animation-play-state: paused; }
.marquee__item {
  padding-inline: 30px;
  flex: none;
  transition: color .25s ease;
}
.marquee__item:hover { color: var(--plum); }
.marquee__item::after {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--pink); margin-left: 30px; flex: none;
}

/* ================================================ entrance animations === */
/* Directional entrance animations matching the Proactive reference style:
   Text elements slide up with smooth opacity fade-in,
   Image sections scale and slide in dynamically from the sides. */
.js .reveal {
  opacity: 0;
  transform: translateY(38px);
  transition: opacity 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms),
              transform 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms),
              filter 0.95s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms);
  will-change: transform, opacity;
}

/* ==================================== OPEN RIGHT IMAGE REVEAL ANIMATIONS === */
/* All images across the website open smoothly from LEFT to RIGHT on scroll reveal */
.js .hero__media.reveal,
.js .split__media.reveal,
.js .quote-wrap .split__media.reveal,
.js .solution-card.reveal .solution-card__media,
.js .card.reveal .card__media,
.js img.reveal,
.js .reveal-img.reveal {
  position: relative;
  overflow: hidden;
  clip-path: inset(0 100% 0 0); /* curtain mask hidden from right, opens to the right */
  opacity: 0;
  transform: none;
  filter: none;
  transition: clip-path 1.15s cubic-bezier(0.19, 1, 0.22, 1) var(--rd, 0ms),
              opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1) var(--rd, 0ms);
  will-change: clip-path, opacity;
}

/* Smooth zoom-out effect for the image inside during open-right reveal */
.js .hero__media.reveal img,
.js .split__media.reveal img,
.js .quote-wrap .split__media.reveal img,
.js .solution-card.reveal .solution-card__media img,
.js .card.reveal .card__media img,
.js img.reveal,
.js .reveal-img.reveal img {
  transform: scale(1.28) translateX(-4%);
  transition: transform 1.25s cubic-bezier(0.19, 1, 0.22, 1) var(--rd, 0ms);
  will-change: transform;
}

/* Text Headings Entrance Animation */
.js .section-head.reveal h2,
.js .section-head.reveal p,
.js .section-head.reveal .script,
.js .hero__content.reveal h1,
.js .hero__content.reveal p {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1) var(--rd, 0ms);
}

/* Revealed State: Curtain opens to 100% right, image un-zooms */
.js .is-in,
.js .reveal.is-in,
.js .hero__media.is-in,
.js .split__media.is-in,
.js .solution-card.is-in .solution-card__media,
.js .card.is-in .card__media,
.js img.is-in,
.js .reveal-img.is-in,
.js .is-in h1,
.js .is-in h2,
.js .is-in p,
.js .is-in .script {
  clip-path: inset(0 0 0 0) !important;
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

.js .is-in img,
.js .reveal.is-in img,
.js .hero__media.is-in img,
.js .split__media.is-in img,
.js .solution-card.is-in .solution-card__media img,
.js .card.is-in .card__media img,
.js img.is-in,
.js .reveal-img.is-in img {
  transform: scale(1) translateX(0) !important;
}

/* ==================================================== hover polish ====== */
.card__icon, .step__badge, .contact-item__icon, .counter__icon {
  transition: transform .38s cubic-bezier(.34,1.56,.64,1), background .28s ease, color .28s ease;
}
.card:hover .card__icon      { transform: rotate(-8deg) scale(1.08); }
.step:hover .step__badge     { transform: rotate(8deg) scale(1.08); }
.contact-item:hover .contact-item__icon { transform: rotate(-8deg) scale(1.08); }

.card { will-change: transform; }
.card::before {
  /* soft gradient glow that fades in behind the card content */
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(320px 200px at 50% 0%, rgba(48,188,139,.10), transparent 70%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.card:hover::before { opacity: 1; }

.counter { transition: transform .3s ease, background .3s ease, border-color .3s ease; }
.counter:hover { transform: translateY(-6px); background: rgba(255,255,255,.09); border-color: rgba(48,188,139,.45); }

.pill { transition: transform .25s ease, background .25s ease, border-color .25s ease, color .25s ease; }
.pill:hover { transform: translateY(-3px); background: var(--green-tint); border-color: var(--green); color: var(--navy); }

.tick-list li { transition: transform .25s ease; }
.tick-list li:hover { transform: translateX(6px); }
.tick-list svg { transition: transform .3s cubic-bezier(.34,1.56,.64,1); }
.tick-list li:hover svg { transform: scale(1.2) rotate(-10deg); }

.btn--primary, .btn--green { background-size: 200% auto; transition: background-position .5s ease, transform .22s ease, box-shadow .22s ease; }
.btn--primary:hover, .btn--green:hover { background-position: right center; }

.footer-links a, .footer-contact a { transition: color .2s ease, padding-left .2s ease; }

/* image zoom inside media frames */
.split__media img, .hero__media img { transition: transform .7s cubic-bezier(.22,.8,.3,1); }
.split__media:hover img { transform: scale(1.035); }

/* ================================================== sticky header ======= */
.site-header { transition: transform .35s ease, box-shadow .25s ease, padding .25s ease, background .25s ease; }
.site-header.is-hidden { transform: translateY(-120%); }
.navbar { transition: box-shadow .3s ease, background .3s ease; }
.brand img { transition: transform .3s ease; }
.brand:hover img { transform: scale(1.04); }

/* nav underline sweep */
.nav__list a { position: relative; }
.nav__list a::after {
  content: ''; position: absolute; left: 18px; right: 18px; bottom: 5px;
  height: 2px; border-radius: 2px; background: var(--green);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.nav__list a:hover::after { transform: scaleX(1); }
.nav__list a[aria-current="page"]::after { display: none; }

/* ================================================== page hero motion ==== */
.page-hero h1 { animation: gv-fade-in .9s .1s both; }
.page-hero p  { animation: gv-fade-in .9s .25s both; }
.page-hero .crumbs { animation: gv-fade-in .9s .4s both; }
.page-hero .script { animation: gv-grad 5s linear infinite, gv-fade-in .8s both; }

/* ==================================================== quote marks ======= */
.quote__mark { animation: gv-float-sm 6s ease-in-out infinite; }
.quote__btn svg { transition: transform .25s ease; }
.quote__btn:hover svg { transform: translateX(2px); }
.quote__btn[data-slider-prev]:hover svg { transform: translateX(-2px); }

/* ================================================== reduced motion ====== */
@media (prefers-reduced-motion: reduce) {
  .hero__blob--1, .hero__blob--2, .hero__media::before, .hero__badge,
  .hero__badge-icon svg, .deco-ring, .deco-dot, .quote__mark,
  .script, .script::before, .grad-text, .marquee__inner,
  .preloader__mark::before, .preloader__mark::after, .preloader__bar::after {
    animation: none !important;
  }
  .marquee__inner { animation: none !important; }
  .page-hero h1, .page-hero p, .page-hero .crumbs, .page-hero .script { animation: none !important; opacity: 1; }
  .scroll-progress { display: none; }
}

/* ======================================================= breakpoints ==== */
@media (max-width: 900px) {
  .hero__media::before { inset: -12px -12px 24px 16px; }
  .deco-ring--lg { width: 200px; height: 200px; }
  .wave svg { height: 48px; }
}