/* ============================================================
   MRGENIX — ANIMATIONS.CSS
   Services, Cards, SVG Animations, Hover Effects
   ============================================================ */

/* ============================================================
   SERVICES SECTION
   ============================================================ */
#services {
  background: var(--primary-dark);
}
.services-header { max-width: 600px; margin-bottom: 3.5rem; }
.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media(max-width:960px)  { .services-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:560px)  { .services-grid { grid-template-columns: 1fr; } }

/* Service Card */
.svc-card {
  background: var(--primary-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease, border-color 0.4s;
  cursor: default;
}
.svc-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-dark), var(--accent), var(--accent-light));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s ease;
}
.svc-card::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 0%, rgba(255,107,53,0.07) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.4s;
}
.svc-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,107,53,0.25);
  border-color: rgba(255,107,53,0.3);
}
.svc-card:hover::before { transform: scaleX(1); }
.svc-card:hover::after  { opacity: 1; }

.svc-num {
  position: absolute; top: 1.5rem; right: 1.8rem;
  font-family: var(--font-head);
  font-size: 3.5rem; font-weight: 900;
  color: rgba(255,107,53,0.07);
  line-height: 1;
  transition: color 0.4s;
}
.svc-card:hover .svc-num { color: rgba(255,107,53,0.14); }

.svc-anim-wrap {
  width: 80px; height: 80px;
  margin-bottom: 1.4rem;
  position: relative; z-index: 1;
}

.svc-card h3 {
  font-family: var(--font-head);
  font-size: 1.3rem; font-weight: 700;
  color: var(--white); margin-bottom: 0.8rem;
  position: relative; z-index: 1;
}
.svc-card p {
  color: var(--white3); font-size: 0.9rem;
  line-height: 1.8; position: relative; z-index: 1;
}
.svc-link {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--accent); font-size: 0.78rem;
  font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; margin-top: 1.2rem;
  opacity: 0; transform: translateX(-10px);
  transition: opacity 0.3s, transform 0.3s;
  position: relative; z-index: 1;
}
.svc-card:hover .svc-link { opacity:1; transform:translateX(0); }

/* ============================================================
   SVG SERVICE ANIMATIONS
   ============================================================ */

/* ── 1. LEAD GENERATION — Funnel ── */
.anim-funnel { width:80px; height:80px; }
.funnel-body { fill: none; stroke: var(--accent); stroke-width: 2; opacity: 0.8; }
.funnel-flow {
  fill: var(--accent); opacity: 0;
  animation: funnelDrop 2s ease-in-out infinite;
}
.funnel-flow:nth-child(2) { animation-delay: 0.3s; }
.funnel-flow:nth-child(3) { animation-delay: 0.6s; }
@keyframes funnelDrop {
  0%   { opacity: 0; transform: translateY(-8px); }
  30%  { opacity: 0.9; }
  80%  { opacity: 0.6; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(5px); }
}
.funnel-pulse {
  fill: none; stroke: rgba(255,107,53,0.3); stroke-width: 1;
  animation: funnelPulse 2s ease-in-out infinite;
}
@keyframes funnelPulse {
  0%,100% { stroke-width:1; opacity:0.3; }
  50%      { stroke-width:3; opacity:0.8; }
}
.svc-card:hover .funnel-flow { animation-play-state: running; }

/* ── 2. DIGITAL MARKETING — Globe + Nodes ── */
.anim-globe { width:80px; height:80px; }
.globe-circle {
  fill: none; stroke: var(--accent); stroke-width: 1.5;
  animation: globeGlow 3s ease-in-out infinite;
}
@keyframes globeGlow {
  0%,100% { stroke-opacity: 0.6; r: 28; }
  50%      { stroke-opacity: 1;   r: 30; filter: drop-shadow(0 0 6px var(--accent)); }
}
.globe-orbit {
  fill: none; stroke: rgba(255,107,53,0.3); stroke-width: 1;
  stroke-dasharray: 4 4;
  animation: orbitSpin 4s linear infinite;
  transform-origin: 40px 40px;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }
.globe-node {
  fill: var(--accent);
  animation: nodePulse 2s ease-in-out infinite;
}
.globe-node:nth-child(2) { animation-delay: 0.4s; }
.globe-node:nth-child(3) { animation-delay: 0.8s; }
.globe-node:nth-child(4) { animation-delay: 1.2s; }
@keyframes nodePulse {
  0%,100% { opacity:0.5; transform:scale(1); }
  50%      { opacity:1;   transform:scale(1.4); }
}
.globe-line {
  stroke: rgba(255,107,53,0.4); stroke-width: 1;
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: lineDraw 2s ease-in-out infinite;
}
@keyframes lineDraw {
  0%   { stroke-dashoffset: 40; opacity:0; }
  50%  { stroke-dashoffset: 0;  opacity:1; }
  100% { stroke-dashoffset:-40; opacity:0; }
}

