/* Hookforge marketing site — global styles ported from the design handoff.
   Layout values live inline on the elements (handoff convention); this file
   holds base rules, hover/focus states, and the heat-behavior motion spec. */

html, body { margin: 0; padding: 0; background: #16130F; scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: #E1622F; text-decoration: none; }
a:hover { color: #F2A65A; }
::selection { background: #E1622F; color: #16130F; }
input::placeholder { color: #6B6250; }
summary::-webkit-details-marker { display: none; }
[hidden] { display: none !important; }

/* Keyboard focus */
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #F2A65A; outline-offset: 3px; }
.hf-btn-primary:focus-visible, .hf-btn-secondary:focus-visible, .hf-chip:focus-visible { outline-offset: 2px; }

/* Hover states (inline styles hold the rest state, so these need !important) */
.hf-navlink:hover { color: #F2A65A !important; box-shadow: inset 0 -2px 0 #E1622F !important; }
.hf-btn-primary:hover, .hf-btn-primary:focus-visible { background: #E86A38 !important; box-shadow: 0 0 28px rgba(225, 98, 47, 0.4) !important; transform: translateY(-2px); color: #16130F !important; }
.hf-btn-primary--sm:hover, .hf-btn-primary--sm:focus-visible { box-shadow: 0 0 24px rgba(225, 98, 47, 0.35) !important; transform: translateY(-1px); }
.hf-btn-primary--noshift:hover, .hf-btn-primary--noshift:focus-visible { transform: none; }
.hf-btn-secondary:hover, .hf-btn-secondary:focus-visible { border-color: #E1622F !important; color: #F2A65A !important; transform: translateY(-2px); }
.hf-lift:hover { border-color: rgba(225, 98, 47, 0.55) !important; transform: translateY(-3px); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 24px rgba(225, 98, 47, 0.12) !important; }
.hf-module:hover { border-color: #E1622F !important; box-shadow: 0 0 32px rgba(225, 98, 47, 0.12) !important; transform: translateY(-4px); }
.hf-receipt:hover { border-color: rgba(225, 98, 47, 0.5) !important; box-shadow: 0 0 36px rgba(225, 98, 47, 0.1) !important; }
.hf-chip:hover { border-color: #E1622F !important; color: #E8E2D6 !important; background: rgba(225, 98, 47, 0.08) !important; }
.hf-warm:hover { color: #F2A65A !important; }
.hf-input:focus { border-color: #E1622F !important; outline: none; }

/* Forms */
.hf-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hf-form-err { font-family: 'Cascadia Mono', Consolas, ui-monospace, monospace; font-size: 10.5px; letter-spacing: 0.06em; color: #E1622F; line-height: 1.5; }

/* Reduced motion kills everything */
@media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; animation: none !important; } }

/* Stacked layout below 1020px: horizontal flow threads become vertical */
@media (max-width: 1020px) { [data-hf-thread-h] { display: none !important; } [data-hf-thread-v] { display: flex !important; } }
@media (max-width: 1020px) { [data-hf-sigcol] { flex-basis: 100% !important; } }

/* Heat behavior — callouts, cards, threads, beams (from the handoff) */
@keyframes hfFlow { from { background-position: 0% 0%; } to { background-position: 200% 200%; } }
[data-hf-callout] { transition: color 0.4s ease; }
[data-hf-callout]:hover { color: #F2A65A; }
[data-hf-callout] [data-hf-line] { transition: background 0.4s ease, box-shadow 0.4s ease; }
[data-hf-callout]:hover [data-hf-line] { background: #E1622F; box-shadow: 0 0 8px rgba(225, 98, 47, 0.45); }
[data-hf-callout] [data-hf-dot] { transition: box-shadow 0.4s ease, transform 0.4s ease; }
[data-hf-callout]:hover [data-hf-dot] { box-shadow: 0 0 10px rgba(225, 98, 47, 0.85); transform: scale(1.3); }
[data-hf-panel] { transition: border-color 0.4s ease; }
[data-hf-card]:hover [data-hf-panel] { border-color: rgba(225, 98, 47, 0.45); }
[data-hf-stat] { transition: border-color 0.4s ease, transform 0.4s ease, box-shadow 0.4s ease; }
[data-hf-stat]:hover { border-color: rgba(225, 98, 47, 0.55); transform: translateY(-3px); box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35), 0 0 24px rgba(225, 98, 47, 0.1); }
[data-hf-stat] > div:first-child { transition: text-shadow 0.4s ease; }
[data-hf-stat]:hover > div:first-child { text-shadow: 0 0 18px rgba(225, 98, 47, 0.55); }
summary > span { transition: transform 0.4s ease; }
details[open] > summary > span { transform: rotate(45deg); }

/* Corner-to-corner ember trace on CTAs and signature objects */
@property --hf-a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes hfTrace { to { --hf-a: 360deg; } }
[data-hf-btn] { position: relative; }
[data-hf-btn]::after { content: ''; position: absolute; inset: -3px; border-radius: 7px; padding: 2px; background: conic-gradient(from var(--hf-a), transparent 0deg 260deg, rgba(242, 166, 90, 0.4) 300deg, #F2A65A 330deg, #E1622F 358deg, transparent 360deg); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; pointer-events: none; }
[data-hf-btn]:hover::after, [data-hf-btn]:focus-visible::after { opacity: 1; animation: hfTrace 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { [data-hf-btn]:hover::after { animation: none; background: conic-gradient(from 0deg, rgba(225, 98, 47, 0.5) 0deg 360deg); } }

/* Traveling ember dot on flow lines */
@keyframes hfDotX { 0% { left: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@keyframes hfDotY { 0% { top: 0%; opacity: 0; } 12% { opacity: 1; } 88% { opacity: 1; } 100% { top: calc(100% - 6px); opacity: 0; } }
[data-hf-flow] > [data-hf-dot] { position: absolute; width: 6px; height: 6px; border-radius: 50%; background: #F2A65A; box-shadow: 0 0 10px rgba(225, 98, 47, 0.9); }
[data-hf-flow="h"] > [data-hf-dot] { top: 50%; margin-top: -3px; left: 0; animation: hfDotX 2.4s ease-in-out infinite; }
[data-hf-flow="v"] > [data-hf-dot] { left: 50%; margin-left: -3px; top: 0; animation: hfDotY 2.4s ease-in-out infinite; }
[data-hf-track] { transition: background 0.4s ease, box-shadow 0.4s ease; }
[data-hf-src]:hover + [data-hf-flow] [data-hf-track] { background: #E1622F; box-shadow: 0 0 10px rgba(225, 98, 47, 0.5); }
[data-hf-row] { transition: color 0.4s ease; }
[data-hf-row]:hover { color: #E8E2D6; }
[data-hf-fill] { transition: box-shadow 0.4s ease; }
[data-hf-row]:hover [data-hf-fill] { box-shadow: 0 0 16px rgba(225, 98, 47, 0.6); }

/* Section separator beams */
@keyframes hfBeam { 0% { left: -260px; opacity: 0; } 6% { opacity: 1; } 94% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
[data-hf-sep] { position: relative; }
[data-hf-sep]::after { content: ''; position: absolute; top: 0; left: -260px; width: 260px; height: 1px; background: linear-gradient(90deg, transparent, #F2A65A, #E1622F, transparent); box-shadow: 0 0 12px rgba(225, 98, 47, 0.55); animation: hfBeam 8s linear infinite; pointer-events: none; }
[data-hf-sep="2"]::after { animation-delay: -1.7s; }
[data-hf-sep="3"]::after { animation-delay: -3.4s; }
[data-hf-sep="4"]::after { animation-delay: -5.1s; }
[data-hf-sep="5"]::after { animation-delay: -6.8s; }
[data-hf-sep="6"]::after { animation-delay: -2.5s; }
[data-hf-sep="7"]::after { animation-delay: -4.2s; }
[data-hf-sep="8"]::after { animation-delay: -5.9s; }
[data-hf-sep="9"]::after { animation-delay: -0.8s; }
[data-hf-sep="10"]::after { animation-delay: -2.9s; }
[data-hf-sep="11"]::after { animation-delay: -6.2s; }