/* MIRADORE — enhancement layer. Additive only, never overrides base rules.
   Respects prefers-reduced-motion and coarse pointers throughout. */

/* ---------- Scroll progress ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:0%;background:linear-gradient(90deg,var(--aqua),var(--gold));z-index:1200;transition:width .08s linear;pointer-events:none}

/* ---------- Custom cursor: plane + contrail (fine pointers only) ---------- */
@media (hover:hover) and (pointer:fine){
  body.has-cursor{cursor:none}
  body.has-cursor a,body.has-cursor button,body.has-cursor select,body.has-cursor input,body.has-cursor label{cursor:none}
  .cursor-plane{position:fixed;top:0;left:0;width:22px;height:22px;pointer-events:none;z-index:1300;transform:translate(-50%,-50%);will-change:transform;filter:drop-shadow(0 0 6px rgba(255,90,46,.75))}
  .cursor-plane svg{width:100%;height:100%;display:block}
  .cursor-plane.hover{filter:drop-shadow(0 0 12px rgba(255,90,46,.95))}
  .trail-dot{position:fixed;top:0;left:0;width:5px;height:5px;border-radius:50%;background:var(--aqua);pointer-events:none;z-index:1299;transform:translate(-50%,-50%);opacity:.85;transition:opacity .5s linear,transform .5s ease-out}
}

/* ---------- Magnetic buttons ---------- */
.primary,.home-route,.line-button,.outline-button{will-change:transform}

/* ---------- Button sheen sweep ---------- */
.primary{position:relative;overflow:hidden}
.primary::after{content:'';position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(115deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);pointer-events:none}
@media (hover:hover){
  .primary:hover::after{animation:sheen .85s var(--ease)}
}
@keyframes sheen{from{left:-60%}to{left:130%}}

/* ---------- Tilt-on-hover imagery ---------- */
@media (hover:hover) and (pointer:fine){
  .tilt-card{transform-style:preserve-3d}
  .tilt-card.tilt-reset{transition:transform .5s var(--ease)}
}

/* ---------- Route line draw-in ---------- */
.atlas path[data-drawn],#mapRoutes path[data-drawn]{stroke-dasharray:var(--len,1000);stroke-dashoffset:var(--len,1000);transition:stroke-dashoffset 1.1s var(--ease)}
.atlas path[data-drawn].drawn,#mapRoutes path[data-drawn].drawn{stroke-dashoffset:0}

/* ---------- Number/price pop on change ---------- */
.money-pop{animation:pricePop .45s var(--ease)}
@keyframes pricePop{0%{transform:scale(1)}35%{transform:scale(1.12);color:var(--aqua)}100%{transform:scale(1)}}

/* ---------- Section fade/rise variants (extends existing .reveal) ---------- */
.reveal-left{opacity:0;transform:translateX(-28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-left.visible,.reveal-left.entered{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.reveal-right.visible,.reveal-right.entered{opacity:1;transform:translateX(0)}

/* ---------- Kinetic route rail: connects sections down the page ---------- */
@media (min-width:980px){
  .route-rail{position:fixed;left:22px;top:0;bottom:0;width:24px;z-index:140;pointer-events:none}
  .route-track,.route-progress{position:absolute;left:11px;top:0;width:2px;border-radius:2px}
  .route-track{height:100%;background:rgba(245,240,231,.14)}
  .route-progress{height:0%;background:linear-gradient(to bottom,var(--radar),var(--aqua));box-shadow:var(--signal-glow)}
  .route-plane-icon{position:absolute;left:11px;top:0;width:18px;height:18px;transform:translate(-50%,-50%) rotate(180deg);filter:drop-shadow(0 0 8px rgba(255,90,46,.8));transition:top .12s linear}
  .route-plane-icon svg{width:100%;height:100%;display:block}
  .route-waypoint{position:absolute;left:11px;width:8px;height:8px;border-radius:50%;background:rgba(245,240,231,.25);transform:translate(-50%,-50%);transition:background .4s var(--ease),box-shadow .4s var(--ease)}
  .route-waypoint.passed{background:var(--radar);box-shadow:0 0 10px rgba(57,255,143,.85)}
}
@media (max-width:979px){.route-rail{display:none}}

/* ---------- Reduced motion: strip everything above ---------- */
@media (prefers-reduced-motion:reduce){
  .scroll-progress{transition:none}
  .cursor-plane,.trail-dot{display:none}
  body.has-cursor{cursor:auto}
  body.has-cursor a,body.has-cursor button{cursor:pointer}
  .route-progress,.route-plane-icon{transition:none}
  .route-rail{display:none}
  .primary::after{display:none}
  .reveal-left,.reveal-right{opacity:1;transform:none;transition:none}
  .atlas path[data-drawn],#mapRoutes path[data-drawn]{stroke-dasharray:none;stroke-dashoffset:0;transition:none}
  .money-pop{animation:none}
}

/* ---------- FIX: native cursor must return inside modal dialogs ----------
   <dialog> renders in the browser top layer, above every z-index, so the
   custom plane cursor is hidden behind it. Restore the real cursor there. */
@media (hover:hover) and (pointer:fine){
  body.has-cursor dialog,
  body.has-cursor dialog *{cursor:auto !important}
  body.has-cursor dialog a,
  body.has-cursor dialog button,
  body.has-cursor dialog summary,
  body.has-cursor dialog select,
  body.has-cursor dialog label,
  body.has-cursor dialog [role="button"]{cursor:pointer !important}
  body.has-cursor dialog input[type="text"],
  body.has-cursor dialog input[type="number"],
  body.has-cursor dialog input[type="date"]{cursor:text !important}
  body.has-cursor dialog input[type="range"]{cursor:ew-resize !important}
  /* hide the custom cursor entirely while a modal is open */
  body.modal-open .cursor-plane,
  body.modal-open .trail-dot{display:none !important}
  body.modal-open{cursor:auto !important}
}