/* ── Pyvot360 v2 — Animations & Custom Styles ── */

/* ── Dark mode base ── */
:root {
  --bg-primary:    #ffffff;
  --bg-secondary:  #f9fafb;
  --bg-tertiary:   #f3f4f6;
  --text-primary:  #111827;
  --text-muted:    #6b7280;
  --text-faint:    #9ca3af;
  --border:        rgba(0,0,0,0.08);
  --navy:          #0D2B5E;
  --navyd:         #071A3E;
  --orange:        #F36B1C;
  --oranged:       #CE4912;
  --card-bg:       #ffffff;
  --card-border:   rgba(0,0,0,0.07);
  --nav-bg:        rgba(255,255,255,0.92);
}

html.dark {
  --bg-primary:    #0f1117;
  --bg-secondary:  #161b27;
  --bg-tertiary:   #1c2333;
  --text-primary:  #f1f5f9;
  --text-muted:    #94a3b8;
  --text-faint:    #64748b;
  --border:        rgba(255,255,255,0.07);
  --navy:          #e2e8f0;
  --navyd:         #cbd5e1;
  --orange:        #F36B1C;
  --oranged:       #e05e12;
  --card-bg:       #1c2333;
  --card-border:   rgba(255,255,255,0.07);
  --nav-bg:        rgba(15,17,23,0.92);
}

body {
  background: var(--bg-primary);
  color: var(--text-primary);
  transition: background 0.25s ease, color 0.25s ease;
}

/* ── Scroll-reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1),
              transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal.visible { opacity:1; transform:translateY(0); }

.reveal-stagger > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s cubic-bezier(0.22,1,0.36,1),
              transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:translateY(0); transition-delay:0ms; }
.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:translateY(0); transition-delay:80ms; }
.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:translateY(0); transition-delay:160ms; }
.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:translateY(0); transition-delay:240ms; }
.reveal-stagger.visible > *:nth-child(5) { opacity:1; transform:translateY(0); transition-delay:320ms; }

.reveal-left {
  opacity:0; transform:translateX(-30px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal-left.visible { opacity:1; transform:translateX(0); }

.reveal-right {
  opacity:0; transform:translateX(30px);
  transition: opacity 0.65s cubic-bezier(0.22,1,0.36,1), transform 0.65s cubic-bezier(0.22,1,0.36,1);
}
.reveal-right.visible { opacity:1; transform:translateX(0); }

/* ── Hero animations ── */
@keyframes heroUp {
  from { opacity:0; transform:translateY(18px); }
  to   { opacity:1; transform:translateY(0); }
}
.hero-tag   { animation: heroUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.hero-line-1 { animation: heroUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.15s both; }
.hero-line-2 { animation: heroUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.28s both; }
.hero-sub    { animation: heroUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.4s  both; }
.hero-ctas   { animation: heroUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.52s both; }
.hero-stats  { animation: heroUp 0.7s cubic-bezier(0.22,1,0.36,1) 0.65s both; }

/* ── Nav ── */
.nav-link { position:relative; display:inline-flex; align-items:center; }
.nav-link::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:1.5px; background:#F36B1C;
  transition: width 0.22s ease;
}
.nav-link:hover::after { width:100%; }

/* ── Card hover ── */
.card-hover {
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.25s cubic-bezier(0.22,1,0.36,1),
              border-color 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(243,107,28,0.10);
  border-color: rgba(243,107,28,0.3) !important;
}

html.dark .card-hover:hover {
  box-shadow: 0 10px 28px rgba(243,107,28,0.07);
}

/* ── Project card ── */
.project-card {
  transition: transform 0.25s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.25s cubic-bezier(0.22,1,0.36,1);
}
.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(7,26,62,0.18);
}
html.dark .project-card:hover {
  box-shadow: 0 18px 40px rgba(0,0,0,0.45);
}

/* ── Accent bar ── */
.accent-bar {
  width: 0; height: 2px; background: #F36B1C;
  transition: width 0.55s cubic-bezier(0.22,1,0.36,1) 0.25s;
}
.accent-bar.grow, .visible .accent-bar { width: 32px; }

/* ── Timeline pulse ── */
@keyframes dotPulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(243,107,28,0.4); }
  50%      { box-shadow: 0 0 0 7px rgba(243,107,28,0); }
}
.timeline-dot-active { animation: dotPulse 2.2s ease-in-out infinite; }

