:root {
  --bg: #FAFAF5;
  --bg-2: #F1F0E7;
  --ink: #0A0A0A;
  --ink-60: rgba(10,10,10,0.6);
  --ink-40: rgba(10,10,10,0.4);
  --ink-10: rgba(10,10,10,0.1);
  --ink-05: rgba(10,10,10,0.05);
  --idex: #1F1FFF;
  --idex-light: #2EB5FF;
}
body {
  font-family: 'Geist', ui-sans-serif, system-ui, sans-serif;
  font-feature-settings: "ss01", "cv11";
}
.font-display {
  font-family: 'Instrument Serif', ui-serif, Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.font-poppins {
  font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}
.font-work {
  font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif;
}
.font-mono-c {
  font-family: 'Geist Mono', ui-monospace, monospace;
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
::selection { background: var(--idex); color: #fff; }

/* Subtle grain */
.grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  opacity: 0.05;
  pointer-events: none;
  mix-blend-mode: multiply;
}

/* Project card hover */
.proj-card { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.proj-card:hover .proj-shot { transform: scale(1.02); }
.proj-shot { transition: transform .8s cubic-bezier(.2,.8,.2,1); }

.arrow-link { transition: transform .3s ease; display: inline-flex; }
.arrow-link:hover { transform: translate(2px, -2px); }

.gradient-mark {
  background: linear-gradient(135deg, #2424FF 0%, #2EB5FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Marquee animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 50s linear infinite; }

/* Visible-rule line above sections */
.rule-tick {
  background-image: linear-gradient(to right, var(--ink-10) 1px, transparent 1px);
  background-size: 8px 100%;
  background-repeat: repeat-x;
  background-position: top;
}

/* Editorial mountain showcase */
.mountain-bg {
  background-image:
    linear-gradient(rgba(250,250,245,0.18), rgba(250,250,245,0.18)),
    url('https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?auto=format&fit=crop&w=2400&q=80');
  background-size: cover;
  background-position: center;
  filter: grayscale(1) contrast(0.95) sepia(0.12);
}
.token-bar {
  position: relative;
  width: 100%;
}
/* Faint orange arc overlay, like the inspiration */
.arc-overlay {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.arc-overlay svg { width: 100%; height: 100%; }

/* Language switcher */
.lang-active { color: var(--ink) !important; }
[data-lang-btn] { cursor: pointer; }

/* ── Inventario hero animations ───────────────────────────────────── */
@keyframes pulse-black {
  0%, 100% { opacity: 0.35; transform: scale(0.95); }
  50%       { opacity: 0.9;  transform: scale(1.05); }
}
@keyframes flow-dash {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -1000; }
}
@keyframes aura-drift {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}
@keyframes grid-pan {
  0%   { background-position: 0 0, 0 0; }
  100% { background-position: 32px 32px, 32px 32px; }
}
.pulse-black   { animation: pulse-black 2.4s ease-in-out infinite; }
.aura-drift    { animation: aura-drift 7s ease-in-out infinite; }
.flow-dash     { stroke-dasharray: 36 220; animation: flow-dash 12s linear infinite; }
.flow-dash-2   { stroke-dasharray: 36 220; animation: flow-dash 12s linear infinite; animation-delay: -5s; }
.inv-grid-pan  {
  background-image:
    linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 34px 34px;
  animation: grid-pan 18s linear infinite;
}
.inv-orbit-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.07) 1px, transparent 1px);
  background-size: 24px 24px;
}

/* ── Transformation Journey hero animations ───────────────────────── */
@keyframes tj-orbit {
  from { transform: rotate(var(--tj-start, 0deg)); }
  to   { transform: rotate(calc(var(--tj-start, 0deg) + 360deg)); }
}
@keyframes tj-sparkle-inward {
  0%   { opacity: 0; transform: translate(var(--tj-sx, 0px), var(--tj-sy, 0px)) scale(1); }
  10%  { opacity: 1; }
  85%  { opacity: 0.85; transform: translate(calc(var(--tj-sx, 0px) * 0.15), calc(var(--tj-sy, 0px) * 0.15)) scale(0.55); }
  100% { opacity: 0; transform: translate(0, 0) scale(0.3); }
}
@keyframes tj-float {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(0, -16px); }
}
@keyframes tj-float-delayed {
  0%, 100% { transform: translate(0, 0); }
  50%       { transform: translate(0, 14px); }
}
@keyframes tj-gradient-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes tj-fade-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tj-orbit-anim    { animation: tj-orbit linear infinite; }
.tj-sparkle-anim  { animation: tj-sparkle-inward ease-out infinite; }
.tj-float         { animation: tj-float 12s ease-in-out infinite; }
.tj-float-delayed { animation: tj-float-delayed 14s ease-in-out infinite; }
.tj-gradient-rot  { animation: tj-gradient-rotate 30s linear infinite; }
.tj-fade-in       { animation: tj-fade-in 0.8s ease-out both; animation-delay: 0.5s; }