/* ============================================================
   Trena — Landing page
   Static implementation of the Trena Landing design.
   Base look/feel lives in inline styles on index.html (hi-fi,
   final). This sheet adds: fonts, keyframes, the noise overlay,
   reveal-on-scroll, focus fallback, responsive behaviour and
   reduced-motion. Interactive hover/focus states are driven by
   data-hover / data-focus (see js/main.js).
   ============================================================ */

/* --- Inter (self-hosted) — única família da marca no novo design --- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/inter/inter-400.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/inter/inter-500.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/inter/inter-600.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/inter/inter-700.ttf') format('truetype'); }

/* --- Reset / base --- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #0E1620;
  font-family: 'Inter', system-ui, sans-serif;
}
img { max-width: 100%; }

/* ============================================================
   Keyframes
   ============================================================ */
@keyframes trenaFloat   { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }
@keyframes trenaPulse   { 0%,100%{opacity:.35;transform:scale(1)} 50%{opacity:.9;transform:scale(1.05)} }
@keyframes trenaBlink   { 0%,100%{opacity:1} 50%{opacity:.25} }
@keyframes trenaScan    { 0%{transform:translateY(-4px)} 100%{transform:translateY(118px)} }
@keyframes trenaGlow    { 0%,100%{opacity:.55} 50%{opacity:1} }
@keyframes meterWave    { 0%{transform:scale(.4);opacity:.9} 70%{opacity:.25} 100%{transform:scale(1.5);opacity:0} }
@keyframes meterPacket  { 0%{transform:translateX(0) scale(.7);opacity:0} 12%{opacity:1} 80%{opacity:1} 100%{transform:translateX(var(--pk,120px)) scale(1);opacity:0} }
@keyframes meterSpin    { from{transform:rotateX(-14deg) rotateY(0deg)} to{transform:rotateX(-14deg) rotateY(360deg)} }
@keyframes marqueeScroll{ from{transform:translateX(0)} to{transform:translateX(-100%)} }
@keyframes flowPulse    { 0%,100%{transform:scale(1)} 50%{transform:scale(1.07)} }

/* ============================================================
   Film-grain overlay (hero / CTA)
   ============================================================ */
.trena-grain {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Distribuidoras — logos uniformizados (marca branca sobre escuro)
   ============================================================ */
.t-logo { filter: grayscale(1) brightness(1.7) opacity(.8); }

/* ============================================================
   Reveal on scroll (only hide when JS is present, so the page
   is fully visible if JS fails to load)
   ============================================================ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.js [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Focus fallback (accessibility even without JS)
   ============================================================ */
#tform input:focus,
#tform select:focus { border-color: #14E3D4 !important; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .t-r4 { grid-template-columns: 1fr 1fr !important; }
}

@media (max-width: 940px) {
  .t-dash { grid-template-columns: 1fr !important; max-width: 520px; }
  .t-dash > aside { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,.07); }
}

@media (max-width: 900px) {
  .t-r3   { grid-template-columns: 1fr !important; max-width: 420px; margin-left: auto; margin-right: auto; }
  .t-bento { grid-template-columns: 1fr !important; }
  .t-bento > * { grid-column: auto !important; }
}

@media (max-width: 720px) {
  .t-navlinks   { display: none !important; }
  .t-meterstage { height: 400px; }
  .t-meterrow   { transform: scale(.72); }
}

@media (max-width: 620px) {
  .t-dash [style*="repeat(3,1fr)"] { grid-template-columns: 1fr !important; }
  .t-dash [style*="1.75fr 1fr"]    { grid-template-columns: 1fr !important; }
}

@media (max-width: 560px) {
  .t-r4         { grid-template-columns: 1fr !important; }
  .t-r2         { grid-template-columns: 1fr !important; }
  .t-meterstage { height: 320px; }
  .t-meterrow   { transform: scale(.5); }
}

/* ============================================================
   Reduced motion — pause looping animations
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-loop] { animation-play-state: paused !important; }
  .js [data-reveal] { transition: none; }
}