/* Reframe interaction-kit base styles. Pairs with assets/js/reframe-ui.js.
   Light-tuned defaults; override --rf-cursor / colors per direction. */

:root { --rf-cursor: #16130f; }

/* custom cursor (pointer devices only; JS adds .rf-has-cursor) */
.rf-has-cursor, .rf-has-cursor a, .rf-has-cursor button, .rf-has-cursor [role="button"] { cursor: none; }
.rf-cursor-dot, .rf-cursor-ring {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  border-radius: 50%; margin-left: -3px; margin-top: -3px;
  will-change: transform;
}
.rf-cursor-dot { width: 6px; height: 6px; background: var(--rf-cursor); }
.rf-cursor-ring {
  width: 34px; height: 34px; margin-left: -17px; margin-top: -17px;
  border: 1px solid color-mix(in srgb, var(--rf-cursor) 45%, transparent);
  transition: width .2s ease, height .2s ease, background-color .2s ease, border-color .2s ease;
}
.rf-cursor-ring.is-active {
  width: 52px; height: 52px; margin-left: -26px; margin-top: -26px;
  background: color-mix(in srgb, var(--rf-cursor) 8%, transparent);
  border-color: color-mix(in srgb, var(--rf-cursor) 70%, transparent);
}
.rf-cursor-ring.is-down { width: 26px; height: 26px; margin-left: -13px; margin-top: -13px; }

/* line reveal */
.rf-line { display: block; overflow: hidden; }
.rf-line-in {
  display: block; transform: translateY(110%);
  transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.rf-lines.is-in .rf-line-in { transform: translateY(0); }

/* scroll reveal */
[data-reveal], [data-reveal-stagger] > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1);
}
[data-reveal].is-in, [data-reveal-stagger] > .is-in { opacity: 1; transform: none; }

/* preloader */
[data-preloader] {
  position: fixed; inset: 0; z-index: 10000;
  display: grid; place-items: center;
  transition: opacity .7s ease, visibility .7s ease;
}
[data-preloader].is-done { opacity: 0; visibility: hidden; }

/* scroll progress bar */
[data-scroll-progress] { transform-origin: 0 50%; transform: scaleX(0); }

