/* ==========================================================================
   SoftServe Laboratories — shared site styles
   Compiled Tailwind (css/tailwind.css) handles utilities; this file holds
   custom rules that are reused across pages or are awkward to express as
   utilities.
   ========================================================================== */

body { -webkit-font-smoothing: antialiased; }

/* --- Arrow links (home "→" CTAs) ------------------------------------------ */
.link-arrow { transition: gap .2s ease, color .2s ease; }
.link-arrow:hover { color: #ffffff; gap: 10px; }

/* --- Header dropdown rows — full-width dark panel, right-aligned ----------- */
.menu-row {
  display: block;
  width: 100%;
  text-align: right;
  padding: 15px 24px;
  font-family: "Saira", system-ui, sans-serif;
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.04em;
  color: #ffffff;
  transition: background-color .15s ease;
}
.menu-row:hover { background-color: rgba(255, 255, 255, 0.06); }
.menu-row--back { color: #9a9a9a; }

/* --- Hero typed text — Figma breakpoints: mobile <800, tablet <1281 -------- */
.hero-text { font-size: 34px; letter-spacing: -1.5px; }
@media (min-width: 800px)  { .hero-text { font-size: 72px;  letter-spacing: -3.5px;  } }
@media (min-width: 1281px) { .hero-text { font-size: 105px; letter-spacing: -5.25px; } }
.hero-text .hero-line { display: block; }
@keyframes fadeInChar { from { opacity: 0; } to { opacity: 1; } }

/* --- Hero backlight glow — fades in once on load, then stays --------------- */
@keyframes glowIn { from { opacity: 0; } to { opacity: 1; } }
.glow-fade { opacity: 0; animation: glowIn 1.4s ease-out 0.2s forwards; }

/* --- Infinite marquee — duration set from JS for a constant 24px/sec ------- */
.marquee-track { animation: marquee-left var(--marquee-duration, 45s) linear infinite; }
@keyframes marquee-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --- Scroll reveal — fade + slide into view; re-animates each time --------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s ease-out, transform .8s ease-out;
  will-change: opacity, transform;
}

/* --- Embedded Google Form — sized to content so there's no inner scrollbar - */
.form-embed { width: 100%; max-width: 640px; border: 0; display: block; }

/* --- Product spec disclosure (<details class="spec">) ---------------------- */
.spec > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-weight: 500;
  user-select: none;
}
.spec > summary::-webkit-details-marker { display: none; }
.spec .spec-chevron { transition: transform 0.2s ease; flex-shrink: 0; }
.spec[open] > summary .spec-chevron { transform: rotate(180deg); }

/* --- Footer cone — shown on mobile, hidden on desktop (>=768px) ------------ */
@media (min-width: 768px) { .footer-cone-mobile { display: none; } }

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .hero-text span { animation: none !important; opacity: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
}