/* Native controls keep their own state; this layer only adds motion. */
:root{--interaction-ease:cubic-bezier(.22,1,.36,1)}

/* Two real text layers keep one accessible label and preserve Arabic shaping. */
.button .interaction-label{position:relative;display:block;min-width:0;overflow:clip;overflow-clip-margin:.15em;font-size:inherit;line-height:inherit}
.button .interaction-label>span{display:block;font-size:inherit;line-height:inherit;transition:translate .55s var(--interaction-ease)}
.button .interaction-label-secondary{position:absolute;inset:0;translate:0 125%}
.button .interaction-arrow{position:relative;display:block;flex-shrink:0;width:1em;height:1em;overflow:clip}
.button .interaction-arrow>span{position:absolute;inset:0;display:block;font-size:inherit;line-height:1;transition:translate .55s var(--interaction-ease)}
.button .interaction-arrow-secondary{translate:-125% 125%}
.button:focus-visible .interaction-label-primary{translate:0 -125%}
.button:focus-visible .interaction-label-secondary{translate:0 0}
.button:focus-visible .interaction-arrow-primary{translate:125% -125%}
.button:focus-visible .interaction-arrow-secondary{translate:0 0}

/* Individual translate composes with reveal and vehicle sequence transforms. */
.interaction-magnetic{translate:var(--interaction-x,0px) var(--interaction-y,0px);transition:background .25s,color .25s,transform .25s,translate .55s var(--interaction-ease)}
.text-link>[aria-hidden]{display:inline-block;transition:translate .45s var(--interaction-ease)}
.text-link:focus-visible>[aria-hidden]{translate:3px -3px}
[dir="rtl"] .text-link:focus-visible>[aria-hidden]{translate:-3px -3px}
.film-button .play-circle{transition:background .25s,border-color .25s,scale .45s var(--interaction-ease)}
.film-button:focus-visible .play-circle{scale:1.08}
.outline-button,.round-link{transition:background .25s,color .25s,border-color .25s,scale .35s var(--interaction-ease)}
.outline-button:active,.round-link:active{scale:.94}
.menu-toggle span{transition:transform .45s var(--interaction-ease)}

@media(hover:hover) and (pointer:fine){
  .button:hover .interaction-label-primary{translate:0 -125%}
  .button:hover .interaction-label-secondary{translate:0 0}
  .button:hover .interaction-arrow-primary{translate:125% -125%}
  .button:hover .interaction-arrow-secondary{translate:0 0}
  .text-link:hover>[aria-hidden]{translate:3px -3px}
  [dir="rtl"] .text-link:hover>[aria-hidden]{translate:-3px -3px}
  .film-button:hover .play-circle{scale:1.08}
}

/* Display and focus remain controlled by app.js and the native hidden attribute. */
.mobile-nav:not([hidden]){animation:interaction-menu-panel .42s var(--interaction-ease) both}
.mobile-nav:not([hidden])>a{animation:interaction-menu-link .55s var(--interaction-ease) var(--interaction-menu-delay,0ms) both}
@keyframes interaction-menu-panel{from{opacity:0;clip-path:inset(0 0 100% 0)}to{opacity:1;clip-path:inset(0)}}
@keyframes interaction-menu-link{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}

/* Modern engines interpolate native details without intercepting activation. */
@supports (interpolate-size:allow-keywords) and selector(details::details-content){
  .faq-list details{interpolate-size:allow-keywords}
  .faq-list details::details-content{height:0;overflow:clip;transition:height .46s var(--interaction-ease),content-visibility .46s allow-discrete}
  .faq-list details[open]::details-content{height:auto}
}
.faq-list details.interaction-faq-opening{overflow:hidden}
.faq-list summary>span{transition:transform .4s var(--interaction-ease),color .25s}

/* showModal/close, Escape, focus restoration and backdrop clicks stay native. */
.media-dialog[open]{animation:interaction-dialog .48s var(--interaction-ease) both}
.media-dialog[open]::backdrop{animation:interaction-dialog-backdrop .35s ease-out both}
@keyframes interaction-dialog{from{opacity:0;translate:0 20px;scale:.985}to{opacity:1;translate:0 0;scale:1}}
@keyframes interaction-dialog-backdrop{from{opacity:0}to{opacity:1}}

html.motion-paused .interaction-magnetic{translate:none!important}
html.motion-paused .interaction-label>span,
html.motion-paused .interaction-arrow>span,
html.motion-paused .text-link>[aria-hidden],
html.motion-paused .film-button .play-circle,
html.motion-paused .outline-button,
html.motion-paused .round-link,
html.motion-paused .menu-toggle span,
html.motion-paused .faq-list summary>span{transition:none!important}
html.motion-paused .interaction-label-primary,
html.motion-paused .interaction-arrow-primary,
html.motion-paused .text-link>[aria-hidden]{translate:none!important}
html.motion-paused .interaction-label-secondary,
html.motion-paused .interaction-arrow-secondary{visibility:hidden}
html.motion-paused .film-button .play-circle,
html.motion-paused .outline-button,
html.motion-paused .round-link{scale:1!important}
html.motion-paused .mobile-nav,
html.motion-paused .mobile-nav>a,
html.motion-paused .media-dialog,
html.motion-paused .media-dialog::backdrop{animation:none!important}
@supports selector(details::details-content){html.motion-paused .faq-list details::details-content{transition:none!important}}

@media(prefers-reduced-motion:reduce){
  .interaction-magnetic{translate:none!important}
  .interaction-label>span,.interaction-arrow>span,.text-link>[aria-hidden],.film-button .play-circle,.outline-button,.round-link,.menu-toggle span,.faq-list summary>span{transition:none!important}
  .interaction-label-primary,.interaction-arrow-primary,.text-link>[aria-hidden]{translate:none!important}
  .interaction-label-secondary,.interaction-arrow-secondary{visibility:hidden}
  .film-button .play-circle,.outline-button,.round-link{scale:1!important}
  .mobile-nav,.mobile-nav>a,.media-dialog,.media-dialog::backdrop{animation:none!important}
  @supports selector(details::details-content){.faq-list details::details-content{transition:none!important}}
}