/* text effect: blur-in per character (ported from Vexon TextEffect) */
.rf-te-word { display: inline-block; }
.rf-te-char {
  display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(.24em);
  transition: opacity .6s ease, filter .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.rf-te.is-in .rf-te-char { opacity: 1; filter: blur(0); transform: none; }

/* blur-in scroll reveal (ported from Vexon itemVariants) */
[data-reveal-blur] {
  opacity: 0; transform: translateY(40px) scale(.965); filter: blur(10px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1), filter .9s ease;
}
[data-reveal-blur].is-in { opacity: 1; transform: none; filter: blur(0); }

/* cursor-follow label (ported from Vexon CursorFollow) */
.rf-cursor-label {
  position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none;
  background: var(--rf-cursor); color: #fff;
  font: 500 11px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 11px; border-radius: 100px; white-space: nowrap; opacity: 0; transition: opacity .18s ease;
}
.rf-cursor-label.is-in { opacity: 1; }

/* logo marquee (ported from Vexon) */
.rf-marquee { display: flex; width: max-content; white-space: nowrap; animation: rf-marquee 42s linear infinite; }
.rf-marquee:hover { animation-play-state: paused; }
@keyframes rf-marquee { to { transform: translateX(-50%); } }

/* corner-bracket frame (ported from Vexon card corners) */
.rf-brackets { position: relative; }
.rf-brackets::before, .rf-brackets::after {
  content: ""; position: absolute; width: 15px; height: 15px; pointer-events: none; opacity: .55;
}
.rf-brackets::before { top: 0; right: 0; border-top: 2px solid currentColor; border-right: 2px solid currentColor; }
.rf-brackets::after { bottom: 0; left: 0; border-bottom: 2px solid currentColor; border-left: 2px solid currentColor; }

/* DiamondStar spin (pair with the inline SVG in _ELEMENTS.md) */
.rf-spin { display: inline-block; transform-style: preserve-3d; animation: rf-spin 3s linear infinite; }
@keyframes rf-spin { to { transform: rotateY(360deg); } }

/* tilt base (JS sets the transform) */
[data-tilt] { transition: transform .3s cubic-bezier(.16,1,.3,1); transform-style: preserve-3d; }

@media (prefers-reduced-motion: reduce) {
  .rf-line-in { transform: none !important; transition: none !important; }
  [data-reveal], [data-reveal-blur], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .rf-te-char { opacity: 1 !important; filter: none !important; transform: none !important; transition: none !important; }
  .rf-marquee, .rf-spin { animation: none !important; }
  [data-tilt] { transform: none !important; }
}

/* brand collapse on scroll: the name folds away, the mark remains */
.brand-word{display:inline-block; max-width:220px; overflow:hidden; white-space:nowrap; vertical-align:middle;
  transition:max-width .5s cubic-bezier(.16,1,.3,1), opacity .32s ease, transform .5s cubic-bezier(.16,1,.3,1), margin .5s cubic-bezier(.16,1,.3,1);}
html.rf-scrolled .brand-word{max-width:0; opacity:0; transform:translateX(-8px); margin-left:0;}
@media (prefers-reduced-motion: reduce){.brand-word{transition:none !important}}


/* collapsed monogram: the R fades in centered inside the crop brackets */
.rf-badge{display:inline-grid; line-height:0}
.rf-badge>img{grid-area:1/1; display:block}
.rf-badge .rf-badge-r{opacity:0; transform:scale(.6); transform-origin:center;
  transition:opacity .3s ease .14s, transform .5s cubic-bezier(.34,1.5,.4,1) .14s;}
html.rf-scrolled .rf-badge .rf-badge-r{opacity:1; transform:scale(1)}
@media (prefers-reduced-motion: reduce){.rf-badge .rf-badge-r{transition:none !important}}

/* ============================================================
   MOBILE DIAGRAM VISIBILITY (site-wide, added 2026-07-07)
   On phones the wide schematic diagrams break out of the text
   column to span the full viewport, then scale to fit so the
   WHOLE diagram (every label + connector) is visible with no
   sideways scroll. Only the big diagram SVGs are widened; the
   small UI icons inside the product panels are left alone.
   !important beats the per-page inline styles.
   ============================================================ */
@media (max-width: 720px){
  /* schematic diagrams span edge to edge for maximum size */
  .fig, .stack-wrap{
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    overflow: visible !important;
  }
  /* only the BIG diagram SVGs scale to full width (never the UI icons) */
  .fig > svg,
  .float-fig > .float-lift > svg,
  .stack-canvas,
  .stack-canvas > svg,
  .hero-fig svg,
  .gx-canvas > svg{
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
  }
  /* keep the product-panel query icon at its intended small size */
  .sa-query{ align-items: flex-start; }
  .sa-query svg{
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    flex: 0 0 auto;
  }
  /* still the float + horizontal drift so nothing is offset past the edge */
  .float-fig .float-lift{ animation: none !important; transform: none !important; }
  .mv2-drift-l, .mv2-drift-r{ transform: none !important; }
}

/* ============================================================
   A11Y + INTERACTION POLISH (ui-ux-pro-max audit, 2026-07-07)
   Focus rings, pointer cursors, contrast-safe faint label token,
   and 44px minimum touch targets. Site-wide.
   ============================================================ */
:root{ --faint-strong:#756c5b; }           /* ~4.85:1 on paper, passes AA for small text */
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
:focus:not(:focus-visible){ outline:none; }
a[href], button, [role="button"], summary{ cursor:pointer; }
.fig-cap, .rate-price .u{ color:var(--faint-strong) !important; }
.btn{ min-height:44px; }
@media (max-width:720px){
  #navToggle{ min-width:44px; min-height:44px; }
  .text-more{ display:inline-flex; align-items:center; min-height:40px; }
}