/* ============================================================================
   GUARDIAN ANGELS — "GENTLE WATCH" motion layer                    (2026-09-15)
   Canvas instruments live in vigil.js (vigil, feathers, dawn). Here: headings
   rise the way a breath does, slow and settled; the accent phrase carries a thin
   gold rule that draws itself; content lifts by a hair; nothing is quick.
   ========================================================================== */

.vigil{position:absolute;pointer-events:none}
.vigil canvas{position:absolute;inset:0;width:100%;height:100%}
.feathers{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.feathers canvas{position:absolute;inset:0;width:100%;height:100%}
.dawn__sky{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:6px;box-shadow:0 30px 60px -36px rgba(38,30,22,.8)}
.dawn__sky canvas{position:absolute;inset:0;width:100%;height:100%}
.cta__vigil{position:absolute;left:0;right:0;bottom:0;height:13rem;pointer-events:none}

/* 1. breath */
.js .rise{opacity:0;transform:translateY(14px)}
.js .rise.in{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes rise{to{opacity:1;transform:none}}

/* 2. the gold rule */
.js .rise em{position:relative;display:inline-block}
.js .rise em::after{content:"";position:absolute;left:0;right:0;bottom:-.08em;height:1px;background:currentColor;opacity:.6;transform:scaleX(0);transform-origin:0 50%}
.js .rise.in em::after{animation:rule 1.1s cubic-bezier(.25,.85,.2,1) .5s forwards}
@keyframes rule{to{transform:scaleX(1)}}

/* 3. content lifts */
.js .fx{opacity:0;transform:translateY(10px);transition:opacity 1s cubic-bezier(.25,.85,.2,1),transform 1s cubic-bezier(.25,.85,.2,1)}
.js .fx.in{opacity:1;transform:none}
.js .fx.d1{transition-delay:.12s}.js .fx.d2{transition-delay:.24s}.js .fx.d3{transition-delay:.36s}.js .fx.d4{transition-delay:.48s}

/* 4. the dawn sequence */
.dawn.is-pinned .dawn__stage{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.dawn.is-pinned .step{opacity:.32;transition:opacity .6s ease,transform .6s cubic-bezier(.25,.85,.2,1);transform:translateY(4px)}
.dawn.is-pinned .step.is-on{opacity:1;transform:none}
.dawn.is-pinned .step.is-done{opacity:.6;transform:none}
.dawn.is-flat .step{opacity:1}

/* 5. the halo lights on hover */
.way{transition:background .4s,padding-left .4s cubic-bezier(.25,.85,.2,1)}
.way__mk{transition:color .4s,transform .4s cubic-bezier(.25,.85,.2,1)}
.way:hover{background:color-mix(in srgb,var(--gold) 8%,transparent);padding-left:1rem}
.way:hover .way__mk{color:var(--gold-d);}
.rev,.panel,.callout{transition:transform .45s cubic-bezier(.25,.85,.2,1),box-shadow .45s}
.rev:hover{}

/* 6. buttons breathe */
.btn{transition:transform .3s cubic-bezier(.25,.85,.2,1),background .3s,color .3s,box-shadow .3s}
.btn--umber:hover{}

@media (prefers-reduced-motion:reduce){
  .js .rise,.js .rise.in{opacity:1;transform:none;animation:none}
  .js .rise.in em::after{animation:none;transform:scaleX(1)}
  .js .fx{opacity:1;transform:none;transition:none}
  .way:hover,.rev:hover,.btn--umber:hover{transform:none;padding-left:0}
}