/* i2 Fibra — entrada de CSS do design system.
   Valores espelhados de src/styles.css do repo tronus-tech/Landing-Page. */
@import "./tokens/fonts.css";
@import "./tokens/colors.css";
@import "./tokens/typography.css";
@import "./tokens/spacing.css";
@import "./tokens/effects.css";
@import "./tokens/compat.css";

*{ border-color: var(--border); }

body{
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  font-feature-settings: "cv02", "cv03", "cv04", "ss01";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4{
  font-family: var(--font-display);
  letter-spacing: -0.035em;
  font-weight: 600;
}

::selection{ background: var(--i2-yellow); color: var(--i2-ink); }

a{ color: var(--i2-teal-deep); text-decoration: none; }
a:hover{ color: var(--i2-ink); }

html{ scroll-behavior: smooth; scroll-padding-top: var(--scroll-padding-html); }
section[id]{ scroll-margin-top: var(--scroll-margin-section); }

/* Utilities do repo, reescritas em CSS puro */
.container-i2{ margin-inline:auto; width:100%; max-width:var(--container-max); padding-inline:var(--container-pad); }
.font-display{ font-family:var(--font-display); font-weight:600; letter-spacing:-0.035em; }
.eyebrow{ font-size:.6875rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--muted-foreground); }
.glass{ background:color-mix(in oklab, white 62%, transparent); backdrop-filter:var(--glass-light); border:1px solid color-mix(in oklab, white 70%, transparent); }
.glass-dark{ background:color-mix(in oklab, #101214 55%, transparent); backdrop-filter:var(--glass-light); border:1px solid rgb(255 255 255 / .10); }
.shadow-soft{ box-shadow:var(--shadow-soft); }
.shadow-lift{ box-shadow:var(--shadow-lift); }
.shadow-glow-teal{ box-shadow:var(--shadow-glow-teal); }
.shadow-glow-yellow{ box-shadow:var(--shadow-glow-yellow); }
.bg-brand-gradient{ background-image:var(--gradient-brand); }
.bg-yellow-gradient{ background-image:var(--gradient-yellow); }
.bg-teal-gradient{ background-image:var(--gradient-teal); }
.bg-ink-gradient{ background-image:var(--gradient-ink); }
.surface-mist{ background-image:var(--surface-mist); }
.surface-teal{ background-color:var(--surface-teal); }
.surface-yellow{ background-color:var(--surface-yellow); }
.text-brand-gradient{ background-image:var(--gradient-brand); background-clip:text; -webkit-background-clip:text; color:transparent; }
.text-yellow-gradient{ background-image:var(--gradient-yellow); background-clip:text; -webkit-background-clip:text; color:transparent; }
.grid-lines{
  background-image:
    linear-gradient(to right, color-mix(in oklab, var(--i2-line) 70%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklab, var(--i2-line) 70%, transparent) 1px, transparent 1px);
  background-size:64px 64px;
}
.press{ transition: transform var(--dur-press) var(--ease-premium), box-shadow var(--dur-hover) var(--ease-premium); }
.press:hover{ transform: scale(1.03); }
.press:active{ transform: scale(0.98); }

@keyframes i2-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-8px)} }
@keyframes i2-drift{
  0%,100%{ transform:translate3d(0,0,0) scale(1) }
  33%{ transform:translate3d(4%,-6%,0) scale(1.08) }
  66%{ transform:translate3d(-5%,4%,0) scale(0.95) }
}
@keyframes i2-sheen{ 0%{transform:translateX(-120%)} 100%{transform:translateX(220%)} }
@keyframes i2-pulse-ring{ 0%{transform:scale(.6);opacity:.7} 100%{transform:scale(2.2);opacity:0} }
@keyframes i2-attention{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in oklab, var(--i2-teal) 55%, transparent) }
  50%{ box-shadow:0 0 0 10px color-mix(in oklab, var(--i2-teal) 0%, transparent) }
}
@keyframes i2-hue{ 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }

.animate-attention{ animation:i2-attention 2.2s var(--ease-premium) infinite; }
.animate-gradient{ background-size:200% 200%; animation:i2-hue 8s ease-in-out infinite; }
.animate-float{ animation:i2-float 6s var(--ease-premium) infinite; }
.animate-drift-slow{ animation:i2-drift 18s ease-in-out infinite; }
.animate-drift-slower{ animation:i2-drift 24s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}