*, *::before, *::after { box-sizing: border-box; max-width: 100%; }
/* =============================================
   MLYN Technologies — Animation Stylesheet
   GPU-accelerated · 60fps · Accessible
   ============================================= */

/* ── SCROLL PROGRESS BAR ── */
#scroll-bar {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: linear-gradient(90deg, #0b5d3b 0%, #3cb371 55%, #c8a96e 100%);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 99999;
  pointer-events: none;
  box-shadow: 0 0 10px rgba(60,179,113,.55);
}

/* ── PAGE TRANSITION ── */
#pg-overlay {
  position: fixed; inset: 0;
  background: #0b5d3b;
  z-index: 99998;
  pointer-events: none;
  opacity: 1;
  transition: opacity .42s cubic-bezier(.4,0,.2,1);
}
#pg-overlay.pg-out { opacity: 0; }

/* ── CUSTOM CURSOR ── */
#ml-cursor {
  position: fixed; top: 0; left: 0;
  pointer-events: none;
  z-index: 99997;
  opacity: 0;
  transition: opacity .3s;
}
.c-dot {
  position: fixed; top: 0; left: 0;
  width: 7px; height: 7px;
  background: #3cb371;
  border-radius: 50%;
  will-change: transform;
  transition: width .2s, height .2s, background .2s;
}
.c-ring {
  position: fixed; top: 0; left: 0;
  width: 32px; height: 32px;
  border: 1.5px solid rgba(60,179,113,.55);
  border-radius: 50%;
  will-change: transform;
  transition: width .28s, height .28s, border-color .28s, background .28s;
}
#ml-cursor.cur-hover .c-dot { width: 11px; height: 11px; background: #c8a96e; }
#ml-cursor.cur-hover .c-ring { width: 46px; height: 46px; border-color: rgba(200,169,110,.45); background: rgba(200,169,110,.05); }