/* ── 3. SALES ENABLEMENT — Handshake + Graph ── */
.anim-sales { width:80px; height:80px; }
.hand-l, .hand-r {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round;
}
.hand-l { animation: handL 2.5s ease-in-out infinite; }
.hand-r { animation: handR 2.5s ease-in-out infinite; }
@keyframes handL {
  0%,100% { transform: translateX(0); }
  40%,60% { transform: translateX(4px); }
}
@keyframes handR {
  0%,100% { transform: translateX(0); }
  40%,60% { transform: translateX(-4px); }
}
.graph-line {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  animation: graphDraw 2s ease-out 0.5s infinite;
}
@keyframes graphDraw {
  0%   { stroke-dashoffset: 80; }
  60%  { stroke-dashoffset: 0; stroke: var(--accent); }
  100% { stroke-dashoffset: 0; stroke: var(--accent-light); }
}

/* ── 4. BRAND STRATEGY — Shield ── */
.anim-shield { width:80px; height:80px; }
.shape-scatter {
  fill: rgba(255,107,53,0.4);
  animation: shapeGather 3s ease-in-out infinite;
}
.shape-scatter:nth-child(2) { animation-delay: 0.2s; }
.shape-scatter:nth-child(3) { animation-delay: 0.4s; }
@keyframes shapeGather {
  0%   { opacity:0.3; transform: translate(0,0) scale(1) rotate(0deg); }
  50%  { opacity:0.8; transform: translate(2px,-2px) scale(1.1) rotate(10deg); }
  100% { opacity:0.3; transform: translate(0,0) scale(1) rotate(0deg); }
}
.shield-path {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: shieldDraw 2s ease-out 0.5s infinite;
}
@keyframes shieldDraw {
  0%   { stroke-dashoffset:160; opacity:0; }
  20%  { opacity:1; }
  60%  { stroke-dashoffset:0; }
  80%  { stroke-dashoffset:0; filter:drop-shadow(0 0 8px var(--accent)); }
  100% { stroke-dashoffset:0; filter:none; opacity:0.8; }
}
.shield-star {
  fill: var(--accent); opacity:0;
  animation: starAppear 2s ease 1s infinite;
}
@keyframes starAppear {
  0%,40% { opacity:0; transform:scale(0); }
  60%,80% { opacity:1; transform:scale(1); }
  100%    { opacity:0; transform:scale(1.2); }
}

/* ── 5. WEBSITE & LANDING — Browser ── */
.anim-browser { width:80px; height:80px; }
.browser-frame { fill: none; stroke: var(--accent); stroke-width: 2; rx: 4; }
.browser-bar   { fill: rgba(255,107,53,0.2); }
.browser-dot   { fill: var(--accent); }
.browser-hero-block {
  fill: rgba(255,107,53,0.3);
  transform: scaleY(0); transform-origin: top;
  animation: blockReveal 2.5s ease-in-out infinite;
}
.browser-text-block {
  fill: rgba(255,255,255,0.15);
  transform: scaleX(0); transform-origin: left;
  animation: blockReveal 2.5s ease-in-out 0.3s infinite;
}
.browser-text-block2 {
  fill: rgba(255,255,255,0.1);
  transform: scaleX(0); transform-origin: left;
  animation: blockReveal 2.5s ease-in-out 0.5s infinite;
}
.browser-cta {
  fill: var(--accent); opacity:0;
  animation: ctaAppear 2.5s ease-in-out 0.7s infinite;
}
@keyframes blockReveal {
  0%,10% { transform: scale(0); opacity:0; }
  40%,90% { transform: scale(1); opacity:1; }
  100%    { transform: scale(1); opacity:0; }
}
@keyframes ctaAppear {
  0%,50% { opacity:0; }
  70%,90% { opacity:1; }
  100%    { opacity:0; }
}

