/* ═══════════════════════════════════════════════════════
   IT Kate — Custom Styles
   ═══════════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-12px) rotate(6deg); }
}
@keyframes floatReverse {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(10px) rotate(-5deg); }
}
@keyframes ticker {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(1.8); }
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Animation Classes ──────────────────────────────── */
.doodle-float      { animation: float 4s ease-in-out infinite; }
.doodle-float-2    { animation: float 5.5s ease-in-out infinite; animation-delay: 0.7s; }
.doodle-float-rev  { animation: floatReverse 4.5s ease-in-out infinite; }
.doodle-float-slow { animation: float 7s ease-in-out infinite; animation-delay: 1.2s; }
.ticker-track      { display: inline-flex; align-items: center; animation: ticker 35s linear infinite; white-space: nowrap; }
.ticker-track:hover{ animation-play-state: paused; }
.pulse-dot         { animation: pulseDot 2s ease-in-out infinite; }
.spin-slow         { animation: spinSlow 22s linear infinite; }

/* ── Scroll Reveal ──────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease-out, transform 0.65s ease-out;
}
.reveal.visible       { opacity: 1; transform: translateY(0); }
.reveal-delay-1       { transition-delay: 0.12s; }
.reveal-delay-2       { transition-delay: 0.24s; }
.reveal-delay-3       { transition-delay: 0.36s; }

/* ── Grid Dot Background ────────────────────────────── */
.grid-bg {
  background-color: #FAFAF8;
  background-image: radial-gradient(circle, #C9CDD6 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Photo Frame ────────────────────────────────────── */
.photo-frame {
  border: 3px solid #0D0D0D;
  box-shadow: 8px 8px 0 #0D0D0D;
  position: relative;
}

/* ── Mark / Highlight ───────────────────────────────── */
mark {
  background-color: #FFD6E7;
  color: inherit;
  padding: 0 10px;
  border-radius: 2px;
  display: inline;
  line-height: inherit;
}

/* ── Section Tag ────────────────────────────────────── */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background-color: #0D0D0D;
  color: #F43F7E;
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 9999px;
}

/* ── Cards ──────────────────────────────────────────── */
.service-card {
  border: 2px dashed #0D0D0D;
  transition: background-color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
  cursor: default;
}
.service-card:hover {
  background-color: #FFD6E7;
  transform: translateY(-5px);
  border-style: solid;
}
.project-card {
  border: 2px solid #0D0D0D;
  box-shadow: 4px 4px 0 #0D0D0D;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.project-card:hover {
  box-shadow: 7px 7px 0 #F43F7E;
  transform: translateY(-3px);
}
.testimonial-card {
  border: 2px solid #0D0D0D;
  box-shadow: 4px 4px 0 #0D0D0D;
  transition: transform 0.25s ease;
}
.testimonial-card:hover { transform: translateY(-3px); }

/* ── Buttons ────────────────────────────────────────── */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #0D0D0D; color: #fff;
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  padding: 14px 32px; border-radius: 9999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none; white-space: nowrap;
}
.btn-primary:hover { transform: scale(1.04); box-shadow: 0 6px 20px rgba(0,0,0,0.18); }

.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; color: #0D0D0D;
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  padding: 12px 32px; border-radius: 9999px; border: 2px solid #0D0D0D;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-decoration: none; white-space: nowrap;
}
.btn-secondary:hover { background-color: #FFD6E7; transform: scale(1.02); }

.btn-pink {
  display: inline-flex; align-items: center; gap: 8px;
  background: #F43F7E; color: #fff;
  font-family: 'DM Sans', sans-serif; font-weight: 700;
  padding: 14px 32px; border-radius: 9999px;
  transition: transform 0.2s ease, filter 0.2s ease;
  text-decoration: none; white-space: nowrap;
}
.btn-pink:hover { transform: scale(1.05); filter: brightness(1.07); }

/* ── Form Inputs ────────────────────────────────────── */
.form-input {
  width: 100%;
  border: 2px solid #0D0D0D;
  border-radius: 10px;
  padding: 12px 16px;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  background: #fff;
  color: #0D0D0D;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  outline: none;
  appearance: none;
}
.form-input:focus {
  border-color: #F43F7E;
  box-shadow: 0 0 0 3px rgba(244, 63, 126, 0.15);
}
.form-input::placeholder { color: #9CA3AF; }

/* ── Language Dropdown ──────────────────────────────── */
.lang-dropdown {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: #fff;
  border: 2px solid #0D0D0D;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 4px 4px 0 #0D0D0D;
  min-width: 72px;
  z-index: 200;
}
.lang-dropdown button {
  display: block; width: 100%;
  padding: 9px 16px; text-align: left;
  font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: 13px;
  color: #0D0D0D;
  transition: background-color 0.15s ease;
  background: none; border: none; cursor: pointer;
}
.lang-dropdown button:hover { background-color: #FFD6E7; }

/* ── Mobile Menu ────────────────────────────────────── */
#mobile-menu {
  display: none;
  position: fixed; inset: 0;
  background: #FAFAF8; z-index: 100;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
}
#mobile-menu.open {
  display: flex;
  animation: fadeUp 0.25s ease-out;
}

/* ── Timeline ───────────────────────────────────────── */
.timeline-wrap { border-left: 2px dashed #0D0D0D; margin-left: 6px; }
.timeline-item { position: relative; padding-left: 28px; padding-bottom: 32px; }
.timeline-item::before {
  content: '';
  position: absolute; left: -7px; top: 5px;
  width: 12px; height: 12px;
  background: #F43F7E; border-radius: 50%; border: 2px solid #0D0D0D;
}
.timeline-item:last-child { padding-bottom: 0; }

/* ── Navbar ─────────────────────────────────────────── */
#navbar { transition: box-shadow 0.3s ease; }

/* ── Scrollbar ──────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #FAFAF8; }
::-webkit-scrollbar-thumb { background: #F43F7E; border-radius: 3px; }

/* ── Skill bar ──────────────────────────────────────── */
.skill-bar-fill {
  height: 6px; border-radius: 3px;
  background: #F43F7E;
  transition: width 1s ease-out;
}

/* ── Utility ────────────────────────────────────────── */
html { scroll-behavior: smooth; }
* { box-sizing: border-box; }