/* ═══════════════════════════════════════════════════════════
   SYARIF HIDAYAT — PORTFOLIO
   animations.css — Keyframes, scroll reveals, transitions
═══════════════════════════════════════════════════════════ */

/* ─── KEYFRAMES ─────────────────────────────────────────── */

/* Loader bar fill */
@keyframes loaderFill {
  from { width: 0%; }
  to   { width: 100%; }
}

/* Scroll wheel bounce */
@keyframes scrollWheel {
  0%   { opacity: 1; transform: translateY(0); }
  60%  { opacity: 0; transform: translateY(10px); }
  61%  { opacity: 0; transform: translateY(0); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Floating badges */
@keyframes floatBadge {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-8px); }
}

/* Shake on error */
@keyframes shake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}

/* Gold shimmer sweep */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* Pulse glow ring */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.35); }
  70%  { box-shadow: 0 0 0 14px rgba(201,168,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}

/* Slow rotate */
@keyframes slowRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Blink cursor */
@keyframes blink {
  0%,100% { opacity: 1; }
  50%      { opacity: 0; }
}

/* Fade up — used for hero text */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Fade in */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Clip reveal left → right */
@keyframes clipRevealH {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

/* Scale up */
@keyframes scaleUp {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}

/* Slide in from left */
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Slide in from right */
@keyframes slideRight {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Number count-up flash */
@keyframes countFlash {
  0%  { color: var(--gold-light); }
  100%{ color: var(--gold); }
}

/* Gold line draw */
@keyframes drawLine {
  from { width: 0; }
  to   { width: 48px; }
}

/* Dot timeline pulse */
@keyframes dotPulse {
  0%   { box-shadow: 0 0 0 0 rgba(201,168,76,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(201,168,76,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,168,76,0); }
}

/* Lightbox open */
@keyframes lbOpen {
  from { opacity: 0; transform: scale(.94) translateY(16px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Border march (cert card hover) */
@keyframes borderMarch {
  0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
  100% { background-position: 100% 0%, 100% 100%, 0% 100%, 0% 0%; }
}

/* ─── HERO ENTRANCE ─────────────────────────────────────── */
.hero-eyebrow {
  opacity: 0;
  animation: fadeUp .7s cubic-bezier(0,0,.2,1) .4s forwards;
}
.name-line:nth-child(1) {
  opacity: 0;
  animation: fadeUp .8s cubic-bezier(0,0,.2,1) .6s forwards;
}
.name-line:nth-child(2) {
  opacity: 0;
  animation: fadeUp .8s cubic-bezier(0,0,.2,1) .75s forwards;
}
.hero-sub {
  opacity: 0;
  animation: fadeUp .7s cubic-bezier(0,0,.2,1) .95s forwards;
}
.hero-actions {
  opacity: 0;
  animation: fadeUp .7s cubic-bezier(0,0,.2,1) 1.1s forwards;
}
.hero-scroll-hint {
  opacity: 0;
  animation: fadeUp .6s cubic-bezier(0,0,.2,1) 1.4s forwards;
}
.badge-bnsp {
  opacity: 0;
  animation: fadeIn .8s ease 1.6s forwards, floatBadge 4s ease-in-out 2.4s infinite;
}
.badge-renjani {
  opacity: 0;
  animation: fadeIn .8s ease 1.9s forwards, floatBadge 4s ease-in-out 1s infinite;
}

/* ─── SCROLL REVEAL SYSTEM ──────────────────────────────── */

/* Base hidden state */
[data-reveal] {
  opacity: 0;
  transition:
    opacity .75s cubic-bezier(0,0,.2,1),
    transform .75s cubic-bezier(0,0,.2,1);
  will-change: opacity, transform;
}

[data-reveal="up"]    { transform: translateY(48px); }
[data-reveal="left"]  { transform: translateX(-56px); }
[data-reveal="right"] { transform: translateX(56px); }
[data-reveal="scale"] { transform: scale(.9); opacity: 0; }

/* Visible state */
[data-reveal].in-view {
  opacity: 1;
  transform: none;
}

/* Staggered delays */
[data-delay="0"]   { transition-delay: 0ms; }
[data-delay="100"] { transition-delay: 100ms; }
[data-delay="150"] { transition-delay: 150ms; }
[data-delay="200"] { transition-delay: 200ms; }
[data-delay="250"] { transition-delay: 250ms; }
[data-delay="300"] { transition-delay: 300ms; }
[data-delay="400"] { transition-delay: 400ms; }
[data-delay="500"] { transition-delay: 500ms; }

/* ─── GOLD RULE DRAW ────────────────────────────────────── */
.gold-rule {
  width: 0;
  transition: width .8s cubic-bezier(0,0,.2,1) .3s;
}
.section-header.in-view .gold-rule,
[data-reveal].in-view ~ .gold-rule,
.in-view .gold-rule {
  width: 48px;
}
/* Direct in-view on gold-rule itself */
.gold-rule.in-view { width: 48px; }

/* ─── NAVBAR SCROLL STATE ───────────────────────────────── */
#navbar {
  transition:
    background .45s cubic-bezier(0,0,.2,1),
    border-color .45s cubic-bezier(0,0,.2,1),
    box-shadow .45s cubic-bezier(0,0,.2,1);
}
#navbar.scrolled {
  box-shadow: 0 1px 40px rgba(0,0,0,.5);
}

/* ─── PHOTO FRAME CORNERS ───────────────────────────────── */
.photo-corner {
  opacity: 0; transition: opacity .5s, transform .5s cubic-bezier(.34,1.56,.64,1);
}
.photo-corner.tl { transform: translate(-6px,-6px); }
.photo-corner.tr { transform: translate(6px,-6px); }
.photo-corner.bl { transform: translate(-6px,6px); }
.photo-corner.br { transform: translate(6px,6px); }

[data-reveal="left"].in-view .photo-corner {
  opacity: 1; transform: translate(0,0);
}
[data-reveal="left"].in-view .photo-corner.tl { transition-delay: .5s; }
[data-reveal="left"].in-view .photo-corner.tr { transition-delay: .6s; }
[data-reveal="left"].in-view .photo-corner.bl { transition-delay: .65s; }
[data-reveal="left"].in-view .photo-corner.br { transition-delay: .7s; }

/* ─── PHOTO GLOW PULSE ──────────────────────────────────── */
.photo-glow {
  opacity: 0;
  transition: opacity .8s .6s;
  animation: none;
}
[data-reveal="left"].in-view .photo-glow {
  opacity: 1;
  animation: glowPulse 3s ease-in-out 1.5s infinite;
}
@keyframes glowPulse {
  0%,100% { opacity: .6; transform: translateX(-50%) scale(1); }
  50%     { opacity: 1;  transform: translateX(-50%) scale(1.15); }
}

/* ─── STAT COUNTER ──────────────────────────────────────── */
.stat-num { transition: color .3s; }
.stat-num.counting { animation: countFlash .3s ease; }

/* ─── SKILL BARS ────────────────────────────────────────── */
.skill-fill {
  transition: width 1.4s cubic-bezier(0,0,.2,1);
}
/* Add shimmer when filling */
.skill-fill.animating {
  background-image: linear-gradient(
    90deg,
    var(--gold) 0%,
    var(--gold-light) 50%,
    var(--gold) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.4s linear;
}

/* ─── TIMELINE DOT ──────────────────────────────────────── */
.tl-dot {
  transition: box-shadow .3s;
}
.timeline-item.in-view .tl-dot {
  animation: dotPulse 2s ease-out .4s 2;
}

/* ─── EDUCATION CARD ────────────────────────────────────── */
.edu-card {
  transition:
    border-color .35s,
    transform .35s cubic-bezier(0,0,.2,1),
    box-shadow .35s;
}
.edu-card:hover {
  box-shadow: 0 20px 60px rgba(0,0,0,.4), 0 0 0 1px var(--border);
}

/* ─── SOFT SKILL CARDS ──────────────────────────────────── */
.soft-card {
  transition:
    background .3s,
    border-color .3s,
    color .3s,
    transform .3s cubic-bezier(.34,1.56,.64,1);
}

/* Staggered reveal for soft cards */
.skills-col[data-reveal="right"].in-view .soft-card:nth-child(1)  { transition-delay: .05s; }
.skills-col[data-reveal="right"].in-view .soft-card:nth-child(2)  { transition-delay: .10s; }
.skills-col[data-reveal="right"].in-view .soft-card:nth-child(3)  { transition-delay: .15s; }
.skills-col[data-reveal="right"].in-view .soft-card:nth-child(4)  { transition-delay: .20s; }
.skills-col[data-reveal="right"].in-view .soft-card:nth-child(5)  { transition-delay: .25s; }
.skills-col[data-reveal="right"].in-view .soft-card:nth-child(6)  { transition-delay: .30s; }
.skills-col[data-reveal="right"].in-view .soft-card:nth-child(7)  { transition-delay: .35s; }
.skills-col[data-reveal="right"].in-view .soft-card:nth-child(8)  { transition-delay: .40s; }

/* ─── CERTIFICATE CARDS ─────────────────────────────────── */
.cert-card {
  transition:
    border-color .35s,
    transform .35s cubic-bezier(0,0,.2,1),
    box-shadow .35s;
}
.cert-card:hover {
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 0 24px rgba(201,168,76,.08);
}

/* Staggered grid reveal */
.cert-card:nth-child(1) { transition-delay: .00s; }
.cert-card:nth-child(2) { transition-delay: .07s; }
.cert-card:nth-child(3) { transition-delay: .14s; }
.cert-card:nth-child(4) { transition-delay: .21s; }
.cert-card:nth-child(5) { transition-delay: .28s; }
.cert-card:nth-child(6) { transition-delay: .35s; }
.cert-card:nth-child(7) { transition-delay: .42s; }
.cert-card:nth-child(8) { transition-delay: .49s; }

/* ─── LIGHTBOX ANIMATION ────────────────────────────────── */
.lb-panel {
  animation: lbOpen .35s cubic-bezier(.34,1.56,.64,1) forwards;
}
#lightbox[hidden] .lb-panel { animation: none; }

/* ─── CONTACT FORM ──────────────────────────────────────── */
.form-input,
.form-textarea {
  transition:
    border-color .3s,
    background .3s,
    box-shadow .3s;
}
.form-input:focus,
.form-textarea:focus {
  box-shadow: 0 0 0 3px rgba(201,168,76,.08);
}

/* WA notice fade in */
.wa-notice {
  animation: fadeIn .5s ease .2s both;
}

/* ─── BUTTON EFFECTS ────────────────────────────────────── */
.btn {
  position: relative; overflow: hidden;
}
.btn::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(
    120deg,
    transparent 30%,
    rgba(255,255,255,.08) 50%,
    transparent 70%
  );
  transform: translateX(-100%);
  transition: transform .5s cubic-bezier(0,0,.2,1);
}
.btn:hover::before {
  transform: translateX(100%);
}

/* Submit button loading state */
#formBtn[disabled] {
  opacity: .7; cursor: wait;
}
#formBtn[disabled]::after {
  content: '';
  display: inline-block;
  width: 10px; height: 10px;
  border: 1.5px solid var(--bg);
  border-top-color: transparent;
  border-radius: 50%;
  animation: slowRotate .7s linear infinite;
  margin-left: .5rem;
}

/* ─── LOADER EXIT ───────────────────────────────────────── */
#loader {
  transition: opacity .7s cubic-bezier(0,0,.2,1), visibility .7s;
}

/* ─── MOBILE DRAWER ─────────────────────────────────────── */
.mobile-drawer li {
  opacity: 0; transform: translateX(24px);
  transition: opacity .35s, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.mobile-drawer.open li:nth-child(1) { opacity:1; transform:none; transition-delay:.08s; }
.mobile-drawer.open li:nth-child(2) { opacity:1; transform:none; transition-delay:.14s; }
.mobile-drawer.open li:nth-child(3) { opacity:1; transform:none; transition-delay:.20s; }
.mobile-drawer.open li:nth-child(4) { opacity:1; transform:none; transition-delay:.26s; }
.mobile-drawer.open li:nth-child(5) { opacity:1; transform:none; transition-delay:.32s; }
.mobile-drawer.open li:nth-child(6) { opacity:1; transform:none; transition-delay:.38s; }

/* ─── FOOTER ────────────────────────────────────────────── */
#footer {
  opacity: 0; transform: translateY(20px);
  transition: opacity .8s, transform .8s;
}
#footer.in-view { opacity: 1; transform: none; }

/* ─── REDUCED 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; }
  .gold-rule    { width: 48px !important; }
}