/* Travis Williams — site styles (structure/typography live inline in the HTML) */

html, body { margin: 0; padding: 0; background: #12100E; }
html { scroll-behavior: smooth; }
::selection { background: #8C7455; color: #12100E; }

/* keyframes */
@keyframes photoIn { from { opacity: 0; } to { opacity: 0.85; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
@keyframes cueDrop { 0% { transform: translateY(-20px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(48px); opacity: 0; } }
@keyframes engineSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* hero image framing */
#heroImg { transform-origin: 35% 22%; }
@media (min-width: 761px) and (max-width: 1439px) { #heroImg { object-position: 60% 26% !important; } }
@media (min-width: 761px) and (max-width: 1024px) { #heroImg, #heroWash { width: 40vw !important; right: 0 !important; } #heroImg { object-position: 72% 26% !important; opacity: 0.7 !important; } }
@media (min-width: 1440px) { #heroImg { transform: scale(1.75) translateY(-7%); } }
@media (min-width: 1920px) { #heroImg { transform: scale(2) translateY(-7%); } }

/* phones */
@media (max-width: 760px) {
  #heroImg { width: 100% !important; right: 0 !important; height: 66% !important; object-position: 50% 14% !important; transform: none !important; opacity: 0.5 !important; -webkit-mask-image: linear-gradient(to bottom, black 40%, transparent 96%) !important; mask-image: linear-gradient(to bottom, black 40%, transparent 96%) !important; }
  #heroWash { width: 100% !important; right: 0 !important; height: 66% !important; }
  #heroContent { padding-left: 28px !important; padding-right: 28px !important; justify-content: flex-end !important; padding-bottom: 90px !important; }
  #contactImg { display: none !important; }
  #contactImgM { display: block !important; }
}

/* desktop cinematic scroll (sticky stage) */
@media (min-width: 1024px) and (min-height: 700px) {
  [data-sc-section] { height: 235vh; }
  [data-sc-stage] { position: sticky; top: 0; height: 100vh; min-height: 0 !important; padding-top: 40px !important; padding-bottom: 40px !important; }
}

/* stacked layout (tablet / small desktop) */
@media (max-width: 1023px) {
  [data-sc-main] { grid-template-columns: 1fr !important; gap: 30px !important; }
  [data-sc-proof] { grid-template-columns: 1fr !important; gap: 24px !important; }
  [data-sc-stage] { min-height: auto !important; padding-top: 96px !important; padding-bottom: 96px !important; }
  [data-sc-arrow] { display: none !important; }
  [data-sc-inputs-order] { order: 1 !important; }
  [data-sc-engine-order] { order: 2 !important; }
  [data-sc-funnel-order] { order: 3 !important; }
  [data-engine-wrap] { max-width: 320px !important; }
  [data-engine-label] { font-size: 10px !important; }
  [data-proof-panel] > svg, [data-proof-panel] svg[role="img"] { max-width: 520px; margin-left: auto !important; margin-right: auto !important; }
}

/* hover states (override inline styles) */
#heroCta:hover { background: #8C7455 !important; color: #12100E !important; border-color: #8C7455 !important; letter-spacing: 0.2em !important; }
#scrollCue:hover { color: #A69F90 !important; }
.contact-link:hover { color: #C9A24B !important; border-bottom-color: #C9A24B !important; padding-left: 6px !important; }
.back-top:hover { color: #C9A24B !important; }

/* keyboard focus */
a:focus-visible { outline: 2px solid #C9A24B; outline-offset: 4px; border-radius: 2px; }

/* reduced motion: everything remains visible, nothing animates */
@media (prefers-reduced-motion: reduce) {
  [data-anim] { animation: none !important; opacity: 1 !important; }
  [data-anim="photo"] { opacity: 0.85 !important; }
  [data-emblem-spin] { animation: none !important; }
  html { scroll-behavior: auto; }
}