/* ── 6. EMAIL CAMPAIGN — Flying Envelope ── */
.anim-email { width:80px; height:80px; overflow:visible; }
.env-main {
  fill: none; stroke: var(--accent); stroke-width: 2;
  animation: envFly 3s ease-in-out infinite;
}
.env-flap  { fill: none; stroke: var(--accent); stroke-width: 1.5; }
.env-wing-l, .env-wing-r {
  fill: rgba(255,107,53,0.4);
  animation: wingFlap 0.5s ease-in-out infinite alternate;
}
.env-wing-r { animation-delay: 0.1s; }
@keyframes envFly {
  0%   { transform: translate(0,0) rotate(-5deg); }
  25%  { transform: translate(6px,-8px) rotate(0deg); }
  50%  { transform: translate(12px,-4px) rotate(5deg); }
  75%  { transform: translate(8px,-10px) rotate(0deg); }
  100% { transform: translate(0,0) rotate(-5deg); }
}
@keyframes wingFlap {
  from { transform: scaleY(0.8); }
  to   { transform: scaleY(1.2); }
}
.env-mini {
  fill: none; stroke: rgba(255,107,53,0.6); stroke-width: 1.5;
  opacity: 0;
  animation: miniFly 3s ease-in-out infinite;
}
.env-mini:nth-child(2) { animation-delay: 0.6s; }
.env-mini:nth-child(3) { animation-delay: 1.2s; }
@keyframes miniFly {
  0%   { opacity:0; transform: translate(0,0) scale(0.5); }
  20%  { opacity:1; }
  80%  { opacity:0.7; transform: translate(var(--tx,10px), var(--ty,15px)) scale(0.8); }
  100% { opacity:0; }
}
.env-check {
  fill: none; stroke: var(--accent); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: checkDraw 3s ease-in-out infinite;
}
.env-check:nth-child(2) { animation-delay: 0.6s; }
.env-check:nth-child(3) { animation-delay: 1.2s; }
@keyframes checkDraw {
  0%,20%  { stroke-dashoffset:20; opacity:0; }
  60%,80% { stroke-dashoffset:0;  opacity:1; }
  100%    { stroke-dashoffset:0;  opacity:0; }
}

/* ============================================================
   ABOUT SECTION
   ============================================================ */
#about { background: var(--primary-mid); border-top: 1px solid var(--border); }
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
}
@media(max-width:860px) { .about-grid { grid-template-columns:1fr; gap:3rem; } }

.about-img-wrap { position: relative; }
.about-img-wrap img {
  width: 100%; height: 480px; object-fit: cover;
  border-radius: var(--radius-lg);
  display: block;
  filter: contrast(1.05);
}
.about-img-overlay {
  position: absolute; inset:0;
  background: linear-gradient(135deg, rgba(255,107,53,0.1) 0%, transparent 60%);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
}
.about-badge {
  position: absolute; bottom: -20px; right: -20px;
  background: var(--accent);
  color: var(--white);
  padding: 20px 24px; border-radius: var(--radius-lg);
  text-align: center;
  box-shadow: var(--shadow-accent);
  animation: badgeBounce 3s ease-in-out infinite;
}
@keyframes badgeBounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.about-badge-num {
  font-family: var(--font-head);
  font-size: 2.5rem; font-weight: 900;
  line-height: 1; display: block;
}
.about-badge-txt {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
}
@media(max-width:860px) { .about-badge { bottom:20px; right:20px; } }

.about-points { list-style:none; margin: 1.8rem 0; }
.about-points li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  color: var(--white2); font-size: 0.95rem;
  transition: color 0.2s, padding-left 0.2s;
}
.about-points li:last-child { border-bottom: none; }
.about-points li:hover { color: var(--white); padding-left: 4px; }
.about-points li::before {
  content: '';
  width: 6px; height: 6px; min-width: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-top: 8px;
  box-shadow: 0 0 8px rgba(255,107,53,0.5);
}

.mv-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; margin-top: 2rem;
}
@media(max-width:500px) { .mv-grid { grid-template-columns:1fr; } }
.mv-card {
  background: var(--primary-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  transition: border-color 0.3s, transform 0.3s;
}
.mv-card:hover { border-color: var(--accent); transform: translateY(-4px); }
.mv-card h4 {
  font-size: 1rem; font-weight: 700;
  color: var(--accent); margin-bottom: 0.6rem;
}
.mv-card p { color: var(--white3); font-size: 0.87rem; line-height: 1.7; }

/* ============================================================
   WHY CHOOSE US
   ============================================================ */
#why { background: var(--primary-dark); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media(max-width:900px) { .why-grid { grid-template-columns: repeat(2,1fr); } }
@media(max-width:480px) { .why-grid { grid-template-columns: 1fr; } }

.why-card {
  background: var(--primary-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: transform 0.4s, border-color 0.3s, box-shadow 0.4s;
}
.why-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--accent);
  box-shadow: 0 0 30px rgba(255,107,53,0.12);
}
.why-icon {
  width: 64px; height: 64px;
  background: rgba(255,107,53,0.1);
  border: 1px solid var(--border-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; margin: 0 auto 1.2rem;
  transition: background 0.3s, border-color 0.3s, transform 0.4s;
}
.why-card:hover .why-icon {
  background: rgba(255,107,53,0.2);
  border-color: var(--accent);
  transform: rotate(10deg) scale(1.1);
}
.why-card h3 {
  font-size: 1rem; font-weight: 700;
  color: var(--white); margin-bottom: 0.6rem;
}
.why-card p { color: var(--white3); font-size: 0.85rem; line-height: 1.7; }

/* ============================================================
   TESTIMONIALS
   ============================================================ */
#testimonials { background: var(--primary-mid); border-top:1px solid var(--border); overflow:hidden; }
.testi-wrap {
  overflow: hidden;
  margin-top: 2rem;
  mask-image: linear-gradient(90deg, transparent 0%, black 8%, black 92%, transparent 100%);
}
.testi-track {
  display: flex; gap: 24px;
  animation: testiScroll 35s linear infinite;
  width: max-content;
}
.testi-track:hover { animation-play-state: paused; }
@keyframes testiScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.testi-card {
  background: var(--primary-dark);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem;
  width: 320px; flex-shrink: 0;
  transition: border-color 0.3s;
}
.testi-card:hover { border-color: var(--accent); }
.testi-stars { color: var(--accent); font-size: 0.9rem; margin-bottom: 1rem; letter-spacing: 2px; }
.testi-text {
  color: var(--white2); font-size: 0.9rem;
  line-height: 1.8; margin-bottom: 1.5rem;
  font-style: italic;
}
.testi-author { display: flex; align-items: center; gap: 12px; }
.testi-av {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 1.2rem; font-weight: 900;
  color: var(--white);
}
.testi-name { font-weight: 700; color: var(--white); font-size: 0.9rem; }
.testi-role { color: var(--white3); font-size: 0.76rem; }

/* ============================================================
   CONTACT SECTION
   ============================================================ */
#contact { background: var(--primary-dark); border-top:1px solid var(--border); }
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem; align-items: start;
}
@media(max-width:860px) { .contact-grid { grid-template-columns:1fr; gap:3rem; } }

