/* ==========================================================================
   OzConsultant — reusable animation library
   Scroll reveals, load-in sequences, hover micro-interactions, counters.
   Add the utility classes below to any element on any page to reuse.
   ========================================================================== */

/* ---- scroll reveal base --------------------------------------------- */
.reveal{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
  will-change:opacity, transform;
}
.reveal.is-visible{opacity:1;transform:translateY(0)}

.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal-left.is-visible{opacity:1;transform:translateX(0)}

.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal-right.is-visible{opacity:1;transform:translateX(0)}

.reveal-scale{opacity:0;transform:scale(.9);transition:opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1)}
.reveal-scale.is-visible{opacity:1;transform:scale(1)}

.reveal-fade{opacity:0;transition:opacity .8s ease}
.reveal-fade.is-visible{opacity:1}

/* staggered delays for groups of reveal items */
.reveal-delay-1.is-visible{transition-delay:.08s}
.reveal-delay-2.is-visible{transition-delay:.16s}
.reveal-delay-3.is-visible{transition-delay:.24s}
.reveal-delay-4.is-visible{transition-delay:.32s}
.reveal-delay-5.is-visible{transition-delay:.4s}
.reveal-delay-6.is-visible{transition-delay:.48s}

/* ---- load-in sequence (hero) ----------------------------------------- */
.load-in{
  opacity:0;
  transform:translateY(22px);
  animation:dcLoadIn .8s cubic-bezier(.22,.61,.36,1) forwards;
}
.load-in-1{animation-delay:.05s}
.load-in-2{animation-delay:.18s}
.load-in-3{animation-delay:.31s}
.load-in-4{animation-delay:.44s}
.load-in-5{animation-delay:.57s}

@keyframes dcLoadIn{
  to{opacity:1;transform:translateY(0)}
}

/* ---- gentle infinite float (badges, floating cards) ------------------ */
.float-anim{animation:dcFloat 4.5s ease-in-out infinite}
@keyframes dcFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}

/* ---- hover micro-interactions ---------------------------------------- */
.hover-lift{transition:transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease}
.hover-lift:hover{transform:translateY(-8px)}

.hover-scale{transition:transform .25s cubic-bezier(.22,.61,.36,1)}
.hover-scale:hover{transform:scale(1.06)}

.hover-glow{transition:box-shadow .3s ease, transform .3s ease}
.hover-glow:hover{box-shadow:0 12px 28px rgba(240,88,54,0.28);transform:translateY(-2px)}

/* underline sweep for text links */
.link-underline{position:relative}
.link-underline::after{
  content:"";
  position:absolute;
  left:0;bottom:-3px;
  width:0;height:2px;
  background:#f05836;
  transition:width .3s cubic-bezier(.22,.61,.36,1);
}
.link-underline:hover::after{width:100%}

/* nav link underline (grows from center) */
.nav-link-anim{position:relative}
.nav-link-anim::after{
  content:"";
  position:absolute;
  left:50%;bottom:10px;
  width:0;height:2px;
  background:#f05836;
  transform:translateX(-50%);
  transition:width .3s cubic-bezier(.22,.61,.36,1);
}
.nav-link-anim:hover::after{width:24px}

/* animated CTA buttons — subtle sweep highlight */
.btn-anim{position:relative;overflow:hidden;transition:transform .25s ease, box-shadow .25s ease}
.btn-anim::before{
  content:"";
  position:absolute;
  top:0;left:-120%;
  width:60%;height:100%;
  background:linear-gradient(120deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-20deg);
  transition:left .55s ease;
}
.btn-anim:hover::before{left:130%}
.btn-anim:hover{transform:translateY(-3px);box-shadow:0 14px 28px rgba(3,39,74,0.18)}

/* rotating / pulsing logo mark */
.logo-anim{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.logo-anim:hover{transform:rotate(135deg) scale(1.08)}

/* icon circle pop on hover (IT service icons) */
.icon-pop{transition:transform .3s cubic-bezier(.34,1.56,.64,1), background-color .3s ease}
.icon-pop:hover{transform:scale(1.12) rotate(-4deg)}

/* dropdown menus — fade + slide instead of hard toggle */
.dc-dropdown{
  opacity:0;
  transform:translateY(-8px);
  transition:opacity .22s ease, transform .22s ease;
  pointer-events:none;
}
.dc-navitem:hover .dc-dropdown{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.dc-dditem{transition:background-color .2s ease, padding-left .2s ease}
.dc-dditem:hover{padding-left:20px}

/* industries dropdown (under RESOURCES) */
.dc-dditem-dark{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:8px;color:oklch(25% 0.012 260);font-size:13.5px;font-weight:500;transition:background-color .2s ease, color .2s ease}
.dc-dditem-dark:hover{background:oklch(96% 0.006 85);color:#f05836}

/* footer links — arrow slide-in on hover */
.footer-link{display:inline-block;transition:transform .25s ease, color .25s ease;position:relative}
.footer-link:hover{transform:translateX(5px);color:#f05836}

/* mobile menu slide-down */
#mobile-menu{
  max-height:0;
  overflow:hidden;
  padding-top:0;
  padding-bottom:0;
  transition:max-height .35s ease, padding .35s ease;
}
#mobile-menu.open{
  max-height:4000px;
  overflow-y:auto;
  padding-top:12px;
  padding-bottom:24px;
}

/* mobile nav accordions (expandable dropdown equivalents) */
.dc-mobile-acc{border-bottom:1px solid oklch(28% 0.02 260)}
.dc-mobile-acc summary{
  list-style:none;
  cursor:pointer;
  padding:14px 4px;
  font-size:14px;
  font-weight:600;
  letter-spacing:0.5px;
  color:oklch(90% 0.008 90);
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.dc-mobile-acc summary::-webkit-details-marker{display:none}
.dc-mobile-acc summary::marker{content:""}
.dc-mobile-acc-active summary{font-weight:700;color:#f05836}
.dc-mobile-acc summary .dc-acc-arrow{font-size:11px;opacity:0.7;transition:transform .2s ease;flex:none;margin-left:8px}
.dc-mobile-acc[open] summary .dc-acc-arrow{transform:rotate(180deg)}
.dc-mobile-acc-panel{display:flex;flex-direction:column;padding:2px 0 14px 12px}
.dc-mobile-acc-panel a{padding:9px 4px;font-size:13px;font-weight:500;color:oklch(78% 0.012 90);transition:color .2s ease}
.dc-mobile-acc-panel a:hover{color:#f05836}

/* count-up numbers */
.count-target{display:inline-block}

/* respect reduced motion preference */
@media (prefers-reduced-motion: reduce){
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade,
  .load-in, .float-anim, .hover-lift, .hover-scale, .hover-glow,
  .link-underline::after, .nav-link-anim::after, .btn-anim::before,
  .logo-anim, .icon-pop, .dc-dropdown, #mobile-menu{
    animation:none !important;
    transition:none !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .reveal-fade, .load-in{
    opacity:1 !important;
    transform:none !important;
  }
}