/* site.css — IntelCS global styles
 * Extracted from the original index.html <helmet> <style> block (lines 18–53).
 * All inline styles remain on elements; this file holds the base/reset, keyframes,
 * responsive breakpoints, and hover/focus classes that replace the DC runtime's
 * style-hover / style-focus pseudo-attribute system.
 */

:root { --accent: #C6A47E; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #0A0B0C; }
body { font-family: 'IBM Plex Sans', system-ui, sans-serif; color: #ECEBE7; -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: #ECEBE7; }
::selection { background: rgba(198,164,126,0.28); }

@keyframes om-float { 0% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-2.5%,-1.8%,0) scale(1.06); } 100% { transform: translate3d(0,0,0) scale(1); } }
@keyframes om-pulse { 0%, 100% { opacity: 0.15; r: 3; } 50% { opacity: 0.9; } }
@keyframes om-trace { from { stroke-dashoffset: 620; } to { stroke-dashoffset: 0; } }
@keyframes om-fade { 0%, 100% { opacity: 0.1; } 50% { opacity: 0.85; } }

[data-grid="8"], [data-grid="4"] { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 719px) { [data-grid="8"], [data-grid="4"] { grid-template-columns: minmax(0,1fr); } }
@media (min-width: 1080px) { [data-grid="8"] { grid-template-columns: repeat(4, minmax(0,1fr)); } }
@media (prefers-reduced-motion: reduce) { [data-anim] { animation: none !important; } }
img, video { max-width: 100%; }

[data-ticker-mask] { -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 10%, rgba(0,0,0,0.45) 26%, #000 37%, #000 60%, rgba(0,0,0,0.4) 74%, rgba(0,0,0,0.1) 88%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 10%, rgba(0,0,0,0.45) 26%, #000 37%, #000 60%, rgba(0,0,0,0.4) 74%, rgba(0,0,0,0.1) 88%, rgba(0,0,0,0) 100%); }

@media (max-width: 1023px) {
  header nav { display: none !important; }
  [data-mnav] { display: flex !important; }
}
@media (max-width: 900px) {
  [data-stack] { grid-template-columns: minmax(0,1fr) !important; }
  [data-stack="rows"] { gap: 10px !important; }
  [data-shift-head] { display: none !important; }
  [data-cell-label]::before { content: attr(data-cell-label); display: block; font-family: 'IBM Plex Mono', monospace; font-size: 10px; letter-spacing: 0.14em; color: rgba(236,235,231,0.58); margin-bottom: 5px; }
  [data-footer-grid] { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
  [data-divider-right] { border-right: none !important; border-bottom: 1px solid rgba(236,235,231,0.09) !important; }
}
@media (max-width: 560px) {
  [data-stack-sm] { grid-template-columns: minmax(0,1fr) !important; }
  [data-footer-grid] { grid-template-columns: minmax(0,1fr) !important; }
  [data-tabs] { flex-direction: column !important; }
}

/* ── Hover / focus classes ───────────────────────────────────────────
 * Replace the DC runtime's style-hover / style-focus pseudo-attributes.
 * The runtime generated :hover / :focus rules from those attributes
 * (support.js collectProps → pseudoClass). These classes replicate the
 * exact same CSS declarations with !important to override inline styles.
 */

/* style-hover="color:#ECEBE7" */
.hov-light:hover { color: #ECEBE7 !important; }

/* style-hover="border-color:var(--accent)" */
.hov-border:hover { border-color: var(--accent) !important; }

/* style-hover="border-color:var(--accent); color:var(--accent)" */
.hov-border-accent:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* style-hover="background:var(--accent)" */
.hov-bg-accent:hover { background: var(--accent) !important; }

/* style-hover="background:#101214" */
.hov-bg-card:hover { background: #101214 !important; }

/* style-focus="border-color:var(--accent)" */
.foc-accent:focus { border-color: var(--accent) !important; }

/* Cookie consent preferences link — hidden by default */
#open_preferences_center { display: none; }