/* ── SCROLL REVEAL ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .78s cubic-bezier(.16,1,.3,1),
              transform .78s cubic-bezier(.16,1,.3,1);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-42px); }
[data-reveal="right"] { transform: translateX(42px); }
[data-reveal="zoom"]  { transform: scale(.87); }
[data-reveal="flip"]  { transform: perspective(600px) rotateX(16deg); opacity: 0; }
[data-reveal].revealed { opacity: 1; transform: none; }

/* ── GRADIENT ANIMATED TEXT ── */
.grad-text {
  background: linear-gradient(120deg, #0b5d3b 0%, #3cb371 42%, #c8a96e 72%, #0b5d3b 100%);
  background-size: 260% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gShift 5.5s ease infinite;
}
@keyframes gShift {
  0%   { background-position: 0% center; }
  50%  { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* ── NAV HOVER PILL ── */
#nav-hover-pill {
  position: absolute;
  top: 0; height: 100%;
  background: rgba(11,93,59,.07);
  border-radius: 0;
  opacity: 0;
  pointer-events: none;
  transition: left .26s cubic-bezier(.4,0,.2,1),
              width .26s cubic-bezier(.4,0,.2,1),
              opacity .18s ease;
  z-index: -1;
}

/* ── SMART NAV HIDE/SHOW ── */
.main-nav {
  transition: transform .38s cubic-bezier(.4,0,.2,1),
              box-shadow .3s ease,
              background .3s ease,
              backdrop-filter .3s ease !important;
  will-change: transform;
}

/* Top-bar scrolled — slight compress when scrolled */
.top-bar.scrolled-compact {
  padding: 6px 0;
}

/* ── HERO PARTICLE CANVAS ── */
#hero-cv {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.hero > .container { position: relative; z-index: 2; }

/* Prevent reveal animations from causing horizontal scroll on mobile */
.section, .section-sm, .section-pale, .page-hero, .cta-banner,
.hero, [class*="section"] {
  overflow-x: clip;
}
.hero-float-1, .hero-float-2 { will-change: transform; }

/* ── HERO ENTRANCE ANIMATIONS ── */
.hero-badge          { animation: fromLeft .85s cubic-bezier(.16,1,.3,1) .05s both; }
.animate-fade-up     { animation: fadeUp   .9s  cubic-bezier(.16,1,.3,1) both; }
.animate-fade-right  { animation: fromRight 1s  cubic-bezier(.16,1,.3,1) .35s both; }
.hero-image-card,
.hero-showcase-card  { animation: fromRight 1s  cubic-bezier(.16,1,.3,1) .35s both; }

@keyframes fromLeft   { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:none; } }
@keyframes fromRight  { from { opacity:0; transform:translateX(36px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes fadeUp     { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:none; } }

/* ── TOP BAR SLIDE IN ── */
.top-bar  { animation: slideDown .45s ease both; }
.main-nav { animation: slideDown .5s ease .05s both; }
@keyframes slideDown { from { transform:translateY(-100%); opacity:0; } to { transform:none; opacity:1; } }

/* ── 3D CARD BASE ── */
.product-card,
.team-card,
.service-plan-card,
.spec-card,
.advantage-item,
.hsc-panel,
.hsc-main-img,
.hsc-info-card {
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}

/* ── PRODUCT CARD HOVER POLISH ── */
.product-card {
  transition: transform .5s cubic-bezier(.16,1,.3,1),
              box-shadow .5s ease,
              border-color .3s ease;
}
.product-card::after {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(60,179,113,.07) 0%, transparent 55%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.product-card:hover::after { opacity: 1; }

/* ── TEAM CARD AVATAR DEPTH ── */
.team-card { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; }
.team-card .team-avatar { transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .4s ease; }
.team-card:hover .team-avatar { transform: scale(1.07) translateZ(14px); box-shadow: 0 10px 32px rgba(11,93,59,.22); }

/* ── FEATURED PLAN BREATHING GLOW ── */
.service-plan-card.featured { animation: featGlow 3.2s ease-in-out infinite; }
@keyframes featGlow {
  0%,100% { box-shadow: 0 8px 32px rgba(60,179,113,.18); }
  50%      { box-shadow: 0 18px 52px rgba(60,179,113,.34), 0 0 0 1px rgba(60,179,113,.18); }
}

/* ── HSC PANEL PULSE ── */
.hsc-panel {
  transition: border-color .55s ease, background .55s ease,
              transform .45s cubic-bezier(.16,1,.3,1), box-shadow .45s ease;
}
.hsc-panel.hsc-lit {
  border-color: rgba(60,179,113,.55) !important;
  background: rgba(60,179,113,.11) !important;
  box-shadow: 0 0 22px rgba(60,179,113,.14), inset 0 0 14px rgba(60,179,113,.06);
}

/* ── ADVANTAGE / SPEC HOVER ── */
.advantage-item,
.spec-card {
  transition: transform .42s cubic-bezier(.16,1,.3,1),
              box-shadow .42s ease, border-color .3s ease;
}

/* ── PARTNER LOGO LIFT ── */
.partner-logo {
  transition: border-color .3s ease, color .3s ease,
              transform .42s cubic-bezier(.16,1,.3,1), box-shadow .42s ease;
}
.partner-logo:hover { transform: translateY(-5px) scale(1.05); box-shadow: 0 10px 28px rgba(11,93,59,.12); }

/* ── GLOBAL FLAG CARDS ── */
.section-green [style*="border-radius:16px"] {
  transition: transform .4s cubic-bezier(.16,1,.3,1), background .3s ease, border-color .3s ease;
}
.section-green [style*="border-radius:16px"]:hover {
  transform: translateY(-7px) scale(1.04);
  background: rgba(255,255,255,.1) !important;
  border-color: rgba(60,179,113,.42) !important;
}

/* ── WHATSAPP RIPPLE ── */
.wa-rip {
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #25d366;
  animation: waRip 2.6s ease-out infinite;
  z-index: -1;
}
@keyframes waRip {
  0%   { transform: scale(1);   opacity: .6; }
  70%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* ── IMAGE LAZY FADE ── */
.img-lazy  { opacity: 0; transition: opacity .65s ease; will-change: opacity; }
.img-vis   { opacity: 1; }

/* ── ISO BADGE FLOAT ── */
.iso-badge { animation: floatY 4.2s ease-in-out infinite; }
@keyframes floatY { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }

/* ── DIVIDER GROW ON REVEAL ── */
.divider { transform-origin: left; }
[data-reveal].revealed .divider { animation: divGrow .85s cubic-bezier(.16,1,.3,1) .28s both; }
@keyframes divGrow { from{transform:scaleX(0);opacity:0} to{transform:scaleX(1);opacity:1} }

/* ── BUTTON PRESS ── */
.btn-primary-custom:active,
.btn-green-outline:active,
.btn-outline-custom:active,
.nav-cta:active { transform: scale(.97) !important; transition: transform .1s ease !important; }

/* ── NAVBAR LOGO HOVER ── */
.navbar-brand { transition: transform .4s cubic-bezier(.16,1,.3,1); }
.navbar-brand:hover { transform: scale(1.04); }

/* ── FOOTER LINK SLIDE ── */
.footer-links a { display: inline-block; transition: color .3s ease, padding-left .3s cubic-bezier(.16,1,.3,1); }
.footer-links a:hover { padding-left: 8px; color: var(--light-green); }

/* ── HERO STATS ── */
.hero-stat-num { transition: transform .3s ease; }
.hero-stat-num:hover { transform: scale(1.08); }

/* ── SCROLL PADDING FOR NAV ── */
html { scroll-behavior: smooth; scroll-padding-top: 76px; overflow-x: hidden; } /* nav height only, top-bar hides */

/* ── FOCUS RING ── */
:focus-visible { outline: 2px solid #3cb371; outline-offset: 3px; border-radius: 4px; }

/* ── ACCESSIBILITY — REDUCE MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  [data-reveal] { opacity:1 !important; transform:none !important; }
  #ml-cursor, #hero-cv, .wa-rip { display:none !important; }
  .grad-text { animation:none !important; }
  #pg-overlay { display:none !important; }
}