/* Crown Point FX styles. Usage notes live at the top of assets/js/fx.js.
   Tokens come from system.css (DESIGN-SYSTEM.md); fallbacks match it exactly.
   Only transform and opacity animate. Anything that hides or dims content is gated by html.fx
   (set by fx.js) and prefers-reduced-motion:no-preference. */
:root{
  --fx-ink:rgba(236,233,225,.5);
  --fx-accent:var(--sign,#F2CE3B);
  --fx-ease:var(--ease-ramp,cubic-bezier(.16,.84,.24,1));
}

/* ---------- 1. hero drawings ---------- */
.fx-art{position:absolute;inset:0;overflow:hidden;pointer-events:none}
canvas[data-fx-hero]{display:block;width:100%;height:100%;color:var(--fx-ink);--fx-accent:var(--sign,#F2CE3B)}
.light canvas[data-fx-hero]{color:rgba(13,15,20,.5);--fx-accent:var(--fascia,#2B3C96)}
@media (prefers-reduced-motion:no-preference){
  html.fx canvas[data-fx-hero]{opacity:0;transition:opacity .8s var(--fx-ease)}
  html.fx canvas[data-fx-hero].is-drawn{opacity:1}
}

/* ---------- 2. scroll storytelling ---------- */
[data-fx-rule]{display:block;height:1px;border:0;margin:0;background:var(--steel,#8C919A);opacity:.5;transform-origin:0 50%}
.light [data-fx-rule]{background:var(--ink,#0D0F14);opacity:.25}
@media (prefers-reduced-motion:no-preference){
  html.fx [data-fx-rule]{transform:scaleX(0)}
  html.fx [data-fx-parallax]{will-change:transform}
  html.fx [data-fx-step]{opacity:.35;transition:opacity .6s var(--fx-ease)}
  html.fx [data-fx-step].is-active{opacity:1}
  html.fx [data-fx-steps] [data-fx-show]{opacity:0;transition:opacity .9s var(--fx-ease)}
  html.fx [data-fx-steps] [data-fx-show].is-active{opacity:1}
}

/* ---------- 3. hover + cursor ---------- */
.fx-link{position:relative;text-decoration:none}
.fx-link::after{content:"";position:absolute;left:0;right:0;bottom:-.14em;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--fx-ease)}
.fx-link:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.fx-btn__arrow{display:inline-block;transition:transform .45s var(--fx-ease)}
.fx-card{position:relative;transition:transform .7s var(--fx-ease)}
.fx-card::after{content:"";position:absolute;inset:0;pointer-events:none;border:1px solid var(--fx-accent);opacity:0;transition:opacity .5s var(--fx-ease)}
.light .fx-card::after{border-color:var(--fascia,#2B3C96)}
.fx-card:focus-within::after{opacity:.7}
.fx-card__media{overflow:hidden}
.fx-card__media img{transition:transform 1.1s var(--fx-ease)}
[data-fx-magnetic]{transition:transform .5s var(--fx-ease)}
.fx-cursor{position:fixed;left:0;top:0;z-index:60;width:0;height:0;pointer-events:none;opacity:0;transition:opacity .25s}
.fx-cursor.is-on{opacity:1}
.fx-cursor::before,.fx-cursor::after{content:"";position:absolute;background:var(--sign,#F2CE3B)}
.fx-cursor::before{left:-14px;top:-.5px;width:28px;height:1px}
.fx-cursor::after{top:-14px;left:-.5px;width:1px;height:28px}
@media (hover:hover) and (pointer:fine){
  .fx-link:hover::after{transform:scaleX(1);transform-origin:0 50%}
  .fx-btn:hover .fx-btn__arrow{transform:translate3d(5px,0,0)}
  .fx-card:hover{transform:translate3d(0,-4px,0)}
  .fx-card:hover::after{opacity:.7}
  .fx-card:hover .fx-card__media img{transform:scale(1.04)}
}

/* ---------- 4. page transitions: the twin rails wipe across the top ---------- */
@media (prefers-reduced-motion:no-preference){
  html::after{content:"";position:fixed;left:0;right:0;top:0;z-index:70;height:16px;box-sizing:border-box;
    border-block:3px solid var(--sign,#F2CE3B);pointer-events:none;transform:scaleX(0);transform-origin:0 50%;
    view-transition-name:fx-rails}
  @view-transition{navigation:auto}
  .hdr{view-transition-name:fx-hdr}
  ::view-transition-group(fx-hdr),::view-transition-group(fx-rails){animation:none}
  ::view-transition-old(fx-rails){display:none}
  ::view-transition-old(root){animation:fx-out .28s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:fx-in .7s var(--fx-ease) both}
  html.fx-leave::after{transform:scaleX(1);transition:transform .22s cubic-bezier(.4,0,1,1)}
  html.fx-leave main,html.fx-leave .ftr{opacity:0;transition:opacity .2s ease}
}
@media (prefers-reduced-motion:no-preference){
  html:active-view-transition::after{animation:fx-rails .9s var(--fx-ease) both}
}
@keyframes fx-out{to{opacity:0;transform:translate3d(0,-1.5vh,0)}}
@keyframes fx-in{from{opacity:0;transform:translate3d(0,3vh,0) scale(.985)}}
@keyframes fx-rails{0%{transform:scaleX(1);transform-origin:100% 50%}100%{transform:scaleX(0);transform-origin:100% 50%}}

/* ---------- reduced motion: fully static ---------- */
@media (prefers-reduced-motion:reduce){
  .fx-link::after,.fx-btn__arrow,.fx-card,.fx-card::after,.fx-card__media img,[data-fx-magnetic],[data-fx-step],[data-fx-show]{transition:none!important;animation:none!important}
  .fx-cursor{display:none}
}