/* ============================================================================
   Runway — promotional site stylesheet.
   The page layout is kept as faithful inline styles on each element (as the
   design ships); this file carries only the GLOBAL rules and the interactive
   :hover states that the prototype expressed as `style-hover` attributes.
   Served at /static/css/site.css (the .html files link it relatively so they
   preview standalone; the master overrides the href to an absolute path).
   ============================================================================ */

/* --- global reset / base (from the design's <style> block) ------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { height: auto !important; min-height: 100%; }
body {
  margin: 0;
  background: #f3f1ea;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: 'Manrope', system-ui, sans-serif;
}
a { color: #e0640f; text-decoration: none; }
a:hover { color: #c4560c; }

/* --- keyframes (hero grid, glow, dashes, bob) ------------------------------- */
@keyframes rw-fadeup { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes rw-drift  { from { background-position: 0 0; } to { background-position: 0 52px; } }
@keyframes rw-dash   { from { background-position: 0 0; } to { background-position: 0 -64px; } }
@keyframes rw-glow   { 0%,100% { opacity: .5; } 50% { opacity: .95; } }
@keyframes rw-pulse  { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.18); opacity: 1; } }
@keyframes rw-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Scroll-reveal: elements start hidden and are un-hidden by site.js when they
   enter the viewport. If JS is disabled, .rw-reveal elements stay visible. */
.rw-reveal { opacity: 0; transform: translateY(24px);
  transition: opacity .8s cubic-bezier(.2,.65,.2,1), transform .8s cubic-bezier(.2,.65,.2,1); }
.rw-reveal.rw-in { opacity: 1; transform: none; }
.no-js .rw-reveal { opacity: 1; transform: none; }

@media (max-width: 760px) { [data-navlinks] { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .rw-reveal { opacity: 1 !important; transform: none !important; }
}

/* ============================================================================
   :hover states (converted from the prototype's `style-hover` attributes).
   Each class is applied to the matching element; the base transition stays
   inline on the element so timing is preserved.
   ============================================================================ */

/* nav + chrome */
.rw-navlink:hover     { opacity: 1; color: #fc731a; }
.rw-nav-active        { opacity: 1 !important; }
.rw-locale-btn:hover  { background: rgba(128,128,128,.16); }
.rw-locale-item:hover { background: rgba(255,255,255,.07); }
.rw-cta-sm:hover      { transform: translateY(-1px); box-shadow: 0 10px 26px -6px rgba(252,115,26,.8); }

/* buttons */
.rw-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 48px -8px rgba(252,115,26,.85); }
.rw-btn-ghost:hover   { background: rgba(255,255,255,.11); border-color: rgba(255,255,255,.36); }
.rw-btn-light:hover   { transform: translateY(-2px); border-color: rgba(18,22,31,.3); }
.rw-copy:hover        { background: #fff; }

/* links / arrows */
.rw-arrow:hover       { gap: 12px; }
.rw-footlink:hover    { color: #fc9a52; }
.rw-link-bright:hover { color: #f4f2ee; }
.rw-scroll:hover      { color: rgba(244,242,238,.85); }

/* demo cards (light / dark variants) */
.rw-democard-a:hover  { transform: translateY(-4px); box-shadow: 0 32px 60px -30px rgba(10,14,22,.5); }
.rw-democard-b:hover  { transform: translateY(-4px); box-shadow: 0 32px 60px -30px rgba(42,26,18,.6); }

/* language dropdown menu: hidden by default, shown when .rw-open (JS) or on
   keyboard focus-within (graceful no-JS / a11y fallback) */
.rw-locale-menu { display: none; }
.rw-locale.rw-open .rw-locale-menu,
.rw-locale:focus-within .rw-locale-menu { display: block; }
.rw-locale-item::before { content: ''; flex: none; width: 13px; color: #fc731a; }
.rw-locale-item.is-current::before { content: '✓'; }
.rw-locale-item.is-current { color: #fc731a; }