/* ============================================================
   HIGH PLAINS RANCH — precision tech layer
   Luxury dark + gold, instrument-panel motion.
   Progressive enhancement: everything here layers on top of
   the original build and degrades to nothing without JS.
   ============================================================ */

:root {
  --hp-gold: #c9a962;
  --hp-gold-light: #dfc07f;
  --hp-void: #0a0a0a;
  --hp-ease: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- scroll progress beam ---------- */
#hp-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  z-index: 9999;
  pointer-events: none;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, rgba(201,169,98,.0), var(--hp-gold) 40%, var(--hp-gold-light));
  box-shadow: 0 0 12px rgba(201,169,98,.55);
}
#hp-progress::after {
  content: "";
  position: absolute;
  right: -2px; top: -2px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--hp-gold-light);
  box-shadow: 0 0 10px 2px rgba(223,192,127,.8);
}

/* ---------- blueprint grid + drifting aurora ---------- */
#hp-atmosphere {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}
#hp-atmosphere .hp-grid {
  position: absolute;
  inset: -1px;
  background-image:
    linear-gradient(rgba(201,169,98,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(201,169,98,.045) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 120% 90% at 50% 40%, black 30%, transparent 75%);
}
#hp-atmosphere .hp-aurora {
  position: absolute;
  width: 60vmax; height: 60vmax;
  left: -18vmax; top: -22vmax;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,169,98,.05), transparent 62%);
  animation: hp-drift 36s var(--hp-ease) infinite alternate;
  will-change: transform;
}
@keyframes hp-drift {
  0%   { transform: translate(0, 0) scale(1); }
  50%  { transform: translate(48vw, 16vh) scale(1.25); }
  100% { transform: translate(18vw, 42vh) scale(.9); }
}

/* ---------- cursor reticle (fine pointers only) ---------- */
#hp-cursor {
  position: fixed;
  left: 0; top: 0;
  width: 30px; height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid rgba(201,169,98,.55);
  border-radius: 50%;
  z-index: 10000;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s ease, width .35s var(--hp-ease), height .35s var(--hp-ease),
              margin .35s var(--hp-ease), border-color .35s ease, background .35s ease;
}
#hp-cursor::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 3px; height: 3px;
  margin: -1.5px 0 0 -1.5px;
  border-radius: 50%;
  background: var(--hp-gold);
}
#hp-cursor.hp-cursor-on { opacity: 1; }
#hp-cursor.hp-cursor-hot {
  width: 52px; height: 52px;
  margin: -26px 0 0 -26px;
  border-color: rgba(223,192,127,.9);
  background: rgba(201,169,98,.06);
}
@media (pointer: coarse) { #hp-cursor { display: none; } }

/* ---------- buttons: engineered motion ---------- */
[data-hp-btn] {
  position: relative;
  overflow: hidden;
  will-change: transform;
}
[data-hp-btn] > * { position: relative; z-index: 2; }

/* periodic shine sweep across solid CTAs */
[data-hp-btn="solid"]::after {
  content: "";
  position: absolute;
  top: -60%; bottom: -60%;
  left: -80%;
  width: 45%;
  z-index: 1;
  transform: skewX(-22deg) translateX(0);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  animation: hp-sweep 5.2s var(--hp-ease) infinite;
  pointer-events: none;
}
@keyframes hp-sweep {
  0%, 62%  { left: -80%; opacity: 0; }
  68%      { opacity: 1; }
  86%, 100%{ left: 160%; opacity: 0; }
}

/* rotating conic border for outline CTAs */
[data-hp-btn="outline"] { overflow: visible; }
[data-hp-btn="outline"]::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 0;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--hp-angle, 0deg),
    transparent 0 18%, var(--hp-gold) 32%, var(--hp-gold-light) 38%, transparent 52% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s ease;
  animation: hp-spin 2.6s linear infinite;
  pointer-events: none;
}
@property --hp-angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes hp-spin { to { --hp-angle: 360deg; } }
[data-hp-btn="outline"]:hover::before { opacity: 1; }

