/* Animate only the arrow; link text, underlines and layout stay still. */
.motion-arrow{display:inline-block;--arrow-x:2px;--arrow-y:-2px;transition:transform .2s ease}
.motion-arrow[data-direction="down"]{--arrow-x:0px;--arrow-y:4px}
.motion-arrow[data-direction="up"]{--arrow-x:0px;--arrow-y:-3px}
.motion-arrow[data-direction="left"]{--arrow-x:-3px;--arrow-y:0px}
.motion-arrow[data-direction="right"]{--arrow-x:3px;--arrow-y:0px}
.account-top a .motion-arrow{color:inherit}
@media(prefers-reduced-motion:no-preference){
  :is(a,button):focus-visible .motion-arrow,
  :is(a,button):active .motion-arrow{transform:translate(var(--arrow-x),var(--arrow-y))}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  :is(a,button):hover .motion-arrow{transform:translate(var(--arrow-x),var(--arrow-y))}
}
@media(prefers-reduced-motion:reduce){.motion-arrow{transition:none!important;transform:none!important}}

/* Vector ornaments keep their resting size; only the drawing moves. */
/* The artwork supplies tap feedback; suppress the browser's rectangular tint. */
button.art-motif,.duo-logo .bud-glint-trigger{-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none}
button.art-motif{padding:0;border:0;border-radius:0;background:transparent;color:inherit;line-height:0;cursor:pointer;touch-action:manipulation;flex-shrink:0;transform:var(--motif-rest,none);transition:transform .65s cubic-bezier(.2,.7,.2,1)}
.art-motif .motif-vector{display:block;width:100%;height:100%;max-width:none;overflow:visible}
button.art-motif:focus-visible{outline:1px solid currentColor;outline-offset:8px}
button.art-motif.is-engaged{transform:var(--motif-rest,rotate(0deg)) rotate(16deg) scale(1.14)}
/* Rose paths animate inside an unscaled SVG viewport, including at rest. */
button.art-motif:not(.sword-motif).is-engaged{transform:var(--motif-rest,none)}
button.art-motif.vector-ready,button.art-motif.vector-ready.is-engaged{transform:none!important;transition:none;filter:none;background:transparent;-webkit-mask:none;mask:none}
.pink-panel-foot .official-rose.vector-ready{color:#000;filter:none}
.portal-section-label button.mini-rose.vector-ready{background:transparent;-webkit-mask:none;mask:none;color:var(--portal-pink)}
.setup-rose.art-motif.vector-ready{background:transparent;-webkit-mask:none;mask:none;color:var(--portal-pink)}
button.sword-motif{color:var(--pink,#ff65a0)}
button.sword-motif.is-engaged{transform:scale(1.08)}
.sword-swing{transform-box:view-box;transform-origin:0 0;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.sword-motif.is-engaged .sword-swing{transform:rotate(-16deg)}
.setup-rose.art-motif{--motif-rest:rotate(-12deg) scale(.85);background:var(--portal-pink);transform:var(--motif-rest)}
.portal-section-label.motion-label::before{display:none}
.portal-section-label button.mini-rose{display:block;width:21px;height:21px;min-height:0;flex:0 0 21px;background:var(--portal-pink);-webkit-mask:url('/home-assets/utena-official-blossom-v1.svg') center/contain no-repeat;mask:url('/home-assets/utena-official-blossom-v1.svg') center/contain no-repeat}
.portal-section-label button.mini-rose.is-engaged{transform:rotate(-22deg) scale(1.24)}
.portal-section-label:focus-within{outline:1px solid var(--portal-pink);outline-offset:5px}
.setup-rose.art-motif:focus-visible{filter:drop-shadow(0 0 2px var(--portal-pink))}

/* Keep the rays unclipped even before SVG motion initializes or in Canvas fallback. */
body .duo-art.has-bud-glint{overflow:visible}
.duo-logo .bud-glint{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:0;pointer-events:none}
.duo-logo .bud-glint-trigger{position:absolute;left:49.8829431431%;top:6.4414414415%;width:44px;height:44px;min-height:0;transform:translate(-50%,-50%);padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer;pointer-events:auto;touch-action:manipulation}
.duo-logo .bud-glint-trigger:focus-visible{outline:1px solid #ff65a0;outline-offset:1px}
.duo-logo .bud-glint-trigger.is-lit{outline:1px solid #ff65a0;outline-offset:-8px}

@media(prefers-reduced-motion:no-preference){
  .hero-copy,.subscription-copy,.account-intro,.portal-login-intro,.admin-intro{animation:ink-arrive .65s cubic-bezier(.2,.7,.2,1) both}
  @keyframes ink-arrive{from{opacity:0;translate:0 8px}to{opacity:1;translate:0 0}}
}

/* Ink-like navigation underlines. */
:is(.header,.subscription-header,.admin-header) nav a{position:relative}
:is(.header,.subscription-header,.admin-header) nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s ease}
:is(.header,.subscription-header,.admin-header) nav a:focus-visible::after{transform:scaleX(1);transform-origin:left}
.admin-user,.admin-traffic>article{transition:border-color .3s,background-color .3s}
.admin-user:focus-within{background-color:#ff65a007;border-color:#ff65a066}
@media(hover:hover) and (pointer:fine){
  :is(.header,.subscription-header,.admin-header) nav a:hover::after{transform:scaleX(1);transform-origin:left}
  .admin-user:hover,.admin-traffic>article:hover{background-color:#ff65a007;border-color:#ff65a066}
}
@media(prefers-reduced-motion:reduce){
  button.art-motif,button.art-motif.is-engaged{transform:var(--motif-rest,none)!important;transition:none!important}
  .sword-swing{transform:none!important;transition:none!important}
  :is(.header,.subscription-header,.admin-header) nav a::after,.admin-user,.admin-traffic>article{transition:none}
}