/* Interaction and motion layer. Progressive enhancement only; resting content remains visible without JS. */

@view-transition{ navigation: auto; }

@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){animation:mg-page-out .16s ease both}
  ::view-transition-new(root){animation:mg-page-in .34s cubic-bezier(.22,1,.36,1) both}
  @keyframes mg-page-out{to{opacity:.72}}
  @keyframes mg-page-in{from{opacity:0}to{opacity:1}}
}

html.mg-ux-motion{scroll-padding-top:6rem}
html.mg-ux-motion :target{scroll-margin-top:6rem}
html.mg-ux-motion .conversation__header strong[aria-live]{min-width:3.6rem;text-align:right}
html.mg-ux-motion .conversation__error[role="alert"]{display:block}
html.mg-ux-motion .conversation__error[hidden]{display:none}


/* Motion primitives are only applied by JS. With JS unavailable, content stays visible. */
@media (prefers-reduced-motion: no-preference){
  html.mg-ux-motion .mg-motion-copy, html.mg-ux-motion .mg-motion-row, html.mg-ux-motion .mg-motion-media, html.mg-ux-motion .mg-motion-sheet{
    opacity:0;
    transition-property:opacity,transform;
    transition-duration:.78s;
    transition-timing-function:cubic-bezier(.22,1,.36,1);
    transition-delay:var(--mg-delay,0ms);
  }
  html.mg-ux-motion .mg-motion-copy{transform:translate3d(0,.9rem,0)}
  html.mg-ux-motion .mg-motion-row{transform:translate3d(.9rem,0,0)}
  html.mg-ux-motion .mg-motion-media{transform:scale(1.022);transform-origin:50% 50%}
  html.mg-ux-motion .mg-motion-copy.is-inview, html.mg-ux-motion .mg-motion-row.is-inview, html.mg-ux-motion .mg-motion-media.is-inview{opacity:1;transform:none}

  
  
  
  
  
  
  
  
  @keyframes mg-file-plane-one{from{opacity:0;transform:translate3d(-13%,0,0) scaleX(.82)}to{opacity:1}}
  @keyframes mg-file-plane-two{from{opacity:0;transform:translate3d(17%,0,0) scaleX(.82)}to{opacity:.86}}
  @keyframes mg-line-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}

  
  
  
  

  
  
  
  
  
  
  

  /* Journal: editorial rhythm, one recurring grammar. */
  html.mg-ux-motion .journal-recovered .jm-cover__copy{
    animation:mg-journal-copy-in .82s .05s cubic-bezier(.22,1,.36,1) both;
  }
  html.mg-ux-motion .journal-recovered .jm-cover__hero{
    animation:mg-journal-hero-in .95s .12s cubic-bezier(.22,1,.36,1) both;
  }
  html.mg-ux-motion .journal-recovered .jm-cover__contents a{
    animation:mg-journal-index-in .62s cubic-bezier(.22,1,.36,1) both;
    animation-delay:calc(.42s + var(--mg-delay,0ms));
    transition:opacity .22s ease,transform .42s cubic-bezier(.22,1,.36,1),border-color .22s ease;
  }
  @keyframes mg-journal-copy-in{from{opacity:0;transform:translate3d(0,1.2rem,0)}to{opacity:1;transform:none}}
  @keyframes mg-journal-hero-in{from{opacity:.35;transform:scale(1.026)}to{opacity:1;transform:none}}
  @keyframes mg-journal-inset-in{from{opacity:0;transform:translate3d(1.1rem,1rem,0) rotate(1.5deg)}to{opacity:1}}
  @keyframes mg-journal-index-in{from{opacity:0;transform:translateY(.5rem)}to{opacity:1;transform:none}}

  html.mg-ux-motion .journal-recovered .jm-order li.mg-motion-row{transform:translate3d(0,.75rem,0)}
  html.mg-ux-motion .journal-recovered .jm-living__options article.mg-motion-row{transform:translate3d(.8rem,0,0)}
  html.mg-ux-motion .journal-recovered .jm-close__copy.mg-motion-copy{transform:translate3d(0,1rem,0)}

  /* Privacy: movement is deliberately quiet and functional. */
  html.mg-ux-motion .privacy-recovered .policy-hero h1{
    animation:mg-policy-title-in .72s .08s cubic-bezier(.22,1,.36,1) both;
  }
  html.mg-ux-motion .privacy-recovered .policy-hero>p:last-child{
    animation:mg-policy-note-in .68s .24s cubic-bezier(.22,1,.36,1) both;
  }
  html.mg-ux-motion .privacy-recovered .policy-hero::after{
    transform-origin:top center;animation:mg-policy-rule-in .8s .28s cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes mg-policy-title-in{from{opacity:0;transform:translate3d(0,.9rem,0)}to{opacity:1;transform:none}}
  @keyframes mg-policy-note-in{from{opacity:0;transform:translate3d(.6rem,0,0)}to{opacity:1;transform:none}}
  @keyframes mg-policy-rule-in{from{transform:scaleY(0)}to{transform:scaleY(1)}}
  html.mg-ux-motion .privacy-recovered .policy-body section>div.mg-motion-copy{transform:translate3d(0,.55rem,0)}
  html.mg-ux-motion .privacy-recovered .policy-contact h2.mg-motion-copy{transform:translate3d(0,.7rem,0)}

  /* Interaction polish: feedback without changing resting composition. */

  html.mg-ux-motion .journal-recovered .jm-cover__contents a:hover, html.mg-ux-motion .journal-recovered .jm-cover__contents a:focus-visible{transform:translate3d(.35rem,0,0)}
  html.mg-ux-motion .conversation__step, html.mg-ux-motion .conversation__sent{scroll-behavior:smooth}
}

