/* =========================================================
   Engineered Realities Hero
   ========================================================= */

/* Tweak here without touching HTML */
:root {
  --engineered-height: 60vh;      /* set to 100vh for full-screen */
  --engineered-zoom: 1.06;        /* subtle zoom amount */
  --engineered-blur: 2px;         /* subtle blur amount */
}

.engineered-bg {
  position: relative;
  min-height: var(--engineered-height);
  display: flex;
  align-items: center;
  overflow: hidden;

  /* Parallax feel on desktop; disabled on small/touch below */
  background: #000 url("/images/spotlight-bg.png") center top / cover no-repeat fixed;
}

/* Breathing motion on a pseudo so text stays crisp */
.engineered-bg::before {
  content: "";
  position: absolute; inset: 0;
  background: inherit;
  background-attachment: inherit;
  transform: scale(1);
  filter: blur(0px);
  z-index: 0;
  animation: eng-zoom 8s ease-in-out infinite;
}

/* Subtle overall dark wash */
.engineered-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: rgba(0,0,0,0.25);
  pointer-events: none;
}

/* Bottom fade so white type pops; keep it restrained */
.engineered-fade {
  position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 55%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
}

/* Keep content above overlays */
.engineered-bg .container {
  position: relative; z-index: 3;
}

/* Title styling (text version) */
.engineered-title {
  margin: 0;
  font-size: clamp(28px, 6vw, 86px);
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.08;
}

/* If/when you use an image for the title instead of text */
.engineered-title-image {
  display: inline-block;
  max-width: min(90vw, 1000px)



/* --------------- BUTTON CODE -------------------------------- */

:root{
  --neon: #00D4FF;
  /* Slowed by 26% (1035ms → 1305ms) */
  --sheen-dur: 1305ms;
  --sheen-stagger: 14ms;
  --sheen-delay: 80ms; /* slight pause before sheen starts */
  --sheen-ease: cubic-bezier(.15,.90,.30,1);
}

/* Base button */
.neon-btn{
  background-color: var(--neon);
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.10), rgba(0,0,0,0.10));
  border: 2px solid #3a3a3a;
  color: #FFFFFF;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
  transform-origin: center;
  z-index: 0;
  margin: 0 22px;

  display:inline-flex; align-items:center; justify-content:center;
  padding:11px 24px;   /* default padding */
  font-size:0.98rem;   /* default font size */

  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.35),
    inset 0 -4px 12px rgba(0,0,0,0.35),
    0 4px 10px rgba(0,0,0,0.18);
}

/* Optional size overrides */
.neon-btn-sm{ font-size:0.82rem;  padding:7px 16px; }
.neon-btn-md{ font-size:0.98rem;  padding:11px 24px; }

/* Text wrapper */
.neon-btn .neon-label{
  display:inline-block;
  color: inherit;
  text-shadow:
    0 0 2px rgba(0,0,0,0.85),
    0 0 6px rgba(0,0,0,0.55);
  transform: none;
  transition: none;
}

/* Hover/focus text */
.neon-btn:hover .neon-label,
.neon-btn:focus .neon-label{
  color: #FFFFFF;
  text-shadow:
    0 0 2px rgba(0,0,0,0.9),
    0 0 8px rgba(0,0,0,0.6);
}

/* Sheen layers */
.neon-btn::after,
.neon-btn::before{
  content:"";
  position:absolute; top:0; left:0;
  height:100%;
  width:54%;
  pointer-events:none;
  transform: skewX(-25deg) translateX(-140%);
  will-change: transform;
  transition:
    transform var(--sheen-dur) var(--sheen-ease) var(--sheen-delay);
  background: linear-gradient(120deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0) 80%);
  opacity: .92;
}
.neon-btn::before{
  transition-delay: calc(var(--sheen-delay) + var(--sheen-stagger));
}

/* Hover IN — sweep */
.neon-btn:hover::after,
.neon-btn:focus::after{
  transform: skewX(-25deg) translateX(260%);
}
.neon-btn:hover::before,
.neon-btn:focus::before{
  transform: skewX(-25deg) translateX(260%);
}

/* Mouseout = auto reverse */

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .neon-btn .neon-label{ transition:none !important; transform:none !important; }
  .neon-btn::after, .neon-btn::before{ transition:none !important; transform:none !important; }
}