.contact-info h3 {
  font-size: 2rem; color: var(--white); margin-bottom: 1rem;
}
.contact-info h3 span { color: var(--accent); }
.contact-info > p { color: var(--white3); line-height: 1.8; margin-bottom: 2.5rem; }

.c-item {
  display: flex; gap: 16px; align-items: flex-start;
  margin-bottom: 1.2rem;
  padding: 16px;
  background: var(--primary-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 0.3s, transform 0.3s;
}
.c-item:hover { border-color: var(--accent); transform: translateX(6px); }
.c-icon {
  width: 46px; height: 46px; min-width: 46px;
  background: rgba(255,107,53,0.1);
  border: 1px solid var(--border-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  transition: background 0.3s, border-color 0.3s;
}
.c-item:hover .c-icon { background: rgba(255,107,53,0.2); border-color: var(--accent); }
.c-item h5 {
  color: var(--accent); font-size: 0.7rem;
  font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; margin-bottom: 4px;
}
.c-item p, .c-item a {
  color: var(--white2); font-size: 0.92rem;
  text-decoration: none; display: block; line-height: 1.6;
}
.c-item a:hover { color: var(--accent); }

/* Contact Form Card */
.form-card {
  background: var(--primary-mid);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 3rem;
}
.form-card h3 {
  font-size: 1.8rem; color: var(--white); margin-bottom: 0.4rem;
}
.form-card > p { color: var(--white3); font-size: 0.88rem; margin-bottom: 2rem; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media(max-width:580px) { .form-row { grid-template-columns: 1fr; } }
.form-group { margin-bottom: 16px; }
.form-group label {
  display: block;
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--accent); margin-bottom: 8px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%; padding: 13px 16px;
  background: var(--primary-dark);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  color: var(--white); font-family: var(--font-body);
  font-size: 0.93rem;
  transition: border-color 0.3s, box-shadow 0.3s;
  outline: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(255,107,53,0.12);
}
.form-group select option { background: var(--primary-mid); }
.form-group textarea { resize: vertical; min-height: 110px; }
#f-submit {
  width: 100%; padding: 15px;
  background: var(--accent);
  color: var(--white); font-weight: 800;
  font-size: 0.9rem; letter-spacing: 2px;
  text-transform: uppercase; border: none;
  border-radius: var(--radius); cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  position: relative; overflow: hidden;
  margin-top: 8px;
}
#f-submit::before {
  content: '';
  position: absolute; top:0; left:-100%; width:60%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  transition: left 0.5s;
}
#f-submit:hover { transform: translateY(-2px); box-shadow: var(--shadow-accent); background: var(--accent-dark); }
#f-submit:hover::before { left: 150%; }
#f-submit:disabled { opacity:0.6; cursor:not-allowed; transform:none; }
.f-ok { display:none; margin-top:14px; padding:14px; background:rgba(46,125,50,0.15); color:#81c784; border:1px solid rgba(129,199,132,0.3); border-radius:var(--radius); font-size:0.9rem; }
.f-er { display:none; margin-top:14px; padding:14px; background:rgba(198,40,40,0.15); color:#ef9a9a; border:1px solid rgba(239,154,154,0.3); border-radius:var(--radius); font-size:0.9rem; }
.f-ok.show,.f-er.show { display:block; }