@media (max-width:900px) and (prefers-reduced-motion:no-preference){
  
  
  html.mg-ux-motion .mg-motion-copy, html.mg-ux-motion .mg-motion-row, html.mg-ux-motion .mg-motion-media{transition-duration:.64s}
}

@media (prefers-reduced-motion:reduce){
  html.mg-ux-motion *, html.mg-ux-motion *::before, html.mg-ux-motion *::after{
    animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
  html.mg-ux-motion .mg-motion-copy, html.mg-ux-motion .mg-motion-row, html.mg-ux-motion .mg-motion-media, html.mg-ux-motion .mg-motion-sheet{opacity:1!important;transform:none!important}
  
}

/* Precision choreography: motion communicates cause, reading order and completion. */

@media (prefers-reduced-motion:no-preference){
  /* Global interaction feedback: tactile, brief, and reversible. */
  html.mg-ux-motion .button:active,
  html.mg-ux-motion .mg-shell__action:active,
  html.mg-ux-motion .mg-shell__menu-action:active,
  html.mg-ux-motion [data-open-conversation]:active{transform:translateY(0) scale(.985)}

  /* Mobile menu: the field appears first, choices settle immediately after. */
  html.mg-ux-motion .mg-shell__menu-nav a,
  html.mg-ux-motion .mg-shell__menu-action,
  html.mg-ux-motion .mg-shell__menu-utility,
  html.mg-ux-motion .mg-shell__menu-note{
    opacity:0;transform:translate3d(0,.65rem,0);
    transition:opacity .24s ease,transform .42s cubic-bezier(.16,1,.3,1)
  }
  html.mg-ux-motion .mg-shell__menu.is-open .mg-shell__menu-nav a,
  html.mg-ux-motion .mg-shell__menu.is-open .mg-shell__menu-action,
  html.mg-ux-motion .mg-shell__menu.is-open .mg-shell__menu-utility,
  html.mg-ux-motion .mg-shell__menu.is-open .mg-shell__menu-note{opacity:1;transform:none}
  html.mg-ux-motion .mg-shell__menu.is-open .mg-shell__menu-nav a:nth-child(1){transition-delay:.025s}
  html.mg-ux-motion .mg-shell__menu.is-open .mg-shell__menu-nav a:nth-child(2){transition-delay:.055s}
  html.mg-ux-motion .mg-shell__menu.is-open .mg-shell__menu-nav a:nth-child(3){transition-delay:.085s}
  html.mg-ux-motion .mg-shell__menu.is-open .mg-shell__menu-nav a:nth-child(4){transition-delay:.115s}
  html.mg-ux-motion .mg-shell__menu.is-open .mg-shell__menu-action{transition-delay:.13s}
  html.mg-ux-motion .mg-shell__menu.is-open .mg-shell__menu-utility{transition-delay:.155s}
  html.mg-ux-motion .mg-shell__menu.is-open .mg-shell__menu-note{transition-delay:.18s}

  /* Enquiry: faster arrival, visible veil response, and a clean close/success handoff. */
  html.mg-ux-motion .conversation__veil{animation:mg-v24-veil-in .24s ease both}
  html.mg-ux-motion .conversation__panel{animation:mg-v24-panel-in .28s ease both}
  html.mg-ux-motion .conversation.is-closing .conversation__veil{animation:mg-v24-veil-out .19s ease both}
  html.mg-ux-motion .conversation.is-closing .conversation__panel{animation:mg-v24-panel-out .19s ease both}
  html.mg-ux-motion .conversation__sent:not([hidden]){animation:mg-v24-success-in .5s cubic-bezier(.16,1,.3,1) both}
  @keyframes mg-v24-veil-in{from{opacity:0}to{opacity:1}}
  @keyframes mg-v24-panel-in{from{opacity:.82}to{opacity:1}}
  @keyframes mg-v24-veil-out{to{opacity:0}}
  @keyframes mg-v24-panel-out{to{opacity:.82}}
  @keyframes mg-v24-success-in{from{opacity:0;transform:translate3d(0,.75rem,0)}to{opacity:1;transform:none}}

  /* HOME — v26 choreography is owned entirely by home-magazine.css. */

  /* JOURNAL — animate the publication system, not generic page furniture. */
  html.mg-ux-motion body.journal-recovered .jm-cover::after{
    transform-origin:top center;animation:mg-v24-spine-in .88s .16s cubic-bezier(.16,1,.3,1) both
  }
  @keyframes mg-v24-spine-in{from{transform:scaleY(0);opacity:0}to{transform:scaleY(1);opacity:1}}

  html.mg-ux-motion body.journal-recovered .jm-story__figure.mg-motion-media,
  html.mg-ux-motion body.journal-recovered .jm-living__figure.mg-motion-media{opacity:1;transform:none}
  html.mg-ux-motion body.journal-recovered .jm-story__figure.mg-motion-media .jm-image,
  html.mg-ux-motion body.journal-recovered .jm-living__figure.mg-motion-media .jm-image{
    clip-path:inset(0 0 100% 0);transition:clip-path .92s cubic-bezier(.16,1,.3,1)
  }
  html.mg-ux-motion body.journal-recovered .jm-story__figure.mg-motion-media.is-inview .jm-image,
  html.mg-ux-motion body.journal-recovered .jm-living__figure.mg-motion-media.is-inview .jm-image{clip-path:inset(0)}
  html.mg-ux-motion body.journal-recovered .jm-story__figure.mg-motion-media img,
  html.mg-ux-motion body.journal-recovered .jm-living__figure.mg-motion-media img{
    transform:scale(1.025);transition:transform 1.05s cubic-bezier(.16,1,.3,1)
  }
  html.mg-ux-motion body.journal-recovered .jm-story__figure.mg-motion-media.is-inview img,
  html.mg-ux-motion body.journal-recovered .jm-living__figure.mg-motion-media.is-inview img{transform:none}
  html.mg-ux-motion body.journal-recovered .jm-story__figure.mg-motion-media figcaption,
  html.mg-ux-motion body.journal-recovered .jm-living__figure.mg-motion-media figcaption{
    opacity:0;transform:translate3d(0,.3rem,0);transition:opacity .3s .48s ease,transform .42s .44s cubic-bezier(.16,1,.3,1)
  }
  html.mg-ux-motion body.journal-recovered .jm-story__figure.mg-motion-media.is-inview figcaption,
  html.mg-ux-motion body.journal-recovered .jm-living__figure.mg-motion-media.is-inview figcaption{opacity:1;transform:none}
  html.mg-ux-motion body.journal-recovered .jm-cover__contents a.is-current,
  html.mg-ux-motion body.journal-recovered .jm-cover__contents a[aria-current="location"]{
    border-color:currentColor;transform:translate3d(.35rem,0,0)
  }

  
  
  
  
  
  
  
  
  

  /* PRIVACY — preserve restraint; only the existing rule system completes itself. */
  html.mg-ux-motion body.privacy-recovered .policy-body section{position:relative}
  html.mg-ux-motion body.privacy-recovered .policy-body section::after{
    transform-origin:left center;transform:scaleX(0);transition:transform .72s cubic-bezier(.16,1,.3,1)
  }
  html.mg-ux-motion body.privacy-recovered .policy-body section:has(.mg-motion-copy.is-inview)::after{transform:scaleX(1)}
}



/* Home v26: the Mediation exit uses the global scroll padding only, avoiding a doubled target offset. */
html.mg-ux-motion body.magazine-home #dhaka:target{scroll-margin-top:0}