/* ==========================================================================
   Animation styles — lightweight scroll reveals (no external AOS dependency)
   ========================================================================== */

[data-reveal]{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .7s cubic-bezier(.16,.8,.3,1), transform .7s cubic-bezier(.16,.8,.3,1);
}
[data-reveal].in-view{opacity:1;transform:translateY(0);}
[data-reveal="fade"]{transform:none;}
[data-reveal="left"]{transform:translateX(-32px);}
[data-reveal="left"].in-view{transform:translateX(0);}
[data-reveal="right"]{transform:translateX(32px);}
[data-reveal="right"].in-view{transform:translateX(0);}
[data-reveal="scale"]{transform:scale(0.94);}
[data-reveal="scale"].in-view{transform:scale(1);}

/* stagger via inline --d custom property */
[data-reveal]{transition-delay:var(--d,0ms);}

/* Page loader */
#loader{
  position:fixed;inset:0;background:var(--navy-950);z-index:3000;
  display:flex;align-items:center;justify-content:center;
  transition:opacity .5s ease, visibility .5s ease;
}
#loader.hide{opacity:0;visibility:hidden;}
.loader-mark{
  width:56px;height:56px;border-radius:14px;
  background:var(--grad-primary);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;color:var(--navy-950);
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(0.85);opacity:0.7;}}

/* Floating AI orbs in hero */
.orb{position:absolute;border-radius:50%;filter:blur(2px);opacity:0.5;animation:float 8s ease-in-out infinite;}
@keyframes float{0%,100%{transform:translateY(0) translateX(0);}50%{transform:translateY(-24px) translateX(10px);}}

/* Marquee for logo row */
.marquee{overflow:hidden;position:relative;}
.marquee-track{display:flex;gap:60px;width:max-content;animation:marquee 26s linear infinite;}
.marquee:hover .marquee-track{animation-play-state:paused;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* Counter number just uses JS-driven text, no special animation class needed */

/* Portfolio filter */
.portfolio-item{transition:opacity .35s ease, transform .35s ease;}
.portfolio-item.is-hidden{opacity:0;transform:scale(0.92);position:absolute;pointer-events:none;height:0;overflow:hidden;}

/* Form field states */
.field{position:relative;margin-bottom:20px;}
.field input,.field textarea,.field select{
  width:100%;padding:14px 16px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  color:var(--white);
  font-size:14.5px;
  transition:border-color .2s ease, background .2s ease;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--cyan-400);
  background:rgba(255,255,255,0.06);
  outline:none;
}
.field label{display:block;font-size:13px;color:var(--ink-500);margin-bottom:8px;}
.field .error-msg{display:none;color:var(--danger);font-size:12.5px;margin-top:6px;}
.field.has-error input,.field.has-error textarea,.field.has-error select{border-color:var(--danger);}
.field.has-error .error-msg{display:block;}

.form-alert{
  padding:16px 18px;border-radius:var(--radius-sm);font-size:14px;margin-bottom:22px;
  display:none;align-items:center;gap:10px;
}
.form-alert.show{display:flex;}
.form-alert.success{background:rgba(52,211,153,0.12);border:1px solid rgba(52,211,153,0.4);color:var(--success);}
.form-alert.error{background:rgba(248,113,113,0.12);border:1px solid rgba(248,113,113,0.4);color:var(--danger);}