/* Harris Dynasty Media · motion layer.
   Every rule here is gated on html.m-on, which motion.js sets only when the visitor has not asked
   for reduced motion. Things move when the visitor scrolls, points or clicks, then settle.
   Nothing loops at rest. */

/* page to page: the old page lifts away, the new one rises in; nav and players stay put */
@media (prefers-reduced-motion: no-preference){
  @view-transition{navigation:auto}
  nav.top{view-transition-name:hd-nav}
  .station-fab{view-transition-name:hd-station}
  .chat-fab{view-transition-name:hd-chat}
  ::view-transition-old(root){animation:m-vt-out .32s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:m-vt-in .6s cubic-bezier(.2,.7,.2,1) both}
  @keyframes m-vt-out{to{opacity:0;transform:translateY(-16px)}}
  @keyframes m-vt-in{from{opacity:0;transform:translateY(22px)}}
}

/* headings: each word rises out of its own mask */
.m-on .m-words .mw{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.m-on .m-words .mwi{display:inline-block;translate:0 105%;transition:translate .9s var(--ease)}
.m-on .m-words.m-in .mwi{translate:0 0}

/* the hairline before every eyebrow draws itself in */
.m-on .eyebrow::before{transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .15s}
.m-on .eyebrow.m-in::before,.m-on .hero.in .eyebrow::before{transform:scaleX(1)}

/* hero: a gold rule draws under the accent word once the headline lands */
.m-on .hero h1 em{position:relative}
.m-on .hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .5s}
.m-on .hero h1 .w.in em::after{transform:scaleX(1)}
.m-on .hero .container,.m-on .hero .hero-bg{will-change:translate}

/* photos open behind a band-coloured curtain, the picture settling as it clears */
.m-on .m-cur{position:relative}
.m-on .m-cur::after{content:"";position:absolute;inset:0;z-index:4;background:var(--band);transform-origin:50% 0;transition:transform 1.15s var(--ease) var(--m-d,0s);pointer-events:none}
.m-on .m-cur.m-in::after{transform:scaleY(0)}
.m-on .m-cur img{scale:1.22;transition:transform 1s var(--ease),scale 1.7s var(--ease) var(--m-d,0s),filter .5s var(--ease)}
.m-on .m-cur.m-in img{scale:1}
.m-on .m-cur.m-par.m-in img{scale:1.1}
/* stand-alone pictures (flyers, the programme badge) wipe up with a clip instead */
.m-on .m-clip{clip-path:inset(100% 0 0 0);transition:clip-path 1.2s var(--ease) var(--m-d,0s),transform .6s var(--ease)}
.m-on .m-clip.m-in{clip-path:inset(0 0 0 0)}
.m-on .m-clip.m-done{clip-path:none}

/* the Urban Senate poster eases back into frame as it scrolls through */
.m-on .feature{overflow:clip}
.m-on .feature>img{transform-origin:50% 40%;will-change:scale}
.m-on .feature-bar{position:relative;z-index:1}

/* service list: rows slide in one after another; a gold rule runs under the one you point at */
.m-on .lane-list .lane{position:relative;opacity:0;translate:28px 0;transition:opacity .8s var(--ease),translate .8s var(--ease)}
.m-on .lane-list.m-in .lane{opacity:1;translate:0 0}
.m-on .lane-list .lane:nth-child(2){transition-delay:.1s}
.m-on .lane-list .lane:nth-child(3){transition-delay:.2s}
.m-on .lane-list .lane:nth-child(4){transition-delay:.3s}
.m-on .lane::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease)}
.m-on .lane:hover::after{transform:scaleX(1)}
.m-on .lane .n{display:inline-block;transition:translate .45s var(--ease),color .3s}
.m-on .lane:hover .n{translate:8px 0;color:var(--gold)}

/* price cards, partner names and share buttons arrive in turn */
.m-on .tiers .tier,.m-on .partners a,.m-on .share-row .share-btn{opacity:0;translate:0 22px}
.m-on .tiers .tier{transition:opacity .8s var(--ease) var(--m-d,0s),translate .8s var(--ease) var(--m-d,0s),transform .6s var(--ease)}
.m-on .partners a{transition:opacity .8s var(--ease) var(--m-d,0s),translate .8s var(--ease) var(--m-d,0s),border-color .25s,color .25s}
.m-on .share-row .share-btn{transition:all .25s var(--ease),opacity .7s var(--ease) var(--m-d,0s),translate .7s var(--ease) var(--m-d,0s)}
.m-on .tiers.m-in .tier,.m-on .partners.m-in a,.m-on .share-row.m-in .share-btn{opacity:1;translate:0 0}

/* ---------- desktop pointer only ---------- */
/* cards tilt toward the cursor with a soft light following it */
.m-fine .m-tilt{transition:transform .7s var(--ease);transform-style:preserve-3d}
.m-fine .m-tilt.m-tilting{transition:transform .14s linear}
.m-fine .m-sheen{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;transition:opacity .45s var(--ease);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,240,215,.22),rgba(255,240,215,0) 60%);mix-blend-mode:screen}
.m-fine .m-tilting>.m-sheen{opacity:1}
.m-fine .m-clip.m-tilt{transition:clip-path 1.2s var(--ease) var(--m-d,0s),transform .7s var(--ease)}
.m-fine .m-clip.m-tilt.m-tilting{transition:clip-path 1.2s var(--ease),transform .14s linear}
.m-fine .tier{position:relative}
.m-fine .strip figure:hover img{filter:brightness(1.2)}
.m-fine .strip figcaption b{transition:translate .5s var(--ease)}
.m-fine .strip figure:hover figcaption b{translate:0 -4px}

/* buttons lean toward the pointer */
.m-fine .btn{transition:background .3s var(--ease),color .3s var(--ease),box-shadow .3s var(--ease),transform .3s var(--ease),translate .5s var(--ease)}
.m-fine .btn.m-pull{transition-duration:.3s,.3s,.3s,.3s,.12s}
.m-fine .share-row .share-btn.m-pull{transition-duration:.25s,.7s,.12s}