/* 3daccessories.gr — base styles.
   Extracted from the source page; the hover/focus rules at the bottom replace the
   design-tool's style-hover/style-focus attributes with real CSS. */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #08090b; color: #f2f4f6; font-family: 'Commissioner', system-ui, sans-serif; overflow-x: hidden; }
* { box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--acc, #e8b923); }
::selection { background: var(--acc, #e8b923); color: #08090b; }
[data-rail] { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
[data-rail]::-webkit-scrollbar { display: none; }
html { scrollbar-width: thin; scrollbar-color: #3a4048 transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #3a4048; border: 3px solid #08090b; border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--acc, #e8b923); }
::-webkit-scrollbar-corner { background: transparent; }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 30px, 0); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
/* The hero's rise/fade are applied as inline styles, which outrank a stylesheet rule, so
   the clamp has to be !important. Near-zero rather than `none` keeps each animation's
   fill-mode end state and still fires animationend, which the car's framing waits on. */
/* The contact form alone is ~674px tall. In a 100svh box with justify-content:space-between,
   a viewport shorter than that gives the flex line NEGATIVE free space, which space-between
   distributes by pushing items past both edges — so the left column (copy + Instagram DM
   link) ends up above the section's top, where overflow:hidden erases it. Below 780px tall
   the section stops pinning to the viewport and simply flows, so nothing can be clipped.
   Taller viewports are untouched. Media queries cannot be inline, hence the !important. */
@media (max-height: 780px) {
  #contact {
    min-height: 0 !important;
    justify-content: flex-start !important;
    overflow: visible !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-delay: 0s !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
}

/* --- the runtime used to compile these from style-hover / style-focus attributes --- */
.hv0:hover { color:var(--nav-fg,#f2f4f6) !important; }
.hv1:hover { opacity:.7 !important; color:var(--nav-acc,#e8b923) !important; }
.hv2:hover { transform:translateY(-3px) !important; color:#08090b !important; }
.hv3:hover { transform:translateY(-3px) !important; }
.hv4:hover { color:#f2f4f6 !important; }
.hv5:hover { border-color:var(--acc,#e8b923) !important; background:rgba(232,185,35,.1) !important; }
.hv6:hover { color:var(--acc,#e8b923) !important; transform:translateY(-50%) scale(1.14) !important; }
.hv7:hover { color:var(--acc,#e8b923) !important; }
.fc8:focus { border-color:var(--acc,#e8b923) !important; }

/* --- product placeholder ---
   Shown only when a print's geometry cannot be decoded (no WebGL, a failed fetch).
   The 3D stage hides it as soon as it has a mesh for that card. */
.ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
  background: linear-gradient(160deg, #14181d 0%, #0d1014 100%);
  border: 1px solid rgba(255,255,255,.07);
  font-family: 'Fira Mono', ui-monospace, monospace;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #5c636c;
}

/* --- focus visibility ---
   Every interactive element on the page carries its own inline styling, so the only
   thing missing was a keyboard ring. This is the one selector that provides it. */
:focus-visible { outline: 2px solid var(--acc, #e8b923); outline-offset: 3px; }

/* Cards are made operable from the keyboard by app.js; without JS they are inert
   markup and must not advertise a pointer. */
article[data-card] { cursor: default; }
article[data-card][tabindex] { cursor: pointer; }

/* No-JS: the process section is 400vh of pinned horizontal scroll driven entirely by
   script. With no script it must simply stack and read as four steps. */
.no-js #process { height: auto !important; }
.no-js #process > div:last-child { position: static !important; height: auto !important; overflow: visible !important; }
.no-js [data-rail="q"] { width: 100% !important; flex-direction: column; }
.no-js [data-rail="q"] > div { width: 100% !important; padding: 40px 16px !important; }
.no-js [data-rail="p"] { height: auto !important; }
.no-js article[data-card] { position: static !important; transform: none !important; opacity: 1 !important; width: 100% !important; margin: 0 auto 40px; max-width: 560px; }
.no-js [data-ref="pPrev"], .no-js [data-ref="pNext"], .no-js [data-ref="lbRef"] { display: none !important; }
.no-js print-hero { display: none !important; }

/* --- skip link ---
   The first tab stop on the page, visible only while focused. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: 14px 20px; background: var(--acc, #e8b923); color: #08090b;
  font-family: 'Fira Mono', ui-monospace, monospace; font-size: 12px;
  letter-spacing: .1em; text-transform: uppercase;
}
.skip:focus { left: 0; color: #08090b; }