/* ── Dark mode toggle — icon button ── */
.theme-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0.5px solid rgba(0,0,0,0.12);
  border-radius: 8px;
  padding: 6px 8px;
  cursor: pointer;
  color: #6b7280;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
  flex-shrink: 0;
  line-height: 1;
}
.theme-toggle-btn:hover {
  background: rgba(243,107,28,0.07);
  border-color: rgba(243,107,28,0.35);
  color: #F36B1C;
}
html.dark .theme-toggle-btn {
  border-color: rgba(255,255,255,0.12);
  color: #94a3b8;
}
html.dark .theme-toggle-btn:hover {
  background: rgba(243,107,28,0.1);
  border-color: rgba(243,107,28,0.4);
  color: #F36B1C;
}

/* Show Sun in dark mode (to switch to light), Moon in light mode (to switch to dark) */
.theme-toggle-btn .icon-sun  { display: none; }
.theme-toggle-btn .icon-moon { display: flex; align-items: center; }
html.dark .theme-toggle-btn .icon-sun  { display: flex; align-items: center; }
html.dark .theme-toggle-btn .icon-moon { display: none; }

/* Label visible only in mobile menu */
.theme-toggle-btn .toggle-label {
  display: none;
  font-size: 14px;
  font-weight: 500;
}
.mobile-menu .theme-toggle-btn {
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.7);
  padding: 8px 16px;
  border-radius: 10px;
}
.mobile-menu .theme-toggle-btn .toggle-label { display: inline; }
.mobile-menu .theme-toggle-btn:hover {
  background: rgba(243,107,28,0.15);
  border-color: rgba(243,107,28,0.5);
  color: #F36B1C;
}

/* ── Modal ── */
@keyframes modalIn {
  from { opacity:0; transform:scale(0.96) translateY(10px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
.modal-enter { animation: modalIn 0.28s cubic-bezier(0.22,1,0.36,1) both; }

@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
.overlay-enter { animation: overlayIn 0.18s ease both; }

/* ── Button press ── */
.btn-press { transition: transform 0.12s ease; }
.btn-press:active { transform: scale(0.97); }

/* ── Integration card ── */
.integration-card {
  transition: transform 0.22s ease, border-color 0.22s ease, box-shadow 0.22s ease;
}
.integration-card:hover {
  transform: translateY(-3px);
  border-color: rgba(243,107,28,0.35) !important;
  box-shadow: 0 6px 20px rgba(243,107,28,0.08);
}

/* ── Industry pill ── */
.industry-pill { transition: transform 0.18s ease, opacity 0.18s ease; }
.industry-pill:hover { transform:translateY(-2px); opacity:0.8; }

/* ── Mobile menu ── */
.mobile-menu {
  display:none;
  position:fixed; inset:0;
  background:#071A3E;
  z-index:200;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2rem;
}
.mobile-menu.open { display:flex; animation: overlayIn 0.2s ease both; }
.mobile-menu a {
  font-size:1.35rem; color:rgba(255,255,255,0.8);
  text-decoration:none; font-weight:500;
}
.mobile-menu a:hover { color:#F36B1C; }

html { scroll-behavior:smooth; }

::-webkit-scrollbar { width:5px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:rgba(13,43,94,0.15); border-radius:3px; }
html.dark ::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); }

/* ── Gradient text ── */
.text-gradient {
  background: linear-gradient(90deg, #F36B1C 0%, #CE4912 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Stat number pop ── */
@keyframes statPop {
  0%   { opacity:0; transform:scale(0.82); }
  70%  { transform:scale(1.05); }
  100% { opacity:1; transform:scale(1); }
}
.stat-item { animation: statPop 0.5s cubic-bezier(0.22,1,0.36,1) both; }
.stat-item:nth-child(1) { animation-delay:0.7s; }
.stat-item:nth-child(2) { animation-delay:0.85s; }
.stat-item:nth-child(3) { animation-delay:1.0s; }
.stat-item:nth-child(4) { animation-delay:1.15s; }

/* Dark-mode-aware surfaces */
.surface-primary   { background: var(--bg-primary); }
.surface-secondary { background: var(--bg-secondary); }
.surface-card      { background: var(--card-bg); border-color: var(--card-border); }

/* Nav backdrop blur */
.nav-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Stats divider fix — no outline, just a clean top rule */
.stats-bar {
  border-top: 1px solid var(--border);
  padding-top: 2.5rem;
  margin-top: 3.5rem;
}