/* HUD corner brackets, revealed on hover */
.hp-corner {
  position: absolute;
  width: 9px; height: 9px;
  z-index: 3;
  opacity: 0;
  transition: opacity .3s ease, transform .45s var(--hp-ease);
  pointer-events: none;
}
.hp-corner-tl { top: 4px; left: 4px; border-top: 1.5px solid var(--hp-gold-light); border-left: 1.5px solid var(--hp-gold-light); transform: translate(6px, 6px); }
.hp-corner-tr { top: 4px; right: 4px; border-top: 1.5px solid var(--hp-gold-light); border-right: 1.5px solid var(--hp-gold-light); transform: translate(-6px, 6px); }
.hp-corner-bl { bottom: 4px; left: 4px; border-bottom: 1.5px solid var(--hp-gold-light); border-left: 1.5px solid var(--hp-gold-light); transform: translate(6px, -6px); }
.hp-corner-br { bottom: 4px; right: 4px; border-bottom: 1.5px solid var(--hp-gold-light); border-right: 1.5px solid var(--hp-gold-light); transform: translate(-6px, -6px); }
[data-hp-btn]:hover .hp-corner { opacity: 1; transform: translate(0, 0); }
[data-hp-btn="solid"] .hp-corner-tl,
[data-hp-btn="solid"] .hp-corner-tr,
[data-hp-btn="solid"] .hp-corner-bl,
[data-hp-btn="solid"] .hp-corner-br { border-color: rgba(10,10,10,.75); }

/* ---------- replaced icons: instrument dials ---------- */
.hp-icon {
  position: relative;
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-icon .hp-icon-ring {
  position: absolute;
  inset: 0;
  animation: hp-ring-spin 24s linear infinite;
}
.hp-icon .hp-icon-ring circle {
  fill: none;
  stroke: rgba(201,169,98,.35);
  stroke-width: 1;
  stroke-dasharray: 3 7;
}
@keyframes hp-ring-spin { to { transform: rotate(360deg); } }
.hp-icon .hp-icon-glyph {
  width: 30px; height: 30px;
  stroke: var(--hp-gold);
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .5s var(--hp-ease), stroke .4s ease, filter .4s ease;
}
.hp-icon .hp-icon-glyph path,
.hp-icon .hp-icon-glyph circle,
.hp-icon .hp-icon-glyph line,
.hp-icon .hp-icon-glyph polyline,
.hp-icon .hp-icon-glyph rect {
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  transition: stroke-dashoffset 1.1s var(--hp-ease);
}
.hp-icon.hp-icon-in .hp-icon-glyph path,
.hp-icon.hp-icon-in .hp-icon-glyph circle,
.hp-icon.hp-icon-in .hp-icon-glyph line,
.hp-icon.hp-icon-in .hp-icon-glyph polyline,
.hp-icon.hp-icon-in .hp-icon-glyph rect { stroke-dashoffset: 0; }
.group:hover .hp-icon .hp-icon-glyph,
.hp-icon:hover .hp-icon-glyph {
  transform: scale(1.12) rotate(-4deg);
  stroke: var(--hp-gold-light);
  filter: drop-shadow(0 0 6px rgba(201,169,98,.6));
}
.group:hover .hp-icon .hp-icon-ring,
.hp-icon:hover .hp-icon-ring { animation-duration: 6s; }
.hp-icon .hp-icon-ring { transition: none; }

/* ---------- card tilt support ---------- */
.hp-tilt {
  transform-style: preserve-3d;
  will-change: transform;
}

/* ---------- calm mode ---------- */
@media (prefers-reduced-motion: reduce) {
  #hp-cursor, #hp-atmosphere .hp-aurora { display: none; }
  [data-hp-btn="solid"]::after { animation: none; opacity: 0; }
  [data-hp-btn="outline"]::before { animation: none; }
  .hp-icon .hp-icon-ring { animation: none; }
  .hp-icon .hp-icon-glyph path,
  .hp-icon .hp-icon-glyph circle,
  .hp-icon .hp-icon-glyph line,
  .hp-icon .hp-icon-glyph polyline,
  .hp-icon .hp-icon-glyph rect { stroke-dashoffset: 0; transition: none; }
}